@godxjp/ui 19.5.0 → 20.0.0

package/dist/components/data-display/card.d.ts

@@ -87,13 +87,13 @@ export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttr
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Top border + symmetric action band — form Save/Cancel, table summary. */
     separated?: boolean;
-    /** Full-bleed footer (Ant Design `actions` bar). */
+    /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
 };
 export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /** Top border + symmetric action band — form Save/Cancel, table summary. */
     separated?: boolean;
-    /** Full-bleed footer (Ant Design `actions` bar). */
+    /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/data-display/collapsible.d.ts

@@ -1,4 +1,23 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+import * as React from "react";
+interface CollapsibleProps extends React.ComponentPropsWithRef<"div"> {
+    /** Trạng thái mở, có kiểm soát. */
+    open?: boolean;
+    /** Trạng thái mở ban đầu khi không kiểm soát. */
+    defaultOpen?: boolean;
+    /** Gọi khi trạng thái mở/đóng đổi. */
+    onOpenChange?: (open: boolean) => void;
+    /** Khoá trigger; `data-disabled` được phát ra để CSS bám vào. */
+    disabled?: boolean;
+}
+export declare function Collapsible({ open, defaultOpen, onOpenChange, disabled, children, ref, ...props }: CollapsibleProps): React.JSX.Element;
+interface CollapsibleTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function CollapsibleTrigger({ asChild, onClick, disabled, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+interface CollapsibleContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ nội dung trong DOM cả khi đóng. */
+    forceMount?: true;
+}
+export declare function CollapsibleContent({ forceMount, children, ref, ...props }: CollapsibleContentProps): React.JSX.Element;
+export {};

package/dist/components/data-display/collapsible.js

@@ -1,8 +1,123 @@
 "use client";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { chain, mergeRefs } from "@react-aria/utils";
+import {
+  ButtonContext,
+  Disclosure,
+  DisclosurePanel,
+  DisclosureStateContext,
+  useSlottedContext
+} from "react-aria-components";
+import { Slot } from "../../lib/slot.js";
+function Collapsible({
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      isExpanded: open,
+      defaultExpanded: defaultOpen,
+      onExpandedChange: onOpenChange,
+      isDisabled: disabled,
+      render: (racProps, { isExpanded }) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": isExpanded ? "open" : "closed",
+            "data-disabled": disabled ? "" : void 0,
+            children
+          }
+        );
+      }
+    }
+  );
+}
+function CollapsibleTrigger({
+  asChild,
+  onClick,
+  disabled,
+  ...props
+}) {
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const state = React.useContext(DisclosureStateContext);
+  if (!trigger || !state) {
+    throw new Error("`CollapsibleTrigger` ph\u1EA3i n\u1EB1m trong `Collapsible`.");
+  }
+  const isDisabled = disabled ?? trigger.isDisabled ?? false;
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      id: trigger.id,
+      "aria-controls": state.isExpanded ? trigger["aria-controls"] : void 0,
+      "aria-expanded": state.isExpanded,
+      "data-state": state.isExpanded ? "open" : "closed",
+      "data-disabled": isDisabled ? "" : void 0,
+      disabled: isDisabled,
+      ...props,
+      onClick: chain(onClick, () => {
+        if (!isDisabled) {
+          state.toggle();
+        }
+      })
+    }
+  );
+}
+function CollapsibleContent({
+  forceMount,
+  children,
+  ref,
+  ...props
+}) {
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const state = React.useContext(DisclosureStateContext);
+  if (!state) {
+    throw new Error("`CollapsibleContent` ph\u1EA3i n\u1EB1m trong `Collapsible`.");
+  }
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          children: _racChildren,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": state.isExpanded ? "open" : "closed",
+            "data-disabled": trigger?.isDisabled ? "" : void 0,
+            children: state.isExpanded || forceMount ? children : null
+          }
+        );
+      },
+      children: null
+    }
+  );
+}
 export {
   Collapsible,
   CollapsibleContent,

package/dist/components/data-display/index.d.ts

@@ -1,5 +1,7 @@
 export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps } from "./badge.js";
+export { Legend } from "./legend.js";
+export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";
@@ -23,7 +25,7 @@ export { CodeBlock } from "./code-block.js";
 export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
 export { Prose } from "./prose.js";
 export type { ProseProp, ProseProps } from "./prose.js";
-export type { ProgressProps, ProgressTone } from "./progress.js";
+export type { ProgressProps, ProgressSegment, ProgressTone } from "./progress.js";
 export { TreeList } from "./tree-list.js";
 export type { TreeListItem, TreeListProps } from "./tree-list.js";
 export { Timeline } from "./timeline.js";

package/dist/components/data-display/index.js

@@ -1,4 +1,5 @@
 import { Badge, StatusBadge } from "./badge.js";
+import { Legend } from "./legend.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
@@ -88,6 +89,7 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  Legend,
   ListRow,
   PermissionMatrix,
   Popover,

package/dist/components/data-display/legend.d.ts

@@ -0,0 +1,15 @@
+import type { LegendProp } from "../../props/components/data-display.prop.js";
+export type { LegendItemProp, LegendProp, LegendProp as LegendProps } from "../../props/components/data-display.prop.js";
+/**
+ * Legend — the KEY for a set of tones: which colour means what.
+ *
+ * Pair it with anything that encodes meaning as colour and cannot repeat the words on every mark:
+ * a `Progress` breakdown, a chart, a status column. It is the reason a colour-coded surface can
+ * satisfy WCAG 1.4.1 — the tone is never the only carrier of the meaning, because the key spells
+ * it out once in words.
+ *
+ * The swatch is `aria-hidden`: it is the same information as the label beside it, and a screen
+ * reader announcing "square, overdue" twice per key is noise. What reaches assistive tech is a
+ * plain list of the labels, which is exactly what the key says.
+ */
+export declare function Legend({ items, className, ...props }: LegendProp): import("react").JSX.Element;

package/dist/components/data-display/legend.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Legend({ items, className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("ui-legend", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "ui-legend-item", children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-legend-swatch", "data-tone": item.tone, "aria-hidden": "true" }),
+    item.label
+  ] }, index)) });
+}
+export {
+  Legend
+};

package/dist/components/data-display/list-row.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";

package/dist/components/data-display/popover.d.ts

@@ -1,9 +1,28 @@
 import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { FlushProp } from "../../props/vocabulary/index.js";
-export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
-export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
-export declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+interface PopoverProps {
+    /** Trạng thái mở, có kiểm soát. */
+    open?: boolean;
+    /** Trạng thái mở ban đầu khi không kiểm soát. */
+    defaultOpen?: boolean;
+    /** Gọi khi trạng thái mở/đóng đổi. */
+    onOpenChange?: (open: boolean) => void;
+    /** Khoá tương tác ngoài panel và giam tiêu điểm, đúng như `modal` của Radix. */
+    modal?: boolean;
+}
+export declare function Popover({ open, defaultOpen, onOpenChange, modal, children, }: React.PropsWithChildren<PopoverProps>): React.JSX.Element;
+interface PopoverTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function PopoverTrigger({ asChild, onClick, ref, ...props }: PopoverTriggerProps): React.JSX.Element;
+interface PopoverAnchorProps extends React.ComponentPropsWithRef<"span"> {
+    /** Mượn thẻ của con thay vì dựng `<span>` riêng. */
+    asChild?: boolean;
+}
+export declare function PopoverAnchor({ asChild, ref, ...props }: PopoverAnchorProps): React.JSX.Element;
 /**
  * The panel's CONTENT owns its inset — a Command list, a menu or a table that must run edge to
  * edge and draw its own separators across the full width. The popover drops its own padding by
@@ -14,7 +33,41 @@ export declare function PopoverAnchor(props: React.ComponentProps<typeof Popover
 type PopoverContentFlush = {
     flush?: FlushProp;
 };
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & PopoverContentFlush & React.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, PopoverContentFlush {
+    /** Cạnh của trigger mà panel bám vào. */
+    side?: Side;
+    /** Canh panel theo cạnh của trigger. */
+    align?: Align;
+    /** Khoảng cách theo trục chính, tính bằng px. */
+    sideOffset?: number;
+    /** Khoảng cách theo trục phụ, tính bằng px. */
+    alignOffset?: number;
+    /** Lật panel sang cạnh đối diện khi hết chỗ. */
+    avoidCollisions?: boolean;
+    /** Khoảng chừa với mép khung nhìn. RAC chỉ nhận một số; object lấy cạnh lớn nhất. */
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    sticky?: "partial" | "always";
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    hideWhenDetached?: boolean;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    forceMount?: true;
+    /**
+     * Chặn việc panel tự lấy tiêu điểm khi mở, bằng `event.preventDefault()`.
+     *
+     * Năm picker trong kho dựa vào đúng điều này để giữ tiêu điểm ở ô nhập, nên hành vi được chép
+     * tay từ Radix chứ không bỏ.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+    /**
+     * Chặn việc trả tiêu điểm về nơi nó đứng trước khi panel mở, bằng `event.preventDefault()`.
+     *
+     * Phát ở MỌI đường đóng (chọn một mục, Escape, bấm ra ngoài, Tab ra ngoài), nên consumer đưa
+     * được tiêu điểm tới đúng chỗ người dùng cần gõ tiếp thay vì để nó quay về trigger.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;

package/dist/components/data-display/popover.js

@@ -1,38 +1,217 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Popover as AriaPopover } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
-function Popover(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+import { Slot } from "../../lib/slot.js";
+import { useOverlayCloseFocus } from "../feedback/overlay-close-focus.js";
+function toPlacement(side, align) {
+  if (align === "center") return side;
+  if (side === "top" || side === "bottom") return `${side} ${align}`;
+  return `${side} ${align === "start" ? "top" : "bottom"}`;
 }
-function PopoverTrigger(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+function toContainerPadding(padding) {
+  if (padding == null) return void 0;
+  if (typeof padding === "number") return padding;
+  const sides = Object.values(padding).filter(
+    (value) => typeof value === "number"
+  );
+  return sides.length ? Math.max(...sides) : void 0;
 }
-function PopoverAnchor(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+function firstTabbable(container) {
+  for (const node of container.querySelectorAll("*")) {
+    if (node.tagName === "A") continue;
+    if (node.hidden || node.disabled) continue;
+    if (node.tagName === "INPUT" && node.type === "hidden") continue;
+    if (node.tabIndex >= 0) return node;
+  }
+  return null;
 }
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, flush, style, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    "data-slot": "popover-content",
-    "data-flush": flush ? "" : void 0,
-    align,
-    sideOffset,
-    style: flush ? { ...style, "--popover-space-inset": "0" } : style,
-    className: cn(
-      "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
+const PopoverRootContext = React.createContext(null);
+function usePopoverRoot(component) {
+  const context = React.useContext(PopoverRootContext);
+  if (!context) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`Popover\`.`);
   }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+  return context;
+}
+function Popover({
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const [anchored, setAnchored] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
+  const contentId = React.useId();
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (open === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const value = React.useMemo(
+    () => ({
+      open: isOpen,
+      setOpen,
+      contentId,
+      isNonModal: !modal,
+      triggerRef,
+      anchorRef,
+      anchored,
+      setAnchored
+    }),
+    [isOpen, setOpen, contentId, modal, anchored]
+  );
+  return /* @__PURE__ */ jsx(PopoverRootContext.Provider, { value, children });
+}
+function PopoverTrigger({ asChild, onClick, ref, ...props }) {
+  const root = usePopoverRoot("PopoverTrigger");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "popover-trigger",
+      "aria-haspopup": "dialog",
+      "aria-expanded": root.open,
+      "aria-controls": root.open ? root.contentId : void 0,
+      "data-state": root.open ? "open" : "closed",
+      ...props,
+      ref: mergeRefs(ref, root.triggerRef),
+      onClick: chain(onClick, () => root.setOpen(!root.open))
+    }
+  );
+}
+function PopoverAnchor({ asChild, ref, ...props }) {
+  const root = usePopoverRoot("PopoverAnchor");
+  const Comp = asChild ? Slot : "span";
+  const { setAnchored } = root;
+  React.useEffect(() => {
+    setAnchored(true);
+    return () => setAnchored(false);
+  }, [setAnchored]);
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "popover-anchor", ...props, ref: mergeRefs(ref, root.anchorRef) });
+}
+function PopoverContent({
+  className,
+  style,
+  children,
+  ref,
+  flush,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset,
+  avoidCollisions = true,
+  collisionPadding,
+  sticky: _sticky,
+  hideWhenDetached: _hideWhenDetached,
+  forceMount: _forceMount,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  ...props
+}) {
+  const root = usePopoverRoot("PopoverContent");
+  const contentRef = React.useRef(null);
+  const openAutoFocusRef = React.useRef(onOpenAutoFocus);
+  openAutoFocusRef.current = onOpenAutoFocus;
+  useOverlayCloseFocus(root.open, onCloseAutoFocus, contentRef);
+  React.useEffect(() => {
+    if (!root.open) return;
+    const node = contentRef.current;
+    if (!node) return;
+    const event = new Event("popover.openAutoFocus", { bubbles: false, cancelable: true });
+    openAutoFocusRef.current?.(event);
+    if (!event.defaultPrevented) {
+      const target = firstTabbable(node);
+      target?.focus({ preventScroll: true });
+      if (!node.contains(document.activeElement)) {
+        node.focus({ preventScroll: true });
+      }
+    }
+  }, [root.open]);
+  const { open, setOpen, triggerRef } = root;
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (contentRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, setOpen, triggerRef]);
+  return /* @__PURE__ */ jsx(
+    AriaPopover,
+    {
+      isOpen: root.open,
+      onOpenChange: root.setOpen,
+      isNonModal: root.isNonModal,
+      triggerRef: root.anchored ? root.anchorRef : root.triggerRef,
+      placement: toPlacement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: toContainerPadding(collisionPadding),
+      render: (racProps, { isExiting }) => {
+        const {
+          className: _racClassName,
+          "data-rac": _rac,
+          ref: racRef,
+          style: racStyle,
+          ...rest
+        } = racProps;
+        const availableHeight = racStyle?.maxHeight;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            id: root.contentId,
+            role: "dialog",
+            tabIndex: -1,
+            "data-slot": "popover-content",
+            "data-side": side,
+            "data-align": align,
+            "data-state": isExiting ? "closed" : "open",
+            "data-flush": flush ? "" : void 0,
+            ...props,
+            ref: mergeRefs(ref, racRef, contentRef),
+            className: cn(
+              "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              className
+            ),
+            style: {
+              ...racStyle,
+              "--radix-popover-trigger-width": "var(--trigger-width)",
+              "--radix-popover-content-transform-origin": "var(--trigger-anchor-point)",
+              ...availableHeight == null ? null : {
+                "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight
+              },
+              ...style,
+              ...flush ? { "--popover-space-inset": "0" } : null
+            },
+            children
+          }
+        );
+      }
+    }
+  );
+}
 const PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-header", className: cn("ui-popover-header", className), ...props });
 const PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
 const PopoverDescription = ({

package/dist/components/data-display/progress.d.ts

@@ -1,8 +1,29 @@
 import * as React from "react";
 export type ProgressTone = "success" | "warning" | "destructive";
-export type ProgressProps = {
+/**
+ * One slice of a BREAKDOWN bar — how much of the total this state holds, in the SAME unit as every
+ * other slice (counts, bytes, yen). Never a percentage: the bar owns the ratio arithmetic, so the
+ * caller never has to round three numbers that must still add up to 100.
+ *
+ * `label` is not decoration. Colour alone cannot carry the meaning of a slice (WCAG 1.4.1), and it
+ * is the only thing a screen reader has to say about it, so it is required.
+ */
+export type ProgressSegment = {
     value: number;
+    tone: ProgressTone;
+    label: string;
+};
+type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext"> & {
+    /**
+     * Visible caption under the bar; it also becomes the bar's accessible name. Omit it and the bar
+     * falls back to the catalogue name — or to whatever `aria-label`/`aria-labelledby` the caller
+     * passes, which is how a bar gets its name from a heading that is already on screen.
+     */
     label?: string;
+};
+/** A METER: one ratio of one whole. */
+type ProgressMeterProps = ProgressBase & {
+    value: number;
     tone?: ProgressTone;
     /**
      * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
@@ -11,5 +32,32 @@ export type ProgressProps = {
      * real ratio.
      */
     over?: boolean;
+    segments?: never;
+};
+/**
+ * A BREAKDOWN: one whole split into its states.
+ *
+ * ## Why this is not a meter with three calls
+ *
+ * A meter answers "how far along?" and has ONE value, so `role="progressbar"` fits it exactly.
+ * A breakdown answers "what is this total made of?" — 2 overdue · 3 due soon · 12 done. Stacking
+ * three progressbars says the wrong thing three times over (three separate 0–100 measurements),
+ * and no ARIA value pattern models a partition. It is a picture of data, so it names itself once
+ * as `role="img"` and reads out every slice with its own label and amount.
+ *
+ * ## Why it is a taller bar than the meter
+ *
+ * A 0.5rem pill is legible when it carries one fill against one track. Three abutting fills at
+ * that height read as a coloured hairline — the ratios, which are the entire point, stop being
+ * comparable. So the breakdown takes its own block size and corner, both retunable
+ * (`--progress-breakdown-*`).
+ */
+type ProgressBreakdownProps = ProgressBase & {
+    segments: ProgressSegment[];
+    value?: never;
+    tone?: never;
+    over?: never;
 };
-export declare function Progress({ value, label, tone, over }: ProgressProps): React.JSX.Element;
+export type ProgressProps = ProgressMeterProps | ProgressBreakdownProps;
+export declare function Progress(props: ProgressProps): React.JSX.Element;
+export {};