@jbpark/ui-kit 10.0.2 → 10.2.0

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs

@@ -10,7 +10,7 @@ import { TextStyleKit } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/components/atoms/rich-text-editor/rich-text-editor.tsx
-const RichTextEditor = ({ value = "", placeholder = "Enter text...", className, classNames, toolbar = false, toolbarItems, onChange }) => {
+const RichTextEditor = ({ value = "", placeholder = "Enter text...", className, classNames, toolbar = false, toolbarItems, onUpdate, onCommit, onChange }) => {
 	const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];
 	const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;
 	const editor = useEditor({
@@ -25,8 +25,13 @@ const RichTextEditor = ({ value = "", placeholder = "Enter text...", className,
 			})
 		],
 		content: value,
+		onUpdate: ({ editor: e }) => {
+			onUpdate?.(e.getHTML());
+		},
 		onBlur: ({ editor: e }) => {
-			onChange?.(e.getHTML());
+			const html = e.getHTML();
+			onCommit?.(html);
+			onChange?.(html);
 		},
 		shouldRerenderOnTransaction: showToolbar
 	});

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TextStyleKit } from '@tiptap/extension-text-style';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RICH_TEXT_CONTENT_CLASSES } from './content-classes';\nimport Toolbar from './toolbar';\nimport { DEFAULT_TOOLBAR_PRESETS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface Props {\n  value?: string;\n  placeholder?: string;\n  className?: string;\n  classNames?: {\n    toolbar?: string;\n    content?: string;\n  };\n  /**\n   * `true` shows every built-in preset; an array shows only the listed\n   * presets, in the given order. Omitted or `false` renders no toolbar,\n   * matching the original (toolbar-less) output.\n   */\n  toolbar?: boolean | ToolbarPreset[];\n  /** Extra buttons appended after the built-in presets. */\n  toolbarItems?: ToolbarItem[];\n  onChange?: (value: string) => void;\n}\n\nconst RichTextEditor = ({\n  value = '',\n  placeholder = 'Enter text...',\n  className,\n  classNames,\n  toolbar = false,\n  toolbarItems,\n  onChange,\n}: Props) => {\n  const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];\n  const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;\n\n  const editor = useEditor({\n    // SSR renders every exported component without effects running, so the\n    // editor must not touch the DOM during that first pass — deferring\n    // creation to mount keeps `renderToStaticMarkup` from throwing.\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Placeholder.configure({ placeholder }),\n      TextStyleKit.configure({\n        fontFamily: false,\n        lineHeight: false,\n        backgroundColor: false,\n      }),\n    ],\n    content: value,\n    onBlur: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n    },\n    // @tiptap/react v3 only re-renders on selection/transaction changes when\n    // explicitly opted in — the toolbar's isActive()/getAttributes() reads\n    // need that to reflect the caret position live.\n    shouldRerenderOnTransaction: showToolbar,\n  });\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const current = editor.getHTML();\n\n    if (current !== value) {\n      editor.commands.setContent(value, { emitUpdate: false });\n    }\n  }, [value, editor]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      className={cn(\n        'border-input bg-background text-foreground rounded border text-sm',\n        className,\n        //\n      )}\n    >\n      {showToolbar && editor && (\n        <Toolbar\n          editor={editor}\n          presets={presets}\n          items={toolbarItems}\n          className={classNames?.toolbar}\n        />\n      )}\n      <div\n        data-slot=\"rich-text-editor-content\"\n        className={cn(\n          'min-h-20 px-3 py-2',\n          RICH_TEXT_CONTENT_CLASSES,\n          classNames?.content,\n          //\n        )}\n      >\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,kBAAkB,EACtB,QAAQ,IACR,cAAc,iBACd,WACA,YACA,UAAU,OACV,cACA,eACW;CACX,MAAM,UAAU,YAAY,OAAO,0BAA0B,WAAW,CAAC;CACzE,MAAM,cAAc,QAAQ,SAAS,MAAM,cAAc,UAAU,KAAK;CAExE,MAAM,SAAS,UAAU;EAIvB,mBAAmB;EACnB,YAAY;GACV;GACA,YAAY,UAAU,EAAE,YAAY,CAAC;GACrC,aAAa,UAAU;IACrB,YAAY;IACZ,YAAY;IACZ,iBAAiB;GACnB,CAAC;EACH;EACA,SAAS;EACT,SAAS,EAAE,QAAQ,QAAQ;GACzB,WAAW,EAAE,QAAQ,CAAC;EACxB;EAIA,6BAA6B;CAC/B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,QACH;EAKF,IAFgB,OAAO,QAEb,MAAM,OACd,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CAE3D,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SAEF;EANF,UAAA,CAQG,eAAe,UACd,oBAAC,SAAD;GACU;GACC;GACT,OAAO;GACP,WAAW,YAAY;EACxB,CAAA,GAEH,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sBACA,2BACA,YAAY,OAEd;GAEA,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;EAC7B,CAAA,CACF;;AAET"}
+{"version":3,"file":"rich-text-editor.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TextStyleKit } from '@tiptap/extension-text-style';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RICH_TEXT_CONTENT_CLASSES } from './content-classes';\nimport Toolbar from './toolbar';\nimport { DEFAULT_TOOLBAR_PRESETS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface Props {\n  value?: string;\n  placeholder?: string;\n  className?: string;\n  classNames?: {\n    toolbar?: string;\n    content?: string;\n  };\n  /**\n   * `true` shows every built-in preset; an array shows only the listed\n   * presets, in the given order. Omitted or `false` renders no toolbar,\n   * matching the original (toolbar-less) output.\n   */\n  toolbar?: boolean | ToolbarPreset[];\n  /** Extra buttons appended after the built-in presets. */\n  toolbarItems?: ToolbarItem[];\n  /** Called after each document edit with the current HTML. */\n  onUpdate?: (value: string) => void;\n  /** Called when the editor loses focus with the current HTML. */\n  onCommit?: (value: string) => void;\n  /** @deprecated Use `onCommit` for the existing blur-only behavior. */\n  onChange?: (value: string) => void;\n}\n\nconst RichTextEditor = ({\n  value = '',\n  placeholder = 'Enter text...',\n  className,\n  classNames,\n  toolbar = false,\n  toolbarItems,\n  onUpdate,\n  onCommit,\n  onChange,\n}: Props) => {\n  const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];\n  const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;\n\n  const editor = useEditor({\n    // SSR renders every exported component without effects running, so the\n    // editor must not touch the DOM during that first pass — deferring\n    // creation to mount keeps `renderToStaticMarkup` from throwing.\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Placeholder.configure({ placeholder }),\n      TextStyleKit.configure({\n        fontFamily: false,\n        lineHeight: false,\n        backgroundColor: false,\n      }),\n    ],\n    content: value,\n    onUpdate: ({ editor: e }) => {\n      onUpdate?.(e.getHTML());\n    },\n    onBlur: ({ editor: e }) => {\n      const html = e.getHTML();\n\n      onCommit?.(html);\n      onChange?.(html);\n    },\n    // @tiptap/react v3 only re-renders on selection/transaction changes when\n    // explicitly opted in — the toolbar's isActive()/getAttributes() reads\n    // need that to reflect the caret position live.\n    shouldRerenderOnTransaction: showToolbar,\n  });\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const current = editor.getHTML();\n\n    if (current !== value) {\n      editor.commands.setContent(value, { emitUpdate: false });\n    }\n  }, [value, editor]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      className={cn(\n        'border-input bg-background text-foreground rounded border text-sm',\n        className,\n        //\n      )}\n    >\n      {showToolbar && editor && (\n        <Toolbar\n          editor={editor}\n          presets={presets}\n          items={toolbarItems}\n          className={classNames?.toolbar}\n        />\n      )}\n      <div\n        data-slot=\"rich-text-editor-content\"\n        className={cn(\n          'min-h-20 px-3 py-2',\n          RICH_TEXT_CONTENT_CLASSES,\n          classNames?.content,\n          //\n        )}\n      >\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;AAwCA,MAAM,kBAAkB,EACtB,QAAQ,IACR,cAAc,iBACd,WACA,YACA,UAAU,OACV,cACA,UACA,UACA,eACW;CACX,MAAM,UAAU,YAAY,OAAO,0BAA0B,WAAW,CAAC;CACzE,MAAM,cAAc,QAAQ,SAAS,MAAM,cAAc,UAAU,KAAK;CAExE,MAAM,SAAS,UAAU;EAIvB,mBAAmB;EACnB,YAAY;GACV;GACA,YAAY,UAAU,EAAE,YAAY,CAAC;GACrC,aAAa,UAAU;IACrB,YAAY;IACZ,YAAY;IACZ,iBAAiB;GACnB,CAAC;EACH;EACA,SAAS;EACT,WAAW,EAAE,QAAQ,QAAQ;GAC3B,WAAW,EAAE,QAAQ,CAAC;EACxB;EACA,SAAS,EAAE,QAAQ,QAAQ;GACzB,MAAM,OAAO,EAAE,QAAQ;GAEvB,WAAW,IAAI;GACf,WAAW,IAAI;EACjB;EAIA,6BAA6B;CAC/B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,QACH;EAKF,IAFgB,OAAO,QAEb,MAAM,OACd,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CAE3D,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SAEF;EANF,UAAA,CAQG,eAAe,UACd,oBAAC,SAAD;GACU;GACC;GACT,OAAO;GACP,WAAW,YAAY;EACxB,CAAA,GAEH,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sBACA,2BACA,YAAY,OAEd;GAEA,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;EAC7B,CAAA,CACF;;AAET"}

package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs

@@ -5,8 +5,8 @@ import ColorPicker from "../color-picker.mjs";
 import Input from "../input/index.mjs";
 import ToolbarButton from "./toolbar-button.mjs";
 import Select from "../select.mjs";
-import { useState } from "react";
 import { Bold, Code, Code2, Italic, Link, List, ListOrdered, Minus, Quote, Redo2, Strikethrough, Underline, Undo2 } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/rich-text-editor/toolbar-presets.tsx
 const FONT_SIZE_OPTIONS = [

package/dist/components/atoms/select-multiple.d.mts

@@ -0,0 +1,29 @@
+import { RootProps } from "../../core/combobox.mjs";
+import "../../core/index.mjs";
+import { ClassNames, Option, OptionGroup } from "./select-searchable-options.mjs";
+import { ReactNode } from "react";
+//#region src/components/atoms/select-multiple.d.ts
+interface Props extends Omit<RootProps<string, Option, true>, 'children' | 'items' | 'filteredItems' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue'> {
+  searchable: true;
+  multiple: true;
+  /** Accessible name for the multi-select input. */
+  label: string;
+  options: (Option | OptionGroup)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: ReactNode;
+  allowClear?: boolean;
+  /** Instructions announced when a selected chip receives focus. */
+  chipDescription?: string;
+  /** Instructions announced on the input when chips are selected. */
+  inputDescription?: (selectedCount: number) => string;
+  className?: string;
+  classNames?: ClassNames & {
+    chips?: string;
+    chip?: string;
+  };
+  onChange?: (values: string[]) => void;
+}
+//#endregion
+export { Props };
+//# sourceMappingURL=select-multiple.d.mts.map

package/dist/components/atoms/select-multiple.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple.d.mts","names":[],"sources":["../../../src/components/atoms/select-multiple.tsx"],"mappings":";;;;;UAgCiB,cAAc,KAC7B,kBAA2B;EAS3B;EACA;;EAEA;EACA,UAAU,SAAS;EACnB;EACA;EACA,YAAY;EACZ;;EAEA;;EAEA,oBAAoB;EACpB;EACA,aAAa;IACX;IACA;;EAEF,YAAY"}

package/dist/components/atoms/select-multiple.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { cn } from "../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
+import { combobox_exports } from "../../core/combobox.mjs";
+import { selectTriggerStyles } from "../../core/select.mjs";
+import Button from "../../Button.mjs";
+import Input from "./input/index.mjs";
+import SearchableOptions, { useSelectItems } from "./select-searchable-options.mjs";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/select-multiple.tsx
+const { Combobox: Core, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxInput, ComboboxInputGroup, ComboboxTrigger, ComboboxValue } = combobox_exports;
+const MultipleSelect = ({ label, options, placeholder = "Select options", searchPlaceholder = "Search...", emptyText = "No results found.", allowClear = true, chipDescription = "Press Backspace or Delete to remove", inputDescription = (count) => `${count} selected. From the start of the input, press Left Arrow to focus selected options`, className, classNames, onChange, onOpenChange, searchable: _searchable, multiple, ...props }) => {
+	const { locale } = useConfig();
+	const items = useSelectItems(options);
+	const labels = useMemo(() => {
+		const result = /* @__PURE__ */ new Map();
+		options.forEach((option) => {
+			if ("options" in option) option.options.forEach((item) => result.set(item.value, item.label));
+			else result.set(option.value, option.label);
+		});
+		return result;
+	}, [options]);
+	return /* @__PURE__ */ jsxs(Core, {
+		items,
+		multiple,
+		onValueChange: (values) => onChange?.(values),
+		onOpenChange: (open, details) => {
+			if (!open && details.reason === "item-press") details.cancel();
+			onOpenChange?.(open, details);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs(ComboboxInputGroup, {
+			"data-slot": "select-multiple-input-group",
+			className: cn(selectTriggerStyles, "h-auto min-h-9 w-full max-w-64 flex-wrap gap-1 py-1", className),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxValue, { children: (values) => /* @__PURE__ */ jsxs(ComboboxChips, {
+					"aria-label": values.length > 0 ? `${label} selected options` : void 0,
+					className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-1", classNames?.chips),
+					children: [values.map((value) => {
+						const name = labels.get(value) ?? value;
+						return /* @__PURE__ */ jsxs(ComboboxChip, {
+							"data-slot": "select-chip",
+							"aria-label": name,
+							"aria-description": chipDescription,
+							className: cn(`bg-accent text-accent-foreground flex min-w-0
+                      items-center gap-1 rounded-sm ps-2 pe-1 text-xs
+                      outline-none`, "focus-visible:ring-ring/50 focus-visible:ring-[3px]", classNames?.chip),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "max-w-40 truncate",
+								children: name
+							}), /* @__PURE__ */ jsx(ComboboxChipRemove, {
+								"data-slot": "select-chip-remove",
+								"aria-label": `${locale.clear ?? DEFAULT_LOCALE.clear} ${name}`,
+								className: "hover:bg-background/70 flex size-5 shrink-0\n                        items-center justify-center rounded-sm",
+								children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+							})]
+						}, value);
+					}), /* @__PURE__ */ jsx(ComboboxInput, { render: /* @__PURE__ */ jsx(Input, {
+						"aria-label": label,
+						"aria-description": values.length > 0 ? inputDescription(values.length) : void 0,
+						placeholder: values.length > 0 ? searchPlaceholder : placeholder,
+						className: cn(`h-6 min-w-16 flex-1 border-0 bg-transparent px-0 py-0
+                      shadow-none focus-visible:border-0 focus-visible:ring-0`, classNames?.input)
+					}) })]
+				}) }),
+				allowClear && /* @__PURE__ */ jsx(ComboboxClear, {
+					"data-slot": "select-multiple-clear",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "icon-sm",
+						icon: /* @__PURE__ */ jsx(XIcon, {}),
+						"aria-label": locale.clear ?? DEFAULT_LOCALE.clear
+					})
+				}),
+				/* @__PURE__ */ jsx(ComboboxTrigger, { render: /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: "icon-sm",
+					icon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+					"aria-label": locale.expand ?? DEFAULT_LOCALE.expand
+				}) })
+			]
+		}), /* @__PURE__ */ jsx(ComboboxContent, {
+			"aria-label": label,
+			className: classNames?.content,
+			children: /* @__PURE__ */ jsx(SearchableOptions, {
+				emptyText,
+				classNames
+			})
+		})]
+	});
+};
+//#endregion
+export { MultipleSelect as default };
+
+//# sourceMappingURL=select-multiple.mjs.map

package/dist/components/atoms/select-multiple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple.mjs","names":["combobox","select.selectTriggerStyles"],"sources":["../../../src/components/atoms/select-multiple.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useMemo } from 'react';\n\nimport { ChevronDownIcon, XIcon } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { combobox, select } from '../../core';\nimport Button from './button';\nimport Input from './input';\nimport SearchableOptions, {\n  type ClassNames,\n  type Option,\n  type OptionGroup,\n  useSelectItems,\n} from './select-searchable-options';\n\nconst {\n  Combobox: Core,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxChips,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxTrigger,\n  ComboboxValue,\n} = combobox;\n\nexport interface Props extends Omit<\n  combobox.RootProps<string, Option, true>,\n  | 'children'\n  | 'items'\n  | 'filteredItems'\n  | 'onValueChange'\n  | 'itemToStringLabel'\n  | 'itemToStringValue'\n  | 'isItemEqualToValue'\n> {\n  searchable: true;\n  multiple: true;\n  /** Accessible name for the multi-select input. */\n  label: string;\n  options: (Option | OptionGroup)[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: ReactNode;\n  allowClear?: boolean;\n  /** Instructions announced when a selected chip receives focus. */\n  chipDescription?: string;\n  /** Instructions announced on the input when chips are selected. */\n  inputDescription?: (selectedCount: number) => string;\n  className?: string;\n  classNames?: ClassNames & {\n    chips?: string;\n    chip?: string;\n  };\n  onChange?: (values: string[]) => void;\n}\n\nconst MultipleSelect = ({\n  label,\n  options,\n  placeholder = 'Select options',\n  searchPlaceholder = 'Search...',\n  emptyText = 'No results found.',\n  allowClear = true,\n  chipDescription = 'Press Backspace or Delete to remove',\n  inputDescription = count =>\n    `${count} selected. From the start of the input, press Left Arrow to focus selected options`,\n  className,\n  classNames,\n  onChange,\n  onOpenChange,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  multiple,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const items = useSelectItems(options);\n  const labels = useMemo(() => {\n    const result = new Map<string, string>();\n\n    options.forEach(option => {\n      if ('options' in option) {\n        option.options.forEach(item => result.set(item.value, item.label));\n      } else {\n        result.set(option.value, option.label);\n      }\n    });\n\n    return result;\n  }, [options]);\n\n  return (\n    <Core\n      items={items}\n      multiple={multiple}\n      onValueChange={values => onChange?.(values)}\n      onOpenChange={(open, details) => {\n        if (!open && details.reason === 'item-press') {\n          details.cancel();\n        }\n\n        onOpenChange?.(open, details);\n      }}\n      {...props}\n    >\n      <ComboboxInputGroup\n        data-slot=\"select-multiple-input-group\"\n        className={cn(\n          select.selectTriggerStyles,\n          'h-auto min-h-9 w-full max-w-64 flex-wrap gap-1 py-1',\n          className,\n        )}\n      >\n        <ComboboxValue>\n          {(values: string[]) => (\n            <ComboboxChips\n              aria-label={\n                values.length > 0 ? `${label} selected options` : undefined\n              }\n              className={cn(\n                'flex min-w-0 flex-1 flex-wrap items-center gap-1',\n                classNames?.chips,\n              )}\n            >\n              {values.map(value => {\n                const name = labels.get(value) ?? value;\n\n                return (\n                  <ComboboxChip\n                    key={value}\n                    data-slot=\"select-chip\"\n                    aria-label={name}\n                    aria-description={chipDescription}\n                    className={cn(\n                      `bg-accent text-accent-foreground flex min-w-0\n                      items-center gap-1 rounded-sm ps-2 pe-1 text-xs\n                      outline-none`,\n                      'focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n                      classNames?.chip,\n                    )}\n                  >\n                    <span className=\"max-w-40 truncate\">{name}</span>\n                    <ComboboxChipRemove\n                      data-slot=\"select-chip-remove\"\n                      aria-label={`${locale.clear ?? DEFAULT_LOCALE.clear} ${name}`}\n                      className=\"hover:bg-background/70 flex size-5 shrink-0\n                        items-center justify-center rounded-sm\"\n                    >\n                      <XIcon className=\"size-3\" />\n                    </ComboboxChipRemove>\n                  </ComboboxChip>\n                );\n              })}\n              <ComboboxInput\n                render={\n                  <Input\n                    aria-label={label}\n                    aria-description={\n                      values.length > 0\n                        ? inputDescription(values.length)\n                        : undefined\n                    }\n                    placeholder={\n                      values.length > 0 ? searchPlaceholder : placeholder\n                    }\n                    className={cn(\n                      `h-6 min-w-16 flex-1 border-0 bg-transparent px-0 py-0\n                      shadow-none focus-visible:border-0 focus-visible:ring-0`,\n                      classNames?.input,\n                    )}\n                  />\n                }\n              />\n            </ComboboxChips>\n          )}\n        </ComboboxValue>\n        {allowClear && (\n          <ComboboxClear\n            data-slot=\"select-multiple-clear\"\n            render={\n              <Button\n                variant=\"text\"\n                size=\"icon-sm\"\n                icon={<XIcon />}\n                aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n              />\n            }\n          />\n        )}\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"text\"\n              size=\"icon-sm\"\n              icon={<ChevronDownIcon />}\n              aria-label={locale.expand ?? DEFAULT_LOCALE.expand}\n            />\n          }\n        />\n      </ComboboxInputGroup>\n      <ComboboxContent aria-label={label} className={classNames?.content}>\n        <SearchableOptions emptyText={emptyText} classNames={classNames} />\n      </ComboboxContent>\n    </Core>\n  );\n};\n\nexport default MultipleSelect;\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,EACJ,UAAU,MACV,cACA,oBACA,eACA,eACA,iBACA,eACA,oBACA,iBACA,kBACEA;AAiCJ,MAAM,kBAAkB,EACtB,OACA,SACA,cAAc,kBACd,oBAAoB,aACpB,YAAY,qBACZ,aAAa,MACb,kBAAkB,uCAClB,oBAAmB,UACjB,GAAG,MAAM,qFACX,WACA,YACA,UACA,cAEA,YAAY,aACZ,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,SAAS,cAAc;EAC3B,MAAM,yBAAS,IAAI,IAAoB;EAEvC,QAAQ,SAAQ,WAAU;GACxB,IAAI,aAAa,QACf,OAAO,QAAQ,SAAQ,SAAQ,OAAO,IAAI,KAAK,OAAO,KAAK,KAAK,CAAC;QAEjE,OAAO,IAAI,OAAO,OAAO,OAAO,KAAK;EAEzC,CAAC;EAED,OAAO;CACT,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,qBAAC,MAAD;EACS;EACG;EACV,gBAAe,WAAU,WAAW,MAAM;EAC1C,eAAe,MAAM,YAAY;GAC/B,IAAI,CAAC,QAAQ,QAAQ,WAAW,cAC9B,QAAQ,OAAO;GAGjB,eAAe,MAAM,OAAO;EAC9B;EACA,GAAI;EAXN,UAAA,CAaE,qBAAC,oBAAD;GACE,aAAU;GACV,WAAW,GACTC,qBACA,uDACA,SACF;GANF,UAAA;IAQE,oBAAC,eAAD,EAAA,WACI,WACA,qBAAC,eAAD;KACE,cACE,OAAO,SAAS,IAAI,GAAG,MAAM,qBAAqB,KAAA;KAEpD,WAAW,GACT,oDACA,YAAY,KACd;KAPF,UAAA,CASG,OAAO,KAAI,UAAS;MACnB,MAAM,OAAO,OAAO,IAAI,KAAK,KAAK;MAElC,OACE,qBAAC,cAAD;OAEE,aAAU;OACV,cAAY;OACZ,oBAAkB;OAClB,WAAW,GACT;;qCAGA,uDACA,YAAY,IACd;OAXF,UAAA,CAaE,oBAAC,QAAD;QAAM,WAAU;QAAqB,UAAA;OAAW,CAAA,GAChD,oBAAC,oBAAD;QACE,aAAU;QACV,cAAY,GAAG,OAAO,SAAS,eAAe,MAAM,GAAG;QACvD,WAAU;QAGV,UAAA,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA;OACT,CAAA,CACR;MArBP,GAAA,KAqBO;KAElB,CAAC,GACD,oBAAC,eAAD,EACE,QACE,oBAAC,OAAD;MACE,cAAY;MACZ,oBACE,OAAO,SAAS,IACZ,iBAAiB,OAAO,MAAM,IAC9B,KAAA;MAEN,aACE,OAAO,SAAS,IAAI,oBAAoB;MAE1C,WAAW,GACT;gFAEA,YAAY,KACd;KACD,CAAA,EAEJ,CAAA,CACY;IAEJ,CAAA,EAAA,CAAA;IACd,cACC,oBAAC,eAAD;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;MACd,cAAY,OAAO,SAAS,eAAe;KAC5C,CAAA;IAEJ,CAAA;IAEH,oBAAC,iBAAD,EACE,QACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,MAAM,oBAAC,iBAAD,CAAkB,CAAA;KACxB,cAAY,OAAO,UAAU,eAAe;IAC7C,CAAA,EAEJ,CAAA;GACiB;EACpB,CAAA,GAAA,oBAAC,iBAAD;GAAiB,cAAY;GAAO,WAAW,YAAY;GACzD,UAAA,oBAAC,mBAAD;IAA8B;IAAuB;GAAa,CAAA;EACnD,CAAA,CACb;;AAEV"}

package/dist/components/atoms/select-searchable-options.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+//#region src/components/atoms/select-searchable-options.d.ts
+interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface OptionGroup {
+  label: string;
+  options: Option[];
+}
+interface ClassNames {
+  input?: string;
+  content?: string;
+  list?: string;
+  item?: string;
+  empty?: string;
+}
+//#endregion
+export { ClassNames, Option, OptionGroup };
+//# sourceMappingURL=select-searchable-options.d.mts.map

package/dist/components/atoms/select-searchable-options.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-searchable-options.d.mts","names":[],"sources":["../../../src/components/atoms/select-searchable-options.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;;UAGe;EACf;EACA,SAAS;;UAGM;EACf;EACA;EACA;EACA;EACA"}

package/dist/components/atoms/select-searchable-options.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { combobox_exports } from "../../core/combobox.mjs";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/select-searchable-options.tsx
+const { ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxItem, ComboboxList, createItems } = combobox_exports;
+const isGroup = (option) => {
+	return "options" in option && Array.isArray(option.options);
+};
+const useSelectItems = (options) => {
+	const groups = useMemo(() => {
+		const result = [];
+		options.forEach((option, index) => {
+			if (isGroup(option)) result.push({
+				key: index,
+				value: option.label,
+				items: option.options,
+				grouped: true
+			});
+			else {
+				const previous = result.at(-1);
+				if (previous && !previous.grouped) previous.items.push(option);
+				else result.push({
+					key: index,
+					value: "",
+					items: [option],
+					grouped: false
+				});
+			}
+		});
+		return result;
+	}, [options]);
+	return useMemo(() => createItems(groups, {
+		getValue: (option) => option.value,
+		getLabel: (option) => option.label
+	}), [groups]);
+};
+const SearchableOptions = ({ emptyText, classNames }) => {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, {
+		className: classNames?.empty,
+		children: emptyText
+	}), /* @__PURE__ */ jsx(ComboboxList, {
+		className: classNames?.list,
+		children: (group) => /* @__PURE__ */ jsxs(ComboboxGroup, {
+			items: group.items,
+			children: [group.grouped && /* @__PURE__ */ jsx(ComboboxGroupLabel, {
+				"data-slot": "combobox-group-label",
+				className: "text-muted-foreground px-2 py-1.5 text-xs",
+				children: group.value
+			}), /* @__PURE__ */ jsx(ComboboxCollection, { children: (option) => /* @__PURE__ */ jsx(ComboboxItem, {
+				value: option.value,
+				disabled: option.disabled,
+				className: classNames?.item,
+				children: option.label
+			}, option.value) })]
+		}, group.key)
+	})] });
+};
+//#endregion
+export { SearchableOptions as default, useSelectItems };
+
+//# sourceMappingURL=select-searchable-options.mjs.map

package/dist/components/atoms/select-searchable-options.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-searchable-options.mjs","names":["combobox"],"sources":["../../../src/components/atoms/select-searchable-options.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useMemo } from 'react';\n\nimport { combobox } from '../../core';\n\nconst {\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxItem,\n  ComboboxList,\n  createItems,\n} = combobox;\n\nexport interface Option {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface OptionGroup {\n  label: string;\n  options: Option[];\n}\n\nexport interface ClassNames {\n  input?: string;\n  content?: string;\n  list?: string;\n  item?: string;\n  empty?: string;\n}\n\ninterface ItemsGroup {\n  key: number;\n  value: string;\n  items: Option[];\n  grouped: boolean;\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\nexport const useSelectItems = (options: (Option | OptionGroup)[]) => {\n  const groups = useMemo(() => {\n    const result: ItemsGroup[] = [];\n\n    options.forEach((option, index) => {\n      if (isGroup(option)) {\n        result.push({\n          key: index,\n          value: option.label,\n          items: option.options,\n          grouped: true,\n        });\n      } else {\n        const previous = result.at(-1);\n\n        if (previous && !previous.grouped) {\n          previous.items.push(option);\n        } else {\n          result.push({\n            key: index,\n            value: '',\n            items: [option],\n            grouped: false,\n          });\n        }\n      }\n    });\n\n    return result;\n  }, [options]);\n  const items = useMemo(\n    () =>\n      createItems<Option, string>(groups, {\n        getValue: option => option.value,\n        getLabel: option => option.label,\n      }),\n    [groups],\n  );\n\n  return items;\n};\n\ninterface Props {\n  emptyText: ReactNode;\n  classNames?: ClassNames;\n}\n\nconst SearchableOptions = ({ emptyText, classNames }: Props) => {\n  return (\n    <>\n      <ComboboxEmpty className={classNames?.empty}>{emptyText}</ComboboxEmpty>\n      <ComboboxList className={classNames?.list}>\n        {(group: ItemsGroup) => (\n          <ComboboxGroup key={group.key} items={group.items}>\n            {group.grouped && (\n              <ComboboxGroupLabel\n                data-slot=\"combobox-group-label\"\n                className=\"text-muted-foreground px-2 py-1.5 text-xs\"\n              >\n                {group.value}\n              </ComboboxGroupLabel>\n            )}\n            <ComboboxCollection>\n              {(option: Option) => (\n                <ComboboxItem\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  className={classNames?.item}\n                >\n                  {option.label}\n                </ComboboxItem>\n              )}\n            </ComboboxCollection>\n          </ComboboxGroup>\n        )}\n      </ComboboxList>\n    </>\n  );\n};\n\nexport default SearchableOptions;\n"],"mappings":";;;;;AAMA,MAAM,EACJ,oBACA,eACA,eACA,oBACA,cACA,cACA,gBACEA;AA4BJ,MAAM,WAAW,WAAwD;CACvE,OAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,OAAO;AAC5D;AAEA,MAAa,kBAAkB,YAAsC;CACnE,MAAM,SAAS,cAAc;EAC3B,MAAM,SAAuB,CAAC;EAE9B,QAAQ,SAAS,QAAQ,UAAU;GACjC,IAAI,QAAQ,MAAM,GAChB,OAAO,KAAK;IACV,KAAK;IACL,OAAO,OAAO;IACd,OAAO,OAAO;IACd,SAAS;GACX,CAAC;QACI;IACL,MAAM,WAAW,OAAO,GAAG,EAAE;IAE7B,IAAI,YAAY,CAAC,SAAS,SACxB,SAAS,MAAM,KAAK,MAAM;SAE1B,OAAO,KAAK;KACV,KAAK;KACL,OAAO;KACP,OAAO,CAAC,MAAM;KACd,SAAS;IACX,CAAC;GAEL;EACF,CAAC;EAED,OAAO;CACT,GAAG,CAAC,OAAO,CAAC;CAUZ,OATc,cAEV,YAA4B,QAAQ;EAClC,WAAU,WAAU,OAAO;EAC3B,WAAU,WAAU,OAAO;CAC7B,CAAC,GACH,CAAC,MAAM,CAGE;AACb;AAOA,MAAM,qBAAqB,EAAE,WAAW,iBAAwB;CAC9D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EAAe,WAAW,YAAY;EAAQ,UAAA;CAAyB,CAAA,GACvE,oBAAC,cAAD;EAAc,WAAW,YAAY;EACjC,WAAA,UACA,qBAAC,eAAD;GAA+B,OAAO,MAAM;GAA5C,UAAA,CACG,MAAM,WACL,oBAAC,oBAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA,MAAM;GACW,CAAA,GAEtB,oBAAC,oBAAD,EAAA,WACI,WACA,oBAAC,cAAD;IAEE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,WAAW,YAAY;IAEtB,UAAA,OAAO;GACI,GANP,OAAO,KAMA,EAEE,CAAA,CACP;EArBK,GAAA,MAAM,GAqBX;CAEL,CAAA,CACd,EAAA,CAAA;AAEN"}

package/dist/components/atoms/select-searchable.d.mts

@@ -0,0 +1,22 @@
+import { RootProps } from "../../core/combobox.mjs";
+import "../../core/index.mjs";
+import { ClassNames, Option, OptionGroup } from "./select-searchable-options.mjs";
+import { ReactNode } from "react";
+//#region src/components/atoms/select-searchable.d.ts
+interface Props extends Omit<RootProps<string, Option>, 'children' | 'items' | 'multiple' | 'filteredItems' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue'> {
+  searchable: true;
+  multiple?: false;
+  /** Accessible name for the trigger and search popup. */
+  label: string;
+  options: (Option | OptionGroup)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: ReactNode;
+  allowClear?: boolean;
+  className?: string;
+  classNames?: ClassNames;
+  onChange?: (value: string | null) => void;
+}
+//#endregion
+export { Props };
+//# sourceMappingURL=select-searchable.d.mts.map

package/dist/components/atoms/select-searchable.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-searchable.d.mts","names":[],"sources":["../../../src/components/atoms/select-searchable.tsx"],"mappings":";;;;;UA6BiB,cAAc,KAC7B,kBAA2B;EAU3B;EACA;;EAEA;EACA,UAAU,SAAS;EACnB;EACA;EACA,YAAY;EACZ;EACA;EACA,aAAa;EACb,YAAY"}

package/dist/components/atoms/select-searchable.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
+import { combobox_exports } from "../../core/combobox.mjs";
+import { selectTriggerStyles } from "../../core/select.mjs";
+import Button from "../../Button.mjs";
+import Input from "./input/index.mjs";
+import SearchableOptions, { useSelectItems } from "./select-searchable-options.mjs";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/select-searchable.tsx
+const { Combobox: Core, ComboboxClear, ComboboxContent, ComboboxIcon, ComboboxInput, ComboboxTrigger, ComboboxValue } = combobox_exports;
+const SearchableSelect = ({ label, options, placeholder, searchPlaceholder = "Search...", emptyText = "No results found.", allowClear = true, className, classNames, onChange, searchable: _searchable, multiple: _multiple, ...props }) => {
+	const { locale } = useConfig();
+	const items = useSelectItems(options);
+	return /* @__PURE__ */ jsxs(Core, {
+		items,
+		onValueChange: (value) => onChange?.(value),
+		...props,
+		children: [/* @__PURE__ */ jsxs(ComboboxTrigger, {
+			"data-slot": "select-trigger",
+			"data-size": "default",
+			"aria-label": label,
+			className: cn(selectTriggerStyles, "w-full max-w-48", className),
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "select-value",
+				className: "min-w-0 flex-1 truncate text-start",
+				children: /* @__PURE__ */ jsx(ComboboxValue, { placeholder })
+			}), /* @__PURE__ */ jsx(ComboboxIcon, {
+				className: "opacity-50",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+			})]
+		}), /* @__PURE__ */ jsxs(ComboboxContent, {
+			"aria-label": label,
+			className: classNames?.content,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "border-b p-1",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative flex items-center",
+					children: [/* @__PURE__ */ jsx(ComboboxInput, { render: /* @__PURE__ */ jsx(Input, {
+						"aria-label": `${label} search`,
+						placeholder: searchPlaceholder,
+						className: cn(allowClear && "pe-8", classNames?.input)
+					}) }), allowClear && /* @__PURE__ */ jsx(ComboboxClear, {
+						"data-slot": "combobox-clear",
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "text",
+							size: "icon-sm",
+							icon: /* @__PURE__ */ jsx(XIcon, {}),
+							"aria-label": locale.clear ?? DEFAULT_LOCALE.clear,
+							className: "absolute end-0"
+						})
+					})]
+				})
+			}), /* @__PURE__ */ jsx(SearchableOptions, {
+				emptyText,
+				classNames
+			})]
+		})]
+	});
+};
+//#endregion
+export { SearchableSelect as default };
+
+//# sourceMappingURL=select-searchable.mjs.map

package/dist/components/atoms/select-searchable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-searchable.mjs","names":["combobox","select.selectTriggerStyles"],"sources":["../../../src/components/atoms/select-searchable.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\n\nimport { ChevronDownIcon, XIcon } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { combobox, select } from '../../core';\nimport Button from './button';\nimport Input from './input';\nimport SearchableOptions, {\n  type ClassNames,\n  type Option,\n  type OptionGroup,\n  useSelectItems,\n} from './select-searchable-options';\n\nconst {\n  Combobox: Core,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxValue,\n} = combobox;\n\nexport interface Props extends Omit<\n  combobox.RootProps<string, Option>,\n  | 'children'\n  | 'items'\n  | 'multiple'\n  | 'filteredItems'\n  | 'onValueChange'\n  | 'itemToStringLabel'\n  | 'itemToStringValue'\n  | 'isItemEqualToValue'\n> {\n  searchable: true;\n  multiple?: false;\n  /** Accessible name for the trigger and search popup. */\n  label: string;\n  options: (Option | OptionGroup)[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: ReactNode;\n  allowClear?: boolean;\n  className?: string;\n  classNames?: ClassNames;\n  onChange?: (value: string | null) => void;\n}\n\nconst SearchableSelect = ({\n  label,\n  options,\n  placeholder,\n  searchPlaceholder = 'Search...',\n  emptyText = 'No results found.',\n  allowClear = true,\n  className,\n  classNames,\n  onChange,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- The single-select primitive fixes this mode internally.\n  multiple: _multiple,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const items = useSelectItems(options);\n\n  return (\n    <Core items={items} onValueChange={value => onChange?.(value)} {...props}>\n      <ComboboxTrigger\n        data-slot=\"select-trigger\"\n        data-size=\"default\"\n        aria-label={label}\n        className={cn(select.selectTriggerStyles, 'w-full max-w-48', className)}\n      >\n        <span\n          data-slot=\"select-value\"\n          className=\"min-w-0 flex-1 truncate text-start\"\n        >\n          <ComboboxValue placeholder={placeholder} />\n        </span>\n        <ComboboxIcon className=\"opacity-50\">\n          <ChevronDownIcon />\n        </ComboboxIcon>\n      </ComboboxTrigger>\n      <ComboboxContent aria-label={label} className={classNames?.content}>\n        <div className=\"border-b p-1\">\n          <div className=\"relative flex items-center\">\n            <ComboboxInput\n              render={\n                <Input\n                  aria-label={`${label} search`}\n                  placeholder={searchPlaceholder}\n                  className={cn(allowClear && 'pe-8', classNames?.input)}\n                />\n              }\n            />\n            {allowClear && (\n              <ComboboxClear\n                data-slot=\"combobox-clear\"\n                render={\n                  <Button\n                    variant=\"text\"\n                    size=\"icon-sm\"\n                    icon={<XIcon />}\n                    aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n                    className=\"absolute end-0\"\n                  />\n                }\n              />\n            )}\n          </div>\n        </div>\n        <SearchableOptions emptyText={emptyText} classNames={classNames} />\n      </ComboboxContent>\n    </Core>\n  );\n};\n\nexport default SearchableSelect;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,EACJ,UAAU,MACV,eACA,iBACA,cACA,eACA,iBACA,kBACEA;AA2BJ,MAAM,oBAAoB,EACxB,OACA,SACA,aACA,oBAAoB,aACpB,YAAY,qBACZ,aAAa,MACb,WACA,YACA,UAEA,YAAY,aAEZ,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,eAAe,OAAO;CAEpC,OACE,qBAAC,MAAD;EAAa;EAAO,gBAAe,UAAS,WAAW,KAAK;EAAG,GAAI;EAAnE,UAAA,CACE,qBAAC,iBAAD;GACE,aAAU;GACV,aAAU;GACV,cAAY;GACZ,WAAW,GAAGC,qBAA4B,mBAAmB,SAAS;GAJxE,UAAA,CAME,oBAAC,QAAD;IACE,aAAU;IACV,WAAU;IAEV,UAAA,oBAAC,eAAD,EAA4B,YAAc,CAAA;GACtC,CAAA,GACN,oBAAC,cAAD;IAAc,WAAU;IACtB,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACN,CAAA,CACC;EACjB,CAAA,GAAA,qBAAC,iBAAD;GAAiB,cAAY;GAAO,WAAW,YAAY;GAA3D,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,eAAD,EACE,QACE,oBAAC,OAAD;MACE,cAAY,GAAG,MAAM;MACrB,aAAa;MACb,WAAW,GAAG,cAAc,QAAQ,YAAY,KAAK;KACtD,CAAA,EAEJ,CAAA,GACA,cACC,oBAAC,eAAD;MACE,aAAU;MACV,QACE,oBAAC,QAAD;OACE,SAAQ;OACR,MAAK;OACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;OACd,cAAY,OAAO,SAAS,eAAe;OAC3C,WAAU;MACX,CAAA;KAEJ,CAAA,CAEA;;GACF,CAAA,GACL,oBAAC,mBAAD;IAA8B;IAAuB;GAAa,CAAA,CACnD;EACb,CAAA,CAAA;;AAEV"}

package/dist/components/atoms/select.d.mts

@@ -1,23 +1,29 @@
 import { Select as Select$1 } from "../../core/select.mjs";
 import "../../core/index.mjs";
+import { Props as Props$1 } from "./select-multiple.mjs";
+import { Props as Props$2 } from "./select-searchable.mjs";
 import React from "react";
 //#region src/components/atoms/select.d.ts
 declare const Core: typeof Select$1;
 interface Option {
   label: React.ReactNode;
   value: string;
+  disabled?: boolean;
 }
 interface OptionGroup {
   label: React.ReactNode;
   options: Option[];
 }
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'onValueChange'> {
+interface StaticProps extends Omit<React.ComponentProps<typeof Core>, 'onValueChange' | 'items'> {
+  searchable?: false;
   placeholder?: string;
   className?: string;
   options?: (Option | OptionGroup)[];
   onChange?: (value: string) => void;
+  'aria-label'?: string;
 }
-declare const Select: ({ className, placeholder, options, onChange, ...props }: Props) => React.JSX.Element;
+type Props = StaticProps | Props$2 | Props$1;
+declare const Select: (props: Props) => React.JSX.Element;
 //#endregion
 export { Props, Select as default };
 //# sourceMappingURL=select.d.mts.map

package/dist/components/atoms/select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;cAOU,aAAI;UASJ;EACR,OAAO,MAAM;EACb;;UAGQ;EACR,OAAO,MAAM;EACb,SAAS;;UAOM,cAAc,KAC7B,MAAM,sBAAsB;EAG5B;EACA;EACA,WAAW,SAAS;EACpB,YAAY;;cAGR,WAAU,WAAA,aAAA,SAAA,aAAA,SAMb,UAAK,MAAA,IAAA"}
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;;;cAWU,aAAI;UASJ;EACR,OAAO,MAAM;EACb;EACA;;UAGQ;EACR,OAAO,MAAM;EACb,SAAS;;UAOD,oBAAoB,KAC5B,MAAM,sBAAsB;EAG5B;EACA;EACA;EACA,WAAW,SAAS;EACpB,YAAY;EACZ;;KAGU,QAAQ,cAAc,UAAkB;cA8D9C,SAAU,OAAO,UAAK,MAAA,IAAA"}

package/dist/components/atoms/select.mjs

@@ -1,5 +1,7 @@
 import { cn } from "../../utils.mjs";
 import { select_exports } from "../../core/select.mjs";
+import MultipleSelect from "./select-multiple.mjs";
+import SearchableSelect from "./select-searchable.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/select.tsx
@@ -7,26 +9,34 @@ const { Select: Core, SelectContent, SelectGroup, SelectItem, SelectLabel, Selec
 const isGroup = (option) => {
 	return "options" in option && Array.isArray(option.options);
 };
-const Select = ({ className, placeholder, options, onChange, ...props }) => {
+const StaticSelect = ({ searchable: _searchable, className, placeholder, options, onChange, "aria-label": ariaLabel, ...props }) => {
 	const items = options?.flatMap((option) => isGroup(option) ? option.options : option);
 	return /* @__PURE__ */ jsxs(Core, {
+		...props,
 		items,
 		onValueChange: (value) => {
 			if (value !== null) onChange?.(value);
 		},
-		...props,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": ariaLabel,
 			className: cn("w-full max-w-48", className),
 			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 		}), /* @__PURE__ */ jsx(SelectContent, { children: options?.map((option, index) => isGroup(option) ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: option.label }), option.options.map((item) => /* @__PURE__ */ jsx(SelectItem, {
 			value: item.value,
+			disabled: item.disabled,
 			children: item.label
 		}, item.value))] }, index) : /* @__PURE__ */ jsx(SelectItem, {
 			value: option.value,
+			disabled: option.disabled,
 			children: option.label
 		}, option.value)) })]
 	});
 };
+const Select = (props) => {
+	if (props.multiple) return /* @__PURE__ */ jsx(MultipleSelect, { ...props });
+	if (props.searchable) return /* @__PURE__ */ jsx(SearchableSelect, { ...props });
+	return /* @__PURE__ */ jsx(StaticSelect, { ...props });
+};
 //#endregion
 export { Select as default };
 

package/dist/components/atoms/select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { select } from '../../core';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'onValueChange'\n> {\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n}\n\nconst Select = ({\n  className,\n  placeholder,\n  options,\n  onChange,\n  ...props\n}: Props) => {\n  const items = options?.flatMap(option =>\n    isGroup(option) ? option.options : option,\n  );\n\n  return (\n    <Core\n      items={items}\n      onValueChange={value => {\n        if (value !== null) {\n          onChange?.(value);\n        }\n      }}\n      {...props}\n    >\n      <SelectTrigger className={cn('w-full max-w-48', className)}>\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;AAMA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAYJ,MAAM,WAAW,WAAwD;CACvE,OAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,OAAO;AAC5D;AAYA,MAAM,UAAU,EACd,WACA,aACA,SACA,UACA,GAAG,YACQ;CACX,MAAM,QAAQ,SAAS,SAAQ,WAC7B,QAAQ,MAAM,IAAI,OAAO,UAAU,MACrC;CAEA,OACE,qBAAC,MAAD;EACS;EACP,gBAAe,UAAS;GACtB,IAAI,UAAU,MACZ,WAAW,KAAK;EAEpB;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,eAAD;GAAe,WAAW,GAAG,mBAAmB,SAAS;GACvD,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;EAC3B,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,SAAS,KAAK,QAAQ,UACrB,QAAQ,MAAM,IACZ,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,OAAO,MAAmB,CAAA,GACvC,OAAO,QAAQ,KAAI,SAClB,oBAAC,YAAD;GAA6B,OAAO,KAAK;GACtC,UAAA,KAAK;EACI,GAFK,KAAK,KAEV,CACb,CACU,EAAA,GAPK,KAOL,IAEb,oBAAC,YAAD;GAA+B,OAAO,OAAO;GAC1C,UAAA,OAAO;EACE,GAFK,OAAO,KAEZ,CAEhB,EACa,CAAA,CACX;;AAEV"}
+{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { select } from '../../core';\nimport MultipleSelect, { type Props as MultipleProps } from './select-multiple';\nimport SearchableSelect, {\n  type Props as SearchableProps,\n} from './select-searchable';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n  disabled?: boolean;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\ninterface StaticProps extends Omit<\n  React.ComponentProps<typeof Core>,\n  'onValueChange' | 'items'\n> {\n  searchable?: false;\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n  'aria-label'?: string;\n}\n\nexport type Props = StaticProps | SearchableProps | MultipleProps;\n\nconst StaticSelect = ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  className,\n  placeholder,\n  options,\n  onChange,\n  'aria-label': ariaLabel,\n  ...props\n}: StaticProps) => {\n  const items = options?.flatMap(option =>\n    isGroup(option) ? option.options : option,\n  );\n\n  return (\n    <Core\n      {...props}\n      items={items}\n      onValueChange={value => {\n        if (value !== null) {\n          onChange?.(value);\n        }\n      }}\n    >\n      <SelectTrigger\n        aria-label={ariaLabel}\n        className={cn('w-full max-w-48', className)}\n      >\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem\n                  key={item.value}\n                  value={item.value}\n                  disabled={item.disabled}\n                >\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nconst Select = (props: Props) => {\n  if (props.multiple) {\n    return <MultipleSelect {...props} />;\n  }\n\n  if (props.searchable) {\n    return <SearchableSelect {...props} />;\n  }\n\n  return <StaticSelect {...props} />;\n};\n\nexport default Select;\n"],"mappings":";;;;;;;AAUA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAaJ,MAAM,WAAW,WAAwD;CACvE,OAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,OAAO;AAC5D;AAgBA,MAAM,gBAAgB,EAEpB,YAAY,aACZ,WACA,aACA,SACA,UACA,cAAc,WACd,GAAG,YACc;CACjB,MAAM,QAAQ,SAAS,SAAQ,WAC7B,QAAQ,MAAM,IAAI,OAAO,UAAU,MACrC;CAEA,OACE,qBAAC,MAAD;EACE,GAAI;EACG;EACP,gBAAe,UAAS;GACtB,IAAI,UAAU,MACZ,WAAW,KAAK;EAEpB;EAPF,UAAA,CASE,oBAAC,eAAD;GACE,cAAY;GACZ,WAAW,GAAG,mBAAmB,SAAS;GAE1C,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;EAC3B,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,SAAS,KAAK,QAAQ,UACrB,QAAQ,MAAM,IACZ,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,OAAO,MAAmB,CAAA,GACvC,OAAO,QAAQ,KAAI,SAClB,oBAAC,YAAD;GAEE,OAAO,KAAK;GACZ,UAAU,KAAK;GAEd,UAAA,KAAK;EACI,GALL,KAAK,KAKA,CACb,CACU,EAAA,GAXK,KAWL,IAEb,oBAAC,YAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GAEhB,UAAA,OAAO;EACE,GALL,OAAO,KAKF,CAEhB,EACa,CAAA,CACX;;AAEV;AAEA,MAAM,UAAU,UAAiB;CAC/B,IAAI,MAAM,UACR,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;CAGrC,IAAI,MAAM,YACR,OAAO,oBAAC,kBAAD,EAAkB,GAAI,MAAQ,CAAA;CAGvC,OAAO,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA;AACnC"}

package/dist/components/atoms/skeleton/skeleton.d.mts

@@ -6,6 +6,8 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
   size?: 'default' | 'small' | 'large';
   count?: number;
   gap?: number;
+  orientation?: 'horizontal' | 'vertical';
+  /** @deprecated Use `orientation`. */
   direction?: 'horizontal' | 'vertical';
   width?: string | number | (string | number)[];
   height?: string | number | (string | number)[];
@@ -15,7 +17,7 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
     item?: string;
   };
 }
-declare const Skeleton: ({ active, loading, avatar, size, direction, count, gap, className, classNames, style, width, height, children, ...props }: Props) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
+declare const Skeleton: ({ active, loading, avatar, size, orientation, direction, count, gap, className, classNames, style, width, height, children, ...props }: Props) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
 //#endregion
 export { Props, Skeleton as default };
 //# sourceMappingURL=skeleton.d.mts.map

package/dist/components/atoms/skeleton/skeleton.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";UAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAef,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";UAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,aAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAgBf,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}

package/dist/components/atoms/skeleton/skeleton.mjs

@@ -13,7 +13,7 @@ const SIZES = {
 	default: "w-60 h-6",
 	large: "w-72 h-8"
 };
-const Skeleton = ({ active = true, loading = true, avatar, size = "default", direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
+const Skeleton = ({ active = true, loading = true, avatar, size = "default", orientation, direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
 	const { locale } = useConfig();
 	if (!loading) return children ?? null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -23,7 +23,7 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
 		style,
 		...props,
 		children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
-			className: cn("flex min-w-0 grow", direction === "vertical" && "flex-col", classNames.wrapper),
+			className: cn("flex min-w-0 grow", (orientation ?? direction) === "vertical" && "flex-col", classNames.wrapper),
 			style: { gap },
 			children: Array.from({ length: count }).map((_, index) => {
 				const itemWidth = getValueAtIndex(width, index);

package/dist/components/atoms/skeleton/skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n      className={cn('flex items-center gap-3', className)}\n      style={style}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 grow',\n          direction === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                // SIZES are fixed widths; cap them so a narrow container\n                // shrinks the placeholder instead of being overflowed.\n                SIZES[size],\n                'max-w-full',\n                classNames.item,\n                //\n              )}\n              style={{\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,qBACA,cAAc,cAAc,YAC5B,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  orientation?: 'horizontal' | 'vertical';\n  /** @deprecated Use `orientation`. */\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  orientation,\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n      className={cn('flex items-center gap-3', className)}\n      style={style}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 grow',\n          (orientation ?? direction) === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                // SIZES are fixed widths; cap them so a narrow container\n                // shrinks the placeholder instead of being overflowed.\n                SIZES[size],\n                'max-w-full',\n                classNames.item,\n                //\n              )}\n              style={{\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAqBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,aACA,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,sBACC,eAAe,eAAe,cAAc,YAC7C,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}

package/dist/components/atoms/slider/slider.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../utils.mjs";
 import { slider_exports } from "../../../core/slider.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/slider/slider.tsx
 const { Slider: Core } = slider_exports;
 const toArray = (value) => {

package/dist/components/atoms/switch.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../utils.mjs";
 import { useConfig } from "../../providers/config/context.mjs";
 import { switch_exports } from "../../core/switch.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/switch.tsx
 const { Switch: Core } = switch_exports;
 const sizeConfig = {