@powerhousedao/design-system 6.0.0-dev.24 → 6.0.0-dev.241

package/dist/ui/components/radio-group-field/radio-group-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field.js","names":["cn","forwardRef","useId","FormLabel","FormMessageList","withFieldValidation","RadioGroup","Radio","RadioGroupFieldRaw","autoFocus","className","defaultValue","description","disabled","warnings","errors","id","propId","label","name","onChange","options","required","value","props","ref","hasLabel","undefined","hasError","length","prefix","newValue","map","option","index","RadioGroupField","Component","displayName"],"sources":["../../../../src/ui/components/radio-group-field/radio-group-field.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport type { HTMLAttributes, Ref } from \"react\";\nimport { forwardRef, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport type { RadioGroupProps } from \"../enum-field/types.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { RadioGroup } from \"./radio-group.js\";\nimport { Radio } from \"./radio.js\";\ntype RadioGroupFieldBaseProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  | keyof InputBaseProps<string>\n  | keyof FieldErrorHandling\n  | keyof RadioGroupProps\n  | \"dir\"\n> & {\n  dir?: \"ltr\" | \"rtl\";\n};\n\nexport type RadioGroupFieldProps = RadioGroupFieldBaseProps &\n  InputBaseProps<string> &\n  FieldErrorHandling &\n  RadioGroupProps;\n\nconst RadioGroupFieldRaw = forwardRef<HTMLDivElement, RadioGroupFieldProps>(\n  (\n    {\n      autoFocus,\n      className,\n      defaultValue,\n      description,\n      disabled,\n      warnings = [],\n      errors = [],\n      id: propId,\n      label,\n      name,\n      onChange,\n      options = [],\n      required,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasLabel = label !== undefined;\n    const hasError = errors.length > 0;\n    const prefix = useId();\n    const id = propId ?? `${prefix}-radio-group`;\n\n    return (\n      <RadioGroup\n        aria-invalid={hasError}\n        aria-label={!hasLabel ? \"Radio group\" : undefined}\n        aria-required={required}\n        autoFocus={autoFocus}\n        className={cn(\"flex flex-col gap-2\", className)}\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onValueChange={(newValue) => {\n          onChange?.(newValue);\n        }}\n        value={value}\n        disabled={disabled}\n        {...props}\n        ref={ref}\n      >\n        {hasLabel && (\n          <FormLabel\n            description={description}\n            hasError={hasError}\n            htmlFor={id}\n            required={required}\n            disabled={disabled}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {options.map((option, index) => (\n          <div\n            key={`${prefix}-radio-${index}-${option.value}`}\n            className=\"flex items-center gap-2\"\n            role=\"presentation\"\n          >\n            <Radio\n              id={`${prefix}-radio-${index}-${option.value}`}\n              label={option.label}\n              value={option.value}\n              description={option.description}\n              disabled={disabled || option.disabled}\n              hasError={hasError}\n            />\n          </div>\n        ))}\n        {warnings.length > 0 && (\n          <FormMessageList messages={warnings} type=\"warning\" />\n        )}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </RadioGroup>\n    );\n  },\n);\n\nexport const RadioGroupField = forwardRef(function RadioGroupField(\n  props: RadioGroupFieldProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const Component =\n    withFieldValidation<RadioGroupFieldProps>(RadioGroupFieldRaw);\n  return <Component {...props} ref={ref} />;\n});\n\nRadioGroupField.displayName = \"RadioGroupField\";\n"],"mappings":";;;;;;;;;AAyBA,MAAMQ,qBAAqBP,4BAEvB,EACEQ,WACAC,WACAC,cACAC,aACAC,UACAC,WAAW,EAAE,EACbC,SAAS,EAAE,EACXC,IAAIC,QACJC,OACAC,MACAC,UACAC,UAAU,EAAE,EACZC,UACAC,OACA,GAAGC,SAELC,QACG;CACH,MAAMC,WAAWR,UAAUS,KAAAA;CAC3B,MAAMC,WAAWb,OAAOc,SAAS;CACjC,MAAMC,SAAS5B,OAAO;CACtB,MAAMc,KAAKC,UAAU,GAAGa,OAAM;AAE9B,QACE,qBAAC,YAAD;EACE,gBAAcF;EACd,cAAY,CAACF,WAAW,gBAAgBC,KAAAA;EACxC,iBAAeL;EACJb;EACX,WAAWT,GAAG,uBAAuBU,UAAU;EACjCC;EACVK;EACEG;EACN,gBAAgBY,aAAa;AAC3BX,cAAWW,SAAS;;EAEfR;EACGV;EACV,GAAIW;EACCC;YAfP;GAiBGC,YACC,oBAAC,WAAD;IACed;IACHgB;IACV,SAASZ;IACCM;IACAT;cAETK;IAEJ,CAAA;GACAG,QAAQW,KAAKC,QAAQC,UACpB,oBAAC,OAAD;IAEE,WAAU;IACV,MAAK;cAEL,oBAAC,OAAD;KACE,IAAI,GAAGJ,OAAM,SAAUI,MAAK,GAAID,OAAOV;KACvC,OAAOU,OAAOf;KACd,OAAOe,OAAOV;KACd,aAAaU,OAAOrB;KACpB,UAAUC,YAAYoB,OAAOpB;KACnBe;KAAS,CAAA;IAGxB,EAbQ,GAAGE,OAAM,SAAUI,MAAK,GAAID,OAAOV,QAa3C,CAAC;GACDT,SAASe,SAAS,KACjB,oBAAC,iBAAD;IAAiB,UAAUf;IAAU,MAAK;IAC3C,CAAA;GACAc,YAAY,oBAAC,iBAAD;IAAiB,UAAUb;IAAQ,MAAK;IAAU,CAAA;GACpD;;EAGlB;AAED,MAAaoB,kBAAkBlC,2BAAW,SAASkC,gBACjDX,OACAC,KACA;AAGA,QAAO,oBADLpB,oBAA0CG,mBAAmB,EACxD;EAAW,GAAIgB;EAAYC;EAAO,CAAA;EACzC;AAEFU,gBAAgBE,cAAc"}

package/dist/ui/components/radio-group-field/radio-group.d.ts

@@ -0,0 +1,2 @@
+import { n as RadioGroup, t as CustomizableRadioGroupProps } from "../../../radio-group-D2NSfihe.js";
+export { CustomizableRadioGroupProps, RadioGroup };

package/dist/ui/components/radio-group-field/radio-group.js

@@ -0,0 +1,21 @@
+import React, { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region src/ui/components/radio-group-field/radio-group.tsx
+const RadioGroup = /* @__PURE__ */ React.forwardRef(({ children, className, id: propId, name, ...props }, ref) => {
+	const prefix = useId();
+	const id = propId ?? `${prefix}-radio-group`;
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		className,
+		id,
+		name,
+		...props,
+		ref,
+		children
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/ui/components/radio-group-field/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["React","useId","RadioGroupPrimitive","RadioGroup","forwardRef","children","className","id","propId","name","props","ref","prefix","displayName"],"sources":["../../../../src/ui/components/radio-group-field/radio-group.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nexport interface CustomizableRadioGroupProps extends React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Root\n> {\n  children: React.ReactNode;\n  className?: string;\n  id?: string;\n  name?: string;\n}\n\nexport const RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  CustomizableRadioGroupProps\n>(({ children, className, id: propId, name, ...props }, ref) => {\n  const prefix = useId();\n  const id = propId ?? `${prefix}-radio-group`;\n\n  return (\n    <RadioGroupPrimitive.Root\n      className={className}\n      id={id}\n      name={name}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </RadioGroupPrimitive.Root>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":";;;;AAYA,MAAaG,aAAaH,sBAAMI,YAG7B,EAAEC,UAAUC,WAAWC,IAAIC,QAAQC,MAAM,GAAGC,SAASC,QAAQ;CAC9D,MAAMC,SAASX,OAAO;CACtB,MAAMM,KAAKC,UAAU,GAAGI,OAAM;AAE9B,QACE,oBAAC,oBAAoB,MAArB;EACaN;EACPC;EACEE;EACN,GAAIC;EACCC;EAEJN;EACwB,CAAA;EAE7B;AAEFF,WAAWU,cAAc"}

package/dist/ui/components/radio-group-field/radio.d.ts

@@ -0,0 +1,2 @@
+import { n as RadioProps, t as Radio } from "../../../radio-YzIhzpRk.js";
+export { Radio, RadioProps };

package/dist/ui/components/radio-group-field/radio.js

@@ -0,0 +1,34 @@
+import { t as cn } from "../../../src-DTHkTkyy.js";
+import { FormLabel } from "../form-label/form-label.js";
+import React, { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region src/ui/components/radio-group-field/radio.tsx
+const Radio = /* @__PURE__ */ React.forwardRef(({ className, description, disabled = false, hasError = false, id: propId, label, value, ...props }, ref) => {
+	const prefix = useId();
+	const id = propId ?? `${prefix}-radio`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		"aria-disabled": disabled,
+		"aria-invalid": hasError,
+		className: cn("group peer", "aspect-square size-4 rounded-full border border-gray-800 dark:border-gray-400", "hover:border-gray-900 dark:hover:border-gray-50", disabled && ["cursor-not-allowed border-gray-600 hover:border-gray-600", "dark:border-gray-600 dark:hover:border-gray-600"], hasError && ["border-red-700 hover:border-red-900", "dark:border-red-700 dark:hover:border-red-900"], className),
+		disabled,
+		id,
+		value,
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: cn("relative flex size-full items-center justify-center", "after:absolute after:left-1/2 after:top-1/2 after:size-2.5", "after:-translate-x-1/2 after:-translate-y-1/2", "after:rounded-full after:bg-gray-800 after:content-['']", "dark:after:bg-gray-400", !disabled && ["group-hover:after:bg-gray-900", "dark:group-hover:after:bg-gray-50"], disabled && ["after:bg-gray-600", "dark:after:bg-gray-600"]) })
+	}), /* @__PURE__ */ jsx(FormLabel, {
+		className: cn(!disabled && !hasError && ["cursor-pointer", "peer-hover:text-gray-900 dark:peer-hover:text-gray-50"]),
+		description,
+		disabled,
+		hasError,
+		htmlFor: id,
+		required: props.required,
+		inline: true,
+		children: label
+	})] });
+});
+//#endregion
+export { Radio };
+
+//# sourceMappingURL=radio.js.map

package/dist/ui/components/radio-group-field/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":["cn","RadioGroupPrimitive","React","useId","FormLabel","Radio","forwardRef","className","description","disabled","hasError","id","propId","label","value","props","ref","prefix","required"],"sources":["../../../../src/ui/components/radio-group-field/radio.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport React, { useId } from \"react\";\nimport { FormLabel } from \"../form-label/form-label.js\";\n\nexport interface RadioProps extends React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Item\n> {\n  className?: string;\n  description?: string;\n  disabled?: boolean;\n  hasError?: boolean;\n  id?: string;\n  label: string;\n  value: string;\n}\n\nexport const Radio = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(\n  (\n    {\n      className,\n      description,\n      disabled = false,\n      hasError = false,\n      id: propId,\n      label,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-radio`;\n\n    return (\n      <>\n        <RadioGroupPrimitive.Item\n          aria-disabled={disabled}\n          aria-invalid={hasError}\n          className={cn(\n            \"group peer\",\n            \"aspect-square size-4 rounded-full border border-gray-800 dark:border-gray-400\",\n            \"hover:border-gray-900 dark:hover:border-gray-50\",\n            disabled && [\n              \"cursor-not-allowed border-gray-600 hover:border-gray-600\",\n              \"dark:border-gray-600 dark:hover:border-gray-600\",\n            ],\n            hasError && [\n              \"border-red-700 hover:border-red-900\",\n              \"dark:border-red-700 dark:hover:border-red-900\",\n            ],\n            className,\n          )}\n          disabled={disabled}\n          id={id}\n          value={value}\n          {...props}\n          ref={ref}\n        >\n          <RadioGroupPrimitive.Indicator\n            className={cn(\n              \"relative flex size-full items-center justify-center\",\n              \"after:absolute after:left-1/2 after:top-1/2 after:size-2.5\",\n              \"after:-translate-x-1/2 after:-translate-y-1/2\",\n              \"after:rounded-full after:bg-gray-800 after:content-['']\",\n              \"dark:after:bg-gray-400\",\n              !disabled && [\n                \"group-hover:after:bg-gray-900\",\n                \"dark:group-hover:after:bg-gray-50\",\n              ],\n              disabled && [\"after:bg-gray-600\", \"dark:after:bg-gray-600\"],\n            )}\n          />\n        </RadioGroupPrimitive.Item>\n        <FormLabel\n          className={cn(\n            !disabled &&\n              !hasError && [\n                \"cursor-pointer\",\n                \"peer-hover:text-gray-900 dark:peer-hover:text-gray-50\",\n              ],\n          )}\n          description={description}\n          disabled={disabled}\n          hasError={hasError}\n          htmlFor={id}\n          required={props.required}\n          inline\n        >\n          {label}\n        </FormLabel>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;AAiBA,MAAaK,QAAQH,sBAAMI,YAKvB,EACEC,WACAC,aACAC,WAAW,OACXC,WAAW,OACXC,IAAIC,QACJC,OACAC,OACA,GAAGC,SAELC,QACG;CACH,MAAMC,SAASd,OAAO;CACtB,MAAMQ,KAAKC,UAAU,GAAGK,OAAM;AAE9B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,oBAAoB,MAArB;EACE,iBAAeR;EACf,gBAAcC;EACd,WAAWV,GACT,cACA,iFACA,mDACAS,YAAY,CACV,4DACA,kDACD,EACDC,YAAY,CACV,uCACA,gDACD,EACDH,UACD;EACSE;EACNE;EACGG;EACP,GAAIC;EACCC;YAEL,oBAAC,oBAAoB,WAArB,EACE,WAAWhB,GACT,uDACA,8DACA,iDACA,2DACA,0BACA,CAACS,YAAY,CACX,iCACA,oCACD,EACDA,YAAY,CAAC,qBAAqB,yBACpC,CAAC,EAAC,CAAA;EAEoB,CAAA,EAC1B,oBAAC,WAAD;EACE,WAAWT,GACT,CAACS,YACC,CAACC,YAAY,CACX,kBACA,wDAEN,CAAC;EACYF;EACHC;EACAC;EACV,SAASC;EACT,UAAUI,MAAMG;EAChB,QAAA;YAECL;EACQ,CAAA,CACV,EAAA,CAAA;EAGR"}

package/dist/ui/components/search-autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+import { n as SearchAutocompleteProps, r as SearchAutocompleteRowContext, t as SearchAutocompleteOption } from "../../../types-BDeBOEOj.js";
+import { t as SearchAutocomplete } from "../../../search-autocomplete-CfSjqceY.js";
+import { t as useSearchAutocomplete } from "../../../use-search-autocomplete-ZLxfAC6X.js";
+export { SearchAutocomplete, SearchAutocompleteOption, SearchAutocompleteProps, SearchAutocompleteRowContext, useSearchAutocomplete };

package/dist/ui/components/search-autocomplete/index.js

@@ -0,0 +1,3 @@
+import { useSearchAutocomplete } from "./use-search-autocomplete.js";
+import { SearchAutocomplete } from "./search-autocomplete.js";
+export { SearchAutocomplete, useSearchAutocomplete };

package/dist/ui/components/search-autocomplete/search-autocomplete.d.ts

@@ -0,0 +1,2 @@
+import { t as SearchAutocomplete } from "../../../search-autocomplete-CfSjqceY.js";
+export { SearchAutocomplete };

package/dist/ui/components/search-autocomplete/search-autocomplete.js

@@ -0,0 +1,163 @@
+import { t as cn } from "../../../src-DTHkTkyy.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover/popover.js";
+import { Input } from "../input/input.js";
+import { useSearchAutocomplete } from "./use-search-autocomplete.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/search-autocomplete/search-autocomplete.tsx
+const SearchAutocomplete = (props) => {
+	const { fetchOptions, onSelect, selectLabel = "Select", selectingContent, placeholder = "Search...", disabled = false, loading: externalLoading = false, className, renderOption, renderRow, keepOpenSelector, debounceMs = 300 } = props;
+	const { query, setQuery, results, isLoading, error, isOpen, setIsOpen, handleQueryChange } = useSearchAutocomplete({
+		fetchOptions,
+		debounceMs
+	});
+	const [selectingValue, setSelectingValue] = useState(null);
+	const handleInputChange = useCallback((e) => {
+		handleQueryChange(e.target.value);
+	}, [handleQueryChange]);
+	const handleSelect = useCallback(async (value) => {
+		setSelectingValue(value);
+		try {
+			await onSelect(value);
+			setQuery("");
+			setIsOpen(false);
+		} catch {} finally {
+			setSelectingValue(null);
+		}
+	}, [
+		onSelect,
+		setQuery,
+		setIsOpen
+	]);
+	const handleSubmit = useCallback(() => {
+		if (query.trim()) handleSelect(query.trim());
+	}, [query, handleSelect]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			if (!fetchOptions && query.trim()) handleSubmit();
+		}
+	}, [
+		fetchOptions,
+		query,
+		handleSubmit
+	]);
+	const loading = isLoading || externalLoading;
+	if (!fetchOptions) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			value: query,
+			onChange: handleInputChange,
+			onKeyDown: handleKeyDown,
+			placeholder,
+			disabled: disabled || selectingValue !== null,
+			className: "max-w-xs text-gray-700"
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: handleSubmit,
+			disabled: disabled || !query.trim() || selectingValue !== null,
+			className: "h-9 rounded-md bg-gray-900 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50",
+			children: selectLabel
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsxs(Popover, {
+				open: isOpen && results.length > 0,
+				onOpenChange: setIsOpen,
+				children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Input, {
+						value: query,
+						onChange: handleInputChange,
+						onKeyDown: handleKeyDown,
+						placeholder,
+						disabled,
+						className: "max-w-xs text-gray-700"
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "start",
+					onOpenAutoFocus: (e) => e.preventDefault(),
+					onInteractOutside: (e) => {
+						if (keepOpenSelector) {
+							if (e.target?.closest(keepOpenSelector)) {
+								e.preventDefault();
+								return;
+							}
+						}
+						setIsOpen(false);
+					},
+					className: "max-h-80 overflow-visible p-1",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "max-h-80 overflow-y-auto",
+						children: results.map((option) => {
+							if (renderRow) return /* @__PURE__ */ jsx("div", {
+								className: "rounded-md",
+								children: renderRow(option, {
+									selectingValue,
+									selectLabel,
+									selectingContent,
+									handleSelect: (value) => void handleSelect(value)
+								})
+							}, option.value);
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-gray-100",
+								children: [renderOption ? /* @__PURE__ */ jsx("div", {
+									className: "min-w-0 flex-1",
+									children: renderOption(option)
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 flex-1",
+									children: [
+										/* @__PURE__ */ jsx("p", {
+											className: "truncate text-sm font-medium text-gray-900",
+											children: option.label
+										}),
+										option.version && /* @__PURE__ */ jsxs("p", {
+											className: "truncate text-xs text-gray-500",
+											children: ["v", option.version]
+										}),
+										option.description && /* @__PURE__ */ jsx("p", {
+											className: "truncate text-xs text-gray-500",
+											children: option.description
+										}),
+										option.meta && /* @__PURE__ */ jsx("p", {
+											className: "truncate text-xs text-gray-400",
+											children: option.meta
+										})
+									]
+								}), selectingValue === option.value && selectingContent ? /* @__PURE__ */ jsx("div", {
+									className: "flex shrink-0 items-center justify-center",
+									children: selectingContent
+								}) : option.disabled ? /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500",
+									children: option.disabledLabel ?? "Unavailable"
+								}) : /* @__PURE__ */ jsx("button", {
+									onClick: () => void handleSelect(option.value),
+									disabled: selectingValue === option.value,
+									className: "shrink-0 rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50",
+									children: selectingValue === option.value ? "..." : selectLabel
+								})]
+							}, option.value);
+						})
+					})
+				})]
+			}),
+			loading && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-gray-500",
+				children: "Searching..."
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-red-600",
+				children: error
+			}),
+			!loading && !error && query.trim() && results.length === 0 && !isOpen && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-gray-500",
+				children: "No results found"
+			})
+		]
+	});
+};
+//#endregion
+export { SearchAutocomplete };
+
+//# sourceMappingURL=search-autocomplete.js.map

package/dist/ui/components/search-autocomplete/search-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-autocomplete.js","names":["cn","React","useCallback","useState","Input","Popover","PopoverAnchor","PopoverContent","useSearchAutocomplete","SearchAutocomplete","props","fetchOptions","onSelect","selectLabel","selectingContent","placeholder","disabled","loading","externalLoading","className","renderOption","renderRow","keepOpenSelector","debounceMs","query","setQuery","results","isLoading","error","isOpen","setIsOpen","handleQueryChange","selectingValue","setSelectingValue","handleInputChange","e","target","value","handleSelect","handleSubmit","trim","handleKeyDown","key","preventDefault","length","closest","map","option","label","version","description","meta","disabledLabel"],"sources":["../../../../src/ui/components/search-autocomplete/search-autocomplete.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport React, { useCallback, useState } from \"react\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport type { SearchAutocompleteProps } from \"./types.js\";\nimport { useSearchAutocomplete } from \"./use-search-autocomplete.js\";\n\nexport const SearchAutocomplete: React.FC<SearchAutocompleteProps> = (\n  props,\n) => {\n  const {\n    fetchOptions,\n    onSelect,\n    selectLabel = \"Select\",\n    selectingContent,\n    placeholder = \"Search...\",\n    disabled = false,\n    loading: externalLoading = false,\n    className,\n    renderOption,\n    renderRow,\n    keepOpenSelector,\n    debounceMs = 300,\n  } = props;\n\n  const {\n    query,\n    setQuery,\n    results,\n    isLoading,\n    error,\n    isOpen,\n    setIsOpen,\n    handleQueryChange,\n  } = useSearchAutocomplete({ fetchOptions, debounceMs });\n\n  const [selectingValue, setSelectingValue] = useState<string | null>(null);\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleQueryChange(e.target.value);\n    },\n    [handleQueryChange],\n  );\n\n  const handleSelect = useCallback(\n    async (value: string) => {\n      setSelectingValue(value);\n      try {\n        await onSelect(value);\n        setQuery(\"\");\n        setIsOpen(false);\n      } catch {\n        // error handled by caller\n      } finally {\n        setSelectingValue(null);\n      }\n    },\n    [onSelect, setQuery, setIsOpen],\n  );\n\n  const handleSubmit = useCallback(() => {\n    if (query.trim()) {\n      void handleSelect(query.trim());\n    }\n  }, [query, handleSelect]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        if (!fetchOptions && query.trim()) {\n          handleSubmit();\n        }\n      }\n    },\n    [fetchOptions, query, handleSubmit],\n  );\n\n  const loading = isLoading || externalLoading;\n\n  // Fallback: plain text input + submit when no fetchOptions\n  if (!fetchOptions) {\n    return (\n      <div className={cn(\"flex items-center gap-2\", className)}>\n        <Input\n          value={query}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled || selectingValue !== null}\n          className=\"max-w-xs text-gray-700\"\n        />\n        <button\n          onClick={handleSubmit}\n          disabled={disabled || !query.trim() || selectingValue !== null}\n          className=\"h-9 rounded-md bg-gray-900 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50\"\n        >\n          {selectLabel}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Popover open={isOpen && results.length > 0} onOpenChange={setIsOpen}>\n        <PopoverAnchor asChild>\n          <Input\n            value={query}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            className=\"max-w-xs text-gray-700\"\n          />\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (keepOpenSelector) {\n              const target = e.target as HTMLElement | null;\n              if (target?.closest(keepOpenSelector)) {\n                e.preventDefault();\n                return;\n              }\n            }\n            setIsOpen(false);\n          }}\n          className=\"max-h-80 overflow-visible p-1\"\n        >\n          <div className=\"max-h-80 overflow-y-auto\">\n            {results.map((option) => {\n              if (renderRow) {\n                return (\n                  <div key={option.value} className=\"rounded-md\">\n                    {renderRow(option, {\n                      selectingValue,\n                      selectLabel,\n                      selectingContent,\n                      handleSelect: (value) => void handleSelect(value),\n                    })}\n                  </div>\n                );\n              }\n              return (\n                <div\n                  key={option.value}\n                  className=\"flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-gray-100\"\n                >\n                  {renderOption ? (\n                    <div className=\"min-w-0 flex-1\">{renderOption(option)}</div>\n                  ) : (\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"truncate text-sm font-medium text-gray-900\">\n                        {option.label}\n                      </p>\n                      {option.version && (\n                        <p className=\"truncate text-xs text-gray-500\">\n                          v{option.version}\n                        </p>\n                      )}\n                      {option.description && (\n                        <p className=\"truncate text-xs text-gray-500\">\n                          {option.description}\n                        </p>\n                      )}\n                      {option.meta && (\n                        <p className=\"truncate text-xs text-gray-400\">\n                          {option.meta}\n                        </p>\n                      )}\n                    </div>\n                  )}\n                  {selectingValue === option.value && selectingContent ? (\n                    <div className=\"flex shrink-0 items-center justify-center\">\n                      {selectingContent}\n                    </div>\n                  ) : option.disabled ? (\n                    <span className=\"shrink-0 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500\">\n                      {option.disabledLabel ?? \"Unavailable\"}\n                    </span>\n                  ) : (\n                    <button\n                      onClick={() => void handleSelect(option.value)}\n                      disabled={selectingValue === option.value}\n                      className=\"shrink-0 rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50\"\n                    >\n                      {selectingValue === option.value ? \"...\" : selectLabel}\n                    </button>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {loading && <p className=\"mt-1 text-xs text-gray-500\">Searching...</p>}\n      {error && <p className=\"mt-1 text-xs text-red-600\">{error}</p>}\n      {!loading &&\n        !error &&\n        query.trim() &&\n        results.length === 0 &&\n        !isOpen && (\n          <p className=\"mt-1 text-xs text-gray-500\">No results found</p>\n        )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,MAAaS,sBACXC,UACG;CACH,MAAM,EACJC,cACAC,UACAC,cAAc,UACdC,kBACAC,cAAc,aACdC,WAAW,OACXC,SAASC,kBAAkB,OAC3BC,WACAC,cACAC,WACAC,kBACAC,aAAa,QACXb;CAEJ,MAAM,EACJc,OACAC,UACAC,SACAC,WACAC,OACAC,QACAC,WACAC,sBACEvB,sBAAsB;EAAEG;EAAcY;EAAY,CAAC;CAEvD,MAAM,CAACS,gBAAgBC,qBAAqB9B,SAAwB,KAAK;CAEzE,MAAM+B,oBAAoBhC,aACvBiC,MAA2C;AAC1CJ,oBAAkBI,EAAEC,OAAOC,MAAM;IAEnC,CAACN,kBACH,CAAC;CAED,MAAMO,eAAepC,YACnB,OAAOmC,UAAkB;AACvBJ,oBAAkBI,MAAM;AACxB,MAAI;AACF,SAAMzB,SAASyB,MAAM;AACrBZ,YAAS,GAAG;AACZK,aAAU,MAAM;UACV,WAEE;AACRG,qBAAkB,KAAK;;IAG3B;EAACrB;EAAUa;EAAUK;EACvB,CAAC;CAED,MAAMS,eAAerC,kBAAkB;AACrC,MAAIsB,MAAMgB,MAAM,CACTF,cAAad,MAAMgB,MAAM,CAAC;IAEhC,CAAChB,OAAOc,aAAa,CAAC;CAEzB,MAAMG,gBAAgBvC,aACnBiC,MAA2B;AAC1B,MAAIA,EAAEO,QAAQ,SAAS;AACrBP,KAAEQ,gBAAgB;AAClB,OAAI,CAAChC,gBAAgBa,MAAMgB,MAAM,CAC/BD,eAAc;;IAIpB;EAAC5B;EAAca;EAAOe;EACxB,CAAC;CAED,MAAMtB,UAAUU,aAAaT;AAG7B,KAAI,CAACP,aACH,QACE,qBAAC,OAAD;EAAK,WAAWX,GAAG,2BAA2BmB,UAAU;YAAxD,CACE,oBAAC,OAAD;GACE,OAAOK;GACP,UAAUU;GACV,WAAWO;GACE1B;GACb,UAAUC,YAAYgB,mBAAmB;GACzC,WAAU;GAAwB,CAAA,EAEpC,oBAAC,UAAD;GACE,SAASO;GACT,UAAUvB,YAAY,CAACQ,MAAMgB,MAAM,IAAIR,mBAAmB;GAC1D,WAAU;aAETnB;GACK,CAAA,CACJ;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAWb,GAAG,YAAYmB,UAAU;YAAzC;GACE,qBAAC,SAAD;IAAS,MAAMU,UAAUH,QAAQkB,SAAS;IAAG,cAAcd;cAA3D,CACE,oBAAC,eAAD;KAAe,SAAA;eACb,oBAAC,OAAD;MACE,OAAON;MACP,UAAUU;MACV,WAAWO;MACE1B;MACHC;MACV,WAAU;MAAwB,CAAA;KAEvB,CAAA,EACf,oBAAC,gBAAD;KACE,OAAM;KACN,kBAAkBmB,MAAMA,EAAEQ,gBAAgB;KAC1C,oBAAoBR,MAAM;AACxB,UAAIb;WACaa,EAAEC,QACLS,QAAQvB,iBAAiB,EAAE;AACrCa,UAAEQ,gBAAgB;AAClB;;;AAGJb,gBAAU,MAAM;;KAElB,WAAU;eAEV,oBAAC,OAAD;MAAK,WAAU;gBACZJ,QAAQoB,KAAKC,WAAW;AACvB,WAAI1B,UACF,QACE,oBAAC,OAAD;QAAwB,WAAU;kBAC/BA,UAAU0B,QAAQ;SACjBf;SACAnB;SACAC;SACAwB,eAAeD,UAAU,KAAKC,aAAaD,MAAK;SACjD,CAAC;QACE,EAPIU,OAAOV,MAOX;AAGV,cACE,qBAAC,OAAD;QAEE,WAAU;kBAFZ,CAIGjB,eACC,oBAAC,OAAD;SAAK,WAAU;mBAAkBA,aAAa2B,OAAO;SAAO,CAAA,GAE5D,qBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,oBAAC,KAAD;WAAG,WAAU;qBACVA,OAAOC;WACP,CAAA;UACFD,OAAOE,WACN,qBAAC,KAAD;WAAG,WAAU;qBAAb,CAA6C,KACzCF,OAAOE,QAEZ;;UACAF,OAAOG,eACN,oBAAC,KAAD;WAAG,WAAU;qBACVH,OAAOG;WAEX,CAAA;UACAH,OAAOI,QACN,oBAAC,KAAD;WAAG,WAAU;qBACVJ,OAAOI;WAEX,CAAA;UAEJ;YACAnB,mBAAmBe,OAAOV,SAASvB,mBAClC,oBAAC,OAAD;SAAK,WAAU;mBACZA;SACG,CAAA,GACJiC,OAAO/B,WACT,oBAAC,QAAD;SAAM,WAAU;mBACb+B,OAAOK,iBAAiB;SACpB,CAAA,GAEP,oBAAC,UAAD;SACE,eAAe,KAAKd,aAAaS,OAAOV,MAAM;SAC9C,UAAUL,mBAAmBe,OAAOV;SACpC,WAAU;mBAETL,mBAAmBe,OAAOV,QAAQ,QAAQxB;SAE9C,CAAA,CACG;UA5CCkC,OAAOV,MA4CR;QAER;MACC,CAAA;KACS,CAAA,CACT;;GACRpB,WAAW,oBAAC,KAAD;IAAG,WAAU;cAA6B;IAAgB,CAAA;GACrEW,SAAS,oBAAC,KAAD;IAAG,WAAU;cAA6BA;IAAU,CAAA;GAC7D,CAACX,WACA,CAACW,SACDJ,MAAMgB,MAAM,IACZd,QAAQkB,WAAW,KACnB,CAACf,UACC,oBAAC,KAAD;IAAG,WAAU;cAA6B;IAC3C,CAAA;GACC"}

package/dist/ui/components/search-autocomplete/types.d.ts

@@ -0,0 +1,2 @@
+import { n as SearchAutocompleteProps, r as SearchAutocompleteRowContext, t as SearchAutocompleteOption } from "../../../types-BDeBOEOj.js";
+export { SearchAutocompleteOption, SearchAutocompleteProps, SearchAutocompleteRowContext };

package/dist/ui/components/search-autocomplete/use-search-autocomplete.d.ts

@@ -0,0 +1,2 @@
+import { t as useSearchAutocomplete } from "../../../use-search-autocomplete-ZLxfAC6X.js";
+export { useSearchAutocomplete };

package/dist/ui/components/search-autocomplete/use-search-autocomplete.js

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/components/search-autocomplete/use-search-autocomplete.ts
+function useSearchAutocomplete(options) {
+	const { fetchOptions, debounceMs } = options;
+	const [query, setQuery] = useState("");
+	const [results, setResults] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState();
+	const [isOpen, setIsOpen] = useState(false);
+	const debounceRef = useRef(void 0);
+	const abortRef = useRef(void 0);
+	const fetchResults = useCallback(async (searchQuery) => {
+		if (!fetchOptions) return;
+		if (!searchQuery.trim()) {
+			setResults([]);
+			setIsLoading(false);
+			return;
+		}
+		abortRef.current?.abort();
+		const controller = new AbortController();
+		abortRef.current = controller;
+		setIsLoading(true);
+		setError(void 0);
+		try {
+			const data = await fetchOptions(searchQuery);
+			if (!controller.signal.aborted) {
+				setResults(data);
+				setIsOpen(data.length > 0);
+			}
+		} catch (err) {
+			if (!controller.signal.aborted) {
+				setError(err instanceof Error ? err.message : "Failed to fetch results");
+				setResults([]);
+			}
+		} finally {
+			if (!controller.signal.aborted) setIsLoading(false);
+		}
+	}, [fetchOptions]);
+	const handleQueryChange = useCallback((value) => {
+		setQuery(value);
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		if (!value.trim()) {
+			setResults([]);
+			setIsOpen(false);
+			setIsLoading(false);
+			return;
+		}
+		setIsLoading(true);
+		debounceRef.current = setTimeout(() => {
+			fetchResults(value);
+		}, debounceMs);
+	}, [debounceMs, fetchResults]);
+	useEffect(() => {
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+			abortRef.current?.abort();
+		};
+	}, []);
+	return {
+		query,
+		setQuery,
+		results,
+		isLoading,
+		error,
+		isOpen,
+		setIsOpen,
+		handleQueryChange
+	};
+}
+//#endregion
+export { useSearchAutocomplete };
+
+//# sourceMappingURL=use-search-autocomplete.js.map

package/dist/ui/components/search-autocomplete/use-search-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-search-autocomplete.js","names":["useCallback","useEffect","useRef","useState","useSearchAutocomplete","options","fetchOptions","debounceMs","query","setQuery","results","setResults","isLoading","setIsLoading","error","setError","isOpen","setIsOpen","debounceRef","undefined","abortRef","fetchResults","searchQuery","trim","current","abort","controller","AbortController","data","signal","aborted","length","err","Error","message","handleQueryChange","value","clearTimeout","setTimeout"],"sources":["../../../../src/ui/components/search-autocomplete/use-search-autocomplete.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { SearchAutocompleteOption } from \"./types.js\";\n\ninterface UseSearchAutocompleteOptions {\n  fetchOptions?: (query: string) => Promise<SearchAutocompleteOption[]>;\n  debounceMs: number;\n}\n\nexport function useSearchAutocomplete(options: UseSearchAutocompleteOptions) {\n  const { fetchOptions, debounceMs } = options;\n\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<SearchAutocompleteOption[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | undefined>();\n  const [isOpen, setIsOpen] = useState(false);\n\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const abortRef = useRef<AbortController>(undefined);\n\n  const fetchResults = useCallback(\n    async (searchQuery: string) => {\n      if (!fetchOptions) return;\n\n      if (!searchQuery.trim()) {\n        setResults([]);\n        setIsLoading(false);\n        return;\n      }\n\n      abortRef.current?.abort();\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      setIsLoading(true);\n      setError(undefined);\n\n      try {\n        const data = await fetchOptions(searchQuery);\n        if (!controller.signal.aborted) {\n          setResults(data);\n          setIsOpen(data.length > 0);\n        }\n      } catch (err) {\n        if (!controller.signal.aborted) {\n          setError(\n            err instanceof Error ? err.message : \"Failed to fetch results\",\n          );\n          setResults([]);\n        }\n      } finally {\n        if (!controller.signal.aborted) {\n          setIsLoading(false);\n        }\n      }\n    },\n    [fetchOptions],\n  );\n\n  const handleQueryChange = useCallback(\n    (value: string) => {\n      setQuery(value);\n\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n\n      if (!value.trim()) {\n        setResults([]);\n        setIsOpen(false);\n        setIsLoading(false);\n        return;\n      }\n\n      setIsLoading(true);\n      debounceRef.current = setTimeout(() => {\n        fetchResults(value);\n      }, debounceMs);\n    },\n    [debounceMs, fetchResults],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n      abortRef.current?.abort();\n    };\n  }, []);\n\n  return {\n    query,\n    setQuery,\n    results,\n    isLoading,\n    error,\n    isOpen,\n    setIsOpen,\n    handleQueryChange,\n  };\n}\n"],"mappings":";;AAQA,SAAgBI,sBAAsBC,SAAuC;CAC3E,MAAM,EAAEC,cAAcC,eAAeF;CAErC,MAAM,CAACG,OAAOC,YAAYN,SAAS,GAAG;CACtC,MAAM,CAACO,SAASC,cAAcR,SAAqC,EAAE,CAAC;CACtE,MAAM,CAACS,WAAWC,gBAAgBV,SAAS,MAAM;CACjD,MAAM,CAACW,OAAOC,YAAYZ,UAA8B;CACxD,MAAM,CAACa,QAAQC,aAAad,SAAS,MAAM;CAE3C,MAAMe,cAAchB,OAAsCiB,KAAAA,EAAU;CACpE,MAAMC,WAAWlB,OAAwBiB,KAAAA,EAAU;CAEnD,MAAME,eAAerB,YACnB,OAAOsB,gBAAwB;AAC7B,MAAI,CAAChB,aAAc;AAEnB,MAAI,CAACgB,YAAYC,MAAM,EAAE;AACvBZ,cAAW,EAAE,CAAC;AACdE,gBAAa,MAAM;AACnB;;AAGFO,WAASI,SAASC,OAAO;EACzB,MAAMC,aAAa,IAAIC,iBAAiB;AACxCP,WAASI,UAAUE;AAEnBb,eAAa,KAAK;AAClBE,WAASI,KAAAA,EAAU;AAEnB,MAAI;GACF,MAAMS,OAAO,MAAMtB,aAAagB,YAAY;AAC5C,OAAI,CAACI,WAAWG,OAAOC,SAAS;AAC9BnB,eAAWiB,KAAK;AAChBX,cAAUW,KAAKG,SAAS,EAAE;;WAErBC,KAAK;AACZ,OAAI,CAACN,WAAWG,OAAOC,SAAS;AAC9Bf,aACEiB,eAAeC,QAAQD,IAAIE,UAAU,0BACtC;AACDvB,eAAW,EAAE,CAAC;;YAER;AACR,OAAI,CAACe,WAAWG,OAAOC,QACrBjB,cAAa,MAAM;;IAIzB,CAACP,aACH,CAAC;CAED,MAAM6B,oBAAoBnC,aACvBoC,UAAkB;AACjB3B,WAAS2B,MAAM;AAEf,MAAIlB,YAAYM,QACda,cAAanB,YAAYM,QAAQ;AAGnC,MAAI,CAACY,MAAMb,MAAM,EAAE;AACjBZ,cAAW,EAAE,CAAC;AACdM,aAAU,MAAM;AAChBJ,gBAAa,MAAM;AACnB;;AAGFA,eAAa,KAAK;AAClBK,cAAYM,UAAUc,iBAAiB;AACrCjB,gBAAae,MAAM;KAClB7B,WAAW;IAEhB,CAACA,YAAYc,aACf,CAAC;AAEDpB,iBAAgB;AACd,eAAa;AACX,OAAIiB,YAAYM,QACda,cAAanB,YAAYM,QAAQ;AAEnCJ,YAASI,SAASC,OAAO;;IAE1B,EAAE,CAAC;AAEN,QAAO;EACLjB;EACAC;EACAC;EACAE;EACAE;EACAE;EACAC;EACAkB;EACD"}

package/dist/ui/components/select-field/content.d.ts

@@ -0,0 +1,2 @@
+import { t as Content } from "../../../content-ZWaCzypo.js";
+export { Content };

package/dist/ui/components/select-field/content.js

@@ -0,0 +1,112 @@
+import { h as Icon, t as cn } from "../../../src-DTHkTkyy.js";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/command.js";
+import { CommandItemList } from "./subcomponents/CommandItemList.js";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useCommandState } from "cmdk";
+//#region src/ui/components/select-field/content.tsx
+const Content = ({ searchable, commandListRef, multiple, selectedValues, selectionIcon, selectionIconPosition, options = [], toggleAll, toggleOption, favoriteOptions = [] }) => {
+	const enabledOptions = options.filter((opt) => !opt.disabled);
+	const hasAnyIcon = options.some((opt) => opt.icon);
+	const cmdkSearch = useCommandState((state) => state.search);
+	useEffect(() => {
+		commandListRef.current?.scrollTo({
+			top: 0,
+			behavior: "instant"
+		});
+	}, [commandListRef, cmdkSearch]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [searchable && /* @__PURE__ */ jsx(CommandInput, {
+		placeholder: "Search...",
+		onKeyDown: (e) => {
+			if (!([
+				"ArrowUp",
+				"ArrowDown",
+				"Enter"
+			].includes(e.key) && enabledOptions.length > 0)) e.stopPropagation();
+		},
+		wrapperClassName: "rounded-t",
+		className: "text-gray-900 dark:text-gray-50"
+	}), /* @__PURE__ */ jsxs(CommandList, {
+		ref: commandListRef,
+		tabIndex: !searchable ? 0 : void 0,
+		children: [
+			/* @__PURE__ */ jsx(CommandEmpty, {
+				className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400",
+				children: "No results found."
+			}),
+			multiple && cmdkSearch === "" && /* @__PURE__ */ jsx(CommandGroup, {
+				className: "pb-0",
+				children: /* @__PURE__ */ jsx(CommandItem, {
+					value: "select-all",
+					onSelect: toggleAll,
+					disabled: false,
+					className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"),
+					role: "option",
+					"aria-selected": selectedValues.length === enabledOptions.length,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full items-center gap-2",
+						children: [
+							selectionIcon === "auto" && /* @__PURE__ */ jsx("div", {
+								className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", selectedValues.length === enabledOptions.length && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
+								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
+									name: "Checkmark",
+									size: 16
+								})
+							}),
+							selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && /* @__PURE__ */ jsx("div", {
+								className: "size-4",
+								children: selectionIconPosition === "left" && selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
+									name: "Checkmark",
+									size: 16,
+									className: "text-gray-900 dark:text-gray-50"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50",
+								children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All"
+							}),
+							selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
+								className: "ml-auto size-4",
+								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
+									name: "Checkmark",
+									size: 16,
+									className: "text-gray-900 dark:text-gray-50"
+								})
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(CommandGroup, {
+				className: multiple && cmdkSearch === "" ? "pt-0" : void 0,
+				children: [
+					/* @__PURE__ */ jsx(CommandItemList, {
+						options: favoriteOptions,
+						selectedValues,
+						multiple,
+						selectionIcon,
+						selectionIconPosition,
+						hasAnyIcon,
+						toggleOption,
+						tabIndex: !searchable ? 0 : void 0
+					}),
+					favoriteOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-b border-gray-300 dark:border-gray-600" }),
+					/* @__PURE__ */ jsx(CommandItemList, {
+						options,
+						selectedValues,
+						multiple,
+						selectionIcon,
+						selectionIconPosition,
+						hasAnyIcon,
+						toggleOption,
+						tabIndex: !searchable ? 0 : void 0
+					})
+				]
+			})
+		]
+	})] });
+};
+//#endregion
+export { Content };
+
+//# sourceMappingURL=content.js.map

package/dist/ui/components/select-field/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":["cn","Icon","useCommandState","React","useEffect","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","CommandItemList","Content","searchable","commandListRef","multiple","selectedValues","selectionIcon","selectionIconPosition","options","toggleAll","toggleOption","favoriteOptions","enabledOptions","filter","opt","disabled","hasAnyIcon","some","icon","cmdkSearch","state","search","current","scrollTo","top","behavior","e","isOptionsRelatedKey","includes","key","length","stopPropagation","undefined"],"sources":["../../../../src/ui/components/select-field/content.tsx"],"sourcesContent":["import { cn, Icon } from \"#design-system\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport type { SelectProps } from \"../enum-field/types.js\";\nimport { CommandItemList } from \"./subcomponents/CommandItemList.js\";\ninterface ContentProps {\n  searchable?: boolean;\n  commandListRef: React.RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  selectedValues: string[];\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  options: SelectProps[\"options\"];\n  favoriteOptions?: SelectProps[\"options\"];\n  toggleAll: () => void;\n  toggleOption: (value: string) => void;\n}\n\nexport const Content: React.FC<ContentProps> = ({\n  searchable,\n  commandListRef,\n  multiple,\n  selectedValues,\n  selectionIcon,\n  selectionIconPosition,\n  options = [],\n  toggleAll,\n  toggleOption,\n  favoriteOptions = [],\n}) => {\n  const enabledOptions = options.filter((opt) => !opt.disabled);\n  const hasAnyIcon = options.some((opt) => opt.icon);\n\n  const cmdkSearch = useCommandState((state) => state.search);\n  // scroll to top when search change\n  useEffect(() => {\n    commandListRef.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <>\n      {searchable && (\n        <CommandInput\n          placeholder=\"Search...\"\n          onKeyDown={(e) => {\n            const isOptionsRelatedKey = [\n              \"ArrowUp\",\n              \"ArrowDown\",\n              \"Enter\",\n            ].includes(e.key);\n            if (!(isOptionsRelatedKey && enabledOptions.length > 0)) {\n              e.stopPropagation();\n            }\n          }}\n          wrapperClassName=\"rounded-t\"\n          className=\"text-gray-900 dark:text-gray-50\"\n        />\n      )}\n      <CommandList ref={commandListRef} tabIndex={!searchable ? 0 : undefined}>\n        <CommandEmpty className=\"p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400\">\n          No results found.\n        </CommandEmpty>\n        {multiple && cmdkSearch === \"\" && (\n          <CommandGroup className=\"pb-0\">\n            <CommandItem\n              value=\"select-all\"\n              onSelect={toggleAll}\n              disabled={false}\n              className={cn(\n                \"cursor-pointer\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              )}\n              role=\"option\"\n              aria-selected={selectedValues.length === enabledOptions.length}\n            >\n              <div className=\"flex w-full items-center gap-2\">\n                {selectionIcon === \"auto\" && (\n                  <div\n                    className={cn(\n                      \"flex size-4 items-center justify-center rounded-md border\",\n                      \"border-gray-700 dark:border-gray-400\",\n                      selectedValues.length === enabledOptions.length &&\n                        \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                    )}\n                  >\n                    {selectedValues.length === enabledOptions.length && (\n                      <Icon name=\"Checkmark\" size={16} />\n                    )}\n                  </div>\n                )}\n                {selectionIcon === \"checkmark\" &&\n                  !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                    <div className=\"size-4\">\n                      {selectionIconPosition === \"left\" &&\n                        selectedValues.length === enabledOptions.length && (\n                          <Icon\n                            name=\"Checkmark\"\n                            size={16}\n                            className=\"text-gray-900 dark:text-gray-50\"\n                          />\n                        )}\n                    </div>\n                  )}\n                <span className=\"text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50\">\n                  {selectedValues.length === enabledOptions.length\n                    ? \"Deselect All\"\n                    : \"Select All\"}\n                </span>\n                {selectionIcon === \"checkmark\" &&\n                  selectionIconPosition === \"right\" && (\n                    <div className=\"ml-auto size-4\">\n                      {selectedValues.length === enabledOptions.length && (\n                        <Icon\n                          name=\"Checkmark\"\n                          size={16}\n                          className=\"text-gray-900 dark:text-gray-50\"\n                        />\n                      )}\n                    </div>\n                  )}\n              </div>\n            </CommandItem>\n          </CommandGroup>\n        )}\n        <CommandGroup\n          className={multiple && cmdkSearch === \"\" ? \"pt-0\" : undefined}\n        >\n          <CommandItemList\n            options={favoriteOptions}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n\n          {favoriteOptions.length > 0 && (\n            <div className=\"my-1 border-b border-gray-300 dark:border-gray-600\" />\n          )}\n          <CommandItemList\n            options={options}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n        </CommandGroup>\n      </CommandList>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAyBA,MAAaW,WAAmC,EAC9CC,YACAC,gBACAC,UACAC,gBACAC,eACAC,uBACAC,UAAU,EAAE,EACZC,WACAC,cACAC,kBAAkB,EAAA,OACd;CACJ,MAAMC,iBAAiBJ,QAAQK,QAAQC,QAAQ,CAACA,IAAIC,SAAS;CAC7D,MAAMC,aAAaR,QAAQS,MAAMH,QAAQA,IAAII,KAAK;CAElD,MAAMC,aAAa3B,iBAAiB4B,UAAUA,MAAMC,OAAO;AAE3D3B,iBAAgB;AACdS,iBAAemB,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IAChE,CAACtB,gBAAgBgB,WAAW,CAAC;AAEhC,QACE,qBAAA,YAAA,EAAA,UAAA,CACGjB,cACC,oBAAC,cAAD;EACE,aAAY;EACZ,YAAYwB,MAAM;AAMhB,OAAI,EALwB;IAC1B;IACA;IACA;IACD,CAACE,SAASF,EAAEG,IAAI,IACYjB,eAAekB,SAAS,GACnDJ,GAAEK,iBAAiB;;EAGvB,kBAAiB;EACjB,WAAU;EAEb,CAAA,EACD,qBAAC,aAAD;EAAa,KAAK5B;EAAgB,UAAU,CAACD,aAAa,IAAI8B,KAAAA;YAA9D;GACE,oBAAC,cAAD;IAAc,WAAU;cAAoF;IAE9F,CAAA;GACb5B,YAAYe,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAUV;KACV,UAAU;KACV,WAAWnB,GACT,kBACA,yEACD;KACD,MAAK;KACL,iBAAee,eAAeyB,WAAWlB,eAAekB;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACGxB,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAWhB,GACT,6DACA,wCACAe,eAAeyB,WAAWlB,eAAekB,UACvC,6DACH;kBAEAzB,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SAAM,MAAK;SAAY,MAAM;SAC9B,CAAA;QAEJ,CAAA;OACAxB,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWS,eACrC,oBAAC,OAAD;QAAK,WAAU;kBACZT,0BAA0B,UACzBF,eAAeyB,WAAWlB,eAAekB,UACvC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEN,CAAA;OACH,oBAAC,QAAD;QAAM,WAAU;kBACbzB,eAAeyB,WAAWlB,eAAekB,SACtC,iBACA;QACA,CAAA;OACLxB,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;QAAK,WAAU;kBACZF,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEJ,CAAA;OACA;;KACM,CAAA;IAEhB,CAAA;GACD,qBAAC,cAAD;IACE,WAAW1B,YAAYe,eAAe,KAAK,SAASa,KAAAA;cADtD;KAGE,oBAAC,iBAAD;MACE,SAASrB;MACON;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAGvCrB,gBAAgBmB,SAAS,KACxB,oBAAC,OAAD,EAAK,WAAU,sDAChB,CAAA;KACD,oBAAC,iBAAD;MACWtB;MACOH;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAE5B;;GACH;IACZ,EAAA,CAAA"}

package/dist/ui/components/select-field/select-field.d.ts

@@ -0,0 +1,2 @@
+import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../../../select-field-U8KSDxbg.js";
+export { SelectField, SelectFieldProps, SelectFieldRaw };