@powerhousedao/design-system 6.0.0-dev.247 → 6.0.0-dev.249

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

@@ -1 +1 @@
-{"version":3,"file":"id-autocomplete.js","names":["cn","sharedValueTransformers","Command","React","useId","useMemo","useRef","FormDescription","FormGroup","FormLabel","FormMessageList","Input","Popover","PopoverAnchor","PopoverContent","ValueTransformer","IdAutocompleteInputContainer","IdAutocompleteListOption","IdAutocompleteList","useIdAutocomplete","IdAutocomplete","forwardRef","id","idProp","name","className","label","description","value","defaultValue","disabled","placeholder","required","errors","warnings","onChange","onBlur","onClick","onKeyDown","onMouseDown","autoComplete","variant","maxLength","fetchOptionsCallback","fetchSelectedOptionCallback","isOpenByDefault","initialOptions","renderOption","previewPlaceholder","props","ref","prefix","inputRef","mergedRef","node","current","hasWarning","Array","isArray","length","hasError","selectedValue","selectedOption","isPopoverOpen","commandListRef","options","isLoading","isLoadingSelectedOption","haveFetchError","commandValue","isFetchSelectedOptionSync","toggleOption","handleOpenChange","onTriggerBlur","handleChange","handleCommandValue","handleFetchSelectedOption","handlePaste","fetchOptions","fetchSelectedOption","handleOptionSelection","optionValue","focus","asCard","transformers","trimOnBlur","trimOnEnter","e","preventDefault","target","control","undefined","asPlaceholder","showValue","icon","title","path","Element","displayName"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { cn } from \"#design-system\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command } from \"cmdk\";\nimport React, { useId, useMemo, useRef } from \"react\";\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 { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport { IdAutocompleteInputContainer } from \"./id-autocomplete-input-container.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport { IdAutocompleteList } from \"./id-autocomplete-list.js\";\nimport type { IdAutocompleteProps } from \"./types.js\";\nimport { useIdAutocomplete } from \"./use-id-autocomplete.js\";\n\nconst IdAutocomplete = React.forwardRef<HTMLInputElement, IdAutocompleteProps>(\n  (\n    {\n      id: idProp,\n      name,\n      className,\n      label,\n      description,\n      value,\n      defaultValue,\n      disabled,\n      placeholder,\n      required,\n      errors,\n      warnings,\n      onChange,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onMouseDown,\n      autoComplete = true,\n      variant = \"withValue\",\n      maxLength,\n      fetchOptionsCallback,\n      fetchSelectedOptionCallback,\n      isOpenByDefault, // to be used only in stories\n      initialOptions,\n      renderOption,\n      previewPlaceholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = idProp ?? `${prefix}-id-autocomplete`;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const mergedRef = (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n\n    const hasWarning = Array.isArray(warnings) && warnings.length > 0;\n    const hasError = Array.isArray(errors) && errors.length > 0;\n\n    const {\n      selectedValue,\n      selectedOption,\n      isPopoverOpen,\n      commandListRef,\n      options,\n      isLoading,\n      isLoadingSelectedOption,\n      haveFetchError,\n      commandValue,\n      isFetchSelectedOptionSync,\n      toggleOption,\n      handleOpenChange,\n      onTriggerBlur,\n      handleChange,\n      handleCommandValue,\n      handleFetchSelectedOption,\n      handlePaste,\n    } = useIdAutocomplete({\n      autoComplete,\n      defaultValue,\n      value,\n      isOpenByDefault,\n      initialOptions,\n      onChange,\n      onBlur,\n      fetchOptions: fetchOptionsCallback,\n      fetchSelectedOption: fetchSelectedOptionCallback,\n    });\n\n    const handleOptionSelection = (optionValue: string) => {\n      toggleOption(optionValue);\n      inputRef.current?.focus();\n    };\n\n    const asCard =\n      variant === \"withValueAndTitle\" ||\n      variant === \"withValueTitleAndDescription\";\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <FormGroup>\n        {!!label && (\n          <FormLabel\n            htmlFor={id}\n            disabled={disabled}\n            hasError={hasError}\n            required={required}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {autoComplete && fetchOptionsCallback ? (\n          <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>\n            <Command\n              shouldFilter={false}\n              value={commandValue}\n              onValueChange={handleCommandValue}\n              className={cn(\"dark:bg-charcoal-900 bg-gray-100\")}\n            >\n              <PopoverAnchor asChild={true}>\n                <IdAutocompleteInputContainer\n                  id={id}\n                  name={name}\n                  value={selectedValue}\n                  className={className}\n                  isLoading={isLoading}\n                  haveFetchError={haveFetchError}\n                  disabled={disabled}\n                  onChange={handleChange}\n                  onBlur={onTriggerBlur}\n                  onClick={onClick}\n                  selectedOption={selectedOption}\n                  optionsLength={options.length}\n                  handleOpenChange={handleOpenChange}\n                  onKeyDown={onKeyDown}\n                  onMouseDown={onMouseDown}\n                  placeholder={placeholder}\n                  hasError={hasError}\n                  label={label}\n                  required={required}\n                  isPopoverOpen={isPopoverOpen}\n                  maxLength={maxLength}\n                  handlePaste={handlePaste}\n                  {...props}\n                  ref={mergedRef}\n                />\n              </PopoverAnchor>\n              {asCard &&\n                (renderOption ? (\n                  renderOption(\n                    selectedOption === undefined && previewPlaceholder\n                      ? {\n                          ...previewPlaceholder,\n                        }\n                      : {\n                          ...selectedOption,\n                          value: selectedOption?.value ?? \"\",\n                        },\n                    {\n                      asPlaceholder: selectedOption === undefined,\n                      showValue: false,\n                      isLoadingSelectedOption,\n                      handleFetchSelectedOption: fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined,\n                      isFetchSelectedOptionSync,\n                      className: cn(\"rounded-t-none pt-2\"),\n                    },\n                  )\n                ) : (\n                  <IdAutocompleteListOption\n                    variant={variant}\n                    icon={selectedOption?.icon ?? previewPlaceholder?.icon}\n                    title={selectedOption?.title ?? previewPlaceholder?.title}\n                    path={selectedOption?.path ?? previewPlaceholder?.path}\n                    value={\n                      selectedOption?.value ?? previewPlaceholder?.value ?? \"\"\n                    }\n                    description={\n                      selectedOption?.description ??\n                      previewPlaceholder?.description\n                    }\n                    asPlaceholder={selectedOption === undefined}\n                    showValue={false}\n                    isLoadingSelectedOption={isLoadingSelectedOption}\n                    handleFetchSelectedOption={\n                      fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined\n                    }\n                    isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n                    className={cn(\"rounded-t-none pt-2\")}\n                  />\n                ))}\n              <PopoverContent\n                align=\"start\"\n                onOpenAutoFocus={(e) => e.preventDefault()}\n                onInteractOutside={(e) => {\n                  if (e.target instanceof Element && e.target.id === id) {\n                    e.preventDefault();\n                  }\n                }}\n              >\n                <IdAutocompleteList\n                  variant={variant}\n                  commandListRef={commandListRef}\n                  selectedValue={selectedValue}\n                  options={options}\n                  toggleOption={handleOptionSelection}\n                  renderOption={renderOption}\n                  previewPlaceholder={previewPlaceholder}\n                />\n              </PopoverContent>\n            </Command>\n          </Popover>\n        ) : (\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              name={name}\n              value={selectedValue}\n              className={className}\n              disabled={disabled}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onClick={onClick}\n              onMouseDown={onMouseDown}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              maxLength={maxLength}\n              {...props}\n              ref={mergedRef}\n            />\n          </ValueTransformer>\n        )}\n        {!!description && <FormDescription>{description}</FormDescription>}\n        {hasWarning && <FormMessageList messages={warnings} type=\"warning\" />}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </FormGroup>\n    );\n  },\n);\n\nIdAutocomplete.displayName = \"IdAutocomplete\";\n\nexport { IdAutocomplete };\n"],"mappings":"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"}
+{"version":3,"file":"id-autocomplete.js","names":["cn","sharedValueTransformers","Command","React","useId","useMemo","useRef","FormDescription","FormGroup","FormLabel","FormMessageList","Input","Popover","PopoverAnchor","PopoverContent","ValueTransformer","IdAutocompleteInputContainer","IdAutocompleteListOption","IdAutocompleteList","useIdAutocomplete","IdAutocomplete","forwardRef","id","idProp","name","className","label","description","value","defaultValue","disabled","placeholder","required","errors","warnings","onChange","onBlur","onClick","onKeyDown","onMouseDown","autoComplete","variant","maxLength","fetchOptionsCallback","fetchSelectedOptionCallback","isOpenByDefault","initialOptions","renderOption","previewPlaceholder","props","ref","prefix","inputRef","mergedRef","node","current","hasWarning","Array","isArray","length","hasError","selectedValue","selectedOption","isPopoverOpen","commandListRef","options","isLoading","isLoadingSelectedOption","haveFetchError","commandValue","isFetchSelectedOptionSync","toggleOption","handleOpenChange","onTriggerBlur","handleChange","handleCommandValue","handleFetchSelectedOption","handlePaste","fetchOptions","fetchSelectedOption","handleOptionSelection","optionValue","focus","asCard","transformers","trimOnBlur","trimOnEnter","e","preventDefault","target","control","undefined","asPlaceholder","showValue","icon","title","path","Element","displayName"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { cn } from \"#design-system\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command } from \"cmdk\";\nimport React, { useId, useMemo, useRef } from \"react\";\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 { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport { IdAutocompleteInputContainer } from \"./id-autocomplete-input-container.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport { IdAutocompleteList } from \"./id-autocomplete-list.js\";\nimport type { IdAutocompleteProps } from \"./types.js\";\nimport { useIdAutocomplete } from \"./use-id-autocomplete.js\";\n\nconst IdAutocomplete = React.forwardRef<HTMLInputElement, IdAutocompleteProps>(\n  (\n    {\n      id: idProp,\n      name,\n      className,\n      label,\n      description,\n      value,\n      defaultValue,\n      disabled,\n      placeholder,\n      required,\n      errors,\n      warnings,\n      onChange,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onMouseDown,\n      autoComplete = true,\n      variant = \"withValue\",\n      maxLength,\n      fetchOptionsCallback,\n      fetchSelectedOptionCallback,\n      isOpenByDefault, // to be used only in stories\n      initialOptions,\n      renderOption,\n      previewPlaceholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = idProp ?? `${prefix}-id-autocomplete`;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const mergedRef = (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n\n    const hasWarning = Array.isArray(warnings) && warnings.length > 0;\n    const hasError = Array.isArray(errors) && errors.length > 0;\n\n    const {\n      selectedValue,\n      selectedOption,\n      isPopoverOpen,\n      commandListRef,\n      options,\n      isLoading,\n      isLoadingSelectedOption,\n      haveFetchError,\n      commandValue,\n      isFetchSelectedOptionSync,\n      toggleOption,\n      handleOpenChange,\n      onTriggerBlur,\n      handleChange,\n      handleCommandValue,\n      handleFetchSelectedOption,\n      handlePaste,\n    } = useIdAutocomplete({\n      autoComplete,\n      defaultValue,\n      value,\n      isOpenByDefault,\n      initialOptions,\n      onChange,\n      onBlur,\n      fetchOptions: fetchOptionsCallback,\n      fetchSelectedOption: fetchSelectedOptionCallback,\n    });\n\n    const handleOptionSelection = (optionValue: string) => {\n      toggleOption(optionValue);\n      inputRef.current?.focus();\n    };\n\n    const asCard =\n      variant === \"withValueAndTitle\" ||\n      variant === \"withValueTitleAndDescription\";\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <FormGroup>\n        {!!label && (\n          <FormLabel\n            htmlFor={id}\n            disabled={disabled}\n            hasError={hasError}\n            required={required}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {autoComplete && fetchOptionsCallback ? (\n          <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>\n            <Command\n              shouldFilter={false}\n              value={commandValue}\n              onValueChange={handleCommandValue}\n              className={cn(\"bg-gray-100 dark:bg-charcoal-900\")}\n            >\n              <PopoverAnchor asChild={true}>\n                <IdAutocompleteInputContainer\n                  id={id}\n                  name={name}\n                  value={selectedValue}\n                  className={className}\n                  isLoading={isLoading}\n                  haveFetchError={haveFetchError}\n                  disabled={disabled}\n                  onChange={handleChange}\n                  onBlur={onTriggerBlur}\n                  onClick={onClick}\n                  selectedOption={selectedOption}\n                  optionsLength={options.length}\n                  handleOpenChange={handleOpenChange}\n                  onKeyDown={onKeyDown}\n                  onMouseDown={onMouseDown}\n                  placeholder={placeholder}\n                  hasError={hasError}\n                  label={label}\n                  required={required}\n                  isPopoverOpen={isPopoverOpen}\n                  maxLength={maxLength}\n                  handlePaste={handlePaste}\n                  {...props}\n                  ref={mergedRef}\n                />\n              </PopoverAnchor>\n              {asCard &&\n                (renderOption ? (\n                  renderOption(\n                    selectedOption === undefined && previewPlaceholder\n                      ? {\n                          ...previewPlaceholder,\n                        }\n                      : {\n                          ...selectedOption,\n                          value: selectedOption?.value ?? \"\",\n                        },\n                    {\n                      asPlaceholder: selectedOption === undefined,\n                      showValue: false,\n                      isLoadingSelectedOption,\n                      handleFetchSelectedOption: fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined,\n                      isFetchSelectedOptionSync,\n                      className: cn(\"rounded-t-none pt-2\"),\n                    },\n                  )\n                ) : (\n                  <IdAutocompleteListOption\n                    variant={variant}\n                    icon={selectedOption?.icon ?? previewPlaceholder?.icon}\n                    title={selectedOption?.title ?? previewPlaceholder?.title}\n                    path={selectedOption?.path ?? previewPlaceholder?.path}\n                    value={\n                      selectedOption?.value ?? previewPlaceholder?.value ?? \"\"\n                    }\n                    description={\n                      selectedOption?.description ??\n                      previewPlaceholder?.description\n                    }\n                    asPlaceholder={selectedOption === undefined}\n                    showValue={false}\n                    isLoadingSelectedOption={isLoadingSelectedOption}\n                    handleFetchSelectedOption={\n                      fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined\n                    }\n                    isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n                    className={cn(\"rounded-t-none pt-2\")}\n                  />\n                ))}\n              <PopoverContent\n                align=\"start\"\n                onOpenAutoFocus={(e) => e.preventDefault()}\n                onInteractOutside={(e) => {\n                  if (e.target instanceof Element && e.target.id === id) {\n                    e.preventDefault();\n                  }\n                }}\n              >\n                <IdAutocompleteList\n                  variant={variant}\n                  commandListRef={commandListRef}\n                  selectedValue={selectedValue}\n                  options={options}\n                  toggleOption={handleOptionSelection}\n                  renderOption={renderOption}\n                  previewPlaceholder={previewPlaceholder}\n                />\n              </PopoverContent>\n            </Command>\n          </Popover>\n        ) : (\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              name={name}\n              value={selectedValue}\n              className={className}\n              disabled={disabled}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onClick={onClick}\n              onMouseDown={onMouseDown}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              maxLength={maxLength}\n              {...props}\n              ref={mergedRef}\n            />\n          </ValueTransformer>\n        )}\n        {!!description && <FormDescription>{description}</FormDescription>}\n        {hasWarning && <FormMessageList messages={warnings} type=\"warning\" />}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </FormGroup>\n    );\n  },\n);\n\nIdAutocomplete.displayName = \"IdAutocomplete\";\n\nexport { IdAutocomplete };\n"],"mappings":"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"}

package/dist/ui/components/index.d.ts

@@ -2,10 +2,10 @@ import { n as ButtonProps, r as buttonVariants, t as Button } from "../../button
 import { n as CharacterCounterProps, t as CharacterCounter } from "../../character-counter-BcuG4STA.js";
 import { n as CheckboxValue, t as CheckboxBase } from "../../checkbox-base-8xXJvAbj.js";
 import { n as CheckboxProps, t as Checkbox } from "../../checkbox-dqrYEK5V.js";
-import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../../command-CThXmS49.js";
-import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../radio-group-field-DNapUn2b.js";
+import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../../command-CjupIOR8.js";
+import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../radio-group-field-CY2UGZp_.js";
 import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../../select-field-BClhLm83.js";
-import { n as EnumFieldProps, t as EnumField } from "../../enum-field-8s8P6tjO.js";
+import { n as EnumFieldProps, t as EnumField } from "../../enum-field-Db9I-jO3.js";
 import { n as FormDescriptionProps, t as FormDescription } from "../../form-description-BpST5Ww-.js";
 import { t as FormGroup } from "../../form-group-BauWlFkQ.js";
 import { n as FormLabelProps, t as FormLabel } from "../../form-label-Cz_gcj-B.js";

package/dist/ui/components/input/input.js

@@ -6,7 +6,7 @@ import clsx$1 from "clsx";
 function cn(...inputs) {
 	return twMerge(clsx$1(inputs));
 }
-const inputBaseStyles = cn("flex h-9 w-full rounded-md text-sm font-normal leading-5 text-gray-900 dark:text-gray-50", "dark:border-charcoal-700 dark:bg-charcoal-900 border border-gray-300 bg-white", "px-3 py-2", "font-sans placeholder:text-gray-500 dark:placeholder:text-gray-600", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white", "dark:focus-visible:ring-charcoal-300 dark:focus-visible:ring-offset-charcoal-900 dark:focus:bg-charcoal-900 focus:bg-gray-50", "disabled:cursor-not-allowed", "disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700", "disabled:dark:border-charcoal-800 disabled:dark:bg-charcoal-900 disabled:dark:text-gray-300");
+const inputBaseStyles = cn("flex h-9 w-full rounded-md text-sm/5 font-normal text-gray-900 dark:text-gray-50", "border border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-900", "px-3 py-2", "font-sans placeholder:text-gray-500 dark:placeholder:text-gray-600", "focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none", "focus:bg-gray-50 dark:focus:bg-charcoal-900 dark:focus-visible:ring-charcoal-300 dark:focus-visible:ring-offset-charcoal-900", "disabled:cursor-not-allowed", "disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700", "disabled:dark:border-charcoal-800 disabled:dark:bg-charcoal-900 disabled:dark:text-gray-300");
 const Input = /* @__PURE__ */ React$1.forwardRef(({ className, type, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("input", {
 		type,

package/dist/ui/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["clsx","React","twMerge","cn","inputs","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import type { ClassValue } from \"clsx\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = cn(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm font-normal leading-5 text-gray-900 dark:text-gray-50\",\n  // Border & Background\n  \"dark:border-charcoal-700 dark:bg-charcoal-900 border border-gray-300 bg-white\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-gray-500 dark:placeholder:text-gray-600\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white\",\n  \"dark:focus-visible:ring-charcoal-300 dark:focus-visible:ring-offset-charcoal-900 dark:focus:bg-charcoal-900 focus:bg-gray-50\",\n  // Disabled state\n  \"disabled:cursor-not-allowed\",\n  \"disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700\",\n  \"disabled:dark:border-charcoal-800 disabled:dark:bg-charcoal-900 disabled:dark:text-gray-300\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;;AAIA,SAASG,GAAG,GAAGC,QAAsB;AACnC,QAAOF,QAAQF,OAAKI,OAAO,CAAC;;AAI9B,MAAMC,kBAAkBF,GAEtB,4FAEA,iFAEA,aAEA,sEAEA,2IACA,gIAEA,+BACA,uEACA,8FACD;AAED,MAAMG,QAAQL,wBAAMM,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWN,GAAGE,iBAAiBG,UAAU;EACpCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}
+{"version":3,"file":"input.js","names":["clsx","React","twMerge","cn","inputs","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import type { ClassValue } from \"clsx\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = cn(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm/5 font-normal text-gray-900 dark:text-gray-50\",\n  // Border & Background\n  \"border border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-900\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-gray-500 dark:placeholder:text-gray-600\",\n  // Focus styles\n  \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none\",\n  \"focus:bg-gray-50 dark:focus:bg-charcoal-900 dark:focus-visible:ring-charcoal-300 dark:focus-visible:ring-offset-charcoal-900\",\n  // Disabled state\n  \"disabled:cursor-not-allowed\",\n  \"disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700\",\n  \"disabled:dark:border-charcoal-800 disabled:dark:bg-charcoal-900 disabled:dark:text-gray-300\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;;AAIA,SAASG,GAAG,GAAGC,QAAsB;AACnC,QAAOF,QAAQF,OAAKI,OAAO,CAAC;;AAI9B,MAAMC,kBAAkBF,GAEtB,oFAEA,iFAEA,aAEA,sEAEA,2IACA,gIAEA,+BACA,uEACA,8FACD;AAED,MAAMG,QAAQL,wBAAMM,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWN,GAAGE,iBAAiBG,UAAU;EACpCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}

package/dist/ui/components/input/splitted-input-diff.js

@@ -1,4 +1,4 @@
-import { h as Icon, t as cn } from "../../../src-D4e3Wkrz.js";
+import { h as Icon, t as cn } from "../../../src-BgCjYazJ.js";
 import { Tooltip, TooltipProvider as Provider } from "../tooltip/tooltip.js";
 import { InputDiff } from "./subcomponent/input-diff.js";
 import { TextDiff } from "./subcomponent/text-diff.js";
@@ -52,7 +52,7 @@ const SplittedInputDiff = ({ baseValue, value, viewMode, diffMode, showCopyIcon
 					hasHover
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: cn("ml-3 mr-3 h-[34px] w-px bg-gray-300") }),
+			/* @__PURE__ */ jsx("div", { className: cn("mx-3 h-[34px] w-px bg-gray-300") }),
 			/* @__PURE__ */ jsxs("div", {
 				className: cn("flex flex-1 items-center gap-2 truncate [&>span]:truncate"),
 				children: [/* @__PURE__ */ jsx(TextDiff, {

package/dist/ui/components/input/splitted-input-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitted-input-diff.js","names":["cn","Icon","useCallback","useState","useMediaQuery","Tooltip","TooltipProvider","InputDiff","TextDiff","CopyIcon","value","hasCopied","setHasCopied","hasHover","copy","navigator","clipboard","writeText","then","setTimeout","catch","error","console","SplittedInputDiff","baseValue","viewMode","diffMode","showCopyIcon","hasCopiedLeft","setHasCopiedLeft","hasCopiedRight","setHasCopiedRight","undefined"],"sources":["../../../../src/ui/components/input/splitted-input-diff.tsx"],"sourcesContent":["import { cn, Icon } from \"#design-system\";\nimport { useCallback, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { WithDifference } from \"../../types.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { InputDiff } from \"./subcomponent/input-diff.js\";\nimport { TextDiff } from \"./subcomponent/text-diff.js\";\ninterface CopyIconProps {\n  value: string;\n  hasCopied: boolean;\n  setHasCopied: (hasCopied: boolean) => void;\n  hasHover: boolean;\n}\n\nconst CopyIcon = ({\n  value,\n  hasCopied,\n  setHasCopied,\n  hasHover,\n}: CopyIconProps) => {\n  const copy = useCallback(() => {\n    navigator.clipboard\n      .writeText(value)\n      .then(() => {\n        setHasCopied(true);\n        setTimeout(() => setHasCopied(false), 2000);\n      })\n      .catch((error: unknown) => {\n        console.error(\"Failed to copy value: \", error);\n      });\n  }, [value, setHasCopied]);\n\n  return (\n    <TooltipProvider>\n      <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className={cn(\n            \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n            hasHover &&\n              \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n          )}\n        >\n          <Icon name=\"Copy\" size={16} className={cn(\"text-gray-500\")} />\n        </button>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\ninterface SplittedInputDiffProps extends WithDifference<string> {\n  value: string;\n  showCopyIcon?: boolean;\n}\n\nexport const SplittedInputDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode,\n  showCopyIcon = false,\n}: SplittedInputDiffProps) => {\n  const [hasCopiedLeft, setHasCopiedLeft] = useState(false);\n  const [hasCopiedRight, setHasCopiedRight] = useState(false);\n  const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n  return (\n    <InputDiff className={cn(\"group\")}>\n      {viewMode === \"mixed\" ? (\n        <>\n          <div\n            className={cn(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"removal\"\n              diffMode={diffMode}\n              className={cn(\"flex-1\")}\n            />\n            {showCopyIcon && baseValue !== undefined && baseValue !== \"\" && (\n              <CopyIcon\n                value={baseValue}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n          <div className={cn(\"ml-3 mr-3 h-[34px] w-px bg-gray-300\")} />\n          <div\n            className={cn(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"addition\"\n              diffMode={diffMode}\n              className={cn(\"flex-1\")}\n            />\n            {showCopyIcon && value !== \"\" && (\n              <CopyIcon\n                value={value}\n                hasCopied={hasCopiedRight}\n                setHasCopied={setHasCopiedRight}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n        </>\n      ) : (\n        <div\n          className={cn(\n            \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n          )}\n        >\n          <TextDiff\n            baseValue={baseValue}\n            value={value}\n            viewMode={viewMode}\n            diffMode={diffMode}\n            className={cn(\"flex-1\")}\n          />\n          {showCopyIcon &&\n            ((viewMode === \"removal\" &&\n              baseValue !== undefined &&\n              baseValue !== \"\") ||\n              (viewMode === \"addition\" && value !== \"\")) && (\n              <CopyIcon\n                value={viewMode === \"removal\" ? (baseValue ?? \"\") : value}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n        </div>\n      )}\n    </InputDiff>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,MAAMS,YAAY,EAChBC,OACAC,WACAC,cACAC,eACmB;AAanB,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;EAAS,SAAQ;EAAU,MAAMF;EAAW,gBAAA;YAC1C,oBAAC,UAAD;GACE,MAAK;GACL,SAjBKT,kBAAkB;AAC7Ba,cAAUC,UACPC,UAAUP,MAAM,CAChBQ,WAAW;AACVN,kBAAa,KAAK;AAClBO,sBAAiBP,aAAa,MAAM,EAAE,IAAK;MAC3C,CACDQ,OAAOC,UAAmB;AACzBC,aAAQD,MAAM,0BAA0BA,MAAM;MAC9C;MACH,CAACX,OAAOE,aAAa,CAAC;GAQjB,WAAWZ,GACT,0DACAa,YACE,oEACH;aAED,oBAAC,MAAD;IAAM,MAAK;IAAO,MAAM;IAAI,WAAWb,GAAG,gBAAgB;IAAC,CAAA;GACrD,CAAA;EACD,CAAA,EACO,CAAA;;AAStB,MAAauB,qBAAqB,EAChCC,WACAd,OACAe,UACAC,UACAC,eAAe,YACa;CAC5B,MAAM,CAACC,eAAeC,oBAAoB1B,SAAS,MAAM;CACzD,MAAM,CAAC2B,gBAAgBC,qBAAqB5B,SAAS,MAAM;CAC3D,MAAMU,WAAWT,cAAc,qCAAqC;AAEpE,QACE,oBAAC,WAAD;EAAW,WAAWJ,GAAG,QAAQ;YAC9ByB,aAAa,UACZ,qBAAA,YAAA,EAAA,UAAA;GACE,qBAAC,OAAD;IACE,WAAWzB,GACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACawB;KACJd;KACP,UAAS;KACCgB;KACV,WAAW1B,GAAG,SAAS;KAAC,CAAA,EAEzB2B,gBAAgBH,cAAcQ,KAAAA,KAAaR,cAAc,MACxD,oBAAC,UAAD;KACE,OAAOA;KACP,WAAWI;KACX,cAAcC;KACJhB;KAEb,CAAA,CACE;;GACL,oBAAC,OAAD,EAAK,WAAWb,GAAG,sCAAsC,EAAC,CAAA;GAC1D,qBAAC,OAAD;IACE,WAAWA,GACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACawB;KACJd;KACP,UAAS;KACCgB;KACV,WAAW1B,GAAG,SAAS;KAAC,CAAA,EAEzB2B,gBAAgBjB,UAAU,MACzB,oBAAC,UAAD;KACSA;KACP,WAAWoB;KACX,cAAcC;KACJlB;KAEb,CAAA,CACE;;GACJ,EAAA,CAAA,GAEH,qBAAC,OAAD;GACE,WAAWb,GACT,4DACD;aAHH,CAKE,oBAAC,UAAD;IACawB;IACJd;IACGe;IACAC;IACV,WAAW1B,GAAG,SAAS;IAAC,CAAA,EAEzB2B,iBACGF,aAAa,aACbD,cAAcQ,KAAAA,KACdR,cAAc,MACbC,aAAa,cAAcf,UAAU,OACtC,oBAAC,UAAD;IACE,OAAOe,aAAa,YAAaD,aAAa,KAAMd;IACpD,WAAWkB;IACX,cAAcC;IACJhB;IAEb,CAAA,CAEN;;EACS,CAAA"}
+{"version":3,"file":"splitted-input-diff.js","names":["cn","Icon","useCallback","useState","useMediaQuery","Tooltip","TooltipProvider","InputDiff","TextDiff","CopyIcon","value","hasCopied","setHasCopied","hasHover","copy","navigator","clipboard","writeText","then","setTimeout","catch","error","console","SplittedInputDiff","baseValue","viewMode","diffMode","showCopyIcon","hasCopiedLeft","setHasCopiedLeft","hasCopiedRight","setHasCopiedRight","undefined"],"sources":["../../../../src/ui/components/input/splitted-input-diff.tsx"],"sourcesContent":["import { cn, Icon } from \"#design-system\";\nimport { useCallback, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { WithDifference } from \"../../types.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { InputDiff } from \"./subcomponent/input-diff.js\";\nimport { TextDiff } from \"./subcomponent/text-diff.js\";\ninterface CopyIconProps {\n  value: string;\n  hasCopied: boolean;\n  setHasCopied: (hasCopied: boolean) => void;\n  hasHover: boolean;\n}\n\nconst CopyIcon = ({\n  value,\n  hasCopied,\n  setHasCopied,\n  hasHover,\n}: CopyIconProps) => {\n  const copy = useCallback(() => {\n    navigator.clipboard\n      .writeText(value)\n      .then(() => {\n        setHasCopied(true);\n        setTimeout(() => setHasCopied(false), 2000);\n      })\n      .catch((error: unknown) => {\n        console.error(\"Failed to copy value: \", error);\n      });\n  }, [value, setHasCopied]);\n\n  return (\n    <TooltipProvider>\n      <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className={cn(\n            \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n            hasHover &&\n              \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n          )}\n        >\n          <Icon name=\"Copy\" size={16} className={cn(\"text-gray-500\")} />\n        </button>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\ninterface SplittedInputDiffProps extends WithDifference<string> {\n  value: string;\n  showCopyIcon?: boolean;\n}\n\nexport const SplittedInputDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode,\n  showCopyIcon = false,\n}: SplittedInputDiffProps) => {\n  const [hasCopiedLeft, setHasCopiedLeft] = useState(false);\n  const [hasCopiedRight, setHasCopiedRight] = useState(false);\n  const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n  return (\n    <InputDiff className={cn(\"group\")}>\n      {viewMode === \"mixed\" ? (\n        <>\n          <div\n            className={cn(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"removal\"\n              diffMode={diffMode}\n              className={cn(\"flex-1\")}\n            />\n            {showCopyIcon && baseValue !== undefined && baseValue !== \"\" && (\n              <CopyIcon\n                value={baseValue}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n          <div className={cn(\"mx-3 h-[34px] w-px bg-gray-300\")} />\n          <div\n            className={cn(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"addition\"\n              diffMode={diffMode}\n              className={cn(\"flex-1\")}\n            />\n            {showCopyIcon && value !== \"\" && (\n              <CopyIcon\n                value={value}\n                hasCopied={hasCopiedRight}\n                setHasCopied={setHasCopiedRight}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n        </>\n      ) : (\n        <div\n          className={cn(\n            \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n          )}\n        >\n          <TextDiff\n            baseValue={baseValue}\n            value={value}\n            viewMode={viewMode}\n            diffMode={diffMode}\n            className={cn(\"flex-1\")}\n          />\n          {showCopyIcon &&\n            ((viewMode === \"removal\" &&\n              baseValue !== undefined &&\n              baseValue !== \"\") ||\n              (viewMode === \"addition\" && value !== \"\")) && (\n              <CopyIcon\n                value={viewMode === \"removal\" ? (baseValue ?? \"\") : value}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n        </div>\n      )}\n    </InputDiff>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,MAAMS,YAAY,EAChBC,OACAC,WACAC,cACAC,eACmB;AAanB,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;EAAS,SAAQ;EAAU,MAAMF;EAAW,gBAAA;YAC1C,oBAAC,UAAD;GACE,MAAK;GACL,SAjBKT,kBAAkB;AAC7Ba,cAAUC,UACPC,UAAUP,MAAM,CAChBQ,WAAW;AACVN,kBAAa,KAAK;AAClBO,sBAAiBP,aAAa,MAAM,EAAE,IAAK;MAC3C,CACDQ,OAAOC,UAAmB;AACzBC,aAAQD,MAAM,0BAA0BA,MAAM;MAC9C;MACH,CAACX,OAAOE,aAAa,CAAC;GAQjB,WAAWZ,GACT,0DACAa,YACE,oEACH;aAED,oBAAC,MAAD;IAAM,MAAK;IAAO,MAAM;IAAI,WAAWb,GAAG,gBAAgB;IAAC,CAAA;GACrD,CAAA;EACD,CAAA,EACO,CAAA;;AAStB,MAAauB,qBAAqB,EAChCC,WACAd,OACAe,UACAC,UACAC,eAAe,YACa;CAC5B,MAAM,CAACC,eAAeC,oBAAoB1B,SAAS,MAAM;CACzD,MAAM,CAAC2B,gBAAgBC,qBAAqB5B,SAAS,MAAM;CAC3D,MAAMU,WAAWT,cAAc,qCAAqC;AAEpE,QACE,oBAAC,WAAD;EAAW,WAAWJ,GAAG,QAAQ;YAC9ByB,aAAa,UACZ,qBAAA,YAAA,EAAA,UAAA;GACE,qBAAC,OAAD;IACE,WAAWzB,GACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACawB;KACJd;KACP,UAAS;KACCgB;KACV,WAAW1B,GAAG,SAAS;KAAC,CAAA,EAEzB2B,gBAAgBH,cAAcQ,KAAAA,KAAaR,cAAc,MACxD,oBAAC,UAAD;KACE,OAAOA;KACP,WAAWI;KACX,cAAcC;KACJhB;KAEb,CAAA,CACE;;GACL,oBAAC,OAAD,EAAK,WAAWb,GAAG,iCAAiC,EAAC,CAAA;GACrD,qBAAC,OAAD;IACE,WAAWA,GACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACawB;KACJd;KACP,UAAS;KACCgB;KACV,WAAW1B,GAAG,SAAS;KAAC,CAAA,EAEzB2B,gBAAgBjB,UAAU,MACzB,oBAAC,UAAD;KACSA;KACP,WAAWoB;KACX,cAAcC;KACJlB;KAEb,CAAA,CACE;;GACJ,EAAA,CAAA,GAEH,qBAAC,OAAD;GACE,WAAWb,GACT,4DACD;aAHH,CAKE,oBAAC,UAAD;IACawB;IACJd;IACGe;IACAC;IACV,WAAW1B,GAAG,SAAS;IAAC,CAAA,EAEzB2B,iBACGF,aAAa,aACbD,cAAcQ,KAAAA,KACdR,cAAc,MACbC,aAAa,cAAcf,UAAU,OACtC,oBAAC,UAAD;IACE,OAAOe,aAAa,YAAaD,aAAa,KAAMd;IACpD,WAAWkB;IACX,cAAcC;IACJhB;IAEb,CAAA,CAEN;;EACS,CAAA"}

package/dist/ui/components/input/subcomponent/input-diff.js

@@ -1,9 +1,9 @@
-import { t as cn } from "../../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../../src-BgCjYazJ.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/input/subcomponent/input-diff.tsx
 const InputDiff = ({ children, className, ellipsis = true, multiline = false, rows = 3, hasPadding = false }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex w-full items-center rounded-md font-sans text-sm font-normal leading-5 text-gray-700", "cursor-not-allowed border border-gray-300 bg-transparent px-3", !multiline && ellipsis && "truncate [&>span]:truncate", hasPadding && "items-start py-2", className),
+		className: cn("flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-gray-700", "cursor-not-allowed border border-gray-300 bg-transparent px-3", !multiline && ellipsis && "truncate [&>span]:truncate", hasPadding && "items-start py-2", className),
 		style: { minHeight: multiline ? `${rows * 1.5}rem` : "2.25rem" },
 		children
 	});

package/dist/ui/components/input/subcomponent/input-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-diff.js","names":["cn","InputDiff","children","className","ellipsis","multiline","rows","hasPadding","minHeight"],"sources":["../../../../../src/ui/components/input/subcomponent/input-diff.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\n\ninterface InputDiffProps {\n  children: React.ReactNode;\n  className?: string;\n  ellipsis?: boolean;\n  multiline?: boolean;\n  rows?: number;\n  hasPadding?: boolean;\n}\n\nexport const InputDiff = ({\n  children,\n  className,\n  ellipsis = true,\n  multiline = false,\n  rows = 3,\n  hasPadding = false,\n}: InputDiffProps) => {\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center rounded-md font-sans text-sm font-normal leading-5 text-gray-700\",\n        \"cursor-not-allowed border border-gray-300 bg-transparent px-3\",\n        !multiline && ellipsis && \"truncate [&>span]:truncate\",\n        hasPadding && \"items-start py-2\",\n        className,\n      )}\n      style={{\n        minHeight: multiline ? `${rows * 1.5}rem` : \"2.25rem\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAWA,MAAaC,aAAa,EACxBC,UACAC,WACAC,WAAW,MACXC,YAAY,OACZC,OAAO,GACPC,aAAa,YACO;AACpB,QACE,oBAAC,OAAD;EACE,WAAWP,GACT,6FACA,iEACA,CAACK,aAAaD,YAAY,8BAC1BG,cAAc,oBACdJ,UACD;EACD,OAAO,EACLK,WAAWH,YAAY,GAAGC,OAAO,IAAG,OAAQ,WAC7C;EAEAJ;EACG,CAAA"}
+{"version":3,"file":"input-diff.js","names":["cn","InputDiff","children","className","ellipsis","multiline","rows","hasPadding","minHeight"],"sources":["../../../../../src/ui/components/input/subcomponent/input-diff.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\n\ninterface InputDiffProps {\n  children: React.ReactNode;\n  className?: string;\n  ellipsis?: boolean;\n  multiline?: boolean;\n  rows?: number;\n  hasPadding?: boolean;\n}\n\nexport const InputDiff = ({\n  children,\n  className,\n  ellipsis = true,\n  multiline = false,\n  rows = 3,\n  hasPadding = false,\n}: InputDiffProps) => {\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-gray-700\",\n        \"cursor-not-allowed border border-gray-300 bg-transparent px-3\",\n        !multiline && ellipsis && \"truncate [&>span]:truncate\",\n        hasPadding && \"items-start py-2\",\n        className,\n      )}\n      style={{\n        minHeight: multiline ? `${rows * 1.5}rem` : \"2.25rem\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAWA,MAAaC,aAAa,EACxBC,UACAC,WACAC,WAAW,MACXC,YAAY,OACZC,OAAO,GACPC,aAAa,YACO;AACpB,QACE,oBAAC,OAAD;EACE,WAAWP,GACT,qFACA,iEACA,CAACK,aAAaD,YAAY,8BAC1BG,cAAc,oBACdJ,UACD;EACD,OAAO,EACLK,WAAWH,YAAY,GAAGC,OAAO,IAAG,OAAQ,WAC7C;EAEAJ;EACG,CAAA"}

package/dist/ui/components/input/subcomponent/text-diff.js

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../../src-BgCjYazJ.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { diffSentences, diffWords } from "diff";

package/dist/ui/components/popover/popover.js

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -14,9 +14,9 @@ const PopoverContent = /* @__PURE__ */ React.forwardRef(({ align = "center", sid
 		"data-[state=closed]:animate-zoom-out data-[state=open]:animate-zoom-in",
 		"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right",
 		"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom",
-		"w-(--radix-popover-trigger-width) z-50 border p-0 outline-none",
+		"z-50 w-(--radix-popover-trigger-width) border p-0 outline-none",
 		"border-gray-300 bg-white dark:border-slate-500 dark:bg-slate-600",
-		"rounded-md shadow-[1px_4px_15px_0px_rgba(74,88,115,0.25)] dark:shadow-[1px_4px_15.3px_0px_#141921]"
+		"rounded-md shadow-sidebar"
 	], className),
 	ref,
 	...props

package/dist/ui/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["cn","PopoverPrimitive","React","Popover","Root","PopoverAnchor","Anchor","PopoverTrigger","Trigger","PopoverContent","forwardRef","align","sideOffset","className","props","ref"],"sources":["../../../../src/ui/components/popover/popover.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport React from \"react\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = \"center\", sideOffset = 4, className, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        [\n          \"data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n          \"data-[state=closed]:animate-zoom-out data-[state=open]:animate-zoom-in\",\n          \"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right\",\n          \"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom\",\n          \"w-(--radix-popover-trigger-width) z-50 border p-0 outline-none\",\n          \"border-gray-300 bg-white dark:border-slate-500 dark:bg-slate-600\",\n          \"rounded-md shadow-[1px_4px_15px_0px_rgba(74,88,115,0.25)] dark:shadow-[1px_4px_15.3px_0px_#141921]\",\n        ],\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\n"],"mappings":";;;;;AAIA,MAAaG,UAAUF,iBAAiBG;AACxC,MAAaC,gBAAgBJ,iBAAiBK;AAC9C,MAAaC,iBAAiBN,iBAAiBO;AAE/C,MAAaC,iBAAiBP,sBAAMQ,YAGjC,EAAEC,QAAQ,UAAUC,aAAa,GAAGC,WAAW,GAAGC,SAASC,QAC5D,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;CACSJ;CACKC;CACZ,WAAWZ,GACT;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACDa,UACD;CACIE;CACL,GAAID;CAAM,CAAA,EAGf,CAAA,CAAC"}
+{"version":3,"file":"popover.js","names":["cn","PopoverPrimitive","React","Popover","Root","PopoverAnchor","Anchor","PopoverTrigger","Trigger","PopoverContent","forwardRef","align","sideOffset","className","props","ref"],"sources":["../../../../src/ui/components/popover/popover.tsx"],"sourcesContent":["import { cn } from \"#design-system\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport React from \"react\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = \"center\", sideOffset = 4, className, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        [\n          \"data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n          \"data-[state=closed]:animate-zoom-out data-[state=open]:animate-zoom-in\",\n          \"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right\",\n          \"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom\",\n          \"z-50 w-(--radix-popover-trigger-width) border p-0 outline-none\",\n          \"border-gray-300 bg-white dark:border-slate-500 dark:bg-slate-600\",\n          \"rounded-md shadow-sidebar\",\n        ],\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\n"],"mappings":";;;;;AAIA,MAAaG,UAAUF,iBAAiBG;AACxC,MAAaC,gBAAgBJ,iBAAiBK;AAC9C,MAAaC,iBAAiBN,iBAAiBO;AAE/C,MAAaC,iBAAiBP,sBAAMQ,YAGjC,EAAEC,QAAQ,UAAUC,aAAa,GAAGC,WAAW,GAAGC,SAASC,QAC5D,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;CACSJ;CACKC;CACZ,WAAWZ,GACT;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACDa,UACD;CACIE;CACL,GAAID;CAAM,CAAA,EAGf,CAAA,CAAC"}

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

@@ -1,2 +1,2 @@
-import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../../radio-group-field-DNapUn2b.js";
+import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../../radio-group-field-CY2UGZp_.js";
 export { RadioGroupField, RadioGroupFieldProps };

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { FormLabel } from "../form-label/form-label.js";
 import { FormMessageList } from "../form-message/message-list.js";
 import { withFieldValidation } from "../with-field-validation/with-field-validation.js";

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { FormLabel } from "../form-label/form-label.js";
 import React, { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ const Radio = /* @__PURE__ */ React.forwardRef(({ className, description, disabl
 		value,
 		...props,
 		ref,
-		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: cn("relative flex size-full items-center justify-center", "after:absolute after:left-1/2 after:top-1/2 after:size-2.5", "after:-translate-x-1/2 after:-translate-y-1/2", "after:rounded-full after:bg-gray-800 after:content-['']", "dark:after:bg-gray-400", !disabled && ["group-hover:after:bg-gray-900", "dark:group-hover:after:bg-gray-50"], disabled && ["after:bg-gray-600", "dark:after:bg-gray-600"]) })
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: cn("relative flex size-full items-center justify-center", "after:absolute after:top-1/2 after:left-1/2 after:size-2.5", "after:-translate-1/2", "after:rounded-full after:bg-gray-800 after:content-['']", "dark:after:bg-gray-400", !disabled && ["group-hover:after:bg-gray-900", "dark:group-hover:after:bg-gray-50"], disabled && ["after:bg-gray-600", "dark:after:bg-gray-600"]) })
 	}), /* @__PURE__ */ jsx(FormLabel, {
 		className: cn(!disabled && !hasError && ["cursor-pointer", "peer-hover:text-gray-900 dark:peer-hover:text-gray-50"]),
 		description,

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

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

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { Popover, PopoverAnchor, PopoverContent } from "../popover/popover.js";
 import { Input } from "../input/input.js";
 import { useSearchAutocomplete } from "./use-search-autocomplete.js";

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

@@ -1,4 +1,4 @@
-import { h as Icon, t as cn } from "../../../src-D4e3Wkrz.js";
+import { h as Icon, t as cn } from "../../../src-BgCjYazJ.js";
 import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/command.js";
 import { CommandItemList } from "./subcomponents/CommandItemList.js";
 import { useEffect } from "react";
@@ -31,7 +31,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 		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",
+				className: "p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-gray-400",
 				children: "No results found."
 			}),
 			multiple && cmdkSearch === "" && /* @__PURE__ */ jsx(CommandGroup, {
@@ -62,7 +62,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 								})
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50",
+								className: "text-sm/4 font-semibold text-gray-900 dark:text-gray-50",
 								children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All"
 							}),
 							selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {

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-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400\">\n          No results found.\n        </CommandEmpty>\n        {multiple && cmdkSearch === \"\" && (\n          <CommandGroup className=\"pb-0\">\n            <CommandItem\n              value=\"select-all\"\n              onSelect={toggleAll}\n              disabled={false}\n              className={cn(\n                \"cursor-pointer\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              )}\n              role=\"option\"\n              aria-selected={selectedValues.length === enabledOptions.length}\n            >\n              <div className=\"flex w-full items-center gap-2\">\n                {selectionIcon === \"auto\" && (\n                  <div\n                    className={cn(\n                      \"flex size-4 items-center justify-center rounded-md border\",\n                      \"border-gray-700 dark:border-gray-400\",\n                      selectedValues.length === enabledOptions.length &&\n                        \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                    )}\n                  >\n                    {selectedValues.length === enabledOptions.length && (\n                      <Icon name=\"Checkmark\" size={16} />\n                    )}\n                  </div>\n                )}\n                {selectionIcon === \"checkmark\" &&\n                  !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                    <div className=\"size-4\">\n                      {selectionIconPosition === \"left\" &&\n                        selectedValues.length === enabledOptions.length && (\n                          <Icon\n                            name=\"Checkmark\"\n                            size={16}\n                            className=\"text-gray-900 dark:text-gray-50\"\n                          />\n                        )}\n                    </div>\n                  )}\n                <span className=\"text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50\">\n                  {selectedValues.length === enabledOptions.length\n                    ? \"Deselect All\"\n                    : \"Select All\"}\n                </span>\n                {selectionIcon === \"checkmark\" &&\n                  selectionIconPosition === \"right\" && (\n                    <div className=\"ml-auto size-4\">\n                      {selectedValues.length === enabledOptions.length && (\n                        <Icon\n                          name=\"Checkmark\"\n                          size={16}\n                          className=\"text-gray-900 dark:text-gray-50\"\n                        />\n                      )}\n                    </div>\n                  )}\n              </div>\n            </CommandItem>\n          </CommandGroup>\n        )}\n        <CommandGroup\n          className={multiple && cmdkSearch === \"\" ? \"pt-0\" : undefined}\n        >\n          <CommandItemList\n            options={favoriteOptions}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n\n          {favoriteOptions.length > 0 && (\n            <div className=\"my-1 border-b border-gray-300 dark:border-gray-600\" />\n          )}\n          <CommandItemList\n            options={options}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n        </CommandGroup>\n      </CommandList>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAyBA,MAAaW,WAAmC,EAC9CC,YACAC,gBACAC,UACAC,gBACAC,eACAC,uBACAC,UAAU,EAAE,EACZC,WACAC,cACAC,kBAAkB,EAAA,OACd;CACJ,MAAMC,iBAAiBJ,QAAQK,QAAQC,QAAQ,CAACA,IAAIC,SAAS;CAC7D,MAAMC,aAAaR,QAAQS,MAAMH,QAAQA,IAAII,KAAK;CAElD,MAAMC,aAAa3B,iBAAiB4B,UAAUA,MAAMC,OAAO;AAE3D3B,iBAAgB;AACdS,iBAAemB,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IAChE,CAACtB,gBAAgBgB,WAAW,CAAC;AAEhC,QACE,qBAAA,YAAA,EAAA,UAAA,CACGjB,cACC,oBAAC,cAAD;EACE,aAAY;EACZ,YAAYwB,MAAM;AAMhB,OAAI,EALwB;IAC1B;IACA;IACA;IACD,CAACE,SAASF,EAAEG,IAAI,IACYjB,eAAekB,SAAS,GACnDJ,GAAEK,iBAAiB;;EAGvB,kBAAiB;EACjB,WAAU;EAEb,CAAA,EACD,qBAAC,aAAD;EAAa,KAAK5B;EAAgB,UAAU,CAACD,aAAa,IAAI8B,KAAAA;YAA9D;GACE,oBAAC,cAAD;IAAc,WAAU;cAAoF;IAE9F,CAAA;GACb5B,YAAYe,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAUV;KACV,UAAU;KACV,WAAWnB,GACT,kBACA,yEACD;KACD,MAAK;KACL,iBAAee,eAAeyB,WAAWlB,eAAekB;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACGxB,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAWhB,GACT,6DACA,wCACAe,eAAeyB,WAAWlB,eAAekB,UACvC,6DACH;kBAEAzB,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SAAM,MAAK;SAAY,MAAM;SAC9B,CAAA;QAEJ,CAAA;OACAxB,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWS,eACrC,oBAAC,OAAD;QAAK,WAAU;kBACZT,0BAA0B,UACzBF,eAAeyB,WAAWlB,eAAekB,UACvC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEN,CAAA;OACH,oBAAC,QAAD;QAAM,WAAU;kBACbzB,eAAeyB,WAAWlB,eAAekB,SACtC,iBACA;QACA,CAAA;OACLxB,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;QAAK,WAAU;kBACZF,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEJ,CAAA;OACA;;KACM,CAAA;IAEhB,CAAA;GACD,qBAAC,cAAD;IACE,WAAW1B,YAAYe,eAAe,KAAK,SAASa,KAAAA;cADtD;KAGE,oBAAC,iBAAD;MACE,SAASrB;MACON;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAGvCrB,gBAAgBmB,SAAS,KACxB,oBAAC,OAAD,EAAK,WAAU,sDAChB,CAAA;KACD,oBAAC,iBAAD;MACWtB;MACOH;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAE5B;;GACH;IACZ,EAAA,CAAA"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { t as cn } from "../../../src-D4e3Wkrz.js";
+import { t as cn } from "../../../src-BgCjYazJ.js";
 import { Button } from "../button/button.js";
 import { FormLabel } from "../form-label/form-label.js";
 import { FormMessageList } from "../form-message/message-list.js";
@@ -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", "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),
+					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),
 					...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                \"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,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":["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"}

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

@@ -1,4 +1,4 @@
-import { h as Icon, t as cn } from "../../../src-D4e3Wkrz.js";
+import { h as Icon, t as cn } from "../../../src-BgCjYazJ.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/select-field/selected-content.tsx
@@ -13,7 +13,7 @@ const SelectedContent = ({ selectedValues, options = [], multiple, searchable, p
 	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",
+			className: "text-sm/5 font-normal text-gray-600 dark:text-gray-500",
 			children: placeholder
 		}), searchable ? /* @__PURE__ */ jsx(Icon, {
 			name: "CaretSort",
@@ -32,10 +32,10 @@ const SelectedContent = ({ selectedValues, options = [], multiple, searchable, p
 			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",
+					className: "truncate text-sm/5 font-normal",
 					children: option?.label
 				})] }, value) : /* @__PURE__ */ jsx("span", {
-					className: cn("text-[14px] font-normal leading-5", index !== selectedValues.length - 1 && "mr-1"),
+					className: cn("text-sm/5 font-normal", index !== selectedValues.length - 1 && "mr-1"),
 					children: index !== selectedValues.length - 1 ? `${option?.label},` : option?.label
 				}, value);
 			})

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-[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,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,qCACAe,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":["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"}

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

@@ -1,4 +1,4 @@
-import { h as Icon, t as cn } from "../../../../src-D4e3Wkrz.js";
+import { h as Icon, t as cn } from "../../../../src-BgCjYazJ.js";
 import { CommandItem } from "../../command/command.js";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ 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: 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: [
@@ -31,7 +31,7 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 					})
 				}) : /* @__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" })
+					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" })
 				})),
 				selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && /* @__PURE__ */ jsx("div", {
 					className: "size-4",
@@ -43,7 +43,7 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 				}),
 				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"),
+					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"),
 					children: opt.label
 				}),
 				selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"CommandItemList.js","names":["cn","Icon","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#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,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWL,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACEK,iBACE,oBAAC,eAAD,EACE,WAAWL,GAAG,UAAU,mCAAmC,EAE9D,CAAA;;AAIL,MAAaM,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWrB,GACT,kBACA,0EACAgB,IAAIK,YACF,yFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWT,GACT,6DACA,wCACAiB,cACE,6DACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWjB,GACT,uCACAiB,aACI,yCACA,wCACJ,qCACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,kHAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWtB,GACT,qDACA,oCACAgB,IAAIK,YAAY,mCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}
+{"version":3,"file":"CommandItemList.js","names":["cn","Icon","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#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 top-1/2 left-1/2 size-2.5 -translate-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-sm/4 font-normal\",\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,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWL,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACEK,iBACE,oBAAC,eAAD,EACE,WAAWL,GAAG,UAAU,mCAAmC,EAE9D,CAAA;;AAIL,MAAaM,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWrB,GACT,kBACA,0EACAgB,IAAIK,YACF,yFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWT,GACT,6DACA,wCACAiB,cACE,6DACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWjB,GACT,uCACAiB,aACI,yCACA,wCACJ,qCACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,+FAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWtB,GACT,yCACA,oCACAgB,IAAIK,YAAY,mCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}