@jbpark/ui-kit 10.0.2 → 10.1.0

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'> {
+  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,7 +9,7 @@ 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, {
 		items,
@@ -16,17 +18,25 @@ const Select = ({ className, placeholder, options, onChange, ...props }) => {
 		},
 		...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'\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      items={items}\n      onValueChange={value => {\n        if (value !== null) {\n          onChange?.(value);\n        }\n      }}\n      {...props}\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;EACS;EACP,gBAAe,UAAS;GACtB,IAAI,UAAU,MACZ,WAAW,KAAK;EAEpB;EACA,GAAI;EAPN,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/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 = {

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

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/components/atoms/tooltip.d.ts
+declare const Core: <Payload>(props: import("@base-ui/react").TooltipRoot.Props<Payload>) => React.JSX.Element;
+type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
+  children: ReactElement;
+  /** Supplementary visual hint; keep essential information visible elsewhere. */
+  content: ReactNode;
+  /** Popup class; the child retains its own className. */
+  className?: string;
+  placement?: Placement;
+  /** Distance between the trigger and popup in pixels. */
+  offset?: number;
+  /** Hover delay in milliseconds. Keyboard focus opens without this delay. */
+  delay?: number;
+  closeDelay?: number;
+}
+declare const Tooltip: ({ children, content, className, placement, offset, delay, closeDelay, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Props, Tooltip as default };
+//# sourceMappingURL=tooltip.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/atoms/tooltip.tsx"],"mappings":";;cAMiB,OAAI,SAAA,gCAAA,YAAA,MAAA,aAAA,MAAA,IAAA;KAEhB;UAgCY,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU;;EAEV,SAAS;;EAET;EACA,YAAY;;EAEZ;;EAEA;EACA;;cAGI,YAAW,UAAA,SAAA,WAAA,WAAA,QAAA,OAAA,eAAA,SASd,0BAAK,IAAA"}

package/dist/components/atoms/tooltip.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { tooltip_exports } from "../../core/tooltip.mjs";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/tooltip.tsx
+const { Tooltip: Core, TooltipContent, TooltipTrigger } = tooltip_exports;
+const placementMap = {
+	top: {
+		side: "top",
+		align: "center"
+	},
+	left: {
+		side: "left",
+		align: "center"
+	},
+	right: {
+		side: "right",
+		align: "center"
+	},
+	bottom: {
+		side: "bottom",
+		align: "center"
+	},
+	topLeft: {
+		side: "top",
+		align: "start"
+	},
+	topRight: {
+		side: "top",
+		align: "end"
+	},
+	bottomLeft: {
+		side: "bottom",
+		align: "start"
+	},
+	bottomRight: {
+		side: "bottom",
+		align: "end"
+	},
+	leftTop: {
+		side: "left",
+		align: "start"
+	},
+	leftBottom: {
+		side: "left",
+		align: "end"
+	},
+	rightTop: {
+		side: "right",
+		align: "start"
+	},
+	rightBottom: {
+		side: "right",
+		align: "end"
+	}
+};
+const Tooltip = ({ children, content, className, placement = "top", offset = 8, delay, closeDelay, ...props }) => {
+	const trigger = Children.only(children);
+	const { side, align } = placementMap[placement];
+	return /* @__PURE__ */ jsxs(Core, {
+		...props,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: trigger,
+			delay,
+			closeDelay
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side,
+			align,
+			sideOffset: offset,
+			className,
+			children: content
+		})]
+	});
+};
+//#endregion
+export { Tooltip as default };
+
+//# sourceMappingURL=tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.mjs","names":["tooltip"],"sources":["../../../src/components/atoms/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Children, type ReactElement, type ReactNode } from 'react';\n\nimport { tooltip } from '../../core';\n\nconst { Tooltip: Core, TooltipContent, TooltipTrigger } = tooltip;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ntype Side = NonNullable<React.ComponentProps<typeof TooltipContent>['side']>;\ntype Align = NonNullable<React.ComponentProps<typeof TooltipContent>['align']>;\n\nconst placementMap: Record<Placement, { side: Side; align: Align }> = {\n  top: { side: 'top', align: 'center' },\n  left: { side: 'left', align: 'center' },\n  right: { side: 'right', align: 'center' },\n  bottom: { side: 'bottom', align: 'center' },\n  topLeft: { side: 'top', align: 'start' },\n  topRight: { side: 'top', align: 'end' },\n  bottomLeft: { side: 'bottom', align: 'start' },\n  bottomRight: { side: 'bottom', align: 'end' },\n  leftTop: { side: 'left', align: 'start' },\n  leftBottom: { side: 'left', align: 'end' },\n  rightTop: { side: 'right', align: 'start' },\n  rightBottom: { side: 'right', align: 'end' },\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'handle' | 'triggerId' | 'defaultTriggerId'\n> {\n  children: ReactElement;\n  /** Supplementary visual hint; keep essential information visible elsewhere. */\n  content: ReactNode;\n  /** Popup class; the child retains its own className. */\n  className?: string;\n  placement?: Placement;\n  /** Distance between the trigger and popup in pixels. */\n  offset?: number;\n  /** Hover delay in milliseconds. Keyboard focus opens without this delay. */\n  delay?: number;\n  closeDelay?: number;\n}\n\nconst Tooltip = ({\n  children,\n  content,\n  className,\n  placement = 'top',\n  offset = 8,\n  delay,\n  closeDelay,\n  ...props\n}: Props) => {\n  const trigger = Children.only(children);\n  const { side, align } = placementMap[placement];\n\n  return (\n    <Core {...props}>\n      <TooltipTrigger render={trigger} delay={delay} closeDelay={closeDelay} />\n      <TooltipContent\n        side={side}\n        align={align}\n        sideOffset={offset}\n        className={className}\n      >\n        {content}\n      </TooltipContent>\n    </Core>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;AAMA,MAAM,EAAE,SAAS,MAAM,gBAAgB,mBAAmBA;AAmB1D,MAAM,eAAgE;CACpE,KAAK;EAAE,MAAM;EAAO,OAAO;CAAS;CACpC,MAAM;EAAE,MAAM;EAAQ,OAAO;CAAS;CACtC,OAAO;EAAE,MAAM;EAAS,OAAO;CAAS;CACxC,QAAQ;EAAE,MAAM;EAAU,OAAO;CAAS;CAC1C,SAAS;EAAE,MAAM;EAAO,OAAO;CAAQ;CACvC,UAAU;EAAE,MAAM;EAAO,OAAO;CAAM;CACtC,YAAY;EAAE,MAAM;EAAU,OAAO;CAAQ;CAC7C,aAAa;EAAE,MAAM;EAAU,OAAO;CAAM;CAC5C,SAAS;EAAE,MAAM;EAAQ,OAAO;CAAQ;CACxC,YAAY;EAAE,MAAM;EAAQ,OAAO;CAAM;CACzC,UAAU;EAAE,MAAM;EAAS,OAAO;CAAQ;CAC1C,aAAa;EAAE,MAAM;EAAS,OAAO;CAAM;AAC7C;AAmBA,MAAM,WAAW,EACf,UACA,SACA,WACA,YAAY,OACZ,SAAS,GACT,OACA,YACA,GAAG,YACQ;CACX,MAAM,UAAU,SAAS,KAAK,QAAQ;CACtC,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,OACE,qBAAC,MAAD;EAAM,GAAI;EAAV,UAAA,CACE,oBAAC,gBAAD;GAAgB,QAAQ;GAAgB;GAAmB;EAAa,CAAA,GACxE,oBAAC,gBAAD;GACQ;GACC;GACP,YAAY;GACD;GAEV,UAAA;EACa,CAAA,CACZ;;AAEV"}

package/dist/components/atoms/typography/paragraph.mjs

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/typography/paragraph.tsx
 const Paragraph = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "typography-paragraph",
 		...props,
 		className: cn("m-0", className),
 		children

package/dist/components/atoms/typography/paragraph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.mjs","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'p'> {}\n\nconst Paragraph = ({ children, className, ...props }: Props) => {\n  return (\n    <p\n      {...props}\n      className={cn(\n        'm-0',\n        className,\n        //\n      )}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"mappings":";;;AAIA,MAAM,aAAa,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC9D,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW,GACT,OACA,SAEF;EAEC;CACA,CAAA;AAEP"}
+{"version":3,"file":"paragraph.mjs","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'p'> {}\n\nconst Paragraph = ({ children, className, ...props }: Props) => {\n  return (\n    <p\n      data-slot=\"typography-paragraph\"\n      {...props}\n      className={cn(\n        'm-0',\n        className,\n        //\n      )}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"mappings":";;;AAIA,MAAM,aAAa,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC9D,OACE,oBAAC,KAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GACT,OACA,SAEF;EAEC;CACA,CAAA;AAEP"}

package/dist/components/atoms/typography/title.mjs

@@ -12,6 +12,7 @@ const styles = {
 const Title = ({ children, level = 1, className, ...props }) => {
 	const Element = level < 1 || level > 6 ? "h1" : `h${level}`;
 	return /* @__PURE__ */ jsx(Element, {
+		"data-slot": "typography-title",
 		className: cn("m-0 leading-snug font-bold", styles[Element], className),
 		...props,
 		children

package/dist/components/atoms/typography/title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n// Scale up at wider breakpoints instead of a single fixed size — the desktop\n// size stays the same as before, but narrow/mobile viewports now get a\n// smaller starting size instead of always rendering at the full desktop size.\nconst styles: Record<string, string> = {\n  h1: 'text-4xl sm:text-5xl lg:text-6xl',\n  h2: 'text-3xl sm:text-4xl lg:text-5xl',\n  h3: 'text-2xl sm:text-3xl lg:text-4xl',\n  h4: 'text-xl sm:text-2xl lg:text-3xl',\n  h5: 'text-lg sm:text-xl lg:text-2xl',\n  h6: 'text-base sm:text-lg lg:text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n  const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n  return (\n    <Element\n      className={cn('m-0 leading-snug font-bold', styles[Element], className)}\n      {...props}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;AAaA,MAAM,SAAiC;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS,EAAE,UAAU,QAAQ,GAAG,WAAW,GAAG,YAAmB;CACrE,MAAM,UAAuB,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI;CAEjE,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,8BAA8B,OAAO,UAAU,SAAS;EACtE,GAAI;EAEH;CACM,CAAA;AAEb"}
+{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n// Scale up at wider breakpoints instead of a single fixed size — the desktop\n// size stays the same as before, but narrow/mobile viewports now get a\n// smaller starting size instead of always rendering at the full desktop size.\nconst styles: Record<string, string> = {\n  h1: 'text-4xl sm:text-5xl lg:text-6xl',\n  h2: 'text-3xl sm:text-4xl lg:text-5xl',\n  h3: 'text-2xl sm:text-3xl lg:text-4xl',\n  h4: 'text-xl sm:text-2xl lg:text-3xl',\n  h5: 'text-lg sm:text-xl lg:text-2xl',\n  h6: 'text-base sm:text-lg lg:text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n  const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n  return (\n    <Element\n      data-slot=\"typography-title\"\n      className={cn('m-0 leading-snug font-bold', styles[Element], className)}\n      {...props}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;AAaA,MAAM,SAAiC;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS,EAAE,UAAU,QAAQ,GAAG,WAAW,GAAG,YAAmB;CACrE,MAAM,UAAuB,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI;CAEjE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,OAAO,UAAU,SAAS;EACtE,GAAI;EAEH;CACM,CAAA;AAEb"}

package/dist/components/molecules/dropdown.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import "../../lib/z-layers.mjs";
 import Menu from "./menu/menu.mjs";
 import { useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/dropdown.tsx
 const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, className, onMouseEnter, onMouseLeave, ...props }) => {

package/dist/components/molecules/index.d.mts

@@ -1,13 +1,16 @@
-import Card, { Props } from "../../Card.mjs";
-import Menu, { Props as Props$1 } from "./menu/menu.mjs";
-import { Props as Props$2 } from "./reveals/reveals.mjs";
+import Breadcrumb, { Props } from "../../Breadcrumb.mjs";
+import Card, { Props as Props$1 } from "../../Card.mjs";
+import Menu, { Props as Props$2 } from "./menu/menu.mjs";
+import Pagination, { Props as Props$3 } from "../../Pagination.mjs";
+import { Props as Props$4 } from "./reveals/reveals.mjs";
 import Reveals from "../../Reveals.mjs";
-import Space, { Props as Props$3 } from "../../Space.mjs";
-import Collapse, { Props as Props$4 } from "./collapse.mjs";
-import Dropdown, { Props as Props$5 } from "./dropdown.mjs";
-import { Props as Props$6 } from "./marquees/marquees.mjs";
+import Space, { Props as Props$5 } from "../../Space.mjs";
+import Collapse, { Props as Props$6 } from "./collapse.mjs";
+import Dropdown, { Props as Props$7 } from "./dropdown.mjs";
+import { Props as Props$8 } from "./marquees/marquees.mjs";
 import Marquees from "./marquees/index.mjs";
-import { Props as Props$7 } from "./splitter/splitter.mjs";
+import { Props as Props$9 } from "./splitter/splitter.mjs";
 import Splitter from "./splitter/index.mjs";
-import Upload, { Props as Props$8, UploadFile } from "./upload.mjs";
-export { Card, type Props as CardProps, Collapse, type Props$4 as CollapseProps, Dropdown, type Props$5 as DropdownProps, Marquees, type Props$6 as MarqueesProps, Menu, type Props$1 as MenuProps, Reveals, type Props$2 as RevealsProps, Space, type Props$3 as SpaceProps, Splitter, type Props$7 as SplitterProps, Upload, type UploadFile, type Props$8 as UploadProps };
+import Tabs, { Props as Props$10 } from "./tabs.mjs";
+import Upload, { Props as Props$11, UploadFile } from "./upload.mjs";
+export { Breadcrumb, type Props as BreadcrumbProps, Card, type Props$1 as CardProps, Collapse, type Props$6 as CollapseProps, Dropdown, type Props$7 as DropdownProps, Marquees, type Props$8 as MarqueesProps, Menu, type Props$2 as MenuProps, Pagination, type Props$3 as PaginationProps, Reveals, type Props$4 as RevealsProps, Space, type Props$5 as SpaceProps, Splitter, type Props$9 as SplitterProps, Tabs, type Props$10 as TabsProps, Upload, type UploadFile, type Props$11 as UploadProps };

package/dist/components/molecules/marquees/marquees.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../../utils.mjs";
 import usePauseOnHover from "./use-pause-on-hover.mjs";
 import Item from "./item.mjs";
 import { useEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useMergedRef, useResponsiveSize, useThrottledValue } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/molecules/marquees/marquees.tsx
 const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = true, gap, ...props }) => {
 	const [width, setWidth] = useState("100%");

package/dist/components/molecules/menu/menu.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import Item from "./item/item.mjs";
 import { createElement, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/molecules/menu/menu.tsx
 const MENU_CLASSNAMES = [
 	"m-0",
@@ -45,6 +45,7 @@ const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys
 		_onSelect?.(params);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "menu",
 		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
 		...props,

package/dist/components/molecules/menu/menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CAEA,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}
+{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      data-slot=\"menu\"\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CAEA,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}

package/dist/components/molecules/tabs.d.mts

@@ -0,0 +1,37 @@
+import { Tabs as Tabs$1 } from "../../core/tabs.mjs";
+import "../../core/index.mjs";
+import { ReactNode } from "react";
+//#region src/components/molecules/tabs.d.ts
+declare const Core: typeof Tabs$1;
+interface Item {
+  key: string;
+  label: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  /** Decorative icon rendered before the label with consistent spacing. */
+  icon?: ReactNode;
+}
+interface Props extends Omit<React.ComponentProps<typeof Core>, 'children'> {
+  items: Item[];
+  listLabel?: string;
+  /** Preserve inactive panel DOM and local state. */
+  keepMounted?: boolean;
+  /** Select a tab when arrow-key focus moves to it. */
+  activateOnFocus?: boolean;
+  /** Scroll the tab list when its items exceed the available space. */
+  scrollable?: boolean;
+  /** Give tabs equal width in horizontal mode; ignored when scrollable. */
+  fitted?: boolean;
+  /** Content shown after the tab list, outside the tablist role. */
+  extra?: ReactNode;
+  classNames?: {
+    list?: string;
+    tab?: string;
+    panel?: string;
+    extra?: string;
+  };
+}
+declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, orientation, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Item, Props, Tabs as default };
+//# sourceMappingURL=tabs.d.mts.map

package/dist/components/molecules/tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../../src/components/molecules/tabs.tsx"],"mappings":";;;;cAQc,aAAI;UAED;EACf;EACA,OAAO;EACP,UAAU;EACV;;EAEA,OAAO;;UAGQ,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,OAAO;EACP;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;EACR;IACE;IACA;IACA;IACA;;;cAIE,SAAQ,OAAA,WAAA,aAAA,iBAAA,YAAA,QAAA,OAAA,YAAA,cAAA,gBAAA,SAYX,0BAAK,IAAA"}