@jbpark/ui-kit 10.1.0 → 10.3.0

package/dist/Popconfirm.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "./utils.mjs";
+import Button from "./Button.mjs";
+import Typography from "./Typography.mjs";
+import Popover from "./components/atoms/popover.mjs";
+import * as React$1 from "react";
+import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/popconfirm.tsx
+const Popconfirm = ({ children, title, description, onConfirm, onCancel, onConfirmError, errorMessage = "Unable to complete the action. Please try again.", confirmText = "Confirm", cancelText = "Cancel", disabled = false, confirmButtonProps, cancelButtonProps, className, classNames, open: controlledOpen, defaultOpen, onOpenChange, ...props }) => {
+	const [open, setOpen] = useControllableState({
+		value: controlledOpen,
+		defaultValue: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
+	const [pending, setPending] = React$1.useState(false);
+	const [failed, setFailed] = React$1.useState(false);
+	const busy = React$1.useRef(false);
+	const mounted = React$1.useRef(false);
+	const generation = React$1.useRef(0);
+	const descriptionId = React$1.useId();
+	const titleId = React$1.useId();
+	React$1.useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			generation.current += 1;
+		};
+	}, []);
+	React$1.useEffect(() => {
+		if (!open || disabled) generation.current += 1;
+	}, [open, disabled]);
+	const handleOpenChange = (nextOpen) => {
+		if (busy.current || disabled && nextOpen) return;
+		setFailed(false);
+		setOpen(nextOpen);
+	};
+	const handleConfirm = async () => {
+		if (busy.current || disabled) return;
+		busy.current = true;
+		setPending(true);
+		setFailed(false);
+		const request = generation.current;
+		try {
+			await onConfirm?.();
+			if (mounted.current && request === generation.current) setOpen(false);
+		} catch (error) {
+			if (mounted.current && request === generation.current) {
+				setFailed(true);
+				onConfirmError?.(error);
+			}
+		} finally {
+			busy.current = false;
+			if (mounted.current) setPending(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		open: open && !disabled,
+		onOpenChange: handleOpenChange,
+		className: cn("max-w-[calc(100vw-2rem)]", className),
+		"aria-labelledby": titleId,
+		"aria-describedby": description ? descriptionId : void 0,
+		content: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "popconfirm",
+			"aria-busy": pending,
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ jsx(Typography.Title, {
+					level: 6,
+					id: titleId,
+					className: classNames?.title,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("div", {
+					id: descriptionId,
+					className: cn("text-muted-foreground text-sm", classNames?.description),
+					children: description
+				}),
+				failed && /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					className: cn("text-destructive text-sm", classNames?.error),
+					children: errorMessage
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex justify-end gap-2", classNames?.actions),
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						...cancelButtonProps,
+						htmlType: "button",
+						disabled: pending,
+						className: cn(cancelButtonProps?.className, classNames?.cancel),
+						onClick: () => {
+							if (busy.current) return;
+							setFailed(false);
+							setOpen(false);
+							onCancel?.();
+						},
+						children: cancelText
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						type: "primary",
+						...confirmButtonProps,
+						htmlType: "button",
+						loading: pending,
+						className: cn(confirmButtonProps?.className, classNames?.confirm),
+						onClick: () => void handleConfirm(),
+						children: confirmText
+					})]
+				})
+			]
+		}),
+		children
+	});
+};
+//#endregion
+export { Popconfirm as default };
+
+//# sourceMappingURL=Popconfirm.mjs.map

package/dist/Popconfirm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popconfirm.mjs","names":["React"],"sources":["../src/components/molecules/popconfirm.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button, { type Props as ButtonProps } from '../atoms/button';\nimport Popover, { type Props as PopoverProps } from '../atoms/popover';\nimport Typography from '../atoms/typography';\n\ntype ActionProps = Omit<\n  ButtonProps,\n  'children' | 'onClick' | 'loading' | 'disabled'\n>;\n\nexport interface Props extends Omit<\n  PopoverProps,\n  'content' | 'title' | 'children'\n> {\n  children: React.ReactElement;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** A fulfilled promise closes the popup; a thrown error keeps it open. */\n  onConfirm?: () => void | Promise<void>;\n  /** Only the Cancel button invokes this callback. */\n  onCancel?: () => void;\n  onConfirmError?: (error: unknown) => void;\n  errorMessage?: React.ReactNode;\n  confirmText?: React.ReactNode;\n  cancelText?: React.ReactNode;\n  disabled?: boolean;\n  confirmButtonProps?: ActionProps;\n  cancelButtonProps?: ActionProps;\n  classNames?: {\n    title?: string;\n    description?: string;\n    actions?: string;\n    confirm?: string;\n    cancel?: string;\n    error?: string;\n  };\n}\n\nconst Popconfirm = ({\n  children,\n  title,\n  description,\n  onConfirm,\n  onCancel,\n  onConfirmError,\n  errorMessage = 'Unable to complete the action. Please try again.',\n  confirmText = 'Confirm',\n  cancelText = 'Cancel',\n  disabled = false,\n  confirmButtonProps,\n  cancelButtonProps,\n  className,\n  classNames,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: Props) => {\n  const [open, setOpen] = useControllableState<boolean>({\n    value: controlledOpen,\n    defaultValue: defaultOpen ?? false,\n    onChange: onOpenChange,\n  });\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const busy = React.useRef(false);\n  const mounted = React.useRef(false);\n  const generation = React.useRef(0);\n  const descriptionId = React.useId();\n  const titleId = React.useId();\n\n  React.useEffect(() => {\n    mounted.current = true;\n\n    return () => {\n      mounted.current = false;\n      generation.current += 1;\n    };\n  }, []);\n\n  React.useEffect(() => {\n    if (!open || disabled) {\n      generation.current += 1;\n    }\n  }, [open, disabled]);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (busy.current || (disabled && nextOpen)) {\n      return;\n    }\n\n    setFailed(false);\n    setOpen(nextOpen);\n  };\n\n  const handleConfirm = async () => {\n    if (busy.current || disabled) {\n      return;\n    }\n\n    busy.current = true;\n    setPending(true);\n    setFailed(false);\n    const request = generation.current;\n\n    try {\n      await onConfirm?.();\n\n      if (mounted.current && request === generation.current) {\n        setOpen(false);\n      }\n    } catch (error) {\n      if (mounted.current && request === generation.current) {\n        setFailed(true);\n        onConfirmError?.(error);\n      }\n    } finally {\n      busy.current = false;\n\n      if (mounted.current) {\n        setPending(false);\n      }\n    }\n  };\n\n  return (\n    <Popover\n      {...props}\n      open={open && !disabled}\n      onOpenChange={handleOpenChange}\n      className={cn(\n        'max-w-[calc(100vw-2rem)]',\n        className, //\n      )}\n      aria-labelledby={titleId}\n      aria-describedby={description ? descriptionId : undefined}\n      content={\n        <div data-slot=\"popconfirm\" aria-busy={pending} className=\"space-y-3\">\n          <Typography.Title\n            level={6}\n            id={titleId}\n            className={classNames?.title}\n          >\n            {title}\n          </Typography.Title>\n          {description && (\n            <div\n              id={descriptionId}\n              className={cn(\n                'text-muted-foreground text-sm',\n                classNames?.description, //\n              )}\n            >\n              {description}\n            </div>\n          )}\n          {failed && (\n            <div\n              role=\"alert\"\n              className={cn(\n                'text-destructive text-sm',\n                classNames?.error, //\n              )}\n            >\n              {errorMessage}\n            </div>\n          )}\n          <div\n            className={cn(\n              'flex justify-end gap-2',\n              classNames?.actions, //\n            )}\n          >\n            <Button\n              size=\"small\"\n              {...cancelButtonProps}\n              htmlType=\"button\"\n              disabled={pending}\n              className={cn(\n                cancelButtonProps?.className,\n                classNames?.cancel, //\n              )}\n              onClick={() => {\n                if (busy.current) {\n                  return;\n                }\n\n                setFailed(false);\n                setOpen(false);\n                onCancel?.();\n              }}\n            >\n              {cancelText}\n            </Button>\n            <Button\n              size=\"small\"\n              type=\"primary\"\n              {...confirmButtonProps}\n              htmlType=\"button\"\n              loading={pending}\n              className={cn(\n                confirmButtonProps?.className,\n                classNames?.confirm, //\n              )}\n              onClick={() => void handleConfirm()}\n            >\n              {confirmText}\n            </Button>\n          </div>\n        </div>\n      }\n    >\n      {children}\n    </Popover>\n  );\n};\n\nexport default Popconfirm;\n"],"mappings":";;;;;;;;;AA6CA,MAAM,cAAc,EAClB,UACA,OACA,aACA,WACA,UACA,gBACA,eAAe,oDACf,cAAc,WACd,aAAa,UACb,WAAW,OACX,oBACA,mBACA,WACA,YACA,MAAM,gBACN,aACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,WAAW,qBAA8B;EACpD,OAAO;EACP,cAAc,eAAe;EAC7B,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,KAAK;CAChD,MAAM,OAAOA,QAAM,OAAO,KAAK;CAC/B,MAAM,UAAUA,QAAM,OAAO,KAAK;CAClC,MAAM,aAAaA,QAAM,OAAO,CAAC;CACjC,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,QAAM,gBAAgB;EACpB,QAAQ,UAAU;EAElB,aAAa;GACX,QAAQ,UAAU;GAClB,WAAW,WAAW;EACxB;CACF,GAAG,CAAC,CAAC;CAEL,QAAM,gBAAgB;EACpB,IAAI,CAAC,QAAQ,UACX,WAAW,WAAW;CAE1B,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,oBAAoB,aAAsB;EAC9C,IAAI,KAAK,WAAY,YAAY,UAC/B;EAGF,UAAU,KAAK;EACf,QAAQ,QAAQ;CAClB;CAEA,MAAM,gBAAgB,YAAY;EAChC,IAAI,KAAK,WAAW,UAClB;EAGF,KAAK,UAAU;EACf,WAAW,IAAI;EACf,UAAU,KAAK;EACf,MAAM,UAAU,WAAW;EAE3B,IAAI;GACF,MAAM,YAAY;GAElB,IAAI,QAAQ,WAAW,YAAY,WAAW,SAC5C,QAAQ,KAAK;EAEjB,SAAS,OAAO;GACd,IAAI,QAAQ,WAAW,YAAY,WAAW,SAAS;IACrD,UAAU,IAAI;IACd,iBAAiB,KAAK;GACxB;EACF,UAAU;GACR,KAAK,UAAU;GAEf,IAAI,QAAQ,SACV,WAAW,KAAK;EAEpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,MAAM,QAAQ,CAAC;EACf,cAAc;EACd,WAAW,GACT,4BACA,SACF;EACA,mBAAiB;EACjB,oBAAkB,cAAc,gBAAgB,KAAA;EAChD,SACE,qBAAC,OAAD;GAAK,aAAU;GAAa,aAAW;GAAS,WAAU;GAA1D,UAAA;IACE,oBAAC,WAAW,OAAZ;KACE,OAAO;KACP,IAAI;KACJ,WAAW,YAAY;KAEtB,UAAA;IACe,CAAA;IACjB,eACC,oBAAC,OAAD;KACE,IAAI;KACJ,WAAW,GACT,iCACA,YAAY,WACd;KAEC,UAAA;IACE,CAAA;IAEN,UACC,oBAAC,OAAD;KACE,MAAK;KACL,WAAW,GACT,4BACA,YAAY,KACd;KAEC,UAAA;IACE,CAAA;IAEP,qBAAC,OAAD;KACE,WAAW,GACT,0BACA,YAAY,OACd;KAJF,UAAA,CAME,oBAAC,QAAD;MACE,MAAK;MACL,GAAI;MACJ,UAAS;MACT,UAAU;MACV,WAAW,GACT,mBAAmB,WACnB,YAAY,MACd;MACA,eAAe;OACb,IAAI,KAAK,SACP;OAGF,UAAU,KAAK;OACf,QAAQ,KAAK;OACb,WAAW;MACb;MAEC,UAAA;KACK,CAAA,GACR,oBAAC,QAAD;MACE,MAAK;MACL,MAAK;MACL,GAAI;MACJ,UAAS;MACT,SAAS;MACT,WAAW,GACT,oBAAoB,WACpB,YAAY,OACd;MACA,eAAe,KAAK,cAAc;MAEjC,UAAA;KACK,CAAA,CACL;;GACF;;EAGN;CACM,CAAA;AAEb"}

package/dist/Rate.d.mts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/atoms/rate.d.ts
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'value' | 'defaultValue' | 'onChange'> {
+  /** Positive whole-step count. Defaults to five. */
+  count?: number;
+  /** Zero means no rating. Values are rounded down and clamped to 0–count. */
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  /** Activating the selected score clears it to zero. Defaults to true. */
+  allowClear?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  icon?: ReactNode;
+  getItemLabel?: (score: number, count: number) => string;
+  getValueText?: (value: number, count: number) => string;
+  classNames?: {
+    item?: string;
+    filledItem?: string;
+    icon?: string;
+  };
+}
+declare const Rate: ({ count, value, defaultValue, onChange, allowClear, disabled, readOnly, name, icon, getItemLabel, getValueText, className, classNames, dir, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Rate as default };
+//# sourceMappingURL=Rate.d.mts.map

package/dist/Rate.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.d.mts","names":[],"sources":["../src/components/atoms/rate.tsx"],"mappings":";;iBAmBiB,cAAc,KAC7B;;EAIA;;EAEA;EACA;EACA,YAAY;;EAEZ;EACA;EACA;EACA;EACA,OAAO;EACP,gBAAgB,eAAe;EAC/B,gBAAgB,eAAe;EAC/B;IAAe;IAAe;IAAqB;;;cAG/C,SAAQ,OAAA,OAAA,cAAA,UAAA,YAAA,UAAA,UAAA,MAAA,MAAA,cAAA,cAAA,WAAA,YAAA,mBAAA,8BAAA,oCAAA,oBAAA,SAoBX,0BAAK,IAAA"}

package/dist/Rate.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { useId, useState } from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Star } from "lucide-react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/atoms/rate.tsx
+const Rate = ({ count = 5, value, defaultValue = 0, onChange, allowClear = true, disabled = false, readOnly = false, name, icon, getItemLabel = (score, total) => `${score} of ${total} stars`, getValueText = (score, total) => score === 0 ? "No rating" : `${score} of ${total} stars`, className, classNames, dir, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const total = Number.isFinite(count) ? Math.max(1, Math.floor(count)) : 5;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const rawValue = value ?? internalValue;
+	const score = Number.isFinite(rawValue) ? Math.min(total, Math.max(0, Math.floor(rawValue))) : 0;
+	const { direction } = useConfig();
+	const resolvedDirection = dir === "ltr" || dir === "rtl" ? dir : direction;
+	const statusId = useId();
+	const changeValue = (next) => {
+		if (disabled || readOnly || next === score) return;
+		if (value === void 0) setInternalValue(next);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(DirectionProvider, {
+		direction: resolvedDirection,
+		children: /* @__PURE__ */ jsxs(RadioGroup, {
+			...props,
+			"data-slot": "rate",
+			dir: dir ?? resolvedDirection,
+			"aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Rating"),
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": [ariaDescribedBy, statusId].filter(Boolean).join(" "),
+			disabled,
+			readOnly,
+			name,
+			value: score === 0 ? "" : String(score),
+			onValueChange: (next) => changeValue(Number(next)),
+			className: cn("inline-flex w-fit max-w-full flex-wrap items-center gap-1", className),
+			children: [Array.from({ length: total }, (_, index) => {
+				const itemScore = index + 1;
+				const isFilled = itemScore <= score;
+				return /* @__PURE__ */ jsx(Radio.Root, {
+					value: String(itemScore),
+					nativeButton: true,
+					"data-slot": "rate-item",
+					"data-filled": isFilled ? "" : void 0,
+					"aria-label": getItemLabel(itemScore, total),
+					onClick: (event) => {
+						if (allowClear && itemScore === score && !disabled && !readOnly) {
+							event.preventDefault();
+							changeValue(0);
+						}
+					},
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						disabled,
+						className: cn("text-muted-foreground size-8 shrink-0 p-1", readOnly && "cursor-default", isFilled && "text-primary", classNames?.item, isFilled && classNames?.filledItem)
+					}),
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "rate-icon",
+						"aria-hidden": "true",
+						className: cn("flex size-5 items-center justify-center [&>svg]:size-full", isFilled && "[&>svg]:fill-current", classNames?.icon),
+						children: icon ?? /* @__PURE__ */ jsx(Star, {})
+					})
+				}, itemScore);
+			}), /* @__PURE__ */ jsx("span", {
+				id: statusId,
+				"data-slot": "rate-status",
+				className: "sr-only",
+				"aria-live": "polite",
+				children: getValueText(score, total)
+			})]
+		})
+	});
+};
+//#endregion
+export { Rate as default };
+
+//# sourceMappingURL=Rate.mjs.map

package/dist/Rate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.mjs","names":[],"sources":["../src/components/atoms/rate.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { Radio } from '@base-ui/react/radio';\nimport { RadioGroup } from '@base-ui/react/radio-group';\nimport { Star } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'value' | 'defaultValue' | 'onChange'\n> {\n  /** Positive whole-step count. Defaults to five. */\n  count?: number;\n  /** Zero means no rating. Values are rounded down and clamped to 0–count. */\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  /** Activating the selected score clears it to zero. Defaults to true. */\n  allowClear?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  icon?: ReactNode;\n  getItemLabel?: (score: number, count: number) => string;\n  getValueText?: (value: number, count: number) => string;\n  classNames?: { item?: string; filledItem?: string; icon?: string };\n}\n\nconst Rate = ({\n  count = 5,\n  value,\n  defaultValue = 0,\n  onChange,\n  allowClear = true,\n  disabled = false,\n  readOnly = false,\n  name,\n  icon,\n  getItemLabel = (score, total) => `${score} of ${total} stars`,\n  getValueText = (score, total) =>\n    score === 0 ? 'No rating' : `${score} of ${total} stars`,\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: Props) => {\n  const total = Number.isFinite(count) ? Math.max(1, Math.floor(count)) : 5;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const rawValue = value ?? internalValue;\n  const score = Number.isFinite(rawValue)\n    ? Math.min(total, Math.max(0, Math.floor(rawValue)))\n    : 0;\n  const { direction } = useConfig();\n  const resolvedDirection = dir === 'ltr' || dir === 'rtl' ? dir : direction;\n  const statusId = useId();\n\n  const changeValue = (next: number) => {\n    if (disabled || readOnly || next === score) {\n      return;\n    }\n\n    if (value === undefined) {\n      setInternalValue(next);\n    }\n\n    onChange?.(next);\n  };\n\n  return (\n    <DirectionProvider direction={resolvedDirection}>\n      <RadioGroup\n        {...props}\n        data-slot=\"rate\"\n        dir={dir ?? resolvedDirection}\n        aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : 'Rating')}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={[ariaDescribedBy, statusId].filter(Boolean).join(' ')}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        value={score === 0 ? '' : String(score)}\n        onValueChange={next => changeValue(Number(next))}\n        className={cn(\n          'inline-flex w-fit max-w-full flex-wrap items-center gap-1',\n          className, //\n        )}\n      >\n        {Array.from({ length: total }, (_, index) => {\n          const itemScore = index + 1;\n          const isFilled = itemScore <= score;\n\n          return (\n            <Radio.Root\n              key={itemScore}\n              value={String(itemScore)}\n              nativeButton\n              data-slot=\"rate-item\"\n              data-filled={isFilled ? '' : undefined}\n              aria-label={getItemLabel(itemScore, total)}\n              onClick={event => {\n                if (\n                  allowClear &&\n                  itemScore === score &&\n                  !disabled &&\n                  !readOnly\n                ) {\n                  event.preventDefault();\n                  changeValue(0);\n                }\n              }}\n              render={\n                <Button\n                  variant=\"text\"\n                  size=\"small\"\n                  disabled={disabled}\n                  className={cn(\n                    'text-muted-foreground size-8 shrink-0 p-1',\n                    readOnly && 'cursor-default',\n                    isFilled && 'text-primary',\n                    classNames?.item,\n                    isFilled && classNames?.filledItem, //\n                  )}\n                />\n              }\n            >\n              <span\n                data-slot=\"rate-icon\"\n                aria-hidden=\"true\"\n                className={cn(\n                  'flex size-5 items-center justify-center [&>svg]:size-full',\n                  isFilled && '[&>svg]:fill-current',\n                  classNames?.icon, //\n                )}\n              >\n                {icon ?? <Star />}\n              </span>\n            </Radio.Root>\n          );\n        })}\n        <span\n          id={statusId}\n          data-slot=\"rate-status\"\n          className=\"sr-only\"\n          aria-live=\"polite\"\n        >\n          {getValueText(score, total)}\n        </span>\n      </RadioGroup>\n    </DirectionProvider>\n  );\n};\n\nexport default Rate;\n"],"mappings":";;;;;;;;;;;AAwCA,MAAM,QAAQ,EACZ,QAAQ,GACR,OACA,eAAe,GACf,UACA,aAAa,MACb,WAAW,OACX,WAAW,OACX,MACA,MACA,gBAAgB,OAAO,UAAU,GAAG,MAAM,MAAM,MAAM,SACtD,gBAAgB,OAAO,UACrB,UAAU,IAAI,cAAc,GAAG,MAAM,MAAM,MAAM,SACnD,WACA,YACA,KACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,YACQ;CACX,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,IAAI;CACxE,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,WAAW,SAAS;CAC1B,MAAM,QAAQ,OAAO,SAAS,QAAQ,IAClC,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC,IACjD;CACJ,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,oBAAoB,QAAQ,SAAS,QAAQ,QAAQ,MAAM;CACjE,MAAM,WAAW,MAAM;CAEvB,MAAM,eAAe,SAAiB;EACpC,IAAI,YAAY,YAAY,SAAS,OACnC;EAGF,IAAI,UAAU,KAAA,GACZ,iBAAiB,IAAI;EAGvB,WAAW,IAAI;CACjB;CAEA,OACE,oBAAC,mBAAD;EAAmB,WAAW;EAC5B,UAAA,qBAAC,YAAD;GACE,GAAI;GACJ,aAAU;GACV,KAAK,OAAO;GACZ,cAAY,cAAc,iBAAiB,KAAA,IAAY;GACvD,mBAAiB;GACjB,oBAAkB,CAAC,iBAAiB,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC5D;GACA;GACJ;GACN,OAAO,UAAU,IAAI,KAAK,OAAO,KAAK;GACtC,gBAAe,SAAQ,YAAY,OAAO,IAAI,CAAC;GAC/C,WAAW,GACT,6DACA,SACF;GAfF,UAAA,CAiBG,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAAU;IAC3C,MAAM,YAAY,QAAQ;IAC1B,MAAM,WAAW,aAAa;IAE9B,OACE,oBAAC,MAAM,MAAP;KAEE,OAAO,OAAO,SAAS;KACvB,cAAA;KACA,aAAU;KACV,eAAa,WAAW,KAAK,KAAA;KAC7B,cAAY,aAAa,WAAW,KAAK;KACzC,UAAS,UAAS;MAChB,IACE,cACA,cAAc,SACd,CAAC,YACD,CAAC,UACD;OACA,MAAM,eAAe;OACrB,YAAY,CAAC;MACf;KACF;KACA,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACK;MACV,WAAW,GACT,6CACA,YAAY,kBACZ,YAAY,gBACZ,YAAY,MACZ,YAAY,YAAY,UAC1B;KACD,CAAA;KAGH,UAAA,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAW,GACT,6DACA,YAAY,wBACZ,YAAY,IACd;MAEC,UAAA,QAAQ,oBAAC,MAAD,CAAO,CAAA;KACZ,CAAA;IACI,GA3CL,SA2CK;GAEhB,CAAC,GACD,oBAAC,QAAD;IACE,IAAI;IACJ,aAAU;IACV,WAAU;IACV,aAAU;IAET,UAAA,aAAa,OAAO,KAAK;GACtB,CAAA,CACI;;CACK,CAAA;AAEvB"}

package/dist/Reveals.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Reveals.d.mts","names":[],"sources":["../src/components/molecules/reveals/index.ts"],"mappings":";;;KAGK,0BAA0B;EAAgB,aAAa;;cAEtD,SAAyB"}
+{"version":3,"file":"Reveals.d.mts","names":["RevealsImpl"],"sources":["../src/components/molecules/reveals/index.ts"],"mappings":";;;KAGK,0BAA0BA;EAAgB,aAAa;;cAEtD,SAAyB"}

package/dist/ScrollArea.d.mts

@@ -0,0 +1,8 @@
+import { Props as Props$1 } from "./core/scroll-area.mjs";
+import "./core/index.mjs";
+//#region src/components/molecules/scroll-area.d.ts
+export interface Props extends Props$1 {}
+declare const ScrollArea: (props: Props) => import("react").JSX.Element;
+//#endregion
+export { ScrollArea as default };
+//# sourceMappingURL=ScrollArea.d.mts.map

package/dist/ScrollArea.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.mts","names":["scrollArea.Props"],"sources":["../src/components/molecules/scroll-area.tsx"],"mappings":";;;iBAIiB,cAAcA;cAEzB,aAAc,OAAO,0BAAK,IAAA"}

package/dist/ScrollArea.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { ScrollArea as ScrollArea$1 } from "./core/scroll-area.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/molecules/scroll-area.tsx
+const ScrollArea = (props) => {
+	return /* @__PURE__ */ jsx(ScrollArea$1, { ...props });
+};
+//#endregion
+export { ScrollArea as default };
+
+//# sourceMappingURL=ScrollArea.mjs.map

package/dist/ScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.mjs","names":["scrollArea.ScrollArea"],"sources":["../src/components/molecules/scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport { scrollArea } from '../../core';\n\nexport interface Props extends scrollArea.Props {}\n\nconst ScrollArea = (props: Props) => {\n  return <scrollArea.ScrollArea {...props} />;\n};\n\nexport default ScrollArea;\n"],"mappings":";;;;AAMA,MAAM,cAAc,UAAiB;CACnC,OAAO,oBAACA,cAAD,EAAuB,GAAI,MAAQ,CAAA;AAC5C"}

package/dist/Segmented.d.mts

@@ -0,0 +1,26 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+import * as React$1 from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/segmented.d.ts
+export interface Option {
+  label: string;
+  value: string;
+  icon?: React$1.ReactNode;
+  disabled?: boolean;
+}
+export interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'> {
+  options: readonly (string | Option)[];
+  value?: string;
+  defaultValue?: string;
+  /** Clicking the selected item keeps it selected. */
+  onChange?: (value: string) => void;
+  size?: ComponentSize;
+  classNames?: {
+    item?: string;
+    activeItem?: string;
+  };
+}
+declare const Segmented: ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Segmented as default };
+//# sourceMappingURL=Segmented.d.mts.map

package/dist/Segmented.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.d.mts","names":["React"],"sources":["../src/components/atoms/segmented.tsx"],"mappings":";;;;iBAUiB;EACf;EACA;EACA,OAAOA,QAAM;EACb;;iBASe,cAAc,KAC7B,YAAY;EAGZ,4BAA4B;EAC5B;EACA;;EAEA,YAAY;EACZ,OAAO;EACP;IACE;IACA;;;cAIE,cAAa,SAAA,OAAA,cAAA,UAAA,MAAA,WAAA,YAAA,UAAA,gBAAA,SAWhB,UAAKA,QAAA,IAAA"}

package/dist/Segmented.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/segmented.tsx
+const sizeClasses = {
+	small: "min-h-7 px-2 text-xs",
+	middle: "min-h-8 px-3 text-sm",
+	large: "min-h-10 px-4 text-base"
+};
+const Segmented = ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation = "horizontal", ...props }) => {
+	const normalizedOptions = options.map((option) => typeof option === "string" ? {
+		label: option,
+		value: option,
+		disabled: false,
+		icon: null
+	} : option);
+	const firstEnabled = normalizedOptions.find((option) => !option.disabled)?.value;
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? firstEnabled);
+	const selectedValue = value !== void 0 ? value : internalValue;
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const handleValueChange = (values) => {
+		const nextValue = values[0];
+		if (nextValue === void 0 || nextValue === selectedValue) return;
+		if (value === void 0) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		...props,
+		"data-slot": "segmented",
+		disabled,
+		orientation,
+		value: selectedValue === void 0 ? [] : [selectedValue],
+		onValueChange: handleValueChange,
+		className: cn(`bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1
+        data-[orientation=vertical]:flex-col`, className),
+		children: normalizedOptions.map((option) => /* @__PURE__ */ jsxs(Toggle, {
+			value: option.value,
+			disabled: option.disabled,
+			className: cn(`text-muted-foreground hover:text-foreground
+            focus-visible:ring-ring/50 data-pressed:bg-background
+            data-pressed:text-foreground inline-flex items-center justify-center
+            gap-1.5 rounded-md font-medium whitespace-nowrap outline-none
+            focus-visible:ring-[3px] disabled:cursor-not-allowed
+            disabled:opacity-50 data-pressed:shadow-xs`, sizeClasses[resolvedSize], classNames?.item, selectedValue === option.value && classNames?.activeItem),
+			children: [option.icon, option.label]
+		}, option.value))
+	});
+};
+//#endregion
+export { Segmented as default };
+
+//# sourceMappingURL=Segmented.mjs.map

package/dist/Segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.mjs","names":["React"],"sources":["../src/components/atoms/segmented.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Option {\n  label: string;\n  value: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst sizeClasses: Record<ComponentSize, string> = {\n  small: 'min-h-7 px-2 text-xs',\n  middle: 'min-h-8 px-3 text-sm',\n  large: 'min-h-10 px-4 text-base',\n};\n\nexport interface Props extends Omit<\n  ToggleGroup.Props,\n  'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'\n> {\n  options: readonly (string | Option)[];\n  value?: string;\n  defaultValue?: string;\n  /** Clicking the selected item keeps it selected. */\n  onChange?: (value: string) => void;\n  size?: ComponentSize;\n  classNames?: {\n    item?: string;\n    activeItem?: string;\n  };\n}\n\nconst Segmented = ({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  size,\n  className,\n  classNames,\n  disabled,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const normalizedOptions = options.map(option =>\n    typeof option === 'string'\n      ? { label: option, value: option, disabled: false, icon: null }\n      : option,\n  );\n  const firstEnabled = normalizedOptions.find(\n    option => !option.disabled,\n  )?.value;\n  const [internalValue, setInternalValue] = React.useState(\n    defaultValue ?? firstEnabled,\n  );\n  const selectedValue = value !== undefined ? value : internalValue;\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n\n  const handleValueChange = (values: string[]) => {\n    const nextValue = values[0];\n\n    if (nextValue === undefined || nextValue === selectedValue) {\n      return;\n    }\n\n    if (value === undefined) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <ToggleGroup\n      {...props}\n      data-slot=\"segmented\"\n      disabled={disabled}\n      orientation={orientation}\n      value={selectedValue === undefined ? [] : [selectedValue]}\n      onValueChange={handleValueChange}\n      className={cn(\n        `bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1\n        data-[orientation=vertical]:flex-col`,\n        className,\n        //\n      )}\n    >\n      {normalizedOptions.map(option => (\n        <Toggle\n          key={option.value}\n          value={option.value}\n          disabled={option.disabled}\n          className={cn(\n            `text-muted-foreground hover:text-foreground\n            focus-visible:ring-ring/50 data-pressed:bg-background\n            data-pressed:text-foreground inline-flex items-center justify-center\n            gap-1.5 rounded-md font-medium whitespace-nowrap outline-none\n            focus-visible:ring-[3px] disabled:cursor-not-allowed\n            disabled:opacity-50 data-pressed:shadow-xs`,\n            sizeClasses[resolvedSize],\n            classNames?.item,\n            selectedValue === option.value && classNames?.activeItem,\n            //\n          )}\n        >\n          {option.icon}\n          {option.label}\n        </Toggle>\n      ))}\n    </ToggleGroup>\n  );\n};\n\nexport default Segmented;\n"],"mappings":";;;;;;;;AAiBA,MAAM,cAA6C;CACjD,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAkBA,MAAM,aAAa,EACjB,SACA,OACA,cACA,UACA,MACA,WACA,YACA,UACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,oBAAoB,QAAQ,KAAI,WACpC,OAAO,WAAW,WACd;EAAE,OAAO;EAAQ,OAAO;EAAQ,UAAU;EAAO,MAAM;CAAK,IAC5D,MACN;CACA,MAAM,eAAe,kBAAkB,MACrC,WAAU,CAAC,OAAO,QACpB,CAAC,EAAE;CACH,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAC9C,gBAAgB,YAClB;CACA,MAAM,gBAAgB,UAAU,KAAA,IAAY,QAAQ;CACpD,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,MAAM,qBAAqB,WAAqB;EAC9C,MAAM,YAAY,OAAO;EAEzB,IAAI,cAAc,KAAA,KAAa,cAAc,eAC3C;EAGF,IAAI,UAAU,KAAA,GACZ,iBAAiB,SAAS;EAG5B,WAAW,SAAS;CACtB;CAEA,OACE,oBAAC,aAAD;EACE,GAAI;EACJ,aAAU;EACA;EACG;EACb,OAAO,kBAAkB,KAAA,IAAY,CAAC,IAAI,CAAC,aAAa;EACxD,eAAe;EACf,WAAW,GACT;+CAEA,SAEF;EAEC,UAAA,kBAAkB,KAAI,WACrB,qBAAC,QAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,WAAW,GACT;;;;;yDAMA,YAAY,eACZ,YAAY,MACZ,kBAAkB,OAAO,SAAS,YAAY,UAEhD;GAfF,UAAA,CAiBG,OAAO,MACP,OAAO,KACF;EAlBD,GAAA,OAAO,KAkBN,CACT;CACU,CAAA;AAEjB"}

package/dist/Space.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/molecules/space.d.ts
-interface Props extends React.ComponentPropsWithRef<'div'> {
+export interface Props extends React.ComponentPropsWithRef<'div'> {
   loading?: boolean;
   loader?: React.ReactNode;
   orientation?: 'horizontal' | 'vertical';
@@ -14,5 +14,5 @@ interface Props extends React.ComponentPropsWithRef<'div'> {
 }
 declare const Space: ({ loading, loader, children, size, orientation, align, wrap, split, className, grid, hidden, style, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Space as default };
+export { Space as default };
 //# sourceMappingURL=Space.d.mts.map

package/dist/Space.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Space.d.mts","names":[],"sources":["../src/components/molecules/space.tsx"],"mappings":";UASiB,cAAc,MAAM;EACnC;EACA,SAAS,MAAM;EACf;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;;;cAiBE,UAAS,SAAA,QAAA,UAAA,MAAA,aAAA,OAAA,MAAA,OAAA,WAAA,MAAA,QAAA,UAAA,SAcZ,0BAAK,IAAA"}
+{"version":3,"file":"Space.d.mts","names":[],"sources":["../src/components/molecules/space.tsx"],"mappings":";iBASiB,cAAc,MAAM;EACnC;EACA,SAAS,MAAM;EACf;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;;;cAiBE,UAAS,SAAA,QAAA,UAAA,MAAA,aAAA,OAAA,MAAA,OAAA,WAAA,MAAA,QAAA,UAAA,SAcZ,0BAAK,IAAA"}

package/dist/Statistic.d.mts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/molecules/statistic.d.ts
+export interface Props extends Omit<ComponentProps<'div'>, 'title' | 'children' | 'prefix'> {
+  title?: ReactNode;
+  value?: string | number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  precision?: number;
+  locale?: string;
+  formatter?: (value: string | number) => ReactNode;
+  loading?: boolean;
+  classNames?: {
+    title?: string;
+    value?: string;
+    prefix?: string;
+    suffix?: string;
+  };
+}
+declare const Statistic: ({ title, value, prefix, suffix, precision, locale, formatter, loading, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Statistic as default };
+//# sourceMappingURL=Statistic.d.mts.map

package/dist/Statistic.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.d.mts","names":[],"sources":["../src/components/molecules/statistic.tsx"],"mappings":";;iBAQiB,cAAc,KAC7B;EAGA,QAAQ;EACR;EACA,SAAS;EACT,SAAS;EACT;EACA;EACA,aAAa,2BAA2B;EACxC;EACA;IACE;IACA;IACA;IACA;;;cAIE,cAAa,OAAA,OAAA,QAAA,QAAA,WAAA,QAAA,WAAA,SAAA,WAAA,eAAA,SAYhB,0BAAK,IAAA"}

package/dist/Statistic.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "./utils.mjs";
+import Skeleton from "./components/atoms/skeleton/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/statistic.tsx
+const Statistic = ({ title, value, prefix, suffix, precision, locale = "en-US", formatter, loading = false, className, classNames, ...props }) => {
+	const hasValue = value !== void 0 && value !== "" && (typeof value !== "number" || Number.isFinite(value));
+	let formatted = "—";
+	if (!loading && hasValue && value !== void 0) {
+		if (formatter) formatted = formatter(value);
+		else if (typeof value === "string") formatted = value;
+		else {
+			const digits = precision !== void 0 && Number.isFinite(precision) ? Math.min(20, Math.max(0, Math.trunc(precision))) : void 0;
+			const options = digits === void 0 ? void 0 : {
+				minimumFractionDigits: digits,
+				maximumFractionDigits: digits
+			};
+			try {
+				formatted = new Intl.NumberFormat(locale, options).format(value);
+			} catch {
+				formatted = new Intl.NumberFormat("en-US", options).format(value);
+			}
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "statistic",
+		"aria-busy": loading || void 0,
+		className: cn("min-w-0", className),
+		children: [title !== void 0 && title !== null && /* @__PURE__ */ jsx("div", {
+			className: cn("text-muted-foreground mb-1 text-sm", classNames?.title),
+			children: title
+		}), loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }) : /* @__PURE__ */ jsxs("div", {
+			className: cn(`text-foreground flex flex-wrap items-baseline gap-1 text-2xl
+              font-semibold [overflow-wrap:anywhere] tabular-nums`, classNames?.value),
+			children: [
+				prefix !== void 0 && prefix !== null && /* @__PURE__ */ jsx("span", {
+					className: classNames?.prefix,
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("span", { children: formatted }),
+				suffix !== void 0 && suffix !== null && /* @__PURE__ */ jsx("span", {
+					className: cn("text-base font-normal", classNames?.suffix),
+					children: suffix
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { Statistic as default };
+
+//# sourceMappingURL=Statistic.mjs.map

package/dist/Statistic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.mjs","names":[],"sources":["../src/components/molecules/statistic.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\n\nexport interface Props extends Omit<\n  ComponentProps<'div'>,\n  'title' | 'children' | 'prefix'\n> {\n  title?: ReactNode;\n  value?: string | number;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  precision?: number;\n  locale?: string;\n  formatter?: (value: string | number) => ReactNode;\n  loading?: boolean;\n  classNames?: {\n    title?: string;\n    value?: string;\n    prefix?: string;\n    suffix?: string;\n  };\n}\n\nconst Statistic = ({\n  title,\n  value,\n  prefix,\n  suffix,\n  precision,\n  locale = 'en-US',\n  formatter,\n  loading = false,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const hasValue =\n    value !== undefined &&\n    value !== '' &&\n    (typeof value !== 'number' || Number.isFinite(value));\n  let formatted: ReactNode = '—';\n\n  if (!loading && hasValue && value !== undefined) {\n    if (formatter) {\n      formatted = formatter(value);\n    } else if (typeof value === 'string') {\n      formatted = value;\n    } else {\n      const digits =\n        precision !== undefined && Number.isFinite(precision)\n          ? Math.min(20, Math.max(0, Math.trunc(precision)))\n          : undefined;\n      const options =\n        digits === undefined\n          ? undefined\n          : {\n              minimumFractionDigits: digits,\n              maximumFractionDigits: digits,\n            };\n\n      try {\n        formatted = new Intl.NumberFormat(locale, options).format(value);\n      } catch {\n        formatted = new Intl.NumberFormat('en-US', options).format(value);\n      }\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      data-slot=\"statistic\"\n      aria-busy={loading || undefined}\n      className={cn(\n        'min-w-0',\n        className,\n        //\n      )}\n    >\n      {title !== undefined && title !== null && (\n        <div\n          className={cn(\n            'text-muted-foreground mb-1 text-sm',\n            classNames?.title,\n            //\n          )}\n        >\n          {title}\n        </div>\n      )}\n      {loading ? (\n        <Skeleton className=\"h-8 w-24\" />\n      ) : (\n        <div\n          className={cn(\n            `text-foreground flex flex-wrap items-baseline gap-1 text-2xl\n              font-semibold [overflow-wrap:anywhere] tabular-nums`,\n            classNames?.value,\n            //\n          )}\n        >\n          {prefix !== undefined && prefix !== null && (\n            <span className={classNames?.prefix}>{prefix}</span>\n          )}\n          <span>{formatted}</span>\n          {suffix !== undefined && suffix !== null && (\n            <span\n              className={cn(\n                'text-base font-normal',\n                classNames?.suffix,\n                //\n              )}\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Statistic;\n"],"mappings":";;;;;AA4BA,MAAM,aAAa,EACjB,OACA,OACA,QACA,QACA,WACA,SAAS,SACT,WACA,UAAU,OACV,WACA,YACA,GAAG,YACQ;CACX,MAAM,WACJ,UAAU,KAAA,KACV,UAAU,OACT,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;CACrD,IAAI,YAAuB;CAE3B,IAAI,CAAC,WAAW,YAAY,UAAU,KAAA,GAAW;EAC/C,IAAI,WACF,YAAY,UAAU,KAAK;OACtB,IAAI,OAAO,UAAU,UAC1B,YAAY;OACP;GACL,MAAM,SACJ,cAAc,KAAA,KAAa,OAAO,SAAS,SAAS,IAChD,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,CAAC,CAAC,IAC/C,KAAA;GACN,MAAM,UACJ,WAAW,KAAA,IACP,KAAA,IACA;IACE,uBAAuB;IACvB,uBAAuB;GACzB;GAEN,IAAI;IACF,YAAY,IAAI,KAAK,aAAa,QAAQ,OAAO,CAAC,CAAC,OAAO,KAAK;GACjE,QAAQ;IACN,YAAY,IAAI,KAAK,aAAa,SAAS,OAAO,CAAC,CAAC,OAAO,KAAK;GAClE;EACF;CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW,WAAW,KAAA;EACtB,WAAW,GACT,WACA,SAEF;EARF,UAAA,CAUG,UAAU,KAAA,KAAa,UAAU,QAChC,oBAAC,OAAD;GACE,WAAW,GACT,sCACA,YAAY,KAEd;GAEC,UAAA;EACE,CAAA,GAEN,UACC,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA,IAEhC,qBAAC,OAAD;GACE,WAAW,GACT;oEAEA,YAAY,KAEd;GANF,UAAA;IAQG,WAAW,KAAA,KAAa,WAAW,QAClC,oBAAC,QAAD;KAAM,WAAW,YAAY;KAAS,UAAA;IAAa,CAAA;IAErD,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtB,WAAW,KAAA,KAAa,WAAW,QAClC,oBAAC,QAAD;KACE,WAAW,GACT,yBACA,YAAY,MAEd;KAEC,UAAA;IACG,CAAA;GAEL;EAEJ,CAAA,CAAA;;AAET"}

package/dist/Steps.d.mts

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+//#region src/components/molecules/steps.d.ts
+export interface Item {
+  key?: React$1.Key;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  icon?: React$1.ReactNode;
+  /** Mark a failed step regardless of its position. */
+  status?: 'error';
+}
+export interface Props extends Omit<React$1.ComponentPropsWithoutRef<'nav'>, 'children'> {
+  items: readonly Item[];
+  /** Zero-based index of the current step. */
+  current?: number;
+  orientation?: 'horizontal' | 'vertical';
+  classNames?: {
+    list?: string;
+    item?: string;
+    indicator?: string;
+    title?: string;
+    description?: string;
+    connector?: string;
+  };
+}
+declare const Steps: ({ items, current, orientation, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Steps as default };
+//# sourceMappingURL=Steps.d.mts.map

package/dist/Steps.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.mts","names":["React"],"sources":["../src/components/molecules/steps.tsx"],"mappings":";;iBASiB;EACf,MAAMA,QAAM;EACZ,OAAOA,QAAM;EACb,cAAcA,QAAM;EACpB,OAAOA,QAAM;;EAEb;;iBAGe,cAAc,KAC7BA,QAAM;EAGN,gBAAgB;;EAEhB;EACA;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;cAIE,UAAS,OAAA,SAAA,aAAA,WAAA,YAAA,mBAAA,cAAA,SASZ,UAAKA,QAAA,IAAA"}

package/dist/Steps.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, TriangleAlert } from "lucide-react";
+//#region src/components/molecules/steps.tsx
+const Steps = ({ items, current = 0, orientation = "horizontal", className, classNames, dir, "aria-label": ariaLabel, ...props }) => {
+	const { direction } = useConfig();
+	const currentIndex = items.length ? Math.min(Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0), items.length - 1) : -1;
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"data-slot": "steps",
+		"data-orientation": orientation,
+		dir: dir ?? direction,
+		"aria-label": ariaLabel ?? "Progress",
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "steps-list",
+			className: cn("m-0 flex list-none p-0", orientation === "vertical" && "flex-col", classNames?.list),
+			children: items.map((item, index) => {
+				const status = item.status === "error" ? "error" : index < currentIndex ? "complete" : index === currentIndex ? "current" : "upcoming";
+				return /* @__PURE__ */ jsxs("li", {
+					"data-slot": "steps-item",
+					"data-status": status,
+					"aria-current": index === currentIndex ? "step" : void 0,
+					className: cn("m-0 flex min-w-0", orientation === "horizontal" ? "flex-1 items-start" : "flex-col", classNames?.item),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-start gap-2.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-slot": "steps-indicator",
+							"aria-hidden": "true",
+							className: cn(`border-border text-muted-foreground flex size-7 shrink-0
+                    items-center justify-center rounded-full border text-sm
+                    font-medium`, status === "complete" && "border-primary bg-primary text-primary-foreground", status === "current" && "border-primary text-primary", status === "error" && `border-destructive bg-destructive
+                      text-destructive-foreground`, classNames?.indicator),
+							children: item.icon ?? (status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : status === "error" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }) : index + 1)
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"data-slot": "steps-title",
+									className: cn("block text-sm font-medium", status === "upcoming" ? "text-muted-foreground" : status === "error" ? "text-destructive" : "text-foreground", classNames?.title),
+									children: item.title
+								}),
+								item.description != null && /* @__PURE__ */ jsx("span", {
+									"data-slot": "steps-description",
+									className: cn("text-muted-foreground block text-xs", classNames?.description),
+									children: item.description
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: status === "complete" ? "Completed" : status === "current" ? "Current step" : status === "error" ? "Error" : "Upcoming"
+								})
+							]
+						})]
+					}), index < items.length - 1 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "steps-connector",
+						"aria-hidden": "true",
+						className: cn("bg-border shrink-0", orientation === "horizontal" ? "mx-3 mt-3.5 h-px min-w-3 flex-1" : "my-2 ms-3.5 h-7 w-px", index < currentIndex && "bg-primary", classNames?.connector)
+					})]
+				}, item.key ?? index);
+			})
+		})
+	});
+};
+//#endregion
+export { Steps as default };
+
+//# sourceMappingURL=Steps.mjs.map