periplo-ui 4.8.1 → 4.9.0

package/dist/components/Checkbox/Checkbox.js

@@ -11,16 +11,16 @@ const Checkbox = React.forwardRef(
     {
       ref,
       className: cn(
-        "peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors",
-        "focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2 focus-visible:outline-none",
-        "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50",
-        "data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500",
-        "data-[state=indeterminate]:border-neutral-500 data-[state=indeterminate]:bg-neutral-500",
-        "hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500",
+        "peer relative h-5 w-5 shrink-0 rounded border border-neutral-300 bg-white transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-accent-400 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-100 disabled:opacity-50",
+        "data-[state=checked]:border-neutral-600 data-[state=checked]:bg-white",
+        "data-[state=indeterminate]:border-neutral-600 data-[state=indeterminate]:bg-white",
+        "hover:border-neutral-600 disabled:hover:border-neutral-200 data-[state=checked]:hover:border-neutral-600",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("absolute inset-0 flex items-center justify-center"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5 text-white", weight: "bold" }) : /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white" }) })
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("absolute inset-0 flex items-center justify-center"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5 text-neutral-600", weight: "bold" }) : /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-neutral-600", weight: "bold" }) })
     }
   )
 );

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { Minus } from '@phosphor-icons/react/dist/ssr/Minus'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox. `'indeterminate'` renders a partial (dash) state. */\n  checked?: CheckboxPrimitive.CheckedState\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n        'focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2 focus-visible:outline-none',\n        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n        'data-[state=indeterminate]:border-neutral-500 data-[state=indeterminate]:bg-neutral-500',\n        'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={cn('absolute inset-0 flex items-center justify-center')}>\n        {props.checked === 'indeterminate' ? (\n          <Minus className=\"h-3.5 w-3.5 text-white\" weight=\"bold\" />\n        ) : (\n          <Check className=\"h-3.5 w-3.5 text-white\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,iBAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,yFAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,SAAA,EAAlB,EAA4B,WAAW,EAAA,CAAG,mDAAmD,CAAA,EAC3F,QAAA,EAAA,KAAA,CAAM,OAAA,KAAY,eAAA,uBAChB,KAAA,EAAA,EAAM,SAAA,EAAU,0BAAyB,MAAA,EAAO,MAAA,EAAO,oBAExD,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,CAAA,EAE9C;AAAA;AAAA;AAGN;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { Minus } from '@phosphor-icons/react/dist/ssr/Minus'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox. `'indeterminate'` renders a partial (dash) state. */\n  checked?: CheckboxPrimitive.CheckedState\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded border border-neutral-300 bg-white transition-colors',\n        'focus-visible:ring-2 focus-visible:ring-accent-400 focus-visible:ring-offset-2 focus-visible:outline-none',\n        'disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-600 data-[state=checked]:bg-white',\n        'data-[state=indeterminate]:border-neutral-600 data-[state=indeterminate]:bg-white',\n        'hover:border-neutral-600 disabled:hover:border-neutral-200 data-[state=checked]:hover:border-neutral-600',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={cn('absolute inset-0 flex items-center justify-center')}>\n        {props.checked === 'indeterminate' ? (\n          <Minus className=\"h-3.5 w-3.5 text-neutral-600\" weight=\"bold\" />\n        ) : (\n          <Check className=\"h-3.5 w-3.5 text-neutral-600\" weight=\"bold\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,iBAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,6FAAA;AAAA,QACA,2GAAA;AAAA,QACA,qGAAA;AAAA,QACA,uEAAA;AAAA,QACA,mFAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAA,CAAkB,SAAA,EAAlB,EAA4B,SAAA,EAAW,GAAG,mDAAmD,CAAA,EAC3F,QAAA,EAAA,KAAA,CAAM,OAAA,KAAY,eAAA,mBACjB,GAAA,CAAC,SAAM,SAAA,EAAU,8BAAA,EAA+B,MAAA,EAAO,MAAA,EAAO,CAAA,mBAE9D,GAAA,CAAC,SAAM,SAAA,EAAU,8BAAA,EAA+B,MAAA,EAAO,MAAA,EAAO,CAAA,EAElE;AAAA;AAAA;AAGN;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}

package/dist/components/Combobox/StaticComboboxList.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Check } from '@phosphor-icons/react/dist/ssr/Check';
-import { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare';
-import { Square } from '@phosphor-icons/react/dist/ssr/Square';
 import { useMemo } from 'react';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 import { CommandList, CommandEmpty, CommandGroup, CommandSeparator, CommandItem } from '../Command/Command.js';
 import { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip.js';
 
@@ -49,7 +48,7 @@ const StaticComboboxList = ({
     const selected = isOptionSelected(optionValue);
     const renderSelectionIndicator = () => {
       if (multiple) {
-        return selected ? /* @__PURE__ */ jsx(CheckSquare, { className: "mr-2 h-6! w-6!" }) : /* @__PURE__ */ jsx(Square, { className: "mr-2 h-6! w-6!" });
+        return /* @__PURE__ */ jsx(Checkbox, { checked: selected, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none mr-2 shrink-0" });
       }
       return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mr-1 flex h-6! w-6! shrink-0 items-center justify-end", children: selected && /* @__PURE__ */ jsx(Check, { weight: "bold", className: "h-4! w-4!" }) });
     };
@@ -64,7 +63,7 @@ const StaticComboboxList = ({
       style: { maxHeight },
       className: "overflow-auto overscroll-contain",
       onWheel: (event) => event.stopPropagation(),
-      children: loading ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex items-center justify-center py-6 text-sm", children: loadingPlaceholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6 text-sm text-neutral-400", children: loadingPlaceholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         filteredOptions.length === 0 && regularOptions.length === 0 && (!specialOptions || specialOptions.length === 0) && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
         specialOptions?.length && specialOptionsTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(CommandGroup, { heading: specialOptionsTitle, children: specialOptions.map(renderListOption) }),

package/dist/components/Combobox/StaticComboboxList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare'\nimport { Square } from '@phosphor-icons/react/dist/ssr/Square'\nimport { useMemo } from 'react'\n\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n  filteredOptions,\n  loading,\n  loadingPlaceholder,\n  emptyMessage,\n  multiple,\n  value,\n  getOptionValue,\n  getOptionLabel,\n  handleSelect,\n  renderOption,\n  maxHeight,\n  selectedMultiplePlaceholder,\n  multipleOptionsPlaceholder,\n  options,\n  specialOptions,\n  specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n  const isArrayValue = Array.isArray(value)\n  const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n  const isOptionSelected = (optionValue: string) =>\n    multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n  const regularOptions = useMemo(() => {\n    return filteredOptions.filter(\n      (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n    )\n  }, [filteredOptions, specialOptions, getOptionValue])\n\n  const regularSelectedOptions = useMemo(() => {\n    if (!multiple || !isArrayValue) return []\n\n    return options.filter(\n      (option) =>\n        selectedValues.includes(getOptionValue(option)) &&\n        !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n    )\n  }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n  const optionsToShow = useMemo(() => {\n    if (specialOptions) return regularOptions\n\n    if (!multiple || !isArrayValue) return regularOptions\n\n    return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n  }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n  const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n  const renderListOption = (option: T) => {\n    const optionValue = getOptionValue(option)\n    const selected = isOptionSelected(optionValue)\n\n    const renderSelectionIndicator = () => {\n      if (multiple) {\n        return selected ? (\n          <CheckSquare className=\"mr-2 h-6! w-6!\" />\n        ) : (\n          <Square className=\"mr-2 h-6! w-6!\" />\n        )\n      }\n\n      return (\n        <span aria-hidden className=\"mr-1 flex h-6! w-6! shrink-0 items-center justify-end\">\n          {selected && <Check weight=\"bold\" className=\"h-4! w-4!\" />}\n        </span>\n      )\n    }\n\n    return (\n      <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n        {renderOption ? (\n          renderOption(option, selected)\n        ) : (\n          <>\n            {renderSelectionIndicator()}\n            <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n          </>\n        )}\n      </CommandItem>\n    )\n  }\n\n  return (\n    <CommandList\n      style={{ maxHeight }}\n      className=\"overflow-auto overscroll-contain\"\n      onWheel={(event) => event.stopPropagation()}\n    >\n      {loading ? (\n        <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n      ) : (\n        <>\n          {filteredOptions.length === 0 &&\n            regularOptions.length === 0 &&\n            (!specialOptions || specialOptions.length === 0) && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n\n          {specialOptions?.length && specialOptionsTitle ? (\n            <>\n              <CommandGroup heading={specialOptionsTitle}>{specialOptions.map(renderListOption)}</CommandGroup>\n\n              <CommandSeparator className=\"mx-[10px]!\" />\n            </>\n          ) : null}\n\n          {!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && (\n            <CommandGroup heading={selectedMultiplePlaceholder}>\n              {regularSelectedOptions.map(renderListOption)}\n            </CommandGroup>\n          )}\n\n          {optionsToShow.length > 0 && (\n            <CommandGroup heading={groupHeading}>{optionsToShow.map(renderListOption)}</CommandGroup>\n          )}\n        </>\n      )}\n    </CommandList>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useMemo } from 'react'\n\nimport { Checkbox } from '../Checkbox'\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n  filteredOptions,\n  loading,\n  loadingPlaceholder,\n  emptyMessage,\n  multiple,\n  value,\n  getOptionValue,\n  getOptionLabel,\n  handleSelect,\n  renderOption,\n  maxHeight,\n  selectedMultiplePlaceholder,\n  multipleOptionsPlaceholder,\n  options,\n  specialOptions,\n  specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n  const isArrayValue = Array.isArray(value)\n  const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n  const isOptionSelected = (optionValue: string) =>\n    multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n  const regularOptions = useMemo(() => {\n    return filteredOptions.filter(\n      (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n    )\n  }, [filteredOptions, specialOptions, getOptionValue])\n\n  const regularSelectedOptions = useMemo(() => {\n    if (!multiple || !isArrayValue) return []\n\n    return options.filter(\n      (option) =>\n        selectedValues.includes(getOptionValue(option)) &&\n        !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n    )\n  }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n  const optionsToShow = useMemo(() => {\n    if (specialOptions) return regularOptions\n\n    if (!multiple || !isArrayValue) return regularOptions\n\n    return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n  }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n  const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n  const renderListOption = (option: T) => {\n    const optionValue = getOptionValue(option)\n    const selected = isOptionSelected(optionValue)\n\n    const renderSelectionIndicator = () => {\n      if (multiple) {\n        return <Checkbox checked={selected} tabIndex={-1} aria-hidden className=\"pointer-events-none mr-2 shrink-0\" />\n      }\n\n      return (\n        <span aria-hidden className=\"mr-1 flex h-6! w-6! shrink-0 items-center justify-end\">\n          {selected && <Check weight=\"bold\" className=\"h-4! w-4!\" />}\n        </span>\n      )\n    }\n\n    return (\n      <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n        {renderOption ? (\n          renderOption(option, selected)\n        ) : (\n          <>\n            {renderSelectionIndicator()}\n            <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n          </>\n        )}\n      </CommandItem>\n    )\n  }\n\n  return (\n    <CommandList\n      style={{ maxHeight }}\n      className=\"overflow-auto overscroll-contain\"\n      onWheel={(event) => event.stopPropagation()}\n    >\n      {loading ? (\n        <div className=\"flex items-center justify-center py-6 text-sm text-neutral-400\">{loadingPlaceholder}</div>\n      ) : (\n        <>\n          {filteredOptions.length === 0 &&\n            regularOptions.length === 0 &&\n            (!specialOptions || specialOptions.length === 0) && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n\n          {specialOptions?.length && specialOptionsTitle ? (\n            <>\n              <CommandGroup heading={specialOptionsTitle}>{specialOptions.map(renderListOption)}</CommandGroup>\n\n              <CommandSeparator className=\"mx-[10px]!\" />\n            </>\n          ) : null}\n\n          {!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && (\n            <CommandGroup heading={selectedMultiplePlaceholder}>\n              {regularSelectedOptions.map(renderListOption)}\n            </CommandGroup>\n          )}\n\n          {optionsToShow.length > 0 && (\n            <CommandGroup heading={groupHeading}>{optionsToShow.map(renderListOption)}</CommandGroup>\n          )}\n        </>\n      )}\n    </CommandList>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Combobox/VirtualizedComboboxList.js

@@ -46,7 +46,7 @@ const VirtualizedComboboxList = ({
     }
   }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore]);
   if (loading && localOptions.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex items-center justify-center py-6 text-sm", children: loadingPlaceholder });
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6 text-sm text-neutral-400", children: loadingPlaceholder });
   }
   if (localOptions.length === 0 && !loading && !loadingMore) {
     return /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage });

package/dist/components/Combobox/VirtualizedComboboxList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n  localOptions,\n  loading,\n  loadingPlaceholder,\n  emptyMessage,\n  value,\n  getOptionValue,\n  getOptionLabel,\n  handleSelect,\n  renderOption,\n  maxHeight,\n  hasNextPage,\n  loadingMore,\n  onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null)\n  const hasTriggeredRef = useRef(false)\n\n  const totalCount = localOptions.length\n  const PREFETCH_THRESHOLD = 25\n\n  const rowVirtualizer = useVirtualizer({\n    count: totalCount,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => 40,\n    overscan: 10,\n  })\n\n  useEffect(() => {\n    hasTriggeredRef.current = false\n  }, [totalCount, loadingMore])\n\n  const virtualItems = rowVirtualizer.getVirtualItems()\n\n  useEffect(() => {\n    if (virtualItems.length === 0 || !hasNextPage || loadingMore || loading || hasTriggeredRef.current) {\n      return\n    }\n\n    const lastVisibleItem = virtualItems.at(-1)\n    const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n    if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n      hasTriggeredRef.current = true\n      onLoadMore()\n    }\n  }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n  if (loading && localOptions.length === 0) {\n    return (\n      <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n    )\n  }\n\n  if (localOptions.length === 0 && !loading && !loadingMore) {\n    return <CommandEmpty>{emptyMessage}</CommandEmpty>\n  }\n\n  const getItemAtIndex = (index: number) => {\n    const option = localOptions[index]\n    const isSelected = value === getOptionValue(option)\n    return { option, isSelected }\n  }\n\n  return (\n    <div\n      ref={parentRef}\n      className=\"overflow-auto overscroll-contain\"\n      style={{ maxHeight }}\n      onWheel={(event) => event.stopPropagation()}\n    >\n      <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n        {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n          const { option, isSelected } = getItemAtIndex(virtualRow.index)\n          const optionValue = getOptionValue(option)\n\n          return (\n            <div\n              key={optionValue}\n              data-index={virtualRow.index}\n              ref={(el) => {\n                if (el) rowVirtualizer.measureElement(el)\n              }}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            >\n              <CommandItem value={optionValue} onSelect={handleSelect}>\n                {renderOption ? (\n                  renderOption(option, isSelected)\n                ) : (\n                  <>\n                    <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n                    <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                  </>\n                )}\n              </CommandItem>\n            </div>\n          )\n        })}\n      </div>\n      {loadingMore && (\n        <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,0BAA0B,CAAmB;AAAA,EACxD,YAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAuC;AACrC,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAA,GAAkB,OAAO,KAAK,CAAA;AAEpC,EAAA,MAAM,aAAa,YAAA,CAAa,MAAA;AAChC,EAAA,MAAM,kBAAA,GAAqB,EAAA;AAE3B,EAAA,MAAM,iBAAiB,cAAA,CAAe;AAAA,IACpC,KAAA,EAAO,UAAA;AAAA,IACP,gBAAA,EAAkB,MAAM,SAAA,CAAU,OAAA;AAAA,IAClC,cAAc,MAAM,EAAA;AAAA,IACpB,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAA,GAAU,KAAA;AAAA,EAC5B,CAAA,EAAG,CAAC,UAAA,EAAY,WAAW,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAA,GAAe,eAAe,eAAA,EAAgB;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,CAAa,WAAW,CAAA,IAAK,CAAC,eAAe,WAAA,IAAe,OAAA,IAAW,gBAAgB,OAAA,EAAS;AAClG,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,eAAA,GAAkB,YAAA,CAAa,EAAA,CAAG,EAAE,CAAA;AAC1C,IAAA,MAAM,YAAA,GAAe,UAAA,IAAc,eAAA,EAAiB,KAAA,IAAS,CAAA,CAAA;AAE7D,IAAA,IAAI,gBAAgB,kBAAA,EAAoB;AACtC,MAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAC1B,MAAA,UAAA,EAAW;AAAA,IACb;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAA,EAAY,aAAa,WAAA,EAAa,OAAA,EAAS,UAAU,CAAC,CAAA;AAE5E,EAAA,IAAI,OAAA,IAAW,YAAA,CAAa,MAAA,KAAW,CAAA,EAAG;AACxC,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qEAAA,EAAuE,QAAA,EAAA,kBAAA,EAAmB,CAAA;AAAA,EAE7G;AAEA,EAAA,IAAI,aAAa,MAAA,KAAW,CAAA,IAAK,CAAC,OAAA,IAAW,CAAC,WAAA,EAAa;AACzD,IAAA,uBAAO,GAAA,CAAC,gBAAc,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,EACrC;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAAkB;AACxC,IAAA,MAAM,MAAA,GAAS,aAAa,KAAK,CAAA;AACjC,IAAA,MAAM,UAAA,GAAa,KAAA,KAAU,cAAA,CAAe,MAAM,CAAA;AAClD,IAAA,OAAO,EAAE,QAAQ,UAAA,EAAW;AAAA,EAC9B,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAU,kCAAA;AAAA,MACV,KAAA,EAAO,EAAE,SAAA,EAAU;AAAA,MACnB,OAAA,EAAS,CAAC,KAAA,KAAU,KAAA,CAAM,eAAA,EAAgB;AAAA,MAE1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAA,EAAG,eAAe,YAAA,EAAc,CAAA,EAAA,CAAA,EAAM,QAAA,EAAU,YAAW,EAC9E,QAAA,EAAA,cAAA,CAAe,iBAAgB,CAAE,GAAA,CAAI,CAAC,UAAA,KAAe;AACpD,UAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAW,GAAI,cAAA,CAAe,WAAW,KAAK,CAAA;AAC9D,UAAA,MAAM,WAAA,GAAc,eAAe,MAAM,CAAA;AAEzC,UAAA,uBACE,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cAEC,cAAY,UAAA,CAAW,KAAA;AAAA,cACvB,GAAA,EAAK,CAAC,EAAA,KAAO;AACX,gBAAA,IAAI,EAAA,EAAI,cAAA,CAAe,cAAA,CAAe,EAAE,CAAA;AAAA,cAC1C,CAAA;AAAA,cACA,KAAA,EAAO;AAAA,gBACL,QAAA,EAAU,UAAA;AAAA,gBACV,GAAA,EAAK,CAAA;AAAA,gBACL,IAAA,EAAM,CAAA;AAAA,gBACN,KAAA,EAAO,MAAA;AAAA,gBACP,SAAA,EAAW,CAAA,WAAA,EAAc,UAAA,CAAW,KAAK,CAAA,GAAA;AAAA,eAC3C;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,WAAA,EAAa,QAAA,EAAU,YAAA,EACxC,QAAA,EAAA,YAAA,GACC,YAAA,CAAa,MAAA,EAAQ,UAAU,CAAA,mBAE/B,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAM,SAAA,EAAW,CAAA,aAAA,EAAgB,UAAA,GAAa,aAAA,GAAgB,WAAW,CAAA,CAAA,EAAI,CAAA;AAAA,gCAC9E,GAAA,CAAC,yBAAA,EAAA,EAA0B,KAAA,EAAO,cAAA,CAAe,MAAM,CAAA,EAAG;AAAA,eAAA,EAC5D,CAAA,EAEJ;AAAA,aAAA;AAAA,YAtBK;AAAA,WAuBP;AAAA,QAEJ,CAAC,CAAA,EACH,CAAA;AAAA,QACC,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kEAAkE,QAAA,EAAA,kBAAA,EAAmB;AAAA;AAAA;AAAA,GAExG;AAEJ;;;;"}
+{"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n  localOptions,\n  loading,\n  loadingPlaceholder,\n  emptyMessage,\n  value,\n  getOptionValue,\n  getOptionLabel,\n  handleSelect,\n  renderOption,\n  maxHeight,\n  hasNextPage,\n  loadingMore,\n  onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null)\n  const hasTriggeredRef = useRef(false)\n\n  const totalCount = localOptions.length\n  const PREFETCH_THRESHOLD = 25\n\n  const rowVirtualizer = useVirtualizer({\n    count: totalCount,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => 40,\n    overscan: 10,\n  })\n\n  useEffect(() => {\n    hasTriggeredRef.current = false\n  }, [totalCount, loadingMore])\n\n  const virtualItems = rowVirtualizer.getVirtualItems()\n\n  useEffect(() => {\n    if (virtualItems.length === 0 || !hasNextPage || loadingMore || loading || hasTriggeredRef.current) {\n      return\n    }\n\n    const lastVisibleItem = virtualItems.at(-1)\n    const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n    if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n      hasTriggeredRef.current = true\n      onLoadMore()\n    }\n  }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n  if (loading && localOptions.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center py-6 text-sm text-neutral-400\">{loadingPlaceholder}</div>\n    )\n  }\n\n  if (localOptions.length === 0 && !loading && !loadingMore) {\n    return <CommandEmpty>{emptyMessage}</CommandEmpty>\n  }\n\n  const getItemAtIndex = (index: number) => {\n    const option = localOptions[index]\n    const isSelected = value === getOptionValue(option)\n    return { option, isSelected }\n  }\n\n  return (\n    <div\n      ref={parentRef}\n      className=\"overflow-auto overscroll-contain\"\n      style={{ maxHeight }}\n      onWheel={(event) => event.stopPropagation()}\n    >\n      <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n        {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n          const { option, isSelected } = getItemAtIndex(virtualRow.index)\n          const optionValue = getOptionValue(option)\n\n          return (\n            <div\n              key={optionValue}\n              data-index={virtualRow.index}\n              ref={(el) => {\n                if (el) rowVirtualizer.measureElement(el)\n              }}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            >\n              <CommandItem value={optionValue} onSelect={handleSelect}>\n                {renderOption ? (\n                  renderOption(option, isSelected)\n                ) : (\n                  <>\n                    <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n                    <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                  </>\n                )}\n              </CommandItem>\n            </div>\n          )\n        })}\n      </div>\n      {loadingMore && (\n        <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Combobox/hooks/useDisplayValue.js

@@ -1,5 +1,19 @@
 import { useMemo } from 'react';
 
+function getMultipleDisplayValue(props, lookup, getOptionLabel, placeholder, handleRemove) {
+  const { renderLabel } = props;
+  const value = Array.isArray(props.value) ? props.value : [];
+  if (value.length === 0) return placeholder;
+  const selected = value.map(lookup).filter((option) => option !== void 0);
+  return renderLabel ? renderLabel(selected, handleRemove) : selected.map(getOptionLabel).join(", ");
+}
+function getSingleDisplayValue(props, lookup, getOptionLabel, placeholder) {
+  const { value, renderLabel } = props;
+  const fallbackSelectedItem = props.virtualized === true ? props.selectedItem : void 0;
+  const selected = value ? lookup(value) ?? fallbackSelectedItem : void 0;
+  if (renderLabel && selected) return renderLabel(selected);
+  return selected ? getOptionLabel(selected) : placeholder;
+}
 function useDisplayValue({ props, handleRemove }) {
   const { getOptionValue, getOptionLabel, placeholder = "Select...", multiple, specialOptions } = props;
   return useMemo(() => {
@@ -7,17 +21,8 @@ function useDisplayValue({ props, handleRemove }) {
     const options = isVirtualized ? props.items : props.options ?? [];
     const all = specialOptions ? [...specialOptions, ...options] : options;
     const lookup = (val) => all.find((option) => getOptionValue(option) === val);
-    if (multiple) {
-      const { renderLabel: renderLabel2 } = props;
-      const value2 = Array.isArray(props.value) ? props.value : [];
-      if (value2.length === 0) return placeholder;
-      const selected2 = value2.map(lookup).filter((option) => option !== void 0);
-      return renderLabel2 ? renderLabel2(selected2, handleRemove) : selected2.map(getOptionLabel).join(", ");
-    }
-    const { value, renderLabel } = props;
-    const selected = value ? lookup(value) ?? (isVirtualized ? props.selectedItem : void 0) : void 0;
-    if (renderLabel && selected) return renderLabel(selected);
-    return selected ? getOptionLabel(selected) : placeholder;
+    if (multiple) return getMultipleDisplayValue(props, lookup, getOptionLabel, placeholder, handleRemove);
+    return getSingleDisplayValue(props, lookup, getOptionLabel, placeholder);
   }, [props, getOptionLabel, getOptionValue, placeholder, multiple, specialOptions]);
 }
 

package/dist/components/Combobox/hooks/useDisplayValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDisplayValue.js","sources":["../../../../src/components/Combobox/hooks/useDisplayValue.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { ComboboxProps } from '../Combobox'\n\ntype UseDisplayValueParams<T extends object> = {\n  props: ComboboxProps<T>\n  handleRemove: (value: string) => void\n}\n\nexport function useDisplayValue<T extends object>({ props, handleRemove }: UseDisplayValueParams<T>) {\n  const { getOptionValue, getOptionLabel, placeholder = 'Select...', multiple, specialOptions } = props\n\n  return useMemo(() => {\n    const isVirtualized = props.virtualized === true\n    const options = isVirtualized ? props.items : (props.options ?? [])\n    const all = specialOptions ? [...specialOptions, ...options] : options\n\n    const lookup = (val: string) => all.find((option) => getOptionValue(option) === val)\n\n    if (multiple) {\n      const { renderLabel } = props\n      const value = Array.isArray(props.value) ? props.value : []\n      if (value.length === 0) return placeholder\n\n      const selected = value.map(lookup).filter((option): option is T => option !== undefined)\n\n      return renderLabel ? renderLabel(selected, handleRemove) : selected.map(getOptionLabel).join(', ')\n    }\n\n    const { value, renderLabel } = props\n    const selected = value ? (lookup(value) ?? (isVirtualized ? props.selectedItem : undefined)) : undefined\n    if (renderLabel && selected) return renderLabel(selected)\n    return selected ? getOptionLabel(selected) : placeholder\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props, getOptionLabel, getOptionValue, placeholder, multiple, specialOptions])\n}\n"],"names":["renderLabel","value","selected"],"mappings":";;AASO,SAAS,eAAA,CAAkC,EAAE,KAAA,EAAO,YAAA,EAAa,EAA6B;AACnG,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAA,EAAgB,cAAc,WAAA,EAAa,QAAA,EAAU,gBAAe,GAAI,KAAA;AAEhG,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,aAAA,GAAgB,MAAM,WAAA,KAAgB,IAAA;AAC5C,IAAA,MAAM,UAAU,aAAA,GAAgB,KAAA,CAAM,KAAA,GAAS,KAAA,CAAM,WAAW,EAAC;AACjE,IAAA,MAAM,MAAM,cAAA,GAAiB,CAAC,GAAG,cAAA,EAAgB,GAAG,OAAO,CAAA,GAAI,OAAA;AAE/D,IAAA,MAAM,MAAA,GAAS,CAAC,GAAA,KAAgB,GAAA,CAAI,IAAA,CAAK,CAAC,MAAA,KAAW,cAAA,CAAe,MAAM,CAAA,KAAM,GAAG,CAAA;AAEnF,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,MAAM,EAAE,WAAA,EAAAA,YAAAA,EAAY,GAAI,KAAA;AACxB,MAAA,MAAMC,MAAAA,GAAQ,MAAM,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA,GAAI,KAAA,CAAM,QAAQ,EAAC;AAC1D,MAAA,IAAIA,MAAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,WAAA;AAE/B,MAAA,MAAMC,SAAAA,GAAWD,OAAM,GAAA,CAAI,MAAM,EAAE,MAAA,CAAO,CAAC,MAAA,KAAwB,MAAA,KAAW,MAAS,CAAA;AAEvF,MAAA,OAAOD,YAAAA,GAAcA,YAAAA,CAAYE,SAAAA,EAAU,YAAY,CAAA,GAAIA,UAAS,GAAA,CAAI,cAAc,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,IACnG;AAEA,IAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAY,GAAI,KAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,QAAS,MAAA,CAAO,KAAK,MAAM,aAAA,GAAgB,KAAA,CAAM,eAAe,MAAA,CAAA,GAAc,MAAA;AAC/F,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,OAAO,WAAA,CAAY,QAAQ,CAAA;AACxD,IAAA,OAAO,QAAA,GAAW,cAAA,CAAe,QAAQ,CAAA,GAAI,WAAA;AAAA,EAE/C,CAAA,EAAG,CAAC,KAAA,EAAO,cAAA,EAAgB,gBAAgB,WAAA,EAAa,QAAA,EAAU,cAAc,CAAC,CAAA;AACnF;;;;"}
+{"version":3,"file":"useDisplayValue.js","sources":["../../../../src/components/Combobox/hooks/useDisplayValue.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { ComboboxProps } from '../Combobox'\n\ntype UseDisplayValueParams<T extends object> = {\n  props: ComboboxProps<T>\n  handleRemove: (value: string) => void\n}\n\nfunction getMultipleDisplayValue<T extends object>(\n  props: Extract<ComboboxProps<T>, { multiple: true }>,\n  lookup: (val: string) => T | undefined,\n  getOptionLabel: (option: T) => string,\n  placeholder: string,\n  handleRemove: (value: string) => void,\n) {\n  const { renderLabel } = props\n  const value = Array.isArray(props.value) ? props.value : []\n  if (value.length === 0) return placeholder\n\n  const selected = value.map(lookup).filter((option): option is T => option !== undefined)\n\n  return renderLabel ? renderLabel(selected, handleRemove) : selected.map(getOptionLabel).join(', ')\n}\n\nfunction getSingleDisplayValue<T extends object>(\n  props: Exclude<ComboboxProps<T>, { multiple: true }>,\n  lookup: (val: string) => T | undefined,\n  getOptionLabel: (option: T) => string,\n  placeholder: string,\n) {\n  const { value, renderLabel } = props\n  const fallbackSelectedItem = props.virtualized === true ? props.selectedItem : undefined\n  const selected = value ? (lookup(value) ?? fallbackSelectedItem) : undefined\n\n  if (renderLabel && selected) return renderLabel(selected)\n  return selected ? getOptionLabel(selected) : placeholder\n}\n\nexport function useDisplayValue<T extends object>({ props, handleRemove }: UseDisplayValueParams<T>) {\n  const { getOptionValue, getOptionLabel, placeholder = 'Select...', multiple, specialOptions } = props\n\n  return useMemo(() => {\n    const isVirtualized = props.virtualized === true\n    const options = isVirtualized ? props.items : (props.options ?? [])\n    const all = specialOptions ? [...specialOptions, ...options] : options\n    const lookup = (val: string) => all.find((option) => getOptionValue(option) === val)\n\n    if (multiple) return getMultipleDisplayValue(props, lookup, getOptionLabel, placeholder, handleRemove)\n    return getSingleDisplayValue(props, lookup, getOptionLabel, placeholder)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props, getOptionLabel, getOptionValue, placeholder, multiple, specialOptions])\n}\n"],"names":[],"mappings":";;AASA,SAAS,uBAAA,CACP,KAAA,EACA,MAAA,EACA,cAAA,EACA,aACA,YAAA,EACA;AACA,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AACxB,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA,GAAI,KAAA,CAAM,QAAQ,EAAC;AAC1D,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,WAAA;AAE/B,EAAA,MAAM,QAAA,GAAW,MAAM,GAAA,CAAI,MAAM,EAAE,MAAA,CAAO,CAAC,MAAA,KAAwB,MAAA,KAAW,MAAS,CAAA;AAEvF,EAAA,OAAO,WAAA,GAAc,WAAA,CAAY,QAAA,EAAU,YAAY,CAAA,GAAI,SAAS,GAAA,CAAI,cAAc,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACnG;AAEA,SAAS,qBAAA,CACP,KAAA,EACA,MAAA,EACA,cAAA,EACA,WAAA,EACA;AACA,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAY,GAAI,KAAA;AAC/B,EAAA,MAAM,oBAAA,GAAuB,KAAA,CAAM,WAAA,KAAgB,IAAA,GAAO,MAAM,YAAA,GAAe,MAAA;AAC/E,EAAA,MAAM,QAAA,GAAW,KAAA,GAAS,MAAA,CAAO,KAAK,KAAK,oBAAA,GAAwB,MAAA;AAEnE,EAAA,IAAI,WAAA,IAAe,QAAA,EAAU,OAAO,WAAA,CAAY,QAAQ,CAAA;AACxD,EAAA,OAAO,QAAA,GAAW,cAAA,CAAe,QAAQ,CAAA,GAAI,WAAA;AAC/C;AAEO,SAAS,eAAA,CAAkC,EAAE,KAAA,EAAO,YAAA,EAAa,EAA6B;AACnG,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAA,EAAgB,cAAc,WAAA,EAAa,QAAA,EAAU,gBAAe,GAAI,KAAA;AAEhG,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,aAAA,GAAgB,MAAM,WAAA,KAAgB,IAAA;AAC5C,IAAA,MAAM,UAAU,aAAA,GAAgB,KAAA,CAAM,KAAA,GAAS,KAAA,CAAM,WAAW,EAAC;AACjE,IAAA,MAAM,MAAM,cAAA,GAAiB,CAAC,GAAG,cAAA,EAAgB,GAAG,OAAO,CAAA,GAAI,OAAA;AAC/D,IAAA,MAAM,MAAA,GAAS,CAAC,GAAA,KAAgB,GAAA,CAAI,IAAA,CAAK,CAAC,MAAA,KAAW,cAAA,CAAe,MAAM,CAAA,KAAM,GAAG,CAAA;AAEnF,IAAA,IAAI,UAAU,OAAO,uBAAA,CAAwB,OAAO,MAAA,EAAQ,cAAA,EAAgB,aAAa,YAAY,CAAA;AACrG,IAAA,OAAO,qBAAA,CAAsB,KAAA,EAAO,MAAA,EAAQ,cAAA,EAAgB,WAAW,CAAA;AAAA,EAEzE,CAAA,EAAG,CAAC,KAAA,EAAO,cAAA,EAAgB,gBAAgB,WAAA,EAAa,QAAA,EAAU,cAAc,CAAC,CAAA;AACnF;;;;"}

package/dist/components/Combobox/useCombobox.js

@@ -1,4 +1,5 @@
 import { useRef, useEffect, useMemo, useState } from 'react';
+import { normalizeForSearch } from '../../lib/utils.js';
 import { useComboboxOpenState } from './hooks/useComboboxOpenState.js';
 import { useComboboxSelection } from './hooks/useComboboxSelection.js';
 import { useDisplayValue } from './hooks/useDisplayValue.js';
@@ -22,7 +23,8 @@ const useCombobox = (props) => {
   const filteredOptions = useMemo(() => {
     if (isVirtualized) return items;
     if (!filterOptions) {
-      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()));
+      const normalizedSearchTerm = normalizeForSearch(searchTerm);
+      return options.filter((option) => normalizeForSearch(getOptionLabel(option)).includes(normalizedSearchTerm));
     }
     return searchTerm ? filterOptions(options, searchTerm) : options;
   }, [isVirtualized, items, filterOptions, options, searchTerm, getOptionLabel]);

package/dist/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ComboboxProps } from './Combobox'\nimport { useComboboxOpenState, useComboboxSelection, useDisplayValue } from './hooks'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n  const { getOptionLabel, filterOptions, onClear, clearable = true } = props\n  const options = props.options ?? []\n  const isVirtualized = props.virtualized === true\n\n  const { open, setOpen, searchTerm, debouncedSearchTerm, setSearchTerm } = useComboboxOpenState()\n\n  const onSearchChangeRef = useRef<((search: string) => void) | undefined>(undefined)\n  onSearchChangeRef.current = isVirtualized ? props.onSearchChange : undefined\n  useEffect(() => {\n    if (!isVirtualized) return\n    onSearchChangeRef.current?.(debouncedSearchTerm)\n  }, [debouncedSearchTerm, isVirtualized])\n\n  const items = isVirtualized ? props.items : []\n  const hasNextPage = isVirtualized ? props.hasNextPage : false\n  const loadingMore = isVirtualized ? props.isFetchingNextPage : false\n  const loadNextPage = isVirtualized ? props.onLoadMore : () => {}\n\n  const filteredOptions = useMemo(() => {\n    if (isVirtualized) return items\n\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [isVirtualized, items, filterOptions, options, searchTerm, getOptionLabel])\n\n  const { handleSelect, handleRemove, handleClear, hasValue } = useComboboxSelection(props, setOpen)\n\n  const [isHovered, setIsHovered] = useState(false)\n\n  const displayValue = useDisplayValue<T>({ props, handleRemove })\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\n\n  return {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    isHovered,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleRemove,\n    handleClear,\n    loadNextPage,\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA4B;AACxE,EAAA,MAAM,EAAE,cAAA,EAAgB,aAAA,EAAe,OAAA,EAAS,SAAA,GAAY,MAAK,GAAI,KAAA;AACrE,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,OAAA,IAAW,EAAC;AAClC,EAAA,MAAM,aAAA,GAAgB,MAAM,WAAA,KAAgB,IAAA;AAE5C,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,YAAY,mBAAA,EAAqB,aAAA,KAAkB,oBAAA,EAAqB;AAE/F,EAAA,MAAM,iBAAA,GAAoB,OAA+C,MAAS,CAAA;AAClF,EAAA,iBAAA,CAAkB,OAAA,GAAU,aAAA,GAAgB,KAAA,CAAM,cAAA,GAAiB,MAAA;AACnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,aAAA,EAAe;AACpB,IAAA,iBAAA,CAAkB,UAAU,mBAAmB,CAAA;AAAA,EACjD,CAAA,EAAG,CAAC,mBAAA,EAAqB,aAAa,CAAC,CAAA;AAEvC,EAAA,MAAM,KAAA,GAAQ,aAAA,GAAgB,KAAA,CAAM,KAAA,GAAQ,EAAC;AAC7C,EAAA,MAAM,WAAA,GAAc,aAAA,GAAgB,KAAA,CAAM,WAAA,GAAc,KAAA;AACxD,EAAA,MAAM,WAAA,GAAc,aAAA,GAAgB,KAAA,CAAM,kBAAA,GAAqB,KAAA;AAC/D,EAAA,MAAM,YAAA,GAAe,aAAA,GAAgB,KAAA,CAAM,UAAA,GAAa,MAAM;AAAA,EAAC,CAAA;AAE/D,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,IAAI,eAAe,OAAO,KAAA;AAE1B,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,CAAC,MAAA,KAAW,cAAA,CAAe,MAAM,CAAA,CAAE,WAAA,EAAY,CAAE,QAAA,CAAS,UAAA,CAAW,WAAA,EAAa,CAAC,CAAA;AAAA,IAC3G;AAEA,IAAA,OAAO,UAAA,GAAa,aAAA,CAAc,OAAA,EAAS,UAAU,CAAA,GAAI,OAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,aAAA,EAAe,KAAA,EAAO,eAAe,OAAA,EAAS,UAAA,EAAY,cAAc,CAAC,CAAA;AAE7E,EAAA,MAAM,EAAE,cAAc,YAAA,EAAc,WAAA,EAAa,UAAS,GAAI,oBAAA,CAAqB,OAAO,OAAO,CAAA;AAEjG,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,YAAA,GAAe,eAAA,CAAmB,EAAE,KAAA,EAAO,cAAc,CAAA;AAE/D,EAAA,MAAM,eAAA,GAAkB,OAAA,IAAW,QAAA,IAAY,SAAA,IAAa,SAAA;AAE5D,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { normalizeForSearch } from '../../lib/utils'\n\nimport type { ComboboxProps } from './Combobox'\nimport { useComboboxOpenState, useComboboxSelection, useDisplayValue } from './hooks'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n  const { getOptionLabel, filterOptions, onClear, clearable = true } = props\n  const options = props.options ?? []\n  const isVirtualized = props.virtualized === true\n\n  const { open, setOpen, searchTerm, debouncedSearchTerm, setSearchTerm } = useComboboxOpenState()\n\n  const onSearchChangeRef = useRef<((search: string) => void) | undefined>(undefined)\n  onSearchChangeRef.current = isVirtualized ? props.onSearchChange : undefined\n  useEffect(() => {\n    if (!isVirtualized) return\n    onSearchChangeRef.current?.(debouncedSearchTerm)\n  }, [debouncedSearchTerm, isVirtualized])\n\n  const items = isVirtualized ? props.items : []\n  const hasNextPage = isVirtualized ? props.hasNextPage : false\n  const loadingMore = isVirtualized ? props.isFetchingNextPage : false\n  const loadNextPage = isVirtualized ? props.onLoadMore : () => {}\n\n  const filteredOptions = useMemo(() => {\n    if (isVirtualized) return items\n\n    if (!filterOptions) {\n      const normalizedSearchTerm = normalizeForSearch(searchTerm)\n      return options.filter((option) => normalizeForSearch(getOptionLabel(option)).includes(normalizedSearchTerm))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [isVirtualized, items, filterOptions, options, searchTerm, getOptionLabel])\n\n  const { handleSelect, handleRemove, handleClear, hasValue } = useComboboxSelection(props, setOpen)\n\n  const [isHovered, setIsHovered] = useState(false)\n\n  const displayValue = useDisplayValue<T>({ props, handleRemove })\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\n\n  return {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    isHovered,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleRemove,\n    handleClear,\n    loadNextPage,\n  }\n}\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA4B;AACxE,EAAA,MAAM,EAAE,cAAA,EAAgB,aAAA,EAAe,OAAA,EAAS,SAAA,GAAY,MAAK,GAAI,KAAA;AACrE,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,OAAA,IAAW,EAAC;AAClC,EAAA,MAAM,aAAA,GAAgB,MAAM,WAAA,KAAgB,IAAA;AAE5C,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,YAAY,mBAAA,EAAqB,aAAA,KAAkB,oBAAA,EAAqB;AAE/F,EAAA,MAAM,iBAAA,GAAoB,OAA+C,MAAS,CAAA;AAClF,EAAA,iBAAA,CAAkB,OAAA,GAAU,aAAA,GAAgB,KAAA,CAAM,cAAA,GAAiB,MAAA;AACnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,aAAA,EAAe;AACpB,IAAA,iBAAA,CAAkB,UAAU,mBAAmB,CAAA;AAAA,EACjD,CAAA,EAAG,CAAC,mBAAA,EAAqB,aAAa,CAAC,CAAA;AAEvC,EAAA,MAAM,KAAA,GAAQ,aAAA,GAAgB,KAAA,CAAM,KAAA,GAAQ,EAAC;AAC7C,EAAA,MAAM,WAAA,GAAc,aAAA,GAAgB,KAAA,CAAM,WAAA,GAAc,KAAA;AACxD,EAAA,MAAM,WAAA,GAAc,aAAA,GAAgB,KAAA,CAAM,kBAAA,GAAqB,KAAA;AAC/D,EAAA,MAAM,YAAA,GAAe,aAAA,GAAgB,KAAA,CAAM,UAAA,GAAa,MAAM;AAAA,EAAC,CAAA;AAE/D,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,IAAI,eAAe,OAAO,KAAA;AAE1B,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,MAAM,oBAAA,GAAuB,mBAAmB,UAAU,CAAA;AAC1D,MAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,CAAC,MAAA,KAAW,kBAAA,CAAmB,cAAA,CAAe,MAAM,CAAC,CAAA,CAAE,QAAA,CAAS,oBAAoB,CAAC,CAAA;AAAA,IAC7G;AAEA,IAAA,OAAO,UAAA,GAAa,aAAA,CAAc,OAAA,EAAS,UAAU,CAAA,GAAI,OAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,aAAA,EAAe,KAAA,EAAO,eAAe,OAAA,EAAS,UAAA,EAAY,cAAc,CAAC,CAAA;AAE7E,EAAA,MAAM,EAAE,cAAc,YAAA,EAAc,WAAA,EAAa,UAAS,GAAI,oBAAA,CAAqB,OAAO,OAAO,CAAA;AAEjG,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,YAAA,GAAe,eAAA,CAAmB,EAAE,KAAA,EAAO,cAAc,CAAA;AAE/D,EAAA,MAAM,eAAA,GAAkB,OAAA,IAAW,QAAA,IAAY,SAAA,IAAa,SAAA;AAE5D,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/components/Command/Command.js

@@ -16,7 +16,7 @@ const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = Command$1.displayName;
 const CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
 const CommandInput = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "!mx-[10px] !my-[10px] flex h-12 items-center rounded-lg border border-neutral-200 px-3", children: [
   /* @__PURE__ */ jsx(
@@ -24,7 +24,7 @@ const CommandInput = React.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-neutral-400 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -50,7 +50,7 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal",
+      "[&_[cmdk-group-heading]]:text-neutral-400 text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal",
       className
     ),
     ...props
@@ -72,7 +72,7 @@ const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = Command$1.Item.displayName;
 const CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: cn("text-neutral-400 ml-auto text-xs tracking-widest", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"!mx-[10px] !my-[10px] flex h-12 items-center rounded-lg border border-neutral-200 px-3\">\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n    <MagnifyingGlass className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('bg-border h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'data-[selected=true]:text-accent-foreground relative flex min-h-12 cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAAA;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AACiB;AAIlE;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}
+{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"!mx-[10px] !my-[10px] flex h-12 items-center rounded-lg border border-neutral-200 px-3\">\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-neutral-400 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n    <MagnifyingGlass className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-neutral-400 text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('bg-border h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'data-[selected=true]:text-accent-foreground relative flex min-h-12 cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-neutral-400 ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAAA;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AACiB;AAIlE;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}

package/dist/components/InputDate/InputDate.js

@@ -79,7 +79,7 @@ const InputDate = React.forwardRef(
                       segment.type === "literal" ? "select-none text-neutral-400" : cn(
                         "min-w-[1ch] rounded-sm bg-transparent px-0.5 py-px text-center outline-0 transition-colors",
                         "caret-neutral-900",
-                        "placeholder:text-neutral-300",
+                        "data-placeholder:text-neutral-300",
                         "data-focused:bg-neutral-100 data-focused:text-neutral-900",
                         "data-disabled:cursor-not-allowed data-disabled:opacity-50"
                       )

package/dist/components/InputDate/InputDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputDate.js","sources":["../../../src/components/InputDate/InputDate.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { I18nProvider } from 'react-aria'\nimport * as React from 'react'\nimport {\n  DateField,\n  DateInput,\n  DateSegment,\n  Group,\n  type DateValue,\n} from 'react-aria-components'\nimport { cn } from '@/lib/utils'\n\nexport type InputDateProps = {\n  className?: string\n  disabled?: boolean\n  error?: boolean | string\n  errorMessage?: string\n  inputClassName?: string\n  locale?: string\n  onClear?: boolean | (() => void)\n  value?: DateValue | null\n  onChange?: (date: DateValue | null) => void\n} & Omit<React.ComponentPropsWithoutRef<typeof DateField<DateValue>>, 'value' | 'onChange'>\n\nconst InputDate = React.forwardRef<HTMLDivElement, InputDateProps>(\n  (\n    {\n      className,\n      disabled,\n      error,\n      errorMessage,\n      value: controlledValue,\n      onChange: controlledOnChange,\n      inputClassName,\n      onClear = true,\n      locale,\n      ...props\n    },\n    ref,\n  ) => {\n    const [dateValue, setDateValue] = React.useState<DateValue | null>(() => controlledValue ?? null)\n    const [isHovered, setIsHovered] = React.useState(false)\n    const internalChange = React.useRef(false)\n\n    React.useEffect(() => {\n      if (internalChange.current) {\n        internalChange.current = false\n        return\n      }\n      setDateValue(controlledValue ?? null)\n    }, [controlledValue])\n\n    const handleRacChange = (date: DateValue | null) => {\n      internalChange.current = true\n      setDateValue(date)\n      controlledOnChange?.(date)\n    }\n\n    const handleClear = () => {\n      internalChange.current = true\n      setDateValue(null)\n      controlledOnChange?.(null)\n      if (typeof onClear === 'function') onClear()\n    }\n\n    const hasValue = dateValue !== null\n    const showClearIcon = Boolean(onClear && hasValue && isHovered && !disabled)\n    const resolvedErrorMessage = typeof error === 'string' ? error : errorMessage\n    const hasError = Boolean(error ?? resolvedErrorMessage)\n\n    const inner = (\n      <div className=\"flex w-full flex-col gap-1\">\n        <div className=\"flex w-full items-center\">\n          <DateField\n            ref={ref}\n            value={dateValue}\n            onChange={handleRacChange}\n            isDisabled={disabled}\n            isInvalid={hasError}\n            granularity=\"day\"\n            className=\"w-full\"\n            {...props}\n          >\n            <Group\n              data-testid=\"input-date-mask-control\"\n              className={cn(\n                'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n                disabled && 'bg-neutral-50',\n                hasError && 'border-error-400 focus-within:border-error-700',\n                className,\n              )}\n              onMouseEnter={() => setIsHovered(true)}\n              onMouseLeave={() => setIsHovered(false)}\n            >\n              <CalendarBlank size={20} />\n              <DateInput className={cn('flex flex-1 items-center justify-center px-2', inputClassName)}>\n                {(segment) => (\n                  <DateSegment\n                    segment={segment}\n                    className={cn(\n                      segment.type === 'literal'\n                        ? 'select-none text-neutral-400'\n                        : cn(\n                            'min-w-[1ch] rounded-sm bg-transparent px-0.5 py-px text-center outline-0 transition-colors',\n                            'caret-neutral-900',\n                            'placeholder:text-neutral-300',\n                            'data-focused:bg-neutral-100 data-focused:text-neutral-900',\n                            'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n                          ),\n                    )}\n                  />\n                )}\n              </DateInput>\n              {hasError && (\n                <div>\n                  <WarningCircle\n                    data-testid=\"exclaim-icon\"\n                    className={cn(\n                      'text-error-500 transition-opacity duration-150',\n                      showClearIcon ? 'opacity-0' : 'opacity-100',\n                    )}\n                    size={18}\n                  />\n                </div>\n              )}\n              {onClear && !disabled && (\n                <div\n                  className={cn(\n                    'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n                    hasError\n                      ? 'bg-transparent'\n                      : 'bg-linear-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150',\n                    showClearIcon ? 'opacity-100' : 'opacity-0',\n                  )}\n                >\n                  <X\n                    data-testid=\"clear-button\"\n                    className={cn(\n                      'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n                      showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n                    )}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      handleClear()\n                    }}\n                  />\n                </div>\n              )}\n            </Group>\n          </DateField>\n        </div>\n        {resolvedErrorMessage && <span className=\"text-error-500 text-sm\">{resolvedErrorMessage}</span>}\n      </div>\n    )\n\n    return locale ? <I18nProvider locale={locale}>{inner}</I18nProvider> : inner\n  },\n)\n\nInputDate.displayName = 'InputDate'\n\nexport { InputDate }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputDate.js","sources":["../../../src/components/InputDate/InputDate.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { I18nProvider } from 'react-aria'\nimport * as React from 'react'\nimport {\n  DateField,\n  DateInput,\n  DateSegment,\n  Group,\n  type DateValue,\n} from 'react-aria-components'\nimport { cn } from '@/lib/utils'\n\nexport type InputDateProps = {\n  className?: string\n  disabled?: boolean\n  error?: boolean | string\n  errorMessage?: string\n  inputClassName?: string\n  locale?: string\n  onClear?: boolean | (() => void)\n  value?: DateValue | null\n  onChange?: (date: DateValue | null) => void\n} & Omit<React.ComponentPropsWithoutRef<typeof DateField<DateValue>>, 'value' | 'onChange'>\n\nconst InputDate = React.forwardRef<HTMLDivElement, InputDateProps>(\n  (\n    {\n      className,\n      disabled,\n      error,\n      errorMessage,\n      value: controlledValue,\n      onChange: controlledOnChange,\n      inputClassName,\n      onClear = true,\n      locale,\n      ...props\n    },\n    ref,\n  ) => {\n    const [dateValue, setDateValue] = React.useState<DateValue | null>(() => controlledValue ?? null)\n    const [isHovered, setIsHovered] = React.useState(false)\n    const internalChange = React.useRef(false)\n\n    React.useEffect(() => {\n      if (internalChange.current) {\n        internalChange.current = false\n        return\n      }\n      setDateValue(controlledValue ?? null)\n    }, [controlledValue])\n\n    const handleRacChange = (date: DateValue | null) => {\n      internalChange.current = true\n      setDateValue(date)\n      controlledOnChange?.(date)\n    }\n\n    const handleClear = () => {\n      internalChange.current = true\n      setDateValue(null)\n      controlledOnChange?.(null)\n      if (typeof onClear === 'function') onClear()\n    }\n\n    const hasValue = dateValue !== null\n    const showClearIcon = Boolean(onClear && hasValue && isHovered && !disabled)\n    const resolvedErrorMessage = typeof error === 'string' ? error : errorMessage\n    const hasError = Boolean(error ?? resolvedErrorMessage)\n\n    const inner = (\n      <div className=\"flex w-full flex-col gap-1\">\n        <div className=\"flex w-full items-center\">\n          <DateField\n            ref={ref}\n            value={dateValue}\n            onChange={handleRacChange}\n            isDisabled={disabled}\n            isInvalid={hasError}\n            granularity=\"day\"\n            className=\"w-full\"\n            {...props}\n          >\n            <Group\n              data-testid=\"input-date-mask-control\"\n              className={cn(\n                'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n                disabled && 'bg-neutral-50',\n                hasError && 'border-error-400 focus-within:border-error-700',\n                className,\n              )}\n              onMouseEnter={() => setIsHovered(true)}\n              onMouseLeave={() => setIsHovered(false)}\n            >\n              <CalendarBlank size={20} />\n              <DateInput className={cn('flex flex-1 items-center justify-center px-2', inputClassName)}>\n                {(segment) => (\n                  <DateSegment\n                    segment={segment}\n                    className={cn(\n                      segment.type === 'literal'\n                        ? 'select-none text-neutral-400'\n                        : cn(\n                            'min-w-[1ch] rounded-sm bg-transparent px-0.5 py-px text-center outline-0 transition-colors',\n                            'caret-neutral-900',\n                            'data-placeholder:text-neutral-300',\n                            'data-focused:bg-neutral-100 data-focused:text-neutral-900',\n                            'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n                          ),\n                    )}\n                  />\n                )}\n              </DateInput>\n              {hasError && (\n                <div>\n                  <WarningCircle\n                    data-testid=\"exclaim-icon\"\n                    className={cn(\n                      'text-error-500 transition-opacity duration-150',\n                      showClearIcon ? 'opacity-0' : 'opacity-100',\n                    )}\n                    size={18}\n                  />\n                </div>\n              )}\n              {onClear && !disabled && (\n                <div\n                  className={cn(\n                    'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n                    hasError\n                      ? 'bg-transparent'\n                      : 'bg-linear-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150',\n                    showClearIcon ? 'opacity-100' : 'opacity-0',\n                  )}\n                >\n                  <X\n                    data-testid=\"clear-button\"\n                    className={cn(\n                      'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n                      showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n                    )}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      handleClear()\n                    }}\n                  />\n                </div>\n              )}\n            </Group>\n          </DateField>\n        </div>\n        {resolvedErrorMessage && <span className=\"text-error-500 text-sm\">{resolvedErrorMessage}</span>}\n      </div>\n    )\n\n    return locale ? <I18nProvider locale={locale}>{inner}</I18nProvider> : inner\n  },\n)\n\nInputDate.displayName = 'InputDate'\n\nexport { InputDate }\n"],"names":[],"mappings":"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"}

package/dist/components/Sidebar/Sidebar.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { List } from '@phosphor-icons/react/dist/ssr/List';
 import { SidebarSimple } from '@phosphor-icons/react/dist/ssr/SidebarSimple';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -174,7 +175,7 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
 SidebarRoot.displayName = "SidebarRoot";
 const SidebarTrigger = React.forwardRef(
   ({ className, onClick, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
+    const { isMobile, toggleSidebar } = useSidebar();
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -187,7 +188,7 @@ const SidebarTrigger = React.forwardRef(
           toggleSidebar();
         },
         ...props,
-        StartIcon: SidebarSimple,
+        StartIcon: isMobile ? List : SidebarSimple,
         children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       }
     );

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { SidebarSimple as SidebarIcon } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport type SidebarSize = 'small' | 'medium' | 'big'\n\nconst SIDEBAR_WIDTH_ICON: Record<SidebarSize, string> = {\n  small: '3rem',\n  medium: '3.5rem',\n  big: '4rem',\n}\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n  size: SidebarSize\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    size?: SidebarSize\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      size = 'small',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open],\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = React.useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        size,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON[size],\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-left-(--sidebar-width)',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-right-(--sidebar-width)',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={SidebarIcon}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',\n          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SIDEBAR_INPUT_HEIGHT: Record<SidebarSize, string> = {\n  small: 'h-8',\n  medium: 'h-10',\n  big: 'h-12',\n}\n\nconst SidebarInput = React.forwardRef<\n  React.ComponentRef<typeof Input>,\n  React.ComponentProps<typeof Input> & { size?: SidebarSize }\n>(({ className, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        'bg-background focus-visible:ring-sidebar-ring w-full shadow-none focus-visible:ring-2',\n        SIDEBAR_INPUT_HEIGHT[resolvedSize],\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst sidebarGroupLabelVariants = cva(\n  'text-sidebar-foreground/70 ring-sidebar-ring flex shrink-0 items-center rounded-md transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0 group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n  {\n    variants: {\n      size: {\n        small:\n          'h-8 px-2 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        medium:\n          'h-9 px-2.5 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-9 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        big: 'h-10 px-3 [&>svg]:size-5 group-data-[state=collapsed]:group-data-[variant=default]:-mt-10 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SIDEBAR_GROUP_LABEL_TEXT_VARIANT: Record<SidebarSize, 'label-md' | 'label-lg'> = {\n  small: 'label-md',\n  medium: 'label-md',\n  big: 'label-lg',\n}\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(sidebarGroupLabelVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <Typography variant={SIDEBAR_GROUP_LABEL_TEXT_VARIANT[resolvedSize]} color=\"secondary\">\n          {children}\n        </Typography>\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst sidebarGroupActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-3.5 right-3 w-5 [&>svg]:size-4',\n        medium: 'top-4 right-3 w-5 [&>svg]:size-4',\n        big: 'top-4 right-3 w-6 [&>svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(sidebarGroupActionVariants({ size: resolvedSize }), className)}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        'navigation-item': '',\n        element: 'group-data-[state=collapsed]:!p-0',\n      },\n      size: {\n        small: 'h-8 gap-2 p-2 [&>svg]:size-4',\n        medium: 'h-10 gap-3 p-2.5 [&>svg]:size-5',\n        big: 'h-12 gap-4 p-3 [&>svg]:size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'navigation-item',\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n    size?: SidebarSize\n  }\n>(\n  (\n    { asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', size, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state, size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <TooltipRoot>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </TooltipRoot>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst sidebarMenuActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 w-5 [&>svg]:size-4',\n        medium: 'top-2.5 right-1 w-5 [&>svg]:size-4',\n        big: 'top-3 right-1.5 w-6 [&>svg]:size-5',\n      },\n      showOnHover: {\n        true: 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n      showOnHover: false,\n    },\n  },\n)\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n    size?: SidebarSize\n  }\n>(({ className, asChild = false, showOnHover = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(sidebarMenuActionVariants({ size: resolvedSize, showOnHover }), className)}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst sidebarMenuBadgeVariants = cva(\n  'text-sidebar-foreground pointer-events-none absolute flex items-center justify-center rounded-md font-medium tabular-nums select-none peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[state=collapsed]:group-data-[variant=hidden]:hidden group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 h-5 min-w-5 px-1 text-xs',\n        medium: 'top-2.5 right-1 h-5 min-w-5 px-1 text-xs',\n        big: 'top-3 right-1.5 h-6 min-w-6 px-1.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"menu-badge\"\n        className={cn(sidebarMenuBadgeVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SIDEBAR_MENU_SKELETON: Record<SidebarSize, { row: string; icon: string; text: string }> = {\n  small: { row: 'h-8 gap-2 px-2', icon: 'size-4', text: 'h-4' },\n  medium: { row: 'h-10 gap-3 px-2.5', icon: 'size-5', text: 'h-4' },\n  big: { row: 'h-12 gap-4 px-3', icon: 'size-6', text: 'h-5' },\n}\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n    size?: SidebarSize\n  }\n>(({ className, showIcon = false, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n  const dims = SIDEBAR_MENU_SKELETON[resolvedSize]\n\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex items-center rounded-md', dims.row, className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className={cn('rounded-md', dims.icon)} data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className={cn('max-w-(--skeleton-width) flex-1', dims.text)}\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst sidebarMenuSubVariants = cva(\n  'border-sidebar-border flex min-w-0 flex-col gap-1 border-l py-0.5 group-data-[state=collapsed]:hidden',\n  {\n    variants: {\n      size: {\n        small: 'ml-[15px] pl-2.5',\n        medium: 'ml-[19px] pl-2.5',\n        big: 'ml-[23px] pl-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <ul\n        ref={ref}\n        data-sidebar=\"menu-sub\"\n        className={cn(sidebarMenuSubVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst sidebarMenuSubButtonVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[state=collapsed]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'h-8 px-2',\n        medium: 'h-10 px-2.5',\n        big: 'h-12 px-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n    size?: SidebarSize\n  }\n>(({ asChild = false, isActive, className, children, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  sidebarGroupActionVariants,\n  sidebarGroupLabelVariants,\n  sidebarMenuActionVariants,\n  sidebarMenuBadgeVariants,\n  sidebarMenuButtonVariants,\n  sidebarMenuSubButtonVariants,\n  sidebarMenuSubVariants,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AAIA;AAAwD;AAC/C;AACC;AAEV;AAaA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAA8B;AAU1B;AACgB;AACR;AACQ;AACP;AACP;AACA;AACA;AACG;AAIL;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAC+E;AAGjF;AAGM;AAAC;AAAA;AAEG;AACqB;AAC4B;AAC5C;AACL;AAEwG;AAC1G;AACI;AAEH;AAAA;AAGP;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA0D;AACjD;AACC;AAEV;AAEA;AAIE;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACiC;AACjC;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AAEF;AAEA;AACG;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAAuF;AAC9E;AACC;AAEV;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC6D;AACtE;AAOF;AAAA;AAIR;AACA;AAEA;AAAmC;AACjC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC8D;AACvE;AAAA;AAGV;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACM;AACG;AACC;AACH;AACP;AACF;AACiB;AACN;AACH;AACR;AAEJ;AAEA;AAAgC;AAc5B;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACsE;AAC/E;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AACtG;AAGN;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACa;AACL;AACC;AACT;AACF;AACiB;AACT;AACO;AACf;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0E;AACnF;AAAA;AAGV;AACA;AAEA;AAAiC;AAC/B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA+B;AAE3B;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC4D;AACrE;AAAA;AACN;AAGN;AACA;AAEA;AAAgG;AAClC;AACI;AAElE;AAEA;AAOE;AACA;AACA;AAGA;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACoD;AAC7D;AAEH;AAAgG;AACjG;AAAC;AAAA;AAC2D;AAC7C;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA+B;AAC7B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA6B;AAEzB;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0D;AACnE;AAAA;AACN;AAGN;AACA;AAEA;AAGA;AAEA;AAAqC;AACnC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACgE;AACzE;AAEoF;AAAA;AAG9F;AACA;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { List } from '@phosphor-icons/react/dist/ssr/List'\nimport { SidebarSimple } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport type SidebarSize = 'small' | 'medium' | 'big'\n\nconst SIDEBAR_WIDTH_ICON: Record<SidebarSize, string> = {\n  small: '3rem',\n  medium: '3.5rem',\n  big: '4rem',\n}\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n  size: SidebarSize\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    size?: SidebarSize\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      size = 'small',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open],\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = React.useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        size,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON[size],\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-left-(--sidebar-width)',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-right-(--sidebar-width)',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { isMobile, toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={isMobile ? List : SidebarSimple}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',\n          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SIDEBAR_INPUT_HEIGHT: Record<SidebarSize, string> = {\n  small: 'h-8',\n  medium: 'h-10',\n  big: 'h-12',\n}\n\nconst SidebarInput = React.forwardRef<\n  React.ComponentRef<typeof Input>,\n  React.ComponentProps<typeof Input> & { size?: SidebarSize }\n>(({ className, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        'bg-background focus-visible:ring-sidebar-ring w-full shadow-none focus-visible:ring-2',\n        SIDEBAR_INPUT_HEIGHT[resolvedSize],\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst sidebarGroupLabelVariants = cva(\n  'text-sidebar-foreground/70 ring-sidebar-ring flex shrink-0 items-center rounded-md transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0 group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n  {\n    variants: {\n      size: {\n        small:\n          'h-8 px-2 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        medium:\n          'h-9 px-2.5 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-9 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        big: 'h-10 px-3 [&>svg]:size-5 group-data-[state=collapsed]:group-data-[variant=default]:-mt-10 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SIDEBAR_GROUP_LABEL_TEXT_VARIANT: Record<SidebarSize, 'label-md' | 'label-lg'> = {\n  small: 'label-md',\n  medium: 'label-md',\n  big: 'label-lg',\n}\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(sidebarGroupLabelVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <Typography variant={SIDEBAR_GROUP_LABEL_TEXT_VARIANT[resolvedSize]} color=\"secondary\">\n          {children}\n        </Typography>\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst sidebarGroupActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-3.5 right-3 w-5 [&>svg]:size-4',\n        medium: 'top-4 right-3 w-5 [&>svg]:size-4',\n        big: 'top-4 right-3 w-6 [&>svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(sidebarGroupActionVariants({ size: resolvedSize }), className)}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        'navigation-item': '',\n        element: 'group-data-[state=collapsed]:!p-0',\n      },\n      size: {\n        small: 'h-8 gap-2 p-2 [&>svg]:size-4',\n        medium: 'h-10 gap-3 p-2.5 [&>svg]:size-5',\n        big: 'h-12 gap-4 p-3 [&>svg]:size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'navigation-item',\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n    size?: SidebarSize\n  }\n>(\n  (\n    { asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', size, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state, size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <TooltipRoot>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </TooltipRoot>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst sidebarMenuActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 w-5 [&>svg]:size-4',\n        medium: 'top-2.5 right-1 w-5 [&>svg]:size-4',\n        big: 'top-3 right-1.5 w-6 [&>svg]:size-5',\n      },\n      showOnHover: {\n        true: 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n      showOnHover: false,\n    },\n  },\n)\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n    size?: SidebarSize\n  }\n>(({ className, asChild = false, showOnHover = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(sidebarMenuActionVariants({ size: resolvedSize, showOnHover }), className)}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst sidebarMenuBadgeVariants = cva(\n  'text-sidebar-foreground pointer-events-none absolute flex items-center justify-center rounded-md font-medium tabular-nums select-none peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[state=collapsed]:group-data-[variant=hidden]:hidden group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 h-5 min-w-5 px-1 text-xs',\n        medium: 'top-2.5 right-1 h-5 min-w-5 px-1 text-xs',\n        big: 'top-3 right-1.5 h-6 min-w-6 px-1.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"menu-badge\"\n        className={cn(sidebarMenuBadgeVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SIDEBAR_MENU_SKELETON: Record<SidebarSize, { row: string; icon: string; text: string }> = {\n  small: { row: 'h-8 gap-2 px-2', icon: 'size-4', text: 'h-4' },\n  medium: { row: 'h-10 gap-3 px-2.5', icon: 'size-5', text: 'h-4' },\n  big: { row: 'h-12 gap-4 px-3', icon: 'size-6', text: 'h-5' },\n}\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n    size?: SidebarSize\n  }\n>(({ className, showIcon = false, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n  const dims = SIDEBAR_MENU_SKELETON[resolvedSize]\n\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex items-center rounded-md', dims.row, className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className={cn('rounded-md', dims.icon)} data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className={cn('max-w-(--skeleton-width) flex-1', dims.text)}\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst sidebarMenuSubVariants = cva(\n  'border-sidebar-border flex min-w-0 flex-col gap-1 border-l py-0.5 group-data-[state=collapsed]:hidden',\n  {\n    variants: {\n      size: {\n        small: 'ml-[15px] pl-2.5',\n        medium: 'ml-[19px] pl-2.5',\n        big: 'ml-[23px] pl-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <ul\n        ref={ref}\n        data-sidebar=\"menu-sub\"\n        className={cn(sidebarMenuSubVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst sidebarMenuSubButtonVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[state=collapsed]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'h-8 px-2',\n        medium: 'h-10 px-2.5',\n        big: 'h-12 px-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n    size?: SidebarSize\n  }\n>(({ asChild = false, isActive, className, children, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  sidebarGroupActionVariants,\n  sidebarGroupLabelVariants,\n  sidebarMenuActionVariants,\n  sidebarMenuBadgeVariants,\n  sidebarMenuButtonVariants,\n  sidebarMenuSubButtonVariants,\n  sidebarMenuSubVariants,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmBA;AACA;AACA;AACA;AACA;AAIA;AAAwD;AAC/C;AACC;AAEV;AAaA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAA8B;AAU1B;AACgB;AACR;AACQ;AACP;AACP;AACA;AACA;AACG;AAIL;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAC+E;AAGjF;AAGM;AAAC;AAAA;AAEG;AACqB;AAC4B;AAC5C;AACL;AAEwG;AAC1G;AACI;AAEH;AAAA;AAGP;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACyB;AAEW;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA0D;AACjD;AACC;AAEV;AAEA;AAIE;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACiC;AACjC;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AAEF;AAEA;AACG;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAAuF;AAC9E;AACC;AAEV;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC6D;AACtE;AAOF;AAAA;AAIR;AACA;AAEA;AAAmC;AACjC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC8D;AACvE;AAAA;AAGV;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACM;AACG;AACC;AACH;AACP;AACF;AACiB;AACN;AACH;AACR;AAEJ;AAEA;AAAgC;AAc5B;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACsE;AAC/E;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AACtG;AAGN;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACa;AACL;AACC;AACT;AACF;AACiB;AACT;AACO;AACf;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0E;AACnF;AAAA;AAGV;AACA;AAEA;AAAiC;AAC/B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA+B;AAE3B;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC4D;AACrE;AAAA;AACN;AAGN;AACA;AAEA;AAAgG;AAClC;AACI;AAElE;AAEA;AAOE;AACA;AACA;AAGA;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACoD;AAC7D;AAEH;AAAgG;AACjG;AAAC;AAAA;AAC2D;AAC7C;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA+B;AAC7B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA6B;AAEzB;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0D;AACnE;AAAA;AACN;AAGN;AACA;AAEA;AAGA;AAEA;AAAqC;AACnC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACgE;AACzE;AAEoF;AAAA;AAG9F;AACA;;"}

package/dist/lib/utils.d.ts

@@ -3,3 +3,5 @@ export declare function cn(...inputs: Array<ClassValue>): string;
 export declare const COLOR_TOKENS: readonly ["primary", "accent", "success", "warning", "error", "information"];
 export type ColorToken = (typeof COLOR_TOKENS)[number];
 export declare function resolveColor(color: string | undefined, fallback?: string): string;
+/** Lowercases and strips diacritics so accent-insensitive comparisons can be made (e.g. "país" matches "pais"). */
+export declare function normalizeForSearch(value: string): string;

package/dist/lib/utils.js

@@ -10,6 +10,9 @@ function resolveColor(color, fallback = "primary") {
   if (COLOR_TOKENS.includes(value)) return `var(--color-${value})`;
   return value;
 }
+function normalizeForSearch(value) {
+  return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
 
-export { COLOR_TOKENS, cn, resolveColor };
+export { COLOR_TOKENS, cn, normalizeForSearch, resolveColor };
 //# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: Array<ClassValue>) {\n  return twMerge(clsx(inputs))\n}\n\nexport const COLOR_TOKENS = ['primary', 'accent', 'success', 'warning', 'error', 'information'] as const\nexport type ColorToken = (typeof COLOR_TOKENS)[number]\n\nexport function resolveColor(color: string | undefined, fallback = 'primary'): string {\n  const value = color ?? fallback\n  if (COLOR_TOKENS.includes(value as ColorToken)) return `var(--color-${value})`\n  return value\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,MAAM,MAAA,EAA2B;AAC/C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAEO,MAAM,eAAe,CAAC,SAAA,EAAW,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,aAAa;AAGvF,SAAS,YAAA,CAAa,KAAA,EAA2B,QAAA,GAAW,SAAA,EAAmB;AACpF,EAAA,MAAM,QAAQ,KAAA,IAAS,QAAA;AACvB,EAAA,IAAI,aAAa,QAAA,CAAS,KAAmB,CAAA,EAAG,OAAO,eAAe,KAAK,CAAA,CAAA,CAAA;AAC3E,EAAA,OAAO,KAAA;AACT;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: Array<ClassValue>) {\n  return twMerge(clsx(inputs))\n}\n\nexport const COLOR_TOKENS = ['primary', 'accent', 'success', 'warning', 'error', 'information'] as const\nexport type ColorToken = (typeof COLOR_TOKENS)[number]\n\nexport function resolveColor(color: string | undefined, fallback = 'primary'): string {\n  const value = color ?? fallback\n  if (COLOR_TOKENS.includes(value as ColorToken)) return `var(--color-${value})`\n  return value\n}\n\n/** Lowercases and strips diacritics so accent-insensitive comparisons can be made (e.g. \"país\" matches \"pais\"). */\nexport function normalizeForSearch(value: string): string {\n  return value\n    .normalize('NFD')\n    .replace(/\\p{Diacritic}/gu, '')\n    .toLowerCase()\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,MAAM,MAAA,EAA2B;AAC/C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAEO,MAAM,eAAe,CAAC,SAAA,EAAW,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,aAAa;AAGvF,SAAS,YAAA,CAAa,KAAA,EAA2B,QAAA,GAAW,SAAA,EAAmB;AACpF,EAAA,MAAM,QAAQ,KAAA,IAAS,QAAA;AACvB,EAAA,IAAI,aAAa,QAAA,CAAS,KAAmB,CAAA,EAAG,OAAO,eAAe,KAAK,CAAA,CAAA,CAAA;AAC3E,EAAA,OAAO,KAAA;AACT;AAGO,SAAS,mBAAmB,KAAA,EAAuB;AACxD,EAAA,OAAO,KAAA,CACJ,UAAU,KAAK,CAAA,CACf,QAAQ,iBAAA,EAAmB,EAAE,EAC7B,WAAA,EAAY;AACjB;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.8.1",
+  "version": "4.9.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",