@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/scroll-spy.js

@@ -0,0 +1,336 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+const ROOT_NAME = "ScrollSpy";
+const NAV_NAME = "ScrollSpyNav";
+const LINK_NAME = "ScrollSpyLink";
+const VIEWPORT_NAME = "ScrollSpyViewport";
+const SECTION_NAME = "ScrollSpySection";
+function getDefaultScrollBehavior() {
+  if (typeof window === "undefined") return "smooth";
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+}
+const StoreContext = React.createContext(null);
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useStore\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const ScrollSpyContext = React.createContext(null);
+function useScrollSpyContext(consumerName) {
+  const context = React.useContext(ScrollSpyContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function ScrollSpy(props) {
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    rootMargin,
+    threshold = 0.1,
+    offset = 0,
+    /*
+     * ⚠ Khác thượng nguồn: bản gốc tính mặc định NGAY TRONG render (`scrollBehavior =
+     * getDefaultScrollBehavior()` → `window.matchMedia` mỗi lượt render). Ở đây để `undefined` và
+     * chỉ phân giải lúc cuộn thật — không chạm `window` khi render, và đọc đúng thiết lập giảm
+     * chuyển động TẠI THỜI ĐIỂM bấm chứ không phải lúc render gần nhất.
+     */
+    scrollBehavior,
+    scrollContainer = null,
+    dir: dirProp,
+    orientation = "horizontal",
+    asChild,
+    className,
+    ...rootProps
+  } = props;
+  const dir = useDirection(dirProp);
+  const stateRef = useLazyRef(() => ({
+    value: value ?? defaultValue ?? ""
+  }));
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const onValueChangeRef = useAsRef(onValueChange);
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => {
+        return stateRef.current;
+      },
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        stateRef.current[key] = value2;
+        if (key === "value" && value2) {
+          onValueChangeRef.current?.(value2);
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, onValueChangeRef]);
+  const sectionMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const isScrollingRef = React.useRef(false);
+  const rafIdRef = React.useRef(null);
+  const isMountedRef = React.useRef(false);
+  const scrollTimeoutRef = React.useRef(null);
+  const onSectionRegister = React.useCallback((id, element) => {
+    sectionMapRef.current.set(id, element);
+  }, []);
+  const onSectionUnregister = React.useCallback((id) => {
+    sectionMapRef.current.delete(id);
+  }, []);
+  const onScrollToSection = React.useCallback(
+    (sectionId) => {
+      const section = scrollContainer ? scrollContainer.querySelector(`#${CSS.escape(sectionId)}`) : document.getElementById(sectionId);
+      if (!section) {
+        store.setState("value", sectionId);
+        return;
+      }
+      isScrollingRef.current = true;
+      store.setState("value", sectionId);
+      const behavior = scrollBehavior ?? getDefaultScrollBehavior();
+      if (scrollContainer) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const sectionRect = section.getBoundingClientRect();
+        const scrollTop = scrollContainer.scrollTop;
+        const offsetPosition = sectionRect.top - containerRect.top + scrollTop - offset;
+        scrollContainer.scrollTo({
+          top: offsetPosition,
+          behavior
+        });
+      } else {
+        const sectionPosition = section.getBoundingClientRect().top;
+        const offsetPosition = sectionPosition + window.scrollY - offset;
+        window.scrollTo({
+          top: offsetPosition,
+          behavior
+        });
+      }
+      if (scrollTimeoutRef.current !== null) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 500);
+    },
+    [scrollContainer, offset, scrollBehavior, store]
+  );
+  const prevValuePropRef = React.useRef(void 0);
+  const onScrollToSectionRef = useAsRef(onScrollToSection);
+  useIsomorphicLayoutEffect(() => {
+    const previous = prevValuePropRef.current;
+    prevValuePropRef.current = value;
+    if (value === void 0 || value === previous) return;
+    if (previous === void 0 || !isMountedRef.current) {
+      isMountedRef.current = true;
+      store.setState("value", value);
+      return;
+    }
+    if (value === store.getState().value) return;
+    onScrollToSectionRef.current(value);
+  }, [value, store, onScrollToSectionRef]);
+  useIsomorphicLayoutEffect(() => {
+    const sectionMap = sectionMapRef.current;
+    if (sectionMap.size === 0) return;
+    const observerRootMargin = rootMargin ?? `${-offset}px 0px -70% 0px`;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (isScrollingRef.current) return;
+        if (rafIdRef.current !== null) {
+          cancelAnimationFrame(rafIdRef.current);
+        }
+        rafIdRef.current = requestAnimationFrame(() => {
+          const intersecting = entries.filter((entry) => entry.isIntersecting);
+          if (intersecting.length === 0) return;
+          const topmost = intersecting.reduce((prev, curr) => {
+            return curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev;
+          });
+          const id = topmost.target.id;
+          if (id && sectionMap.has(id)) {
+            store.setState("value", id);
+          }
+        });
+      },
+      {
+        root: scrollContainer,
+        rootMargin: observerRootMargin,
+        threshold
+      }
+    );
+    for (const element of sectionMap.values()) {
+      observer.observe(element);
+    }
+    return () => {
+      observer.disconnect();
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (scrollTimeoutRef.current !== null) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [offset, rootMargin, threshold, scrollContainer]);
+  const contextValue = React.useMemo(
+    () => ({
+      dir,
+      orientation,
+      offset,
+      scrollBehavior,
+      scrollContainer,
+      isScrollingRef,
+      onSectionRegister,
+      onSectionUnregister,
+      onScrollToSection
+    }),
+    [
+      dir,
+      orientation,
+      offset,
+      scrollBehavior,
+      scrollContainer,
+      onSectionRegister,
+      onSectionUnregister,
+      onScrollToSection
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(ScrollSpyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      "data-orientation": orientation,
+      "data-slot": "scroll-spy",
+      dir,
+      ...rootProps,
+      className: cn("flex", orientation === "horizontal" ? "flex-row" : "flex-col", className)
+    }
+  ) }) });
+}
+function ScrollSpyNav(props) {
+  const { asChild, className, ...navProps } = props;
+  const { dir, orientation } = useScrollSpyContext(NAV_NAME);
+  const t = useComitorMessages("scrollSpy");
+  const NavPrimitive = asChild ? Slot : "nav";
+  return /* @__PURE__ */ jsx(
+    NavPrimitive,
+    {
+      "aria-label": t.navLabel,
+      "data-orientation": orientation,
+      "data-slot": "scroll-spy-nav",
+      dir,
+      ...navProps,
+      className: cn("flex gap-2", orientation === "horizontal" ? "flex-col" : "flex-row", className)
+    }
+  );
+}
+function ScrollSpyLink(props) {
+  const { value: linkValue, asChild, onClick, className, ...linkProps } = props;
+  const { orientation, onScrollToSection } = useScrollSpyContext(LINK_NAME);
+  const value = useStore((state) => state.value);
+  const isActive = value === linkValue;
+  const onLinkClick = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      onClick?.(event);
+      onScrollToSection(linkValue);
+    },
+    [linkValue, onClick, onScrollToSection]
+  );
+  const LinkPrimitive = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    LinkPrimitive,
+    {
+      "aria-current": isActive ? "location" : void 0,
+      "data-orientation": orientation,
+      "data-slot": "scroll-spy-link",
+      "data-state": isActive ? "active" : "inactive",
+      ...linkProps,
+      href: asChild ? void 0 : `#${linkValue}`,
+      className: cn(
+        "px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-accent data-[state=active]:text-foreground",
+        /*
+         * ⚠ Khác thượng nguồn: thêm VẠCH ACTIVE. Bản gốc báo mục đang xem chỉ bằng `bg-accent` —
+         * #FBF5DC trên nền trắng là 1,09:1 (dark: 1,17:1), không đủ làm chỉ báo (WCAG 1.4.11 đòi
+         * 3:1 cho thành phần phi văn bản mang nghĩa) — cộng đổi màu chữ, mà màu không được là tín
+         * hiệu DUY NHẤT (1.4.1). Vạch 2px `border-primary-ink` là đúng khuôn `Tabs` biến thể
+         * `default` (tabs-variants.ts): bậc `-ink` vì nó đi lên nền TRANG, và bảng tương phản cao
+         * chỉ đổi được nó qua token này. Đặt ở cạnh ĐẦU (dọc) hoặc cạnh DƯỚI (ngang) theo hướng
+         * xếp link; `border-s`/`rounded-e` là thuộc tính logic nên đúng cả RTL.
+         */
+        "border-transparent data-[state=active]:border-primary-ink",
+        orientation === "horizontal" ? "rounded-e-md border-s-2" : "rounded-t-md border-b-2",
+        // Vòng focus cùng khuôn `Tabs` của gói (TABS_TRIGGER_BASE).
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      ),
+      onClick: onLinkClick
+    }
+  );
+}
+function ScrollSpyViewport(props) {
+  const { asChild, className, ...viewportProps } = props;
+  const { dir, orientation } = useScrollSpyContext(VIEWPORT_NAME);
+  const ViewportPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ViewportPrimitive,
+    {
+      "data-orientation": orientation,
+      "data-slot": "scroll-spy-viewport",
+      dir,
+      ...viewportProps,
+      className: cn("flex flex-1 flex-col gap-8", className)
+    }
+  );
+}
+function ScrollSpySection(props) {
+  const { asChild, ref, value, ...sectionProps } = props;
+  const { orientation, onSectionRegister, onSectionUnregister } = useScrollSpyContext(SECTION_NAME);
+  const sectionRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, sectionRef);
+  useIsomorphicLayoutEffect(() => {
+    const element = sectionRef.current;
+    if (!element || !value) return;
+    onSectionRegister(value, element);
+    return () => {
+      onSectionUnregister(value);
+    };
+  }, [value, onSectionRegister, onSectionUnregister]);
+  const SectionPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SectionPrimitive,
+    {
+      "data-orientation": orientation,
+      "data-slot": "scroll-spy-section",
+      ...sectionProps,
+      id: value,
+      ref: composedRef
+    }
+  );
+}
+export {
+  ScrollSpy,
+  ScrollSpyLink,
+  ScrollSpyNav,
+  ScrollSpySection,
+  ScrollSpyViewport
+};
+//# sourceMappingURL=scroll-spy.js.map

package/dist/components/ui/scroll-spy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/scroll-spy.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/scroll-spy) — 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 * Dùng ở Comitor: trang cài đặt dài và trang chi tiết bản ghi (các mục của một liên hệ CRM) có\n * mục lục điều hướng trong trang.\n *\n * ⚠ `orientation` giữ NGHĨA của thượng nguồn — nó nói về hướng xếp của KHUNG, không phải của danh\n * sách link: `horizontal` (mặc định) = mục lục đứng bên cạnh nội dung, link xếp DỌC; `vertical` =\n * mục lục nằm trên nội dung, link xếp NGANG.\n */\n\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport { useAsRef } from \"../../lib/use-as-ref.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\n\nconst ROOT_NAME = \"ScrollSpy\";\nconst NAV_NAME = \"ScrollSpyNav\";\nconst LINK_NAME = \"ScrollSpyLink\";\nconst VIEWPORT_NAME = \"ScrollSpyViewport\";\nconst SECTION_NAME = \"ScrollSpySection\";\n\ntype Direction = \"ltr\" | \"rtl\";\ntype Orientation = \"horizontal\" | \"vertical\";\n\ntype LinkElement = React.ComponentRef<typeof ScrollSpyLink>;\ntype SectionElement = React.ComponentRef<typeof ScrollSpySection>;\n\nfunction getDefaultScrollBehavior(): ScrollBehavior {\n  if (typeof window === \"undefined\") return \"smooth\";\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\";\n}\n\ninterface StoreState {\n  value: string;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => StoreState;\n  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;\n  notify: () => void;\n}\n\nconst StoreContext = React.createContext<Store | null>(null);\n\nfunction useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T {\n  const contextStore = React.useContext(StoreContext);\n\n  const store = ogStore ?? contextStore;\n\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.getState()), [store, selector]);\n\n  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface ScrollSpyContextValue {\n  offset: number;\n  scrollBehavior: ScrollBehavior | undefined;\n  dir: Direction;\n  orientation: Orientation;\n  scrollContainer: HTMLElement | null;\n  isScrollingRef: React.RefObject<boolean>;\n  onSectionRegister: (id: string, element: SectionElement) => void;\n  onSectionUnregister: (id: string) => void;\n  onScrollToSection: (sectionId: string) => void;\n}\n\nconst ScrollSpyContext = React.createContext<ScrollSpyContextValue | null>(null);\n\nfunction useScrollSpyContext(consumerName: string) {\n  const context = React.useContext(ScrollSpyContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface ScrollSpyProps extends React.ComponentProps<\"div\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  rootMargin?: string;\n  threshold?: number | number[];\n  offset?: number;\n  /**\n   * Kiểu cuộn khi bấm link. Không truyền thì `\"smooth\"`, hoặc `\"auto\"` nếu người dùng bật giảm\n   * chuyển động (`prefers-reduced-motion`).\n   */\n  scrollBehavior?: ScrollBehavior;\n  scrollContainer?: HTMLElement | null;\n  dir?: Direction;\n  orientation?: Orientation;\n  asChild?: boolean;\n}\n\nfunction ScrollSpy(props: ScrollSpyProps) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    rootMargin,\n    threshold = 0.1,\n    offset = 0,\n    /*\n     * ⚠ Khác thượng nguồn: bản gốc tính mặc định NGAY TRONG render (`scrollBehavior =\n     * getDefaultScrollBehavior()` → `window.matchMedia` mỗi lượt render). Ở đây để `undefined` và\n     * chỉ phân giải lúc cuộn thật — không chạm `window` khi render, và đọc đúng thiết lập giảm\n     * chuyển động TẠI THỜI ĐIỂM bấm chứ không phải lúc render gần nhất.\n     */\n    scrollBehavior,\n    scrollContainer = null,\n    dir: dirProp,\n    orientation = \"horizontal\",\n    asChild,\n    className,\n    ...rootProps\n  } = props;\n\n  const dir = useDirection(dirProp);\n\n  const stateRef = useLazyRef<StoreState>(() => ({\n    value: value ?? defaultValue ?? \"\"\n  }));\n  const listenersRef = useLazyRef(() => new Set<() => void>());\n  const onValueChangeRef = useAsRef(onValueChange);\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: () => {\n        return stateRef.current;\n      },\n      setState: (key, value) => {\n        if (Object.is(stateRef.current[key], value)) return;\n\n        stateRef.current[key] = value;\n\n        if (key === \"value\" && value) {\n          onValueChangeRef.current?.(value);\n        }\n\n        store.notify();\n      },\n      notify: () => {\n        for (const cb of listenersRef.current) {\n          cb();\n        }\n      }\n    };\n  }, [listenersRef, stateRef, onValueChangeRef]);\n\n  const sectionMapRef = React.useRef(new Map<string, Element>());\n  const isScrollingRef = React.useRef(false);\n  const rafIdRef = React.useRef<number | null>(null);\n  const isMountedRef = React.useRef(false);\n  const scrollTimeoutRef = React.useRef<number | null>(null);\n\n  const onSectionRegister = React.useCallback((id: string, element: SectionElement) => {\n    sectionMapRef.current.set(id, element);\n  }, []);\n\n  const onSectionUnregister = React.useCallback((id: string) => {\n    sectionMapRef.current.delete(id);\n  }, []);\n\n  const onScrollToSection = React.useCallback(\n    (sectionId: string) => {\n      /*\n       * ⚠ Khác thượng nguồn: `CSS.escape` quanh id. Bản gốc ghép thẳng `#${sectionId}` vào\n       * `querySelector`, nên id bắt đầu bằng chữ số (\"2024-hop-dong\") hay chứa ký tự đặc biệt\n       * (id của `useId()` như \":r1:\") làm nó THROW `SyntaxError` ngay khi bấm link.\n       */\n      const section = scrollContainer\n        ? scrollContainer.querySelector(`#${CSS.escape(sectionId)}`)\n        : document.getElementById(sectionId);\n\n      if (!section) {\n        store.setState(\"value\", sectionId);\n        return;\n      }\n\n      // Bật cờ để observer không ghi đè giá trị trong lúc đang cuộn theo lệnh.\n      isScrollingRef.current = true;\n      store.setState(\"value\", sectionId);\n\n      const behavior = scrollBehavior ?? getDefaultScrollBehavior();\n\n      if (scrollContainer) {\n        const containerRect = scrollContainer.getBoundingClientRect();\n        const sectionRect = section.getBoundingClientRect();\n        const scrollTop = scrollContainer.scrollTop;\n        const offsetPosition = sectionRect.top - containerRect.top + scrollTop - offset;\n\n        scrollContainer.scrollTo({\n          top: offsetPosition,\n          behavior\n        });\n      } else {\n        const sectionPosition = section.getBoundingClientRect().top;\n        const offsetPosition = sectionPosition + window.scrollY - offset;\n\n        window.scrollTo({\n          top: offsetPosition,\n          behavior\n        });\n      }\n\n      if (scrollTimeoutRef.current !== null) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n\n      scrollTimeoutRef.current = window.setTimeout(() => {\n        isScrollingRef.current = false;\n      }, 500);\n    },\n    [scrollContainer, offset, scrollBehavior, store]\n  );\n\n  /*\n   * ⚠ Khác thượng nguồn: chỉ cuộn theo lệnh khi `value` đổi TỪ BÊN NGOÀI. Bản gốc cuộn mỗi khi\n   * effect chạy lại sau lần đầu, với hai hệ quả đã đo trên trình duyệt:\n   *   · StrictMode chạy effect hai lần lúc mount → lần hai cuộn luôn CẢ TRANG tới mục (scrollY\n   *     0 → ~5050) vì `scrollContainer` của app lúc đó còn `null`. Next dev bật StrictMode sẵn.\n   *   · Chế độ controlled tự kéo giật: observer đặt giá trị → `onValueChange` → app trả về prop\n   *     `value` → effect cuộn tới ĐẦU mục đó, ngay giữa lúc người dùng đang cuộn.\n   * Luật mới: lúc mount không cuộn (đúng ý nhánh mount của bản gốc); về sau, `value` trùng với giá\n   * trị store đang giữ nghĩa là nó chỉ là tiếng vọng của chính observer/link → không cuộn.\n   * `defaultValue` đã vào store từ lúc khởi tạo (`stateRef`), không cần đồng bộ thêm.\n   */\n  const prevValuePropRef = React.useRef<string | undefined>(undefined);\n  const onScrollToSectionRef = useAsRef(onScrollToSection);\n\n  useIsomorphicLayoutEffect(() => {\n    const previous = prevValuePropRef.current;\n    prevValuePropRef.current = value;\n    if (value === undefined || value === previous) return;\n\n    if (previous === undefined || !isMountedRef.current) {\n      isMountedRef.current = true;\n      store.setState(\"value\", value);\n      return;\n    }\n\n    if (value === store.getState().value) return;\n    onScrollToSectionRef.current(value);\n  }, [value, store, onScrollToSectionRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    const sectionMap = sectionMapRef.current;\n    if (sectionMap.size === 0) return;\n\n    const observerRootMargin = rootMargin ?? `${-offset}px 0px -70% 0px`;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (isScrollingRef.current) return;\n\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n        }\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          const intersecting = entries.filter((entry) => entry.isIntersecting);\n\n          if (intersecting.length === 0) return;\n\n          const topmost = intersecting.reduce((prev, curr) => {\n            return curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev;\n          });\n\n          const id = topmost.target.id;\n          if (id && sectionMap.has(id)) {\n            store.setState(\"value\", id);\n          }\n        });\n      },\n      {\n        root: scrollContainer,\n        rootMargin: observerRootMargin,\n        threshold\n      }\n    );\n\n    for (const element of sectionMap.values()) {\n      observer.observe(element);\n    }\n\n    return () => {\n      observer.disconnect();\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n      if (scrollTimeoutRef.current !== null) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n    };\n  }, [offset, rootMargin, threshold, scrollContainer]);\n\n  const contextValue = React.useMemo<ScrollSpyContextValue>(\n    () => ({\n      dir,\n      orientation,\n      offset,\n      scrollBehavior,\n      scrollContainer,\n      isScrollingRef,\n      onSectionRegister,\n      onSectionUnregister,\n      onScrollToSection\n    }),\n    [\n      dir,\n      orientation,\n      offset,\n      scrollBehavior,\n      scrollContainer,\n      onSectionRegister,\n      onSectionUnregister,\n      onScrollToSection\n    ]\n  );\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <StoreContext.Provider value={store}>\n      <ScrollSpyContext.Provider value={contextValue}>\n        <RootPrimitive\n          data-orientation={orientation}\n          data-slot=\"scroll-spy\"\n          dir={dir}\n          {...rootProps}\n          className={cn(\"flex\", orientation === \"horizontal\" ? \"flex-row\" : \"flex-col\", className)}\n        />\n      </ScrollSpyContext.Provider>\n    </StoreContext.Provider>\n  );\n}\n\ninterface ScrollSpyNavProps extends React.ComponentProps<\"nav\"> {\n  asChild?: boolean;\n}\n\nfunction ScrollSpyNav(props: ScrollSpyNavProps) {\n  const { asChild, className, ...navProps } = props;\n\n  const { dir, orientation } = useScrollSpyContext(NAV_NAME);\n  const t = useComitorMessages(\"scrollSpy\");\n\n  const NavPrimitive = asChild ? Slot : \"nav\";\n\n  return (\n    <NavPrimitive\n      /*\n       * ⚠ Khác thượng nguồn: `<nav>` có tên mặc định (khoá `navLabel` của namespace `scrollSpy`,\n       * theo `ComitorLocaleProvider`). Trong khung app Comitor đã có ít nhất MỘT landmark\n       * `navigation` (sidebar), nên một `<nav>` thứ hai không tên là hai landmark trùng loại không\n       * phân biệt được trong danh sách landmark của trình đọc màn hình. Ghi đè bằng chính prop\n       * `aria-label` (cùng khuôn `Breadcrumb`/`Pagination` của gói).\n       */\n      aria-label={t.navLabel}\n      data-orientation={orientation}\n      data-slot=\"scroll-spy-nav\"\n      dir={dir}\n      {...navProps}\n      className={cn(\"flex gap-2\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\n    />\n  );\n}\n\ninterface ScrollSpyLinkProps extends React.ComponentProps<\"a\"> {\n  value: string;\n  asChild?: boolean;\n}\n\nfunction ScrollSpyLink(props: ScrollSpyLinkProps) {\n  const { value: linkValue, asChild, onClick, className, ...linkProps } = props;\n\n  const { orientation, onScrollToSection } = useScrollSpyContext(LINK_NAME);\n  const value = useStore((state) => state.value);\n  const isActive = value === linkValue;\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<LinkElement>) => {\n      event.preventDefault();\n      onClick?.(event);\n      onScrollToSection(linkValue);\n    },\n    [linkValue, onClick, onScrollToSection]\n  );\n\n  const LinkPrimitive = asChild ? Slot : \"a\";\n\n  return (\n    <LinkPrimitive\n      /*\n       * ⚠ Khác thượng nguồn: bản gốc chỉ đặt `data-state=\"active\"` — thuộc tính mà trình đọc màn\n       * hình KHÔNG đọc, nên mục đang xem chỉ được báo bằng hình. `aria-current=\"location\"` là giá\n       * trị ARIA dành cho \"vị trí hiện tại\" trong một ngữ cảnh — ở đây là mục đang xem của trang.\n       * Không dùng `\"page\"`: link trỏ tới một mục TRONG trang, không phải tới một trang khác.\n       */\n      aria-current={isActive ? \"location\" : undefined}\n      data-orientation={orientation}\n      data-slot=\"scroll-spy-link\"\n      data-state={isActive ? \"active\" : \"inactive\"}\n      {...linkProps}\n      href={asChild ? undefined : `#${linkValue}`}\n      className={cn(\n        \"px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-accent data-[state=active]:text-foreground\",\n        /*\n         * ⚠ Khác thượng nguồn: thêm VẠCH ACTIVE. Bản gốc báo mục đang xem chỉ bằng `bg-accent` —\n         * #FBF5DC trên nền trắng là 1,09:1 (dark: 1,17:1), không đủ làm chỉ báo (WCAG 1.4.11 đòi\n         * 3:1 cho thành phần phi văn bản mang nghĩa) — cộng đổi màu chữ, mà màu không được là tín\n         * hiệu DUY NHẤT (1.4.1). Vạch 2px `border-primary-ink` là đúng khuôn `Tabs` biến thể\n         * `default` (tabs-variants.ts): bậc `-ink` vì nó đi lên nền TRANG, và bảng tương phản cao\n         * chỉ đổi được nó qua token này. Đặt ở cạnh ĐẦU (dọc) hoặc cạnh DƯỚI (ngang) theo hướng\n         * xếp link; `border-s`/`rounded-e` là thuộc tính logic nên đúng cả RTL.\n         */\n        \"border-transparent data-[state=active]:border-primary-ink\",\n        orientation === \"horizontal\" ? \"rounded-e-md border-s-2\" : \"rounded-t-md border-b-2\",\n        // Vòng focus cùng khuôn `Tabs` của gói (TABS_TRIGGER_BASE).\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className\n      )}\n      onClick={onLinkClick}\n    />\n  );\n}\n\ninterface ScrollSpyViewportProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction ScrollSpyViewport(props: ScrollSpyViewportProps) {\n  const { asChild, className, ...viewportProps } = props;\n\n  const { dir, orientation } = useScrollSpyContext(VIEWPORT_NAME);\n\n  const ViewportPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ViewportPrimitive\n      data-orientation={orientation}\n      data-slot=\"scroll-spy-viewport\"\n      dir={dir}\n      {...viewportProps}\n      className={cn(\"flex flex-1 flex-col gap-8\", className)}\n    />\n  );\n}\n\ninterface ScrollSpySectionProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  asChild?: boolean;\n}\n\nfunction ScrollSpySection(props: ScrollSpySectionProps) {\n  const { asChild, ref, value, ...sectionProps } = props;\n\n  const { orientation, onSectionRegister, onSectionUnregister } = useScrollSpyContext(SECTION_NAME);\n  const sectionRef = React.useRef<SectionElement>(null);\n  const composedRef = useComposedRefs(ref, sectionRef);\n\n  useIsomorphicLayoutEffect(() => {\n    const element = sectionRef.current;\n    if (!element || !value) return;\n\n    onSectionRegister(value, element);\n\n    return () => {\n      onSectionUnregister(value);\n    };\n  }, [value, onSectionRegister, onSectionUnregister]);\n\n  const SectionPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <SectionPrimitive\n      data-orientation={orientation}\n      data-slot=\"scroll-spy-section\"\n      {...sectionProps}\n      id={value}\n      ref={composedRef}\n    />\n  );\n}\n\nexport {\n  ScrollSpy,\n  ScrollSpyLink,\n  type ScrollSpyLinkProps,\n  ScrollSpyNav,\n  type ScrollSpyNavProps,\n  type ScrollSpyProps,\n  ScrollSpySection,\n  type ScrollSpySectionProps,\n  ScrollSpyViewport,\n  type ScrollSpyViewportProps\n};\n"],"mappings":"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","names":["value"]}

package/dist/components/ui/sheet.d.ts

@@ -22,10 +22,10 @@ type SheetSide = "top" | "right" | "bottom" | "left";
 type SheetContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {
     /** Cạnh màn hình mà panel trượt ra. Mặc định "right". */
     side?: SheetSide;
-    /** Nhãn cho trình đọc màn hình của nút đóng. Mặc định "Đóng". */
+    /** Nhãn cho trình đọc màn hình của nút đóng. Mặc định: khoá `closeLabel` của namespace `sheet`. */
     closeLabel?: string;
 };
-declare function SheetContent({ className, children, side, closeLabel, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, closeLabel: closeLabelProp, ...props }: SheetContentProps): React.JSX.Element;
 type SheetHeaderProps = React.ComponentProps<"div">;
 declare function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Element;
 type SheetFooterProps = React.ComponentProps<"div">;

package/dist/components/ui/sheet.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
@@ -28,7 +29,15 @@ function SheetOverlay({ className, ...props }) {
     }
   );
 }
-function SheetContent({ className, children, side = "right", closeLabel = "\u0110\xF3ng", ...props }) {
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  closeLabel: closeLabelProp,
+  ...props
+}) {
+  const t = useComitorMessages("sheet");
+  const closeLabel = closeLabelProp ?? t.closeLabel;
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Sheet — panel trượt từ cạnh màn hình (dựng trên Radix Dialog).\n *\n * Dùng cho menu di động, bộ lọc, panel chi tiết. Shell Tier 3 dùng `side=\"left\"`\n * cho MobileMenu. Với panel kéo-thả kiểu mobile (có tay cầm, kéo để đóng) thì\n * dùng `Drawer` (vaul) thay vì Sheet.\n */\n\nexport type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;\n\nfunction Sheet({ ...props }: SheetProps) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nexport type SheetTriggerProps = React.ComponentProps<typeof SheetPrimitive.Trigger>;\n\nfunction SheetTrigger({ ...props }: SheetTriggerProps) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;\n\nfunction SheetClose({ ...props }: SheetCloseProps) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport type SheetPortalProps = React.ComponentProps<typeof SheetPrimitive.Portal>;\n\nfunction SheetPortal({ ...props }: SheetPortalProps) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nexport type SheetOverlayProps = React.ComponentProps<typeof SheetPrimitive.Overlay>;\n\nfunction SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-ink/60 dark:bg-ink/80 backdrop-blur-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Cạnh màn hình mà panel trượt ra. Mặc định \"right\". */\n  side?: SheetSide;\n  /** Nhãn cho trình đọc màn hình của nút đóng. Mặc định \"Đóng\". */\n  closeLabel?: string;\n};\n\nfunction SheetContent({ className, children, side = \"right\", closeLabel = \"Đóng\", ...props }: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          /*\n           * `overflow-y-auto`: cùng lỗi với `DialogContent` trước 1.3.2 — `position: fixed`,\n           * `h-full`, mà không có `overflow` nào, nên nội dung dài hơn khung nhìn bị CẮT và\n           * không cuộn được. `SheetFooter` mang `mt-auto` nên nó vẫn dính đáy khi nội dung ngắn.\n           */\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-overlay transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-md p-1 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">{closeLabel}</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nexport type SheetHeaderProps = React.ComponentProps<\"div\">;\n\nfunction SheetHeader({ className, ...props }: SheetHeaderProps) {\n  return <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-1.5 p-4\", className)} {...props} />;\n}\n\nexport type SheetFooterProps = React.ComponentProps<\"div\">;\n\nfunction SheetFooter({ className, ...props }: SheetFooterProps) {\n  return <div data-slot=\"sheet-footer\" className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)} {...props} />;\n}\n\nexport type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;\n\nfunction SheetTitle({ className, ...props }: SheetTitleProps) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type SheetDescriptionProps = React.ComponentProps<typeof SheetPrimitive.Description>;\n\nfunction SheetDescription({ className, ...props }: SheetDescriptionProps) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger\n};\n"],"mappings":";AAkBS,cAuED,YAvEC;AAhBT,YAAY,oBAAoB;AAChC,SAAS,aAAa;AAEtB,SAAS,UAAU;AAYnB,SAAS,MAAM,EAAE,GAAG,MAAM,GAAe;AACvC,SAAO,oBAAC,eAAe,MAAf,EAAoB,aAAU,SAAS,GAAG,OAAO;AAC3D;AAIA,SAAS,aAAa,EAAE,GAAG,MAAM,GAAsB;AACrD,SAAO,oBAAC,eAAe,SAAf,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAIA,SAAS,WAAW,EAAE,GAAG,MAAM,GAAoB;AACjD,SAAO,oBAAC,eAAe,OAAf,EAAqB,aAAU,eAAe,GAAG,OAAO;AAClE;AAIA,SAAS,YAAY,EAAE,GAAG,MAAM,GAAqB;AACnD,SAAO,oBAAC,eAAe,QAAf,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAIA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAsB;AAChE,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAWA,SAAS,aAAa,EAAE,WAAW,UAAU,OAAO,SAAS,aAAa,gBAAQ,GAAG,MAAM,GAAsB;AAC/G,SACE,qBAAC,eACC;AAAA,wBAAC,gBAAa;AAAA,IACd;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT;AAAA,UACA,SAAS,WACP;AAAA,UACF,SAAS,UACP;AAAA,UACF,SAAS,SACP;AAAA,UACF,SAAS,YACP;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACD,qBAAC,eAAe,OAAf,EAAqB,WAAU,qTAC9B;AAAA,gCAAC,SAAM,WAAU,UAAS;AAAA,YAC1B,oBAAC,UAAK,WAAU,WAAW,sBAAW;AAAA,aACxC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAIA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SAAO,oBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAAO;AACzG;AAIA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SAAO,oBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,mCAAmC,SAAS,GAAI,GAAG,OAAO;AAC/G;AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Sheet — panel trượt từ cạnh màn hình (dựng trên Radix Dialog).\n *\n * Dùng cho menu di động, bộ lọc, panel chi tiết. Shell Tier 3 dùng `side=\"left\"`\n * cho MobileMenu. Với panel kéo-thả kiểu mobile (có tay cầm, kéo để đóng) thì\n * dùng `Drawer` (vaul) thay vì Sheet.\n */\n\nexport type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;\n\nfunction Sheet({ ...props }: SheetProps) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nexport type SheetTriggerProps = React.ComponentProps<typeof SheetPrimitive.Trigger>;\n\nfunction SheetTrigger({ ...props }: SheetTriggerProps) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;\n\nfunction SheetClose({ ...props }: SheetCloseProps) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport type SheetPortalProps = React.ComponentProps<typeof SheetPrimitive.Portal>;\n\nfunction SheetPortal({ ...props }: SheetPortalProps) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nexport type SheetOverlayProps = React.ComponentProps<typeof SheetPrimitive.Overlay>;\n\nfunction SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-ink/60 dark:bg-ink/80 backdrop-blur-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Cạnh màn hình mà panel trượt ra. Mặc định \"right\". */\n  side?: SheetSide;\n  /** Nhãn cho trình đọc màn hình của nút đóng. Mặc định: khoá `closeLabel` của namespace `sheet`. */\n  closeLabel?: string;\n};\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  closeLabel: closeLabelProp,\n  ...props\n}: SheetContentProps) {\n  const t = useComitorMessages(\"sheet\");\n  const closeLabel = closeLabelProp ?? t.closeLabel;\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          /*\n           * `overflow-y-auto`: cùng lỗi với `DialogContent` trước 1.3.2 — `position: fixed`,\n           * `h-full`, mà không có `overflow` nào, nên nội dung dài hơn khung nhìn bị CẮT và\n           * không cuộn được. `SheetFooter` mang `mt-auto` nên nó vẫn dính đáy khi nội dung ngắn.\n           */\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-overlay transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-md p-1 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">{closeLabel}</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nexport type SheetHeaderProps = React.ComponentProps<\"div\">;\n\nfunction SheetHeader({ className, ...props }: SheetHeaderProps) {\n  return <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-1.5 p-4\", className)} {...props} />;\n}\n\nexport type SheetFooterProps = React.ComponentProps<\"div\">;\n\nfunction SheetFooter({ className, ...props }: SheetFooterProps) {\n  return <div data-slot=\"sheet-footer\" className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)} {...props} />;\n}\n\nexport type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;\n\nfunction SheetTitle({ className, ...props }: SheetTitleProps) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type SheetDescriptionProps = React.ComponentProps<typeof SheetPrimitive.Description>;\n\nfunction SheetDescription({ className, ...props }: SheetDescriptionProps) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger\n};\n"],"mappings":";AAmBS,cA+ED,YA/EC;AAjBT,YAAY,oBAAoB;AAChC,SAAS,aAAa;AAEtB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAYnB,SAAS,MAAM,EAAE,GAAG,MAAM,GAAe;AACvC,SAAO,oBAAC,eAAe,MAAf,EAAoB,aAAU,SAAS,GAAG,OAAO;AAC3D;AAIA,SAAS,aAAa,EAAE,GAAG,MAAM,GAAsB;AACrD,SAAO,oBAAC,eAAe,SAAf,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAIA,SAAS,WAAW,EAAE,GAAG,MAAM,GAAoB;AACjD,SAAO,oBAAC,eAAe,OAAf,EAAqB,aAAU,eAAe,GAAG,OAAO;AAClE;AAIA,SAAS,YAAY,EAAE,GAAG,MAAM,GAAqB;AACnD,SAAO,oBAAC,eAAe,QAAf,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAIA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAsB;AAChE,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAWA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,GAAG;AACL,GAAsB;AACpB,QAAM,IAAI,mBAAmB,OAAO;AACpC,QAAM,aAAa,kBAAkB,EAAE;AACvC,SACE,qBAAC,eACC;AAAA,wBAAC,gBAAa;AAAA,IACd;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT;AAAA,UACA,SAAS,WACP;AAAA,UACF,SAAS,UACP;AAAA,UACF,SAAS,SACP;AAAA,UACF,SAAS,YACP;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACD,qBAAC,eAAe,OAAf,EAAqB,WAAU,qTAC9B;AAAA,gCAAC,SAAM,WAAU,UAAS;AAAA,YAC1B,oBAAC,UAAK,WAAU,WAAW,sBAAW;AAAA,aACxC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAIA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SAAO,oBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAAO;AACzG;AAIA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SAAO,oBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,mCAAmC,SAAS,GAAI,GAAG,OAAO;AAC/G;AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/spinner.js

@@ -1,8 +1,11 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { Loader2Icon } from "lucide-react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Loader2Icon, { role: "status", "aria-label": "\u0110ang t\u1EA3i", className: cn("size-4 animate-spin", className), ...props });
+  const t = useComitorMessages("spinner");
+  return /* @__PURE__ */ jsx(Loader2Icon, { role: "status", "aria-label": t.label, className: cn("size-4 animate-spin", className), ...props });
 }
 export {
   Spinner

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["import { Loader2Icon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type SpinnerProps = React.ComponentProps<\"svg\">;\n\n/* aria-label mặc định tiếng Việt; ghi đè được vì {...props} trải sau. */\nfunction Spinner({ className, ...props }: SpinnerProps) {\n  return (\n    <Loader2Icon role=\"status\" aria-label=\"Đang tải\" className={cn(\"size-4 animate-spin\", className)} {...props} />\n  );\n}\n\nexport { Spinner };\n"],"mappings":"AASI;AATJ,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAKnB,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAiB;AACtD,SACE,oBAAC,eAAY,MAAK,UAAS,cAAW,sBAAW,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,OAAO;AAEjH;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport { Loader2Icon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type SpinnerProps = React.ComponentProps<\"svg\">;\n\n/*\n * `\"use client\"` từ `3.0.0`: tên cho trình đọc màn hình theo `ComitorLocaleProvider` (namespace\n * `spinner`), mà context chỉ đọc được ở client. Trước đó file này tĩnh và ghim cứng \"Đang tải\".\n * `aria-label` truyền vào vẫn thắng vì `{...props}` trải sau.\n */\nfunction Spinner({ className, ...props }: SpinnerProps) {\n  const t = useComitorMessages(\"spinner\");\n  return <Loader2Icon role=\"status\" aria-label={t.label} className={cn(\"size-4 animate-spin\", className)} {...props} />;\n}\n\nexport { Spinner };\n"],"mappings":";AAgBS;AAdT,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,UAAU;AASnB,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAiB;AACtD,QAAM,IAAI,mBAAmB,SAAS;AACtC,SAAO,oBAAC,eAAY,MAAK,UAAS,cAAY,EAAE,OAAO,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,OAAO;AACrH;","names":[]}

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

@@ -0,0 +1,34 @@
+/**
+ * Nhãn mặc định của `Stepper`.
+ *
+ * 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; `stepper.tsx` chỉ `import`.
+ */
+/**
+ * Chuỗi hiển thị và chuỗi a11y của `Stepper`. Theo `ComitorLocaleProvider` (mặc định tiếng Anh,
+ * bảng tiếng Việt dựng sẵn); truyền `labels` cho `Stepper` để ghi đè từng khoá.
+ *
+ * ⚠ Thượng nguồn (Dice UI) KHÔNG có chuỗi nào: ô chỉ báo của bước đã xong chỉ vẽ một dấu tick,
+ * còn `StepperPrev`/`StepperNext` là nút rỗng nếu app quên truyền `children`. Cả hai đều là nút
+ * KHÔNG TÊN với trình đọc màn hình — ba khoá dưới đây lấp đúng ba chỗ đó.
+ */
+interface StepperLabels {
+    /**
+     * Chữ `sr-only` thay cho con số trong ô chỉ báo khi bước ĐÃ XONG (lúc đó ô chỉ vẽ dấu tick).
+     * Là HÀM vì có số chèn vào giữa câu.
+     */
+    completedStep: (position: number) => string;
+    /** Nội dung mặc định của `StepperPrev` khi không có `children`. */
+    prev: string;
+    /** Nội dung mặc định của `StepperNext` khi không có `children`. */
+    next: string;
+}
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.stepper`. Component không đọc thẳng hằng này — nó đọc bảng của
+ * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.
+ */
+declare const DEFAULT_STEPPER_LABELS: StepperLabels;
+
+export { DEFAULT_STEPPER_LABELS, type StepperLabels };

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

@@ -0,0 +1,6 @@
+import { stepperEn } from "../../i18n/namespaces/stepper.js";
+const DEFAULT_STEPPER_LABELS = { ...stepperEn };
+export {
+  DEFAULT_STEPPER_LABELS
+};
+//# sourceMappingURL=stepper-constants.js.map

package/dist/components/ui/stepper-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/stepper-constants.ts"],"sourcesContent":["/**\n * Nhãn mặc định của `Stepper`.\n *\n * Module **CỐ Ý không có `\"use client\"`**: mọi export của một file `\"use client\"` tới Server\n * Component là client-reference proxy, đọc ra `undefined` mà KHÔNG throw — xem\n * `src/chart/chart-colors.ts`. Barrel xuất module này TRỰC TIẾP; `stepper.tsx` chỉ `import`.\n */\n\nimport { stepperEn } from \"../../i18n/namespaces/stepper.js\";\n\n/**\n * Chuỗi hiển thị và chuỗi a11y của `Stepper`. Theo `ComitorLocaleProvider` (mặc định tiếng Anh,\n * bảng tiếng Việt dựng sẵn); truyền `labels` cho `Stepper` để ghi đè từng khoá.\n *\n * ⚠ Thượng nguồn (Dice UI) KHÔNG có chuỗi nào: ô chỉ báo của bước đã xong chỉ vẽ một dấu tick,\n * còn `StepperPrev`/`StepperNext` là nút rỗng nếu app quên truyền `children`. Cả hai đều là nút\n * KHÔNG TÊN với trình đọc màn hình — ba khoá dưới đây lấp đúng ba chỗ đó.\n */\nexport interface StepperLabels {\n  /**\n   * Chữ `sr-only` thay cho con số trong ô chỉ báo khi bước ĐÃ XONG (lúc đó ô chỉ vẽ dấu tick).\n   * Là HÀM vì có số chèn vào giữa câu.\n   */\n  completedStep: (position: number) => string;\n  /** Nội dung mặc định của `StepperPrev` khi không có `children`. */\n  prev: string;\n  /** Nội dung mặc định của `StepperNext` khi không có `children`. */\n  next: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.stepper`. Component không đọc thẳng hằng này — nó đọc bảng của\n * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\nexport const DEFAULT_STEPPER_LABELS: StepperLabels = { ...stepperEn };\n"],"mappings":"AAQA,SAAS,iBAAiB;AA2BnB,MAAM,yBAAwC,EAAE,GAAG,UAAU;","names":[]}

package/dist/components/ui/stepper.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { StepperLabels } from './stepper-constants.js';
+
+type Direction = "ltr" | "rtl";
+type Orientation = "horizontal" | "vertical";
+type NavigationDirection = "next" | "prev";
+type ActivationMode = "automatic" | "manual";
+type DataState = "inactive" | "active" | "completed";
+interface DivProps extends React.ComponentProps<"div"> {
+    asChild?: boolean;
+}
+interface ButtonProps extends React.ComponentProps<"button"> {
+    asChild?: boolean;
+}
+interface StepState {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+}
+interface StoreState {
+    steps: Map<string, StepState>;
+    value: string;
+}
+declare function useStore<T>(selector: (state: StoreState) => T): T;
+interface StepperProps extends DivProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onValueComplete?: (value: string, completed: boolean) => void;
+    onValueAdd?: (value: string) => void;
+    onValueRemove?: (value: string) => void;
+    onValidate?: (value: string, direction: NavigationDirection) => boolean | Promise<boolean>;
+    activationMode?: ActivationMode;
+    dir?: Direction;
+    orientation?: Orientation;
+    disabled?: boolean;
+    loop?: boolean;
+    nonInteractive?: boolean;
+    /**
+     * Chuỗi hiển thị/a11y — ghi đè từng khoá. Không truyền thì theo namespace `stepper` của
+     * `ComitorLocaleProvider` (mặc định tiếng Anh).
+     *
+     * ⚠ Thêm so với thượng nguồn: bản gốc không có chuỗi nào, và chính vì thế có hai chỗ ra nút
+     * KHÔNG TÊN (ô chỉ báo bước đã xong, `StepperPrev`/`StepperNext` thiếu `children`).
+     */
+    labels?: Partial<StepperLabels>;
+}
+declare function Stepper(props: StepperProps): React.JSX.Element;
+declare function StepperList(props: DivProps): React.JSX.Element;
+interface StepperItemProps extends DivProps {
+    value: string;
+    completed?: boolean;
+    disabled?: boolean;
+}
+declare function StepperItem(props: StepperItemProps): React.JSX.Element;
+declare function StepperTrigger(props: ButtonProps): React.JSX.Element;
+interface StepperIndicatorProps extends Omit<DivProps, "children"> {
+    children?: React.ReactNode | ((dataState: DataState) => React.ReactNode);
+}
+declare function StepperIndicator(props: StepperIndicatorProps): React.JSX.Element;
+interface StepperSeparatorProps extends DivProps {
+    forceMount?: boolean;
+}
+declare function StepperSeparator(props: StepperSeparatorProps): React.JSX.Element | null;
+interface StepperTitleProps extends React.ComponentProps<"span"> {
+    asChild?: boolean;
+}
+declare function StepperTitle(props: StepperTitleProps): React.JSX.Element;
+interface StepperDescriptionProps extends React.ComponentProps<"span"> {
+    asChild?: boolean;
+}
+declare function StepperDescription(props: StepperDescriptionProps): React.JSX.Element;
+interface StepperContentProps extends DivProps {
+    value: string;
+    forceMount?: boolean;
+}
+declare function StepperContent(props: StepperContentProps): React.JSX.Element | null;
+declare function StepperPrev(props: ButtonProps): React.JSX.Element;
+declare function StepperNext(props: ButtonProps): React.JSX.Element;
+
+export { Stepper, StepperContent, type StepperContentProps, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, type StepperSeparatorProps, StepperTitle, type StepperTitleProps, StepperTrigger, useStore as useStepper };