{"version":3,"sources":["../components/form/native-select.tsx"],"sourcesContent":["\"use client\";\nimport React, { SelectHTMLAttributes } from 'react';\nimport _kebabCase from 'lodash-es/kebabCase';\nimport _isString from 'lodash-es/isString';\nimport { cn } from '../../utils/ui';\nimport { Label } from '../ui/label';\n\ntype NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement>;\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nfunction listToSelectOptions(items: string[]) {\n  return items.map((item) => {\n    return { label: item, value: item };\n  });\n}\n\nexport interface FormNativeSelectProps extends NativeSelectProps {\n  id?: string;\n  name: string;\n  label: string;\n  selectProps: NativeSelectProps;\n  data: SelectOption[] | string[];\n  defaultValue?: string;\n  classNames?: {\n    wrapper?: string;\n    label?: string;\n    input?: string;\n  };\n}\n\nexport function FormNativeSelect({\n  id,\n  name,\n  label,\n  selectProps,\n  data,\n  defaultValue,\n  classNames,\n  required,\n  disabled,\n  ...rest\n}: FormNativeSelectProps) {\n  let _options: SelectOption[] = [];\n  if (data.length > 0) {\n    if (_isString(data[0])) {\n      _options = listToSelectOptions(data as string[]);\n    } else {\n      _options = data as SelectOption[];\n    }\n  }\n\n  if (!id) id = _kebabCase(name);\n\n  return (\n    <div className={cn('$form-native-select space-y-1', classNames?.wrapper)}>\n      {label && (\n        <Label htmlFor={id} className={classNames?.label} required={required}>\n          {label}\n        </Label>\n      )}\n\n      <select\n        {...selectProps}\n        id={id}\n        name={name}\n        autoComplete={id}\n        className={cn(\n          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n          classNames?.input ?? '',\n        )}\n        required={required}\n        disabled={disabled}\n        defaultValue={defaultValue}\n        {...rest}\n      >\n        {_options.map((option, index) => {\n          return (\n            <option\n              key={option.value}\n              value={option.value}\n              // Unfortunately, the selected prop is not properly set at the nested component level.\n              // use `defaultValue` in select element.\n              // selected={defaultValue ? defaultValue === option.value : index === 0}\n            >\n              {option.label}\n            </option>\n          );\n        })}\n      </select>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AACA,OAAO,WAAqC;AAC5C,OAAO,gBAAgB;AACvB,OAAO,eAAe;AAWtB,SAAS,oBAAoB,OAAiB;AAC5C,SAAO,MAAM,IAAI,CAAC,SAAS;AACzB,WAAO,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EACpC,CAAC;AACH;AAgBO,SAAS,iBAAiB,IAWP;AAXO,eAC/B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA3CF,IAkCiC,IAU5B,iBAV4B,IAU5B;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AA3CF,MAAAA;AA8CE,MAAI,WAA2B,CAAC;AAChC,MAAI,KAAK,SAAS,GAAG;AACnB,QAAI,UAAU,KAAK,CAAC,CAAC,GAAG;AACtB,iBAAW,oBAAoB,IAAgB;AAAA,IACjD,OAAO;AACL,iBAAW;AAAA,IACb;AAAA,EACF;AAEA,MAAI,CAAC,GAAI,MAAK,WAAW,IAAI;AAE7B,SACE,oCAAC,SAAI,WAAW,GAAG,iCAAiC,yCAAY,OAAO,KACpE,SACC,oCAAC,SAAM,SAAS,IAAI,WAAW,yCAAY,OAAO,YAC/C,KACH,GAGF;AAAA,IAAC;AAAA,oDACK,cADL;AAAA,MAEC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,SACAA,MAAA,yCAAY,UAAZ,OAAAA,MAAqB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACI;AAAA,IAEH,SAAS,IAAI,CAAC,QAAQ,UAAU;AAC/B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,OAAO;AAAA,UACZ,OAAO,OAAO;AAAA;AAAA,QAKb,OAAO;AAAA,MACV;AAAA,IAEJ,CAAC;AAAA,EACH,CACF;AAEJ;","names":["_a"]}