@seekalfred/primitives 0.7.1 → 0.7.4

package/dist/popover/popover.js

@@ -3,7 +3,7 @@ import { cnAll } from "../lib/cn.js";
 import { Button as Button$1 } from "../button/button.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext } from "react";
-import { DialogTrigger as PopoverTrigger, OverlayTriggerStateContext, Popover } from "react-aria-components";
+import { DialogTrigger as PopoverTrigger, OverlayTriggerStateContext, Popover, PreviewTrigger } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/popover/popover.tsx
 /**
@@ -66,7 +66,34 @@ const Popover$1 = forwardRef(function Popover$2({ children, className, placement
 		]
 	});
 });
+/**
+* Opens a popover on hover instead of press: a hover card.
+*
+* React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer
+* rests on the trigger or keyboard focus reaches it, and on a long press on
+* touch. It stays open while the pointer travels onto it (a safe area covers
+* the gap) and closes `closeDelay` after the pointer or focus leaves both.
+* Escape closes it; Tab from the trigger moves into it. It is non-modal: no
+* focus trap and no underlay, and the page behind stays usable.
+*
+* The trigger keeps its own press action, so a Link still navigates and a
+* Button still runs `onPress`. Content anyone needs must not live only in the
+* card: touch without a long press never sees it.
+*
+* @example
+* <PopoverHoverTrigger delay={300}>
+*   <Button variant="ghost" aria-label="3 more sources">+3</Button>
+*   <Popover placement="bottom start">...</Popover>
+* </PopoverHoverTrigger>
+*/
+function PopoverHoverTrigger({ delay = 600, closeDelay = 200, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewTrigger, {
+		...props,
+		delay,
+		closeDelay
+	});
+}
 //#endregion
-export { Popover$1 as Popover, PopoverTrigger, popoverVariants };
+export { Popover$1 as Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants };
 
 //# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","AriaPopover","Button"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, type ReactNode } from \"react\";\nimport {\n  OverlayTriggerStateContext,\n  Popover as AriaPopover,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-panel border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n  /**\n   * A heading at the top of the panel. Together with `description` and\n   * `actionLabel` it makes the message popover: a dark title, grey body text\n   * and a full-width button, with `children` rendered below them.\n   */\n  title?: ReactNode;\n  /** Grey body text under the title. */\n  description?: ReactNode;\n  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */\n  actionLabel?: ReactNode;\n  /** Runs when the action button is pressed, before the popover closes. */\n  onAction?: () => void;\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  {\n    children,\n    className,\n    placement = \"bottom\",\n    offset = 4,\n    entrance = \"rise\",\n    title,\n    description,\n    actionLabel,\n    onAction,\n    ...props\n  },\n  ref,\n) {\n  // The open state the enclosing PopoverTrigger owns, so the action button can close it.\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {title == null ? null : (\n        <h3\n          data-slot=\"popover-title\"\n          className=\"m-0 text-sm leading-(--leading-tight) font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      )}\n      {description == null ? null : (\n        <p\n          data-slot=\"popover-description\"\n          className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      )}\n      {actionLabel == null ? null : (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          className=\"mt-4 w-full\"\n          onPress={() => {\n            onAction?.();\n            state?.close();\n          }}\n        >\n          {actionLabel}\n        </Button>\n      )}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA8CD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EACE,UACA,WACA,YAAY,UACZ,SAAS,GACT,WAAW,QACX,OACA,aACA,aACA,UACA,GAAG,SAEL,KACA;CAEA,MAAM,QAAQ,WAAW,0BAA0B;CACnD,OACE,qBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EANxF,UAAA;GAgBG,SAAS,OAAO,OACf,oBAAC,MAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACC,CAAA;GAEL,eAAe,OAAO,OACrB,oBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACA,CAAA;GAEJ,eAAe,OAAO,OACrB,oBAACC,UAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,eAAe;KACb,WAAW;KACX,OAAO,MAAM;IACf;IAEC,UAAA;GACK,CAAA;GAET;EACU;;AAEjB,CAAC"}
+{"version":3,"file":"popover.js","names":["Popover","AriaPopover","Button"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, type JSX, type ReactNode } from \"react\";\nimport {\n  OverlayTriggerStateContext,\n  Popover as AriaPopover,\n  PreviewTrigger,\n  type PopoverProps as AriaPopoverProps,\n  type PreviewTriggerProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-panel border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n  /**\n   * A heading at the top of the panel. Together with `description` and\n   * `actionLabel` it makes the message popover: a dark title, grey body text\n   * and a full-width button, with `children` rendered below them.\n   */\n  title?: ReactNode;\n  /** Grey body text under the title. */\n  description?: ReactNode;\n  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */\n  actionLabel?: ReactNode;\n  /** Runs when the action button is pressed, before the popover closes. */\n  onAction?: () => void;\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  {\n    children,\n    className,\n    placement = \"bottom\",\n    offset = 4,\n    entrance = \"rise\",\n    title,\n    description,\n    actionLabel,\n    onAction,\n    ...props\n  },\n  ref,\n) {\n  // The open state the enclosing PopoverTrigger owns, so the action button can close it.\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {title == null ? null : (\n        <h3\n          data-slot=\"popover-title\"\n          className=\"m-0 text-sm leading-(--leading-tight) font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      )}\n      {description == null ? null : (\n        <p\n          data-slot=\"popover-description\"\n          className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      )}\n      {actionLabel == null ? null : (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          className=\"mt-4 w-full\"\n          onPress={() => {\n            onAction?.();\n            state?.close();\n          }}\n        >\n          {actionLabel}\n        </Button>\n      )}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n\nexport interface PopoverHoverTriggerProps extends Omit<PreviewTriggerProps, \"delay\" | \"closeDelay\"> {\n  /** The trigger, then the `Popover`. The trigger must be focusable (a `Button` or `Link`). */\n  children: ReactNode;\n  /**\n   * Milliseconds the pointer rests on the trigger, or keyboard focus sits on\n   * it, before the card opens.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Milliseconds after the pointer leaves the trigger and the card, or focus\n   * leaves both, before it closes. Moving onto the card keeps it open.\n   * @default 200\n   */\n  closeDelay?: number;\n}\n\n/**\n * Opens a popover on hover instead of press: a hover card.\n *\n * React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer\n * rests on the trigger or keyboard focus reaches it, and on a long press on\n * touch. It stays open while the pointer travels onto it (a safe area covers\n * the gap) and closes `closeDelay` after the pointer or focus leaves both.\n * Escape closes it; Tab from the trigger moves into it. It is non-modal: no\n * focus trap and no underlay, and the page behind stays usable.\n *\n * The trigger keeps its own press action, so a Link still navigates and a\n * Button still runs `onPress`. Content anyone needs must not live only in the\n * card: touch without a long press never sees it.\n *\n * @example\n * <PopoverHoverTrigger delay={300}>\n *   <Button variant=\"ghost\" aria-label=\"3 more sources\">+3</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverHoverTrigger>\n */\nexport function PopoverHoverTrigger({\n  delay = 600,\n  closeDelay = 200,\n  ...props\n}: PopoverHoverTriggerProps): JSX.Element {\n  return <PreviewTrigger {...props} delay={delay} closeDelay={closeDelay} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA8CD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EACE,UACA,WACA,YAAY,UACZ,SAAS,GACT,WAAW,QACX,OACA,aACA,aACA,UACA,GAAG,SAEL,KACA;CAEA,MAAM,QAAQ,WAAW,0BAA0B;CACnD,OACE,qBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EANxF,UAAA;GAgBG,SAAS,OAAO,OACf,oBAAC,MAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACC,CAAA;GAEL,eAAe,OAAO,OACrB,oBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACA,CAAA;GAEJ,eAAe,OAAO,OACrB,oBAACC,UAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,eAAe;KACb,WAAW;KACX,OAAO,MAAM;IACf;IAEC,UAAA;GACK,CAAA;GAET;EACU;;AAEjB,CAAC;;;;;;;;;;;;;;;;;;;;;AAgDD,SAAgB,oBAAoB,EAClC,QAAQ,KACR,aAAa,KACb,GAAG,SACqC;CACxC,OAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAc;EAAmB;CAAa,CAAA;AAC3E"}

package/dist/progress/index.d.ts

@@ -1,2 +1,2 @@
-import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, type ProgressProps, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, type ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/progress.d.ts

@@ -31,11 +31,35 @@ import { ProgressBarProps } from "react-aria-components";
  * the track against the page at 5.25:1.
  *
  * Both are in the build-failing contrast contract.
+ *
+ * A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+ * proud of the track at the value the bar should have reached -- "where the
+ * goal should be by now". The tick is decorative; its meaning is read to
+ * assistive technology as the bar's description (`targetLabel` plus the
+ * formatted value), and `showTargetLabel` also prints it under the tick.
+ *
+ * `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+ * surface, such as a dark summary strip: the track is the inverse text colour
+ * mixed into the surface, the default fill and the copy take the inverse text
+ * colour, so the bar keeps its contrast where the default greys would vanish.
+ */
+export declare const progressVariants: (props?: ({
+  headerEmpty?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const progressTrackVariants: (props?: ({
+  surface?: "inverse" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The target tick: 2px wide, standing 4px proud of the track on both sides,
+ * with a 1px halo of the surface colour so it reads over the fill as well as
+ * over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+ * right-to-left text.
  */
-export declare const progressVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const progressTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const progressTargetVariants: (props?: ({
+  surface?: "inverse" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressFillVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A determinate or indeterminate progress bar.
@@ -70,6 +94,47 @@ export interface ProgressProps extends Omit<ProgressBarProps, "className" | "sty
    * announced its value to assistive tech and showed a sighted reader nothing.
    */
   showValue?: boolean;
+  /**
+   * Mark a full bar as done: a default-toned fill eases to the success
+   * colour at 100% and, with `showValue`, a check lands beside the count.
+   *
+   * Pass `false` for a bar that can reach 100% before the work is finished
+   * -- a timer-driven estimate -- so it does not say "done" early. The fill
+   * keeps its tone and no check is shown. An explicit `tone` is never
+   * overridden either way.
+   *
+   * @default true
+   */
+  showCompletion?: boolean;
+  /**
+   * Where the bar should be by now, on the same scale as `value`
+   * (`minValue`..`maxValue`, clamped). Draws an upright tick across the track
+   * at that point. The tick is decorative; `targetLabel` and the formatted
+   * target are read as the bar's description. Leave it out (the default) for
+   * no marker and the bar exactly as before. Ignored while indeterminate.
+   */
+  target?: number;
+  /**
+   * What the target means, such as "Expected by now". Read with the formatted
+   * target ("Expected by now: 40%") as the bar's description, and printed
+   * under the tick with `showTargetLabel`.
+   * @default "Target"
+   */
+  targetLabel?: string;
+  /**
+   * Print `targetLabel` and the target under the tick. It follows the tick and
+   * stays inside the bar near either end.
+   * @default false
+   */
+  showTargetLabel?: boolean;
+  /**
+   * The surface the bar sits on. `inverse` is the inverted, foreground-coloured
+   * surface (a dark strip in the light theme, a light one in the dark theme):
+   * the track, the default-toned fill, the target tick and the copy take
+   * colours that hold their contrast there. Explicit tones keep their colours.
+   * @default "default"
+   */
+  surface?: "default" | "inverse";
   /** Extra classes for the track. */
   trackClassName?: string;
   /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */

package/dist/progress/progress.js

@@ -3,8 +3,8 @@ import { cn, cnAll } from "../lib/cn.js";
 import { useAfter, useCountTo } from "../lib/count-to.js";
 import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-import { Label, ProgressBar } from "react-aria-components";
+import { forwardRef, useId, useMemo } from "react";
+import { Label, ProgressBar, useLocale } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/progress/progress.tsx
 /**
@@ -36,9 +36,47 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * the track against the page at 5.25:1.
 *
 * Both are in the build-failing contrast contract.
+*
+* A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+* proud of the track at the value the bar should have reached -- "where the
+* goal should be by now". The tick is decorative; its meaning is read to
+* assistive technology as the bar's description (`targetLabel` plus the
+* formatted value), and `showTargetLabel` also prints it under the tick.
+*
+* `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+* surface, such as a dark summary strip: the track is the inverse text colour
+* mixed into the surface, the default fill and the copy take the inverse text
+* colour, so the bar keeps its contrast where the default greys would vanish.
 */
-const progressVariants = cva(["flex w-full flex-col gap-1.5 box-border font-sans"]);
-const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
+const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
+	variants: { headerEmpty: {
+		true: "gap-0",
+		false: "gap-1.5"
+	} },
+	defaultVariants: { headerEmpty: false }
+});
+const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "border-(length:--border-width)"], {
+	variants: { 
+	/** The surface the bar sits on. */
+surface: {
+		default: "bg-muted border-border",
+		inverse: "bg-[color-mix(in_oklab,var(--color-text-inverse)_28%,var(--color-foreground))] border-transparent"
+	} },
+	defaultVariants: { surface: "default" }
+});
+/**
+* The target tick: 2px wide, standing 4px proud of the track on both sides,
+* with a 1px halo of the surface colour so it reads over the fill as well as
+* over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+* right-to-left text.
+*/
+const progressTargetVariants = cva("pointer-events-none absolute -top-1 -bottom-1 w-0.5 -ms-px rounded-pill", {
+	variants: { surface: {
+		default: "bg-foreground shadow-[0_0_0_1px_var(--color-surface)]",
+		inverse: "bg-text-inverse shadow-[0_0_0_1px_var(--color-foreground)]"
+	} },
+	defaultVariants: { surface: "default" }
+});
 const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 	variants: { tone: {
 		neutral: "bg-primary-strong",
@@ -54,10 +92,10 @@ const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 * fill follows, and a check lands beside the final count once the bar is full.
 * Any other text (a price, a step count) is shown as it is.
 */
-function ProgressValue({ percentage, valueText }) {
+function ProgressValue({ percentage, valueText, showCompletion }) {
 	const percent = Math.round(percentage);
 	const counted = useCountTo(percent);
-	const done = useAfter(percent >= 100, 240);
+	const done = useAfter(showCompletion && percent >= 100, 240);
 	const isPercent = valueText === `${percent}%`;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isPercent ? `${counted}%` : valueText, isPercent ? /* @__PURE__ */ jsx("span", {
 		"data-slot": "progress-done",
@@ -80,46 +118,125 @@ function ProgressValue({ percentage, valueText }) {
 		})
 	}) : null] });
 }
-const Progress = forwardRef(function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }, ref) {
+/** The track's frame and the tick. With no marker it renders the track alone, as before. */
+function TargetFrame({ marker, surface, children }) {
+	if (!marker) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress-target-frame",
+		className: "relative",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-slot": "progress-target",
+			"aria-hidden": "true",
+			className: progressTargetVariants({ surface }),
+			style: { insetInlineStart: `${marker.share * 100}%` }
+		})]
+	});
+}
+/**
+* The target's meaning, the bar's description. Printed, it hangs from a
+* zero-width anchor at the tick: centred on it, or running inward near either
+* end, in either text direction. Otherwise it is for screen readers only.
+*/
+function TargetText({ id, marker, shown, inverse }) {
+	if (!shown) return /* @__PURE__ */ jsx("span", {
+		id,
+		className: "sr-only",
+		children: marker.text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-target-label",
+		"aria-hidden": "true",
+		className: "relative h-[1lh] text-xs leading-(--leading-normal)",
+		children: /* @__PURE__ */ jsx("span", {
+			className: cnAll("absolute top-0 flex w-0 whitespace-nowrap", marker.share < .2 ? "justify-start" : marker.share > .8 ? "justify-end" : "justify-center", inverse ? "text-text-inverse" : "text-muted-foreground"),
+			style: { insetInlineStart: `${marker.share * 100}%` },
+			children: /* @__PURE__ */ jsx("span", {
+				id,
+				children: marker.text
+			})
+		})
+	});
+}
+const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, target, targetLabel = "Target", showTargetLabel = false, surface = "default", trackClassName, fillClassName, className, ...props }, ref) {
+	const { locale } = useLocale();
+	const targetId = useId();
+	const { minValue = 0, maxValue = 100, formatOptions, isIndeterminate: indeterminate } = props;
+	const marker = useMemo(() => {
+		if (target === void 0 || !Number.isFinite(target) || indeterminate) return null;
+		const span = maxValue - minValue;
+		const share = span > 0 ? Math.min(1, Math.max(0, (target - minValue) / span)) : 0;
+		const options = formatOptions ?? { style: "percent" };
+		const shown = options.style === "percent" ? share : Math.min(maxValue, Math.max(minValue, target));
+		return {
+			share,
+			text: `${targetLabel}: ${new Intl.NumberFormat(locale, options).format(shown)}`
+		};
+	}, [
+		target,
+		indeterminate,
+		minValue,
+		maxValue,
+		formatOptions,
+		locale,
+		targetLabel
+	]);
+	const inverse = surface === "inverse";
+	const describedBy = marker ? [props["aria-describedby"], targetId].filter(Boolean).join(" ") : props["aria-describedby"];
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		ref,
 		...props,
+		"aria-describedby": describedBy,
 		"data-slot": "progress",
-		className: cn(progressVariants(), className),
-		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-			"data-slot": "progress-header",
-			className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
-			children: [/* @__PURE__ */ jsx(Label, {
-				"data-slot": "progress-label",
-				className: cnAll("text-sm leading-(--leading-normal) text-foreground", labelHidden && "sr-only"),
-				children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
-					swapKey: label,
-					className: "block",
-					children: label
-				}) : label
-			}), showValue ? /* @__PURE__ */ jsx("span", {
-				"data-slot": "progress-value",
-				"aria-hidden": "true",
-				className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
-				children: /* @__PURE__ */ jsx(ProgressValue, {
-					percentage: percentage ?? 0,
-					valueText
+		"data-surface": inverse ? "inverse" : void 0,
+		className: cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className),
+		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "progress-header",
+				className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
+				children: [/* @__PURE__ */ jsx(Label, {
+					"data-slot": "progress-label",
+					className: cnAll("text-sm leading-(--leading-normal)", inverse ? "text-text-inverse" : "text-foreground", labelHidden && "sr-only"),
+					children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
+						swapKey: label,
+						className: "block",
+						children: label
+					}) : label
+				}), showValue ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "progress-value",
+					"aria-hidden": "true",
+					className: cnAll("text-sm leading-(--leading-normal) tabular-nums", inverse ? "text-text-inverse" : "text-muted-foreground"),
+					children: /* @__PURE__ */ jsx(ProgressValue, {
+						percentage: percentage ?? 0,
+						valueText,
+						showCompletion
+					})
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(TargetFrame, {
+				marker,
+				surface,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "progress-track",
+					className: cn(progressTrackVariants({ surface }), trackClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "progress-fill",
+						"data-indeterminate": isIndeterminate || void 0,
+						"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
+						className: cn([progressFillVariants({ tone }), inverse && (!tone || tone === "neutral") && "bg-text-inverse"], fillClassName),
+						style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
+					})
 				})
-			}) : null]
-		}), /* @__PURE__ */ jsx("div", {
-			"data-slot": "progress-track",
-			className: cn(progressTrackVariants(), trackClassName),
-			children: /* @__PURE__ */ jsx("div", {
-				"data-slot": "progress-fill",
-				"data-indeterminate": isIndeterminate || void 0,
-				"data-complete": (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
-				className: cn(progressFillVariants({ tone }), fillClassName),
-				style: { width: isIndeterminate ? "0%" : `${percentage ?? 0}%` }
-			})
-		})] })
+			}),
+			marker ? /* @__PURE__ */ jsx(TargetText, {
+				id: targetId,
+				marker,
+				shown: showTargetLabel,
+				inverse
+			}) : null
+		] })
 	});
 });
 //#endregion
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };
 
 //# sourceMappingURL=progress.js.map

package/dist/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useAfter, useCountTo } from \"../lib/count-to.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n */\nexport const progressVariants = cva([\"flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const progressTrackVariants = cva([\n  \"relative h-2 w-full overflow-hidden rounded-pill box-border\",\n  // muted, NOT `border` as the Switch uses. A switch has no fill; a\n  // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n  // the two halves are the same grey and the value disappears.\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    // The fill follows the value on the smooth spring and turns success-coloured when it completes (see progress-fill).\n    \"progress-fill\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * The printed value. A percentage counts to its new number on the same spring the\n * fill follows, and a check lands beside the final count once the bar is full.\n * Any other text (a price, a step count) is shown as it is.\n */\nfunction ProgressValue({ percentage, valueText }: { percentage: number; valueText: string | undefined }) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(percent >= 100, 240);\n  const isPercent = valueText === `${percent}%`;\n  return (\n    <>\n      {isPercent ? `${counted}%` : valueText}\n      {isPercent ? (\n        <span data-slot=\"progress-done\" className=\"ms-1 inline-flex align-middle text-success-strong\">\n          <SwapText swapKey={done ? \"done\" : \"\"} motion=\"glyph\" className=\"inline-flex\">\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"size-3.5\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          </SwapText>\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  { label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props },\n  ref,\n) {\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      data-slot=\"progress\"\n      className={cn(progressVariants(), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal) text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {typeof label === \"string\" ? (\n                <SwapText swapKey={label} className=\"block\">\n                  {label}\n                </SwapText>\n              ) : (\n                label\n              )}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className=\"text-sm leading-(--leading-normal) text-muted-foreground tabular-nums\"\n              >\n                <ProgressValue percentage={percentage ?? 0} valueText={valueText} />\n              </span>\n            ) : null}\n          </div>\n          <div\n            data-slot=\"progress-track\"\n            className={cn(progressTrackVariants(), trackClassName)}\n          >\n            {/*\n              width, not the legacy translateX(-(100 - value)%). That\n              overflowed for value > 100 -- a positive translate slid the\n              indicator off to the right, while the announced value stayed\n              whatever was passed. React Aria clamps the value, so the two\n              can no longer disagree.\n\n              An indeterminate bar renders no fill rather than the\n              legacy's silent 0%: `value={undefined}` became `(value || 0)`\n              there, so a sighted user saw \"0% done\" while a screen reader\n              said \"indeterminate\".\n            */}\n            <div\n              data-slot=\"progress-fill\"\n              data-indeterminate={isIndeterminate || undefined}\n              // A default-toned bar turns success-coloured when it completes; an explicit tone is never overridden.\n              data-complete={(!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100 ? \"\" : undefined}\n              className={cn(progressFillVariants({ tone }), fillClassName)}\n              style={{ width: isIndeterminate ? \"0%\" : `${percentage ?? 0}%` }}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,mBAAmB,IAAI,CAAC,mDAAmD,CAAC;AAEzF,MAAa,wBAAwB,IAAI,CACvC,+DAIA,uDACF,CAAC;AAED,MAAa,uBAAuB,IAClC,CACE,uBAEA,eACF,GACA;CACE,UAAU,EAYR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;;;;;;AAkDA,SAAS,cAAc,EAAE,YAAY,aAAoE;CACvG,MAAM,UAAU,KAAK,MAAM,UAAU;CACrC,MAAM,UAAU,WAAW,OAAO;CAClC,MAAM,OAAO,SAAS,WAAW,KAAK,GAAG;CACzC,MAAM,YAAY,cAAc,GAAG,QAAQ;CAC3C,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,GAAG,QAAQ,KAAK,WAC5B,YACC,oBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EACxC,UAAA,oBAAC,UAAD;GAAU,SAAS,OAAO,SAAS;GAAI,QAAO;GAAQ,WAAU;GAC9D,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IACV,eAAY;IAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACG,CAAA;CACN,CAAA,IACJ,IACJ,EAAA,CAAA;AAEN;AAEA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,OAAO,aAAa,WAAW,MAAM,gBAAgB,eAAe,WAAW,GAAG,SACpF,KACA;CACA,OACE,oBAACA,aAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,iBAAiB,gBAC/B,qBAAA,YAAA,EAAA,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,MAAM,aAAa,2CAA2C;GAF3E,UAAA,CAIE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,MACT,sDACA,eAAe,SACjB;IAEC,UAAA,OAAO,UAAU,WAChB,oBAAC,UAAD;KAAU,SAAS;KAAO,WAAU;KACjC,UAAA;IACO,CAAA,IAEV;GAEO,CAAA,GACV,YACC,oBAAC,QAAD;IACE,aAAU;IAIV,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,eAAD;KAAe,YAAY,cAAc;KAAc;IAAY,CAAA;GAC/D,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAcrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IAEvC,kBAAgB,CAAC,QAAQ,SAAS,cAAc,CAAC,oBAAoB,cAAc,MAAM,MAAM,KAAK,KAAA;IACpG,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,EAAE,OAAO,kBAAkB,OAAO,GAAG,cAAc,EAAE,GAAG;GAChE,CAAA;EACE,CAAA,CACL,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC"}
+{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, useId, useMemo, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  useLocale,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useAfter, useCountTo } from \"../lib/count-to.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n *\n * A TARGET MARKER is opt-in (`target`): a short upright tick that stands\n * proud of the track at the value the bar should have reached -- \"where the\n * goal should be by now\". The tick is decorative; its meaning is read to\n * assistive technology as the bar's description (`targetLabel` plus the\n * formatted value), and `showTargetLabel` also prints it under the tick.\n *\n * `surface=\"inverse\"` is for a bar on the inverted (foreground-coloured)\n * surface, such as a dark summary strip: the track is the inverse text colour\n * mixed into the surface, the default fill and the copy take the inverse text\n * colour, so the bar keeps its contrast where the default greys would vanish.\n */\nexport const progressVariants = cva([\"flex w-full flex-col box-border font-sans\"], {\n  variants: {\n    /*\n     * True when nothing is printed above the track (`labelHidden` and no\n     * `showValue`). The header is then an empty row -- its sr-only label is\n     * out of flow -- and the column gap would leave 6px of nothing above the\n     * bar. The gap lives here and not in the base, so the raw\n     * `progressVariants()` output never carries both `gap-1.5` and `gap-0`.\n     */\n    headerEmpty: { true: \"gap-0\", false: \"gap-1.5\" },\n  },\n  defaultVariants: { headerEmpty: false },\n});\n\nexport const progressTrackVariants = cva(\n  [\"relative h-2 w-full overflow-hidden rounded-pill box-border\", \"border-(length:--border-width)\"],\n  {\n    variants: {\n      /** The surface the bar sits on. */\n      surface: {\n        // muted, NOT `border` as the Switch uses. A switch has no fill; a\n        // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n        // the two halves are the same grey and the value disappears.\n        default: \"bg-muted border-border\",\n        // On the inverted surface: the inverse text colour mixed into that surface, a quiet step off it.\n        inverse:\n          \"bg-[color-mix(in_oklab,var(--color-text-inverse)_28%,var(--color-foreground))] border-transparent\",\n      },\n    },\n    defaultVariants: { surface: \"default\" },\n  },\n);\n\n/**\n * The target tick: 2px wide, standing 4px proud of the track on both sides,\n * with a 1px halo of the surface colour so it reads over the fill as well as\n * over the track. Placed by an inline `inset-inline-start`, so it mirrors in\n * right-to-left text.\n */\nexport const progressTargetVariants = cva(\n  \"pointer-events-none absolute -top-1 -bottom-1 w-0.5 -ms-px rounded-pill\",\n  {\n    variants: {\n      surface: {\n        default: \"bg-foreground shadow-[0_0_0_1px_var(--color-surface)]\",\n        inverse: \"bg-text-inverse shadow-[0_0_0_1px_var(--color-foreground)]\",\n      },\n    },\n    defaultVariants: { surface: \"default\" },\n  },\n);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    // The fill follows the value on the smooth spring and turns success-coloured when it completes; indeterminate, it sweeps (see progress-fill).\n    \"progress-fill\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /**\n   * Mark a full bar as done: a default-toned fill eases to the success\n   * colour at 100% and, with `showValue`, a check lands beside the count.\n   *\n   * Pass `false` for a bar that can reach 100% before the work is finished\n   * -- a timer-driven estimate -- so it does not say \"done\" early. The fill\n   * keeps its tone and no check is shown. An explicit `tone` is never\n   * overridden either way.\n   *\n   * @default true\n   */\n  showCompletion?: boolean;\n  /**\n   * Where the bar should be by now, on the same scale as `value`\n   * (`minValue`..`maxValue`, clamped). Draws an upright tick across the track\n   * at that point. The tick is decorative; `targetLabel` and the formatted\n   * target are read as the bar's description. Leave it out (the default) for\n   * no marker and the bar exactly as before. Ignored while indeterminate.\n   */\n  target?: number;\n  /**\n   * What the target means, such as \"Expected by now\". Read with the formatted\n   * target (\"Expected by now: 40%\") as the bar's description, and printed\n   * under the tick with `showTargetLabel`.\n   * @default \"Target\"\n   */\n  targetLabel?: string;\n  /**\n   * Print `targetLabel` and the target under the tick. It follows the tick and\n   * stays inside the bar near either end.\n   * @default false\n   */\n  showTargetLabel?: boolean;\n  /**\n   * The surface the bar sits on. `inverse` is the inverted, foreground-coloured\n   * surface (a dark strip in the light theme, a light one in the dark theme):\n   * the track, the default-toned fill, the target tick and the copy take\n   * colours that hold their contrast there. Explicit tones keep their colours.\n   * @default \"default\"\n   */\n  surface?: \"default\" | \"inverse\";\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * The printed value. A percentage counts to its new number on the same spring the\n * fill follows, and a check lands beside the final count once the bar is full.\n * Any other text (a price, a step count) is shown as it is.\n */\nfunction ProgressValue({\n  percentage,\n  valueText,\n  showCompletion,\n}: {\n  percentage: number;\n  valueText: string | undefined;\n  showCompletion: boolean;\n}) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(showCompletion && percent >= 100, 240);\n  const isPercent = valueText === `${percent}%`;\n  return (\n    <>\n      {isPercent ? `${counted}%` : valueText}\n      {isPercent ? (\n        <span data-slot=\"progress-done\" className=\"ms-1 inline-flex align-middle text-success-strong\">\n          <SwapText swapKey={done ? \"done\" : \"\"} motion=\"glyph\" className=\"inline-flex\">\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"size-3.5\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          </SwapText>\n        </span>\n      ) : null}\n    </>\n  );\n}\n\ninterface Marker {\n  /** Where the target sits along the track, 0 to 1. */\n  share: number;\n  /** \"Target: 40%\": what is read, and printed with showTargetLabel. */\n  text: string;\n}\n\n/** The track's frame and the tick. With no marker it renders the track alone, as before. */\nfunction TargetFrame({\n  marker,\n  surface,\n  children,\n}: {\n  marker: Marker | null;\n  surface: \"default\" | \"inverse\";\n  children: ReactNode;\n}) {\n  if (!marker) return <>{children}</>;\n  return (\n    <div data-slot=\"progress-target-frame\" className=\"relative\">\n      {children}\n      <span\n        data-slot=\"progress-target\"\n        aria-hidden=\"true\"\n        className={progressTargetVariants({ surface })}\n        style={{ insetInlineStart: `${marker.share * 100}%` }}\n      />\n    </div>\n  );\n}\n\n/**\n * The target's meaning, the bar's description. Printed, it hangs from a\n * zero-width anchor at the tick: centred on it, or running inward near either\n * end, in either text direction. Otherwise it is for screen readers only.\n */\nfunction TargetText({\n  id,\n  marker,\n  shown,\n  inverse,\n}: {\n  id: string;\n  marker: Marker;\n  shown: boolean;\n  inverse: boolean;\n}) {\n  if (!shown) {\n    return (\n      <span id={id} className=\"sr-only\">\n        {marker.text}\n      </span>\n    );\n  }\n  return (\n    // aria-hidden: it is read once, as the description, not again as loose text.\n    <div data-slot=\"progress-target-label\" aria-hidden=\"true\" className=\"relative h-[1lh] text-xs leading-(--leading-normal)\">\n      <span\n        className={cnAll(\n          \"absolute top-0 flex w-0 whitespace-nowrap\",\n          marker.share < 0.2 ? \"justify-start\" : marker.share > 0.8 ? \"justify-end\" : \"justify-center\",\n          inverse ? \"text-text-inverse\" : \"text-muted-foreground\",\n        )}\n        style={{ insetInlineStart: `${marker.share * 100}%` }}\n      >\n        <span id={id}>{marker.text}</span>\n      </span>\n    </div>\n  );\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    label,\n    labelHidden,\n    showValue,\n    showCompletion = true,\n    tone,\n    target,\n    targetLabel = \"Target\",\n    showTargetLabel = false,\n    surface = \"default\",\n    trackClassName,\n    fillClassName,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const targetId = useId();\n  const { minValue = 0, maxValue = 100, formatOptions, isIndeterminate: indeterminate } = props;\n  const marker = useMemo(() => {\n    if (target === undefined || !Number.isFinite(target) || indeterminate) return null;\n    const span = maxValue - minValue;\n    const share = span > 0 ? Math.min(1, Math.max(0, (target - minValue) / span)) : 0;\n    // Formatted the way React Aria formats the bar's own value: the share under the default percent style, else the value.\n    const options = formatOptions ?? { style: \"percent\" };\n    const shown = options.style === \"percent\" ? share : Math.min(maxValue, Math.max(minValue, target));\n    return { share, text: `${targetLabel}: ${new Intl.NumberFormat(locale, options).format(shown)}` };\n  }, [target, indeterminate, minValue, maxValue, formatOptions, locale, targetLabel]);\n  const inverse = surface === \"inverse\";\n  const describedBy = marker\n    ? [props[\"aria-describedby\"], targetId].filter(Boolean).join(\" \")\n    : props[\"aria-describedby\"];\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      aria-describedby={describedBy}\n      data-slot=\"progress\"\n      data-surface={inverse ? \"inverse\" : undefined}\n      className={cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal)\",\n                inverse ? \"text-text-inverse\" : \"text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {typeof label === \"string\" ? (\n                <SwapText swapKey={label} className=\"block\">\n                  {label}\n                </SwapText>\n              ) : (\n                label\n              )}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className={cnAll(\n                  \"text-sm leading-(--leading-normal) tabular-nums\",\n                  inverse ? \"text-text-inverse\" : \"text-muted-foreground\",\n                )}\n              >\n                <ProgressValue\n                  percentage={percentage ?? 0}\n                  valueText={valueText}\n                  showCompletion={showCompletion}\n                />\n              </span>\n            ) : null}\n          </div>\n          {/* The track is wrapped only when there is a marker, so a bar without one keeps its DOM exactly. */}\n          <TargetFrame marker={marker} surface={surface}>\n            <div\n              data-slot=\"progress-track\"\n              className={cn(progressTrackVariants({ surface }), trackClassName)}\n            >\n              {/*\n                width, not the legacy translateX(-(100 - value)%). That\n                overflowed for value > 100 -- a positive translate slid the\n                indicator off to the right, while the announced value stayed\n                whatever was passed. React Aria clamps the value, so the two\n                can no longer disagree.\n  \n                An indeterminate bar is not the legacy's silent 0%:\n                `value={undefined}` became `(value || 0)` there, so a sighted\n                user saw \"0% done\" while a screen reader said \"indeterminate\".\n                Its fill is a segment that sweeps the track on a loop (a slow\n                pulse of the whole track under reduced motion), sized and moved\n                by progress-fill, so it carries no inline width.\n              */}\n              <div\n                data-slot=\"progress-fill\"\n                data-indeterminate={isIndeterminate || undefined}\n                // A default-toned bar turns success-coloured when it completes, unless showCompletion is off; an explicit tone is never overridden.\n                data-complete={\n                  showCompletion && (!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100\n                    ? \"\"\n                    : undefined\n                }\n                className={cn(\n                  [progressFillVariants({ tone }), inverse && (!tone || tone === \"neutral\") && \"bg-text-inverse\"],\n                  fillClassName,\n                )}\n                style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n              />\n            </div>\n          </TargetFrame>\n          {marker ? <TargetText id={targetId} marker={marker} shown={showTargetLabel} inverse={inverse} /> : null}\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":"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"}

package/dist/radio-group/index.d.ts

@@ -1,2 +1,2 @@
-import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group.js";
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, radioGroupVariants, radioVariants };
+import { Radio, RadioGroup, RadioGroupProps, RadioGroupVariant, RadioProps, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group.js";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, radioCardVariants, radioGroupVariants, radioVariants };

package/dist/radio-group/index.js

@@ -1,2 +1,2 @@
-import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group.js";
-export { Radio, RadioGroup, radioGroupVariants, radioVariants };
+import { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group.js";
+export { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants };

package/dist/radio-group/radio-group.d.ts

@@ -19,8 +19,22 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
  * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --
  * so a radio and a checkbox in the same form agree.
  */
-export declare const radioGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioGroupVariants: (props?: ({
+  variant?: "card" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * One choice drawn as a selectable card: a bordered surface the whole of
+ * which is the hit target, with the title, an optional description and icon.
+ *
+ * Selection is shown twice, by the border AND by the dot, so it never rests
+ * on colour alone (WCAG 1.4.1). The border reuses StatCard's selected filter
+ * pair (`border-primary-strong`, hover darkens an unselected edge), so a
+ * selected card and a selected stat card read the same.
+ */
+export declare const radioCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Which look the group's radios take. */
+export type RadioGroupVariant = "default" | "card";
 /**
  * A set of mutually exclusive choices.
  *
@@ -31,6 +45,14 @@ export declare const radioVariants: (props?: import("class-variance-authority/ty
  * </RadioGroup>
  */
 interface RadioGroupProps$1 extends Omit<RadioGroupProps, "className" | "style"> {
+  /**
+   * `card` draws each choice as a selectable card, with a title, an optional
+   * `description` and `icon` on each `Radio`. The keyboard model is the same:
+   * one tab stop, arrow keys move and select.
+   *
+   * @default "default"
+   */
+  variant?: RadioGroupVariant;
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
@@ -42,9 +64,17 @@ declare const RadioGroup$1: import("react").ForwardRefExoticComponent<RadioGroup
  * <Radio value="pro">Pro</Radio>
  */
 interface RadioProps$1 extends Omit<RadioProps, "className" | "style" | "children"> {
-  /** The label, and this option's accessible name. */
+  /** The label, and this option's accessible name. In a card, the title. */
   children?: ReactNode;
-  /** Extra classes for the label. Merged last, so they win conflicts. */
+  /**
+   * A line under the title, read as the option's description
+   * (`aria-describedby`), not as part of its name. Card variant only; the
+   * default variant ignores it.
+   */
+  description?: ReactNode;
+  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */
+  icon?: ReactNode;
+  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */
   className?: string;
 }
 declare const Radio$1: import("react").ForwardRefExoticComponent<RadioProps$1 & import("react").RefAttributes<HTMLInputElement>>;