@comitor/ui 1.11.0 → 2.1.0

package/dist/components/ui/timeline.js

@@ -0,0 +1,559 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+const ROOT_NAME = "Timeline";
+const ITEM_NAME = "TimelineItem";
+const DOT_NAME = "TimelineDot";
+const CONNECTOR_NAME = "TimelineConnector";
+const CONTENT_NAME = "TimelineContent";
+function getItemStatus(itemIndex, activeIndex) {
+  if (activeIndex === void 0 || itemIndex < 0) return "pending";
+  if (itemIndex < activeIndex) return "completed";
+  if (itemIndex === activeIndex) return "active";
+  return "pending";
+}
+function getSortedEntries(entries) {
+  return entries.sort((a, b) => {
+    const elementA = a[1].current;
+    const elementB = b[1].current;
+    if (!elementA || !elementB) return 0;
+    const position = elementA.compareDocumentPosition(elementB);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    return 0;
+  });
+}
+function useStore(selector) {
+  const store = React.useContext(StoreContext);
+  if (!store) {
+    throw new Error(`\`useStore\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const TimelineContext = React.createContext(null);
+function useTimelineContext(consumerName) {
+  const context = React.useContext(TimelineContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const timelineVariants = cva("relative flex [--timeline-connector-thickness:0.125rem] [--timeline-dot-size:0.875rem]", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-start"
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      variant: "default",
+      class: "gap-6"
+    },
+    {
+      orientation: "horizontal",
+      variant: "default",
+      class: "gap-8"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      class: "relative w-full gap-3"
+    },
+    {
+      orientation: "horizontal",
+      variant: "alternate",
+      class: "items-center gap-4"
+    }
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default"
+  }
+});
+function Timeline(props) {
+  const {
+    orientation = "vertical",
+    variant = "default",
+    dir: dirProp,
+    activeIndex,
+    asChild,
+    className,
+    ...rootProps
+  } = props;
+  const dir = useDirection(dirProp);
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    items: /* @__PURE__ */ new Map()
+  }));
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      },
+      onItemRegister: (id, ref) => {
+        stateRef.current.items.set(id, ref);
+        store.notify();
+      },
+      onItemUnregister: (id) => {
+        stateRef.current.items.delete(id);
+        store.notify();
+      },
+      getNextItemStatus: (id, activeIndex2) => {
+        const entries = Array.from(stateRef.current.items.entries());
+        const sortedEntries = getSortedEntries(entries);
+        const currentIndex = sortedEntries.findIndex(([key]) => key === id);
+        if (currentIndex === -1 || currentIndex === sortedEntries.length - 1) {
+          return void 0;
+        }
+        const nextItemIndex = currentIndex + 1;
+        return getItemStatus(nextItemIndex, activeIndex2);
+      },
+      getItemIndex: (id) => {
+        const entries = Array.from(stateRef.current.items.entries());
+        const sortedEntries = getSortedEntries(entries);
+        return sortedEntries.findIndex(([key]) => key === id);
+      }
+    };
+  }, [listenersRef, stateRef]);
+  const contextValue = React.useMemo(
+    () => ({
+      dir,
+      orientation,
+      variant,
+      activeIndex
+    }),
+    [dir, orientation, variant, activeIndex]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      role: "list",
+      "data-slot": "timeline",
+      "data-orientation": orientation,
+      "data-variant": variant,
+      dir,
+      ...rootProps,
+      className: cn(timelineVariants({ orientation, variant, className }))
+    }
+  ) }) });
+}
+const TimelineItemContext = React.createContext(null);
+function useTimelineItemContext(consumerName) {
+  const context = React.useContext(TimelineItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+const timelineItemVariants = cva("relative flex", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      variant: "default",
+      class: "gap-3 pb-8 last:pb-0"
+    },
+    {
+      orientation: "horizontal",
+      variant: "default",
+      class: "flex-col gap-3"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: false,
+      class: "w-1/2 gap-3 pr-6 pb-12 last:pb-0"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: true,
+      class: "ml-auto w-1/2 flex-row-reverse gap-3 pb-12 pl-6 last:pb-0"
+    },
+    {
+      orientation: "horizontal",
+      variant: "alternate",
+      class: "grid min-w-0 grid-rows-[1fr_auto_1fr] gap-3"
+    }
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+function TimelineItem(props) {
+  const { asChild, className, id, ref, ...itemProps } = props;
+  const { dir, orientation, variant, activeIndex } = useTimelineContext(ITEM_NAME);
+  const store = useStoreContext(ITEM_NAME);
+  const instanceId = React.useId();
+  const itemId = id ?? instanceId;
+  const itemRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const itemIndex = useStore((state) => state.getItemIndex(itemId));
+  const status = React.useMemo(() => {
+    return getItemStatus(itemIndex, activeIndex);
+  }, [activeIndex, itemIndex]);
+  useIsomorphicLayoutEffect(() => {
+    store.onItemRegister(itemId, itemRef);
+    return () => {
+      store.onItemUnregister(itemId);
+    };
+  }, [itemId, store]);
+  const isAlternateRight = variant === "alternate" && itemIndex % 2 === 1;
+  const itemContextValue = React.useMemo(
+    () => ({ id: itemId, status, isAlternateRight }),
+    [itemId, status, isAlternateRight]
+  );
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      "aria-current": status === "active" ? "step" : void 0,
+      "data-slot": "timeline-item",
+      "data-status": status,
+      "data-orientation": orientation,
+      "data-alternate-right": isAlternateRight ? "" : void 0,
+      id: itemId,
+      dir,
+      ...itemProps,
+      ref: composedRef,
+      className: cn(
+        timelineItemVariants({
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  ) });
+}
+const timelineContentVariants = cva("flex-1", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "alternate",
+      orientation: "vertical",
+      isAlternateRight: false,
+      class: "text-right"
+    },
+    {
+      variant: "alternate",
+      orientation: "horizontal",
+      isAlternateRight: false,
+      class: "row-start-3 pt-2"
+    },
+    {
+      variant: "alternate",
+      orientation: "horizontal",
+      isAlternateRight: true,
+      class: "row-start-1 pb-2"
+    }
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+function TimelineContent(props) {
+  const { asChild, className, ...contentProps } = props;
+  const { variant, orientation } = useTimelineContext(CONTENT_NAME);
+  const { status, isAlternateRight } = useTimelineItemContext(CONTENT_NAME);
+  const ContentPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      "data-slot": "timeline-content",
+      "data-status": status,
+      ...contentProps,
+      className: cn(
+        timelineContentVariants({
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+const timelineDotVariants = cva(
+  "relative z-10 flex size-[var(--timeline-dot-size)] shrink-0 items-center justify-center rounded-full border-2 bg-background",
+  {
+    variants: {
+      status: {
+        completed: "border-primary-ink",
+        active: "border-primary-ink",
+        pending: "border-muted-foreground"
+      },
+      orientation: {
+        vertical: "",
+        horizontal: ""
+      },
+      variant: {
+        default: "",
+        alternate: ""
+      },
+      isAlternateRight: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "alternate",
+        orientation: "vertical",
+        isAlternateRight: false,
+        class: "absolute -right-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background"
+      },
+      {
+        variant: "alternate",
+        orientation: "vertical",
+        isAlternateRight: true,
+        class: "absolute -left-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background"
+      },
+      {
+        variant: "alternate",
+        orientation: "horizontal",
+        class: "row-start-2 bg-background"
+      },
+      {
+        variant: "alternate",
+        status: "completed",
+        class: "bg-background"
+      },
+      {
+        variant: "alternate",
+        status: "active",
+        class: "bg-background"
+      }
+    ],
+    defaultVariants: {
+      status: "pending",
+      orientation: "vertical",
+      variant: "default",
+      isAlternateRight: false
+    }
+  }
+);
+function TimelineDot(props) {
+  const { asChild, className, ...dotProps } = props;
+  const { orientation, variant } = useTimelineContext(DOT_NAME);
+  const { status, isAlternateRight } = useTimelineItemContext(DOT_NAME);
+  const DotPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DotPrimitive,
+    {
+      "data-slot": "timeline-dot",
+      "data-status": status,
+      "data-orientation": orientation,
+      ...dotProps,
+      className: cn(
+        timelineDotVariants({
+          status,
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+const timelineConnectorVariants = cva("absolute z-0", {
+  variants: {
+    isCompleted: {
+      true: "bg-primary-ink",
+      false: "bg-border"
+    },
+    orientation: {
+      vertical: "",
+      horizontal: ""
+    },
+    variant: {
+      default: "",
+      alternate: ""
+    },
+    isAlternateRight: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      variant: "default",
+      class: "start-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] top-3 h-[calc(100%+0.5rem)] w-[var(--timeline-connector-thickness)]"
+    },
+    {
+      orientation: "horizontal",
+      variant: "default",
+      class: "start-3 top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] h-[var(--timeline-connector-thickness)] w-[calc(100%+0.5rem)]"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: false,
+      class: "top-2 -right-[calc(var(--timeline-connector-thickness)/2)] h-full w-[var(--timeline-connector-thickness)]"
+    },
+    {
+      orientation: "vertical",
+      variant: "alternate",
+      isAlternateRight: true,
+      class: "top-2 -left-[calc(var(--timeline-connector-thickness)/2)] h-full w-[var(--timeline-connector-thickness)]"
+    },
+    {
+      orientation: "horizontal",
+      variant: "alternate",
+      class: "top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] left-3 row-start-2 h-[var(--timeline-connector-thickness)] w-[calc(100%+0.5rem)]"
+    }
+  ],
+  defaultVariants: {
+    isCompleted: false,
+    orientation: "vertical",
+    variant: "default",
+    isAlternateRight: false
+  }
+});
+function TimelineConnector(props) {
+  const { asChild, forceMount, className, ...connectorProps } = props;
+  const { orientation, variant, activeIndex } = useTimelineContext(CONNECTOR_NAME);
+  const { id, status, isAlternateRight } = useTimelineItemContext(CONNECTOR_NAME);
+  const nextItemStatus = useStore((state) => state.getNextItemStatus(id, activeIndex));
+  const isLastItem = nextItemStatus === void 0;
+  if (!forceMount && isLastItem) return null;
+  const isConnectorCompleted = nextItemStatus === "completed" || nextItemStatus === "active";
+  const ConnectorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ConnectorPrimitive,
+    {
+      "aria-hidden": "true",
+      "data-slot": "timeline-connector",
+      "data-completed": isConnectorCompleted ? "" : void 0,
+      "data-status": status,
+      "data-orientation": orientation,
+      ...connectorProps,
+      className: cn(
+        timelineConnectorVariants({
+          isCompleted: isConnectorCompleted,
+          orientation,
+          variant,
+          isAlternateRight,
+          className
+        })
+      )
+    }
+  );
+}
+function TimelineHeader(props) {
+  const { asChild, className, ...headerProps } = props;
+  const HeaderPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(HeaderPrimitive, { "data-slot": "timeline-header", ...headerProps, className: cn("flex flex-col gap-1", className) });
+}
+function TimelineTitle(props) {
+  const { asChild, className, ...titleProps } = props;
+  const TitlePrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    TitlePrimitive,
+    {
+      "data-slot": "timeline-title",
+      ...titleProps,
+      className: cn("leading-none font-semibold", className)
+    }
+  );
+}
+function TimelineDescription(props) {
+  const { asChild, className, ...descriptionProps } = props;
+  const DescriptionPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DescriptionPrimitive,
+    {
+      "data-slot": "timeline-description",
+      ...descriptionProps,
+      className: cn("text-sm text-muted-foreground", className)
+    }
+  );
+}
+function TimelineTime(props) {
+  const { asChild, className, ...timeProps } = props;
+  const TimePrimitive = asChild ? Slot : "time";
+  return /* @__PURE__ */ jsx(
+    TimePrimitive,
+    {
+      "data-slot": "timeline-time",
+      ...timeProps,
+      className: cn("text-xs text-muted-foreground", className)
+    }
+  );
+}
+export {
+  Timeline,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDescription,
+  TimelineDot,
+  TimelineHeader,
+  TimelineItem,
+  TimelineTime,
+  TimelineTitle
+};
+//# sourceMappingURL=timeline.js.map

package/dist/components/ui/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/timeline.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/timeline) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\n\ntype Direction = \"ltr\" | \"rtl\";\ntype Orientation = \"vertical\" | \"horizontal\";\ntype Variant = \"default\" | \"alternate\";\ntype Status = \"completed\" | \"active\" | \"pending\";\n\ninterface DivProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\ntype ItemElement = React.ComponentRef<typeof TimelineItem>;\n\nconst ROOT_NAME = \"Timeline\";\nconst ITEM_NAME = \"TimelineItem\";\nconst DOT_NAME = \"TimelineDot\";\nconst CONNECTOR_NAME = \"TimelineConnector\";\nconst CONTENT_NAME = \"TimelineContent\";\n\nfunction getItemStatus(itemIndex: number, activeIndex?: number): Status {\n  /*\n   * ⚠ Khác thượng nguồn: mục đăng ký chỉ số của mình trong layout effect, nên ở lượt render phía\n   * server (và lượt đầu trước hydrate) MỌI mục đều mang chỉ số -1. Bản gốc so thẳng `-1 < activeIndex`\n   * → mọi chấm cùng ra \"completed\" (tô gold) cho tới khi hydrate xong — một trạng thái SAI, không\n   * chỉ là thiếu. Chưa biết vị trí thì coi là \"pending\": trung tính, và đúng với phần lớn mục.\n   */\n  if (activeIndex === undefined || itemIndex < 0) return \"pending\";\n  if (itemIndex < activeIndex) return \"completed\";\n  if (itemIndex === activeIndex) return \"active\";\n  return \"pending\";\n}\n\nfunction getSortedEntries(entries: [string, React.RefObject<ItemElement | null>][]) {\n  return entries.sort((a, b) => {\n    const elementA = a[1].current;\n    const elementB = b[1].current;\n    if (!elementA || !elementB) return 0;\n    const position = elementA.compareDocumentPosition(elementB);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n}\n\nfunction useStore<T>(selector: (store: Store) => T): T {\n  const store = React.useContext(StoreContext);\n  if (!store) {\n    throw new Error(`\\`useStore\\` phải được gọi bên trong \\`${ROOT_NAME}\\``);\n  }\n\n  const getSnapshot = React.useCallback(() => selector(store), [store, selector]);\n\n  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface StoreState {\n  items: Map<string, React.RefObject<ItemElement | null>>;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => StoreState;\n  notify: () => void;\n  onItemRegister: (id: string, ref: React.RefObject<ItemElement | null>) => void;\n  onItemUnregister: (id: string) => void;\n  getNextItemStatus: (id: string, activeIndex?: number) => Status | undefined;\n  getItemIndex: (id: string) => number;\n}\n\nconst StoreContext = React.createContext<Store | null>(null);\n\nfunction useStoreContext(consumerName: string) {\n  const context = React.useContext(StoreContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface TimelineContextValue {\n  dir: Direction;\n  orientation: Orientation;\n  variant: Variant;\n  activeIndex?: number;\n}\n\nconst TimelineContext = React.createContext<TimelineContextValue | null>(null);\n\nfunction useTimelineContext(consumerName: string) {\n  const context = React.useContext(TimelineContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\nconst timelineVariants = cva(\"relative flex [--timeline-connector-thickness:0.125rem] [--timeline-dot-size:0.875rem]\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col\",\n      horizontal: \"flex-row items-start\"\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\"\n    }\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      class: \"gap-6\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      class: \"gap-8\"\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      class: \"relative w-full gap-3\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      class: \"items-center gap-4\"\n    }\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\"\n  }\n});\n\ninterface TimelineProps extends DivProps {\n  dir?: Direction;\n  orientation?: Orientation;\n  variant?: Variant;\n  activeIndex?: number;\n}\n\nfunction Timeline(props: TimelineProps) {\n  const {\n    orientation = \"vertical\",\n    variant = \"default\",\n    dir: dirProp,\n    activeIndex,\n    asChild,\n    className,\n    ...rootProps\n  } = props;\n\n  const dir = useDirection(dirProp);\n\n  const listenersRef = useLazyRef(() => new Set<() => void>());\n  const stateRef = useLazyRef<StoreState>(() => ({\n    items: new Map()\n  }));\n\n  const store = React.useMemo<Store>(() => {\n    return {\n      subscribe: (cb) => {\n        listenersRef.current.add(cb);\n        return () => listenersRef.current.delete(cb);\n      },\n      getState: () => stateRef.current,\n      notify: () => {\n        for (const cb of listenersRef.current) {\n          cb();\n        }\n      },\n      onItemRegister: (id: string, ref: React.RefObject<ItemElement | null>) => {\n        stateRef.current.items.set(id, ref);\n        store.notify();\n      },\n      onItemUnregister: (id: string) => {\n        stateRef.current.items.delete(id);\n        store.notify();\n      },\n      getNextItemStatus: (id: string, activeIndex?: number) => {\n        const entries = Array.from(stateRef.current.items.entries());\n        const sortedEntries = getSortedEntries(entries);\n\n        const currentIndex = sortedEntries.findIndex(([key]) => key === id);\n        if (currentIndex === -1 || currentIndex === sortedEntries.length - 1) {\n          return undefined;\n        }\n\n        const nextItemIndex = currentIndex + 1;\n        return getItemStatus(nextItemIndex, activeIndex);\n      },\n      getItemIndex: (id: string) => {\n        const entries = Array.from(stateRef.current.items.entries());\n        const sortedEntries = getSortedEntries(entries);\n        return sortedEntries.findIndex(([key]) => key === id);\n      }\n    };\n  }, [listenersRef, stateRef]);\n\n  const contextValue = React.useMemo<TimelineContextValue>(\n    () => ({\n      dir,\n      orientation,\n      variant,\n      activeIndex\n    }),\n    [dir, orientation, variant, activeIndex]\n  );\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <StoreContext.Provider value={store}>\n      <TimelineContext.Provider value={contextValue}>\n        {/*\n         * ⚠ Khác thượng nguồn: bỏ `aria-orientation` khỏi thẻ gốc. `role=\"list\"` không nhận thuộc\n         * tính đó theo ARIA 1.2 (axe báo `aria-allowed-attr`); hướng vẫn có ở `data-orientation`.\n         */}\n        <RootPrimitive\n          role=\"list\"\n          data-slot=\"timeline\"\n          data-orientation={orientation}\n          data-variant={variant}\n          dir={dir}\n          {...rootProps}\n          className={cn(timelineVariants({ orientation, variant, className }))}\n        />\n      </TimelineContext.Provider>\n    </StoreContext.Provider>\n  );\n}\n\ninterface TimelineItemContextValue {\n  id: string;\n  status: Status;\n  isAlternateRight: boolean;\n}\n\nconst TimelineItemContext = React.createContext<TimelineItemContextValue | null>(null);\n\nfunction useTimelineItemContext(consumerName: string) {\n  const context = React.useContext(TimelineItemContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ITEM_NAME}\\``);\n  }\n  return context;\n}\n\nconst timelineItemVariants = cva(\"relative flex\", {\n  variants: {\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\"\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\"\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\"\n    }\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      class: \"gap-3 pb-8 last:pb-0\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      class: \"flex-col gap-3\"\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: false,\n      class: \"w-1/2 gap-3 pr-6 pb-12 last:pb-0\"\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: true,\n      class: \"ml-auto w-1/2 flex-row-reverse gap-3 pb-12 pl-6 last:pb-0\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      class: \"grid min-w-0 grid-rows-[1fr_auto_1fr] gap-3\"\n    }\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false\n  }\n});\n\nfunction TimelineItem(props: DivProps) {\n  const { asChild, className, id, ref, ...itemProps } = props;\n\n  const { dir, orientation, variant, activeIndex } = useTimelineContext(ITEM_NAME);\n  const store = useStoreContext(ITEM_NAME);\n\n  const instanceId = React.useId();\n  const itemId = id ?? instanceId;\n  const itemRef = React.useRef<ItemElement | null>(null);\n  const composedRef = useComposedRefs(ref, itemRef);\n\n  const itemIndex = useStore((state) => state.getItemIndex(itemId));\n\n  const status = React.useMemo<Status>(() => {\n    return getItemStatus(itemIndex, activeIndex);\n  }, [activeIndex, itemIndex]);\n\n  // ⚠ Khác thượng nguồn: phụ thuộc là `itemId` (thứ thật sự được dùng) thay cho `id` — cùng\n  // nghĩa, vì `itemId = id ?? instanceId` và `instanceId` không đổi suốt vòng đời.\n  useIsomorphicLayoutEffect(() => {\n    store.onItemRegister(itemId, itemRef);\n    return () => {\n      store.onItemUnregister(itemId);\n    };\n  }, [itemId, store]);\n\n  const isAlternateRight = variant === \"alternate\" && itemIndex % 2 === 1;\n\n  const itemContextValue = React.useMemo<TimelineItemContextValue>(\n    () => ({ id: itemId, status, isAlternateRight }),\n    [itemId, status, isAlternateRight]\n  );\n\n  const ItemPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <TimelineItemContext.Provider value={itemContextValue}>\n      <ItemPrimitive\n        role=\"listitem\"\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        data-slot=\"timeline-item\"\n        data-status={status}\n        data-orientation={orientation}\n        data-alternate-right={isAlternateRight ? \"\" : undefined}\n        id={itemId}\n        dir={dir}\n        {...itemProps}\n        ref={composedRef}\n        className={cn(\n          timelineItemVariants({\n            orientation,\n            variant,\n            isAlternateRight,\n            className\n          })\n        )}\n      />\n    </TimelineItemContext.Provider>\n  );\n}\n\nconst timelineContentVariants = cva(\"flex-1\", {\n  variants: {\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\"\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\"\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\"\n    }\n  },\n  compoundVariants: [\n    {\n      variant: \"alternate\",\n      orientation: \"vertical\",\n      isAlternateRight: false,\n      class: \"text-right\"\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"horizontal\",\n      isAlternateRight: false,\n      class: \"row-start-3 pt-2\"\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"horizontal\",\n      isAlternateRight: true,\n      class: \"row-start-1 pb-2\"\n    }\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false\n  }\n});\n\nfunction TimelineContent(props: DivProps) {\n  const { asChild, className, ...contentProps } = props;\n\n  const { variant, orientation } = useTimelineContext(CONTENT_NAME);\n  const { status, isAlternateRight } = useTimelineItemContext(CONTENT_NAME);\n\n  const ContentPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ContentPrimitive\n      data-slot=\"timeline-content\"\n      data-status={status}\n      {...contentProps}\n      className={cn(\n        timelineContentVariants({\n          orientation,\n          variant,\n          isAlternateRight,\n          className\n        })\n      )}\n    />\n  );\n}\n\n/*\n * ⚠ Khác thượng nguồn — màu chấm đi qua token VAI TRÒ (docs/hop-dong-mau.md §1):\n * chấm là thành phần PHI VĂN BẢN mang nghĩa (đánh dấu từng mốc và trạng thái của nó) → viền chịu\n * 3:1 với nền trang.\n * - đã xong / đang diễn ra: `border-primary-ink` thay `border-primary` (token TÔ NỀN, ~1,86:1 với\n *   nền trang; bậc ink đạt 6,51:1 light · 12,67:1 dark ở bảng tương phản cao).\n * - chờ: `border-muted-foreground` thay `border-border` (bậc TRANG TRÍ 1,16:1, và cổng bắt viền trang\n *   trí khi phần tử có bo góc + cỡ cố định). Cùng lựa chọn với tone `neutral` của `StatusPill`\n *   (`STATUS_TONES.neutral.borderColor`): 5,23:1 light · 5,70:1 dark.\n */\nconst timelineDotVariants = cva(\n  \"relative z-10 flex size-[var(--timeline-dot-size)] shrink-0 items-center justify-center rounded-full border-2 bg-background\",\n  {\n    variants: {\n      status: {\n        completed: \"border-primary-ink\",\n        active: \"border-primary-ink\",\n        pending: \"border-muted-foreground\"\n      },\n      orientation: {\n        vertical: \"\",\n        horizontal: \"\"\n      },\n      variant: {\n        default: \"\",\n        alternate: \"\"\n      },\n      isAlternateRight: {\n        true: \"\",\n        false: \"\"\n      }\n    },\n    compoundVariants: [\n      {\n        variant: \"alternate\",\n        orientation: \"vertical\",\n        isAlternateRight: false,\n        class: \"absolute -right-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background\"\n      },\n      {\n        variant: \"alternate\",\n        orientation: \"vertical\",\n        isAlternateRight: true,\n        class: \"absolute -left-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] bg-background\"\n      },\n      {\n        variant: \"alternate\",\n        orientation: \"horizontal\",\n        class: \"row-start-2 bg-background\"\n      },\n      {\n        variant: \"alternate\",\n        status: \"completed\",\n        class: \"bg-background\"\n      },\n      {\n        variant: \"alternate\",\n        status: \"active\",\n        class: \"bg-background\"\n      }\n    ],\n    defaultVariants: {\n      status: \"pending\",\n      orientation: \"vertical\",\n      variant: \"default\",\n      isAlternateRight: false\n    }\n  }\n);\n\nfunction TimelineDot(props: DivProps) {\n  const { asChild, className, ...dotProps } = props;\n\n  const { orientation, variant } = useTimelineContext(DOT_NAME);\n  const { status, isAlternateRight } = useTimelineItemContext(DOT_NAME);\n\n  const DotPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <DotPrimitive\n      data-slot=\"timeline-dot\"\n      data-status={status}\n      data-orientation={orientation}\n      {...dotProps}\n      className={cn(\n        timelineDotVariants({\n          status,\n          orientation,\n          variant,\n          isAlternateRight,\n          className\n        })\n      )}\n    />\n  );\n}\n\n/*\n * ⚠ Khác thượng nguồn: đoạn nối ĐÃ XONG mang nghĩa tiến độ → `bg-primary-ink` thay `bg-primary`\n * (token tô nền, ~1,86:1 với nền trang). Đoạn chưa tới giữ `bg-border` — đường kẻ trang trí.\n */\nconst timelineConnectorVariants = cva(\"absolute z-0\", {\n  variants: {\n    isCompleted: {\n      true: \"bg-primary-ink\",\n      false: \"bg-border\"\n    },\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\"\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\"\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\"\n    }\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      class:\n        \"start-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] top-3 h-[calc(100%+0.5rem)] w-[var(--timeline-connector-thickness)]\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      class:\n        \"start-3 top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] h-[var(--timeline-connector-thickness)] w-[calc(100%+0.5rem)]\"\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: false,\n      class: \"top-2 -right-[calc(var(--timeline-connector-thickness)/2)] h-full w-[var(--timeline-connector-thickness)]\"\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: true,\n      class: \"top-2 -left-[calc(var(--timeline-connector-thickness)/2)] h-full w-[var(--timeline-connector-thickness)]\"\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      class:\n        \"top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)] left-3 row-start-2 h-[var(--timeline-connector-thickness)] w-[calc(100%+0.5rem)]\"\n    }\n  ],\n  defaultVariants: {\n    isCompleted: false,\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false\n  }\n});\n\ninterface TimelineConnectorProps extends DivProps {\n  forceMount?: boolean;\n}\n\nfunction TimelineConnector(props: TimelineConnectorProps) {\n  const { asChild, forceMount, className, ...connectorProps } = props;\n\n  const { orientation, variant, activeIndex } = useTimelineContext(CONNECTOR_NAME);\n  const { id, status, isAlternateRight } = useTimelineItemContext(CONNECTOR_NAME);\n\n  const nextItemStatus = useStore((state) => state.getNextItemStatus(id, activeIndex));\n\n  const isLastItem = nextItemStatus === undefined;\n\n  if (!forceMount && isLastItem) return null;\n\n  const isConnectorCompleted = nextItemStatus === \"completed\" || nextItemStatus === \"active\";\n\n  const ConnectorPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ConnectorPrimitive\n      aria-hidden=\"true\"\n      data-slot=\"timeline-connector\"\n      data-completed={isConnectorCompleted ? \"\" : undefined}\n      data-status={status}\n      data-orientation={orientation}\n      {...connectorProps}\n      className={cn(\n        timelineConnectorVariants({\n          isCompleted: isConnectorCompleted,\n          orientation,\n          variant,\n          isAlternateRight,\n          className\n        })\n      )}\n    />\n  );\n}\n\nfunction TimelineHeader(props: DivProps) {\n  const { asChild, className, ...headerProps } = props;\n\n  const HeaderPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <HeaderPrimitive data-slot=\"timeline-header\" {...headerProps} className={cn(\"flex flex-col gap-1\", className)} />\n  );\n}\n\nfunction TimelineTitle(props: DivProps) {\n  const { asChild, className, ...titleProps } = props;\n\n  const TitlePrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <TitlePrimitive\n      data-slot=\"timeline-title\"\n      {...titleProps}\n      className={cn(\"leading-none font-semibold\", className)}\n    />\n  );\n}\n\nfunction TimelineDescription(props: DivProps) {\n  const { asChild, className, ...descriptionProps } = props;\n\n  const DescriptionPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <DescriptionPrimitive\n      data-slot=\"timeline-description\"\n      {...descriptionProps}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n    />\n  );\n}\n\ninterface TimelineTimeProps extends React.ComponentProps<\"time\"> {\n  asChild?: boolean;\n}\n\n/** Mốc thời gian — gói KHÔNG tự định dạng ngày: app truyền chuỗi đã định dạng + `dateTime` máy đọc. */\nfunction TimelineTime(props: TimelineTimeProps) {\n  const { asChild, className, ...timeProps } = props;\n\n  const TimePrimitive = asChild ? Slot : \"time\";\n\n  return (\n    <TimePrimitive\n      data-slot=\"timeline-time\"\n      {...timeProps}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n    />\n  );\n}\n\nexport {\n  Timeline,\n  TimelineConnector,\n  type TimelineConnectorProps,\n  TimelineContent,\n  TimelineDescription,\n  TimelineDot,\n  TimelineHeader,\n  TimelineItem,\n  type TimelineProps,\n  TimelineTime,\n  type TimelineTimeProps,\n  TimelineTitle\n};\n"],"mappings":"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","names":["activeIndex"]}

package/dist/components/ui/tour-constants.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Nhãn mặc định của `Tour`.
+ *
+ * Module **CỐ Ý không có `"use client"`**: mọi export của một file `"use client"` tới Server
+ * Component là client-reference proxy, đọc ra `undefined` mà KHÔNG throw — xem
+ * `src/chart/chart-colors.ts`. Barrel xuất module này TRỰC TIẾP; `tour.tsx` chỉ `import`.
+ */
+/**
+ * Chuỗi hiển thị và chuỗi a11y của `Tour` — truyền `labels` cho `Tour` để ghi đè từng khoá.
+ *
+ * ⚠ Thượng nguồn (Dice UI) chôn cứng chuỗi tiếng Anh trong từng nút ("Previous", "Next",
+ * "Finish", "Skip", "Close tour") và bộ đếm `1 / 5`. Gói dùng chung cho MỌI app Comitor nên
+ * chuỗi cứng là ngõ cụt cho app đa ngôn ngữ.
+ *
+ * Từng chỗ vẫn ghi đè riêng được: `children` của `TourPrev`/`TourNext`/`TourSkip`/`TourClose`,
+ * `aria-label` của `TourClose`, `format` của `TourStepCounter`. `labels` là để đổi NGÔN NGỮ một
+ * lần cho cả tour.
+ */
+interface TourLabels {
+    /** `aria-label` của `TourClose` — nút chỉ có icon X, nên đây là tên DUY NHẤT của nó. */
+    close: string;
+    /** Chữ mặc định của `TourPrev` khi không có `children`. */
+    prev: string;
+    /** Chữ mặc định của `TourNext` ở mọi bước trừ bước cuối. */
+    next: string;
+    /** Chữ mặc định của `TourNext` ở bước CUỐI — bấm là kết thúc tour. */
+    finish: string;
+    /** Chữ mặc định của `TourSkip` khi không có `children`. */
+    skip: string;
+    /**
+     * Nội dung mặc định của `TourStepCounter`. `current` đếm từ 1.
+     * Là HÀM vì có số chèn vào giữa câu.
+     */
+    stepCounter: (current: number, total: number) => string;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều ghi đè được qua prop `labels` của `Tour`. */
+declare const DEFAULT_TOUR_LABELS: TourLabels;
+
+export { DEFAULT_TOUR_LABELS, type TourLabels };

package/dist/components/ui/tour-constants.js

@@ -0,0 +1,12 @@
+const DEFAULT_TOUR_LABELS = {
+  close: "\u0110\xF3ng h\u01B0\u1EDBng d\u1EABn",
+  prev: "Quay l\u1EA1i",
+  next: "Ti\u1EBFp theo",
+  finish: "Ho\xE0n t\u1EA5t",
+  skip: "B\u1ECF qua",
+  stepCounter: (current, total) => `B\u01B0\u1EDBc ${current}/${total}`
+};
+export {
+  DEFAULT_TOUR_LABELS
+};
+//# sourceMappingURL=tour-constants.js.map