the-omelet-ui 0.1.9 → 1.0.0

package/dist/index.cjs

@@ -55,13 +55,13 @@ var buttonStyles = classVarianceAuthority.cva(
     variants: {
       variant: {
         solid: "",
-        outline: "border bg-transparent",
+        outline: "border bg-transparent border-[#C9D7E3]",
         ghost: "bg-transparent"
       },
       size: {
-        sm: "h-10 px-2 py-3 text-sm",
-        md: "h-12 px-2 py-4 text-md",
-        lg: "h-14 px-4 py-6 text-xl"
+        sm: "h-8 px-2 py-3 text-sm",
+        md: "h-10 px-2 py-3 text-md",
+        lg: "h-12 px-2 py-4 text-xl"
       },
       color: {
         // แผงสีพรีเซ็ต (เพิ่มได้ตามต้องการ)
@@ -85,8 +85,8 @@ var buttonStyles = classVarianceAuthority.cva(
       { variant: "solid", color: "yellow", class: "bg-yellow-500 text-black hover:bg-yellow-600" },
       { variant: "solid", color: "violet", class: "bg-violet-600 text-white hover:bg-violet-700" },
       // OUTLINE
-      { variant: "outline", color: "neutral", class: "border-neutral-900 text-neutral-900 hover:bg-neutral-50" },
-      { variant: "outline", color: "primary", class: "border-black text-black hover:bg-black/[0.06]" },
+      { variant: "outline", color: "neutral", class: "border-[#C9D7E3] text-neutral-900 hover:bg-neutral-50" },
+      { variant: "outline", color: "primary", class: "border-[#C9D7E3] text-black hover:bg-black/[0.06]" },
       { variant: "outline", color: "red", class: "border-red-600 text-red-700 hover:bg-red-50" },
       { variant: "outline", color: "green", class: "border-green-600 text-green-700 hover:bg-green-50" },
       { variant: "outline", color: "blue", class: "border-blue-600 text-blue-700 hover:bg-blue-50" },
@@ -27115,7 +27115,9 @@ function SearchSelect({
   searchButtonClassName,
   checkedColor = "primary",
   checkedClassName,
-  renderTriggerValue
+  renderTriggerValue,
+  label,
+  required
 }) {
   const [open, setOpen] = React29__namespace.useState(false);
   const [q, setQ] = React29__namespace.useState("");
@@ -27164,6 +27166,7 @@ function SearchSelect({
     return `\u0E40\u0E25\u0E37\u0E2D\u0E01 ${selectedItems.length} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`;
   }, [selectedItems, isMulti, triggerPlaceholder]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Root22, { open, onOpenChange: setOpen, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(LabelInput, { label, required }),
     /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, children: trigger ?? // Trigger แบบ "ฟิลด์มีกรอบ + ลูกศร"
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -28141,14 +28144,225 @@ var CheckboxBase = React29__namespace.forwardRef(function CheckboxBase2({
 });
 CheckboxBase.displayName = "Checkbox";
 var Checkbox = CheckboxBase;
+var toDistrict = (district, locale) => {
+  if (locale === "en") {
+    return {
+      id: district.id,
+      name: district.name_en,
+      value: district.id,
+      label: district.name_en
+    };
+  } else {
+    return {
+      id: district.id,
+      name: district.name_th,
+      value: district.id,
+      label: district.name_th
+    };
+  }
+};
+var getDistricts = async (provinceId) => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/district.json");
+  const data = await response.json();
+  const districts = data.filter((district) => district.province_id === provinceId);
+  return districts;
+};
+var DistrictDropdown = ({ locale = "th", searchPlaceholder = "Search District", placeholder = "Select District", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false, provinceId }) => {
+  const [districts, setDistricts] = React29.useState([]);
+  const [currentDistrict, setCurrentDistrict] = React29.useState(null);
+  React29.useEffect(() => {
+    if (!provinceId) return;
+    getDistricts(provinceId).then(setDistricts);
+  }, [provinceId]);
+  React29.useEffect(() => {
+    if (value) {
+      const district = districts.find((d) => {
+        if (locale === "th") {
+          return d.name_th === value;
+        } else {
+          return d.name_en === value;
+        }
+      });
+      if (district) {
+        setCurrentDistrict(district);
+      }
+    }
+  }, [districts, value, locale]);
+  const onSelect = React29.useCallback((id) => {
+    const district = districts.find((d) => d.id === id);
+    if (district) {
+      setCurrentDistrict(district);
+      onChange?.(district);
+    }
+  }, [districts]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SearchSelect,
+    {
+      items: districts.map((district) => toDistrict(district, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentDistrict?.id,
+      required
+    }
+  ) });
+};
+var toProvince = (province, locale) => {
+  if (locale === "en") {
+    return {
+      id: province.id,
+      name: province.name_en,
+      value: province.id,
+      label: province.name_en
+    };
+  } else {
+    return {
+      id: province.id,
+      name: province.name_th,
+      value: province.id,
+      label: province.name_th
+    };
+  }
+};
+var getProvinces = async () => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/province.json");
+  const data = await response.json();
+  return data;
+};
+var ProvinceDropdown = ({ locale = "th", searchPlaceholder = "Search Province", placeholder = "Select Province", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false }) => {
+  const [provinces, setProvinces] = React29.useState([]);
+  const [currentProvince, setCurrentProvince] = React29.useState(null);
+  React29.useEffect(() => {
+    getProvinces().then(setProvinces);
+  }, []);
+  React29.useEffect(() => {
+    if (value) {
+      const province = provinces.find((p) => {
+        if (locale === "th") {
+          return p.name_th === value;
+        } else {
+          return p.name_en === value;
+        }
+      });
+      if (province) {
+        setCurrentProvince(province);
+      }
+    }
+  }, [provinces, value, locale]);
+  const onSelect = React29.useCallback((id) => {
+    const province = provinces.find((p) => p.id === id);
+    if (province) {
+      setCurrentProvince(province);
+      onChange?.(province);
+    }
+  }, [provinces]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SearchSelect,
+    {
+      items: provinces.map((province) => toProvince(province, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentProvince?.id,
+      required
+    }
+  ) });
+};
+var toSubDistrict = (subDistrict, locale) => {
+  if (locale === "en") {
+    return {
+      id: subDistrict.id,
+      name: subDistrict.name_en,
+      value: subDistrict.id,
+      label: subDistrict.name_en
+    };
+  } else {
+    return {
+      id: subDistrict.id,
+      name: subDistrict.name_th,
+      value: subDistrict.id,
+      label: subDistrict.name_th
+    };
+  }
+};
+var getSubDistricts = async (districtId) => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/sub_district.json");
+  const data = await response.json();
+  const subDistricts = data.filter((subDistrict) => subDistrict.district_id === districtId);
+  return subDistricts;
+};
+var SubDistrictDropdown = ({ locale = "th", searchPlaceholder = "Search District", placeholder = "Select District", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false, districtId }) => {
+  const [districts, setDistricts] = React29.useState([]);
+  const [currentDistrict, setCurrentDistrict] = React29.useState(null);
+  React29.useEffect(() => {
+    if (!districtId) return;
+    getSubDistricts(districtId).then(setDistricts);
+  }, [districtId]);
+  React29.useEffect(() => {
+    if (value) {
+      const district = districts.find((d) => {
+        if (locale === "th") {
+          return d.name_th === value;
+        } else {
+          return d.name_en === value;
+        }
+      });
+      if (district) {
+        setCurrentDistrict(district);
+      }
+    }
+  }, [districts, value, locale]);
+  const onSelect = React29.useCallback((id) => {
+    const district = districts.find((d) => d.id === id);
+    if (district) {
+      setCurrentDistrict(district);
+      onChange?.(district);
+    }
+  }, [districts]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SearchSelect,
+    {
+      items: districts.map((district) => toSubDistrict(district, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentDistrict?.id,
+      required
+    }
+  ) });
+};
 
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.DatePickerInput = DatePickerInput;
+exports.DistrictDropdown = DistrictDropdown;
 exports.LabelInput = LabelInput;
 exports.Pagination = Pagination;
+exports.ProvinceDropdown = ProvinceDropdown;
 exports.SearchSelect = SearchSelect;
+exports.SubDistrictDropdown = SubDistrictDropdown;
 exports.TextInput = TextInput;
 exports.Toggle = Toggle;
 exports.UploadImage = UploadImage;

package/dist/index.d.cts

@@ -144,8 +144,10 @@ type SearchSelectProps = {
     checkedClassName?: string;
     /** สรุปค่าที่เลือกบน trigger (ถ้าไม่ส่ง: single=label, multi="เลือก n รายการ") */
     renderTriggerValue?: (selectedIds: string[], selectedItems: BaseItem[]) => React.ReactNode;
+    label?: string;
+    required?: boolean;
 };
-declare function SearchSelect({ trigger, triggerPlaceholder, items, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading, emptyLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
+declare function SearchSelect({ trigger, triggerPlaceholder, items, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading, emptyLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, label, required }: SearchSelectProps): react_jsx_runtime.JSX.Element;
 
 type LocaleKey = "th" | "en";
 type DatePickerInputProps = {
@@ -247,4 +249,59 @@ type UICheckboxProps = {
 /** Export: memo เพื่อลด re-render */
 declare const Checkbox: React.ForwardRefExoticComponent<UICheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, type AvatarProps, Button, type ButtonProps, Checkbox, DatePickerInput, type DatePickerInputProps, LabelInput, Pagination, type PaginationProps, SearchSelect, type SearchSelectProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type UICheckboxProps, UploadImage, type UploadImageProps };
+type District = {
+    id: string;
+    name_th: string;
+    name_en: string;
+    province_id: number;
+};
+type DistrictProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (district: District) => void;
+    value?: string;
+    required?: boolean;
+    provinceId: number;
+};
+declare const DistrictDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required, provinceId }: DistrictProps) => react_jsx_runtime.JSX.Element;
+
+type Province = {
+    id: string;
+    name_th: string;
+    name_en: string;
+};
+type ProvinceProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (province: Province) => void;
+    value?: string;
+    required?: boolean;
+};
+declare const ProvinceDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required }: ProvinceProps) => react_jsx_runtime.JSX.Element;
+
+type SubDistrict = {
+    id: string;
+    name_th: string;
+    name_en: string;
+    district_id: number;
+};
+type SubDistrictProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (district: SubDistrict) => void;
+    value?: string;
+    required?: boolean;
+    districtId: number;
+};
+declare const SubDistrictDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required, districtId }: SubDistrictProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, Button, type ButtonProps, Checkbox, DatePickerInput, type DatePickerInputProps, type District, DistrictDropdown, type DistrictProps, LabelInput, Pagination, type PaginationProps, type Province, ProvinceDropdown, type ProvinceProps, SearchSelect, type SearchSelectProps, type SubDistrict, SubDistrictDropdown, type SubDistrictProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type UICheckboxProps, UploadImage, type UploadImageProps };

package/dist/index.d.ts

@@ -144,8 +144,10 @@ type SearchSelectProps = {
     checkedClassName?: string;
     /** สรุปค่าที่เลือกบน trigger (ถ้าไม่ส่ง: single=label, multi="เลือก n รายการ") */
     renderTriggerValue?: (selectedIds: string[], selectedItems: BaseItem[]) => React.ReactNode;
+    label?: string;
+    required?: boolean;
 };
-declare function SearchSelect({ trigger, triggerPlaceholder, items, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading, emptyLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
+declare function SearchSelect({ trigger, triggerPlaceholder, items, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading, emptyLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, label, required }: SearchSelectProps): react_jsx_runtime.JSX.Element;
 
 type LocaleKey = "th" | "en";
 type DatePickerInputProps = {
@@ -247,4 +249,59 @@ type UICheckboxProps = {
 /** Export: memo เพื่อลด re-render */
 declare const Checkbox: React.ForwardRefExoticComponent<UICheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, type AvatarProps, Button, type ButtonProps, Checkbox, DatePickerInput, type DatePickerInputProps, LabelInput, Pagination, type PaginationProps, SearchSelect, type SearchSelectProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type UICheckboxProps, UploadImage, type UploadImageProps };
+type District = {
+    id: string;
+    name_th: string;
+    name_en: string;
+    province_id: number;
+};
+type DistrictProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (district: District) => void;
+    value?: string;
+    required?: boolean;
+    provinceId: number;
+};
+declare const DistrictDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required, provinceId }: DistrictProps) => react_jsx_runtime.JSX.Element;
+
+type Province = {
+    id: string;
+    name_th: string;
+    name_en: string;
+};
+type ProvinceProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (province: Province) => void;
+    value?: string;
+    required?: boolean;
+};
+declare const ProvinceDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required }: ProvinceProps) => react_jsx_runtime.JSX.Element;
+
+type SubDistrict = {
+    id: string;
+    name_th: string;
+    name_en: string;
+    district_id: number;
+};
+type SubDistrictProps = {
+    locale?: "en" | "th";
+    searchPlaceholder?: string;
+    placeholder?: string;
+    label?: string;
+    searchButtonClassName?: string;
+    onChange?: (district: SubDistrict) => void;
+    value?: string;
+    required?: boolean;
+    districtId: number;
+};
+declare const SubDistrictDropdown: ({ locale, searchPlaceholder, placeholder, label, searchButtonClassName, onChange, value, required, districtId }: SubDistrictProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, Button, type ButtonProps, Checkbox, DatePickerInput, type DatePickerInputProps, type District, DistrictDropdown, type DistrictProps, LabelInput, Pagination, type PaginationProps, type Province, ProvinceDropdown, type ProvinceProps, SearchSelect, type SearchSelectProps, type SubDistrict, SubDistrictDropdown, type SubDistrictProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type UICheckboxProps, UploadImage, type UploadImageProps };

package/dist/index.js

@@ -34,13 +34,13 @@ var buttonStyles = cva(
     variants: {
       variant: {
         solid: "",
-        outline: "border bg-transparent",
+        outline: "border bg-transparent border-[#C9D7E3]",
         ghost: "bg-transparent"
       },
       size: {
-        sm: "h-10 px-2 py-3 text-sm",
-        md: "h-12 px-2 py-4 text-md",
-        lg: "h-14 px-4 py-6 text-xl"
+        sm: "h-8 px-2 py-3 text-sm",
+        md: "h-10 px-2 py-3 text-md",
+        lg: "h-12 px-2 py-4 text-xl"
       },
       color: {
         // แผงสีพรีเซ็ต (เพิ่มได้ตามต้องการ)
@@ -64,8 +64,8 @@ var buttonStyles = cva(
       { variant: "solid", color: "yellow", class: "bg-yellow-500 text-black hover:bg-yellow-600" },
       { variant: "solid", color: "violet", class: "bg-violet-600 text-white hover:bg-violet-700" },
       // OUTLINE
-      { variant: "outline", color: "neutral", class: "border-neutral-900 text-neutral-900 hover:bg-neutral-50" },
-      { variant: "outline", color: "primary", class: "border-black text-black hover:bg-black/[0.06]" },
+      { variant: "outline", color: "neutral", class: "border-[#C9D7E3] text-neutral-900 hover:bg-neutral-50" },
+      { variant: "outline", color: "primary", class: "border-[#C9D7E3] text-black hover:bg-black/[0.06]" },
       { variant: "outline", color: "red", class: "border-red-600 text-red-700 hover:bg-red-50" },
       { variant: "outline", color: "green", class: "border-green-600 text-green-700 hover:bg-green-50" },
       { variant: "outline", color: "blue", class: "border-blue-600 text-blue-700 hover:bg-blue-50" },
@@ -27094,7 +27094,9 @@ function SearchSelect({
   searchButtonClassName,
   checkedColor = "primary",
   checkedClassName,
-  renderTriggerValue
+  renderTriggerValue,
+  label,
+  required
 }) {
   const [open, setOpen] = React29.useState(false);
   const [q, setQ] = React29.useState("");
@@ -27143,6 +27145,7 @@ function SearchSelect({
     return `\u0E40\u0E25\u0E37\u0E2D\u0E01 ${selectedItems.length} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`;
   }, [selectedItems, isMulti, triggerPlaceholder]);
   return /* @__PURE__ */ jsxs(Root22, { open, onOpenChange: setOpen, children: [
+    label && /* @__PURE__ */ jsx(LabelInput, { label, required }),
     /* @__PURE__ */ jsx(Trigger, { asChild: true, children: trigger ?? // Trigger แบบ "ฟิลด์มีกรอบ + ลูกศร"
     /* @__PURE__ */ jsxs(
       "button",
@@ -28120,5 +28123,213 @@ var CheckboxBase = React29.forwardRef(function CheckboxBase2({
 });
 CheckboxBase.displayName = "Checkbox";
 var Checkbox = CheckboxBase;
+var toDistrict = (district, locale) => {
+  if (locale === "en") {
+    return {
+      id: district.id,
+      name: district.name_en,
+      value: district.id,
+      label: district.name_en
+    };
+  } else {
+    return {
+      id: district.id,
+      name: district.name_th,
+      value: district.id,
+      label: district.name_th
+    };
+  }
+};
+var getDistricts = async (provinceId) => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/district.json");
+  const data = await response.json();
+  const districts = data.filter((district) => district.province_id === provinceId);
+  return districts;
+};
+var DistrictDropdown = ({ locale = "th", searchPlaceholder = "Search District", placeholder = "Select District", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false, provinceId }) => {
+  const [districts, setDistricts] = useState([]);
+  const [currentDistrict, setCurrentDistrict] = useState(null);
+  useEffect(() => {
+    if (!provinceId) return;
+    getDistricts(provinceId).then(setDistricts);
+  }, [provinceId]);
+  useEffect(() => {
+    if (value) {
+      const district = districts.find((d) => {
+        if (locale === "th") {
+          return d.name_th === value;
+        } else {
+          return d.name_en === value;
+        }
+      });
+      if (district) {
+        setCurrentDistrict(district);
+      }
+    }
+  }, [districts, value, locale]);
+  const onSelect = useCallback((id) => {
+    const district = districts.find((d) => d.id === id);
+    if (district) {
+      setCurrentDistrict(district);
+      onChange?.(district);
+    }
+  }, [districts]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    SearchSelect,
+    {
+      items: districts.map((district) => toDistrict(district, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentDistrict?.id,
+      required
+    }
+  ) });
+};
+var toProvince = (province, locale) => {
+  if (locale === "en") {
+    return {
+      id: province.id,
+      name: province.name_en,
+      value: province.id,
+      label: province.name_en
+    };
+  } else {
+    return {
+      id: province.id,
+      name: province.name_th,
+      value: province.id,
+      label: province.name_th
+    };
+  }
+};
+var getProvinces = async () => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/province.json");
+  const data = await response.json();
+  return data;
+};
+var ProvinceDropdown = ({ locale = "th", searchPlaceholder = "Search Province", placeholder = "Select Province", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false }) => {
+  const [provinces, setProvinces] = useState([]);
+  const [currentProvince, setCurrentProvince] = useState(null);
+  useEffect(() => {
+    getProvinces().then(setProvinces);
+  }, []);
+  useEffect(() => {
+    if (value) {
+      const province = provinces.find((p) => {
+        if (locale === "th") {
+          return p.name_th === value;
+        } else {
+          return p.name_en === value;
+        }
+      });
+      if (province) {
+        setCurrentProvince(province);
+      }
+    }
+  }, [provinces, value, locale]);
+  const onSelect = useCallback((id) => {
+    const province = provinces.find((p) => p.id === id);
+    if (province) {
+      setCurrentProvince(province);
+      onChange?.(province);
+    }
+  }, [provinces]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    SearchSelect,
+    {
+      items: provinces.map((province) => toProvince(province, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentProvince?.id,
+      required
+    }
+  ) });
+};
+var toSubDistrict = (subDistrict, locale) => {
+  if (locale === "en") {
+    return {
+      id: subDistrict.id,
+      name: subDistrict.name_en,
+      value: subDistrict.id,
+      label: subDistrict.name_en
+    };
+  } else {
+    return {
+      id: subDistrict.id,
+      name: subDistrict.name_th,
+      value: subDistrict.id,
+      label: subDistrict.name_th
+    };
+  }
+};
+var getSubDistricts = async (districtId) => {
+  const response = await fetch("https://raw.githubusercontent.com/kongvut/thai-province-data/refs/heads/master/api/latest/sub_district.json");
+  const data = await response.json();
+  const subDistricts = data.filter((subDistrict) => subDistrict.district_id === districtId);
+  return subDistricts;
+};
+var SubDistrictDropdown = ({ locale = "th", searchPlaceholder = "Search District", placeholder = "Select District", label, searchButtonClassName = "bg-blue-500", onChange, value, required = false, districtId }) => {
+  const [districts, setDistricts] = useState([]);
+  const [currentDistrict, setCurrentDistrict] = useState(null);
+  useEffect(() => {
+    if (!districtId) return;
+    getSubDistricts(districtId).then(setDistricts);
+  }, [districtId]);
+  useEffect(() => {
+    if (value) {
+      const district = districts.find((d) => {
+        if (locale === "th") {
+          return d.name_th === value;
+        } else {
+          return d.name_en === value;
+        }
+      });
+      if (district) {
+        setCurrentDistrict(district);
+      }
+    }
+  }, [districts, value, locale]);
+  const onSelect = useCallback((id) => {
+    const district = districts.find((d) => d.id === id);
+    if (district) {
+      setCurrentDistrict(district);
+      onChange?.(district);
+    }
+  }, [districts]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    SearchSelect,
+    {
+      items: districts.map((district) => toSubDistrict(district, locale)),
+      placeholder: searchPlaceholder,
+      triggerPlaceholder: placeholder,
+      label,
+      selectionMode: "single",
+      searchButtonClassName,
+      onChange: (value2) => {
+        if (typeof value2 === "string") {
+          onSelect(value2);
+        }
+      },
+      value: currentDistrict?.id,
+      required
+    }
+  ) });
+};
 
-export { Avatar, Button, Checkbox, DatePickerInput, LabelInput, Pagination, SearchSelect, TextInput, Toggle, UploadImage };
+export { Avatar, Button, Checkbox, DatePickerInput, DistrictDropdown, LabelInput, Pagination, ProvinceDropdown, SearchSelect, SubDistrictDropdown, TextInput, Toggle, UploadImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "the-omelet-ui",
-  "version": "0.1.9",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",