@jbpark/ui-kit 10.2.0 → 10.3.0

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

@@ -2,13 +2,13 @@ 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
-interface Option {
+export interface Option {
   label: string;
   value: string;
   icon?: React$1.ReactNode;
   disabled?: boolean;
 }
-interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'> {
+export interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'> {
   options: readonly (string | Option)[];
   value?: string;
   defaultValue?: string;
@@ -22,5 +22,5 @@ interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultV
 }
 declare const Segmented: ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation, ...props }: Props) => React$1.JSX.Element;
 //#endregion
-export { Option, Props, Segmented as default };
+export { Segmented as default };
 //# sourceMappingURL=Segmented.d.mts.map

package/dist/Segmented.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.d.mts","names":[],"sources":["../src/components/atoms/segmented.tsx"],"mappings":";;;;UAUiB;EACf;EACA;EACA,OAAO,QAAM;EACb;;UASe,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,UAAK,QAAA,IAAA"}
+{"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/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

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

package/dist/Steps.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.d.mts","names":[],"sources":["../src/components/molecules/steps.tsx"],"mappings":";;UASiB;EACf,MAAM,QAAM;EACZ,OAAO,QAAM;EACb,cAAc,QAAM;EACpB,OAAO,QAAM;;EAEb;;UAGe,cAAc,KAC7B,QAAM;EAGN,gBAAgB;;EAEhB;EACA;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;cAIE,UAAS,OAAA,SAAA,aAAA,WAAA,YAAA,mBAAA,cAAA,SASZ,UAAK,QAAA,IAAA"}
+{"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

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
-import { Check, TriangleAlert } from "lucide-react";
 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();

package/dist/Table.d.mts

@@ -1,13 +1,13 @@
 import { Props as Props$1 } from "./Pagination.mjs";
 //#region src/components/organisms/table.d.ts
-type PaginationOptions = Omit<Props$1, 'total'> & ({
+export type PaginationOptions = Omit<Props$1, 'total'> & ({
   mode?: 'client';
   total?: never;
 } | {
   mode: 'server';
   total: number;
 });
-interface Column<T> {
+export interface Column<T> {
   key: React.Key;
   title: React.ReactNode;
   /** Field displayed when render is omitted. */
@@ -18,7 +18,7 @@ interface Column<T> {
   className?: string;
   headerClassName?: string;
 }
-interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'table'>, 'children'> {
+export interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'table'>, 'children'> {
   columns: Column<T>[];
   data?: T[];
   /** Use a stable key when rows may be reordered or paged. */
@@ -44,5 +44,5 @@ interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'table'>, 'childr
 }
 declare const Table: <T>({ columns, data, rowKey, loading, empty, size, bordered, striped, hoverable, pagination, caption, className, classNames, ...props }: Props<T>) => import("react").JSX.Element;
 //#endregion
-export { Column, PaginationOptions, Props, Table as default };
+export { Table as default };
 //# sourceMappingURL=Table.d.mts.map

package/dist/Table.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.mts","names":[],"sources":["../src/components/organisms/table.tsx"],"mappings":";;KAaY,oBAAoB,KAAK;EAChC;EAAiB;;EAAoB;EAAgB;;UAEzC,OAAO;EACtB,KAAK,MAAM;EACX,OAAO,MAAM;;EAEb,kBAAkB;EAClB,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C;EACA;EACA;EACA;;UAGe,MAAM,WAAW,KAChC,MAAM;EAGN,SAAS,OAAO;EAChB,OAAO;;EAEP,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C,UAAU,MAAM;EAChB;EACA,QAAQ,MAAM;EACd;EACA;EACA;EACA;;EAEA,uBAAuB;EACvB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAaE,QAAS,KAAI,SAAA,MAAA,QAAA,SAAA,OAAA,MAAA,UAAA,SAAA,WAAA,YAAA,SAAA,WAAA,eAAA,SAehB,MAAM,uBAAE,IAAA"}
+{"version":3,"file":"Table.d.mts","names":["PaginationProps"],"sources":["../src/components/organisms/table.tsx"],"mappings":";;YAaY,oBAAoB,KAAKA;EAChC;EAAiB;;EAAoB;EAAgB;;iBAEzC,OAAO;EACtB,KAAK,MAAM;EACX,OAAO,MAAM;;EAEb,kBAAkB;EAClB,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C;EACA;EACA;EACA;;iBAGe,MAAM,WAAW,KAChC,MAAM;EAGN,SAAS,OAAO;EAChB,OAAO;;EAEP,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C,UAAU,MAAM;EAChB;EACA,QAAQ,MAAM;EACd;EACA;EACA;EACA;;EAEA,uBAAuB;EACvB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAaE,QAAS,KAAI,SAAA,MAAA,QAAA,SAAA,OAAA,MAAA,UAAA,SAAA,WAAA,YAAA,SAAA,WAAA,eAAA,SAehB,MAAM,uBAAE,IAAA"}

package/dist/Tag.d.mts

@@ -1,10 +1,10 @@
-import { Badge } from "./core/badge.mjs";
+import { Badge, badge_d_exports } from "./core/badge.mjs";
 import "./core/index.mjs";
 import { PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/tag.d.ts
 declare const Core: typeof Badge;
-interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'color'> {
+export interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'color'> {
   /**
    * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0
    * `'default'` spelling was removed — use `'filled'`, which renders
@@ -26,5 +26,5 @@ interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'c
 }
 declare const Tag: ({ className, variant, color, children, ...props }: Props) => React$1.JSX.Element;
 //#endregion
-export { Props, Tag as default };
+export { Tag as default };
 //# sourceMappingURL=Tag.d.mts.map

package/dist/Tag.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;cAUM,aAAI;UAEO,cAAc,KAC7B,QAAM,sBAAsB;;;;;;EAQ5B;;;;;;;;;;;;EAYA,mEAC6D;;cAuBzD,QAAO,WAAA,SAAA,OAAA,aAAA,SAAmD,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Tag.d.mts","names":["badge","badge.Badge","React"],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;cAUM,aAAIC;iBAEO,cAAc,KAC7BC,QAAM,sBAAsB;;;;;;EAQ5B;;;;;;;;;;;;EAYA,mEAC6D;;cAuBzD,QAAO,WAAA,SAAA,OAAA,aAAA,SAAmD,UAAKA,QAAA,IAAA"}

package/dist/TimePicker.d.mts

@@ -0,0 +1,26 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+import * as React$1 from "react";
+//#region src/components/atoms/time-picker.d.ts
+export interface Props extends Omit<React$1.ComponentPropsWithRef<'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'step' | 'type' | 'value'> {
+  /** Visible label. An external label or aria-label can be used instead. */
+  label?: string;
+  /** A local time in 24-hour HH:mm form; null keeps a controlled field empty. */
+  value?: string | null;
+  defaultValue?: string;
+  /** Called with HH:mm, or null when the field is cleared. */
+  onChange?: (value: string | null) => void;
+  /** Positive whole-minute interval. Native time inputs use seconds for step. */
+  minuteStep?: number;
+  allowClear?: boolean;
+  clearLabel?: string;
+  size?: ComponentSize;
+  classNames?: {
+    label?: string;
+    input?: string;
+    clear?: string;
+  };
+}
+declare const TimePicker: ({ ref, id, label, value, defaultValue, onChange, minuteStep, allowClear, clearLabel, size, disabled, readOnly, className, classNames, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { TimePicker as default };
+//# sourceMappingURL=TimePicker.d.mts.map

package/dist/TimePicker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.mts","names":["React"],"sources":["../src/components/atoms/time-picker.tsx"],"mappings":";;;iBAmBiB,cAAc,KAC7BA,QAAM;;EAIN;;EAEA;EACA;;EAEA,YAAY;;EAEZ;EACA;EACA;EACA,OAAO;EACP;IACE;IACA;IACA;;;cAIE,eAAc,KAAA,IAAA,OAAA,OAAA,cAAA,UAAA,YAAA,YAAA,YAAA,MAAA,UAAA,UAAA,WAAA,eAAA,SAgBjB,UAAKA,QAAA,IAAA"}

package/dist/TimePicker.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import Input from "./components/atoms/input/index.mjs";
+import * as React$1 from "react";
+import { useMergedRef } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleX } from "lucide-react";
+//#region src/components/atoms/time-picker.tsx
+const sizes = {
+	small: "h-8",
+	middle: "h-9",
+	large: "h-10"
+};
+const TimePicker = ({ ref, id, label, value, defaultValue, onChange, minuteStep = 1, allowClear = true, clearLabel = "Clear time", size, disabled, readOnly, className, classNames, ...props }) => {
+	const generatedId = React$1.useId();
+	const inputId = id ?? generatedId;
+	const inputRef = React$1.useRef(null);
+	const mergedRef = useMergedRef(inputRef, ref);
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = React$1.useState(defaultValue ?? "");
+	const currentValue = isControlled ? value ?? "" : uncontrolledValue;
+	const handleChange = (event) => {
+		const nextValue = event.currentTarget.value;
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onChange?.(nextValue || null);
+	};
+	const handleClear = () => {
+		if (!isControlled && inputRef.current) {
+			inputRef.current.value = "";
+			setUncontrolledValue("");
+		}
+		onChange?.(null);
+		inputRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "time-picker",
+		className: cn("w-full", className),
+		children: [label && /* @__PURE__ */ jsx("label", {
+			htmlFor: inputId,
+			className: cn("mb-1.5 block text-sm font-medium", classNames?.label),
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Input, {
+				...props,
+				ref: mergedRef,
+				id: inputId,
+				type: "time",
+				step: minuteStep * 60,
+				disabled,
+				readOnly,
+				value: isControlled ? value ?? "" : void 0,
+				defaultValue: isControlled ? void 0 : defaultValue,
+				onChange: handleChange,
+				className: cn("min-w-0 flex-1", sizes[resolvedSize], classNames?.input)
+			}), allowClear && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx(Button, {
+				htmlType: "button",
+				variant: "text",
+				shape: "circle",
+				size: resolvedSize,
+				icon: /* @__PURE__ */ jsx(CircleX, {}),
+				"aria-label": clearLabel,
+				"data-time-picker-clear": "",
+				className: cn(classNames?.clear),
+				onClick: handleClear
+			})]
+		})]
+	});
+};
+//#endregion
+export { TimePicker as default };
+
+//# sourceMappingURL=TimePicker.mjs.map

package/dist/TimePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.mjs","names":["React"],"sources":["../src/components/atoms/time-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Input from './input';\n\nconst sizes: Record<ComponentSize, string> = {\n  small: 'h-8',\n  middle: 'h-9',\n  large: 'h-10',\n};\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithRef<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'step' | 'type' | 'value'\n> {\n  /** Visible label. An external label or aria-label can be used instead. */\n  label?: string;\n  /** A local time in 24-hour HH:mm form; null keeps a controlled field empty. */\n  value?: string | null;\n  defaultValue?: string;\n  /** Called with HH:mm, or null when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Positive whole-minute interval. Native time inputs use seconds for step. */\n  minuteStep?: number;\n  allowClear?: boolean;\n  clearLabel?: string;\n  size?: ComponentSize;\n  classNames?: {\n    label?: string;\n    input?: string;\n    clear?: string;\n  };\n}\n\nconst TimePicker = ({\n  ref,\n  id,\n  label,\n  value,\n  defaultValue,\n  onChange,\n  minuteStep = 1,\n  allowClear = true,\n  clearLabel = 'Clear time',\n  size,\n  disabled,\n  readOnly,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(inputRef, ref);\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(\n    defaultValue ?? '',\n  );\n  const currentValue = isControlled ? (value ?? '') : uncontrolledValue;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const nextValue = event.currentTarget.value;\n\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    onChange?.(nextValue || null);\n  };\n\n  const handleClear = () => {\n    if (!isControlled && inputRef.current) {\n      inputRef.current.value = '';\n      setUncontrolledValue('');\n    }\n\n    onChange?.(null);\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div data-slot=\"time-picker\" className={cn('w-full', className)}>\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn('mb-1.5 block text-sm font-medium', classNames?.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-1\">\n        <Input\n          {...props}\n          ref={mergedRef}\n          id={inputId}\n          type=\"time\"\n          step={minuteStep * 60}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={isControlled ? (value ?? '') : undefined}\n          defaultValue={isControlled ? undefined : defaultValue}\n          onChange={handleChange}\n          className={cn(\n            'min-w-0 flex-1',\n            sizes[resolvedSize],\n            classNames?.input,\n            //\n          )}\n        />\n        {allowClear && currentValue && !disabled && !readOnly && (\n          <Button\n            htmlType=\"button\"\n            variant=\"text\"\n            shape=\"circle\"\n            size={resolvedSize}\n            icon={<CircleX />}\n            aria-label={clearLabel}\n            data-time-picker-clear=\"\"\n            className={cn(classNames?.clear)}\n            onClick={handleClear}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,MAAM,cAAc,EAClB,KACA,IACA,OACA,OACA,cACA,UACA,aAAa,GACb,aAAa,MACb,aAAa,cACb,MACA,UACA,UACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,cAAcA,QAAM,MAAM;CAChC,MAAM,UAAU,MAAM;CACtB,MAAM,WAAWA,QAAM,OAAyB,IAAI;CACpD,MAAM,YAAY,aAAa,UAAU,GAAG;CAC5C,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,mBAAmB,wBAAwBA,QAAM,SACtD,gBAAgB,EAClB;CACA,MAAM,eAAe,eAAgB,SAAS,KAAM;CAEpD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,cAAc;EAEtC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,WAAW,aAAa,IAAI;CAC9B;CAEA,MAAM,oBAAoB;EACxB,IAAI,CAAC,gBAAgB,SAAS,SAAS;GACrC,SAAS,QAAQ,QAAQ;GACzB,qBAAqB,EAAE;EACzB;EAEA,WAAW,IAAI;EACf,SAAS,SAAS,MAAM;CAC1B;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,UAAU,SAAS;EAA9D,UAAA,CACG,SACC,oBAAC,SAAD;GACE,SAAS;GACT,WAAW,GAAG,oCAAoC,YAAY,KAAK;GAElE,UAAA;EACI,CAAA,GAET,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,KAAK;IACL,IAAI;IACJ,MAAK;IACL,MAAM,aAAa;IACT;IACA;IACV,OAAO,eAAgB,SAAS,KAAM,KAAA;IACtC,cAAc,eAAe,KAAA,IAAY;IACzC,UAAU;IACV,WAAW,GACT,kBACA,MAAM,eACN,YAAY,KAEd;GACD,CAAA,GACA,cAAc,gBAAgB,CAAC,YAAY,CAAC,YAC3C,oBAAC,QAAD;IACE,UAAS;IACT,SAAQ;IACR,OAAM;IACN,MAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,cAAY;IACZ,0BAAuB;IACvB,WAAW,GAAG,YAAY,KAAK;IAC/B,SAAS;GACV,CAAA,CAEA;EACF,CAAA,CAAA;;AAET"}

package/dist/Timeline.d.mts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithRef, Key, ReactNode } from "react";
+//#region src/components/molecules/timeline.d.ts
+export interface Timestamp {
+  /** Caller-formatted text. No locale or timezone conversion is performed. */
+  label: ReactNode;
+  /** A valid HTML time value, such as an ISO date or timestamp. */
+  dateTime?: string;
+}
+export interface Item {
+  key: Key;
+  title: ReactNode;
+  description?: ReactNode;
+  timestamp?: Timestamp;
+  /** Decorative marker treatment. Include meaningful status in the event text. */
+  status?: 'neutral' | 'primary' | 'error';
+  /** Decorative content, such as an icon; do not supply interactive elements. */
+  marker?: ReactNode;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'ol'>, 'children' | 'reversed' | 'start' | 'type'> {
+  /** Events render in this order; the component does not sort by timestamp. */
+  items: readonly Item[];
+  classNames?: {
+    item?: string;
+    marker?: string;
+    connector?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    timestamp?: string;
+  };
+}
+declare const Timeline: ({ items, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Timeline as default };
+//# sourceMappingURL=Timeline.d.mts.map

package/dist/Timeline.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.mts","names":[],"sources":["../src/components/molecules/timeline.tsx"],"mappings":";;iBAIiB;;EAEf,OAAO;;EAEP;;iBAGe;EACf,KAAK;EACL,OAAO;EACP,cAAc;EACd,YAAY;;EAEZ;;EAEA,SAAS;;iBAGM,cAAc,KAC7B;;EAIA,gBAAgB;EAChB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAIE,aAAY,OAAA,WAAA,eAAA,SAA4C,0BAAK,IAAA"}

package/dist/Timeline.mjs

@@ -0,0 +1,59 @@
+import { cn } from "./utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/timeline.tsx
+const Timeline = ({ items, className, classNames, ...props }) => {
+	return /* @__PURE__ */ jsx("ol", {
+		...props,
+		"data-slot": "timeline",
+		role: "list",
+		className: cn("text-foreground m-0 w-full min-w-0 list-none p-0", className),
+		children: items.map((item, index) => {
+			const TimestampElement = item.timestamp?.dateTime ? "time" : "span";
+			return /* @__PURE__ */ jsxs("li", {
+				"data-slot": "timeline-item",
+				"data-status": item.status ?? "neutral",
+				className: cn("relative m-0 flex min-w-0 gap-3", index < items.length - 1 && "pb-6", classNames?.item),
+				children: [/* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: "relative w-5 shrink-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-marker",
+						className: cn(`border-border bg-background text-muted-foreground relative
+                  z-10 flex size-5 items-center justify-center rounded-full
+                  border-2 [&>svg]:size-3`, item.status === "primary" && "border-primary text-primary", item.status === "error" && "border-destructive text-destructive", classNames?.marker),
+						children: item.marker
+					}), index < items.length - 1 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-connector",
+						className: cn(`bg-border absolute start-[calc(50%-0.5px)] top-5 -bottom-6
+                    w-px`, classNames?.connector)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-slot": "timeline-content",
+					className: cn("min-w-0 flex-1 text-sm [overflow-wrap:anywhere]", classNames?.content),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "timeline-title",
+							className: cn("leading-5 font-medium", classNames?.title),
+							children: item.title
+						}),
+						item.timestamp != null && /* @__PURE__ */ jsx(TimestampElement, {
+							"data-slot": "timeline-timestamp",
+							dateTime: TimestampElement === "time" ? item.timestamp.dateTime : void 0,
+							className: cn("text-muted-foreground mt-1 block text-xs", classNames?.timestamp),
+							children: item.timestamp.label
+						}),
+						item.description != null && /* @__PURE__ */ jsx("div", {
+							"data-slot": "timeline-description",
+							className: cn("text-muted-foreground mt-2", classNames?.description),
+							children: item.description
+						})
+					]
+				})]
+			}, item.key);
+		})
+	});
+};
+//#endregion
+export { Timeline as default };
+
+//# sourceMappingURL=Timeline.mjs.map

package/dist/Timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mjs","names":[],"sources":["../src/components/molecules/timeline.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, Key, ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Timestamp {\n  /** Caller-formatted text. No locale or timezone conversion is performed. */\n  label: ReactNode;\n  /** A valid HTML time value, such as an ISO date or timestamp. */\n  dateTime?: string;\n}\n\nexport interface Item {\n  key: Key;\n  title: ReactNode;\n  description?: ReactNode;\n  timestamp?: Timestamp;\n  /** Decorative marker treatment. Include meaningful status in the event text. */\n  status?: 'neutral' | 'primary' | 'error';\n  /** Decorative content, such as an icon; do not supply interactive elements. */\n  marker?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'ol'>,\n  'children' | 'reversed' | 'start' | 'type'\n> {\n  /** Events render in this order; the component does not sort by timestamp. */\n  items: readonly Item[];\n  classNames?: {\n    item?: string;\n    marker?: string;\n    connector?: string;\n    content?: string;\n    title?: string;\n    description?: string;\n    timestamp?: string;\n  };\n}\n\nconst Timeline = ({ items, className, classNames, ...props }: Props) => {\n  return (\n    <ol\n      {...props}\n      data-slot=\"timeline\"\n      role=\"list\"\n      className={cn(\n        'text-foreground m-0 w-full min-w-0 list-none p-0',\n        className, //\n      )}\n    >\n      {items.map((item, index) => {\n        const TimestampElement = item.timestamp?.dateTime ? 'time' : 'span';\n\n        return (\n          <li\n            key={item.key}\n            data-slot=\"timeline-item\"\n            data-status={item.status ?? 'neutral'}\n            className={cn(\n              'relative m-0 flex min-w-0 gap-3',\n              index < items.length - 1 && 'pb-6',\n              classNames?.item, //\n            )}\n          >\n            <div aria-hidden=\"true\" className=\"relative w-5 shrink-0\">\n              <span\n                data-slot=\"timeline-marker\"\n                className={cn(\n                  `border-border bg-background text-muted-foreground relative\n                  z-10 flex size-5 items-center justify-center rounded-full\n                  border-2 [&>svg]:size-3`,\n                  item.status === 'primary' && 'border-primary text-primary',\n                  item.status === 'error' &&\n                    'border-destructive text-destructive',\n                  classNames?.marker, //\n                )}\n              >\n                {item.marker}\n              </span>\n              {index < items.length - 1 && (\n                <span\n                  data-slot=\"timeline-connector\"\n                  className={cn(\n                    `bg-border absolute start-[calc(50%-0.5px)] top-5 -bottom-6\n                    w-px`,\n                    classNames?.connector, //\n                  )}\n                />\n              )}\n            </div>\n            <div\n              data-slot=\"timeline-content\"\n              className={cn(\n                'min-w-0 flex-1 text-sm [overflow-wrap:anywhere]',\n                classNames?.content, //\n              )}\n            >\n              <div\n                data-slot=\"timeline-title\"\n                className={cn(\n                  'leading-5 font-medium',\n                  classNames?.title, //\n                )}\n              >\n                {item.title}\n              </div>\n              {item.timestamp != null && (\n                <TimestampElement\n                  data-slot=\"timeline-timestamp\"\n                  dateTime={\n                    TimestampElement === 'time'\n                      ? item.timestamp.dateTime\n                      : undefined\n                  }\n                  className={cn(\n                    'text-muted-foreground mt-1 block text-xs',\n                    classNames?.timestamp, //\n                  )}\n                >\n                  {item.timestamp.label}\n                </TimestampElement>\n              )}\n              {item.description != null && (\n                <div\n                  data-slot=\"timeline-description\"\n                  className={cn(\n                    'text-muted-foreground mt-2',\n                    classNames?.description, //\n                  )}\n                >\n                  {item.description}\n                </div>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\nexport default Timeline;\n"],"mappings":";;;AAuCA,MAAM,YAAY,EAAE,OAAO,WAAW,YAAY,GAAG,YAAmB;CACtE,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,WAAW,GACT,oDACA,SACF;EAEC,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,mBAAmB,KAAK,WAAW,WAAW,SAAS;GAE7D,OACE,qBAAC,MAAD;IAEE,aAAU;IACV,eAAa,KAAK,UAAU;IAC5B,WAAW,GACT,mCACA,QAAQ,MAAM,SAAS,KAAK,QAC5B,YAAY,IACd;IARF,UAAA,CAUE,qBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAlC,UAAA,CACE,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT;;4CAGA,KAAK,WAAW,aAAa,+BAC7B,KAAK,WAAW,WACd,uCACF,YAAY,MACd;MAEC,UAAA,KAAK;KACF,CAAA,GACL,QAAQ,MAAM,SAAS,KACtB,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT;2BAEA,YAAY,SACd;KACD,CAAA,CAEA;IACL,CAAA,GAAA,qBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,mDACA,YAAY,OACd;KALF,UAAA;MAOE,oBAAC,OAAD;OACE,aAAU;OACV,WAAW,GACT,yBACA,YAAY,KACd;OAEC,UAAA,KAAK;MACH,CAAA;MACJ,KAAK,aAAa,QACjB,oBAAC,kBAAD;OACE,aAAU;OACV,UACE,qBAAqB,SACjB,KAAK,UAAU,WACf,KAAA;OAEN,WAAW,GACT,4CACA,YAAY,SACd;OAEC,UAAA,KAAK,UAAU;MACA,CAAA;MAEnB,KAAK,eAAe,QACnB,oBAAC,OAAD;OACE,aAAU;OACV,WAAW,GACT,8BACA,YAAY,WACd;OAEC,UAAA,KAAK;MACH,CAAA;KAEJ;IACH,CAAA,CAAA;GA/EG,GAAA,KAAK,GA+ER;EAER,CAAC;CACC,CAAA;AAER"}