@jbpark/ui-kit 10.2.0 → 10.4.0

package/dist/TreeSelect.mjs

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { popover_exports } from "./core/popover.mjs";
+import Tree from "./Tree.mjs";
+import { useImperativeHandle, useRef, useState } from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from "lucide-react";
+//#region src/components/organisms/tree-select.tsx
+const TreeSelect = ({ nodes, value, defaultValue = null, onChange, expandedKeys, defaultExpandedKeys = [], onExpand, open, defaultOpen = false, onOpenChange, allowClear = true, clearLabel, placeholder = "Choose a node", popupLabel = "Choose a node", emptyText = "No nodes", container, name, form, disabled = false, className, classNames, dir, ref, onKeyDown, ...props }) => {
+	const { direction, locale } = useConfig();
+	const resolvedDirection = dir === "ltr" || dir === "rtl" ? dir : direction;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [internalExpanded, setInternalExpanded] = useState(defaultExpandedKeys);
+	const selected = value === void 0 ? internalValue : value;
+	const isOpen = (open ?? internalOpen) && !disabled;
+	const expanded = expandedKeys ?? internalExpanded;
+	const tree = useRef(null);
+	const trigger = useRef(null);
+	useImperativeHandle(ref, () => trigger.current, []);
+	const { Popover, PopoverTrigger, PopoverContent, PopoverTitle } = popover_exports;
+	const entries = /* @__PURE__ */ new Map();
+	const visit = (list, isDisabled) => {
+		for (const node of list) {
+			const entry = {
+				node,
+				isDisabled: isDisabled || !!node.disabled
+			};
+			entries.set(node.key, entry);
+			visit(node.children ?? [], entry.isDisabled);
+		}
+	};
+	visit(nodes, disabled);
+	const changeOpen = (next) => {
+		if (disabled && next) return;
+		if (open === void 0) setInternalOpen(next);
+		if (next !== isOpen) onOpenChange?.(next);
+	};
+	const select = (next) => {
+		const entry = next === null ? null : entries.get(next);
+		if (disabled || next !== null && (!entry || entry.isDisabled)) return;
+		if (value === void 0) setInternalValue(next);
+		if (next !== selected) onChange?.(next, entry?.node ?? null);
+		changeOpen(false);
+	};
+	return /* @__PURE__ */ jsx(DirectionProvider, {
+		direction: resolvedDirection,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "tree-select",
+			dir: resolvedDirection,
+			className: cn("flex w-full min-w-0 items-center gap-1", className),
+			children: [
+				name && /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					form,
+					disabled,
+					value: selected ?? ""
+				}),
+				/* @__PURE__ */ jsxs(Popover, {
+					open: isOpen,
+					onOpenChange: changeOpen,
+					children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+						...props,
+						ref: trigger,
+						disabled,
+						render: /* @__PURE__ */ jsx(Button, { variant: "outlined" }),
+						className: cn("h-9 min-w-0 flex-1 justify-between text-start", classNames?.trigger),
+						onKeyDown: (event) => {
+							onKeyDown?.(event);
+							if (!event.defaultPrevented && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+								event.preventDefault();
+								changeOpen(true);
+							}
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("min-w-0 truncate", selected === null && "text-muted-foreground", classNames?.value),
+							children: selected === null ? placeholder : entries.get(selected)?.node.label ?? selected
+						}), /* @__PURE__ */ jsx(ChevronDown, {
+							"aria-hidden": "true",
+							className: "size-4 shrink-0"
+						})]
+					}), /* @__PURE__ */ jsxs(PopoverContent, {
+						container,
+						dir: resolvedDirection,
+						align: "start",
+						initialFocus: () => tree.current?.querySelector("[role=\"treeitem\"][aria-selected=\"true\"]") ?? tree.current?.querySelector("[role=\"treeitem\"][tabindex=\"0\"]") ?? true,
+						className: cn("w-(--anchor-width) max-w-(--available-width) p-2", classNames?.popup),
+						children: [/* @__PURE__ */ jsx(PopoverTitle, {
+							className: "sr-only",
+							children: popupLabel
+						}), /* @__PURE__ */ jsx(Tree, {
+							ref: tree,
+							nodes,
+							selectedKeys: selected === null ? [] : [selected],
+							onSelect: (keys) => select(keys[0] ?? null),
+							expandedKeys: expanded,
+							onExpand: (keys) => {
+								if (expandedKeys === void 0) setInternalExpanded(keys);
+								onExpand?.(keys);
+							},
+							emptyText,
+							"aria-label": popupLabel,
+							dir: resolvedDirection,
+							className: cn("max-h-[min(20rem,var(--available-height))] overflow-y-auto", classNames?.tree),
+							classNames: classNames?.nodes
+						})]
+					})]
+				}),
+				allowClear && selected !== null && /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: "small",
+					disabled,
+					"aria-label": clearLabel ?? locale.clear ?? DEFAULT_LOCALE.clear,
+					onClick: () => {
+						select(null);
+						trigger.current?.focus();
+					},
+					className: cn("size-8 shrink-0 p-0", classNames?.clear),
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { TreeSelect as default };
+
+//# sourceMappingURL=TreeSelect.mjs.map

package/dist/TreeSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelect.mjs","names":["popover"],"sources":["../src/components/organisms/tree-select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { ChevronDown, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { popover } from '../../core';\nimport Button from '../atoms/button';\nimport Tree, { type Node, type Props as TreeProps } from './tree';\n\nexport type { Node } from './tree';\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'button'>,\n  'children' | 'value' | 'defaultValue' | 'onChange' | 'type'\n> {\n  nodes: readonly Node[];\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null, node: Node | null) => void;\n  expandedKeys?: readonly string[];\n  defaultExpandedKeys?: readonly string[];\n  onExpand?: (keys: string[]) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  allowClear?: boolean;\n  clearLabel?: string;\n  placeholder?: string;\n  popupLabel?: string;\n  emptyText?: ReactNode;\n  container?: HTMLElement;\n  form?: string;\n  classNames?: {\n    trigger?: string;\n    value?: string;\n    clear?: string;\n    popup?: string;\n    tree?: string;\n    nodes?: TreeProps['classNames'];\n  };\n}\n\nconst TreeSelect = ({\n  nodes,\n  value,\n  defaultValue = null,\n  onChange,\n  expandedKeys,\n  defaultExpandedKeys = [],\n  onExpand,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  allowClear = true,\n  clearLabel,\n  placeholder = 'Choose a node',\n  popupLabel = 'Choose a node',\n  emptyText = 'No nodes',\n  container,\n  name,\n  form,\n  disabled = false,\n  className,\n  classNames,\n  dir,\n  ref,\n  onKeyDown,\n  ...props\n}: Props) => {\n  const { direction, locale } = useConfig();\n  const resolvedDirection = dir === 'ltr' || dir === 'rtl' ? dir : direction;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [internalExpanded, setInternalExpanded] =\n    useState<readonly string[]>(defaultExpandedKeys);\n  const selected = value === undefined ? internalValue : value;\n  const isOpen = (open ?? internalOpen) && !disabled;\n  const expanded = expandedKeys ?? internalExpanded;\n  const tree = useRef<HTMLUListElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(ref, () => trigger.current!, []);\n  const { Popover, PopoverTrigger, PopoverContent, PopoverTitle } = popover;\n  const entries = new Map<string, { node: Node; isDisabled: boolean }>();\n  const visit = (list: readonly Node[], isDisabled: boolean) => {\n    for (const node of list) {\n      const entry = { node, isDisabled: isDisabled || !!node.disabled };\n      entries.set(node.key, entry);\n      visit(node.children ?? [], entry.isDisabled);\n    }\n  };\n\n  visit(nodes, disabled);\n\n  const changeOpen = (next: boolean) => {\n    if (disabled && next) return;\n    if (open === undefined) setInternalOpen(next);\n    if (next !== isOpen) onOpenChange?.(next);\n  };\n  const select = (next: string | null) => {\n    const entry = next === null ? null : entries.get(next);\n\n    if (disabled || (next !== null && (!entry || entry.isDisabled))) return;\n    if (value === undefined) setInternalValue(next);\n    if (next !== selected) onChange?.(next, entry?.node ?? null);\n\n    changeOpen(false);\n  };\n\n  return (\n    <DirectionProvider direction={resolvedDirection}>\n      <div\n        data-slot=\"tree-select\"\n        dir={resolvedDirection}\n        className={cn(\n          'flex w-full min-w-0 items-center gap-1',\n          className, //\n        )}\n      >\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            disabled={disabled}\n            value={selected ?? ''}\n          />\n        )}\n        <Popover open={isOpen} onOpenChange={changeOpen}>\n          <PopoverTrigger\n            {...props}\n            ref={trigger}\n            disabled={disabled}\n            render={<Button variant=\"outlined\" />}\n            className={cn(\n              'h-9 min-w-0 flex-1 justify-between text-start',\n              classNames?.trigger, //\n            )}\n            onKeyDown={event => {\n              onKeyDown?.(event);\n\n              if (\n                !event.defaultPrevented &&\n                (event.key === 'ArrowDown' || event.key === 'ArrowUp')\n              ) {\n                event.preventDefault();\n                changeOpen(true);\n              }\n            }}\n          >\n            <span\n              className={cn(\n                'min-w-0 truncate',\n                selected === null && 'text-muted-foreground',\n                classNames?.value, //\n              )}\n            >\n              {selected === null\n                ? placeholder\n                : (entries.get(selected)?.node.label ?? selected)}\n            </span>\n            <ChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n          </PopoverTrigger>\n          <PopoverContent\n            container={container}\n            dir={resolvedDirection}\n            align=\"start\"\n            initialFocus={() =>\n              tree.current?.querySelector<HTMLElement>(\n                '[role=\"treeitem\"][aria-selected=\"true\"]',\n              ) ??\n              tree.current?.querySelector<HTMLElement>(\n                '[role=\"treeitem\"][tabindex=\"0\"]',\n              ) ??\n              true\n            }\n            className={cn(\n              'w-(--anchor-width) max-w-(--available-width) p-2',\n              classNames?.popup, //\n            )}\n          >\n            <PopoverTitle className=\"sr-only\">{popupLabel}</PopoverTitle>\n            <Tree\n              ref={tree}\n              nodes={nodes}\n              selectedKeys={selected === null ? [] : [selected]}\n              onSelect={keys => select(keys[0] ?? null)}\n              expandedKeys={expanded}\n              onExpand={keys => {\n                if (expandedKeys === undefined) setInternalExpanded(keys);\n                onExpand?.(keys);\n              }}\n              emptyText={emptyText}\n              aria-label={popupLabel}\n              dir={resolvedDirection}\n              className={cn(\n                'max-h-[min(20rem,var(--available-height))] overflow-y-auto',\n                classNames?.tree, //\n              )}\n              classNames={classNames?.nodes}\n            />\n          </PopoverContent>\n        </Popover>\n        {allowClear && selected !== null && (\n          <Button\n            variant=\"text\"\n            size=\"small\"\n            disabled={disabled}\n            aria-label={clearLabel ?? locale.clear ?? DEFAULT_LOCALE.clear}\n            onClick={() => {\n              select(null);\n              trigger.current?.focus();\n            }}\n            className={cn(\n              'size-8 shrink-0 p-0',\n              classNames?.clear, //\n            )}\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n          </Button>\n        )}\n      </div>\n    </DirectionProvider>\n  );\n};\n\nexport default TreeSelect;\n"],"mappings":"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"}

package/dist/Typography.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.mts","names":[],"sources":["../src/components/atoms/typography/index.ts"],"mappings":";;;;;;KAMK,6BAA6B;EAChC,aAAa;EACb,kBAAkB;EAClB,aAAa;EACb,cAAc;;cAGV,YAA+B"}
+{"version":3,"file":"Typography.d.mts","names":["TypographyImpl"],"sources":["../src/components/atoms/typography/index.ts"],"mappings":";;;;;;KAMK,6BAA6BA;EAChC,aAAa;EACb,kBAAkB;EAClB,aAAa;EACb,cAAc;;cAGV,YAA+B"}

package/dist/{components/molecules/upload.d.mts → Upload.d.mts}

@@ -1,10 +1,10 @@
 //#region src/components/molecules/upload.d.ts
-interface UploadFile {
+export interface UploadFile {
   uid: string;
   name: string;
   url: string;
 }
-interface Props {
+export interface Props {
   defaultValue?: UploadFile[];
   value?: UploadFile[];
   multiple?: boolean;
@@ -29,5 +29,5 @@ interface Props {
 }
 declare const Upload: ({ defaultValue, value: _value, multiple, accept, maxCount, disabled, className, classNames, onChange: _onChange, onReject }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, UploadFile, Upload as default };
-//# sourceMappingURL=upload.d.mts.map
+export { Upload as default };
+//# sourceMappingURL=Upload.d.mts.map

package/dist/Upload.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.d.mts","names":[],"sources":["../src/components/molecules/upload.tsx"],"mappings":";iBAuBiB;EACf;EACA;EACA;;iBAGe;EACf,eAAe;EACf,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA;IACE;IACA;IACA;;EAEF,YAAY,OAAO;;;;;EAKnB,YAAY;IAAQ,MAAM;IAAM;;;cAO5B,WAAU,cAAA,OAAA,QAAA,UAAA,QAAA,UAAA,UAAA,WAAA,YAAA,UAAA,WAAA,YAWb,0BAAK,IAAA"}

package/dist/{components/molecules/upload.mjs → Upload.mjs}

@@ -1,15 +1,15 @@
 "use client";
-import { cn } from "../../utils.mjs";
-import Button from "../../Button.mjs";
-import { Upload, X } from "lucide-react";
+import { cn } from "./utils.mjs";
+import Button from "./Button.mjs";
 import { useId } from "react";
 import { useControllableState, useFileDrop, useFileToDataUrl } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Upload as Upload$1, X } from "lucide-react";
 //#region src/components/molecules/upload.tsx
 let uidCounter = 0;
 const nextUid = () => uidCounter += 1;
 const isImage = (file) => /^data:image\//.test(file.url) || /\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);
-const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {}, onReject }) => {
+const Upload = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {}, onReject }) => {
 	const inputId = useId();
 	const readAsDataUrl = useFileToDataUrl();
 	const [files, setFiles] = useControllableState({
@@ -60,7 +60,7 @@ const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept =
 			htmlFor: inputId,
 			className: cn("flex cursor-pointer flex-col items-center justify-center gap-2", "rounded-md border border-dashed p-6 text-center", "text-muted-foreground text-sm", "transition-colors", isDragging && "border-primary bg-accent", disabled && "pointer-events-none cursor-not-allowed opacity-50", classNames?.dropzone),
 			children: [
-				/* @__PURE__ */ jsx(Upload, { className: "size-6" }),
+				/* @__PURE__ */ jsx(Upload$1, { className: "size-6" }),
 				/* @__PURE__ */ jsxs("span", { children: [
 					"Click or drag file",
 					multiple ? "s" : "",
@@ -108,6 +108,6 @@ const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept =
 	});
 };
 //#endregion
-export { Upload$1 as default };
+export { Upload as default };
 
-//# sourceMappingURL=upload.mjs.map
+//# sourceMappingURL=Upload.mjs.map

package/dist/Upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.mjs","names":["UploadIcon"],"sources":["../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\n// Monotonic per-session counter used as a uniqueness tiebreaker for file\n// uids. Guarantees a unique suffix even for the same file (identical\n// name/lastModified/size) added twice, which name+lastModified+size alone\n// can't. These uids are internal React keys, not cryptographic, so a plain\n// counter is enough — and it avoids a runtime `uuid` dependency.\nlet uidCounter = 0;\nconst nextUid = () => (uidCounter += 1);\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n  /**\n   * Called once per file that didn't make it in — either bumped by\n   * `maxCount` or failed to read.\n   */\n  onReject?: (info: { file: File; reason: 'max-count' | 'read-error' }) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n  onReject,\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n    const rejected = incoming.slice(remaining);\n\n    rejected.forEach(file => onReject?.({ file, reason: 'max-count' }));\n\n    if (accepted.length === 0) {\n      return;\n    }\n\n    const uploaded = (\n      await Promise.all(\n        accepted.map(async file => {\n          try {\n            return {\n              // `nextUid()` guarantees uniqueness even for the same file\n              // added twice (identical name/lastModified/size), which\n              // name+lastModified+size alone can't — a collision there\n              // corrupted React's item keys and made removeFile's\n              // uid-based filter delete both copies at once.\n              uid: `${file.name}-${file.lastModified}-${file.size}-${nextUid()}`,\n              name: file.name,\n              url: await readAsDataUrl(file),\n            };\n          } catch {\n            onReject?.({ file, reason: 'read-error' });\n            return null;\n          }\n        }),\n      )\n    ).filter((file): file is UploadFile => file !== null);\n\n    if (uploaded.length === 0) {\n      return;\n    }\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      data-slot=\"upload\"\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'm-0 flex list-none flex-col gap-2 p-0',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                // `m-0` completes the list reset the `ul` above starts — see\n                // Radio.Group for the host rule this guards against.\n                'm-0 flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                variant=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":"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"}

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

@@ -1,9 +1,10 @@
 import { OptionValue } from "../option-group.mjs";
 //#region src/components/atoms/checkbox/checkbox.d.ts
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
   placement?: 'left' | 'right';
   defaultChecked?: boolean;
   checked?: boolean;
+  indeterminate?: boolean;
   value?: OptionValue;
   /** Native form field name — participates in `FormData` when set. */
   name?: string;
@@ -11,11 +12,12 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>
   icons?: Partial<{
     checked: React.ReactNode;
     unchecked: React.ReactNode;
+    indeterminate: React.ReactNode;
   }>;
   children?: React.ReactNode;
   onChange?: (checked: boolean) => void;
 }
-declare const Checkbox: ({ placement, value: _value, children, className, icons, disabled, defaultChecked, checked: _checked, name, onChange: _onChange, ...props }: Props) => import("react").JSX.Element;
+declare const Checkbox: ({ placement, value: _value, children, className, icons, disabled, indeterminate, defaultChecked, checked: _checked, name, onChange: _onChange, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Checkbox as default };
+export { Checkbox as default };
 //# sourceMappingURL=checkbox.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"mappings":";;UAeiB,cAAc,KAC7B,MAAM;EAGN;EACA;EACA;EACA,QAAQ;;EAER;EACA;EACA,QAAQ;IAAU,SAAS,MAAM;IAAW,WAAW,MAAM;;EAC7D,WAAW,MAAM;EACjB,YAAY;;cAGR,aAAY,WAAA,OAAA,QAAA,UAAA,WAAA,OAAA,UAAA,gBAAA,SAAA,UAAA,MAAA,UAAA,cAAA,SAYf,0BAAK,IAAA"}
+{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"mappings":";;iBAeiB,cAAc,KAC7B,MAAM;EAGN;EACA;EACA;EACA;EACA,QAAQ;;EAER;EACA;EACA,QAAQ;IACN,SAAS,MAAM;IACf,WAAW,MAAM;IACjB,eAAe,MAAM;;EAEvB,WAAW,MAAM;EACjB,YAAY;;cAGR,aAAY,WAAA,OAAA,QAAA,UAAA,WAAA,OAAA,UAAA,eAAA,gBAAA,SAAA,UAAA,MAAA,UAAA,cAAA,SAaf,0BAAK,IAAA"}

package/dist/components/atoms/checkbox/checkbox.mjs

@@ -2,14 +2,14 @@
 import { cn } from "../../../utils.mjs";
 import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
-import { Square, SquareCheck } from "lucide-react";
 import { useId, useRef } from "react";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Square, SquareCheck, SquareMinus } from "lucide-react";
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
-const Checkbox = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, name, onChange: _onChange = () => {}, ...props }) => {
+const Checkbox = ({ placement = "left", value: _value = "", children, className, icons, disabled, indeterminate = false, defaultChecked, checked: _checked, name, onChange: _onChange = () => {}, ...props }) => {
 	const [checked, setChecked] = useControllableState({
 		value: _checked,
 		defaultValue: defaultChecked ?? false,
@@ -32,6 +32,9 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 	});
 	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
+			ref: (element) => {
+				if (element) element.indeterminate = indeterminate;
+			},
 			id,
 			hidden: true,
 			type: "checkbox",
@@ -46,14 +49,14 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		/* @__PURE__ */ jsx("span", {
 			ref: iconTriggerRef,
 			role: "checkbox",
-			"aria-checked": checked,
+			"aria-checked": indeterminate ? "mixed" : checked,
 			"aria-disabled": disabled,
 			tabIndex: disabled ? -1 : 0,
 			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
 				onChange(!checked);
 			},
-			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
+			children: indeterminate ? icons.indeterminate ?? /* @__PURE__ */ jsx(SquareMinus, {}) : checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {
 			className: cn(cursorClassName, disabled && "opacity-50"),
@@ -65,6 +68,7 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		name,
 		value: itemValue,
 		checked,
+		indeterminate,
 		disabled,
 		className: cn("rounded-sm", cursorClassName),
 		onCheckedChange: onChange

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"checkbox-field\"\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACC;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck, SquareMinus } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  indeterminate?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{\n    checked: React.ReactNode;\n    unchecked: React.ReactNode;\n    indeterminate: React.ReactNode;\n  }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  indeterminate = false,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        ref={element => {\n          if (element) element.indeterminate = indeterminate;\n        }}\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {indeterminate\n          ? (icons.indeterminate ?? <SquareMinus />)\n          : checked\n            ? (icons.checked ?? <SquareCheck />)\n            : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        indeterminate={indeterminate}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"checkbox-field\"\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAuB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBAAgB,OAChB,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACE,MAAK,YAAW;IACd,IAAI,SAAS,QAAQ,gBAAgB;GACvC;GACI;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc,gBAAgB,UAAU;GACxC,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,gBACI,MAAM,iBAAiB,oBAAC,aAAD,CAAc,CAAA,IACtC,UACG,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC/B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACM;EACL;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}

package/dist/components/atoms/checkbox/group.d.mts

@@ -1,6 +1,6 @@
 import { OptionGroupClassNames, OptionValue, Options } from "../option-group.mjs";
 //#region src/components/atoms/checkbox/group.d.ts
-interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
   options?: Options;
   orientation?: 'vertical' | 'horizontal';
   placement?: 'left' | 'right';
@@ -14,5 +14,5 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' |
 }
 declare const Group: ({ orientation, placement, className, classNames, options: _options, name, disabled, defaultValue, value: _value, onChange: _onChange, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { type OptionValue, Props, Group as default };
+export { type OptionValue, Group as default };
 //# sourceMappingURL=group.d.mts.map

package/dist/components/atoms/checkbox/group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"mappings":";;UAkBiB,cAAc,KAC7B,MAAM;EAGN,UAAU;EACV;EACA;EACA,aAAa;EACb,eAAe;EACf,QAAQ;;EAER;EACA;EACA,YAAY,QAAQ;;cAGhB,UAAS,aAAA,WAAA,WAAA,YAAA,SAAA,UAAA,MAAA,UAAA,cAAA,OAAA,QAAA,UAAA,cAAA,SAYZ,0BAAK,IAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"mappings":";;iBAkBiB,cAAc,KAC7B,MAAM;EAGN,UAAU;EACV;EACA;EACA,aAAa;EACb,eAAe;EACf,QAAQ;;EAER;EACA;EACA,YAAY,QAAQ;;cAGhB,UAAS,aAAA,WAAA,WAAA,YAAA,SAAA,UAAA,MAAA,UAAA,cAAA,OAAA,QAAA,UAAA,cAAA,SAYZ,0BAAK,IAAA"}

package/dist/components/atoms/float-button/back-top.d.mts

@@ -1,11 +1,11 @@
 import { Props as Props$1 } from "../../../Button.mjs";
 import { MouseEvent } from "react";
 //#region src/components/atoms/float-button/back-top.d.ts
-interface Props extends Props$1 {
+export interface Props extends Props$1 {
   visibilityHeight?: number;
   onClick?: (e: MouseEvent<HTMLElement>) => void;
 }
 declare const BackTop: ({ ref, visibilityHeight, className, onClick, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, BackTop as default };
+export { BackTop as default };
 //# sourceMappingURL=back-top.d.mts.map

package/dist/components/atoms/float-button/back-top.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"back-top.d.mts","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"mappings":";;;UAaiB,cAAc;EAC7B;EACA,WAAW,GAAG,WAAW;;cAGrB,YAAW,KAAA,kBAAA,WAAA,YAAA,SAMd,0BAAK,IAAA"}
+{"version":3,"file":"back-top.d.mts","names":["ButtonProps"],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"mappings":";;;iBAaiB,cAAcA;EAC7B;EACA,WAAW,GAAG,WAAW;;cAGrB,YAAW,KAAA,kBAAA,WAAA,YAAA,SAMd,0BAAK,IAAA"}

package/dist/components/atoms/float-button/back-top.mjs

@@ -2,10 +2,10 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import FloatButton from "./float-button.mjs";
-import { ArrowUp } from "lucide-react";
 import { useRef } from "react";
 import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
 import { jsx } from "react/jsx-runtime";
+import { ArrowUp } from "lucide-react";
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ ref, visibilityHeight = 450, className, onClick, ...props }) => {
 	const { locale } = useConfig();

package/dist/components/atoms/float-button/float-button.d.mts

@@ -1,7 +1,7 @@
 import { Props as Props$1 } from "../../../Button.mjs";
 //#region src/components/atoms/float-button/float-button.d.ts
-interface Props extends Props$1 {}
+export interface Props extends Props$1 {}
 declare const FloatButton: ({ className, children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, FloatButton as default };
+export { FloatButton as default };
 //# sourceMappingURL=float-button.d.mts.map

package/dist/components/atoms/float-button/float-button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"float-button.d.mts","names":[],"sources":["../../../../src/components/atoms/float-button/float-button.tsx"],"mappings":";;UAKiB,cAAc;cAEzB,gBAAe,WAAA,aAAA,SAAmC,0BAAK,IAAA"}
+{"version":3,"file":"float-button.d.mts","names":["ButtonProps"],"sources":["../../../../src/components/atoms/float-button/float-button.tsx"],"mappings":";;iBAKiB,cAAcA;cAEzB,gBAAe,WAAA,aAAA,SAAmC,0BAAK,IAAA"}

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

@@ -1,24 +1,38 @@
-import Avatar, { Props } from "../../Avatar.mjs";
-import Badge, { Props as Props$1 } from "../../Badge.mjs";
-import Button from "../../Button.mjs";
-import Segmented, { Props as Props$2 } from "../../Segmented.mjs";
-import Tag from "../../Tag.mjs";
+import AutoComplete, { Option, Props } from "../../AutoComplete.mjs";
+import Avatar, { Props as Props$1 } from "../../Avatar.mjs";
+import Badge, { Props as Props$2 } from "../../Badge.mjs";
+import Button, { Props as Props$3 } from "../../Button.mjs";
+import Cascader, { Option as Option$1, Props as Props$4 } from "../../Cascader.mjs";
+import { Props as Props$5 } from "./checkbox/checkbox.mjs";
+import Checkbox from "../../Checkbox.mjs";
+import ColorPicker, { Props as Props$6 } from "../../ColorPicker.mjs";
+import DatePicker, { Props as Props$7 } from "../../DatePicker.mjs";
+import Divider, { Props as Props$8 } from "../../Divider.mjs";
+import { Props as Props$9 } from "./float-button/float-button.mjs";
+import FloatButton from "../../FloatButton.mjs";
+import { Props as Props$10 } from "./input/input.mjs";
+import { Props as Props$11 } from "./input/number.mjs";
+import { Props as Props$12 } from "./input/otp.mjs";
+import Input from "../../Input.mjs";
+import Mentions, { Option as Option$2, Props as Props$13 } from "../../Mentions.mjs";
+import Popover, { Props as Props$14 } from "../../Popover.mjs";
+import Progress, { Props as Props$15 } from "../../Progress.mjs";
+import { Props as Props$16 } from "./radio/radio.mjs";
+import Radio from "../../Radio.mjs";
+import Rate, { Props as Props$17 } from "../../Rate.mjs";
+import RichTextEditor, { Props as Props$18 } from "./rich-text-editor/rich-text-editor.mjs";
+import "../../RichTextEditor.mjs";
+import Segmented, { Props as Props$19 } from "../../Segmented.mjs";
+import Select, { Props as Props$20 } from "../../Select.mjs";
+import { Props as Props$21 } from "./skeleton/skeleton.mjs";
+import Skeleton from "../../Skeleton.mjs";
+import Slider, { Props as Props$22 } from "./slider/slider.mjs";
+import Spin, { Props as Props$23 } from "../../Spin.mjs";
+import Switch, { Props as Props$24 } from "../../Switch.mjs";
+import Tag, { Props as Props$25 } from "../../Tag.mjs";
+import TimePicker, { Props as Props$26 } from "../../TimePicker.mjs";
+import ToggleGroup, { Option as Option$3, Props as Props$27 } from "../../ToggleGroup.mjs";
+import Tooltip, { Props as Props$28 } from "../../Tooltip.mjs";
+import { Props as Props$29 } from "./typography/typography.mjs";
 import Typography from "../../Typography.mjs";
-import Checkbox from "./checkbox/index.mjs";
-import ColorPicker from "./color-picker.mjs";
-import DatePicker from "./date-picker.mjs";
-import FloatButton from "./float-button/index.mjs";
-import { Props as Props$3 } from "./input/number.mjs";
-import Input from "./input/index.mjs";
-import Popover from "./popover.mjs";
-import Progress from "./progress.mjs";
-import Radio from "./radio/index.mjs";
-import RichTextEditor from "./rich-text-editor/rich-text-editor.mjs";
-import "./rich-text-editor/index.mjs";
-import Select from "./select.mjs";
-import Skeleton from "./skeleton/index.mjs";
-import Slider from "./slider/slider.mjs";
-import Spin from "./spin.mjs";
-import Switch from "./switch.mjs";
-import Tooltip from "./tooltip.mjs";
-export { Avatar, type Props as AvatarProps, Badge, type Props$1 as BadgeProps, Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, type Props$3 as InputNumberProps, Popover, Progress, Radio, RichTextEditor, Segmented, type Props$2 as SegmentedProps, Select, Skeleton, Slider, Spin, Switch, Tag, Tooltip, Typography };
+export { AutoComplete, type Option as AutoCompleteOption, type Props as AutoCompleteProps, Avatar, type Props$1 as AvatarProps, Badge, type Props$2 as BadgeProps, Button, type Props$3 as ButtonProps, Cascader, type Option$1 as CascaderOption, type Props$4 as CascaderProps, Checkbox, type Props$5 as CheckboxProps, ColorPicker, type Props$6 as ColorPickerProps, DatePicker, type Props$7 as DatePickerProps, Divider, type Props$8 as DividerProps, FloatButton, type Props$9 as FloatButtonProps, Input, type Props$11 as InputNumberProps, type Props$12 as InputOTPProps, type Props$10 as InputProps, Mentions, type Option$2 as MentionsOption, type Props$13 as MentionsProps, Popover, type Props$14 as PopoverProps, Progress, type Props$15 as ProgressProps, Radio, type Props$16 as RadioProps, Rate, type Props$17 as RateProps, RichTextEditor, type Props$18 as RichTextEditorProps, Segmented, type Props$19 as SegmentedProps, Select, type Props$20 as SelectProps, Skeleton, type Props$21 as SkeletonProps, Slider, type Props$22 as SliderProps, Spin, type Props$23 as SpinProps, Switch, type Props$24 as SwitchProps, Tag, type Props$25 as TagProps, TimePicker, type Props$26 as TimePickerProps, ToggleGroup, type Option$3 as ToggleGroupOption, type Props$27 as ToggleGroupProps, Tooltip, type Props$28 as TooltipProps, Typography, type Props$29 as TypographyProps };

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

@@ -1,5 +1,6 @@
 //#region src/components/atoms/input/input.d.ts
-declare const Input: ({ ref, ...props }: React.ComponentPropsWithRef<"input">) => import("react").JSX.Element;
+export type Props = React.ComponentPropsWithRef<'input'>;
+declare const Input: ({ ref, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { Input as default };
 //# sourceMappingURL=input.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.mts","names":[],"sources":["../../../../src/components/atoms/input/input.tsx"],"mappings":";cAIM,UAAS,QAAA,SAAmB,MAAM,mDAA8B,IAAA"}
+{"version":3,"file":"input.d.mts","names":[],"sources":["../../../../src/components/atoms/input/input.tsx"],"mappings":";YAIY,QAAQ,MAAM;cAEpB,UAAS,QAAA,SAAmB,0BAAK,IAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '../../../core';\n\nconst { Input: Core } = input;\n\nconst Input = ({ ref, ...props }: React.ComponentPropsWithRef<'input'>) => {\n  return <Core ref={ref} {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;AAEA,MAAM,EAAE,OAAO,SAASA;AAExB,MAAM,SAAS,EAAE,KAAK,GAAG,YAAkD;CACzE,OAAO,oBAAC,MAAD;EAAW;EAAK,GAAI;CAAQ,CAAA;AACrC"}
+{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '../../../core';\n\nconst { Input: Core } = input;\n\nexport type Props = React.ComponentPropsWithRef<'input'>;\n\nconst Input = ({ ref, ...props }: Props) => {\n  return <Core ref={ref} {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;AAEA,MAAM,EAAE,OAAO,SAASA;AAIxB,MAAM,SAAS,EAAE,KAAK,GAAG,YAAmB;CAC1C,OAAO,oBAAC,MAAD;EAAW;EAAK,GAAI;CAAQ,CAAA;AACrC"}

package/dist/components/atoms/input/number.d.mts

@@ -2,7 +2,7 @@ import { ComponentSize } from "../../../providers/config/types.mjs";
 import * as React$1 from "react";
 import { NumberField, NumberFieldRoot } from "@base-ui/react/number-field";
 //#region src/components/atoms/input/number.d.ts
-interface Props extends Omit<React$1.ComponentProps<typeof NumberField.Root>, 'children' | 'onValueChange'> {
+export interface Props extends Omit<React$1.ComponentProps<typeof NumberField.Root>, 'children' | 'onValueChange'> {
   /** Visible input label. Alternatively, pair `id` with an external label. */
   label?: string;
   /** Called with the numeric value (or null when cleared). */
@@ -19,5 +19,5 @@ interface Props extends Omit<React$1.ComponentProps<typeof NumberField.Root>, 'c
 }
 declare const Number: ({ ref, id, label, onChange, placeholder, size, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: Props) => React$1.JSX.Element;
 //#endregion
-export { Props, Number as default };
+export { Number as default };
 //# sourceMappingURL=number.d.mts.map

package/dist/components/atoms/input/number.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"number.d.mts","names":[],"sources":["../../../../src/components/atoms/input/number.tsx"],"mappings":";;;;UAmBiB,cAAc,KAC7B,QAAM,sBAAsB,YAAY;;EAIxC;;EAEA,YACE,sBACA,cAAc,gBAAgB;EAEhC;EACA,OAAO;EACP;IACE;IACA;IACA;IACA;IACA;;;cAIE,WAAU,KAAA,IAAA,OAAA,UAAA,aAAA,MAAA,WAAA,0BAAA,8BAAA,oCAAA,oBAAA,SAab,UAAK,QAAA,IAAA"}
+{"version":3,"file":"number.d.mts","names":["React"],"sources":["../../../../src/components/atoms/input/number.tsx"],"mappings":";;;;iBAmBiB,cAAc,KAC7BA,QAAM,sBAAsB,YAAY;;EAIxC;;EAEA,YACE,sBACA,cAAc,gBAAgB;EAEhC;EACA,OAAO;EACP;IACE;IACA;IACA;IACA;IACA;;;cAIE,WAAU,KAAA,IAAA,OAAA,UAAA,aAAA,MAAA,WAAA,0BAAA,8BAAA,oCAAA,oBAAA,SAab,UAAKA,QAAA,IAAA"}

package/dist/components/atoms/input/number.mjs

@@ -3,9 +3,9 @@ import { cn } from "../../../utils.mjs";
 import { useConfig } from "../../../providers/config/context.mjs";
 import Button from "../../../Button.mjs";
 import Input from "./input.mjs";
-import { Minus, Plus } from "lucide-react";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Minus, Plus } from "lucide-react";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/components/atoms/input/number.tsx
 const sizes = {

package/dist/components/atoms/input/otp.d.mts

@@ -0,0 +1,26 @@
+import { ComponentSize } from "../../../providers/config/types.mjs";
+import * as React$1 from "react";
+import { OTPField, OTPFieldRoot } from "@base-ui/react/otp-field";
+//#region src/components/atoms/input/otp.d.ts
+export interface Props extends Omit<React$1.ComponentProps<typeof OTPField.Root>, 'children' | 'onValueChange' | 'onValueComplete' | 'autoSubmit' | 'render' | 'className' | 'length'> {
+  /** Positive safe integer slot count. Invalid or omitted values use six. */
+  length?: number;
+  className?: string;
+  label?: string;
+  onChange?: (value: string, details: OTPFieldRoot.ChangeEventDetails) => void;
+  onComplete?: (value: string, details: OTPFieldRoot.CompleteEventDetails) => void;
+  size?: ComponentSize;
+  inputRef?: React$1.Ref<HTMLInputElement>;
+  placeholder?: string;
+  /** Localize the accessible name of each slot after the first. */
+  getSlotLabel?: (index: number, length: number) => string;
+  classNames?: {
+    label?: string;
+    group?: string;
+    input?: string;
+  };
+}
+declare const OTP: ({ label, id, length, size, onChange, onComplete, inputRef, placeholder, getSlotLabel, className, classNames, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { OTP as default };
+//# sourceMappingURL=otp.d.mts.map

package/dist/components/atoms/input/otp.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp.d.mts","names":["React"],"sources":["../../../../src/components/atoms/input/otp.tsx"],"mappings":";;;;iBAmBiB,cAAc,KAC7BA,QAAM,sBAAsB,SAAS;;EAUrC;EACA;EACA;EACA,YAAY,eAAe,SAAS,aAAa;EACjD,cACE,eACA,SAAS,aAAa;EAExB,OAAO;EACP,WAAWA,QAAM,IAAI;EACrB;;EAEA,gBAAgB,eAAe;EAC/B;IAAe;IAAgB;IAAgB;;;cAG3C,QAAO,OAAA,IAAA,QAAA,MAAA,UAAA,YAAA,UAAA,aAAA,cAAA,WAAA,0BAAA,8BAAA,gCAAA,gBAAA,SAgBV,UAAKA,QAAA,IAAA"}