@jbpark/ui-kit 10.1.0 → 10.3.0

package/dist/Steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.mjs","names":[],"sources":["../src/components/molecules/steps.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Check, TriangleAlert } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Item {\n  key?: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  /** Mark a failed step regardless of its position. */\n  status?: 'error';\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'nav'>,\n  'children'\n> {\n  items: readonly Item[];\n  /** Zero-based index of the current step. */\n  current?: number;\n  orientation?: 'horizontal' | 'vertical';\n  classNames?: {\n    list?: string;\n    item?: string;\n    indicator?: string;\n    title?: string;\n    description?: string;\n    connector?: string;\n  };\n}\n\nconst Steps = ({\n  items,\n  current = 0,\n  orientation = 'horizontal',\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const currentIndex = items.length\n    ? Math.min(\n        Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0),\n        items.length - 1,\n      )\n    : -1;\n\n  return (\n    <nav\n      {...props}\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      dir={dir ?? direction}\n      aria-label={ariaLabel ?? 'Progress'}\n      className={cn('w-full', className)}\n    >\n      <ol\n        data-slot=\"steps-list\"\n        className={cn(\n          'm-0 flex list-none p-0',\n          orientation === 'vertical' && 'flex-col',\n          classNames?.list,\n          //\n        )}\n      >\n        {items.map((item, index) => {\n          const status =\n            item.status === 'error'\n              ? 'error'\n              : index < currentIndex\n                ? 'complete'\n                : index === currentIndex\n                  ? 'current'\n                  : 'upcoming';\n          const isCurrent = index === currentIndex;\n\n          return (\n            <li\n              key={item.key ?? index}\n              data-slot=\"steps-item\"\n              data-status={status}\n              aria-current={isCurrent ? 'step' : undefined}\n              className={cn(\n                'm-0 flex min-w-0',\n                orientation === 'horizontal'\n                  ? 'flex-1 items-start'\n                  : 'flex-col',\n                classNames?.item,\n                //\n              )}\n            >\n              <div className=\"flex min-w-0 items-start gap-2.5\">\n                <span\n                  data-slot=\"steps-indicator\"\n                  aria-hidden=\"true\"\n                  className={cn(\n                    `border-border text-muted-foreground flex size-7 shrink-0\n                    items-center justify-center rounded-full border text-sm\n                    font-medium`,\n                    status === 'complete' &&\n                      'border-primary bg-primary text-primary-foreground',\n                    status === 'current' && 'border-primary text-primary',\n                    status === 'error' &&\n                      `border-destructive bg-destructive\n                      text-destructive-foreground`,\n                    classNames?.indicator,\n                    //\n                  )}\n                >\n                  {item.icon ??\n                    (status === 'complete' ? (\n                      <Check className=\"size-4\" />\n                    ) : status === 'error' ? (\n                      <TriangleAlert className=\"size-4\" />\n                    ) : (\n                      index + 1\n                    ))}\n                </span>\n                <span className=\"min-w-0\">\n                  <span\n                    data-slot=\"steps-title\"\n                    className={cn(\n                      'block text-sm font-medium',\n                      status === 'upcoming'\n                        ? 'text-muted-foreground'\n                        : status === 'error'\n                          ? 'text-destructive'\n                          : 'text-foreground',\n                      classNames?.title,\n                      //\n                    )}\n                  >\n                    {item.title}\n                  </span>\n                  {item.description != null && (\n                    <span\n                      data-slot=\"steps-description\"\n                      className={cn(\n                        'text-muted-foreground block text-xs',\n                        classNames?.description,\n                      )}\n                    >\n                      {item.description}\n                    </span>\n                  )}\n                  <span className=\"sr-only\">\n                    {status === 'complete'\n                      ? 'Completed'\n                      : status === 'current'\n                        ? 'Current step'\n                        : status === 'error'\n                          ? 'Error'\n                          : 'Upcoming'}\n                  </span>\n                </span>\n              </div>\n              {index < items.length - 1 && (\n                <span\n                  data-slot=\"steps-connector\"\n                  aria-hidden=\"true\"\n                  className={cn(\n                    'bg-border shrink-0',\n                    orientation === 'horizontal'\n                      ? 'mx-3 mt-3.5 h-px min-w-3 flex-1'\n                      : 'my-2 ms-3.5 h-7 w-px',\n                    index < currentIndex && 'bg-primary',\n                    classNames?.connector,\n                    //\n                  )}\n                />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default Steps;\n"],"mappings":";;;;;;;AAoCA,MAAM,SAAS,EACb,OACA,UAAU,GACV,cAAc,cACd,WACA,YACA,KACA,cAAc,WACd,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,eAAe,MAAM,SACvB,KAAK,IACH,KAAK,IAAI,OAAO,SAAS,OAAO,IAAI,KAAK,MAAM,OAAO,IAAI,GAAG,CAAC,GAC9D,MAAM,SAAS,CACjB,IACA;CAEJ,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,oBAAkB;EAClB,KAAK,OAAO;EACZ,cAAY,aAAa;EACzB,WAAW,GAAG,UAAU,SAAS;EAEjC,UAAA,oBAAC,MAAD;GACE,aAAU;GACV,WAAW,GACT,0BACA,gBAAgB,cAAc,YAC9B,YAAY,IAEd;GAEC,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SACJ,KAAK,WAAW,UACZ,UACA,QAAQ,eACN,aACA,UAAU,eACR,YACA;IAGV,OACE,qBAAC,MAAD;KAEE,aAAU;KACV,eAAa;KACb,gBAPc,UAAU,eAOE,SAAS,KAAA;KACnC,WAAW,GACT,oBACA,gBAAgB,eACZ,uBACA,YACJ,YAAY,IAEd;KAZF,UAAA,CAcE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OACE,aAAU;OACV,eAAY;OACZ,WAAW,GACT;;kCAGA,WAAW,cACT,qDACF,WAAW,aAAa,+BACxB,WAAW,WACT;oDAEF,YAAY,SAEd;OAEC,UAAA,KAAK,SACH,WAAW,aACV,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA,IACzB,WAAW,UACb,oBAAC,eAAD,EAAe,WAAU,SAAU,CAAA,IAEnC,QAAQ;MAER,CAAA,GACN,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA;QACE,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,6BACA,WAAW,aACP,0BACA,WAAW,UACT,qBACA,mBACN,YAAY,KAEd;SAEC,UAAA,KAAK;QACF,CAAA;QACL,KAAK,eAAe,QACnB,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,uCACA,YAAY,WACd;SAEC,UAAA,KAAK;QACF,CAAA;QAER,oBAAC,QAAD;SAAM,WAAU;SACb,UAAA,WAAW,aACR,cACA,WAAW,YACT,iBACA,WAAW,UACT,UACA;QACJ,CAAA;OACF;MACH,CAAA,CAAA;KACJ,CAAA,GAAA,QAAQ,MAAM,SAAS,KACtB,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAW,GACT,sBACA,gBAAgB,eACZ,oCACA,wBACJ,QAAQ,gBAAgB,cACxB,YAAY,SAEd;KACD,CAAA,CAED;IA7FG,GAAA,KAAK,OAAO,KA6Ff;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

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"}

package/dist/Tour.d.mts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/organisms/tour.d.ts
+export interface Step {
+  key: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Resolved after hydration. Missing/hidden targets use a centered popup. */
+  target?: () => HTMLElement | null;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> {
+  steps: readonly Step[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (current: number) => void;
+  onClose?: () => void;
+  onFinish?: () => void;
+  scrollIntoView?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  finishLabel?: string;
+  closeLabel?: string;
+  formatProgress?: (current: number, total: number) => string;
+  classNames?: {
+    popup?: string;
+    mask?: string;
+    highlight?: string;
+    actions?: string;
+  };
+}
+declare const Tour: ({ steps, open: openProp, defaultOpen, onOpenChange, current: currentProp, defaultCurrent, onChange, onClose, onFinish, scrollIntoView, previousLabel, nextLabel, finishLabel, closeLabel, formatProgress, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Tour as default };
+//# sourceMappingURL=Tour.d.mts.map

package/dist/Tour.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.d.mts","names":[],"sources":["../src/components/organisms/tour.tsx"],"mappings":";;iBAmBiB;EACf;EACA,OAAO;EACP,cAAc;;EAEd,eAAe;EACf;;iBAGe,cAAc,KAC7B;EAGA,gBAAgB;EAChB;EACA;EACA,gBAAgB;EAChB;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,iBAAiB;EACnC;IACE;IACA;IACA;IACA;;;cAOE,SAAQ,OAAA,MAAA,UAAA,aAAA,cAAA,SAAA,aAAA,gBAAA,UAAA,SAAA,UAAA,gBAAA,eAAA,WAAA,aAAA,YAAA,gBAAA,WAAA,eAAA,SAmBX,0BAAK,IAAA"}

package/dist/Tour.mjs

@@ -0,0 +1,192 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { OVERLAY_LAYER } from "./lib/z-layers.mjs";
+import Button from "./Button.mjs";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle } from "./core/popover.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/tour.tsx
+const defaultFormatProgress = (current, total) => `Step ${current} of ${total}`;
+const Tour = ({ steps, open: openProp, defaultOpen = false, onOpenChange, current: currentProp, defaultCurrent = 0, onChange, onClose, onFinish, scrollIntoView = true, previousLabel = "Previous", nextLabel = "Next", finishLabel = "Finish", closeLabel = "Close tour", formatProgress = defaultFormatProgress, className, classNames, ...props }) => {
+	const { getContainer, direction } = useConfig();
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const [current, setCurrent] = useControllableState({
+		value: currentProp,
+		defaultValue: defaultCurrent,
+		onChange
+	});
+	const index = Number.isFinite(current) ? Math.max(0, Math.min(steps.length - 1, Math.floor(current))) : 0;
+	const step = steps[index];
+	const [measurement, setMeasurement] = useState(null);
+	const target = open && measurement && measurement.step === step ? measurement.target : null;
+	const rect = open && measurement && measurement.step === step ? measurement.rect : null;
+	const fallback = useMemo(() => ({ getBoundingClientRect: () => new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0) }), []);
+	useEffect(() => {
+		if (!open || !step) return;
+		let previous = null;
+		const update = () => {
+			const element = step.target?.() ?? null;
+			const resolved = !!element?.isConnected && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden" ? element : null;
+			if (resolved !== previous) {
+				if (previous) resizeObserver.unobserve(previous);
+				if (resolved) {
+					resizeObserver.observe(resolved);
+					if (scrollIntoView) resolved.scrollIntoView({
+						block: "center",
+						inline: "nearest",
+						behavior: "instant"
+					});
+				}
+			}
+			previous = resolved;
+			const bounds = resolved?.getBoundingClientRect();
+			const next = bounds ? {
+				top: bounds.top,
+				left: bounds.left,
+				width: bounds.width,
+				height: bounds.height
+			} : null;
+			setMeasurement((existing) => existing?.step === step && existing.target === resolved && existing.rect?.top === next?.top && existing.rect?.left === next?.left && existing.rect?.width === next?.width && existing.rect?.height === next?.height ? existing : {
+				step,
+				target: resolved,
+				rect: next
+			});
+		};
+		const frame = requestAnimationFrame(update);
+		const observer = new MutationObserver(update);
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"hidden",
+				"style",
+				"class"
+			]
+		});
+		const resizeObserver = new ResizeObserver(update);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [
+		open,
+		step,
+		scrollIntoView
+	]);
+	const close = () => {
+		onClose?.();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "tour",
+		className: cn("contents", className),
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open: open && !!step,
+			modal: true,
+			onOpenChange: (next, details) => {
+				if (details.reason === "outside-press") {
+					details.cancel();
+					return;
+				}
+				if (!next) close();
+			},
+			children: [/* @__PURE__ */ jsxs(PopoverPortal, {
+				container: getContainer(),
+				children: [/* @__PURE__ */ jsx(PopoverBackdrop, {
+					"data-slot": "tour-mask",
+					className: cn("fixed inset-0 bg-black/40", OVERLAY_LAYER, classNames?.mask)
+				}), open && rect && /* @__PURE__ */ jsx("div", {
+					"data-slot": "tour-highlight",
+					"aria-hidden": "true",
+					style: {
+						position: "fixed",
+						top: rect.top - 4,
+						left: rect.left - 4,
+						width: rect.width + 8,
+						height: rect.height + 8
+					},
+					className: cn("border-primary pointer-events-none rounded-md border-2", "z-1000", classNames?.highlight)
+				})]
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				"data-slot": "tour-popup",
+				dir: props.dir ?? direction,
+				anchor: target ?? fallback,
+				side: step?.placement ?? "bottom",
+				sideOffset: 12,
+				positionerStyle: target ? void 0 : {
+					position: "fixed",
+					left: "50%",
+					top: "50%",
+					transform: "translate(-50%, -50%)"
+				},
+				className: cn(`max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]
+            overflow-y-auto`, classNames?.popup),
+				children: [
+					/* @__PURE__ */ jsx(PopoverTitle, { children: step?.title }),
+					step?.description != null && /* @__PURE__ */ jsx(PopoverDescription, {
+						className: "mt-2 text-sm",
+						children: step.description
+					}),
+					/* @__PURE__ */ jsx("p", {
+						"data-slot": "tour-progress",
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						className: "text-muted-foreground mt-3 text-xs",
+						children: formatProgress(index + 1, steps.length)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("mt-4 flex flex-wrap gap-2", classNames?.actions),
+						children: [
+							/* @__PURE__ */ jsx(PopoverClose, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "text",
+									size: "small"
+								}),
+								children: closeLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outlined",
+								size: "small",
+								disabled: index === 0,
+								focusableWhenDisabled: true,
+								className: "aria-disabled:pointer-events-none\n                aria-disabled:opacity-50",
+								onClick: () => setCurrent(index - 1),
+								children: previousLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								onClick: () => {
+									if (index < steps.length - 1) setCurrent(index + 1);
+									else {
+										onFinish?.();
+										setOpen(false);
+									}
+								},
+								children: index === steps.length - 1 ? finishLabel : nextLabel
+							})
+						]
+					}),
+					target && /* @__PURE__ */ jsx(PopoverArrow, {})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { Tour as default };
+
+//# sourceMappingURL=Tour.mjs.map

package/dist/Tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.mjs","names":["popover.Popover","popover.PopoverPortal","popover.PopoverBackdrop","popover.PopoverContent","popover.PopoverTitle","popover.PopoverDescription","popover.PopoverClose","popover.PopoverArrow"],"sources":["../src/components/organisms/tour.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { popover } from '../../core';\nimport { OVERLAY_LAYER } from '../../lib/z-layers';\nimport Button from '../atoms/button';\n\nexport interface Step {\n  key: string;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Resolved after hydration. Missing/hidden targets use a centered popup. */\n  target?: () => HTMLElement | null;\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onChange'\n> {\n  steps: readonly Step[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  current?: number;\n  defaultCurrent?: number;\n  onChange?: (current: number) => void;\n  onClose?: () => void;\n  onFinish?: () => void;\n  scrollIntoView?: boolean;\n  previousLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  closeLabel?: string;\n  formatProgress?: (current: number, total: number) => string;\n  classNames?: {\n    popup?: string;\n    mask?: string;\n    highlight?: string;\n    actions?: string;\n  };\n}\n\nconst defaultFormatProgress = (current: number, total: number) =>\n  `Step ${current} of ${total}`;\n\nconst Tour = ({\n  steps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  current: currentProp,\n  defaultCurrent = 0,\n  onChange,\n  onClose,\n  onFinish,\n  scrollIntoView = true,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  finishLabel = 'Finish',\n  closeLabel = 'Close tour',\n  formatProgress = defaultFormatProgress,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const { getContainer, direction } = useConfig();\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const [current, setCurrent] = useControllableState({\n    value: currentProp,\n    defaultValue: defaultCurrent,\n    onChange,\n  });\n  const index = Number.isFinite(current)\n    ? Math.max(0, Math.min(steps.length - 1, Math.floor(current)))\n    : 0;\n  const step = steps[index];\n  const [measurement, setMeasurement] = useState<{\n    step: Step;\n    target: HTMLElement | null;\n    rect: { top: number; left: number; width: number; height: number } | null;\n  } | null>(null);\n  const target =\n    open && measurement && measurement.step === step\n      ? measurement.target\n      : null;\n  const rect =\n    open && measurement && measurement.step === step ? measurement.rect : null;\n  const fallback = useMemo(\n    () => ({\n      getBoundingClientRect: () =>\n        new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!open || !step) return;\n\n    let previous: HTMLElement | null = null;\n    const update = () => {\n      const element = step.target?.() ?? null;\n      const isVisible =\n        !!element?.isConnected &&\n        element.getClientRects().length > 0 &&\n        getComputedStyle(element).visibility !== 'hidden';\n      const resolved = isVisible ? element : null;\n\n      if (resolved !== previous) {\n        if (previous) resizeObserver.unobserve(previous);\n\n        if (resolved) {\n          resizeObserver.observe(resolved);\n\n          if (scrollIntoView) {\n            resolved.scrollIntoView({\n              block: 'center',\n              inline: 'nearest',\n              behavior: 'instant',\n            });\n          }\n        }\n      }\n\n      previous = resolved;\n      const bounds = resolved?.getBoundingClientRect();\n      const next = bounds\n        ? {\n            top: bounds.top,\n            left: bounds.left,\n            width: bounds.width,\n            height: bounds.height,\n          }\n        : null;\n\n      setMeasurement(existing =>\n        existing?.step === step &&\n        existing.target === resolved &&\n        existing.rect?.top === next?.top &&\n        existing.rect?.left === next?.left &&\n        existing.rect?.width === next?.width &&\n        existing.rect?.height === next?.height\n          ? existing\n          : { step, target: resolved, rect: next },\n      );\n    };\n\n    const frame = requestAnimationFrame(update);\n    const observer = new MutationObserver(update);\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['hidden', 'style', 'class'],\n    });\n    const resizeObserver = new ResizeObserver(update);\n\n    window.addEventListener('resize', update);\n    window.addEventListener('scroll', update, true);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', update);\n      window.removeEventListener('scroll', update, true);\n    };\n  }, [open, step, scrollIntoView]);\n\n  const close = () => {\n    onClose?.();\n    setOpen(false);\n  };\n\n  return (\n    <div\n      {...props}\n      data-slot=\"tour\"\n      className={cn(\n        'contents',\n        className, //\n      )}\n    >\n      <popover.Popover\n        open={open && !!step}\n        modal\n        onOpenChange={(next, details) => {\n          if (details.reason === 'outside-press') {\n            details.cancel();\n\n            return;\n          }\n\n          if (!next) close();\n        }}\n      >\n        <popover.PopoverPortal container={getContainer()}>\n          <popover.PopoverBackdrop\n            data-slot=\"tour-mask\"\n            className={cn(\n              'fixed inset-0 bg-black/40',\n              OVERLAY_LAYER,\n              classNames?.mask, //\n            )}\n          />\n          {open && rect && (\n            <div\n              data-slot=\"tour-highlight\"\n              aria-hidden=\"true\"\n              style={{\n                position: 'fixed',\n                top: rect.top - 4,\n                left: rect.left - 4,\n                width: rect.width + 8,\n                height: rect.height + 8,\n              }}\n              className={cn(\n                'border-primary pointer-events-none rounded-md border-2',\n                OVERLAY_LAYER,\n                classNames?.highlight, //\n              )}\n            />\n          )}\n        </popover.PopoverPortal>\n        <popover.PopoverContent\n          data-slot=\"tour-popup\"\n          dir={props.dir ?? direction}\n          anchor={target ?? fallback}\n          side={step?.placement ?? 'bottom'}\n          sideOffset={12}\n          positionerStyle={\n            target\n              ? undefined\n              : {\n                  position: 'fixed',\n                  left: '50%',\n                  top: '50%',\n                  transform: 'translate(-50%, -50%)',\n                }\n          }\n          className={cn(\n            `max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]\n            overflow-y-auto`,\n            classNames?.popup, //\n          )}\n        >\n          <popover.PopoverTitle>{step?.title}</popover.PopoverTitle>\n          {step?.description != null && (\n            <popover.PopoverDescription className=\"mt-2 text-sm\">\n              {step.description}\n            </popover.PopoverDescription>\n          )}\n          <p\n            data-slot=\"tour-progress\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className=\"text-muted-foreground mt-3 text-xs\"\n          >\n            {formatProgress(index + 1, steps.length)}\n          </p>\n          <div\n            className={cn(\n              'mt-4 flex flex-wrap gap-2',\n              classNames?.actions, //\n            )}\n          >\n            <popover.PopoverClose\n              render={<Button variant=\"text\" size=\"small\" />}\n            >\n              {closeLabel}\n            </popover.PopoverClose>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={index === 0}\n              focusableWhenDisabled\n              className=\"aria-disabled:pointer-events-none\n                aria-disabled:opacity-50\"\n              onClick={() => setCurrent(index - 1)}\n            >\n              {previousLabel}\n            </Button>\n            <Button\n              size=\"small\"\n              onClick={() => {\n                if (index < steps.length - 1) {\n                  setCurrent(index + 1);\n                } else {\n                  onFinish?.();\n                  setOpen(false);\n                }\n              }}\n            >\n              {index === steps.length - 1 ? finishLabel : nextLabel}\n            </Button>\n          </div>\n          {target && <popover.PopoverArrow />}\n        </popover.PopoverContent>\n      </popover.Popover>\n    </div>\n  );\n};\n\nexport default Tour;\n"],"mappings":";;;;;;;;;;AAuDA,MAAM,yBAAyB,SAAiB,UAC9C,QAAQ,QAAQ,MAAM;AAExB,MAAM,QAAQ,EACZ,OACA,MAAM,UACN,cAAc,OACd,cACA,SAAS,aACT,iBAAiB,GACjB,UACA,SACA,UACA,iBAAiB,MACjB,gBAAgB,YAChB,YAAY,QACZ,cAAc,UACd,aAAa,cACb,iBAAiB,uBACjB,WACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,cAAc,UAAU;CAC9C,MAAM,CAAC,MAAM,WAAW,qBAAqB;EAC3C,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,OAAO;EACP,cAAc;EACd;CACF,CAAC;CACD,MAAM,QAAQ,OAAO,SAAS,OAAO,IACjC,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,SAAS,GAAG,KAAK,MAAM,OAAO,CAAC,CAAC,IAC3D;CACJ,MAAM,OAAO,MAAM;CACnB,MAAM,CAAC,aAAa,kBAAkB,SAI5B,IAAI;CACd,MAAM,SACJ,QAAQ,eAAe,YAAY,SAAS,OACxC,YAAY,SACZ;CACN,MAAM,OACJ,QAAQ,eAAe,YAAY,SAAS,OAAO,YAAY,OAAO;CACxE,MAAM,WAAW,eACR,EACL,6BACE,IAAI,QAAQ,OAAO,aAAa,GAAG,OAAO,cAAc,GAAG,GAAG,CAAC,EACnE,IACA,CAAC,CACH;CAEA,gBAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,MAAM;EAEpB,IAAI,WAA+B;EACnC,MAAM,eAAe;GACnB,MAAM,UAAU,KAAK,SAAS,KAAK;GAKnC,MAAM,WAHJ,CAAC,CAAC,SAAS,eACX,QAAQ,eAAe,CAAC,CAAC,SAAS,KAClC,iBAAiB,OAAO,CAAC,CAAC,eAAe,WACd,UAAU;GAEvC,IAAI,aAAa,UAAU;IACzB,IAAI,UAAU,eAAe,UAAU,QAAQ;IAE/C,IAAI,UAAU;KACZ,eAAe,QAAQ,QAAQ;KAE/B,IAAI,gBACF,SAAS,eAAe;MACtB,OAAO;MACP,QAAQ;MACR,UAAU;KACZ,CAAC;IAEL;GACF;GAEA,WAAW;GACX,MAAM,SAAS,UAAU,sBAAsB;GAC/C,MAAM,OAAO,SACT;IACE,KAAK,OAAO;IACZ,MAAM,OAAO;IACb,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB,IACA;GAEJ,gBAAe,aACb,UAAU,SAAS,QACnB,SAAS,WAAW,YACpB,SAAS,MAAM,QAAQ,MAAM,OAC7B,SAAS,MAAM,SAAS,MAAM,QAC9B,SAAS,MAAM,UAAU,MAAM,SAC/B,SAAS,MAAM,WAAW,MAAM,SAC5B,WACA;IAAE;IAAM,QAAQ;IAAU,MAAM;GAAK,CAC3C;EACF;EAEA,MAAM,QAAQ,sBAAsB,MAAM;EAC1C,MAAM,WAAW,IAAI,iBAAiB,MAAM;EAC5C,SAAS,QAAQ,SAAS,MAAM;GAC9B,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAU;IAAS;GAAO;EAC9C,CAAC;EACD,MAAM,iBAAiB,IAAI,eAAe,MAAM;EAEhD,OAAO,iBAAiB,UAAU,MAAM;EACxC,OAAO,iBAAiB,UAAU,QAAQ,IAAI;EAE9C,aAAa;GACX,qBAAqB,KAAK;GAC1B,SAAS,WAAW;GACpB,eAAe,WAAW;GAC1B,OAAO,oBAAoB,UAAU,MAAM;GAC3C,OAAO,oBAAoB,UAAU,QAAQ,IAAI;EACnD;CACF,GAAG;EAAC;EAAM;EAAM;CAAc,CAAC;CAE/B,MAAM,cAAc;EAClB,UAAU;EACV,QAAQ,KAAK;CACf;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT,YACA,SACF;EAEA,UAAA,qBAACA,SAAD;GACE,MAAM,QAAQ,CAAC,CAAC;GAChB,OAAA;GACA,eAAe,MAAM,YAAY;IAC/B,IAAI,QAAQ,WAAW,iBAAiB;KACtC,QAAQ,OAAO;KAEf;IACF;IAEA,IAAI,CAAC,MAAM,MAAM;GACnB;GAXF,UAAA,CAaE,qBAACC,eAAD;IAAuB,WAAW,aAAa;IAA/C,UAAA,CACE,oBAACC,iBAAD;KACE,aAAU;KACV,WAAW,GACT,6BACA,eACA,YAAY,IACd;IACD,CAAA,GACA,QAAQ,QACP,oBAAC,OAAD;KACE,aAAU;KACV,eAAY;KACZ,OAAO;MACL,UAAU;MACV,KAAK,KAAK,MAAM;MAChB,MAAM,KAAK,OAAO;MAClB,OAAO,KAAK,QAAQ;MACpB,QAAQ,KAAK,SAAS;KACxB;KACA,WAAW,GACT,0DAAA,UAEA,YAAY,SACd;IACD,CAAA,CAEkB;GACvB,CAAA,GAAA,qBAACC,gBAAD;IACE,aAAU;IACV,KAAK,MAAM,OAAO;IAClB,QAAQ,UAAU;IAClB,MAAM,MAAM,aAAa;IACzB,YAAY;IACZ,iBACE,SACI,KAAA,IACA;KACE,UAAU;KACV,MAAM;KACN,KAAK;KACL,WAAW;IACb;IAEN,WAAW,GACT;8BAEA,YAAY,KACd;IApBF,UAAA;KAsBE,oBAACC,cAAD,EAAA,UAAuB,MAAM,MAA4B,CAAA;KACxD,MAAM,eAAe,QACpB,oBAACC,oBAAD;MAA4B,WAAU;MACnC,UAAA,KAAK;KACoB,CAAA;KAE9B,oBAAC,KAAD;MACE,aAAU;MACV,MAAK;MACL,aAAU;MACV,eAAY;MACZ,WAAU;MAET,UAAA,eAAe,QAAQ,GAAG,MAAM,MAAM;KACtC,CAAA;KACH,qBAAC,OAAD;MACE,WAAW,GACT,6BACA,YAAY,OACd;MAJF,UAAA;OAME,oBAACC,cAAD;QACE,QAAQ,oBAAC,QAAD;SAAQ,SAAQ;SAAO,MAAK;QAAS,CAAA;QAE5C,UAAA;OACmB,CAAA;OACtB,oBAAC,QAAD;QACE,SAAQ;QACR,MAAK;QACL,UAAU,UAAU;QACpB,uBAAA;QACA,WAAU;QAEV,eAAe,WAAW,QAAQ,CAAC;QAElC,UAAA;OACK,CAAA;OACR,oBAAC,QAAD;QACE,MAAK;QACL,eAAe;SACb,IAAI,QAAQ,MAAM,SAAS,GACzB,WAAW,QAAQ,CAAC;cACf;UACL,WAAW;UACX,QAAQ,KAAK;SACf;QACF;QAEC,UAAA,UAAU,MAAM,SAAS,IAAI,cAAc;OACtC,CAAA;MACL;;KACJ,UAAU,oBAACC,cAAD,CAAuB,CAAA;IACZ;GACT,CAAA,CAAA;;CACd,CAAA;AAET"}

package/dist/Transfer.d.mts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/molecules/transfer.d.ts
+export interface Item {
+  key: string;
+  label: string;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> {
+  /** Stable, unique keys; both panels follow this array's order. */
+  items: readonly Item[];
+  targetKeys: readonly string[];
+  onChange?: (targetKeys: string[]) => void;
+  disabled?: boolean;
+  searchable?: boolean;
+  titles?: readonly [string, string];
+  moveLabels?: readonly [string, string];
+  selectAllLabel?: string;
+  searchLabel?: string;
+  emptyText?: ReactNode;
+  /** Visible / total / visible selected counts, also used by the live region. */
+  formatCount?: (visible: number, total: number, selected: number) => string;
+  classNames?: {
+    panel?: string;
+    header?: string;
+    search?: string;
+    list?: string;
+    item?: string;
+    actions?: string;
+    empty?: string;
+  };
+}
+declare const Transfer: ({ items, targetKeys, onChange, disabled, searchable, titles, moveLabels, selectAllLabel, searchLabel, emptyText, formatCount, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Transfer as default };
+//# sourceMappingURL=Transfer.d.mts.map

package/dist/Transfer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transfer.d.mts","names":[],"sources":["../src/components/molecules/transfer.tsx"],"mappings":";;iBAeiB;EACf;EACA;EACA,cAAc;EACd;;iBAGe,cAAc,KAC7B;;EAIA,gBAAgB;EAChB;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;;EAEZ,eAAe,iBAAiB,eAAe;EAC/C;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAOE,aAAY,OAAA,YAAA,UAAA,UAAA,YAAA,QAAA,YAAA,gBAAA,aAAA,WAAA,aAAA,WAAA,eAAA,SAef,0BAAK,IAAA"}