@powerhousedao/design-system 6.1.0-dev.12 → 6.1.0-dev.14

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

@@ -1,8 +1,8 @@
-import { t as cn } from "../../../src-BgKEHW0i.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 { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/search-autocomplete/search-autocomplete.tsx
 const SearchAutocomplete = (props) => {
@@ -44,23 +44,23 @@ const SearchAutocomplete = (props) => {
 	]);
 	const loading = isLoading || externalLoading;
 	if (!fetchOptions) return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-2", className),
+		className: twMerge("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"
+			className: "max-w-xs text-gray-700 dark:text-slate-200"
 		}), /* @__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",
+			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 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
 			children: selectLabel
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative", className),
+		className: twMerge("relative", className),
 		children: [
 			/* @__PURE__ */ jsxs(Popover, {
 				open: isOpen && results.length > 0,
@@ -73,7 +73,7 @@ const SearchAutocomplete = (props) => {
 						onKeyDown: handleKeyDown,
 						placeholder,
 						disabled,
-						className: "max-w-xs text-gray-700"
+						className: "max-w-xs text-gray-700 dark:text-slate-200"
 					})
 				}), /* @__PURE__ */ jsx(PopoverContent, {
 					align: "start",
@@ -101,7 +101,7 @@ const SearchAutocomplete = (props) => {
 								})
 							}, 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",
+								className: "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-slate-700",
 								children: [renderOption ? /* @__PURE__ */ jsx("div", {
 									className: "min-w-0 flex-1",
 									children: renderOption(option)
@@ -109,19 +109,19 @@ const SearchAutocomplete = (props) => {
 									className: "min-w-0 flex-1",
 									children: [
 										/* @__PURE__ */ jsx("p", {
-											className: "truncate text-sm font-medium text-gray-900",
+											className: "truncate text-sm font-medium text-gray-900 dark:text-slate-50",
 											children: option.label
 										}),
 										option.version && /* @__PURE__ */ jsxs("p", {
-											className: "truncate text-xs text-gray-500",
+											className: "truncate text-xs text-gray-500 dark:text-slate-400",
 											children: ["v", option.version]
 										}),
 										option.description && /* @__PURE__ */ jsx("p", {
-											className: "truncate text-xs text-gray-500",
+											className: "truncate text-xs text-gray-500 dark:text-slate-400",
 											children: option.description
 										}),
 										option.meta && /* @__PURE__ */ jsx("p", {
-											className: "truncate text-xs text-gray-400",
+											className: "truncate text-xs text-gray-400 dark:text-slate-500",
 											children: option.meta
 										})
 									]
@@ -129,12 +129,12 @@ const SearchAutocomplete = (props) => {
 									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",
+									className: "shrink-0 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500 dark:bg-slate-700 dark:text-slate-400",
 									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",
+									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 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
 									children: selectingValue === option.value ? "..." : selectLabel
 								})]
 							}, option.value);
@@ -143,15 +143,15 @@ const SearchAutocomplete = (props) => {
 				})]
 			}),
 			loading && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-gray-500",
+				className: "mt-1 text-xs text-gray-500 dark:text-slate-400",
 				children: "Searching..."
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-red-600",
+				className: "mt-1 text-xs text-red-600 dark:text-red-100",
 				children: error
 			}),
 			!loading && !error && query.trim() && results.length === 0 && !isOpen && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-gray-500",
+				className: "mt-1 text-xs text-gray-500 dark:text-slate-400",
 				children: "No results found"
 			})
 		]

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

@@ -1 +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":"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"}
+{"version":3,"file":"search-autocomplete.js","names":["twMerge","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 { twMerge } from \"tailwind-merge\";\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={twMerge(\"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 dark:text-slate-200\"\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 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100\"\n        >\n          {selectLabel}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={twMerge(\"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 dark:text-slate-200\"\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 dark:hover:bg-slate-700\"\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 dark:text-slate-50\">\n                        {option.label}\n                      </p>\n                      {option.version && (\n                        <p className=\"truncate text-xs text-gray-500 dark:text-slate-400\">\n                          v{option.version}\n                        </p>\n                      )}\n                      {option.description && (\n                        <p className=\"truncate text-xs text-gray-500 dark:text-slate-400\">\n                          {option.description}\n                        </p>\n                      )}\n                      {option.meta && (\n                        <p className=\"truncate text-xs text-gray-400 dark:text-slate-500\">\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 dark:bg-slate-700 dark:text-slate-400\">\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 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100\"\n                    >\n                      {selectingValue === option.value ? \"...\" : selectLabel}\n                    </button>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {loading && (\n        <p className=\"mt-1 text-xs text-gray-500 dark:text-slate-400\">\n          Searching...\n        </p>\n      )}\n      {error && (\n        <p className=\"mt-1 text-xs text-red-600 dark:text-red-100\">{error}</p>\n      )}\n      {!loading &&\n        !error &&\n        query.trim() &&\n        results.length === 0 &&\n        !isOpen && (\n          <p className=\"mt-1 text-xs text-gray-500 dark:text-slate-400\">\n            No results found\n          </p>\n        )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
-import { h as Icon, t as cn } from "../../../src-BgKEHW0i.js";
+import { t as Icon } from "../../../icon-C4QOpsdI.js";
 import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/command.js";
 import { CommandItemList } from "./subcomponents/CommandItemList.js";
 import { useEffect } from "react";
+import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useCommandState } from "cmdk";
 //#region src/ui/components/select-field/content.tsx
@@ -25,13 +26,13 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 			].includes(e.key) && enabledOptions.length > 0)) e.stopPropagation();
 		},
 		wrapperClassName: "rounded-t",
-		className: "text-gray-900 dark:text-gray-50"
+		className: "text-gray-900 dark:text-slate-50"
 	}), /* @__PURE__ */ jsxs(CommandList, {
 		ref: commandListRef,
 		tabIndex: !searchable ? 0 : void 0,
 		children: [
 			/* @__PURE__ */ jsx(CommandEmpty, {
-				className: "p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-gray-400",
+				className: "p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-slate-200",
 				children: "No results found."
 			}),
 			multiple && cmdkSearch === "" && /* @__PURE__ */ jsx(CommandGroup, {
@@ -40,14 +41,14 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 					value: "select-all",
 					onSelect: toggleAll,
 					disabled: false,
-					className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"),
+					className: twMerge("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-600"),
 					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"),
+								className: twMerge("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-slate-200", selectedValues.length === enabledOptions.length && "bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900"),
 								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16
@@ -58,11 +59,11 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 								children: selectionIconPosition === "left" && selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16,
-									className: "text-gray-900 dark:text-gray-50"
+									className: "text-gray-900 dark:text-slate-50"
 								})
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-sm/4 font-semibold text-gray-900 dark:text-gray-50",
+								className: "text-sm/4 font-semibold text-gray-900 dark:text-slate-50",
 								children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All"
 							}),
 							selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
@@ -70,7 +71,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16,
-									className: "text-gray-900 dark:text-gray-50"
+									className: "text-gray-900 dark:text-slate-50"
 								})
 							})
 						]
@@ -90,7 +91,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 						toggleOption,
 						tabIndex: !searchable ? 0 : void 0
 					}),
-					favoriteOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-b border-gray-300 dark:border-gray-600" }),
+					favoriteOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-b border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100" }),
 					/* @__PURE__ */ jsx(CommandItemList, {
 						options,
 						selectedValues,

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

@@ -1 +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-sm/5 font-normal 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-sm/4 font-semibold 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;cAAwE;IAElF,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"}
+{"version":3,"file":"content.js","names":["Icon","twMerge","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 { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\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-slate-50\"\n        />\n      )}\n      <CommandList ref={commandListRef} tabIndex={!searchable ? 0 : undefined}>\n        <CommandEmpty className=\"p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-slate-200\">\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={twMerge(\n                \"cursor-pointer\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-600\",\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={twMerge(\n                      \"flex size-4 items-center justify-center rounded-md border\",\n                      \"border-gray-700 dark:border-slate-200\",\n                      selectedValues.length === enabledOptions.length &&\n                        \"bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900\",\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-slate-50\"\n                          />\n                        )}\n                    </div>\n                  )}\n                <span className=\"text-sm/4 font-semibold text-gray-900 dark:text-slate-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-slate-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-slate-500 dark:bg-slate-600 dark:text-slate-100\" />\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":";;;;;;;;AA0BA,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;cAAyE;IAEnF,CAAA;GACb5B,YAAYe,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAUV;KACV,UAAU;KACV,WAAWlB,QACT,kBACA,0EACD;KACD,MAAK;KACL,iBAAec,eAAeyB,WAAWlB,eAAekB;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACGxB,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAWf,QACT,6DACA,yCACAc,eAAeyB,WAAWlB,eAAekB,UACvC,gEACH;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,6FAChB,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

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

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

@@ -1,4 +1,3 @@
-import { t as cn } from "../../../src-BgKEHW0i.js";
 import { Button } from "../button/button.js";
 import { FormLabel } from "../form-label/form-label.js";
 import { FormMessageList } from "../form-message/message-list.js";
@@ -11,6 +10,7 @@ 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 { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/select-field/select-field.tsx
 const SelectFieldRaw = /* @__PURE__ */ 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) => {
@@ -58,7 +58,7 @@ const SelectFieldRaw = /* @__PURE__ */ React.forwardRef(({ options = [], favorit
 					"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", "rounded-md border border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-900", "hover:border-gray-300 hover:bg-gray-100", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800", "focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-charcoal-300", "focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-charcoal-300", disabled && ["pointer-events-auto! cursor-not-allowed bg-gray-50", "hover:border-gray-300 hover:bg-gray-50 dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900"], className),
+					className: twMerge("flex h-9 w-full items-center justify-between px-3 py-2", "rounded-md border border-gray-300 bg-gray-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100", "hover:border-gray-300 hover:bg-gray-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100", "dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100", "focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-slate-300", "focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-slate-300", disabled && ["pointer-events-auto! cursor-not-allowed bg-gray-50 dark:bg-slate-800", "hover:border-gray-300 hover:bg-gray-50 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100"], className),
 					...props,
 					ref,
 					children: /* @__PURE__ */ jsx(SelectedContent, {

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","names":["cn","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { cn } from \"#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                \"rounded-md border border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-900\",\n                \"hover:border-gray-300 hover:bg-gray-100\",\n                \"dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800\",\n                \"focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-charcoal-300\",\n                \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-charcoal-300\",\n                disabled && [\n                  \"pointer-events-auto! cursor-not-allowed bg-gray-50\",\n                  \"hover:border-gray-300 hover:bg-gray-50 dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900\",\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,MAAaiB,iBAAiBhB,sBAAMiB,YAKhC,EAEEC,UAAU,EAAE,EACZC,kBAAkB,EAAE,EACpBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,EAAE,EACXC,WAAW,EAAE,EAGbC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,OAAO;CACtB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;EACD,CAAC;CAEF,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;AAC1C,MAAI,CAACP,cAGHtB,UAAS6B,EAAE;IAGf,CAAC7B,QAAQsB,cACX,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;AACdA,MAAEE,gBAAgB;AACjBF,MAAEG,OAA4BC,SAASC,OAAO;;aAGhD9B;GAEJ,CAAA;EACD,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;AACtBR,qBAAiBQ,KAAK;AAEtB,QAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,GAC1CD,UAAS,EAAEgC,QAAQ,EAAC,EAA0C,CAAC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,GACT,0DACA,4FACA,2CACA,6DACA,wGACA,qHACA8B,YAAY,CACV,sDACA,mGACD,EACDS,UACD;KACD,GAAIG;KACCC;eAEL,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,QAAQ;MAC/Bc;MACEG;MACCE;MACAW;MAAY,CAAA;KAErB,CAAA;IACM,CAAA,EAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;AACtBA,OAAEE,gBAAgB;AAClBJ,sBAAiB,MAAM;;IAEzB,WAAWX;cAEX,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,GAAG,EAClDjB,QACJkC,KAAAA;eAGN,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;MAAa,CAAA;KAEtB,CAAA;IACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAC3C,CAAA;EACAD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;GACzC,CAAA;EACS,EAAA,CAAA;EAGjB;AAED,MAAakC,cACXpD,oBAAsCI,eAAe;AAEvDgD,YAAYC,cAAc"}
+{"version":3,"file":"select-field.js","names":["twMerge","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\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={twMerge(\n                \"flex h-9 w-full items-center justify-between px-3 py-2\",\n                \"rounded-md border border-gray-300 bg-gray-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100\",\n                \"hover:border-gray-300 hover:bg-gray-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n                \"dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n                \"focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-slate-300\",\n                \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-slate-300\",\n                disabled && [\n                  \"pointer-events-auto! cursor-not-allowed bg-gray-50 dark:bg-slate-800\",\n                  \"hover:border-gray-300 hover:bg-gray-50 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\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,MAAaiB,iBAAiBhB,sBAAMiB,YAKhC,EAEEC,UAAU,EAAE,EACZC,kBAAkB,EAAE,EACpBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,EAAE,EACXC,WAAW,EAAE,EAGbC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,OAAO;CACtB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;EACD,CAAC;CAEF,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;AAC1C,MAAI,CAACP,cAGHtB,UAAS6B,EAAE;IAGf,CAAC7B,QAAQsB,cACX,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;AACdA,MAAEE,gBAAgB;AACjBF,MAAEG,OAA4BC,SAASC,OAAO;;aAGhD9B;GAEJ,CAAA;EACD,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;AACtBR,qBAAiBQ,KAAK;AAEtB,QAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,GAC1CD,UAAS,EAAEgC,QAAQ,EAAC,EAA0C,CAAC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,QACT,0DACA,4GACA,yHACA,iFACA,qGACA,kHACA8B,YAAY,CACV,wEACA,uHACD,EACDS,UACD;KACD,GAAIG;KACCC;eAEL,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,QAAQ;MAC/Bc;MACEG;MACCE;MACAW;MAAY,CAAA;KAErB,CAAA;IACM,CAAA,EAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;AACtBA,OAAEE,gBAAgB;AAClBJ,sBAAiB,MAAM;;IAEzB,WAAWX;cAEX,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,GAAG,EAClDjB,QACJkC,KAAAA;eAGN,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;MAAa,CAAA;KAEtB,CAAA;IACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAC3C,CAAA;EACAD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;GACzC,CAAA;EACS,EAAA,CAAA;EAGjB;AAED,MAAakC,cACXpD,oBAAsCI,eAAe;AAEvDgD,YAAYC,cAAc"}

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

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

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

@@ -1,5 +1,6 @@
-import { h as Icon, t as cn } from "../../../src-BgKEHW0i.js";
+import { t as Icon } from "../../../icon-C4QOpsdI.js";
 import React from "react";
+import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/select-field/selected-content.tsx
 const SelectedContent = ({ selectedValues, options = [], multiple, searchable, placeholder, handleClear }) => {
@@ -11,31 +12,31 @@ const SelectedContent = ({ selectedValues, options = [], multiple, searchable, p
 		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"),
+		className: twMerge("mx-auto flex w-full items-center", placeholder ? "justify-between" : "justify-end"),
 		children: [placeholder && /* @__PURE__ */ jsx("span", {
-			className: "text-sm/5 font-normal text-gray-600 dark:text-gray-500",
+			className: "text-sm/5 font-normal text-gray-700 dark:text-slate-200",
 			children: placeholder
 		}), searchable ? /* @__PURE__ */ jsx(Icon, {
 			name: "CaretSort",
 			size: 16,
-			className: "cursor-pointer text-gray-700 dark:text-gray-400"
+			className: "cursor-pointer text-gray-700 dark:text-slate-200"
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name: "ChevronDown",
 			size: 16,
-			className: "cursor-pointer text-gray-700 dark:text-gray-400"
+			className: "cursor-pointer text-gray-700 dark:text-slate-200"
 		})]
 	});
 	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"),
+			className: twMerge("max-w-full truncate text-gray-900 dark:text-slate-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-sm/5 font-normal",
 					children: option?.label
 				})] }, value) : /* @__PURE__ */ jsx("span", {
-					className: cn("text-sm/5 font-normal", index !== selectedValues.length - 1 && "mr-1"),
+					className: twMerge("text-sm/5 font-normal", index !== selectedValues.length - 1 && "mr-1"),
 					children: index !== selectedValues.length - 1 ? `${option?.label},` : option?.label
 				}, value);
 			})
@@ -51,16 +52,16 @@ const SelectedContent = ({ selectedValues, options = [], multiple, searchable, p
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "XmarkLight",
 					size: 16,
-					className: "cursor-pointer text-gray-700 dark:text-gray-400"
+					className: "cursor-pointer text-gray-700 dark:text-slate-200"
 				})
 			}), searchable ? /* @__PURE__ */ jsx(Icon, {
 				name: "CaretSort",
 				size: 16,
-				className: "cursor-pointer text-gray-700 dark:text-gray-400"
+				className: "cursor-pointer text-gray-700 dark:text-slate-200"
 			}) : /* @__PURE__ */ jsx(Icon, {
 				name: "ChevronDown",
 				size: 16,
-				className: "cursor-pointer text-gray-700 dark:text-gray-400"
+				className: "cursor-pointer text-gray-700 dark:text-slate-200"
 			})]
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"selected-content.js","names":["cn","Icon","React","SelectedContent","selectedValues","options","multiple","searchable","placeholder","handleClear","renderIcon","IconComponent","length","map","value","index","option","find","o","icon","label","e","preventDefault","stopPropagation"],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#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-sm/5 font-normal 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-sm/5 font-normal\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={cn(\n                \"text-sm/5 font-normal\",\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,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,EAAE,EACZC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;AACH,MAAI,OAAOA,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAIP,eAAeQ,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAWZ,GACT,oCACAQ,cAAc,oBAAoB,cACnC;YAJH,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;aACbA;GAEJ,CAAA,EACAD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GAEb,CAAA,CACG;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAWP,GACT,uDACA,CAACM,YAAY,0BACd;aAEAF,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,MAAM;AACrD,WAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACbH,QAAQI;KACL,CAAA,CACS,EAAA,EALIN,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAWd,GACT,yBACAe,UAAUX,eAAeQ,SAAS,KAAK,OACxC;eAEAG,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;KAEf,EAVQN,MAUR;KACD;GACC,CAAA,EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;AACdA,OAAEC,gBAAgB;AAClBD,OAAEE,iBAAiB;AACnBd,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KAAiD,CAAA;IAGhE,CAAA,EACAF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IAEb,CAAA,CACE;KACD"}
+{"version":3,"file":"selected-content.js","names":["Icon","twMerge","React","SelectedContent","selectedValues","options","multiple","searchable","placeholder","handleClear","renderIcon","IconComponent","length","map","value","index","option","find","o","icon","label","e","preventDefault","stopPropagation"],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\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={twMerge(\n          \"mx-auto flex w-full items-center\",\n          placeholder ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {placeholder && (\n          <span className=\"text-sm/5 font-normal text-gray-700 dark:text-slate-200\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\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={twMerge(\n          \"max-w-full truncate text-gray-900 dark:text-slate-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-sm/5 font-normal\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={twMerge(\n                \"text-sm/5 font-normal\",\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-slate-200\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,EAAE,EACZC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;AACH,MAAI,OAAOA,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAIP,eAAeQ,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAWX,QACT,oCACAO,cAAc,oBAAoB,cACnC;YAJH,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;aACbA;GAEJ,CAAA,EACAD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GAEb,CAAA,CACG;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAWN,QACT,wDACA,CAACK,YAAY,0BACd;aAEAF,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,MAAM;AACrD,WAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACbH,QAAQI;KACL,CAAA,CACS,EAAA,EALIN,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAWb,QACT,yBACAc,UAAUX,eAAeQ,SAAS,KAAK,OACxC;eAEAG,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;KAEf,EAVQN,MAUR;KACD;GACC,CAAA,EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;AACdA,OAAEC,gBAAgB;AAClBD,OAAEE,iBAAiB;AACnBd,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KAAkD,CAAA;IAGjE,CAAA,EACAF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IAEb,CAAA,CACE;KACD"}

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

@@ -1,4 +1,4 @@
-import { C as SelectProps } from "../../../../index-BEiWWMW2.js";
+import { C as SelectProps } from "../../../../index--hDSfvJT.js";
 import React from "react";
 
 //#region src/ui/components/select-field/subcomponents/CommandItemList.d.ts

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

@@ -1 +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"}
+{"version":3,"file":"CommandItemList.d.ts","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"mappings":";;;;UAOU,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

@@ -1,15 +1,16 @@
-import { h as Icon, t as cn } from "../../../../src-BgKEHW0i.js";
+import { t as Icon } from "../../../../icon-C4QOpsdI.js";
 import { CommandItem } from "../../command/command.js";
 import "react";
+import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#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")
+		className: twMerge("text-gray-700 dark:text-slate-200")
 	});
-	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: cn("size-4", "text-gray-700 dark:text-gray-400") });
+	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: twMerge("size-4", "text-gray-700 dark:text-slate-200") });
 };
 const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((opt) => {
@@ -19,31 +20,31 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 			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"),
+			className: twMerge("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-500", opt.disabled && "pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-slate-500"),
 			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"),
+					className: twMerge("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-slate-200", isSelected && "bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900"),
 					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 top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
+					className: twMerge("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-slate-50" : "border-gray-800 dark:border-slate-100", "bg-transparent"),
+					children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-slate-50" })
 				})),
 				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"
+						className: "text-gray-900 dark:text-slate-50"
 					})
 				}),
 				renderIcon(opt.icon),
 				/* @__PURE__ */ jsx("span", {
-					className: cn("flex-1 truncate text-sm/4 font-normal", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"),
+					className: twMerge("flex-1 truncate text-sm/4 font-normal", "text-gray-700 dark:text-slate-200", opt.disabled && "text-gray-700 dark:text-slate-200"),
 					children: opt.label
 				}),
 				selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
@@ -51,7 +52,7 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 					children: isSelected && /* @__PURE__ */ jsx(Icon, {
 						name: "Checkmark",
 						size: 16,
-						className: "text-gray-900 dark:text-gray-50"
+						className: "text-gray-900 dark:text-slate-50"
 					})
 				})
 			]