@comitor/ui 2.0.0 → 2.1.0

package/dist/components/ui/banner.js

@@ -0,0 +1,518 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { cn } from "../../lib/cn.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";
+import { Button } from "./button.js";
+const BANNER_ANIMATION_DURATION = 400;
+const DEFAULT_BANNER_PRIORITY = 0;
+const DEFAULT_BANNER_DISMISSIBLE = true;
+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 \`Banners\``);
+  }
+  return context;
+}
+function useStore(store, selector) {
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => selector(store.getState()),
+    () => selector(store.getState())
+  );
+}
+const BannerContext = React.createContext(null);
+function useBannerContext(consumerName) {
+  const context = React.useContext(BannerContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`Banner\``);
+  }
+  return context;
+}
+function useBanner() {
+  const { id, variant, dismissible, onClose } = useBannerContext("useBanner");
+  const storeContext = React.useContext(StoreContext);
+  return React.useMemo(() => {
+    const onRemove = id && storeContext ? () => storeContext.onBannerRemove(id) : void 0;
+    return {
+      id,
+      variant,
+      dismissible,
+      onClose,
+      onRemove
+    };
+  }, [id, variant, dismissible, onClose, storeContext]);
+}
+function Banners(props) {
+  const { children, maxVisible = 1, side = "top", strategy = "fixed", container: containerProp } = props;
+  const instanceId = React.useId();
+  const stateRef = useLazyRef(() => ({
+    banners: [],
+    removing: /* @__PURE__ */ new Set(),
+    heights: /* @__PURE__ */ new Map()
+  }));
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const timeoutsRef = useLazyRef(() => /* @__PURE__ */ new Map());
+  const idCounterRef = React.useRef(0);
+  const store = React.useMemo(
+    () => ({
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      notify: () => {
+        for (const listener of listenersRef.current) {
+          listener();
+        }
+      },
+      onBannerAdd: (banner) => {
+        idCounterRef.current += 1;
+        const id = `${instanceId}-${idCounterRef.current}`;
+        const newBanner = { ...banner, id };
+        const priority = banner.priority ?? DEFAULT_BANNER_PRIORITY;
+        const banners2 = [...stateRef.current.banners];
+        const insertIndex = banners2.findIndex((b) => (b.priority ?? DEFAULT_BANNER_PRIORITY) < priority);
+        if (insertIndex === -1) {
+          banners2.push(newBanner);
+        } else {
+          banners2.splice(insertIndex, 0, newBanner);
+        }
+        stateRef.current.banners = banners2;
+        store.notify();
+        if (banner.duration && banner.duration > 0) {
+          const timeoutId = setTimeout(() => {
+            store.onRemovingChange(id, true);
+            timeoutsRef.current.delete(id);
+          }, banner.duration);
+          timeoutsRef.current.set(id, timeoutId);
+        }
+        return id;
+      },
+      onBannerRemove: (id) => {
+        const banner = stateRef.current.banners.find((b) => b.id === id);
+        if (!banner) return;
+        const timeoutId = timeoutsRef.current.get(id);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutsRef.current.delete(id);
+        }
+        const newRemoving = new Set(stateRef.current.removing);
+        newRemoving.delete(id);
+        stateRef.current.removing = newRemoving;
+        banner.onDismiss?.();
+        stateRef.current.banners = stateRef.current.banners.filter((b) => b.id !== id);
+        store.notify();
+      },
+      onBannersClear: () => {
+        for (const timeoutId of timeoutsRef.current.values()) {
+          clearTimeout(timeoutId);
+        }
+        timeoutsRef.current.clear();
+        stateRef.current.removing = /* @__PURE__ */ new Set();
+        stateRef.current.heights = /* @__PURE__ */ new Map();
+        stateRef.current.banners = [];
+        store.notify();
+      },
+      onRemovingChange: (id, value) => {
+        const newSet = new Set(stateRef.current.removing);
+        if (value) {
+          newSet.add(id);
+        } else {
+          newSet.delete(id);
+        }
+        stateRef.current.removing = newSet;
+        store.notify();
+      },
+      onHeightChange: (id, height) => {
+        if (stateRef.current.heights.get(id) === height) return;
+        const newHeights = new Map(stateRef.current.heights);
+        newHeights.set(id, height);
+        stateRef.current.heights = newHeights;
+        store.notify();
+      },
+      onHeightRemove: (id) => {
+        if (!stateRef.current.heights.has(id)) return;
+        const newHeights = new Map(stateRef.current.heights);
+        newHeights.delete(id);
+        stateRef.current.heights = newHeights;
+        store.notify();
+      }
+    }),
+    [instanceId, stateRef, listenersRef, timeoutsRef]
+  );
+  const banners = useStore(store, (state) => state.banners);
+  const heights = useStore(store, (state) => state.heights);
+  const visibleBanners = banners.slice(0, maxVisible);
+  const [mounted, setMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  const withPortal = strategy === "fixed" || strategy === "absolute";
+  const container = withPortal ? containerProp ?? (mounted ? globalThis.document?.body : null) ?? null : null;
+  const totalHeight = React.useMemo(() => {
+    let total = 0;
+    for (const banner of visibleBanners) {
+      total += heights.get(banner.id) ?? 0;
+    }
+    return total;
+  }, [visibleBanners, heights]);
+  const bannerContainer = visibleBanners.length > 0 && /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "banner-container",
+      "data-side": side,
+      "data-strategy": strategy,
+      className: cn(
+        "pointer-events-none right-0 left-0 isolate z-50",
+        /*
+         * ⚠ Khác thượng nguồn: bản gốc ghi `transition` thẳng vào `style`, nên lớp
+         * `motion-reduce:transition-none` của từng banner KHÔNG BAO GIỜ thắng được (style nội tuyến
+         * luôn thắng lớp) — người bật "giảm chuyển động" vẫn thấy banner trượt. Nay thời lượng đi
+         * qua `--banner-duration`, bằng 0 khi `prefers-reduced-motion`; banner con thừa kế biến này.
+         */
+        "motion-reduce:[--banner-duration:0ms]",
+        strategy === "fixed" && "fixed",
+        strategy === "static" && "relative",
+        strategy === "sticky" && "sticky",
+        strategy === "absolute" && "absolute",
+        side === "top" ? "top-0" : "bottom-0"
+      ),
+      style: {
+        height: totalHeight > 0 ? totalHeight : "auto",
+        transition: `height var(--banner-duration, ${BANNER_ANIMATION_DURATION}ms) cubic-bezier(0.32, 0.72, 0, 1)`
+      },
+      children: visibleBanners.map((banner, index) => /* @__PURE__ */ jsx(BannerImpl, { banner, side, index }, banner.id))
+    }
+  );
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: strategy === "static" || strategy === "sticky" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    side === "top" && bannerContainer,
+    children,
+    side === "bottom" && bannerContainer
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    container && bannerContainer && ReactDOM.createPortal(bannerContainer, container)
+  ] }) });
+}
+function useBanners() {
+  const store = useStoreContext("useBanners");
+  const banners = useStore(store, (state) => state.banners);
+  return React.useMemo(
+    () => ({
+      onBannerAdd: store.onBannerAdd,
+      onBannerRemove: store.onBannerRemove,
+      onBannersClear: store.onBannersClear,
+      banners
+    }),
+    [store, banners]
+  );
+}
+const bannerVariants = cva(
+  "pointer-events-auto relative flex w-full items-center gap-3 border-b px-4 py-3 text-sm motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        info: "bg-card text-info-ink",
+        success: "bg-card text-success-ink",
+        warning: "bg-card text-warning-ink",
+        destructive: "bg-card text-destructive-ink"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function BannerImpl(props) {
+  const { banner, side, index } = props;
+  const store = useStoreContext("BannerImpl");
+  const removing = useStore(store, (state) => state.removing.has(banner.id));
+  const banners = useStore(store, (state) => state.banners);
+  const heights = useStore(store, (state) => state.heights);
+  const [mounted, setMounted] = React.useState(false);
+  const bannerRef = React.useRef(null);
+  const offsetBeforeRemoveRef = React.useRef(0);
+  const offset = React.useMemo(() => {
+    let total = 0;
+    for (const b of banners) {
+      if (b.id === banner.id) break;
+      total += heights.get(b.id) ?? 0;
+    }
+    return total;
+  }, [banners, heights, banner.id]);
+  if (!removing) {
+    offsetBeforeRemoveRef.current = offset;
+  }
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!bannerRef.current || removing) return;
+    const height = bannerRef.current.getBoundingClientRect().height;
+    store.onHeightChange(banner.id, height);
+  }, [store, banner.id, removing]);
+  React.useEffect(() => {
+    if (!removing) return;
+    store.onHeightRemove(banner.id);
+    const timeoutId = setTimeout(() => store.onBannerRemove(banner.id), BANNER_ANIMATION_DURATION);
+    return () => clearTimeout(timeoutId);
+  }, [removing, store, banner.id]);
+  const onClose = React.useCallback(() => store.onRemovingChange(banner.id, true), [store, banner.id]);
+  const onRemove = React.useCallback(() => store.onBannerRemove(banner.id), [store, banner.id]);
+  const dismissible = banner.dismissible ?? DEFAULT_BANNER_DISMISSIBLE;
+  const contextValue = React.useMemo(
+    () => ({ id: banner.id, variant: banner.variant, dismissible, onClose }),
+    [banner.id, banner.variant, dismissible, onClose]
+  );
+  const renderProps = React.useMemo(
+    () => ({
+      id: banner.id,
+      variant: banner.variant,
+      dismissible,
+      onClose,
+      onRemove
+    }),
+    [banner.id, banner.variant, dismissible, onClose, onRemove]
+  );
+  const currentOffset = removing ? offsetBeforeRemoveRef.current : offset;
+  const isTop = side === "top";
+  function getTransform() {
+    if (!mounted) return isTop ? "translateY(-100%)" : "translateY(100%)";
+    if (removing) {
+      return isTop ? `translateY(calc(${currentOffset}px - 100%))` : `translateY(calc(-${currentOffset}px + 100%))`;
+    }
+    return isTop ? `translateY(${currentOffset}px)` : `translateY(-${currentOffset}px)`;
+  }
+  const opacityDuration = removing ? BANNER_ANIMATION_DURATION / 2 : BANNER_ANIMATION_DURATION;
+  return /* @__PURE__ */ jsx(BannerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "queued-banner",
+      "data-state": removing ? "closed" : "open",
+      "data-mounted": mounted,
+      "data-removed": removing,
+      "data-side": side,
+      "data-front": index === 0,
+      "data-index": index,
+      ref: bannerRef,
+      className: bannerVariants({ variant: banner.variant }),
+      style: {
+        position: "absolute",
+        [isTop ? "top" : "bottom"]: 0,
+        left: 0,
+        right: 0,
+        zIndex: removing ? 0 : 50 - index,
+        transform: getTransform(),
+        opacity: mounted && !removing ? 1 : 0,
+        // Thời lượng qua `--banner-duration` (0 khi giảm chuyển động) — xem chú thích ở `Banners`.
+        transition: `transform var(--banner-duration, ${BANNER_ANIMATION_DURATION}ms) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--banner-duration, ${opacityDuration}ms) ease`
+      },
+      children: typeof banner.content === "function" ? banner.content(renderProps) : banner.content
+    }
+  ) });
+}
+function Banner(props) {
+  const {
+    className,
+    variant = "default",
+    open: openProp,
+    defaultOpen = true,
+    onOpenChange,
+    onDismiss,
+    priority,
+    duration,
+    dismissible = DEFAULT_BANNER_DISMISSIBLE,
+    children,
+    asChild,
+    ...rootProps
+  } = props;
+  const store = React.useContext(StoreContext);
+  const isInsideStore = store !== null;
+  const isControlled = openProp !== void 0;
+  const openRef = useLazyRef(() => openProp ?? defaultOpen);
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const bannerIdRef = React.useRef(null);
+  const onDismissRef = useAsRef(onDismiss);
+  const onOpenChangeRef = useAsRef(onOpenChange);
+  if (isControlled) {
+    openRef.current = openProp;
+  }
+  const subscribe = React.useCallback(
+    (cb) => {
+      listenersRef.current.add(cb);
+      return () => listenersRef.current.delete(cb);
+    },
+    [listenersRef]
+  );
+  const getSnapshot = React.useCallback(() => openRef.current, [openRef]);
+  const open = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    if (!isInsideStore || !store || !open) return;
+    let isCleaningUp = false;
+    const id = store.onBannerAdd({
+      content: children,
+      variant: variant ?? void 0,
+      priority,
+      dismissible,
+      duration,
+      onDismiss: () => {
+        if (isCleaningUp) return;
+        if (!isControlled) {
+          openRef.current = false;
+          for (const listener of listenersRef.current) {
+            listener();
+          }
+        }
+        onDismissRef.current?.();
+        onOpenChangeRef.current?.(false);
+      }
+    });
+    bannerIdRef.current = id;
+    return () => {
+      isCleaningUp = true;
+      if (bannerIdRef.current) {
+        store.onBannerRemove(bannerIdRef.current);
+        bannerIdRef.current = null;
+      }
+    };
+  }, [
+    isInsideStore,
+    store,
+    open,
+    isControlled,
+    children,
+    variant,
+    priority,
+    dismissible,
+    duration,
+    openRef,
+    listenersRef,
+    onDismissRef,
+    onOpenChangeRef
+  ]);
+  const onClose = React.useCallback(() => {
+    if (!isControlled) {
+      openRef.current = false;
+      for (const listener of listenersRef.current) {
+        listener();
+      }
+    }
+    onOpenChangeRef.current?.(false);
+  }, [isControlled, openRef, listenersRef, onOpenChangeRef]);
+  const contextValue = React.useMemo(
+    () => ({
+      variant,
+      dismissible,
+      onClose
+    }),
+    [variant, dismissible, onClose]
+  );
+  if (!open || isInsideStore) return null;
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(BannerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "banner",
+      "data-state": "open",
+      className: cn(bannerVariants({ variant, className })),
+      ...rootProps,
+      children
+    }
+  ) });
+}
+function BannerIcon(props) {
+  const { className, asChild, ...iconProps } = props;
+  const IconPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    IconPrimitive,
+    {
+      "data-slot": "banner-icon",
+      className: cn("flex shrink-0 items-center [&>svg]:size-4", className),
+      ...iconProps
+    }
+  );
+}
+function BannerContent(props) {
+  const { className, asChild, ...contentProps } = props;
+  const ContentPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      "data-slot": "banner-content",
+      className: cn("flex min-w-0 flex-1 flex-col gap-1", className),
+      ...contentProps
+    }
+  );
+}
+function BannerTitle(props) {
+  const { className, ...titleProps } = props;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "banner-title", className: cn("text-sm leading-none font-medium", className), ...titleProps });
+}
+function BannerDescription(props) {
+  const { className, ...descriptionProps } = props;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "banner-description", className: cn("text-xs opacity-90", className), ...descriptionProps });
+}
+function BannerActions(props) {
+  const { className, asChild, ...actionsProps } = props;
+  const ActionsPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ActionsPrimitive,
+    {
+      "data-slot": "banner-actions",
+      className: cn("flex items-center gap-2", className),
+      ...actionsProps
+    }
+  );
+}
+function BannerClose(props) {
+  const { onClick: onClickProp, disabled, children, ...closeProps } = props;
+  const { dismissible = DEFAULT_BANNER_DISMISSIBLE, onClose } = useBannerContext("BannerClose");
+  const isDisabled = disabled ?? !dismissible;
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented || isDisabled) return;
+      onClose?.();
+    },
+    [onClickProp, isDisabled, onClose]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "\u0110\xF3ng th\xF4ng b\xE1o",
+      "data-slot": "banner-close",
+      variant: "ghost",
+      size: "icon-sm",
+      onClick,
+      disabled: isDisabled,
+      ...closeProps,
+      children: children ?? /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+    }
+  );
+}
+export {
+  Banner,
+  BannerActions,
+  BannerClose,
+  BannerContent,
+  BannerDescription,
+  BannerIcon,
+  BannerTitle,
+  Banners,
+  useBanner,
+  useBanners
+};
+//# sourceMappingURL=banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/banner.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/banner) — 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: thông báo TOÀN WORKSPACE ở đỉnh khung app (sắp hết hạn dùng thử, bảo trì, lỗi\n * thanh toán) — đóng được, khác `Alert` là khối tĩnh nằm trong nội dung trang.\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { cn } from \"../../lib/cn.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\";\nimport { Button } from \"./button.js\";\n\nconst BANNER_ANIMATION_DURATION = 400;\nconst DEFAULT_BANNER_PRIORITY = 0;\nconst DEFAULT_BANNER_DISMISSIBLE = true;\n\ntype BannerVariant = \"default\" | \"info\" | \"success\" | \"warning\" | \"destructive\";\ntype BannerSide = \"top\" | \"bottom\";\ntype BannerStrategy = \"fixed\" | \"static\" | \"sticky\" | \"absolute\";\n\ninterface DivProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\ntype CloseElement = React.ComponentRef<typeof BannerClose>;\n\ninterface BannerRenderProps {\n  id: string;\n  variant?: BannerVariant;\n  dismissible: boolean;\n  onClose: () => void;\n  onRemove: () => void;\n}\n\n// Thượng nguồn đặt tên kiểu này là `BannerContent` — trùng tên component `BannerContent`. Đổi tên\n// để `export { BannerContent }` không mang theo một KIỂU cùng tên mà nghĩa khác hẳn.\ntype BannerContentValue = React.ReactNode | ((props: BannerRenderProps) => React.ReactNode);\n\ninterface BannerData {\n  id: string;\n  content: BannerContentValue;\n  variant?: BannerVariant;\n  priority?: number;\n  duration?: number;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n}\n\ninterface StoreState {\n  banners: BannerData[];\n  removing: Set<string>;\n  heights: Map<string, number>;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => StoreState;\n  notify: () => void;\n  onBannerAdd: (banner: Omit<BannerData, \"id\">) => string;\n  onBannerRemove: (id: string) => void;\n  onBannersClear: () => void;\n  onRemovingChange: (id: string, value: boolean) => void;\n  onHeightChange: (id: string, height: number) => void;\n  onHeightRemove: (id: string) => void;\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 \\`Banners\\``);\n  }\n  return context;\n}\n\nfunction useStore<T>(store: Store, selector: (state: StoreState) => T): T {\n  return React.useSyncExternalStore(\n    store.subscribe,\n    () => selector(store.getState()),\n    () => selector(store.getState())\n  );\n}\n\ninterface BannerContextValue {\n  id?: string;\n  variant?: BannerVariant | null;\n  dismissible?: boolean;\n  onClose?: () => void;\n}\n\nconst BannerContext = React.createContext<BannerContextValue | null>(null);\n\nfunction useBannerContext(consumerName: string) {\n  const context = React.useContext(BannerContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`Banner\\``);\n  }\n  return context;\n}\n\nfunction useBanner() {\n  const { id, variant, dismissible, onClose } = useBannerContext(\"useBanner\");\n  const storeContext = React.useContext(StoreContext);\n\n  return React.useMemo(() => {\n    const onRemove = id && storeContext ? () => storeContext.onBannerRemove(id) : undefined;\n\n    return {\n      id,\n      variant,\n      dismissible,\n      onClose,\n      onRemove\n    };\n  }, [id, variant, dismissible, onClose, storeContext]);\n}\n\ninterface BannersProps {\n  children?: React.ReactNode;\n  maxVisible?: number;\n  side?: BannerSide;\n  strategy?: BannerStrategy;\n  container?: Element | DocumentFragment | null;\n}\n\nfunction Banners(props: BannersProps) {\n  const { children, maxVisible = 1, side = \"top\", strategy = \"fixed\", container: containerProp } = props;\n\n  const instanceId = React.useId();\n  const stateRef = useLazyRef<StoreState>(() => ({\n    banners: [],\n    removing: new Set(),\n    heights: new Map()\n  }));\n  const listenersRef = useLazyRef<Set<() => void>>(() => new Set());\n  const timeoutsRef = useLazyRef<Map<string, ReturnType<typeof setTimeout>>>(() => new Map());\n  const idCounterRef = React.useRef(0);\n\n  const store: Store = React.useMemo(\n    () => ({\n      subscribe: (cb) => {\n        listenersRef.current.add(cb);\n        return () => listenersRef.current.delete(cb);\n      },\n      getState: () => stateRef.current,\n      notify: () => {\n        for (const listener of listenersRef.current) {\n          listener();\n        }\n      },\n      onBannerAdd: (banner) => {\n        /*\n         * ⚠ Khác thượng nguồn: bản gốc `crypto.randomUUID()` — hàm này CHỈ có trong secure\n         * context (https, localhost). Mở app qua http bằng IP mạng nội bộ (máy dev, môi trường\n         * nội bộ) thì nó là `undefined` và mọi lần thêm banner đều throw. Id chỉ cần duy nhất\n         * trong một `Banners` → bộ đếm, tiền tố `useId()` cho chắc khi có nhiều `Banners`.\n         */\n        idCounterRef.current += 1;\n        const id = `${instanceId}-${idCounterRef.current}`;\n        const newBanner: BannerData = { ...banner, id };\n        const priority = banner.priority ?? DEFAULT_BANNER_PRIORITY;\n\n        const banners = [...stateRef.current.banners];\n        const insertIndex = banners.findIndex((b) => (b.priority ?? DEFAULT_BANNER_PRIORITY) < priority);\n\n        if (insertIndex === -1) {\n          banners.push(newBanner);\n        } else {\n          banners.splice(insertIndex, 0, newBanner);\n        }\n\n        stateRef.current.banners = banners;\n        store.notify();\n\n        if (banner.duration && banner.duration > 0) {\n          const timeoutId = setTimeout(() => {\n            store.onRemovingChange(id, true);\n            timeoutsRef.current.delete(id);\n          }, banner.duration);\n          timeoutsRef.current.set(id, timeoutId);\n        }\n\n        return id;\n      },\n      onBannerRemove: (id) => {\n        const banner = stateRef.current.banners.find((b) => b.id === id);\n        if (!banner) return;\n\n        const timeoutId = timeoutsRef.current.get(id);\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutsRef.current.delete(id);\n        }\n\n        const newRemoving = new Set(stateRef.current.removing);\n        newRemoving.delete(id);\n        stateRef.current.removing = newRemoving;\n\n        banner.onDismiss?.();\n        stateRef.current.banners = stateRef.current.banners.filter((b) => b.id !== id);\n        store.notify();\n      },\n      onBannersClear: () => {\n        for (const timeoutId of timeoutsRef.current.values()) {\n          clearTimeout(timeoutId);\n        }\n        timeoutsRef.current.clear();\n        stateRef.current.removing = new Set();\n        stateRef.current.heights = new Map();\n        stateRef.current.banners = [];\n        store.notify();\n      },\n      onRemovingChange: (id, value) => {\n        const newSet = new Set(stateRef.current.removing);\n        if (value) {\n          newSet.add(id);\n        } else {\n          newSet.delete(id);\n        }\n        stateRef.current.removing = newSet;\n        store.notify();\n      },\n      onHeightChange: (id, height) => {\n        if (stateRef.current.heights.get(id) === height) return;\n        const newHeights = new Map(stateRef.current.heights);\n        newHeights.set(id, height);\n        stateRef.current.heights = newHeights;\n        store.notify();\n      },\n      onHeightRemove: (id) => {\n        if (!stateRef.current.heights.has(id)) return;\n        const newHeights = new Map(stateRef.current.heights);\n        newHeights.delete(id);\n        stateRef.current.heights = newHeights;\n        store.notify();\n      }\n    }),\n    [instanceId, stateRef, listenersRef, timeoutsRef]\n  );\n\n  const banners = useStore(store, (state) => state.banners);\n  const heights = useStore(store, (state) => state.heights);\n  const visibleBanners = banners.slice(0, maxVisible);\n\n  /*\n   * ⚠ Khác thượng nguồn: bản gốc đọc `globalThis.document?.body` NGAY TRONG render. Ở đây chỉ đọc\n   * sau khi mount (cùng khuôn với `ActionBar`) — lượt render phía server và lượt hydrate không\n   * chạm `document`.\n   */\n  const [mounted, setMounted] = React.useState(false);\n  useIsomorphicLayoutEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const withPortal = strategy === \"fixed\" || strategy === \"absolute\";\n  const container = withPortal ? (containerProp ?? (mounted ? globalThis.document?.body : null) ?? null) : null;\n\n  const totalHeight = React.useMemo(() => {\n    let total = 0;\n    for (const banner of visibleBanners) {\n      total += heights.get(banner.id) ?? 0;\n    }\n    return total;\n  }, [visibleBanners, heights]);\n\n  const bannerContainer = visibleBanners.length > 0 && (\n    <div\n      data-slot=\"banner-container\"\n      data-side={side}\n      data-strategy={strategy}\n      className={cn(\n        \"pointer-events-none right-0 left-0 isolate z-50\",\n        /*\n         * ⚠ Khác thượng nguồn: bản gốc ghi `transition` thẳng vào `style`, nên lớp\n         * `motion-reduce:transition-none` của từng banner KHÔNG BAO GIỜ thắng được (style nội tuyến\n         * luôn thắng lớp) — người bật \"giảm chuyển động\" vẫn thấy banner trượt. Nay thời lượng đi\n         * qua `--banner-duration`, bằng 0 khi `prefers-reduced-motion`; banner con thừa kế biến này.\n         */\n        \"motion-reduce:[--banner-duration:0ms]\",\n        strategy === \"fixed\" && \"fixed\",\n        strategy === \"static\" && \"relative\",\n        strategy === \"sticky\" && \"sticky\",\n        strategy === \"absolute\" && \"absolute\",\n        side === \"top\" ? \"top-0\" : \"bottom-0\"\n      )}\n      style={{\n        height: totalHeight > 0 ? totalHeight : \"auto\",\n        transition: `height var(--banner-duration, ${BANNER_ANIMATION_DURATION}ms) cubic-bezier(0.32, 0.72, 0, 1)`\n      }}\n    >\n      {visibleBanners.map((banner, index) => (\n        <BannerImpl key={banner.id} banner={banner} side={side} index={index} />\n      ))}\n    </div>\n  );\n\n  return (\n    <StoreContext.Provider value={store}>\n      {strategy === \"static\" || strategy === \"sticky\" ? (\n        <>\n          {side === \"top\" && bannerContainer}\n          {children}\n          {side === \"bottom\" && bannerContainer}\n        </>\n      ) : (\n        <>\n          {children}\n          {container && bannerContainer && ReactDOM.createPortal(bannerContainer, container)}\n        </>\n      )}\n    </StoreContext.Provider>\n  );\n}\n\nfunction useBanners() {\n  const store = useStoreContext(\"useBanners\");\n  const banners = useStore(store, (state) => state.banners);\n\n  return React.useMemo(\n    () => ({\n      onBannerAdd: store.onBannerAdd,\n      onBannerRemove: store.onBannerRemove,\n      onBannersClear: store.onBannersClear,\n      banners\n    }),\n    [store, banners]\n  );\n}\n\n/*\n * ⚠ Khác thượng nguồn: bản gốc tô bằng bảng màu mặc định của Tailwind (`bg-blue-50\n * text-blue-900`, `bg-red-50`… kèm `dark:`) — đi vòng qua hợp đồng token nên không đổi theo bảng\n * tương phản cao. Ở đây dùng ĐÚNG bộ lớp của `Alert` (alert.tsx) để Banner và Alert cùng tông\n * trông như một họ: nền `bg-card`, chữ + icon ở bậc `-ink` của tone. `Alert` chưa có `info` /\n * `success`; hai tông đó theo cùng khuôn với `warning` / `destructive` của nó.\n *\n * Nền ĐẶC `bg-card` chứ không tint `bg-<tone>/15`: ở chế độ `fixed`/`absolute`, banner nằm ĐÈ lên\n * nội dung trang — một nền trong suốt một phần sẽ cho chữ trang lộ xuyên qua chữ banner.\n *\n * Mô tả (`BannerDescription`) giữ `opacity-90` của bản gốc — trên nền đặc nó tương đương đúng\n * `text-<tone>-ink/90` của `AlertDescription`. Cổng không đo được `opacity`, nên số đo tay (trên\n * `--card`, tiêu đề / mô tả 90%):\n *\n *     bảng tương phản cao   light                          dark\n *       info                6,68 / 5,31                    9,54 / 7,92   ✓\n *       success             6,52 / 5,20                   10,19 / 8,44   ✓\n *       warning             6,51 / 5,17                   11,60 / 9,56   ✓\n *       destructive         7,15 / 5,77                    6,42 / 5,41   ✓\n *     bảng mặc định (nợ token đã chấp nhận, cùng mức với `Alert`):\n *       destructive 4,38 / 3,81 (light) · 4,06 / 3,50 (dark) · info dark 4,28 / 3,71\n */\nconst bannerVariants = cva(\n  \"pointer-events-auto relative flex w-full items-center gap-3 border-b px-4 py-3 text-sm motion-reduce:transition-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        info: \"bg-card text-info-ink\",\n        success: \"bg-card text-success-ink\",\n        warning: \"bg-card text-warning-ink\",\n        destructive: \"bg-card text-destructive-ink\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\ninterface BannerImplProps {\n  banner: BannerData;\n  side: BannerSide;\n  index: number;\n}\n\nfunction BannerImpl(props: BannerImplProps) {\n  const { banner, side, index } = props;\n\n  const store = useStoreContext(\"BannerImpl\");\n  const removing = useStore(store, (state) => state.removing.has(banner.id));\n  const banners = useStore(store, (state) => state.banners);\n  const heights = useStore(store, (state) => state.heights);\n\n  const [mounted, setMounted] = React.useState(false);\n  const bannerRef = React.useRef<HTMLDivElement>(null);\n  const offsetBeforeRemoveRef = React.useRef(0);\n\n  const offset = React.useMemo(() => {\n    let total = 0;\n    for (const b of banners) {\n      if (b.id === banner.id) break;\n      total += heights.get(b.id) ?? 0;\n    }\n    return total;\n  }, [banners, heights, banner.id]);\n\n  if (!removing) {\n    offsetBeforeRemoveRef.current = offset;\n  }\n\n  React.useEffect(() => {\n    const frame = requestAnimationFrame(() => setMounted(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!bannerRef.current || removing) return;\n    const height = bannerRef.current.getBoundingClientRect().height;\n    store.onHeightChange(banner.id, height);\n  }, [store, banner.id, removing]);\n\n  React.useEffect(() => {\n    if (!removing) return;\n    store.onHeightRemove(banner.id);\n    const timeoutId = setTimeout(() => store.onBannerRemove(banner.id), BANNER_ANIMATION_DURATION);\n    return () => clearTimeout(timeoutId);\n  }, [removing, store, banner.id]);\n\n  const onClose = React.useCallback(() => store.onRemovingChange(banner.id, true), [store, banner.id]);\n\n  const onRemove = React.useCallback(() => store.onBannerRemove(banner.id), [store, banner.id]);\n\n  const dismissible = banner.dismissible ?? DEFAULT_BANNER_DISMISSIBLE;\n\n  const contextValue = React.useMemo<BannerContextValue>(\n    () => ({ id: banner.id, variant: banner.variant, dismissible, onClose }),\n    [banner.id, banner.variant, dismissible, onClose]\n  );\n\n  const renderProps = React.useMemo<BannerRenderProps>(\n    () => ({\n      id: banner.id,\n      variant: banner.variant,\n      dismissible,\n      onClose,\n      onRemove\n    }),\n    [banner.id, banner.variant, dismissible, onClose, onRemove]\n  );\n\n  const currentOffset = removing ? offsetBeforeRemoveRef.current : offset;\n  const isTop = side === \"top\";\n\n  function getTransform() {\n    if (!mounted) return isTop ? \"translateY(-100%)\" : \"translateY(100%)\";\n    if (removing) {\n      return isTop ? `translateY(calc(${currentOffset}px - 100%))` : `translateY(calc(-${currentOffset}px + 100%))`;\n    }\n    return isTop ? `translateY(${currentOffset}px)` : `translateY(-${currentOffset}px)`;\n  }\n\n  const opacityDuration = removing ? BANNER_ANIMATION_DURATION / 2 : BANNER_ANIMATION_DURATION;\n\n  return (\n    <BannerContext.Provider value={contextValue}>\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        data-slot=\"queued-banner\"\n        data-state={removing ? \"closed\" : \"open\"}\n        data-mounted={mounted}\n        data-removed={removing}\n        data-side={side}\n        data-front={index === 0}\n        data-index={index}\n        ref={bannerRef}\n        className={bannerVariants({ variant: banner.variant })}\n        style={{\n          position: \"absolute\",\n          [isTop ? \"top\" : \"bottom\"]: 0,\n          left: 0,\n          right: 0,\n          zIndex: removing ? 0 : 50 - index,\n          transform: getTransform(),\n          opacity: mounted && !removing ? 1 : 0,\n          // Thời lượng qua `--banner-duration` (0 khi giảm chuyển động) — xem chú thích ở `Banners`.\n          transition: `transform var(--banner-duration, ${BANNER_ANIMATION_DURATION}ms) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--banner-duration, ${opacityDuration}ms) ease`\n        }}\n      >\n        {typeof banner.content === \"function\" ? banner.content(renderProps) : banner.content}\n      </div>\n    </BannerContext.Provider>\n  );\n}\n\ninterface BannerProps extends DivProps, VariantProps<typeof bannerVariants> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  priority?: number;\n  duration?: number;\n  dismissible?: boolean;\n}\n\nfunction Banner(props: BannerProps) {\n  const {\n    className,\n    variant = \"default\",\n    open: openProp,\n    defaultOpen = true,\n    onOpenChange,\n    onDismiss,\n    priority,\n    duration,\n    dismissible = DEFAULT_BANNER_DISMISSIBLE,\n    children,\n    asChild,\n    ...rootProps\n  } = props;\n\n  const store = React.useContext(StoreContext);\n\n  const isInsideStore = store !== null;\n  const isControlled = openProp !== undefined;\n\n  const openRef = useLazyRef(() => openProp ?? defaultOpen);\n  const listenersRef = useLazyRef<Set<() => void>>(() => new Set());\n  const bannerIdRef = React.useRef<string | null>(null);\n  const onDismissRef = useAsRef(onDismiss);\n  const onOpenChangeRef = useAsRef(onOpenChange);\n\n  if (isControlled) {\n    openRef.current = openProp;\n  }\n\n  const subscribe = React.useCallback(\n    (cb: () => void) => {\n      listenersRef.current.add(cb);\n      return () => listenersRef.current.delete(cb);\n    },\n    [listenersRef]\n  );\n\n  const getSnapshot = React.useCallback(() => openRef.current, [openRef]);\n\n  const open = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  React.useEffect(() => {\n    if (!isInsideStore || !store || !open) return;\n\n    /*\n     * ⚠ Khác thượng nguồn — hai lỗi của `<Banner>` đặt trong `<Banners>`:\n     *\n     * 1. Hàm dọn của effect này gỡ banner bằng `onBannerRemove`, mà hàm đó GỌI `onDismiss`. Bản\n     *    gốc vì thế báo \"người dùng đã đóng\" (`onDismiss` + `onOpenChange(false)`) mỗi khi effect\n     *    chạy lại — tức MỖI LẦN cha re-render, vì `children` là JSX mới — và cả khi unmount (đổi\n     *    route). Banner tự đóng, và app lưu \"đã tắt thông báo\" cho một lần người dùng chưa hề bấm.\n     *    Cờ `isCleaningUp` chặn đúng đường đó; đóng thật (nút X, hết `duration`) vẫn báo như cũ.\n     * 2. Ở chế độ không kiểm soát, đóng qua hàng đợi không hạ `open` của chính `Banner`, nên lần\n     *    re-render kế tiếp thêm LẠI banner vừa đóng. Nay hạ `open` như `onClose` bên dưới.\n     */\n    let isCleaningUp = false;\n\n    const id = store.onBannerAdd({\n      content: children,\n      variant: variant ?? undefined,\n      priority,\n      dismissible,\n      duration,\n      onDismiss: () => {\n        if (isCleaningUp) return;\n        if (!isControlled) {\n          openRef.current = false;\n          for (const listener of listenersRef.current) {\n            listener();\n          }\n        }\n        onDismissRef.current?.();\n        onOpenChangeRef.current?.(false);\n      }\n    });\n    bannerIdRef.current = id;\n\n    return () => {\n      isCleaningUp = true;\n      if (bannerIdRef.current) {\n        store.onBannerRemove(bannerIdRef.current);\n        bannerIdRef.current = null;\n      }\n    };\n  }, [\n    isInsideStore,\n    store,\n    open,\n    isControlled,\n    children,\n    variant,\n    priority,\n    dismissible,\n    duration,\n    openRef,\n    listenersRef,\n    onDismissRef,\n    onOpenChangeRef\n  ]);\n\n  const onClose = React.useCallback(() => {\n    if (!isControlled) {\n      openRef.current = false;\n      for (const listener of listenersRef.current) {\n        listener();\n      }\n    }\n    onOpenChangeRef.current?.(false);\n  }, [isControlled, openRef, listenersRef, onOpenChangeRef]);\n\n  const contextValue = React.useMemo<BannerContextValue>(\n    () => ({\n      variant,\n      dismissible,\n      onClose\n    }),\n    [variant, dismissible, onClose]\n  );\n\n  if (!open || isInsideStore) return null;\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <BannerContext.Provider value={contextValue}>\n      <RootPrimitive\n        role=\"status\"\n        aria-live=\"polite\"\n        data-slot=\"banner\"\n        data-state=\"open\"\n        className={cn(bannerVariants({ variant, className }))}\n        {...rootProps}\n      >\n        {children}\n      </RootPrimitive>\n    </BannerContext.Provider>\n  );\n}\n\nfunction BannerIcon(props: DivProps) {\n  const { className, asChild, ...iconProps } = props;\n\n  const IconPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <IconPrimitive\n      data-slot=\"banner-icon\"\n      className={cn(\"flex shrink-0 items-center [&>svg]:size-4\", className)}\n      {...iconProps}\n    />\n  );\n}\n\nfunction BannerContent(props: DivProps) {\n  const { className, asChild, ...contentProps } = props;\n\n  const ContentPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ContentPrimitive\n      data-slot=\"banner-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-1\", className)}\n      {...contentProps}\n    />\n  );\n}\n\nfunction BannerTitle(props: React.ComponentProps<\"div\">) {\n  const { className, ...titleProps } = props;\n\n  return <div data-slot=\"banner-title\" className={cn(\"text-sm leading-none font-medium\", className)} {...titleProps} />;\n}\n\nfunction BannerDescription(props: React.ComponentProps<\"div\">) {\n  const { className, ...descriptionProps } = props;\n\n  return <div data-slot=\"banner-description\" className={cn(\"text-xs opacity-90\", className)} {...descriptionProps} />;\n}\n\nfunction BannerActions(props: DivProps) {\n  const { className, asChild, ...actionsProps } = props;\n\n  const ActionsPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ActionsPrimitive\n      data-slot=\"banner-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...actionsProps}\n    />\n  );\n}\n\ntype BannerCloseProps = React.ComponentProps<typeof Button>;\n\n/**\n * Nút đóng banner. Không truyền `children` thì vẽ icon X.\n *\n * ⚠ Khác thượng nguồn: có tên cho trình đọc màn hình — `aria-label` mặc định \"Đóng thông báo\",\n * ghi đè bằng chính prop `aria-label`. Bản gốc là `Button` chỉ chứa icon X, tức một nút KHÔNG\n * TÊN. Nếu `children` là CHỮ nhìn thấy được thì truyền `aria-label` trùng với chữ đó (WCAG\n * 2.5.3), hoặc `aria-label={undefined}`.\n */\nfunction BannerClose(props: BannerCloseProps) {\n  const { onClick: onClickProp, disabled, children, ...closeProps } = props;\n\n  const { dismissible = DEFAULT_BANNER_DISMISSIBLE, onClose } = useBannerContext(\"BannerClose\");\n\n  const isDisabled = disabled ?? !dismissible;\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<CloseElement>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented || isDisabled) return;\n      onClose?.();\n    },\n    [onClickProp, isDisabled, onClose]\n  );\n\n  return (\n    <Button\n      aria-label=\"Đóng thông báo\"\n      data-slot=\"banner-close\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      onClick={onClick}\n      disabled={isDisabled}\n      {...closeProps}\n    >\n      {children ?? <X aria-hidden=\"true\" className=\"size-3.5\" />}\n    </Button>\n  );\n}\n\nexport {\n  Banner,\n  BannerActions,\n  BannerClose,\n  type BannerCloseProps,\n  BannerContent,\n  type BannerData,\n  BannerDescription,\n  BannerIcon,\n  type BannerProps,\n  type BannerRenderProps,\n  Banners,\n  type BannersProps,\n  BannerTitle,\n  type BannerVariant,\n  useBanner,\n  useBanners\n};\n"],"mappings":"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","names":["banners"]}

package/dist/components/ui/circular-progress.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+interface CircularProgressProps extends React.ComponentProps<"div"> {
+    /** Giá trị hiện tại; `null`/`undefined` = không xác định (vòng quay). */
+    value?: number | null | undefined;
+    /**
+     * Chuỗi trình đọc màn hình đọc thay cho con số (`aria-valuetext`) và chữ giữa vòng — mặc định
+     * phần trăm làm tròn, vd `"45%"`.
+     */
+    getValueText?(value: number, min: number, max: number): string;
+    min?: number;
+    max?: number;
+    /** Đường kính, px. */
+    size?: number;
+    /** Độ dày nét, px. */
+    thickness?: number;
+    /**
+     * Nhãn HIỆN của vòng, đồng thời là tên của `role="progressbar"`. Không đặt nhãn hiện thì PHẢI
+     * truyền `aria-label` — progressbar không tên là lỗi a11y (ARIA 1.2), gói không tự đặt tên
+     * chung chung thay app (giống `Progress`).
+     */
+    label?: string;
+    asChild?: boolean;
+}
+/**
+ * CircularProgress — tiến trình dạng VÒNG, cặp với `Progress` (dạng thanh) của gói.
+ * Ráp từ các phần (`CircularProgressIndicator` › `Track` + `Range`, `CircularProgressValueText`),
+ * hoặc dùng sẵn `CircularProgressCombined`.
+ *
+ * Phần đã chạy là `text-primary-ink`, cùng bậc với thanh `Progress`; rãnh xám trung tính. Đổi tông
+ * thì truyền bậc INK cho `CircularProgressRange` (vd `className="text-success-ink"`), không phải
+ * token tô nền `text-success` — rãnh không cần đổi theo (số đo ở `CircularProgressTrack`).
+ *
+ * ⚠ Trạng thái không xác định cần `--animate-spin-around` + `@keyframes spin-around` trong
+ * styles.css; thiếu thì vòng đứng yên ở một cung 25% (không lỗi, không cảnh báo).
+ */
+declare function CircularProgress(props: CircularProgressProps): React.JSX.Element;
+declare function CircularProgressIndicator(props: React.ComponentProps<"svg">): React.JSX.Element;
+declare namespace CircularProgressIndicator {
+    var displayName: string;
+}
+declare function CircularProgressTrack(props: React.ComponentProps<"circle">): React.JSX.Element;
+declare function CircularProgressRange(props: React.ComponentProps<"circle">): React.JSX.Element;
+interface CircularProgressValueTextProps extends React.ComponentProps<"span"> {
+    asChild?: boolean;
+}
+declare function CircularProgressValueText(props: CircularProgressValueTextProps): React.JSX.Element;
+declare function CircularProgressCombined(props: CircularProgressProps): React.JSX.Element;
+
+export { CircularProgress, CircularProgressCombined, CircularProgressIndicator, type CircularProgressProps, CircularProgressRange, CircularProgressTrack, CircularProgressValueText, type CircularProgressValueTextProps };