@verdify/ui 0.1.0

package/dist/components/pagination/pagination.variants.js

@@ -0,0 +1,63 @@
+import { cva } from "class-variance-authority";
+const paginationNavClass = "bg-surface-canvas py-(--space-2)";
+const paginationListClass = "flex flex-wrap items-center gap-(--space-4)";
+const paginationItemClass = "inline-flex items-center";
+const paginationControlVariants = cva(
+  [
+    // type ROLE + shape + the icon-to-label gap; logical inline padding so it mirrors under RTL
+    "inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)",
+    "text-label font-medium select-none",
+    // resting state — enabled, non-current: secondary label, no fill, pointer cursor
+    "cursor-pointer text-text-secondary",
+    // hover: the restrained ghost fill (the only fill a non-current control paints)
+    "hover:bg-action-ghost-bg-hover",
+    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)
+    "transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // target-size floor — 44px touch / 40px pointer, on every control (spec §7, 2.5.8)
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // disabled prev/next — DEC-C: dim via the disabled TOKEN for BOTH the native-button form
+    // (`disabled`) and the link form (`aria-disabled`), never a blanket opacity. The component
+    // also strips href + tabindex on a disabled link so it cannot navigate or be tabbed to.
+    "disabled:pointer-events-none disabled:text-text-disabled",
+    "aria-disabled:pointer-events-none aria-disabled:text-text-disabled"
+  ],
+  {
+    variants: {
+      // STATE axis (spec §4): the current page is the only control carrying the brand action fill.
+      current: {
+        true: [
+          // the current page: brand action accent (where you are in the set), non-navigating.
+          // This is the action(primary) alias, NEVER status-verified (brand != state, G-U2).
+          "bg-action-primary-bg text-action-primary-fg",
+          // the current page is not a control: no hover fill, no pointer
+          "cursor-default hover:bg-action-primary-bg"
+        ],
+        false: ""
+      },
+      // SIZE axis (spec §3, DEC-B): both sizes hold the shared target-size floor above; sm differs
+      // only by density (tighter vertical padding) below the type role, never a height below the floor.
+      size: {
+        md: "py-(--space-2)",
+        sm: "py-(--space-1)"
+      }
+    },
+    defaultVariants: { current: false, size: "md" }
+  }
+);
+const paginationIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center";
+const paginationStatusClass = "inline-flex items-center px-(--space-2) text-label text-text-secondary select-none";
+const paginationEllipsisClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+export {
+  paginationControlVariants,
+  paginationEllipsisClass,
+  paginationIconClass,
+  paginationItemClass,
+  paginationListClass,
+  paginationNavClass,
+  paginationStatusClass
+};
+//# sourceMappingURL=pagination.variants.js.map

package/dist/components/pagination/pagination.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/pagination.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Pagination is a row of standard links/buttons inside a labeled navigation landmark (spec §7):\n// there is no APG \"pagination\" widget. Brand and status colors are accents — NEUTRALS carry the\n// surface (spec §3). The one accent the pager paints is on the CURRENT page, and that accent is\n// the primary ACTION (brand) alias, never a status color: a current page reports where you are in\n// the set, not a verification result, so it binds nothing from the status tier (brand != state,\n// G-U2). The set paints from the text, action(primary + ghost), border, and surface aliases only\n// (spec §5).\n\n// The nav landmark wrapping the control set. A neutral canvas surface with logical-property block\n// padding so the row mirrors under dir=\"rtl\" (G-U6). The optional divider above the set (spec §5,\n// border-default) is a caller decision applied via className, not a default binding.\nexport const paginationNavClass = \"bg-surface-canvas py-(--space-2)\";\n\n// The control list. An inline row of items with the inter-control gap; wraps when narrow. The\n// list carries no text color — each control sets its own.\nexport const paginationListClass =\n  \"flex flex-wrap items-center gap-(--space-4)\";\n\n// A single item (the <li>). Inline so the control sits in the row.\nexport const paginationItemClass = \"inline-flex items-center\";\n\n// A page / prev / next control (spec §4). At rest, an enabled non-current control is the label\n// type role in the SECONDARY text color with NO fill; on hover it takes the restrained ghost fill\n// (the only fill a non-current control paints) and the cursor is a pointer. The CURRENT page lifts\n// its label to the primary action FG on the primary action BG and does not navigate — this accent\n// is the BRAND action alias (where you are), never a status. The focus ring is part of the base on\n// every state, never removed. Motion is the fast token transition on the verdify easing, collapsing\n// to the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration (a page turning is a plain wait, G-U3). A disabled prev/next dims via the disabled TOKEN\n// (DEC-C): native `disabled:` for a button-form control and `aria-disabled:` for a link-form one\n// (an <a> has no native disabled), never a blanket opacity.\nexport const paginationControlVariants = cva(\n  [\n    // type ROLE + shape + the icon-to-label gap; logical inline padding so it mirrors under RTL\n    \"inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)\",\n    \"text-label font-medium select-none\",\n    // resting state — enabled, non-current: secondary label, no fill, pointer cursor\n    \"cursor-pointer text-text-secondary\",\n    // hover: the restrained ghost fill (the only fill a non-current control paints)\n    \"hover:bg-action-ghost-bg-hover\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer, on every control (spec §7, 2.5.8)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled prev/next — DEC-C: dim via the disabled TOKEN for BOTH the native-button form\n    // (`disabled`) and the link form (`aria-disabled`), never a blanket opacity. The component\n    // also strips href + tabindex on a disabled link so it cannot navigate or be tabbed to.\n    \"disabled:pointer-events-none disabled:text-text-disabled\",\n    \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled\",\n  ],\n  {\n    variants: {\n      // STATE axis (spec §4): the current page is the only control carrying the brand action fill.\n      current: {\n        true: [\n          // the current page: brand action accent (where you are in the set), non-navigating.\n          // This is the action(primary) alias, NEVER status-verified (brand != state, G-U2).\n          \"bg-action-primary-bg text-action-primary-fg\",\n          // the current page is not a control: no hover fill, no pointer\n          \"cursor-default hover:bg-action-primary-bg\",\n        ],\n        false: \"\",\n      },\n      // SIZE axis (spec §3, DEC-B): both sizes hold the shared target-size floor above; sm differs\n      // only by density (tighter vertical padding) below the type role, never a height below the floor.\n      size: {\n        md: \"py-(--space-2)\",\n        sm: \"py-(--space-1)\",\n      },\n    },\n    defaultVariants: { current: false, size: \"md\" },\n  },\n);\n\nexport type PaginationControlVariantProps = VariantProps<typeof paginationControlVariants>;\n\n// The prev/next direction icon (spec §5): the sm icon role, decorative (the control names its\n// direction via aria-label, not the glyph). Inherits the control's current text color.\nexport const paginationIconClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The \"Page m of n\" readout for the prev-next variant (spec §3): plain text in the secondary\n// color at the label type role. Not a control — a non-interactive status of position in the set.\nexport const paginationStatusClass =\n  \"inline-flex items-center px-(--space-2) text-label text-text-secondary select-none\";\n\n// The ellipsis gap (spec §2/§7): a DECORATIVE, non-interactive stand-in for a run of hidden page\n// controls, in the muted text color at the sm icon role. Removed from the a11y tree + tab order by\n// the component (aria-hidden); it is never a stop.\nexport const paginationEllipsisClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAahC,MAAM,qBAAqB;AAI3B,MAAM,sBACX;AAGK,MAAM,sBAAsB;AAY5B,MAAM,4BAA4B;AAAA,EACvC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,UAGJ;AAAA;AAAA,UAEA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,MACT;AAAA;AAAA;AAAA,MAGA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,OAAO,MAAM,KAAK;AAAA,EAChD;AACF;AAMO,MAAM,sBACX;AAIK,MAAM,wBACX;AAKK,MAAM,0BACX;","names":[]}

package/dist/components/popover/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverBody, PopoverClose, PopoverArrow, type PopoverProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverHeaderProps, type PopoverTitleProps, type PopoverBodyProps, type PopoverCloseProps, type PopoverArrowProps, } from "./popover";
+export { popoverTriggerClass, popoverPanelClass, popoverHeaderClass, popoverTitleClass, popoverBodyClass, popoverArrowClass, popoverCloseClass, popoverCloseGlyphClass, } from "./popover.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC"}

package/dist/components/popover/index.js

@@ -0,0 +1,39 @@
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverBody,
+  PopoverClose,
+  PopoverArrow
+} from "./popover";
+import {
+  popoverTriggerClass,
+  popoverPanelClass,
+  popoverHeaderClass,
+  popoverTitleClass,
+  popoverBodyClass,
+  popoverArrowClass,
+  popoverCloseClass,
+  popoverCloseGlyphClass
+} from "./popover.variants";
+export {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+  popoverArrowClass,
+  popoverBodyClass,
+  popoverCloseClass,
+  popoverCloseGlyphClass,
+  popoverHeaderClass,
+  popoverPanelClass,
+  popoverTitleClass,
+  popoverTriggerClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["export {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverBody,\n  PopoverClose,\n  PopoverArrow,\n  type PopoverProps,\n  type PopoverTriggerProps,\n  type PopoverContentProps,\n  type PopoverHeaderProps,\n  type PopoverTitleProps,\n  type PopoverBodyProps,\n  type PopoverCloseProps,\n  type PopoverArrowProps,\n} from \"./popover\";\nexport {\n  popoverTriggerClass,\n  popoverPanelClass,\n  popoverHeaderClass,\n  popoverTitleClass,\n  popoverBodyClass,\n  popoverArrowClass,\n  popoverCloseClass,\n  popoverCloseGlyphClass,\n} from \"./popover.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OASK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+export interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+}
+/**
+ * Popover is a small, NON-MODAL surface that a trigger opens next to itself to hold secondary
+ * content — a short form, a definition, a set of related controls, a detail card — without leaving
+ * the page (spec §1). Reach for it when the content is too rich for a Tooltip's plain label yet too
+ * small to interrupt the page with a Dialog or a Sheet. The page behind a popover stays LIVE: it is
+ * not dimmed, focus is not trapped, and you can keep working around it.
+ *
+ * It is a NEUTRAL surface (spec §3): the panel, arrow, and border are neutral, and the brand violet
+ * never tints the panel to look "premium." Color enters only through the components placed inside it
+ * — a primary Button, a VerifiedBadge — never on the panel or arrow themselves (brand != state).
+ *
+ * Wraps the Radix Popover primitive (WAI-ARIA disclosure pattern, NON-MODAL: `modal` defaults to
+ * `false`, so the page is not made inert and Tab leaves the panel rather than cycling inside it). A
+ * stateful primitive, so this file is `'use client'`.
+ */
+export declare function Popover({ children, ...rootProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> {
+}
+/**
+ * The control that opens the popover (spec §2 trigger): the one stop in the page tab order for this
+ * control, carrying the 2px focus ring. Radix sets `aria-expanded` (the single source of truth for
+ * open vs. closed, spec §7) and `aria-controls` (pointing at the panel) for you. Pass `asChild` to
+ * wrap your own Button so the trigger inherits its role, keyboard, and focus ring rather than nesting
+ * a second button; the bare (non-`asChild`) form renders the default neutral-ghost trigger.
+ */
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    /** Render the optional decorative arrow joining the panel to its trigger (spec §2 arrow). Default `false`. */
+    arrow?: boolean;
+}
+/**
+ * Renders the portal and the panel (spec §2 panel): the floating NEUTRAL raised surface that opens
+ * on activation, raised above the page on the POPOVER layer and anchored to the trigger, repositioning
+ * to stay in the viewport (Radix). It is NON-MODAL — NO scrim, NO `aria-modal`, NO focus-trap — the
+ * page behind stays live and Tab leaves the panel rather than cycling inside it, so the popover is
+ * never a keyboard trap (spec §7, 2.1.2). On open, Radix moves focus INTO the panel (to the first
+ * focusable control, or to the panel container when it has none); on close — by Escape, the close
+ * control, the trigger toggle, or a click away — focus returns to the trigger (spec §6/§7).
+ *
+ * When the panel carries a `PopoverTitle`, the panel takes `role="dialog"` and is named by the title
+ * via `aria-labelledby` (spec §7: the only dialog-role case — a short modal-like task WITH a title);
+ * an untitled panel stays a generic container with no role. Even titled it never sets `aria-modal`,
+ * because the popover is non-modal. The open/close is the FAST motion duration and a plain fade,
+ * instant under `prefers-reduced-motion` — never the deliberate "check" duration (spec §4, G-U3).
+ */
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The top region: a short title and the optional close control on the inline-end (spec §2 header). */
+export declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * Names the panel in one short statement, sentence case (spec §2 header title). When present it IS
+ * the panel's accessible name: it generates a stable id and registers it with the Popover so the
+ * panel takes `role="dialog"` + `aria-labelledby` (spec §7). Rendered as an `<h2>` by default at the
+ * panel's title type role; pass `as`/override via props if a different heading level fits the page
+ * outline.
+ */
+export declare const PopoverTitle: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The content region (spec §2 body): text, a short form, or a few controls. Keep it small — content
+ * that needs to scroll usually belongs in a Sheet (spec §2). Body text is the body type role in the
+ * secondary text color (spec §5).
+ */
+export declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close> {
+}
+/**
+ * The in-panel dismiss control (spec §2 close): closing returns focus to the trigger (Radix). A
+ * popover with no in-panel close is still dismissible by Escape and by clicking away (spec §2/§6).
+ * Two forms, both proven by the tests:
+ *  - default (no children): the styled neutral-ghost icon-button for the header — pass an
+ *    `aria-label` (e.g. "Close"), since the glyph is decorative and the placeholder is never a name.
+ *  - `asChild`: wrap your own control so it also dismisses without nesting a second button.
+ */
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The optional decorative arrow joining the panel to its trigger (spec §2 arrow). It carries the
+ * panel's neutral surface fill, never a brand or status color, and is hidden from assistive
+ * technology (Radix renders it inside an aria-hidden wrapper). Usually rendered for you by
+ * `PopoverContent`'s `arrow` prop; exported for direct composition.
+ */
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export type PopoverArrowProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>;
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA8BvD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;CAAG;AAEzE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,YAAY,2CAU/D;AAED,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;CAAG;AAE5E;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,+FAYzB,CAAC;AAEH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IACvE,8GAA8G;IAC9G,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,4FAoCzB,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEnF,uGAAuG;AACvG,eAAO,MAAM,aAAa,2FAIzB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAEtF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,8FAexB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF;;;;GAIG;AACH,eAAO,MAAM,WAAW,yFAIvB,CAAC;AAoBF,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC;CAAG;AAE1E;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,6FAoBvB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,YAAY,4JAcvB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAC5D,OAAO,gBAAgB,CAAC,KAAK,CAC9B,CAAC"}

package/dist/components/popover/popover.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  popoverTriggerClass,
+  popoverPanelClass,
+  popoverHeaderClass,
+  popoverTitleClass,
+  popoverBodyClass,
+  popoverArrowClass,
+  popoverCloseClass,
+  popoverCloseGlyphClass
+} from "./popover.variants";
+const PopoverContext = React.createContext({
+  titleId: void 0,
+  setTitleId: () => {
+  }
+});
+function Popover({ children, ...rootProps }) {
+  const [titleId, setTitleId] = React.useState(void 0);
+  const value = React.useMemo(() => ({ titleId, setTitleId }), [titleId]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...rootProps, children }) });
+}
+const PopoverTrigger = React.forwardRef(function PopoverTrigger2({ className, asChild, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Trigger,
+    {
+      ref,
+      asChild,
+      className: asChild ? className : cn(popoverTriggerClass, className),
+      ...props
+    }
+  );
+});
+const PopoverContent = React.forwardRef(function PopoverContent2({ className, children, sideOffset = 6, arrow = false, ...props }, ref) {
+  const { titleId } = React.useContext(PopoverContext);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      role: titleId ? "dialog" : void 0,
+      "aria-labelledby": titleId,
+      className: cn(popoverPanelClass, className),
+      ...props,
+      children: [
+        children,
+        arrow ? /* @__PURE__ */ jsx(
+          PopoverPrimitive.Arrow,
+          {
+            "data-testid": "popover-arrow",
+            "aria-hidden": "true",
+            className: popoverArrowClass
+          }
+        ) : null
+      ]
+    }
+  ) });
+});
+const PopoverHeader = React.forwardRef(
+  function PopoverHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(popoverHeaderClass, className), ...props });
+  }
+);
+const PopoverTitle = React.forwardRef(
+  function PopoverTitle2({ className, id, ...props }, ref) {
+    const ctx = React.useContext(PopoverContext);
+    const generatedId = React.useId();
+    const titleId = id ?? generatedId;
+    React.useEffect(() => {
+      ctx.setTitleId(titleId);
+      return () => ctx.setTitleId(void 0);
+    }, [ctx, titleId]);
+    return /* @__PURE__ */ jsx("h2", { ref, id: titleId, className: cn(popoverTitleClass, className), ...props });
+  }
+);
+const PopoverBody = React.forwardRef(
+  function PopoverBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(popoverBodyClass, className), ...props });
+  }
+);
+function CloseGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "popover-close-glyph",
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: popoverCloseGlyphClass,
+      children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+const PopoverClose = React.forwardRef(function PopoverClose2({ className, children, asChild, ...props }, ref) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(PopoverPrimitive.Close, { ref, asChild: true, className, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Close,
+    {
+      ref,
+      className: cn(popoverCloseClass, className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(CloseGlyph, {})
+    }
+  );
+});
+const PopoverArrow = React.forwardRef(function PopoverArrow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Arrow,
+    {
+      ref,
+      "data-testid": "popover-arrow",
+      "aria-hidden": "true",
+      className: cn(popoverArrowClass, className),
+      ...props
+    }
+  );
+});
+export {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  popoverTriggerClass,\n  popoverPanelClass,\n  popoverHeaderClass,\n  popoverTitleClass,\n  popoverBodyClass,\n  popoverArrowClass,\n  popoverCloseClass,\n  popoverCloseGlyphClass,\n} from \"./popover.variants\";\n\n// Radix Popover has no Title primitive (unlike Dialog), so it never auto-wires aria-labelledby and\n// never sets role=\"dialog\" on the panel. The spec §7 makes the panel a GENERIC container by default\n// and only role=\"dialog\" + aria-labelledby WHEN the panel carries a title (a short modal-like task\n// with a name). We hand-compose that: PopoverTitle registers its generated id into this context, and\n// PopoverContent reads the registered id to decide whether to set the dialog role + label. This is\n// the compound \"compose a role by hand when Radix can't express the spec's anatomy\" pattern (skill F)\n// and the named Radix-vs-spec deviation step — accept Radix's non-modal popover and add the labelling\n// the spec names on top of it, rather than abandoning the primitive.\ntype PopoverContextValue = {\n  titleId: string | undefined;\n  setTitleId: (id: string | undefined) => void;\n};\nconst PopoverContext = React.createContext<PopoverContextValue>({\n  titleId: undefined,\n  setTitleId: () => {},\n});\n\nexport interface PopoverProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\n/**\n * Popover is a small, NON-MODAL surface that a trigger opens next to itself to hold secondary\n * content — a short form, a definition, a set of related controls, a detail card — without leaving\n * the page (spec §1). Reach for it when the content is too rich for a Tooltip's plain label yet too\n * small to interrupt the page with a Dialog or a Sheet. The page behind a popover stays LIVE: it is\n * not dimmed, focus is not trapped, and you can keep working around it.\n *\n * It is a NEUTRAL surface (spec §3): the panel, arrow, and border are neutral, and the brand violet\n * never tints the panel to look \"premium.\" Color enters only through the components placed inside it\n * — a primary Button, a VerifiedBadge — never on the panel or arrow themselves (brand != state).\n *\n * Wraps the Radix Popover primitive (WAI-ARIA disclosure pattern, NON-MODAL: `modal` defaults to\n * `false`, so the page is not made inert and Tab leaves the panel rather than cycling inside it). A\n * stateful primitive, so this file is `'use client'`.\n */\nexport function Popover({ children, ...rootProps }: PopoverProps) {\n  const [titleId, setTitleId] = React.useState<string | undefined>(undefined);\n  const value = React.useMemo(() => ({ titleId, setTitleId }), [titleId]);\n  return (\n    <PopoverContext.Provider value={value}>\n      {/* `modal` is intentionally NOT set: Radix defaults it to false, which is exactly the spec's\n          non-modal contract — no scrim, no focus-trap, no inert siblings, Tab leaves the panel. */}\n      <PopoverPrimitive.Root {...rootProps}>{children}</PopoverPrimitive.Root>\n    </PopoverContext.Provider>\n  );\n}\n\nexport interface PopoverTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> {}\n\n/**\n * The control that opens the popover (spec §2 trigger): the one stop in the page tab order for this\n * control, carrying the 2px focus ring. Radix sets `aria-expanded` (the single source of truth for\n * open vs. closed, spec §7) and `aria-controls` (pointing at the panel) for you. Pass `asChild` to\n * wrap your own Button so the trigger inherits its role, keyboard, and focus ring rather than nesting\n * a second button; the bare (non-`asChild`) form renders the default neutral-ghost trigger.\n */\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, asChild, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      asChild={asChild}\n      className={asChild ? className : cn(popoverTriggerClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {\n  /** Render the optional decorative arrow joining the panel to its trigger (spec §2 arrow). Default `false`. */\n  arrow?: boolean;\n}\n\n/**\n * Renders the portal and the panel (spec §2 panel): the floating NEUTRAL raised surface that opens\n * on activation, raised above the page on the POPOVER layer and anchored to the trigger, repositioning\n * to stay in the viewport (Radix). It is NON-MODAL — NO scrim, NO `aria-modal`, NO focus-trap — the\n * page behind stays live and Tab leaves the panel rather than cycling inside it, so the popover is\n * never a keyboard trap (spec §7, 2.1.2). On open, Radix moves focus INTO the panel (to the first\n * focusable control, or to the panel container when it has none); on close — by Escape, the close\n * control, the trigger toggle, or a click away — focus returns to the trigger (spec §6/§7).\n *\n * When the panel carries a `PopoverTitle`, the panel takes `role=\"dialog\"` and is named by the title\n * via `aria-labelledby` (spec §7: the only dialog-role case — a short modal-like task WITH a title);\n * an untitled panel stays a generic container with no role. Even titled it never sets `aria-modal`,\n * because the popover is non-modal. The open/close is the FAST motion duration and a plain fade,\n * instant under `prefers-reduced-motion` — never the deliberate \"check\" duration (spec §4, G-U3).\n */\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, children, sideOffset = 6, arrow = false, ...props },\n  ref,\n) {\n  const { titleId } = React.useContext(PopoverContext);\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        // role=\"dialog\" + aria-labelledby ONLY when the panel carries a title (spec §7). Radix\n        // Popover does NOT emit either, so we set them by hand from the registered title id; an\n        // untitled panel is a plain generic container. aria-modal is NEVER set — the popover is\n        // non-modal (no focus-trap, no inert page), and a literal aria-modal would lie to AT.\n        role={titleId ? \"dialog\" : undefined}\n        aria-labelledby={titleId}\n        className={cn(popoverPanelClass, className)}\n        {...props}\n      >\n        {children}\n        {arrow ? (\n          <PopoverPrimitive.Arrow\n            data-testid=\"popover-arrow\"\n            // The arrow is purely DECORATIVE (spec §2/§7): Radix renders it as a bare <svg> with no\n            // role and no aria-hidden, so we set aria-hidden explicitly to keep it out of the AT tree\n            // per the frozen contract — the arrow carries no meaning the panel does not already.\n            aria-hidden=\"true\"\n            className={popoverArrowClass}\n          />\n        ) : null}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n});\n\nexport interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** The top region: a short title and the optional close control on the inline-end (spec §2 header). */\nexport const PopoverHeader = React.forwardRef<HTMLDivElement, PopoverHeaderProps>(\n  function PopoverHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(popoverHeaderClass, className)} {...props} />;\n  },\n);\n\nexport interface PopoverTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\n/**\n * Names the panel in one short statement, sentence case (spec §2 header title). When present it IS\n * the panel's accessible name: it generates a stable id and registers it with the Popover so the\n * panel takes `role=\"dialog\"` + `aria-labelledby` (spec §7). Rendered as an `<h2>` by default at the\n * panel's title type role; pass `as`/override via props if a different heading level fits the page\n * outline.\n */\nexport const PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(\n  function PopoverTitle({ className, id, ...props }, ref) {\n    const ctx = React.useContext(PopoverContext);\n    const generatedId = React.useId();\n    const titleId = id ?? generatedId;\n    // register this title's id so PopoverContent can name the panel + take the dialog role; clear it\n    // on unmount so a titled panel that loses its title reverts to a generic container.\n    React.useEffect(() => {\n      ctx.setTitleId(titleId);\n      return () => ctx.setTitleId(undefined);\n    }, [ctx, titleId]);\n    return (\n      <h2 ref={ref} id={titleId} className={cn(popoverTitleClass, className)} {...props} />\n    );\n  },\n);\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The content region (spec §2 body): text, a short form, or a few controls. Keep it small — content\n * that needs to scroll usually belongs in a Sheet (spec §2). Body text is the body type role in the\n * secondary text color (spec §5).\n */\nexport const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(\n  function PopoverBody({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(popoverBodyClass, className)} {...props} />;\n  },\n);\n\n// A neutral X glyph, --size-icon-md, drawn with currentColor so it inherits the close button's\n// ghost-fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nfunction CloseGlyph() {\n  return (\n    <svg\n      data-testid=\"popover-close-glyph\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={popoverCloseGlyphClass}\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport interface PopoverCloseProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close> {}\n\n/**\n * The in-panel dismiss control (spec §2 close): closing returns focus to the trigger (Radix). A\n * popover with no in-panel close is still dismissible by Escape and by clicking away (spec §2/§6).\n * Two forms, both proven by the tests:\n *  - default (no children): the styled neutral-ghost icon-button for the header — pass an\n *    `aria-label` (e.g. \"Close\"), since the glyph is decorative and the placeholder is never a name.\n *  - `asChild`: wrap your own control so it also dismisses without nesting a second button.\n */\nexport const PopoverClose = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Close>,\n  PopoverCloseProps\n>(function PopoverClose({ className, children, asChild, ...props }, ref) {\n  if (asChild) {\n    return (\n      <PopoverPrimitive.Close ref={ref} asChild className={className} {...props}>\n        {children}\n      </PopoverPrimitive.Close>\n    );\n  }\n  return (\n    <PopoverPrimitive.Close\n      ref={ref}\n      className={cn(popoverCloseClass, className)}\n      {...props}\n    >\n      {children ?? <CloseGlyph />}\n    </PopoverPrimitive.Close>\n  );\n});\n\n/**\n * The optional decorative arrow joining the panel to its trigger (spec §2 arrow). It carries the\n * panel's neutral surface fill, never a brand or status color, and is hidden from assistive\n * technology (Radix renders it inside an aria-hidden wrapper). Usually rendered for you by\n * `PopoverContent`'s `arrow` prop; exported for direct composition.\n */\nexport const PopoverArrow = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(function PopoverArrow({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Arrow\n      ref={ref}\n      data-testid=\"popover-arrow\"\n      // decorative — kept out of the AT tree per spec §2/§7 (Radix's bare arrow sets no aria-hidden)\n      aria-hidden=\"true\"\n      className={cn(popoverArrowClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport type PopoverArrowProps = React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Arrow\n>;\n"],"mappings":"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","names":["PopoverTrigger","PopoverContent","PopoverHeader","PopoverTitle","PopoverBody","PopoverClose","PopoverArrow"]}

package/dist/components/popover/popover.variants.d.ts

@@ -0,0 +1,9 @@
+export declare const popoverTriggerClass: string;
+export declare const popoverPanelClass: string;
+export declare const popoverHeaderClass = "flex items-start justify-between gap-(--space-3)";
+export declare const popoverTitleClass = "text-h3 text-text-primary";
+export declare const popoverBodyClass = "text-body text-text-secondary";
+export declare const popoverArrowClass = "fill-surface-raised";
+export declare const popoverCloseClass: string;
+export declare const popoverCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+//# sourceMappingURL=popover.variants.d.ts.map

package/dist/components/popover/popover.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.variants.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.variants.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,mBAAmB,QAQ4B,CAAC;AAc7D,eAAO,MAAM,iBAAiB,QAOmE,CAAC;AAIlG,eAAO,MAAM,kBAAkB,qDACqB,CAAC;AAKrD,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAK7D,eAAO,MAAM,gBAAgB,kCAAkC,CAAC;AAShE,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAOvD,eAAO,MAAM,iBAAiB,QAOmE,CAAC;AAIlG,eAAO,MAAM,sBAAsB,0CAA0C,CAAC"}

package/dist/components/popover/popover.variants.js

@@ -0,0 +1,19 @@
+const popoverTriggerClass = "inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-3) text-label text-action-ghost-fg cursor-pointer select-none hover:bg-action-ghost-bg-hover transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:text-text-disabled";
+const popoverPanelClass = "z-(--z-index-popover) flex flex-col gap-(--space-3) max-w-(--container-sm) p-(--space-4) bg-surface-raised border border-surface-border rounded-(--radius-md) shadow-(--shadow-md) transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0 outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const popoverHeaderClass = "flex items-start justify-between gap-(--space-3)";
+const popoverTitleClass = "text-h3 text-text-primary";
+const popoverBodyClass = "text-body text-text-secondary";
+const popoverArrowClass = "fill-surface-raised";
+const popoverCloseClass = "inline-flex items-center justify-center rounded-(--radius-md) text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) min-w-(--size-target-mobile) sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const popoverCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export {
+  popoverArrowClass,
+  popoverBodyClass,
+  popoverCloseClass,
+  popoverCloseGlyphClass,
+  popoverHeaderClass,
+  popoverPanelClass,
+  popoverTitleClass,
+  popoverTriggerClass
+};
+//# sourceMappingURL=popover.variants.js.map

package/dist/components/popover/popover.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/popover/popover.variants.ts"],"sourcesContent":["// Popover is a small NON-MODAL surface a trigger opens next to itself to hold secondary content —\n// a short form, a definition, a few related controls (spec §1). It is a NEUTRAL surface (spec §3):\n// the panel, the arrow, and the border are neutral, and the brand violet NEVER tints the panel to\n// look \"premium.\" A status color NEVER paints the panel — a verified result is reported by a\n// VerifiedBadge placed INSIDE the body, not by coloring the popover. So NOTHING in this file binds a\n// --color-status-* token or the brand action-primary tier; color enters only through the components\n// the caller places inside it (brand != state, G-U2). This is the ONLY token-binding site (skill §5\n// hard rule). All open/close motion is the FAST token transition on the verdify easing, instant\n// under reduced motion — never the 350ms VerifiedBadge-only theatre duration (G-U3).\n\n// The trigger: the one stop in the page tab order for this control (spec §2 trigger, §4 Focus). A\n// NEUTRAL ghost surface — the label/glyph in the ghost action fg at rest (spec §5\n// --color-action-ghost-fg), the restrained ghost hover fill (spec §5 --color-action-ghost-bg-hover),\n// the md radius, the persistent 2px focus ring (never removed, spec §4 Focus), and the target-size\n// floor (44px touch / 40px pointer, spec §7 2.5.8 / DEC-B) with the height EMERGING from the floor.\n// A disabled trigger dims via the disabled TOKEN (DEC-C), never a blanket opacity. fast functional\n// hover motion + verdify easing, instant under reduced motion (G-U3). This styles the DEFAULT\n// (non-asChild) trigger; when a Button is passed via `asChild` it carries its own treatment.\nexport const popoverTriggerClass =\n  \"inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-3) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"disabled:pointer-events-none disabled:text-text-disabled\";\n\n// The panel (spec §2 panel, §5): the floating surface that opens on activation, raised above the\n// page and anchored to the trigger; it repositions to stay in the viewport (Radix). A NEUTRAL raised\n// surface (spec §5 --color-surface-raised) with the outer surface border (spec §5\n// --color-surface-border), the md corner radius (spec §5 --radius-md), and the md elevation shadow\n// above the page (spec §5 --shadow-md), on the POPOVER z-layer (a popover is a non-modal popover\n// layer, NOT the modal layer — there is no scrim, the page behind stays live, spec §1/§7). It NEVER\n// wears a brand or status fill (spec §3/§8). Inset padding + content gaps from --space-*; a column so\n// the header, body, and footer stack. The open/close fade is a PLAIN fast transition + verdify\n// easing, instant under reduced motion — never the 350ms VerifiedBadge-only theatre (spec §4, G-U3).\n// Enter/exit ride Radix's data-state on the content (attribute-selector variants, not arbitrary\n// values). The panel is focusable (Radix sets tabIndex=-1) so focus can land on it when the body has\n// no focusable control; its ring is never removed (spec §7 focus management).\nexport const popoverPanelClass =\n  \"z-(--z-index-popover) flex flex-col gap-(--space-3) \" +\n  \"max-w-(--container-sm) p-(--space-4) \" +\n  \"bg-surface-raised border border-surface-border rounded-(--radius-md) shadow-(--shadow-md) \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0 \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The header (spec §2 header): the top region holding a short title and an optional close control on\n// the inline-end. Logical-property layout (G-U6) so it mirrors under RTL.\nexport const popoverHeaderClass =\n  \"flex items-start justify-between gap-(--space-3)\";\n\n// The title (spec §2 header title, §5): names the panel as a statement, sentence case. The h3 type\n// role in the PRIMARY text color (spec §5 --text-h3 / --color-text-primary). When present, it is the\n// panel's accessible name, wired via aria-labelledby (the panel takes role=\"dialog\", spec §7).\nexport const popoverTitleClass = \"text-h3 text-text-primary\";\n\n// The body (spec §2 body, §5): the content region — text, a short form, or a few controls. The body\n// type role; supporting text in the SECONDARY text color (spec §5 --text-body / --color-text-secondary).\n// Content that needs to scroll usually belongs in a Sheet (spec §2), so the body does not own a scroll.\nexport const popoverBodyClass = \"text-body text-text-secondary\";\n\n// The arrow (spec §2 arrow): a small DECORATIVE pointer joining the panel to its trigger, carrying no\n// meaning of its own (Radix renders it inside an aria-hidden wrapper). It is filled with the SAME\n// neutral raised surface as the panel so it reads as part of the surface, never a brand or status\n// fill (spec §3/§5). `fill-*` is the SVG fill utility for the Radix arrow polygon. (Radix's bare\n// arrow does not carry the panel's outer BORDER edge — a conformant, non-load-bearing deviation from\n// the §5 \"arrow edge\" border, flagged for amendment rather than hand-rolling a bordered polygon, the\n// same deviation the Tooltip arrow pins.)\nexport const popoverArrowClass = \"fill-surface-raised\";\n\n// The close control (spec §2 close, §5): the in-panel dismiss button. A NEUTRAL ghost surface — the\n// glyph in --color-action-ghost-fg at rest, the restrained ghost hover fill (spec §5 ghost-fg /\n// ghost-bg-hover), the md radius, the persistent focus ring, the target-size floor (44px touch /\n// 40px pointer, spec §7 2.5.8 / DEC-B) with the height EMERGING from the floor, never fixed below it.\n// fast functional hover motion + verdify easing, instant under reduced motion (G-U3).\nexport const popoverCloseClass =\n  \"inline-flex items-center justify-center rounded-(--radius-md) \" +\n  \"text-action-ghost-fg hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) min-w-(--size-target-mobile) \" +\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The close glyph: a neutral X, --size-icon-md, drawn with currentColor so it inherits the close\n// button's ghost-fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nexport const popoverCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n"],"mappings":"AAkBO,MAAM,sBACX;AAqBK,MAAM,oBACX;AAUK,MAAM,qBACX;AAKK,MAAM,oBAAoB;AAK1B,MAAM,mBAAmB;AASzB,MAAM,oBAAoB;AAO1B,MAAM,oBACX;AAUK,MAAM,yBAAyB;","names":[]}

package/dist/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+export { Progress, type ProgressProps } from "./progress";
+export { progressFillVariants, progressRootClass, progressHeaderClass, progressTrackClass, progressLabelClass, progressValueTextClass, progressDescriptionClass, progressErrorClass, type ProgressFillVariantProps, } from "./progress.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,EAClB,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC"}

package/dist/components/progress/index.js

@@ -0,0 +1,23 @@
+import { Progress } from "./progress";
+import {
+  progressFillVariants,
+  progressRootClass,
+  progressHeaderClass,
+  progressTrackClass,
+  progressLabelClass,
+  progressValueTextClass,
+  progressDescriptionClass,
+  progressErrorClass
+} from "./progress.variants";
+export {
+  Progress,
+  progressDescriptionClass,
+  progressErrorClass,
+  progressFillVariants,
+  progressHeaderClass,
+  progressLabelClass,
+  progressRootClass,
+  progressTrackClass,
+  progressValueTextClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/progress/index.ts"],"sourcesContent":["export { Progress, type ProgressProps } from \"./progress\";\nexport {\n  progressFillVariants,\n  progressRootClass,\n  progressHeaderClass,\n  progressTrackClass,\n  progressLabelClass,\n  progressValueTextClass,\n  progressDescriptionClass,\n  progressErrorClass,\n  type ProgressFillVariantProps,\n} from \"./progress.variants\";\n"],"mappings":"AAAA,SAAS,gBAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "aria-label"> {
+    /**
+     * The text naming the task, bound to the bar (spec §2/§7). When present it is rendered
+     * as visible text AND becomes the accessible name via `aria-labelledby`. Progress is
+     * never unlabeled: provide EITHER a visible `label` or an `aria-label`.
+     */
+    label?: React.ReactNode;
+    /**
+     * The accessible name when no visible {@link label} fits (spec §7). State the task
+     * ("Uploading your file."). Used only when there is no visible label — the bar is never
+     * nameless to assistive technology.
+     */
+    "aria-label"?: string;
+    /**
+     * The current progress value (spec §4/§7). Sets `aria-valuenow` (the raw value) and the
+     * determinate fill length (clamped to {@link min}..{@link max}). Omit it — or set
+     * {@link indeterminate} — when the size of the work is genuinely unknown; do not fake a
+     * number.
+     */
+    value?: number;
+    /** Lower bound of the range (spec §7). Default `0`. */
+    min?: number;
+    /** Upper bound of the range (spec §7). Default `100`. */
+    max?: number;
+    /**
+     * Whether the work is running but its size is unknown (spec §3/§4). A moving indicator
+     * travels the track and NO value is claimed: `aria-valuenow` and the visible
+     * `valueText` are both suppressed. Switch back to a determinate `value` the moment a
+     * real measure is known.
+     */
+    indeterminate?: boolean;
+    /**
+     * An optional plain progress readout next to the bar (spec §2/§7) — "40%" or
+     * "Step 2 of 4". Determinate only: it is rendered AND exposed as `aria-valuetext` so a
+     * bare number is never misleading. Ignored when {@link indeterminate}, where no honest
+     * number exists.
+     */
+    valueText?: React.ReactNode;
+    /**
+     * One line clarifying what is running (spec §2), written as a statement ending with a
+     * period. Wired to the bar via `aria-describedby`.
+     */
+    description?: React.ReactNode;
+    /**
+     * The task failed before completing (spec §4/§7). Renders the message beside the bar in
+     * the critical status color, sets `aria-invalid="true"` and the critical track edge,
+     * escalates the live region to assertive, and points `aria-describedby` at the error.
+     * State what failed and the next step, without blaming the reader.
+     */
+    error?: React.ReactNode;
+}
+/**
+ * Progress reports how far a task has advanced so the reader knows the system is working
+ * and roughly how long is left (spec §1). Use the `value` (determinate) form when the work
+ * is measurable — a known percentage or a step count — and the `indeterminate` form only
+ * when the size of the work is genuinely unknown; an honest number beats a guessed one.
+ *
+ * It is a status OUTPUT, not a control: it takes no focus, binds no keys, and is never a
+ * tab stop (spec §4/§6). The bar carries `role="progressbar"` with `aria-valuenow`/`min`/
+ * `max` (and `aria-valuetext` for a plain readout); value changes are announced through a
+ * polite live region so a screen-reader user hears progress without focus moving (spec
+ * §7). A blocking error escalates the live region to assertive and sets `aria-invalid`.
+ *
+ * The fill is a plain control affordance: neutrals carry the track and the fill takes the
+ * primary ACTION accent, never the verified status color, and never animates on the
+ * verified check's only theatre duration — a finished bar means the task ran, not that
+ * anything is verified (brand != state, spec §3/§5/§8).
+ */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC;IAChE;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,sFAmHpB,CAAC"}