@code-plate/iran-cities 1.2.0 → 2.0.0

package/dist/components-grWmOsaV.cjs

@@ -0,0 +1,247 @@
+const require_rolldown_runtime = require("./rolldown-runtime-78lK1XfQ.cjs");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+// src/components.tsx
+let idCounter = 0;
+function useStableId(explicit) {
+	const reactUseId = react.useId;
+	const generated = reactUseId ? reactUseId() : void 0;
+	const [fallback] = react.useState(() => `ic-${++idCounter}`);
+	return explicit !== null && explicit !== void 0 ? explicit : generated ? `ic-${generated.replace(/:/g, "")}` : fallback;
+}
+function classNames(...names) {
+	return names.filter(Boolean).join(" ");
+}
+function createComponents(api, hooks) {
+	function displayName(city, locale) {
+		return locale === "en" ? city.nameEn : city.fa;
+	}
+	function CityCombobox(props) {
+		const { value, defaultValue = null, onChange, province, label, placeholder, noResultsText = "شهری پیدا نشد", limit = 8, fuzzy = true, showProvince, locale = "fa", name, id, required, disabled, invalid, dir = "rtl", className, inputProps } = props;
+		const baseId = useStableId(id);
+		const inputId = `${baseId}-input`;
+		const listId = `${baseId}-list`;
+		const labelId = `${baseId}-label`;
+		const controlled = value !== void 0;
+		const [innerId, setInnerId] = react.useState(defaultValue);
+		const selectedId = controlled ? value !== null && value !== void 0 ? value : null : innerId;
+		const selected = selectedId === null ? void 0 : api.getCityById(selectedId);
+		const scope = province === void 0 || province === null || province === "" ? void 0 : api.getProvince(province);
+		const scopeId = scope === null || scope === void 0 ? void 0 : scope.id;
+		const [text, setText] = react.useState(() => selected ? displayName(selected, locale) : "");
+		const [open, setOpen] = react.useState(false);
+		const [active, setActive] = react.useState(-1);
+		const listRef = react.useRef(null);
+		react.useEffect(() => {
+			setText(selected ? displayName(selected, locale) : "");
+		}, [selected, locale]);
+		const results = react.useMemo(() => {
+			const found = api.searchCities(text, {
+				fuzzy,
+				emptyQuery: scopeId === void 0 ? "none" : "all",
+				limit: scopeId === void 0 ? limit : void 0
+			});
+			return (scopeId === void 0 ? found : found.filter((c) => c.provinceId === scopeId)).slice(0, limit);
+		}, [
+			text,
+			fuzzy,
+			limit,
+			scopeId
+		]);
+		const withProvince = showProvince !== null && showProvince !== void 0 ? showProvince : scopeId === void 0;
+		function select(city) {
+			if (!controlled) setInnerId(city ? city.id : null);
+			setText(city ? displayName(city, locale) : "");
+			setOpen(false);
+			setActive(-1);
+			onChange === null || onChange === void 0 || onChange(city);
+		}
+		function restore() {
+			setText(selected ? displayName(selected, locale) : "");
+			setOpen(false);
+			setActive(-1);
+		}
+		react.useEffect(() => {
+			if (active < 0 || !listRef.current) return;
+			const option = listRef.current.children[active];
+			if (option && typeof option.scrollIntoView === "function") option.scrollIntoView({ block: "nearest" });
+		}, [active]);
+		function onKeyDown(event) {
+			var _inputProps$onKeyDown;
+			inputProps === null || inputProps === void 0 || (_inputProps$onKeyDown = inputProps.onKeyDown) === null || _inputProps$onKeyDown === void 0 || _inputProps$onKeyDown.call(inputProps, event);
+			if (event.defaultPrevented) return;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					if (!open) setOpen(true);
+					setActive((i) => results.length === 0 ? -1 : (i + 1) % results.length);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					if (!open) setOpen(true);
+					setActive((i) => results.length === 0 ? -1 : i <= 0 ? results.length - 1 : i - 1);
+					break;
+				case "Home":
+					if (open && results.length > 0) {
+						event.preventDefault();
+						setActive(0);
+					}
+					break;
+				case "End":
+					if (open && results.length > 0) {
+						event.preventDefault();
+						setActive(results.length - 1);
+					}
+					break;
+				case "Enter":
+					if (open && active >= 0 && results[active]) {
+						event.preventDefault();
+						select(results[active]);
+					}
+					break;
+				case "Escape":
+					if (open) {
+						event.preventDefault();
+						restore();
+					} else if (text) {
+						event.preventDefault();
+						select(null);
+					}
+					break;
+				case "Tab": if (open) restore();
+			}
+		}
+		const expanded = open && !disabled;
+		const activeId = expanded && active >= 0 ? `${baseId}-option-${active}` : void 0;
+		return /* @__PURE__ */ react.createElement("div", {
+			className: classNames("ic-field", "ic-combobox", className),
+			dir,
+			"data-open": expanded ? "" : void 0,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0
+		}, label !== void 0 ? /* @__PURE__ */ react.createElement("label", {
+			className: "ic-label",
+			id: labelId,
+			htmlFor: inputId
+		}, label) : null, /* @__PURE__ */ react.createElement("div", { className: "ic-control" }, /* @__PURE__ */ react.createElement("input", {
+			...inputProps,
+			id: inputId,
+			className: classNames("ic-input", inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
+			type: "text",
+			role: "combobox",
+			autoComplete: "off",
+			spellCheck: false,
+			"aria-autocomplete": "list",
+			"aria-expanded": expanded,
+			"aria-controls": listId,
+			"aria-activedescendant": activeId,
+			"aria-invalid": invalid || void 0,
+			"aria-required": required || void 0,
+			placeholder,
+			disabled,
+			value: text,
+			onChange: (event) => {
+				setText(event.target.value);
+				setOpen(true);
+				setActive(-1);
+			},
+			onFocus: (event) => {
+				var _inputProps$onFocus;
+				inputProps === null || inputProps === void 0 || (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, event);
+				if (scopeId !== void 0 || text) setOpen(true);
+			},
+			onBlur: (event) => {
+				var _inputProps$onBlur;
+				inputProps === null || inputProps === void 0 || (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, event);
+				restore();
+			},
+			onKeyDown
+		}), name ? /* @__PURE__ */ react.createElement("input", {
+			type: "hidden",
+			name,
+			value: selected ? String(selected.id) : ""
+		}) : null), /* @__PURE__ */ react.createElement("ul", {
+			ref: listRef,
+			id: listId,
+			className: "ic-listbox",
+			role: "listbox",
+			"aria-labelledby": label !== void 0 ? labelId : void 0,
+			hidden: !expanded
+		}, expanded && results.length === 0 ? /* @__PURE__ */ react.createElement("li", {
+			className: "ic-empty",
+			role: "presentation"
+		}, noResultsText) : null, expanded ? results.map((city, index) => /* @__PURE__ */ react.createElement("li", {
+			key: city.id,
+			id: `${baseId}-option-${index}`,
+			className: "ic-option",
+			role: "option",
+			"aria-selected": (selected === null || selected === void 0 ? void 0 : selected.id) === city.id,
+			"data-active": index === active ? "" : void 0,
+			onMouseDown: (event) => event.preventDefault(),
+			onMouseMove: () => setActive(index),
+			onClick: () => select(city)
+		}, /* @__PURE__ */ react.createElement("span", { className: "ic-option-name" }, displayName(city, locale)), withProvince ? /* @__PURE__ */ react.createElement("span", { className: "ic-option-meta" }, locale === "en" ? city.provinceNameEn : city.provinceFa) : null)) : null));
+	}
+	function ProvinceCitySelect(props) {
+		const { value, defaultValue, onChange, provinceLabel = "استان", cityLabel = "شهر", provincePlaceholder = "انتخاب استان", cityPlaceholder = "انتخاب شهر", provinceName, cityName, locale = "fa", id, required, disabled, invalid, layout = "row", dir = "rtl", className } = props;
+		const baseId = useStableId(id);
+		const state = hooks.useProvinceCitySelect({
+			value,
+			onChange,
+			initialProvince: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.provinceId,
+			initialCity: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.cityId
+		});
+		const provinceList = state.provinces;
+		const sortedProvinces = react.useMemo(() => locale === "en" ? provinceList.slice().sort((a, b) => a.nameEn.localeCompare(b.nameEn, "en")) : provinceList.slice().sort((a, b) => a.fa.localeCompare(b.fa, "fa")), [provinceList, locale]);
+		const sortedCities = react.useMemo(() => locale === "en" ? state.cities.slice().sort((a, b) => a.nameEn.localeCompare(b.nameEn, "en")) : state.cities.slice().sort((a, b) => a.fa.localeCompare(b.fa, "fa")), [state.cities, locale]);
+		return /* @__PURE__ */ react.createElement("div", {
+			className: classNames("ic-group", className),
+			dir,
+			"data-layout": layout,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0
+		}, /* @__PURE__ */ react.createElement("div", { className: "ic-field" }, /* @__PURE__ */ react.createElement("label", {
+			className: "ic-label",
+			htmlFor: `${baseId}-province`
+		}, provinceLabel), /* @__PURE__ */ react.createElement("select", {
+			id: `${baseId}-province`,
+			className: "ic-select",
+			name: provinceName,
+			value: state.provinceId === void 0 ? "" : String(state.provinceId),
+			required,
+			disabled,
+			"aria-invalid": invalid || void 0,
+			onChange: (event) => state.setProvince(event.target.value === "" ? "" : Number(event.target.value))
+		}, /* @__PURE__ */ react.createElement("option", { value: "" }, provincePlaceholder), sortedProvinces.map((p) => /* @__PURE__ */ react.createElement("option", {
+			key: p.id,
+			value: p.id
+		}, locale === "en" ? p.nameEn : p.fa)))), /* @__PURE__ */ react.createElement("div", { className: "ic-field" }, /* @__PURE__ */ react.createElement("label", {
+			className: "ic-label",
+			htmlFor: `${baseId}-city`
+		}, cityLabel), /* @__PURE__ */ react.createElement("select", {
+			id: `${baseId}-city`,
+			className: "ic-select",
+			name: cityName,
+			value: state.cityId === void 0 ? "" : String(state.cityId),
+			required,
+			disabled: disabled || state.provinceId === void 0,
+			"aria-invalid": invalid || void 0,
+			onChange: (event) => state.setCity(event.target.value === "" ? "" : Number(event.target.value))
+		}, /* @__PURE__ */ react.createElement("option", { value: "" }, cityPlaceholder), sortedCities.map((c) => /* @__PURE__ */ react.createElement("option", {
+			key: c.id,
+			value: c.id
+		}, locale === "en" ? c.nameEn : c.fa)))));
+	}
+	return {
+		CityCombobox,
+		ProvinceCitySelect
+	};
+}
+Object.defineProperty(exports, "createComponents", {
+	enumerable: true,
+	get: function() {
+		return createComponents;
+	}
+});
+
+//# sourceMappingURL=components-grWmOsaV.cjs.map

package/dist/components-grWmOsaV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-grWmOsaV.cjs","names":["React"],"sources":["../src/components.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport type {\r\n  CityId,\r\n  FlatCity,\r\n  IranCities,\r\n  IranCitiesHooks,\r\n  ProvinceCityValue,\r\n  ProvinceId,\r\n  Query,\r\n} from './types';\r\n\r\nexport interface CityComboboxProps {\r\n  value?: CityId | null;\r\n  defaultValue?: CityId | null;\r\n  onChange?: (city: FlatCity | null) => void;\r\n  province?: Query | null;\r\n  label?: React.ReactNode;\r\n  placeholder?: string;\r\n  noResultsText?: React.ReactNode;\r\n  limit?: number;\r\n  fuzzy?: boolean;\r\n  showProvince?: boolean;\r\n  locale?: 'fa' | 'en';\r\n  name?: string;\r\n  id?: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  invalid?: boolean;\r\n  dir?: 'rtl' | 'ltr' | 'auto';\r\n  className?: string;\r\n  inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange'>;\r\n}\r\n\r\nexport interface ProvinceCitySelectProps {\r\n  value?: ProvinceCityValue;\r\n  defaultValue?: ProvinceCityValue;\r\n  onChange?: (value: ProvinceCityValue) => void;\r\n  provinceLabel?: React.ReactNode;\r\n  cityLabel?: React.ReactNode;\r\n  provincePlaceholder?: string;\r\n  cityPlaceholder?: string;\r\n  provinceName?: string;\r\n  cityName?: string;\r\n  locale?: 'fa' | 'en';\r\n  id?: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  invalid?: boolean;\r\n  layout?: 'row' | 'column';\r\n  dir?: 'rtl' | 'ltr' | 'auto';\r\n  className?: string;\r\n}\r\n\r\nexport interface IranCitiesComponents {\r\n  CityCombobox: (props: CityComboboxProps) => React.ReactElement;\r\n  ProvinceCitySelect: (props: ProvinceCitySelectProps) => React.ReactElement;\r\n}\r\n\r\nlet idCounter = 0;\r\n\r\nfunction useStableId(explicit: string | undefined): string {\r\n  const reactUseId = (React as unknown as { useId?: () => string }).useId;\r\n  const generated = reactUseId ? reactUseId() : undefined;\r\n  const [fallback] = React.useState(() => `ic-${++idCounter}`);\r\n  return explicit ?? (generated ? `ic-${generated.replace(/:/g, '')}` : fallback);\r\n}\r\n\r\nfunction classNames(...names: (string | false | null | undefined)[]): string {\r\n  return names.filter(Boolean).join(' ');\r\n}\r\n\r\nexport function createComponents(api: IranCities, hooks: IranCitiesHooks): IranCitiesComponents {\r\n  function displayName(city: FlatCity, locale: 'fa' | 'en'): string {\r\n    return locale === 'en' ? city.nameEn : city.fa;\r\n  }\r\n\r\n  function CityCombobox(props: CityComboboxProps): React.ReactElement {\r\n    const {\r\n      value,\r\n      defaultValue = null,\r\n      onChange,\r\n      province,\r\n      label,\r\n      placeholder,\r\n      noResultsText = 'شهری پیدا نشد',\r\n      limit = 8,\r\n      fuzzy = true,\r\n      showProvince,\r\n      locale = 'fa',\r\n      name,\r\n      id,\r\n      required,\r\n      disabled,\r\n      invalid,\r\n      dir = 'rtl',\r\n      className,\r\n      inputProps,\r\n    } = props;\r\n\r\n    const baseId = useStableId(id);\r\n    const inputId = `${baseId}-input`;\r\n    const listId = `${baseId}-list`;\r\n    const labelId = `${baseId}-label`;\r\n\r\n    const controlled = value !== undefined;\r\n    const [innerId, setInnerId] = React.useState<CityId | null>(defaultValue);\r\n    const selectedId = controlled ? value ?? null : innerId;\r\n    const selected = selectedId === null ? undefined : api.getCityById(selectedId);\r\n\r\n    const scope = province === undefined || province === null || province === '' ? undefined : api.getProvince(province);\r\n    const scopeId: ProvinceId | undefined = scope?.id;\r\n\r\n    const [text, setText] = React.useState(() => (selected ? displayName(selected, locale) : ''));\r\n    const [open, setOpen] = React.useState(false);\r\n    const [active, setActive] = React.useState(-1);\r\n    const listRef = React.useRef<HTMLUListElement>(null);\r\n\r\n    React.useEffect(() => {\r\n      setText(selected ? displayName(selected, locale) : '');\r\n    }, [selected, locale]);\r\n\r\n    const results = React.useMemo(() => {\r\n      const found = api.searchCities(text, {\r\n        fuzzy,\r\n        emptyQuery: scopeId === undefined ? 'none' : 'all',\r\n        limit: scopeId === undefined ? limit : undefined,\r\n      });\r\n      const scoped = scopeId === undefined ? found : found.filter((c) => c.provinceId === scopeId);\r\n      return scoped.slice(0, limit);\r\n    }, [text, fuzzy, limit, scopeId]);\r\n\r\n    const withProvince = showProvince ?? scopeId === undefined;\r\n\r\n    function select(city: FlatCity | null): void {\r\n      if (!controlled) setInnerId(city ? city.id : null);\r\n      setText(city ? displayName(city, locale) : '');\r\n      setOpen(false);\r\n      setActive(-1);\r\n      onChange?.(city);\r\n    }\r\n\r\n    function restore(): void {\r\n      setText(selected ? displayName(selected, locale) : '');\r\n      setOpen(false);\r\n      setActive(-1);\r\n    }\r\n\r\n    React.useEffect(() => {\r\n      if (active < 0 || !listRef.current) return;\r\n      const option = listRef.current.children[active] as HTMLElement | undefined;\r\n      if (option && typeof option.scrollIntoView === 'function') option.scrollIntoView({ block: 'nearest' });\r\n    }, [active]);\r\n\r\n    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\r\n      inputProps?.onKeyDown?.(event);\r\n      if (event.defaultPrevented) return;\r\n      switch (event.key) {\r\n        case 'ArrowDown':\r\n          event.preventDefault();\r\n          if (!open) setOpen(true);\r\n          setActive((i) => (results.length === 0 ? -1 : (i + 1) % results.length));\r\n          break;\r\n        case 'ArrowUp':\r\n          event.preventDefault();\r\n          if (!open) setOpen(true);\r\n          setActive((i) => (results.length === 0 ? -1 : i <= 0 ? results.length - 1 : i - 1));\r\n          break;\r\n        case 'Home':\r\n          if (open && results.length > 0) {\r\n            event.preventDefault();\r\n            setActive(0);\r\n          }\r\n          break;\r\n        case 'End':\r\n          if (open && results.length > 0) {\r\n            event.preventDefault();\r\n            setActive(results.length - 1);\r\n          }\r\n          break;\r\n        case 'Enter':\r\n          if (open && active >= 0 && results[active]) {\r\n            event.preventDefault();\r\n            select(results[active] as FlatCity);\r\n          }\r\n          break;\r\n        case 'Escape':\r\n          if (open) {\r\n            event.preventDefault();\r\n            restore();\r\n          } else if (text) {\r\n            event.preventDefault();\r\n            select(null);\r\n          }\r\n          break;\r\n        case 'Tab':\r\n          if (open) restore();\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    const expanded = open && !disabled;\r\n    const activeId = expanded && active >= 0 ? `${baseId}-option-${active}` : undefined;\r\n\r\n    return (\r\n      <div\r\n        className={classNames('ic-field', 'ic-combobox', className)}\r\n        dir={dir}\r\n        data-open={expanded ? '' : undefined}\r\n        data-invalid={invalid ? '' : undefined}\r\n        data-disabled={disabled ? '' : undefined}\r\n      >\r\n        {label !== undefined ? (\r\n          <label className=\"ic-label\" id={labelId} htmlFor={inputId}>\r\n            {label}\r\n          </label>\r\n        ) : null}\r\n        <div className=\"ic-control\">\r\n          <input\r\n            {...inputProps}\r\n            id={inputId}\r\n            className={classNames('ic-input', inputProps?.className)}\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            autoComplete=\"off\"\r\n            spellCheck={false}\r\n            aria-autocomplete=\"list\"\r\n            aria-expanded={expanded}\r\n            aria-controls={listId}\r\n            aria-activedescendant={activeId}\r\n            aria-invalid={invalid || undefined}\r\n            aria-required={required || undefined}\r\n            placeholder={placeholder}\r\n            disabled={disabled}\r\n            value={text}\r\n            onChange={(event) => {\r\n              setText(event.target.value);\r\n              setOpen(true);\r\n              setActive(-1);\r\n            }}\r\n            onFocus={(event) => {\r\n              inputProps?.onFocus?.(event);\r\n              if (scopeId !== undefined || text) setOpen(true);\r\n            }}\r\n            onBlur={(event) => {\r\n              inputProps?.onBlur?.(event);\r\n              restore();\r\n            }}\r\n            onKeyDown={onKeyDown}\r\n          />\r\n          {name ? <input type=\"hidden\" name={name} value={selected ? String(selected.id) : ''} /> : null}\r\n        </div>\r\n        <ul\r\n          ref={listRef}\r\n          id={listId}\r\n          className=\"ic-listbox\"\r\n          role=\"listbox\"\r\n          aria-labelledby={label !== undefined ? labelId : undefined}\r\n          hidden={!expanded}\r\n        >\r\n          {expanded && results.length === 0 ? (\r\n            <li className=\"ic-empty\" role=\"presentation\">\r\n              {noResultsText}\r\n            </li>\r\n          ) : null}\r\n          {expanded\r\n            ? results.map((city, index) => (\r\n                <li\r\n                  key={city.id}\r\n                  id={`${baseId}-option-${index}`}\r\n                  className=\"ic-option\"\r\n                  role=\"option\"\r\n                  aria-selected={selected?.id === city.id}\r\n                  data-active={index === active ? '' : undefined}\r\n                  onMouseDown={(event) => event.preventDefault()}\r\n                  onMouseMove={() => setActive(index)}\r\n                  onClick={() => select(city)}\r\n                >\r\n                  <span className=\"ic-option-name\">{displayName(city, locale)}</span>\r\n                  {withProvince ? (\r\n                    <span className=\"ic-option-meta\">{locale === 'en' ? city.provinceNameEn : city.provinceFa}</span>\r\n                  ) : null}\r\n                </li>\r\n              ))\r\n            : null}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  function ProvinceCitySelect(props: ProvinceCitySelectProps): React.ReactElement {\r\n    const {\r\n      value,\r\n      defaultValue,\r\n      onChange,\r\n      provinceLabel = 'استان',\r\n      cityLabel = 'شهر',\r\n      provincePlaceholder = 'انتخاب استان',\r\n      cityPlaceholder = 'انتخاب شهر',\r\n      provinceName,\r\n      cityName,\r\n      locale = 'fa',\r\n      id,\r\n      required,\r\n      disabled,\r\n      invalid,\r\n      layout = 'row',\r\n      dir = 'rtl',\r\n      className,\r\n    } = props;\r\n\r\n    const baseId = useStableId(id);\r\n    const state = hooks.useProvinceCitySelect({\r\n      value,\r\n      onChange,\r\n      initialProvince: defaultValue?.provinceId,\r\n      initialCity: defaultValue?.cityId,\r\n    });\r\n    const provinceList = state.provinces;\r\n    const sortedProvinces = React.useMemo(\r\n      () =>\r\n        locale === 'en'\r\n          ? provinceList.slice().sort((a, b) => a.nameEn.localeCompare(b.nameEn, 'en'))\r\n          : provinceList.slice().sort((a, b) => a.fa.localeCompare(b.fa, 'fa')),\r\n      [provinceList, locale],\r\n    );\r\n    const sortedCities = React.useMemo(\r\n      () =>\r\n        locale === 'en'\r\n          ? state.cities.slice().sort((a, b) => a.nameEn.localeCompare(b.nameEn, 'en'))\r\n          : state.cities.slice().sort((a, b) => a.fa.localeCompare(b.fa, 'fa')),\r\n      [state.cities, locale],\r\n    );\r\n\r\n    return (\r\n      <div\r\n        className={classNames('ic-group', className)}\r\n        dir={dir}\r\n        data-layout={layout}\r\n        data-invalid={invalid ? '' : undefined}\r\n        data-disabled={disabled ? '' : undefined}\r\n      >\r\n        <div className=\"ic-field\">\r\n          <label className=\"ic-label\" htmlFor={`${baseId}-province`}>\r\n            {provinceLabel}\r\n          </label>\r\n          <select\r\n            id={`${baseId}-province`}\r\n            className=\"ic-select\"\r\n            name={provinceName}\r\n            value={state.provinceId === undefined ? '' : String(state.provinceId)}\r\n            required={required}\r\n            disabled={disabled}\r\n            aria-invalid={invalid || undefined}\r\n            onChange={(event) => state.setProvince(event.target.value === '' ? '' : Number(event.target.value))}\r\n          >\r\n            <option value=\"\">{provincePlaceholder}</option>\r\n            {sortedProvinces.map((p) => (\r\n              <option key={p.id} value={p.id}>\r\n                {locale === 'en' ? p.nameEn : p.fa}\r\n              </option>\r\n            ))}\r\n          </select>\r\n        </div>\r\n        <div className=\"ic-field\">\r\n          <label className=\"ic-label\" htmlFor={`${baseId}-city`}>\r\n            {cityLabel}\r\n          </label>\r\n          <select\r\n            id={`${baseId}-city`}\r\n            className=\"ic-select\"\r\n            name={cityName}\r\n            value={state.cityId === undefined ? '' : String(state.cityId)}\r\n            required={required}\r\n            disabled={disabled || state.provinceId === undefined}\r\n            aria-invalid={invalid || undefined}\r\n            onChange={(event) => state.setCity(event.target.value === '' ? '' : Number(event.target.value))}\r\n          >\r\n            <option value=\"\">{cityPlaceholder}</option>\r\n            {sortedCities.map((c) => (\r\n              <option key={c.id} value={c.id}>\r\n                {locale === 'en' ? c.nameEn : c.fa}\r\n              </option>\r\n            ))}\r\n          </select>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return { CityCombobox, ProvinceCitySelect };\r\n}\r\n"],"mappings":"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"}

package/dist/components.css

@@ -0,0 +1,251 @@
+:where(.ic-field, .ic-group) {
+  --ic-font: inherit;
+  --ic-font-size: 0.9375rem;
+  --ic-line-height: 1.5;
+  --ic-radius: 0.625rem;
+  --ic-gap: 0.75rem;
+  --ic-height: 2.75rem;
+  --ic-padding-inline: 0.875rem;
+  --ic-bg: #ffffff;
+  --ic-fg: #0f172a;
+  --ic-muted: #64748b;
+  --ic-border: #cbd5e1;
+  --ic-border-hover: #94a3b8;
+  --ic-accent: #0a7f5a;
+  --ic-accent-soft: rgba(10, 127, 90, 0.1);
+  --ic-ring: rgba(10, 127, 90, 0.28);
+  --ic-danger: #dc2626;
+  --ic-danger-ring: rgba(220, 38, 38, 0.22);
+  --ic-disabled-bg: #f1f5f9;
+  --ic-popover-bg: #ffffff;
+  --ic-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
+  --ic-listbox-max-height: 18rem;
+  --ic-transition: 150ms ease;
+  color-scheme: light;
+  font-family: var(--ic-font);
+  font-size: var(--ic-font-size);
+  line-height: var(--ic-line-height);
+  color: var(--ic-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(.ic-field, .ic-group):not([data-theme='light'] *, [data-theme='light']) {
+    --ic-bg: #0f172a;
+    --ic-fg: #e2e8f0;
+    --ic-muted: #94a3b8;
+    --ic-border: #334155;
+    --ic-border-hover: #475569;
+    --ic-accent: #34d399;
+    --ic-accent-soft: rgba(52, 211, 153, 0.14);
+    --ic-ring: rgba(52, 211, 153, 0.32);
+    --ic-danger: #f87171;
+    --ic-danger-ring: rgba(248, 113, 113, 0.28);
+    --ic-disabled-bg: #1e293b;
+    --ic-popover-bg: #111c33;
+    --ic-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
+    color-scheme: dark;
+  }
+}
+
+:where([data-theme='dark'] .ic-field, [data-theme='dark'] .ic-group, .ic-field[data-theme='dark'], .ic-group[data-theme='dark']) {
+  --ic-bg: #0f172a;
+  --ic-fg: #e2e8f0;
+  --ic-muted: #94a3b8;
+  --ic-border: #334155;
+  --ic-border-hover: #475569;
+  --ic-accent: #34d399;
+  --ic-accent-soft: rgba(52, 211, 153, 0.14);
+  --ic-ring: rgba(52, 211, 153, 0.32);
+  --ic-danger: #f87171;
+  --ic-danger-ring: rgba(248, 113, 113, 0.28);
+  --ic-disabled-bg: #1e293b;
+  --ic-popover-bg: #111c33;
+  --ic-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
+  color-scheme: dark;
+}
+
+.ic-group > .ic-field,
+.ic-field > .ic-label,
+.ic-field > .ic-control,
+.ic-field > .ic-listbox,
+.ic-listbox > .ic-option,
+.ic-listbox > .ic-empty {
+  margin: 0;
+}
+
+:where(.ic-group) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: var(--ic-gap);
+}
+
+:where(.ic-group[data-layout='column']) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where(.ic-field) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-inline-size: 0;
+}
+
+:where(.ic-label) {
+  font-size: 0.875em;
+  font-weight: 500;
+  color: var(--ic-fg);
+}
+
+:where(.ic-control) {
+  position: relative;
+}
+
+:where(.ic-input, .ic-select) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--ic-height);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--ic-padding-inline);
+  font: inherit;
+  color: var(--ic-fg);
+  background-color: var(--ic-bg);
+  border: 1px solid var(--ic-border);
+  border-radius: var(--ic-radius);
+  outline: none;
+  transition: border-color var(--ic-transition), box-shadow var(--ic-transition), background-color var(--ic-transition);
+}
+
+:where(.ic-input)::placeholder {
+  color: var(--ic-muted);
+  opacity: 1;
+}
+
+:where(.ic-select) {
+  appearance: none;
+  cursor: pointer;
+  padding-inline-end: calc(var(--ic-padding-inline) + 1.25rem);
+  background-image: linear-gradient(45deg, transparent 50%, var(--ic-muted) 50%),
+    linear-gradient(135deg, var(--ic-muted) 50%, transparent 50%);
+  background-repeat: no-repeat;
+  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
+  background-position: right calc(var(--ic-padding-inline) + 0.3125rem) center, right var(--ic-padding-inline) center;
+}
+
+:where([dir='rtl']) :where(.ic-select),
+:where(.ic-select[dir='rtl']) {
+  background-position: left var(--ic-padding-inline) center, left calc(var(--ic-padding-inline) + 0.3125rem) center;
+}
+
+:where(.ic-input, .ic-select):hover:not(:disabled) {
+  border-color: var(--ic-border-hover);
+}
+
+:where(.ic-input, .ic-select):focus-visible,
+:where(.ic-combobox[data-open]) :where(.ic-input) {
+  border-color: var(--ic-accent);
+  box-shadow: 0 0 0 3px var(--ic-ring);
+}
+
+:where(.ic-input, .ic-select):disabled {
+  cursor: not-allowed;
+  color: var(--ic-muted);
+  background-color: var(--ic-disabled-bg);
+}
+
+:where([data-invalid]) :where(.ic-input, .ic-select),
+:where(.ic-input, .ic-select)[aria-invalid='true'] {
+  border-color: var(--ic-danger);
+}
+
+:where([data-invalid]) :where(.ic-input, .ic-select):focus-visible,
+:where(.ic-input, .ic-select)[aria-invalid='true']:focus-visible {
+  box-shadow: 0 0 0 3px var(--ic-danger-ring);
+}
+
+:where(.ic-listbox) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(100% + 0.375rem);
+  z-index: 50;
+  box-sizing: border-box;
+  max-block-size: var(--ic-listbox-max-height);
+  margin: 0;
+  padding: 0.3125rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  background-color: var(--ic-popover-bg);
+  border: 1px solid var(--ic-border);
+  border-radius: var(--ic-radius);
+  box-shadow: var(--ic-shadow);
+  animation: ic-pop var(--ic-transition);
+}
+
+:where(.ic-listbox)[hidden] {
+  display: none;
+}
+
+:where(.ic-option) {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.625rem;
+  border-radius: calc(var(--ic-radius) - 0.25rem);
+  cursor: pointer;
+  user-select: none;
+}
+
+:where(.ic-option)[data-active] {
+  background-color: var(--ic-accent-soft);
+}
+
+:where(.ic-option)[aria-selected='true'] {
+  font-weight: 600;
+  color: var(--ic-accent);
+}
+
+:where(.ic-option-meta) {
+  flex-shrink: 0;
+  font-size: 0.8125em;
+  font-weight: 400;
+  color: var(--ic-muted);
+}
+
+:where(.ic-empty) {
+  padding-block: 0.75rem;
+  padding-inline: 0.625rem;
+  color: var(--ic-muted);
+  text-align: center;
+}
+
+@keyframes ic-pop {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.ic-input, .ic-select, .ic-listbox) {
+    transition: none;
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(.ic-option)[data-active] {
+    outline: 2px solid Highlight;
+  }
+
+  :where(.ic-input, .ic-select):focus-visible {
+    outline: 2px solid Highlight;
+  }
+}