@powerhousedao/design-system 6.0.0-dev.153 → 6.0.0-dev.155

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

@@ -0,0 +1,112 @@
+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 { Icon, cn } from "@powerhousedao/design-system";
+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":[],"sources":["../../../../src/ui/components/select-field/content.tsx"],"sourcesContent":["import { cn, Icon } from \"@powerhousedao/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,MAAa,WAAmC,EAC9C,YACA,gBACA,UACA,gBACA,eACA,uBACA,UAAU,EAAE,EACZ,WACA,cACA,kBAAkB,EAAE,OAChB;CACJ,MAAM,iBAAiB,QAAQ,QAAQ,QAAQ,CAAC,IAAI,SAAS;CAC7D,MAAM,aAAa,QAAQ,MAAM,QAAQ,IAAI,KAAK;CAElD,MAAM,aAAa,iBAAiB,UAAU,MAAM,OAAO;AAE3D,iBAAgB;AACd,iBAAe,SAAS,SAAS;GAAE,KAAK;GAAG,UAAU;GAAW,CAAC;IAChE,CAAC,gBAAgB,WAAW,CAAC;AAEhC,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,cAAD;EACE,aAAY;EACZ,YAAY,MAAM;AAMhB,OAAI,EALwB;IAC1B;IACA;IACA;IACD,CAAC,SAAS,EAAE,IAAI,IACY,eAAe,SAAS,GACnD,GAAE,iBAAiB;;EAGvB,kBAAiB;EACjB,WAAU;EACV,CAAA,EAEJ,qBAAC,aAAD;EAAa,KAAK;EAAgB,UAAU,CAAC,aAAa,IAAI,KAAA;YAA9D;GACE,oBAAC,cAAD;IAAc,WAAU;cAAqF;IAE9F,CAAA;GACd,YAAY,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAU;KACV,UAAU;KACV,WAAW,GACT,kBACA,yEACD;KACD,MAAK;KACL,iBAAe,eAAe,WAAW,eAAe;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAW,GACT,6DACA,wCACA,eAAe,WAAW,eAAe,UACvC,6DACH;kBAEA,eAAe,WAAW,eAAe,UACxC,oBAAC,MAAD;SAAM,MAAK;SAAY,MAAM;SAAM,CAAA;QAEjC,CAAA;OAEP,kBAAkB,eACjB,EAAE,0BAA0B,WAAW,eACrC,oBAAC,OAAD;QAAK,WAAU;kBACZ,0BAA0B,UACzB,eAAe,WAAW,eAAe,UACvC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SACV,CAAA;QAEF,CAAA;OAEV,oBAAC,QAAD;QAAM,WAAU;kBACb,eAAe,WAAW,eAAe,SACtC,iBACA;QACC,CAAA;OACN,kBAAkB,eACjB,0BAA0B,WACxB,oBAAC,OAAD;QAAK,WAAU;kBACZ,eAAe,WAAW,eAAe,UACxC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SACV,CAAA;QAEA,CAAA;OAEN;;KACM,CAAA;IACD,CAAA;GAEjB,qBAAC,cAAD;IACE,WAAW,YAAY,eAAe,KAAK,SAAS,KAAA;cADtD;KAGE,oBAAC,iBAAD;MACE,SAAS;MACO;MACN;MACK;MACQ;MACX;MACE;MACd,UAAU,CAAC,aAAa,IAAI,KAAA;MAC5B,CAAA;KAED,gBAAgB,SAAS,KACxB,oBAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA;KAExE,oBAAC,iBAAD;MACW;MACO;MACN;MACK;MACQ;MACX;MACE;MACd,UAAU,CAAC,aAAa,IAAI,KAAA;MAC5B,CAAA;KACW;;GACH;IACb,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-D2ibov9u.js";
+export { SelectField, SelectFieldProps, SelectFieldRaw };

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

@@ -0,0 +1,113 @@
+import { Button } from "../button/button.js";
+import { FormLabel } from "../form-label/form-label.js";
+import { FormMessageList } from "../form-message/message-list.js";
+import { Command } from "../command/command.js";
+import { withFieldValidation } from "../with-field-validation/with-field-validation.js";
+import { FormDescription } from "../form-description/form-description.js";
+import { FormGroup } from "../form-group/form-group.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { Content } from "./content.js";
+import { SelectedContent } from "./selected-content.js";
+import { useSelectField } from "./use-select-field.js";
+import React, { useCallback, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+//#region src/ui/components/select-field/select-field.tsx
+const SelectFieldRaw = React.forwardRef(({ options = [], favoriteOptions = [], defaultValue, value, onChange, onBlur, id: propId, name, label, required, disabled, errors = [], warnings = [], multiple, selectionIcon = "auto", selectionIconPosition = "left", searchable, description, placeholder, className, contentClassName, contentAlign = "start", ...props }, ref) => {
+	const prefix = useId();
+	const id = propId ?? `${prefix}-select`;
+	const { selectedValues, isPopoverOpen, commandListRef, toggleOption, handleClear, toggleAll, handleOpenChange } = useSelectField({
+		options,
+		multiple,
+		defaultValue,
+		value,
+		onChange
+	});
+	const onTriggerBlur = useCallback((e) => {
+		if (!isPopoverOpen) onBlur?.(e);
+	}, [onBlur, isPopoverOpen]);
+	return /* @__PURE__ */ jsxs(FormGroup, { children: [
+		label && /* @__PURE__ */ jsx(FormLabel, {
+			htmlFor: id,
+			required,
+			disabled,
+			hasError: errors.length > 0,
+			inline: false,
+			onClick: (e) => {
+				e.preventDefault();
+				e.target.control?.focus();
+			},
+			children: label
+		}),
+		/* @__PURE__ */ jsxs(Popover, {
+			open: isPopoverOpen,
+			onOpenChange: (open) => {
+				handleOpenChange(open);
+				if (!open && document.activeElement?.id !== id) onBlur?.({ target: {} });
+			},
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					id,
+					name,
+					type: "button",
+					role: "combobox",
+					onBlur: onTriggerBlur,
+					disabled,
+					"aria-invalid": errors.length > 0,
+					"aria-label": label ? void 0 : multiple ? "Multi select" : "Select",
+					"aria-required": required,
+					"aria-expanded": isPopoverOpen,
+					className: cn("flex h-9 w-full items-center justify-between px-3 py-2", "dark:border-charcoal-700 dark:bg-charcoal-900 rounded-md border border-gray-300 bg-white", "hover:border-gray-300 hover:bg-gray-100", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800", "dark:focus:ring-charcoal-300 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "dark:focus-visible:ring-charcoal-300 focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0", disabled && ["!pointer-events-auto cursor-not-allowed bg-gray-50", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900 hover:border-gray-300 hover:bg-gray-50"], className),
+					...props,
+					ref,
+					children: /* @__PURE__ */ jsx(SelectedContent, {
+						selectedValues,
+						options: [...favoriteOptions, ...options],
+						multiple,
+						searchable,
+						placeholder,
+						handleClear
+					})
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: contentAlign,
+				onEscapeKeyDown: (e) => {
+					e.preventDefault();
+					handleOpenChange(false);
+				},
+				className: contentClassName,
+				children: /* @__PURE__ */ jsx(Command, {
+					defaultValue: !multiple && selectedValues[0] ? options.find((opt) => opt.value === selectedValues[0])?.label : void 0,
+					children: /* @__PURE__ */ jsx(Content, {
+						favoriteOptions,
+						searchable,
+						commandListRef,
+						multiple,
+						selectedValues,
+						selectionIcon,
+						selectionIconPosition,
+						options,
+						toggleAll,
+						toggleOption
+					})
+				})
+			})]
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		warnings.length > 0 && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: warnings,
+			type: "warning"
+		}),
+		errors.length > 0 && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: errors,
+			type: "error"
+		})
+	] });
+});
+const SelectField = withFieldValidation(SelectFieldRaw);
+SelectField.displayName = "SelectField";
+//#endregion
+export { SelectField, SelectFieldRaw };
+
+//# sourceMappingURL=select-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","names":[],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { cn } from \"@powerhousedao/design-system\";\nimport React, { useCallback, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport { Button } from \"../button/button.js\";\nimport { Command } from \"../command/command.js\";\nimport type { SelectOption, SelectProps } from \"../enum-field/types.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { Content } from \"./content.js\";\nimport { SelectedContent } from \"./selected-content.js\";\nimport { useSelectField } from \"./use-select-field.js\";\n\ntype SelectFieldBaseProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof InputBaseProps<string | string[]>\n  | keyof FieldErrorHandling\n  | keyof SelectProps\n>;\n\nexport type SelectFieldProps = SelectFieldBaseProps &\n  InputBaseProps<string | string[]> &\n  FieldErrorHandling & {\n    options?: SelectOption[];\n    favoriteOptions?: SelectOption[];\n  } & Omit<SelectProps, \"options\" | \"favoriteOptions\">;\n\nexport const SelectFieldRaw = React.forwardRef<\n  HTMLButtonElement,\n  SelectFieldProps\n>(\n  (\n    {\n      // core functionality props\n      options = [],\n      favoriteOptions = [],\n      defaultValue,\n      value,\n      onChange,\n      onBlur,\n\n      // form-related props\n      id: propId,\n      name,\n      label,\n      required,\n      disabled,\n\n      // validation props\n      errors = [],\n      warnings = [],\n\n      // behavior props\n      multiple,\n      selectionIcon = \"auto\",\n      selectionIconPosition = \"left\",\n      searchable,\n\n      // display props\n      description,\n      placeholder,\n      className,\n      contentClassName,\n      contentAlign = \"start\",\n\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-select`;\n\n    const {\n      selectedValues,\n      isPopoverOpen,\n      commandListRef,\n      toggleOption,\n      handleClear,\n      toggleAll,\n      handleOpenChange,\n    } = useSelectField({\n      options,\n      multiple,\n      defaultValue,\n      value,\n      onChange,\n    });\n\n    const onTriggerBlur = useCallback(\n      (e: React.FocusEvent<HTMLButtonElement>) => {\n        if (!isPopoverOpen) {\n          // trigger the blur event when the trigger loses focus but the popover is not open,\n          // because when the popover is open, the trigger loses focus but the select as a component still has the focus\n          onBlur?.(e);\n        }\n      },\n      [onBlur, isPopoverOpen],\n    );\n\n    return (\n      <FormGroup>\n        {label && (\n          <FormLabel\n            htmlFor={id}\n            required={required}\n            disabled={disabled}\n            hasError={errors.length > 0}\n            inline={false}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <Popover\n          open={isPopoverOpen}\n          onOpenChange={(open) => {\n            handleOpenChange(open);\n            // if the popover is closing and it was not by the trigger button\n            if (!open && document.activeElement?.id !== id) {\n              onBlur?.({ target: {} } as React.FocusEvent<HTMLButtonElement>);\n            }\n          }}\n        >\n          <PopoverTrigger asChild={true}>\n            {/* TODO: create a trigger component */}\n            <Button\n              id={id}\n              name={name}\n              type=\"button\"\n              role=\"combobox\"\n              onBlur={onTriggerBlur}\n              disabled={disabled}\n              aria-invalid={errors.length > 0}\n              aria-label={\n                label ? undefined : multiple ? \"Multi select\" : \"Select\"\n              }\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              className={cn(\n                \"flex h-9 w-full items-center justify-between px-3 py-2\",\n                \"dark:border-charcoal-700 dark:bg-charcoal-900 rounded-md border border-gray-300 bg-white\",\n                \"hover:border-gray-300 hover:bg-gray-100\",\n                \"dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800\",\n                \"dark:focus:ring-charcoal-300 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-0\",\n                \"dark:focus-visible:ring-charcoal-300 focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0\",\n                disabled && [\n                  \"!pointer-events-auto cursor-not-allowed bg-gray-50\",\n                  \"dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900 hover:border-gray-300 hover:bg-gray-50\",\n                ],\n                className,\n              )}\n              {...props}\n              ref={ref}\n            >\n              <SelectedContent\n                selectedValues={selectedValues}\n                options={[...favoriteOptions, ...options]}\n                multiple={multiple}\n                searchable={searchable}\n                placeholder={placeholder}\n                handleClear={handleClear}\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            align={contentAlign}\n            onEscapeKeyDown={(e) => {\n              e.preventDefault();\n              handleOpenChange(false);\n            }}\n            className={contentClassName}\n          >\n            <Command\n              defaultValue={\n                !multiple && selectedValues[0]\n                  ? options.find((opt) => opt.value === selectedValues[0])\n                      ?.label\n                  : undefined\n              }\n            >\n              <Content\n                favoriteOptions={favoriteOptions}\n                searchable={searchable}\n                commandListRef={commandListRef}\n                multiple={multiple}\n                selectedValues={selectedValues}\n                selectionIcon={selectionIcon}\n                selectionIconPosition={selectionIconPosition}\n                options={options}\n                toggleAll={toggleAll}\n                toggleOption={toggleOption}\n              />\n            </Command>\n          </PopoverContent>\n        </Popover>\n        {description && <FormDescription>{description}</FormDescription>}\n        {warnings.length > 0 && (\n          <FormMessageList messages={warnings} type=\"warning\" />\n        )}\n        {errors.length > 0 && (\n          <FormMessageList messages={errors} type=\"error\" />\n        )}\n      </FormGroup>\n    );\n  },\n);\n\nexport const SelectField =\n  withFieldValidation<SelectFieldProps>(SelectFieldRaw);\n\nSelectField.displayName = \"SelectField\";\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,iBAAiB,MAAM,YAKhC,EAEE,UAAU,EAAE,EACZ,kBAAkB,EAAE,EACpB,cACA,OACA,UACA,QAGA,IAAI,QACJ,MACA,OACA,UACA,UAGA,SAAS,EAAE,EACX,WAAW,EAAE,EAGb,UACA,gBAAgB,QAChB,wBAAwB,QACxB,YAGA,aACA,aACA,WACA,kBACA,eAAe,SAEf,GAAG,SAEL,QACG;CACH,MAAM,SAAS,OAAO;CACtB,MAAM,KAAK,UAAU,GAAG,OAAO;CAE/B,MAAM,EACJ,gBACA,eACA,gBACA,cACA,aACA,WACA,qBACE,eAAe;EACjB;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aACnB,MAA2C;AAC1C,MAAI,CAAC,cAGH,UAAS,EAAE;IAGf,CAAC,QAAQ,cAAc,CACxB;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACG,SACC,oBAAC,WAAD;GACE,SAAS;GACC;GACA;GACV,UAAU,OAAO,SAAS;GAC1B,QAAQ;GACR,UAAU,MAAM;AACd,MAAE,gBAAgB;AACjB,MAAE,OAA4B,SAAS,OAAO;;aAGhD;GACS,CAAA;EAEd,qBAAC,SAAD;GACE,MAAM;GACN,eAAe,SAAS;AACtB,qBAAiB,KAAK;AAEtB,QAAI,CAAC,QAAQ,SAAS,eAAe,OAAO,GAC1C,UAAS,EAAE,QAAQ,EAAE,EAAE,CAAwC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM;KACE;KACN,MAAK;KACL,MAAK;KACL,QAAQ;KACE;KACV,gBAAc,OAAO,SAAS;KAC9B,cACE,QAAQ,KAAA,IAAY,WAAW,iBAAiB;KAElD,iBAAe;KACf,iBAAe;KACf,WAAW,GACT,0DACA,4FACA,2CACA,6DACA,wGACA,qHACA,YAAY,CACV,sDACA,mGACD,EACD,UACD;KACD,GAAI;KACC;eAEL,oBAAC,iBAAD;MACkB;MAChB,SAAS,CAAC,GAAG,iBAAiB,GAAG,QAAQ;MAC/B;MACE;MACC;MACA;MACb,CAAA;KACK,CAAA;IACM,CAAA,EACjB,oBAAC,gBAAD;IACE,OAAO;IACP,kBAAkB,MAAM;AACtB,OAAE,gBAAgB;AAClB,sBAAiB,MAAM;;IAEzB,WAAW;cAEX,oBAAC,SAAD;KACE,cACE,CAAC,YAAY,eAAe,KACxB,QAAQ,MAAM,QAAQ,IAAI,UAAU,eAAe,GAAG,EAClD,QACJ,KAAA;eAGN,oBAAC,SAAD;MACmB;MACL;MACI;MACN;MACM;MACD;MACQ;MACd;MACE;MACG;MACd,CAAA;KACM,CAAA;IACK,CAAA,CACT;;EACT,eAAe,oBAAC,iBAAD,EAAA,UAAkB,aAA8B,CAAA;EAC/D,SAAS,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAU;GAAU,MAAK;GAAY,CAAA;EAEvD,OAAO,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAU;GAAQ,MAAK;GAAU,CAAA;EAE1C,EAAA,CAAA;EAGjB;AAED,MAAa,cACX,oBAAsC,eAAe;AAEvD,YAAY,cAAc"}

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

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

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, cn } from "@powerhousedao/design-system";
+//#region src/ui/components/select-field/selected-content.tsx
+const SelectedContent = ({ selectedValues, options = [], multiple, searchable, placeholder, handleClear }) => {
+	const renderIcon = (IconComponent) => {
+		if (typeof IconComponent === "string") return /* @__PURE__ */ jsx(Icon, {
+			name: IconComponent,
+			size: 16
+		});
+		return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "size-4" });
+	};
+	if (selectedValues.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto flex w-full items-center", placeholder ? "justify-between" : "justify-end"),
+		children: [placeholder && /* @__PURE__ */ jsx("span", {
+			className: "text-[14px] font-normal leading-5 text-gray-600 dark:text-gray-500",
+			children: placeholder
+		}), searchable ? /* @__PURE__ */ jsx(Icon, {
+			name: "CaretSort",
+			size: 16,
+			className: "cursor-pointer text-gray-700 dark:text-gray-400"
+		}) : /* @__PURE__ */ jsx(Icon, {
+			name: "ChevronDown",
+			size: 16,
+			className: "cursor-pointer text-gray-700 dark:text-gray-400"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("max-w-full truncate text-gray-900 dark:text-gray-50", !multiple && "flex items-center gap-2"),
+			children: selectedValues.map((value, index) => {
+				const option = options.find((o) => o.value === value);
+				return !multiple ? /* @__PURE__ */ jsxs(React.Fragment, { children: [renderIcon(option?.icon), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-[14px] font-normal leading-5",
+					children: option?.label
+				})] }, value) : /* @__PURE__ */ jsx("span", {
+					className: cn("text-[14px] font-normal leading-5", index !== selectedValues.length - 1 && "mr-1"),
+					children: index !== selectedValues.length - 1 ? `${option?.label},` : option?.label
+				}, value);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [multiple && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", {
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					handleClear();
+				},
+				className: "size-4 p-0",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "XmarkLight",
+					size: 16,
+					className: "cursor-pointer text-gray-700 dark:text-gray-400"
+				})
+			}), searchable ? /* @__PURE__ */ jsx(Icon, {
+				name: "CaretSort",
+				size: 16,
+				className: "cursor-pointer text-gray-700 dark:text-gray-400"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "ChevronDown",
+				size: 16,
+				className: "cursor-pointer text-gray-700 dark:text-gray-400"
+			})]
+		})]
+	});
+};
+//#endregion
+export { SelectedContent };
+
+//# sourceMappingURL=selected-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selected-content.js","names":[],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"@powerhousedao/design-system\";\nimport { cn, Icon } from \"@powerhousedao/design-system\";\nimport React from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface SelectedContentProps {\n  selectedValues: string[];\n  options: SelectProps[\"options\"];\n  multiple?: boolean;\n  searchable?: boolean;\n  placeholder?: string;\n  handleClear: () => void;\n}\n\nexport const SelectedContent: React.FC<SelectedContentProps> = ({\n  selectedValues,\n  options = [],\n  multiple,\n  searchable,\n  placeholder,\n  handleClear,\n}) => {\n  const renderIcon = (\n    IconComponent:\n      | IconName\n      | React.ComponentType<{ className?: string }>\n      | undefined,\n  ) => {\n    if (typeof IconComponent === \"string\") {\n      return <Icon name={IconComponent} size={16} />;\n    }\n    return IconComponent && <IconComponent className=\"size-4\" />;\n  };\n\n  if (selectedValues.length === 0) {\n    return (\n      <div\n        className={cn(\n          \"mx-auto flex w-full items-center\",\n          placeholder ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {placeholder && (\n          <span className=\"text-[14px] font-normal leading-5 text-gray-600 dark:text-gray-500\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center justify-between gap-2\">\n      <div\n        className={cn(\n          \"max-w-full truncate text-gray-900 dark:text-gray-50\",\n          !multiple && \"flex items-center gap-2\",\n        )}\n      >\n        {selectedValues.map((value, index) => {\n          const option = options.find((o) => o.value === value);\n          return !multiple ? (\n            <React.Fragment key={value}>\n              {renderIcon(option?.icon)}\n              <span className=\"truncate text-[14px] font-normal leading-5\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={cn(\n                \"text-[14px] font-normal leading-5\",\n                index !== selectedValues.length - 1 && \"mr-1\",\n              )}\n            >\n              {index !== selectedValues.length - 1\n                ? `${option?.label},`\n                : option?.label}\n            </span>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center justify-between gap-2\">\n        {multiple && selectedValues.length > 0 && (\n          <div\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              handleClear();\n            }}\n            className=\"size-4 p-0\"\n          >\n            <Icon\n              name=\"XmarkLight\"\n              size={16}\n              className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAcA,MAAa,mBAAmD,EAC9D,gBACA,UAAU,EAAE,EACZ,UACA,YACA,aACA,kBACI;CACJ,MAAM,cACJ,kBAIG;AACH,MAAI,OAAO,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAM;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAO,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAI,eAAe,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAW,GACT,oCACA,cAAc,oBAAoB,cACnC;YAJH,CAMG,eACC,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,EAER,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,CAEA;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAW,GACT,uDACA,CAAC,YAAY,0BACd;aAEA,eAAe,KAAK,OAAO,UAAU;IACpC,MAAM,SAAS,QAAQ,MAAM,MAAM,EAAE,UAAU,MAAM;AACrD,WAAO,CAAC,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,WAAW,QAAQ,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACb,QAAQ;KACJ,CAAA,CACQ,EAAA,EALI,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAW,GACT,qCACA,UAAU,eAAe,SAAS,KAAK,OACxC;eAEA,UAAU,eAAe,SAAS,IAC/B,GAAG,QAAQ,MAAM,KACjB,QAAQ;KACP,EATA,MASA;KAET;GACE,CAAA,EACN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,YAAY,eAAe,SAAS,KACnC,oBAAC,OAAD;IACE,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,OAAE,iBAAiB;AACnB,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KACV,CAAA;IACE,CAAA,EAEP,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,CAEA;KACF"}

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

@@ -0,0 +1,18 @@
+import { i as SelectProps } from "../../../../types-RcuuLIj7.js";
+import React from "react";
+
+//#region src/ui/components/select-field/subcomponents/CommandItemList.d.ts
+interface FavoriteOptionsProps {
+  options: SelectProps["options"];
+  selectedValues: string[];
+  multiple?: boolean;
+  selectionIcon: "auto" | "checkmark";
+  selectionIconPosition: "left" | "right";
+  hasAnyIcon: boolean;
+  toggleOption: (value: string) => void;
+  tabIndex?: number;
+}
+declare const CommandItemList: React.FC<FavoriteOptionsProps>;
+//#endregion
+export { CommandItemList };
+//# sourceMappingURL=CommandItemList.d.ts.map

package/dist/ui/components/select-field/subcomponents/CommandItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemList.d.ts","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"mappings":";;;;UAMU,oBAAA;EACR,OAAA,EAAS,WAAA;EACT,cAAA;EACA,QAAA;EACA,aAAA;EACA,qBAAA;EACA,UAAA;EACA,YAAA,GAAe,KAAA;EACf,QAAA;AAAA;AAAA,cA2BW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/ui/components/select-field/subcomponents/CommandItemList.js

@@ -0,0 +1,64 @@
+import { CommandItem } from "../../command/command.js";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Icon, cn } from "@powerhousedao/design-system";
+//#region src/ui/components/select-field/subcomponents/CommandItemList.tsx
+const renderIcon = (IconComponent) => {
+	if (typeof IconComponent === "string") return /* @__PURE__ */ jsx(Icon, {
+		name: IconComponent,
+		size: 16,
+		className: cn("text-gray-700 dark:text-gray-400")
+	});
+	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: cn("size-4", "text-gray-700 dark:text-gray-400") });
+};
+const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex }) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((opt) => {
+		const isSelected = selectedValues.includes(opt.value);
+		return /* @__PURE__ */ jsxs(CommandItem, {
+			tabIndex,
+			value: opt.label,
+			onSelect: () => !opt.disabled && toggleOption(opt.value),
+			disabled: opt.disabled,
+			className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled && "!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent"),
+			role: "option",
+			"aria-selected": isSelected,
+			children: [
+				selectionIcon === "auto" && (multiple ? /* @__PURE__ */ jsx("div", {
+					className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
+					children: isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: cn("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-gray-400" : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"),
+					children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
+				})),
+				selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && /* @__PURE__ */ jsx("div", {
+					className: "size-4",
+					children: selectionIconPosition === "left" && isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16,
+						className: "text-gray-900 dark:text-gray-50"
+					})
+				}),
+				renderIcon(opt.icon),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("flex-1 truncate text-[14px] font-normal leading-4", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"),
+					children: opt.label
+				}),
+				selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
+					className: "size-4",
+					children: isSelected && /* @__PURE__ */ jsx(Icon, {
+						name: "Checkmark",
+						size: 16,
+						className: "text-gray-900 dark:text-gray-50"
+					})
+				})
+			]
+		}, `favorite-${opt.value}`);
+	}) });
+};
+//#endregion
+export { CommandItemList };
+
+//# sourceMappingURL=CommandItemList.js.map

package/dist/ui/components/select-field/subcomponents/CommandItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemList.js","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"@powerhousedao/design-system\";\nimport { cn, Icon } from \"@powerhousedao/design-system\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={cn(\"text-gray-700 dark:text-gray-400\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={cn(\"size-4\", \"text-gray-700 dark:text-gray-400\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={cn(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              opt.disabled &&\n                \"!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\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                    isSelected &&\n                      \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={cn(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-gray-400\"\n                      : \"border-gray-800 dark:border-gray-400\",\n                    \"bg-transparent dark:bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={cn(\n                \"flex-1 truncate text-[14px] font-normal leading-4\",\n                \"text-gray-700 dark:text-gray-500\",\n                opt.disabled && \"text-gray-600 dark:text-gray-600\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;AAiBA,MAAM,cACJ,kBAIG;AACH,KAAI,OAAO,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAM;EACN,MAAM;EACN,WAAW,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACE,iBACE,oBAAC,eAAD,EACE,WAAW,GAAG,UAAU,mCAAmC,EAC3D,CAAA;;AAKR,MAAa,mBAAmD,EAC9D,UAAU,EAAE,EACZ,gBACA,UACA,eACA,uBACA,YACA,cACA,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACG,QAAQ,KAAK,QAAQ;EACpB,MAAM,aAAa,eAAe,SAAS,IAAI,MAAM;AACrD,SACE,qBAAC,aAAD;GACY;GAEV,OAAO,IAAI;GACX,gBAAgB,CAAC,IAAI,YAAY,aAAa,IAAI,MAAM;GACxD,UAAU,IAAI;GACd,WAAW,GACT,kBACA,0EACA,IAAI,YACF,yFACH;GACD,MAAK;GACL,iBAAe;aAbjB;IAeG,kBAAkB,WAChB,WACC,oBAAC,OAAD;KACE,WAAW,GACT,6DACA,wCACA,cACE,6DACH;eAEA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAW,GACT,uCACA,aACI,yCACA,wCACJ,qCACD;eAEA,cACC,oBAAC,OAAD,EAAK,WAAU,kHAAmH,CAAA;KAEhI,CAAA;IAET,kBAAkB,eACjB,EAAE,0BAA0B,WAAW,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZ,0BAA0B,UAAU,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MACV,CAAA;KAEA,CAAA;IAET,WAAW,IAAI,KAAK;IACrB,oBAAC,QAAD;KACE,WAAW,GACT,qDACA,oCACA,IAAI,YAAY,mCACjB;eAEA,IAAI;KACA,CAAA;IACN,kBAAkB,eACjB,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZ,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MACV,CAAA;KAEA,CAAA;IAEE;KA1EP,YAAY,IAAI,QA0ET;GAEhB,EACD,CAAA"}

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

@@ -0,0 +1,29 @@
+import { i as SelectProps } from "../../../types-RcuuLIj7.js";
+import * as react from "react";
+
+//#region src/ui/components/select-field/use-select-field.d.ts
+interface UseSelectFieldProps {
+  options?: SelectProps["options"];
+  multiple?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+}
+declare function useSelectField({
+  options,
+  multiple,
+  defaultValue,
+  value,
+  onChange
+}: UseSelectFieldProps): {
+  selectedValues: string[];
+  isPopoverOpen: boolean;
+  commandListRef: react.RefObject<HTMLDivElement | null>;
+  toggleOption: (optionValue: string) => void;
+  handleClear: () => void;
+  toggleAll: () => void;
+  handleOpenChange: (open: boolean) => void;
+};
+//#endregion
+export { useSelectField };
+//# sourceMappingURL=use-select-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-field.d.ts","names":[],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"mappings":";;;;UAGU,mBAAA;EACR,OAAA,GAAU,WAAA;EACV,QAAA;EACA,YAAA;EACA,KAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,iBAGE,cAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,YAAA;EACA,KAAA;EACA;AAAA,GACC,mBAAA"}

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

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/components/select-field/use-select-field.ts
+function useSelectField({ options = [], multiple = false, defaultValue, value, onChange }) {
+	const isInternalChange = useRef(false);
+	const commandListRef = useRef(null);
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	const [selectedValues, setSelectedValues] = useState(() => {
+		const initialValue = value ?? defaultValue ?? [];
+		if (initialValue === "") return [];
+		return Array.isArray(initialValue) ? initialValue : [initialValue];
+	});
+	useEffect(() => {
+		if (isInternalChange.current) {
+			isInternalChange.current = false;
+			return;
+		}
+		const newValue = value ?? defaultValue ?? [];
+		if (newValue === "") setSelectedValues([]);
+		else setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);
+	}, [value]);
+	const handleOpenChange = useCallback((open) => {
+		setIsPopoverOpen(open);
+	}, []);
+	const toggleOption = useCallback((optionValue) => {
+		isInternalChange.current = true;
+		let newValues;
+		if (multiple) newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+		else {
+			newValues = selectedValues[0] === optionValue ? [] : [optionValue];
+			setIsPopoverOpen(false);
+		}
+		setSelectedValues(newValues);
+		onChange?.(multiple ? newValues : newValues[0] ?? "");
+	}, [
+		multiple,
+		selectedValues,
+		options,
+		onChange
+	]);
+	const handleClear = useCallback(() => {
+		isInternalChange.current = true;
+		setSelectedValues([]);
+		onChange?.(multiple ? [] : "");
+	}, [multiple, onChange]);
+	const toggleAll = useCallback(() => {
+		isInternalChange.current = true;
+		const enabledOptions = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
+		const newValues = selectedValues.length === enabledOptions.length ? [] : enabledOptions;
+		setSelectedValues(newValues);
+		onChange?.(multiple ? newValues : newValues[0]);
+	}, [
+		options,
+		selectedValues,
+		multiple,
+		onChange
+	]);
+	const prevMultiple = useRef(multiple);
+	useEffect(() => {
+		if (prevMultiple.current === multiple) return;
+		prevMultiple.current = multiple;
+		if (!multiple && selectedValues.length > 1) {
+			isInternalChange.current = true;
+			setSelectedValues([selectedValues[0]]);
+			onChange?.(selectedValues[0]);
+			return;
+		}
+		if (selectedValues.length > 0) {
+			isInternalChange.current = true;
+			onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);
+		}
+	}, [multiple]);
+	return {
+		selectedValues,
+		isPopoverOpen,
+		commandListRef,
+		toggleOption,
+		handleClear,
+		toggleAll,
+		handleOpenChange
+	};
+}
+//#endregion
+export { useSelectField };
+
+//# sourceMappingURL=use-select-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-field.js","names":[],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface UseSelectFieldProps {\n  options?: SelectProps[\"options\"];\n  multiple?: boolean;\n  defaultValue?: string | string[];\n  value?: string | string[];\n  onChange?: (value: string | string[]) => void;\n}\n\nexport function useSelectField({\n  options = [],\n  multiple = false,\n  defaultValue,\n  value,\n  onChange,\n}: UseSelectFieldProps) {\n  const isInternalChange = useRef(false);\n  const commandListRef = useRef<HTMLDivElement>(null);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<string[]>(() => {\n    const initialValue = value ?? defaultValue ?? [];\n    if (initialValue === \"\") {\n      return [];\n    }\n    return Array.isArray(initialValue) ? initialValue : [initialValue];\n  });\n\n  useEffect(() => {\n    if (isInternalChange.current) {\n      isInternalChange.current = false;\n      return;\n    }\n    const newValue = value ?? defaultValue ?? [];\n    if (newValue === \"\") {\n      setSelectedValues([]);\n    } else {\n      setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);\n    }\n  }, [value]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsPopoverOpen(open);\n  }, []);\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      isInternalChange.current = true;\n      let newValues: string[];\n\n      if (multiple) {\n        newValues = selectedValues.includes(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue];\n      } else {\n        newValues = selectedValues[0] === optionValue ? [] : [optionValue];\n\n        setIsPopoverOpen(false);\n      }\n\n      setSelectedValues(newValues);\n      onChange?.(multiple ? newValues : (newValues[0] ?? \"\"));\n    },\n    [multiple, selectedValues, options, onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    isInternalChange.current = true;\n    setSelectedValues([]);\n    onChange?.(multiple ? [] : \"\");\n  }, [multiple, onChange]);\n\n  const toggleAll = useCallback(() => {\n    isInternalChange.current = true;\n    const enabledOptions = options\n      .filter((opt) => !opt.disabled)\n      .map((opt) => opt.value);\n\n    const newValues =\n      selectedValues.length === enabledOptions.length ? [] : enabledOptions;\n\n    setSelectedValues(newValues);\n    onChange?.(multiple ? newValues : newValues[0]);\n  }, [options, selectedValues, multiple, onChange]);\n\n  // handles changes to the \"multiple\" prop avoiding calling onChange on mount\n  const prevMultiple = useRef(multiple);\n  useEffect(() => {\n    if (prevMultiple.current === multiple) {\n      return;\n    }\n    prevMultiple.current = multiple;\n\n    if (!multiple && selectedValues.length > 1) {\n      isInternalChange.current = true;\n      setSelectedValues([selectedValues[0]]);\n      onChange?.(selectedValues[0]);\n      return;\n    }\n    if (selectedValues.length > 0) {\n      isInternalChange.current = true;\n      onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);\n    }\n  }, [multiple]);\n\n  return {\n    selectedValues,\n    isPopoverOpen,\n    commandListRef,\n    toggleOption,\n    handleClear,\n    toggleAll,\n    handleOpenChange,\n  };\n}\n"],"mappings":";;AAWA,SAAgB,eAAe,EAC7B,UAAU,EAAE,EACZ,WAAW,OACX,cACA,OACA,YACsB;CACtB,MAAM,mBAAmB,OAAO,MAAM;CACtC,MAAM,iBAAiB,OAAuB,KAAK;CACnD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,eAAyB;EACnE,MAAM,eAAe,SAAS,gBAAgB,EAAE;AAChD,MAAI,iBAAiB,GACnB,QAAO,EAAE;AAEX,SAAO,MAAM,QAAQ,aAAa,GAAG,eAAe,CAAC,aAAa;GAClE;AAEF,iBAAgB;AACd,MAAI,iBAAiB,SAAS;AAC5B,oBAAiB,UAAU;AAC3B;;EAEF,MAAM,WAAW,SAAS,gBAAgB,EAAE;AAC5C,MAAI,aAAa,GACf,mBAAkB,EAAE,CAAC;MAErB,mBAAkB,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC;IAEnE,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,aAAa,SAAkB;AACtD,mBAAiB,KAAK;IACrB,EAAE,CAAC;CAEN,MAAM,eAAe,aAClB,gBAAwB;AACvB,mBAAiB,UAAU;EAC3B,IAAI;AAEJ,MAAI,SACF,aAAY,eAAe,SAAS,YAAY,GAC5C,eAAe,QAAQ,MAAM,MAAM,YAAY,GAC/C,CAAC,GAAG,gBAAgB,YAAY;OAC/B;AACL,eAAY,eAAe,OAAO,cAAc,EAAE,GAAG,CAAC,YAAY;AAElE,oBAAiB,MAAM;;AAGzB,oBAAkB,UAAU;AAC5B,aAAW,WAAW,YAAa,UAAU,MAAM,GAAI;IAEzD;EAAC;EAAU;EAAgB;EAAS;EAAS,CAC9C;CAED,MAAM,cAAc,kBAAkB;AACpC,mBAAiB,UAAU;AAC3B,oBAAkB,EAAE,CAAC;AACrB,aAAW,WAAW,EAAE,GAAG,GAAG;IAC7B,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,YAAY,kBAAkB;AAClC,mBAAiB,UAAU;EAC3B,MAAM,iBAAiB,QACpB,QAAQ,QAAQ,CAAC,IAAI,SAAS,CAC9B,KAAK,QAAQ,IAAI,MAAM;EAE1B,MAAM,YACJ,eAAe,WAAW,eAAe,SAAS,EAAE,GAAG;AAEzD,oBAAkB,UAAU;AAC5B,aAAW,WAAW,YAAY,UAAU,GAAG;IAC9C;EAAC;EAAS;EAAgB;EAAU;EAAS,CAAC;CAGjD,MAAM,eAAe,OAAO,SAAS;AACrC,iBAAgB;AACd,MAAI,aAAa,YAAY,SAC3B;AAEF,eAAa,UAAU;AAEvB,MAAI,CAAC,YAAY,eAAe,SAAS,GAAG;AAC1C,oBAAiB,UAAU;AAC3B,qBAAkB,CAAC,eAAe,GAAG,CAAC;AACtC,cAAW,eAAe,GAAG;AAC7B;;AAEF,MAAI,eAAe,SAAS,GAAG;AAC7B,oBAAiB,UAAU;AAC3B,cAAW,WAAW,CAAC,eAAe,GAAG,GAAG,eAAe,GAAG;;IAE/D,CAAC,SAAS,CAAC;AAEd,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/ui/components/storybook-arg-types.d.ts

@@ -0,0 +1,2 @@
+import { a as getDefaultArgTypes, i as ValidationArgTypesOptions, n as PrebuiltArgTypes, o as getValidationArgTypes, r as StorybookControlCategory, t as DefaultArgTypesOptions } from "../../storybook-arg-types-DCm0HPPK.js";
+export { DefaultArgTypesOptions, PrebuiltArgTypes, StorybookControlCategory, ValidationArgTypesOptions, getDefaultArgTypes, getValidationArgTypes };