@seekalfred/primitives 0.7.3 → 0.7.4

package/dist/copy-button/copy-button.d.ts

@@ -2,9 +2,23 @@
 export interface CopyButtonProps {
   /** What goes on the clipboard. */
   value: string;
-  /** The label at rest, and the button's accessible name. @default "Copy" */
+  /**
+   * The label at rest. Unless `aria-label` is set it is also the button's accessible name.
+   * @default "Copy"
+   */
   children?: string;
-  /** Only the icon, a square button. The label is still its accessible name. */
+  /**
+   * An accessible name that differs from the visible label, for when the short label leans on its
+   * surroundings: visible "Copy" next to a code block, named "Copy code". It also prefixes the
+   * live-region announcement ("Copy code: Copied"). It stays constant while the visible label
+   * shows "Copied" or "Failed".
+   *
+   * Keep the visible label inside it, as written and ideally at the start ("Copy" → "Copy code",
+   * "Copy page" → "Copy page draft"), so a speech-input user can say what they see
+   * (WCAG 2.5.3 Label in Name). Unset or empty, the accessible name is `children`, as before.
+   */
+  "aria-label"?: string;
+  /** Only the icon, a square button. The label (or `aria-label`) is still its accessible name. */
   iconOnly?: boolean;
   /**
    * `plain` has no border until hovered. `primary` is the filled brand button, for a copy that is the
@@ -34,11 +48,13 @@ export interface CopyButtonProps {
  * its label cell reserves the widest of the three texts.
  *
  * It goes back to rest by itself after a moment, and a live region announces the
- * result. The accessible name is always the resting label.
+ * result. The accessible name is the resting label, or `aria-label` when the visible
+ * label is too short to stand alone; it never changes with the state.
  *
  * @example
  * <CopyButton value={token} />
  * <CopyButton value={url} iconOnly variant="plain" />
+ * <CopyButton value={code} aria-label="Copy code">Copy</CopyButton>
  * <CopyButton value={ticket} variant="primary" size="md" onError={() => toast("Copy failed")}>
  *   Copy as ticket
  * </CopyButton>

package/dist/copy-button/copy-button.js

@@ -82,17 +82,20 @@ function StateIcon({ state }) {
 * its label cell reserves the widest of the three texts.
 *
 * It goes back to rest by itself after a moment, and a live region announces the
-* result. The accessible name is always the resting label.
+* result. The accessible name is the resting label, or `aria-label` when the visible
+* label is too short to stand alone; it never changes with the state.
 *
 * @example
 * <CopyButton value={token} />
 * <CopyButton value={url} iconOnly variant="plain" />
+* <CopyButton value={code} aria-label="Copy code">Copy</CopyButton>
 * <CopyButton value={ticket} variant="primary" size="md" onError={() => toast("Copy failed")}>
 *   Copy as ticket
 * </CopyButton>
 */
-const CopyButton = forwardRef(function CopyButton({ value, children: label = "Copy", iconOnly = false, variant = "outline", size = "sm", isDisabled, onCopied, onError, className }, ref) {
+const CopyButton = forwardRef(function CopyButton({ value, children: label = "Copy", "aria-label": ariaLabel, iconOnly = false, variant = "outline", size = "sm", isDisabled, onCopied, onError, className }, ref) {
 	const { state, copy } = useCopyFeedback();
+	const name = ariaLabel || label;
 	const text = state === "copied" ? "Copied" : state === "error" ? "Failed" : label;
 	const pressStart = (event) => {
 		event.target.style.setProperty("--press-scale", iconOnly ? "0.96" : "0.97");
@@ -106,7 +109,7 @@ const CopyButton = forwardRef(function CopyButton({ value, children: label = "Co
 		ref,
 		"data-slot": "button",
 		"data-copy-state": state,
-		"aria-label": label,
+		"aria-label": name,
 		isDisabled,
 		onPressStart: pressStart,
 		onPress: () => {
@@ -146,7 +149,7 @@ const CopyButton = forwardRef(function CopyButton({ value, children: label = "Co
 		className: "sr-only",
 		role: "status",
 		"aria-live": "polite",
-		children: state === "idle" ? "" : state === "error" ? label + ": Could not copy" : label + ": Copied"
+		children: state === "idle" ? "" : state === "error" ? name + ": Could not copy" : name + ": Copied"
 	})] });
 });
 //#endregion

package/dist/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["AriaButton"],"sources":["../../src/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Button as AriaButton, type PressEvent } from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { callSafely, useCopyFeedback, type CopyFeedbackState } from \"../lib/use-copy-feedback.js\";\n\nexport interface CopyButtonProps {\n  /** What goes on the clipboard. */\n  value: string;\n  /** The label at rest, and the button's accessible name. @default \"Copy\" */\n  children?: string;\n  /** Only the icon, a square button. The label is still its accessible name. */\n  iconOnly?: boolean;\n  /**\n   * `plain` has no border until hovered. `primary` is the filled brand button, for a copy that is the\n   * main action of its row or dialog. @default \"outline\"\n   */\n  variant?: \"outline\" | \"plain\" | \"primary\";\n  /**\n   * Control height, from the density scale: `sm` sits in a row, `md` matches a default Button.\n   * @default \"sm\"\n   */\n  size?: \"sm\" | \"md\";\n  isDisabled?: boolean;\n  /** Called once the text has reached the clipboard. */\n  onCopied?: () => void;\n  /**\n   * Called when the clipboard refused the text, with what it rejected with. The button already shows\n   * \"Failed\" and announces it; use this to keep a toast or log of your own.\n   */\n  onError?: (error: unknown) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-4\";\n\n/** CopyButton's variant names, mapped onto Button's. */\nconst BUTTON_VARIANT = {\n  outline: \"outlineNeutral\",\n  plain: \"ghost\",\n  primary: \"primary\",\n} as const;\n\n/** An icon-only button is square: as wide as its rung is tall. */\nconst ICON_ONLY_WIDTH = {\n  sm: \" w-(--density-control-h-sm) px-0\",\n  md: \" w-(--density-control-h-md) px-0\",\n} as const;\n\n/** The result icon's tone on a page-surface button; at rest it takes the label's ink. */\nconst RESULT_TONE: Record<CopyFeedbackState, string | undefined> = {\n  idle: undefined,\n  copied: \"text-success-strong\",\n  error: \"text-destructive-strong\",\n};\n\n/** The tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 12l5 5L20 6\"\n        pathLength={1}\n        className=\"[stroke-dasharray:1] motion-safe:animate-check-draw-calm\"\n      />\n    </svg>\n  );\n}\n\nfunction StateIcon({ state }: { state: CopyFeedbackState }) {\n  if (state === \"copied\") return <DrawnCheck />;\n  const common = {\n    className: ICON,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    \"aria-hidden\": true,\n  } as const;\n  if (state === \"error\") {\n    return (\n      <svg {...common}>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 8v4M12 16h.01\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\n/**\n * Copies a value and says so, calmly. The icon trades places in one soft breath\n * (copy, then a tick that draws itself, or an alert if the clipboard refused)\n * while the label's changed letters rise in, and the button never changes width:\n * its label cell reserves the widest of the three texts.\n *\n * It goes back to rest by itself after a moment, and a live region announces the\n * result. The accessible name is always the resting label.\n *\n * @example\n * <CopyButton value={token} />\n * <CopyButton value={url} iconOnly variant=\"plain\" />\n * <CopyButton value={ticket} variant=\"primary\" size=\"md\" onError={() => toast(\"Copy failed\")}>\n *   Copy as ticket\n * </CopyButton>\n */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    children: label = \"Copy\",\n    iconOnly = false,\n    variant = \"outline\",\n    size = \"sm\",\n    isDisabled,\n    onCopied,\n    onError,\n    className,\n  },\n  ref,\n) {\n  const { state, copy } = useCopyFeedback();\n  const text = state === \"copied\" ? \"Copied\" : state === \"error\" ? \"Failed\" : label;\n\n  // Not width-based like Button's press: an icon button presses a little deeper, every other one the same.\n  const pressStart = (event: PressEvent) => {\n    (event.target as HTMLElement).style.setProperty(\"--press-scale\", iconOnly ? \"0.96\" : \"0.97\");\n  };\n\n  const classes = cn(\n    buttonVariants({ variant: BUTTON_VARIANT[variant], size }) +\n      \" [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]\" +\n      (iconOnly ? ICON_ONLY_WIDTH[size] : \"\"),\n    className,\n  );\n  // On the brand fill the result icon keeps the label's ink: the success and destructive tones are set\n  // against the page surface, not the orange.\n  const onBrandFill = variant === \"primary\";\n\n  return (\n    <>\n      <AriaButton\n        ref={ref}\n        data-slot=\"button\"\n        data-copy-state={state}\n        aria-label={label}\n        isDisabled={isDisabled}\n        onPressStart={pressStart}\n        onPress={() => {\n          void copy(value, onError).then((ok) => {\n            if (ok) callSafely(() => onCopied?.());\n          });\n        }}\n        className={classes}\n      >\n        <IconSwap iconKey={state} calm className={cn(ICON, \"relative\")}>\n          <span className={onBrandFill ? undefined : RESULT_TONE[state]}>\n            <StateIcon state={state} />\n          </span>\n        </IconSwap>\n        {iconOnly ? null : (\n          // The cell reserves the widest state, so nothing moves but the letters. The inline padding gives blurred\n          // edge letters room before the horizontal clip; the negative margin keeps the box the same size.\n          <span\n            className=\"-mx-1 grid min-w-0 overflow-x-clip px-1 text-start whitespace-nowrap\"\n            aria-hidden=\"true\"\n          >\n            {[label, \"Copied\", \"Failed\"].map((measure) => (\n              <span key={measure} className=\"invisible col-start-1 row-start-1\">\n                {measure}\n              </span>\n            ))}\n            <span className=\"col-start-1 row-start-1 justify-self-start\">\n              <MorphText text={text} morphWidth={false} calm />\n            </span>\n          </span>\n        )}\n      </AriaButton>\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {state === \"idle\"\n          ? \"\"\n          : state === \"error\"\n            ? label + \": Could not copy\"\n            : label + \": Copied\"}\n      </span>\n    </>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"copy-button.js","names":["AriaButton"],"sources":["../../src/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Button as AriaButton, type PressEvent } from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { callSafely, useCopyFeedback, type CopyFeedbackState } from \"../lib/use-copy-feedback.js\";\n\nexport interface CopyButtonProps {\n  /** What goes on the clipboard. */\n  value: string;\n  /**\n   * The label at rest. Unless `aria-label` is set it is also the button's accessible name.\n   * @default \"Copy\"\n   */\n  children?: string;\n  /**\n   * An accessible name that differs from the visible label, for when the short label leans on its\n   * surroundings: visible \"Copy\" next to a code block, named \"Copy code\". It also prefixes the\n   * live-region announcement (\"Copy code: Copied\"). It stays constant while the visible label\n   * shows \"Copied\" or \"Failed\".\n   *\n   * Keep the visible label inside it, as written and ideally at the start (\"Copy\" → \"Copy code\",\n   * \"Copy page\" → \"Copy page draft\"), so a speech-input user can say what they see\n   * (WCAG 2.5.3 Label in Name). Unset or empty, the accessible name is `children`, as before.\n   */\n  \"aria-label\"?: string;\n  /** Only the icon, a square button. The label (or `aria-label`) is still its accessible name. */\n  iconOnly?: boolean;\n  /**\n   * `plain` has no border until hovered. `primary` is the filled brand button, for a copy that is the\n   * main action of its row or dialog. @default \"outline\"\n   */\n  variant?: \"outline\" | \"plain\" | \"primary\";\n  /**\n   * Control height, from the density scale: `sm` sits in a row, `md` matches a default Button.\n   * @default \"sm\"\n   */\n  size?: \"sm\" | \"md\";\n  isDisabled?: boolean;\n  /** Called once the text has reached the clipboard. */\n  onCopied?: () => void;\n  /**\n   * Called when the clipboard refused the text, with what it rejected with. The button already shows\n   * \"Failed\" and announces it; use this to keep a toast or log of your own.\n   */\n  onError?: (error: unknown) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-4\";\n\n/** CopyButton's variant names, mapped onto Button's. */\nconst BUTTON_VARIANT = {\n  outline: \"outlineNeutral\",\n  plain: \"ghost\",\n  primary: \"primary\",\n} as const;\n\n/** An icon-only button is square: as wide as its rung is tall. */\nconst ICON_ONLY_WIDTH = {\n  sm: \" w-(--density-control-h-sm) px-0\",\n  md: \" w-(--density-control-h-md) px-0\",\n} as const;\n\n/** The result icon's tone on a page-surface button; at rest it takes the label's ink. */\nconst RESULT_TONE: Record<CopyFeedbackState, string | undefined> = {\n  idle: undefined,\n  copied: \"text-success-strong\",\n  error: \"text-destructive-strong\",\n};\n\n/** The tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 12l5 5L20 6\"\n        pathLength={1}\n        className=\"[stroke-dasharray:1] motion-safe:animate-check-draw-calm\"\n      />\n    </svg>\n  );\n}\n\nfunction StateIcon({ state }: { state: CopyFeedbackState }) {\n  if (state === \"copied\") return <DrawnCheck />;\n  const common = {\n    className: ICON,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    \"aria-hidden\": true,\n  } as const;\n  if (state === \"error\") {\n    return (\n      <svg {...common}>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 8v4M12 16h.01\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\n/**\n * Copies a value and says so, calmly. The icon trades places in one soft breath\n * (copy, then a tick that draws itself, or an alert if the clipboard refused)\n * while the label's changed letters rise in, and the button never changes width:\n * its label cell reserves the widest of the three texts.\n *\n * It goes back to rest by itself after a moment, and a live region announces the\n * result. The accessible name is the resting label, or `aria-label` when the visible\n * label is too short to stand alone; it never changes with the state.\n *\n * @example\n * <CopyButton value={token} />\n * <CopyButton value={url} iconOnly variant=\"plain\" />\n * <CopyButton value={code} aria-label=\"Copy code\">Copy</CopyButton>\n * <CopyButton value={ticket} variant=\"primary\" size=\"md\" onError={() => toast(\"Copy failed\")}>\n *   Copy as ticket\n * </CopyButton>\n */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    children: label = \"Copy\",\n    \"aria-label\": ariaLabel,\n    iconOnly = false,\n    variant = \"outline\",\n    size = \"sm\",\n    isDisabled,\n    onCopied,\n    onError,\n    className,\n  },\n  ref,\n) {\n  const { state, copy } = useCopyFeedback();\n  // Empty falls back too: an empty aria-label would leave the button with no name at all.\n  const name = ariaLabel || label;\n  const text = state === \"copied\" ? \"Copied\" : state === \"error\" ? \"Failed\" : label;\n\n  // Not width-based like Button's press: an icon button presses a little deeper, every other one the same.\n  const pressStart = (event: PressEvent) => {\n    (event.target as HTMLElement).style.setProperty(\"--press-scale\", iconOnly ? \"0.96\" : \"0.97\");\n  };\n\n  const classes = cn(\n    buttonVariants({ variant: BUTTON_VARIANT[variant], size }) +\n      \" [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]\" +\n      (iconOnly ? ICON_ONLY_WIDTH[size] : \"\"),\n    className,\n  );\n  // On the brand fill the result icon keeps the label's ink: the success and destructive tones are set\n  // against the page surface, not the orange.\n  const onBrandFill = variant === \"primary\";\n\n  return (\n    <>\n      <AriaButton\n        ref={ref}\n        data-slot=\"button\"\n        data-copy-state={state}\n        aria-label={name}\n        isDisabled={isDisabled}\n        onPressStart={pressStart}\n        onPress={() => {\n          void copy(value, onError).then((ok) => {\n            if (ok) callSafely(() => onCopied?.());\n          });\n        }}\n        className={classes}\n      >\n        <IconSwap iconKey={state} calm className={cn(ICON, \"relative\")}>\n          <span className={onBrandFill ? undefined : RESULT_TONE[state]}>\n            <StateIcon state={state} />\n          </span>\n        </IconSwap>\n        {iconOnly ? null : (\n          // The cell reserves the widest state, so nothing moves but the letters. The inline padding gives blurred\n          // edge letters room before the horizontal clip; the negative margin keeps the box the same size.\n          <span\n            className=\"-mx-1 grid min-w-0 overflow-x-clip px-1 text-start whitespace-nowrap\"\n            aria-hidden=\"true\"\n          >\n            {[label, \"Copied\", \"Failed\"].map((measure) => (\n              <span key={measure} className=\"invisible col-start-1 row-start-1\">\n                {measure}\n              </span>\n            ))}\n            <span className=\"col-start-1 row-start-1 justify-self-start\">\n              <MorphText text={text} morphWidth={false} calm />\n            </span>\n          </span>\n        )}\n      </AriaButton>\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {state === \"idle\" ? \"\" : state === \"error\" ? name + \": Could not copy\" : name + \": Copied\"}\n      </span>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;AAsDA,MAAM,OAAO;;AAGb,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAGA,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;AACN;;AAGA,MAAM,cAA6D;CACjE,MAAM,KAAA;CACN,QAAQ;CACR,OAAO;AACT;;AAGA,SAAS,aAAa;CACpB,OACE,oBAAC,OAAD;EACE,WAAW;EACX,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EAEZ,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,YAAY;GACZ,WAAU;EACX,CAAA;CACE,CAAA;AAET;AAEA,SAAS,UAAU,EAAE,SAAuC;CAC1D,IAAI,UAAU,UAAU,OAAO,oBAAC,YAAD,CAAa,CAAA;CAC5C,MAAM,SAAS;EACb,WAAW;EACX,SAAS;EACT,MAAM;EACN,QAAQ;EACR,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,eAAe;CACjB;CACA,IAAI,UAAU,SACZ,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAM,CAAA,GAChC,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,CAC1B;;CAGT,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,QAAD;GAAM,GAAE;GAAI,GAAE;GAAI,OAAM;GAAK,QAAO;GAAK,IAAG;EAAK,CAAA,GACjD,oBAAC,QAAD,EAAM,GAAE,0DAA2D,CAAA,CAChE;;AAET;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,aAAa,WAA+C,SAAS,WAChF,EACE,OACA,UAAU,QAAQ,QAClB,cAAc,WACd,WAAW,OACX,UAAU,WACV,OAAO,MACP,YACA,UACA,SACA,aAEF,KACA;CACA,MAAM,EAAE,OAAO,SAAS,gBAAgB;CAExC,MAAM,OAAO,aAAa;CAC1B,MAAM,OAAO,UAAU,WAAW,WAAW,UAAU,UAAU,WAAW;CAG5E,MAAM,cAAc,UAAsB;EACxC,MAAO,OAAuB,MAAM,YAAY,iBAAiB,WAAW,SAAS,MAAM;CAC7F;CAEA,MAAM,UAAU,GACd,eAAe;EAAE,SAAS,eAAe;EAAU;CAAK,CAAC,IACvD,sFACC,WAAW,gBAAgB,QAAQ,KACtC,SACF;CAGA,MAAM,cAAc,YAAY;CAEhC,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAACA,QAAD;EACO;EACL,aAAU;EACV,mBAAiB;EACjB,cAAY;EACA;EACZ,cAAc;EACd,eAAe;GACb,KAAU,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO;IACrC,IAAI,IAAI,iBAAiB,WAAW,CAAC;GACvC,CAAC;EACH;EACA,WAAW;EAZb,UAAA,CAcE,oBAAC,UAAD;GAAU,SAAS;GAAO,MAAA;GAAK,WAAW,GAAG,MAAM,UAAU;GAC3D,UAAA,oBAAC,QAAD;IAAM,WAAW,cAAc,KAAA,IAAY,YAAY;IACrD,UAAA,oBAAC,WAAD,EAAkB,MAAQ,CAAA;GACtB,CAAA;EACE,CAAA,GACT,WAAW,OAGV,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GAFd,UAAA,CAIG;IAAC;IAAO;IAAU;GAAQ,CAAC,CAAC,KAAK,YAChC,oBAAC,QAAD;IAAoB,WAAU;IAC3B,UAAA;GACG,GAFK,OAEL,CACP,GACD,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,WAAD;KAAiB;KAAM,YAAY;KAAO,MAAA;IAAM,CAAA;GAC5C,CAAA,CACF;EAEE,CAAA,CAAA;CACZ,CAAA,GAAA,oBAAC,QAAD;EAAM,WAAU;EAAU,MAAK;EAAS,aAAU;EAC/C,UAAA,UAAU,SAAS,KAAK,UAAU,UAAU,OAAO,qBAAqB,OAAO;CAC5E,CAAA,CACN,EAAA,CAAA;AAEN,CAAC"}

package/dist/file-drop-zone/file-drop-zone.d.ts

@@ -18,14 +18,30 @@ import { ReactNode } from "react";
  * source text, so a class assembled at runtime is invisible to it and would
  * simply never be emitted.
  */
-export declare const fileDropZoneVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const fileDropZonePromptVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const fileDropZoneHintVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const fileDropZoneVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const fileDropZonePromptVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const fileDropZoneHintVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A place to drop or choose files.
  *
  * @example
  * <FileDropZone
+ *   size="sm"
+ *   label="Company logo"
+ *   prompt="Drop a logo here"
+ *   hint="PNG, JPG or SVG, up to 5 MB."
+ *   acceptedFileTypes={["image/*"]}
+ *   onFiles={(files) => upload(files[0])}
+ * />
+ *
+ * @example
+ * <FileDropZone
  *   label="Contract"
  *   prompt="Drop a contract here"
  *   hint="PDF only, up to 20 MB."
@@ -63,6 +79,16 @@ export interface FileDropZoneProps {
   buttonLabel?: string;
   /** Take no file: the button is disabled and a drop is refused. */
   isDisabled?: boolean;
+  /**
+   * How much room the zone takes. `md` is the stacked zone (prompt, button and
+   * hint centred in a tall dashed area). `sm` is one row as tall as a medium
+   * field, for a form row such as a logo upload: the prompt, the button and the
+   * hint sit side by side, and when the row is narrow the hint truncates first.
+   * Same parts, same order, same keyboard path at both sizes.
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md";
   /** Extra classes for the zone. Merged last, so they win conflicts with ours. */
   className?: string;
 }

package/dist/file-drop-zone/file-drop-zone.js

@@ -27,7 +27,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * simply never be emitted.
 */
 const fileDropZoneVariants = cva([
-	"flex flex-col items-center gap-2 px-4 py-8 text-center",
+	"flex items-center",
 	"rounded-panel border-(length:--border-width) border-dashed border-border",
 	"box-border font-sans text-foreground",
 	"outline-none",
@@ -39,14 +39,32 @@ const fileDropZoneVariants = cva([
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"data-[focus-visible]:outline-(--color-ring)",
 	"data-[disabled]:cursor-not-allowed"
-]);
-const fileDropZonePromptVariants = cva("m-0 text-sm leading-(--leading-normal)");
-const fileDropZoneHintVariants = cva("m-0 text-xs leading-(--leading-normal) text-muted-foreground");
+], {
+	variants: { size: {
+		md: "flex-col gap-2 px-4 py-8 text-center",
+		sm: "min-h-(--density-control-h-md) flex-row justify-center gap-2 px-3 py-0.5 text-start"
+	} },
+	defaultVariants: { size: "md" }
+});
+const fileDropZonePromptVariants = cva("m-0 text-sm leading-(--leading-normal)", {
+	variants: { size: {
+		md: "",
+		sm: "min-w-0 truncate"
+	} },
+	defaultVariants: { size: "md" }
+});
+const fileDropZoneHintVariants = cva("m-0 text-xs leading-(--leading-normal) text-muted-foreground", {
+	variants: { size: {
+		md: "",
+		sm: "min-w-0 flex-1 basis-0 truncate"
+	} },
+	defaultVariants: { size: "md" }
+});
 async function filesOf(event) {
 	const items = event.items.filter((item) => item.kind === "file");
 	return Promise.all(items.map((item) => item.getFile()));
 }
-const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPrompt, hint, acceptedFileTypes, allowsMultiple = false, onFiles, buttonLabel, isDisabled = false, className }, ref) {
+const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPrompt, hint, acceptedFileTypes, allowsMultiple = false, onFiles, buttonLabel, isDisabled = false, size = "md", className }, ref) {
 	const hand = (files) => {
 		if (isDisabled || files.length === 0) return;
 		onFiles(allowsMultiple ? files : files.slice(0, 1));
@@ -64,7 +82,7 @@ const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPromp
 		"aria-label": label,
 		"data-slot": "file-drop-zone",
 		isDisabled,
-		className: cn(fileDropZoneVariants(), className),
+		className: cn(fileDropZoneVariants({ size }), className),
 		onDropEnter: (event) => lean(event.x, event.y),
 		onDropMove: (event) => lean(event.x, event.y),
 		onDrop: (event) => {
@@ -83,7 +101,7 @@ const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPromp
 			}),
 			/* @__PURE__ */ jsx("p", {
 				"data-slot": "file-drop-zone-prompt",
-				className: cn(fileDropZonePromptVariants(), "relative"),
+				className: cn(fileDropZonePromptVariants({ size }), "relative"),
 				children: dropPrompt == null ? prompt : /* @__PURE__ */ jsx(SwapText, {
 					swapKey: isDropTarget ? "drop" : "prompt",
 					className: "block",
@@ -104,7 +122,7 @@ const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPromp
 			}),
 			hint == null ? null : /* @__PURE__ */ jsx("p", {
 				"data-slot": "file-drop-zone-hint",
-				className: cn(fileDropZoneHintVariants(), "relative"),
+				className: cn(fileDropZoneHintVariants({ size }), "relative"),
 				children: hint
 			})
 		] })

package/dist/file-drop-zone/file-drop-zone.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-drop-zone.js","names":["AriaDropZone","AriaFileTrigger","Button"],"sources":["../../src/file-drop-zone/file-drop-zone.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport {\n  DropZone as AriaDropZone,\n  FileTrigger as AriaFileTrigger,\n  type DropZoneProps as AriaDropZoneProps,\n  type FileDropItem,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * FileDropZone: a dashed area a file can be dropped on, with a \"Choose file\"\n * button that opens the system's file dialog.\n *\n * Built on React Aria's `DropZone` and `FileTrigger`. The browser's own\n * `<input type=\"file\">` (\"Choose Files / No file chosen\") is never shown: its\n * look differs on every browser and it cannot be styled. FileTrigger keeps a\n * real file input, visually hidden and out of the Tab order, and opens it when\n * the button is pressed, so the keyboard path is Tab to the button, then Enter\n * or Space.\n *\n * The zone states what it takes before a file is chosen: `hint` is where the\n * accepted types and the size limit go.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const fileDropZoneVariants = cva([\n  \"flex flex-col items-center gap-2 px-4 py-8 text-center\",\n  \"rounded-panel border-(length:--border-width) border-dashed border-border\",\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  \"box-border font-sans text-foreground\",\n  \"outline-none\",\n  // Fill and edge ease, a file over it breathes and light follows the pointer (see drop-zone-motion).\n  \"drop-zone-motion\",\n  \"data-[hovered]:bg-muted\",\n  \"data-[drop-target]:border-primary data-[drop-target]:bg-muted\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // Disabled dims only the button (its own disabled look). Dimming the whole\n  // zone took the prompt and hint below the 4.5:1 contrast floor.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\nexport const fileDropZonePromptVariants = cva(\"m-0 text-sm leading-(--leading-normal)\");\n\nexport const fileDropZoneHintVariants = cva(\n  \"m-0 text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * A place to drop or choose files.\n *\n * @example\n * <FileDropZone\n *   label=\"Contract\"\n *   prompt=\"Drop a contract here\"\n *   hint=\"PDF only, up to 20 MB.\"\n *   acceptedFileTypes={[\"application/pdf\"]}\n *   onFiles={(files) => upload(files[0])}\n * />\n */\nexport interface FileDropZoneProps {\n  /** What the file is. The drop zone's accessible name. */\n  label: string;\n  /** The zone's main line: what to drop here, or the chosen file's name. */\n  prompt: ReactNode;\n  /**\n   * What the prompt says while a file is over the zone. When it is given the\n   * prompt swaps to it (the new text rises in, the old lifts away) and back again.\n   */\n  dropPrompt?: ReactNode;\n  /** The types and size accepted, and anything else to know before choosing. */\n  hint?: ReactNode;\n  /**\n   * MIME types or extensions the file dialog offers, as for a native\n   * `accept`. A drop is not filtered: what was dropped is handed over and the\n   * consumer decides what it can read.\n   */\n  acceptedFileTypes?: string[];\n  /** Take several files at once. Otherwise only the first is handed over. */\n  allowsMultiple?: boolean;\n  /** Called with the chosen or dropped files. */\n  onFiles: (files: File[]) => void;\n  /**\n   * The button's text.\n   *\n   * @default \"Choose file\", or \"Choose files\" with `allowsMultiple`\n   */\n  buttonLabel?: string;\n  /** Take no file: the button is disabled and a drop is refused. */\n  isDisabled?: boolean;\n  /** Extra classes for the zone. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\ntype DropEvent = Parameters<NonNullable<AriaDropZoneProps[\"onDrop\"]>>[0];\n\nasync function filesOf(event: DropEvent): Promise<File[]> {\n  const items = event.items.filter((item): item is FileDropItem => item.kind === \"file\");\n  return Promise.all(items.map((item) => item.getFile()));\n}\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(function FileDropZone(\n  {\n    label,\n    prompt,\n    dropPrompt,\n    hint,\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onFiles,\n    buttonLabel,\n    isDisabled = false,\n    className,\n  },\n  ref,\n) {\n  const hand = (files: File[]) => {\n    if (isDisabled || files.length === 0) return;\n    onFiles(allowsMultiple ? files : files.slice(0, 1));\n  };\n  const zone = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, zone), [ref]);\n  // Where the file is over the zone, as percentages, for the light that follows it.\n  const lean = (x: number, y: number) => {\n    const el = zone.current;\n    if (!el) return;\n    el.style.setProperty(\"--drop-x\", `${(x / Math.max(1, el.offsetWidth)) * 100}%`);\n    el.style.setProperty(\"--drop-y\", `${(y / Math.max(1, el.offsetHeight)) * 100}%`);\n  };\n  return (\n    <AriaDropZone\n      ref={refs}\n      aria-label={label}\n      data-slot=\"file-drop-zone\"\n      isDisabled={isDisabled}\n      className={cn(fileDropZoneVariants(), className)}\n      onDropEnter={(event) => lean(event.x, event.y)}\n      onDropMove={(event) => lean(event.x, event.y)}\n      onDrop={(event) => {\n        void filesOf(event).then(hand);\n      }}\n    >\n      {({ isDropTarget }) => (\n        <>\n          {/* The wash and the edge light sit under the content and follow the file. */}\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-wash\" className=\"drop-wash\" />\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-glow\" className=\"drop-glow\" />\n          <p data-slot=\"file-drop-zone-prompt\" className={cn(fileDropZonePromptVariants(), \"relative\")}>\n            {dropPrompt == null ? (\n              prompt\n            ) : (\n              <SwapText swapKey={isDropTarget ? \"drop\" : \"prompt\"} className=\"block\">\n                {isDropTarget ? dropPrompt : prompt}\n              </SwapText>\n            )}\n          </p>\n          <AriaFileTrigger\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={allowsMultiple}\n            onSelect={(list) => hand(Array.from(list ?? []))}\n          >\n            <Button variant=\"outlineNeutral\" size=\"sm\" isDisabled={isDisabled} className=\"relative\">\n              {buttonLabel ?? (allowsMultiple ? \"Choose files\" : \"Choose file\")}\n            </Button>\n          </AriaFileTrigger>\n          {hint == null ? null : (\n            <p\n              data-slot=\"file-drop-zone-hint\"\n              className={cn(fileDropZoneHintVariants(), \"relative\")}\n            >\n              {hint}\n            </p>\n          )}\n        </>\n      )}\n    </AriaDropZone>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,uBAAuB,IAAI;CACtC;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,6BAA6B,IAAI,wCAAwC;AAEtF,MAAa,2BAA2B,IACtC,8DACF;AAkDA,eAAe,QAAQ,OAAmC;CACxD,MAAM,QAAQ,MAAM,MAAM,QAAQ,SAA+B,KAAK,SAAS,MAAM;CACrF,OAAO,QAAQ,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,CAAC,CAAC;AACxD;AAEA,MAAa,eAAe,WAA8C,SAAS,aACjF,EACE,OACA,QACA,YACA,MACA,mBACA,iBAAiB,OACjB,SACA,aACA,aAAa,OACb,aAEF,KACA;CACA,MAAM,QAAQ,UAAkB;EAC9B,IAAI,cAAc,MAAM,WAAW,GAAG;EACtC,QAAQ,iBAAiB,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;CACpD;CACA,MAAM,OAAO,OAA8B,IAAI;CAC/C,MAAM,OAAO,cAAc,UAAU,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC;CAEtD,MAAM,QAAQ,GAAW,MAAc;EACrC,MAAM,KAAK,KAAK;EAChB,IAAI,CAAC,IAAI;EACT,GAAG,MAAM,YAAY,YAAY,GAAI,IAAI,KAAK,IAAI,GAAG,GAAG,WAAW,IAAK,IAAI,EAAE;EAC9E,GAAG,MAAM,YAAY,YAAY,GAAI,IAAI,KAAK,IAAI,GAAG,GAAG,YAAY,IAAK,IAAI,EAAE;CACjF;CACA,OACE,oBAACA,UAAD;EACE,KAAK;EACL,cAAY;EACZ,aAAU;EACE;EACZ,WAAW,GAAG,qBAAqB,GAAG,SAAS;EAC/C,cAAc,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;EAC7C,aAAa,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;EAC5C,SAAS,UAAU;GACjB,QAAa,KAAK,CAAC,CAAC,KAAK,IAAI;EAC/B;EAEE,WAAA,EAAE,mBACF,qBAAA,YAAA,EAAA,UAAA;GAEE,oBAAC,QAAD;IAAM,eAAY;IAAO,aAAU;IAAsB,WAAU;GAAa,CAAA;GAChF,oBAAC,QAAD;IAAM,eAAY;IAAO,aAAU;IAAsB,WAAU;GAAa,CAAA;GAChF,oBAAC,KAAD;IAAG,aAAU;IAAwB,WAAW,GAAG,2BAA2B,GAAG,UAAU;IACxF,UAAA,cAAc,OACb,SAEA,oBAAC,UAAD;KAAU,SAAS,eAAe,SAAS;KAAU,WAAU;KAC5D,UAAA,eAAe,aAAa;IACrB,CAAA;GAEX,CAAA;GACH,oBAACC,aAAD;IACqB;IACH;IAChB,WAAW,SAAS,KAAK,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC;IAE/C,UAAA,oBAACC,UAAD;KAAQ,SAAQ;KAAiB,MAAK;KAAiB;KAAY,WAAU;KAC1E,UAAA,gBAAgB,iBAAiB,iBAAiB;IAC7C,CAAA;GACO,CAAA;GAChB,QAAQ,OAAO,OACd,oBAAC,KAAD;IACE,aAAU;IACV,WAAW,GAAG,yBAAyB,GAAG,UAAU;IAEnD,UAAA;GACA,CAAA;EAEL,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"file-drop-zone.js","names":["AriaDropZone","AriaFileTrigger","Button"],"sources":["../../src/file-drop-zone/file-drop-zone.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport {\n  DropZone as AriaDropZone,\n  FileTrigger as AriaFileTrigger,\n  type DropZoneProps as AriaDropZoneProps,\n  type FileDropItem,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * FileDropZone: a dashed area a file can be dropped on, with a \"Choose file\"\n * button that opens the system's file dialog.\n *\n * Built on React Aria's `DropZone` and `FileTrigger`. The browser's own\n * `<input type=\"file\">` (\"Choose Files / No file chosen\") is never shown: its\n * look differs on every browser and it cannot be styled. FileTrigger keeps a\n * real file input, visually hidden and out of the Tab order, and opens it when\n * the button is pressed, so the keyboard path is Tab to the button, then Enter\n * or Space.\n *\n * The zone states what it takes before a file is chosen: `hint` is where the\n * accepted types and the size limit go.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const fileDropZoneVariants = cva(\n  [\n    \"flex items-center\",\n    \"rounded-panel border-(length:--border-width) border-dashed border-border\",\n    // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n    \"box-border font-sans text-foreground\",\n    \"outline-none\",\n    // Fill and edge ease, a file over it breathes and light follows the pointer (see drop-zone-motion).\n    \"drop-zone-motion\",\n    \"data-[hovered]:bg-muted\",\n    \"data-[drop-target]:border-primary data-[drop-target]:bg-muted\",\n    \"data-[focus-visible]:outline-solid\",\n    \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n    \"data-[focus-visible]:outline-(--color-ring)\",\n    // Disabled dims only the button (its own disabled look). Dimming the whole\n    // zone took the prompt and hint below the 4.5:1 contrast floor.\n    \"data-[disabled]:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      size: {\n        // A stacked zone: prompt, button, hint, centred.\n        md: \"flex-col gap-2 px-4 py-8 text-center\",\n        // One row as tall as a medium field (the sm button plus a hairline of\n        // padding), for a form row such as a logo upload. Nothing wraps: the\n        // hint gives way first, then the prompt; the button (shrink-0) stays whole.\n        sm: \"min-h-(--density-control-h-md) flex-row justify-center gap-2 px-3 py-0.5 text-start\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport const fileDropZonePromptVariants = cva(\"m-0 text-sm leading-(--leading-normal)\", {\n  variants: {\n    size: {\n      md: \"\",\n      sm: \"min-w-0 truncate\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const fileDropZoneHintVariants = cva(\n  \"m-0 text-xs leading-(--leading-normal) text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        md: \"\",\n        // Takes only the room left over, so it is the first to truncate.\n        sm: \"min-w-0 flex-1 basis-0 truncate\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A place to drop or choose files.\n *\n * @example\n * <FileDropZone\n *   size=\"sm\"\n *   label=\"Company logo\"\n *   prompt=\"Drop a logo here\"\n *   hint=\"PNG, JPG or SVG, up to 5 MB.\"\n *   acceptedFileTypes={[\"image/*\"]}\n *   onFiles={(files) => upload(files[0])}\n * />\n *\n * @example\n * <FileDropZone\n *   label=\"Contract\"\n *   prompt=\"Drop a contract here\"\n *   hint=\"PDF only, up to 20 MB.\"\n *   acceptedFileTypes={[\"application/pdf\"]}\n *   onFiles={(files) => upload(files[0])}\n * />\n */\nexport interface FileDropZoneProps {\n  /** What the file is. The drop zone's accessible name. */\n  label: string;\n  /** The zone's main line: what to drop here, or the chosen file's name. */\n  prompt: ReactNode;\n  /**\n   * What the prompt says while a file is over the zone. When it is given the\n   * prompt swaps to it (the new text rises in, the old lifts away) and back again.\n   */\n  dropPrompt?: ReactNode;\n  /** The types and size accepted, and anything else to know before choosing. */\n  hint?: ReactNode;\n  /**\n   * MIME types or extensions the file dialog offers, as for a native\n   * `accept`. A drop is not filtered: what was dropped is handed over and the\n   * consumer decides what it can read.\n   */\n  acceptedFileTypes?: string[];\n  /** Take several files at once. Otherwise only the first is handed over. */\n  allowsMultiple?: boolean;\n  /** Called with the chosen or dropped files. */\n  onFiles: (files: File[]) => void;\n  /**\n   * The button's text.\n   *\n   * @default \"Choose file\", or \"Choose files\" with `allowsMultiple`\n   */\n  buttonLabel?: string;\n  /** Take no file: the button is disabled and a drop is refused. */\n  isDisabled?: boolean;\n  /**\n   * How much room the zone takes. `md` is the stacked zone (prompt, button and\n   * hint centred in a tall dashed area). `sm` is one row as tall as a medium\n   * field, for a form row such as a logo upload: the prompt, the button and the\n   * hint sit side by side, and when the row is narrow the hint truncates first.\n   * Same parts, same order, same keyboard path at both sizes.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /** Extra classes for the zone. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\ntype DropEvent = Parameters<NonNullable<AriaDropZoneProps[\"onDrop\"]>>[0];\n\nasync function filesOf(event: DropEvent): Promise<File[]> {\n  const items = event.items.filter((item): item is FileDropItem => item.kind === \"file\");\n  return Promise.all(items.map((item) => item.getFile()));\n}\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(function FileDropZone(\n  {\n    label,\n    prompt,\n    dropPrompt,\n    hint,\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onFiles,\n    buttonLabel,\n    isDisabled = false,\n    size = \"md\",\n    className,\n  },\n  ref,\n) {\n  const hand = (files: File[]) => {\n    if (isDisabled || files.length === 0) return;\n    onFiles(allowsMultiple ? files : files.slice(0, 1));\n  };\n  const zone = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, zone), [ref]);\n  // Where the file is over the zone, as percentages, for the light that follows it.\n  const lean = (x: number, y: number) => {\n    const el = zone.current;\n    if (!el) return;\n    el.style.setProperty(\"--drop-x\", `${(x / Math.max(1, el.offsetWidth)) * 100}%`);\n    el.style.setProperty(\"--drop-y\", `${(y / Math.max(1, el.offsetHeight)) * 100}%`);\n  };\n  return (\n    <AriaDropZone\n      ref={refs}\n      aria-label={label}\n      data-slot=\"file-drop-zone\"\n      isDisabled={isDisabled}\n      className={cn(fileDropZoneVariants({ size }), className)}\n      onDropEnter={(event) => lean(event.x, event.y)}\n      onDropMove={(event) => lean(event.x, event.y)}\n      onDrop={(event) => {\n        void filesOf(event).then(hand);\n      }}\n    >\n      {({ isDropTarget }) => (\n        <>\n          {/* The wash and the edge light sit under the content and follow the file. */}\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-wash\" className=\"drop-wash\" />\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-glow\" className=\"drop-glow\" />\n          <p\n            data-slot=\"file-drop-zone-prompt\"\n            className={cn(fileDropZonePromptVariants({ size }), \"relative\")}\n          >\n            {dropPrompt == null ? (\n              prompt\n            ) : (\n              <SwapText swapKey={isDropTarget ? \"drop\" : \"prompt\"} className=\"block\">\n                {isDropTarget ? dropPrompt : prompt}\n              </SwapText>\n            )}\n          </p>\n          <AriaFileTrigger\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={allowsMultiple}\n            onSelect={(list) => hand(Array.from(list ?? []))}\n          >\n            <Button variant=\"outlineNeutral\" size=\"sm\" isDisabled={isDisabled} className=\"relative\">\n              {buttonLabel ?? (allowsMultiple ? \"Choose files\" : \"Choose file\")}\n            </Button>\n          </AriaFileTrigger>\n          {hint == null ? null : (\n            <p\n              data-slot=\"file-drop-zone-hint\"\n              className={cn(fileDropZoneHintVariants({ size }), \"relative\")}\n            >\n              {hint}\n            </p>\n          )}\n        </>\n      )}\n    </AriaDropZone>\n  );\n});\n"],"mappings":"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"}

package/dist/gauge/gauge.d.ts

@@ -14,10 +14,17 @@ import { ComponentPropsWithoutRef } from "react";
  * status and detail rise in when they change, from the side the value moved
  * toward.
  *
+ * A missing value (`null`) shows an empty ring, a dash and "No data", and is
+ * read as an image named "<label>: No data" rather than a meter, since there
+ * is nothing to measure. Size `sm` is the number alone in a small ring, for a
+ * table cell or a card corner; the label and detail stay for assistive
+ * technology.
+ *
  * Plain SVG and CSS. One small spring tween writes the ring and the count
  * straight to the DOM. The ring is a `meter` for assistive technology.
  */
 export type GaugeTone = "primary" | "success" | "warning" | "danger";
+export type GaugeSize = "sm" | "md";
 export interface GaugeThreshold {
   /** The band starts at this value (in the same unit as `value`). */
   from: number;
@@ -26,7 +33,8 @@ export interface GaugeThreshold {
   label: string;
 }
 export interface GaugeProps extends Omit<ComponentPropsWithoutRef<"figure">, "children"> {
-  value: number;
+  /** The value. `null` (or a value that is not a finite number) is no data: an empty ring that reads `missingLabel`. */
+  value: number | null;
   /** @default 0 */
   min?: number;
   /** @default 100 */
@@ -39,6 +47,15 @@ export interface GaugeProps extends Omit<ComponentPropsWithoutRef<"figure">, "ch
   tone?: GaugeTone;
   /** Bands that set the tone and name the state. */
   thresholds?: GaugeThreshold[];
+  /**
+   * `"sm"` is the number alone in a small ring (48px; set `--gauge-size` to
+   * change it), coloured by the tone. The percent sign, the status line and
+   * the caption are not drawn; the label, band and detail are still read.
+   * @default "md"
+   */
+  size?: GaugeSize;
+  /** Shown and read in place of the value when it is missing. @default "No data" */
+  missingLabel?: string;
 }
 export declare const Gauge: import("react").ForwardRefExoticComponent<GaugeProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion

package/dist/gauge/gauge.js

@@ -18,13 +18,16 @@ function ringFor(sweep) {
 	return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;
 }
 const TRACK = ringFor(1);
-const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, detail, tone = "primary", thresholds, className, ...props }, ref) {
+const Gauge = forwardRef(function Gauge({ value: given, min = 0, max = 100, label, detail, tone = "primary", thresholds, size = "md", missingLabel = "No data", className, ...props }, ref) {
+	const missing = typeof given !== "number" || !Number.isFinite(given);
+	const value = missing ? min : given;
+	const small = size === "sm";
 	const safeMax = max > min ? max : min + 1;
 	const percentage = clamp((value - min) / (safeMax - min), 0, 1);
 	const displayValue = Math.round(percentage * 100);
 	const bands = [...thresholds ?? []].sort((a, b) => a.from - b.from);
 	const bandAt = (at) => bands.filter((band) => at >= band.from - 1e-6).pop();
-	const band = bandAt(value);
+	const band = missing ? void 0 : bandAt(value);
 	const figure = useRef(null);
 	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
 	const ring = useRef(null);
@@ -47,14 +50,16 @@ const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, deta
 		bandAt,
 		min,
 		span: safeMax - min,
-		filled
+		filled,
+		missing
 	});
 	useIsomorphicLayoutEffect(() => {
 		latest.current = {
 			bandAt,
 			min,
 			span: safeMax - min,
-			filled
+			filled,
+			missing
 		};
 	});
 	const shownRef = useRef(shownBand);
@@ -67,9 +72,9 @@ const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, deta
 		ring.current?.setAttribute("d", ringFor(to));
 		if (ring.current) ring.current.style.opacity = String(clamp(to / .02, 0, 1));
 		const shown = clamp(count.current.value, 0, 100);
-		if (digits.current) digits.current.textContent = String(Math.round(shown));
-		const { bandAt: pick, min: lo, span, filled: done } = latest.current;
-		if (done) {
+		const { bandAt: pick, min: lo, span, filled: done, missing: empty } = latest.current;
+		if (digits.current) digits.current.textContent = empty ? "–" : String(Math.round(shown));
+		if (done && !empty) {
 			const next = pick(lo + shown / 100 * span);
 			const current = shownRef.current;
 			if (next?.from !== current?.from || next?.label !== current?.label) {
@@ -111,6 +116,7 @@ const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, deta
 		seen,
 		paint
 	]);
+	useIsomorphicLayoutEffect(paint, [missing, paint]);
 	useEffect(() => {
 		const sweeping = sweep.current;
 		const number = count.current;
@@ -131,23 +137,31 @@ const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, deta
 		observer.observe(node);
 		return () => observer.disconnect();
 	}, []);
-	const shown = filled ? shownBand : band;
-	const activeTone = (filled ? shownBand : band)?.tone ?? tone;
+	const shown = missing ? void 0 : filled ? shownBand : band;
+	const activeTone = shown?.tone ?? tone;
 	const clampedValue = clamp(value, min, safeMax);
+	const reading = missing ? {
+		role: "img",
+		"aria-label": `${label}: ${missingLabel}`
+	} : {
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": safeMax,
+		"aria-valuenow": clampedValue,
+		"aria-valuetext": `${displayValue}%${band ? `, ${band.label}` : ""}`
+	};
 	return /* @__PURE__ */ jsxs("figure", {
 		ref: refs,
 		...props,
 		"data-slot": "gauge",
 		"data-tone": activeTone,
+		"data-size": small ? size : void 0,
+		"data-missing": missing || void 0,
 		className: cn("gauge", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			"data-slot": "gauge-visual",
-			role: "meter",
-			"aria-label": label,
-			"aria-valuemin": min,
-			"aria-valuemax": safeMax,
-			"aria-valuenow": clampedValue,
-			"aria-valuetext": `${displayValue}%${band ? `, ${band.label}` : ""}`,
+			...reading,
 			className: "gauge-visual",
 			children: [/* @__PURE__ */ jsxs("svg", {
 				viewBox: "0 0 100 90",
@@ -172,28 +186,28 @@ const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, deta
 							ref: digits,
 							className: "gauge-digits"
 						}),
-						/* @__PURE__ */ jsx("span", {
+						small || missing ? null : /* @__PURE__ */ jsx("span", {
 							className: "gauge-unit",
 							children: "%"
 						}),
 						/* @__PURE__ */ jsx("span", {
 							ref: sizer,
 							className: "gauge-sizer",
-							children: displayValue
+							children: missing ? "–" : displayValue
 						})
 					]
-				}), thresholds ? /* @__PURE__ */ jsx("span", {
+				}), !small && (thresholds || missing) ? /* @__PURE__ */ jsx("span", {
 					className: "gauge-status",
 					children: /* @__PURE__ */ jsx(SwapText, {
-						swapKey: filled ? shown?.label ?? "" : "",
+						swapKey: missing ? missingLabel : filled ? shown?.label ?? "" : "",
 						dir: moved.direction,
 						className: "block",
-						children: shown?.label
+						children: missing ? missingLabel : shown?.label
 					})
 				}) : null]
 			})]
 		}), /* @__PURE__ */ jsxs("figcaption", {
-			className: "grid min-w-0 gap-0.5",
+			className: small ? "sr-only" : "grid min-w-0 gap-0.5",
 			children: [/* @__PURE__ */ jsx("strong", {
 				className: "text-sm font-medium text-foreground",
 				children: /* @__PURE__ */ jsx(SwapText, {

package/dist/gauge/gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, REVEAL, SMOOTH } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Gauge: one value against a range, as a ring open at the bottom with the\n * number at its centre. Use it for a score or a fill level; use Progress for a\n * task that finishes.\n *\n * The ring fills the first time it is seen, slowly and without overshoot, like\n * a ring closing. After that it springs to each new value with a little life\n * while the count follows without overshooting. A band that starts at\n * `from` sets the colour and names the state (\"Healthy\", \"At risk\"): the\n * highest band the value reaches wins, and it changes exactly as the count\n * crosses the threshold, so state never rests on colour alone. The label,\n * status and detail rise in when they change, from the side the value moved\n * toward.\n *\n * Plain SVG and CSS. One small spring tween writes the ring and the count\n * straight to the DOM. The ring is a `meter` for assistive technology.\n */\nexport type GaugeTone = \"primary\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface GaugeThreshold {\n  /** The band starts at this value (in the same unit as `value`). */\n  from: number;\n  tone: GaugeTone;\n  /** Names the state. Shown under the number and announced with the value. */\n  label: string;\n}\n\nexport interface GaugeProps extends Omit<ComponentPropsWithoutRef<\"figure\">, \"children\"> {\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** What is measured. Names the meter. */\n  label: string;\n  /** A line under the label, such as \"Up 4 from last week\". */\n  detail?: string;\n  /** The colour when no band applies. @default \"primary\" */\n  tone?: GaugeTone;\n  /** Bands that set the tone and name the state. */\n  thresholds?: GaugeThreshold[];\n}\n\n/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */\nconst RADIUS = 42;\nconst START = -135;\nconst SPAN = 270;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\nfunction ringFor(sweep: number) {\n  const end = START + SPAN * clamp(sweep, 0, 1);\n  const at = (angle: number) =>\n    `${(50 + RADIUS * Math.sin((angle * Math.PI) / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos((angle * Math.PI) / 180)).toFixed(3)}`;\n  return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;\n}\nconst TRACK = ringFor(1);\n\nexport const Gauge = forwardRef<HTMLElement, GaugeProps>(function Gauge(\n  { value, min = 0, max = 100, label, detail, tone = \"primary\", thresholds, className, ...props },\n  ref,\n) {\n  const safeMax = max > min ? max : min + 1;\n  const percentage = clamp((value - min) / (safeMax - min), 0, 1);\n  const displayValue = Math.round(percentage * 100);\n  const bands = [...(thresholds ?? [])].sort((a, b) => a.from - b.from);\n  const bandAt = (at: number) => bands.filter((band) => at >= band.from - 1e-6).pop();\n  const band = bandAt(value);\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const ring = useRef<SVGPathElement>(null);\n  const digits = useRef<HTMLSpanElement>(null);\n  const sizer = useRef<HTMLSpanElement>(null);\n  const sweep = useRef(live(0));\n  const count = useRef(live(0));\n\n  const [seen, setSeen] = useState(false);\n  const [filled, setFilled] = useState(false);\n  // The band on screen: after the first fill it follows the number as it counts.\n  const [shownBand, setShownBand] = useState(band);\n  const [moved, setMoved] = useState({ value: displayValue, direction: 1 });\n  if (moved.value !== displayValue) {\n    setMoved({ value: displayValue, direction: displayValue < moved.value ? -1 : 1 });\n  }\n\n  const latest = useRef({ bandAt, min, span: safeMax - min, filled });\n  useIsomorphicLayoutEffect(() => {\n    latest.current = { bandAt, min, span: safeMax - min, filled };\n  });\n  const shownRef = useRef(shownBand);\n  useIsomorphicLayoutEffect(() => {\n    shownRef.current = shownBand;\n  });\n\n  /** One writer: the ring, its fade-in over the first sliver, and the count. */\n  const paint = useCallback(() => {\n    const to = clamp(sweep.current.value, 0, 1);\n    ring.current?.setAttribute(\"d\", ringFor(to));\n    if (ring.current) ring.current.style.opacity = String(clamp(to / 0.02, 0, 1));\n    const shown = clamp(count.current.value, 0, 100);\n    if (digits.current) digits.current.textContent = String(Math.round(shown));\n    // After the first fill the state follows the number on screen, so the colour and label change as the count crosses a threshold.\n    const { bandAt: pick, min: lo, span, filled: done } = latest.current;\n    if (done) {\n      const next = pick(lo + (shown / 100) * span);\n      const current = shownRef.current;\n      if (next?.from !== current?.from || next?.label !== current?.label) {\n        shownRef.current = next;\n        setShownBand(next);\n      }\n    }\n  }, []);\n\n  // The ring fills once half of it is in view.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setSeen(true);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first fill is slower and never overshoots; later values spring to place, the count a beat calmer.\n  const bandRef = useRef(band);\n  useIsomorphicLayoutEffect(() => {\n    bandRef.current = band;\n  });\n  useEffect(() => {\n    if (!seen) return;\n    const first = !latest.current.filled;\n    retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);\n    retarget(\n      count.current,\n      percentage * 100,\n      first ? REVEAL : SMOOTH,\n      paint,\n      0,\n      first\n        ? () => {\n            latest.current.filled = true;\n            shownRef.current = bandRef.current;\n            setShownBand(bandRef.current);\n            setFilled(true);\n          }\n        : undefined,\n    );\n  }, [percentage, seen, paint]);\n  useEffect(() => {\n    const sweeping = sweep.current;\n    const number = count.current;\n    return () => {\n      sweeping.stop();\n      number.stop();\n    };\n  }, []);\n  useIsomorphicLayoutEffect(paint, [paint]);\n\n  // The digits sit right aligned in a box sized to the target number, so the ones column never jumps while counting and the group recentres when the number gains or loses a digit.\n  useEffect(() => {\n    const node = sizer.current;\n    const box = digits.current;\n    if (!node || !box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = filled ? shownBand : band;\n  const activeTone = (filled ? shownBand : band)?.tone ?? tone;\n  const clampedValue = clamp(value, min, safeMax);\n\n  return (\n    <figure\n      ref={refs}\n      {...props}\n      data-slot=\"gauge\"\n      data-tone={activeTone}\n      className={cn(\"gauge\", className)}\n    >\n      <div\n        data-slot=\"gauge-visual\"\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={safeMax}\n        aria-valuenow={clampedValue}\n        aria-valuetext={`${displayValue}%${band ? `, ${band.label}` : \"\"}`}\n        className=\"gauge-visual\"\n      >\n        <svg\n          viewBox=\"0 0 100 90\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className=\"block size-full overflow-visible\"\n        >\n          <path d={TRACK} className=\"gauge-track\" />\n          <path ref={ring} className=\"gauge-fill\" style={{ opacity: 0 }} />\n        </svg>\n        <div aria-hidden=\"true\" className=\"gauge-readout\">\n          <span className=\"gauge-number\">\n            <span ref={digits} className=\"gauge-digits\" />\n            <span className=\"gauge-unit\">%</span>\n            <span ref={sizer} className=\"gauge-sizer\">\n              {displayValue}\n            </span>\n          </span>\n          {thresholds ? (\n            <span className=\"gauge-status\">\n              <SwapText\n                swapKey={filled ? (shown?.label ?? \"\") : \"\"}\n                dir={moved.direction}\n                className=\"block\"\n              >\n                {shown?.label}\n              </SwapText>\n            </span>\n          ) : null}\n        </div>\n      </div>\n      <figcaption className=\"grid min-w-0 gap-0.5\">\n        <strong className=\"text-sm font-medium text-foreground\">\n          <SwapText swapKey={label} className=\"block\">\n            {label}\n          </SwapText>\n        </strong>\n        {detail ? (\n          <span className=\"text-xs tabular-nums text-text-secondary\">\n            <SwapText swapKey={detail} dir={moved.direction} className=\"block\">\n              {detail}\n            </SwapText>\n          </span>\n        ) : null}\n      </figcaption>\n    </figure>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, REVEAL, SMOOTH } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Gauge: one value against a range, as a ring open at the bottom with the\n * number at its centre. Use it for a score or a fill level; use Progress for a\n * task that finishes.\n *\n * The ring fills the first time it is seen, slowly and without overshoot, like\n * a ring closing. After that it springs to each new value with a little life\n * while the count follows without overshooting. A band that starts at\n * `from` sets the colour and names the state (\"Healthy\", \"At risk\"): the\n * highest band the value reaches wins, and it changes exactly as the count\n * crosses the threshold, so state never rests on colour alone. The label,\n * status and detail rise in when they change, from the side the value moved\n * toward.\n *\n * A missing value (`null`) shows an empty ring, a dash and \"No data\", and is\n * read as an image named \"<label>: No data\" rather than a meter, since there\n * is nothing to measure. Size `sm` is the number alone in a small ring, for a\n * table cell or a card corner; the label and detail stay for assistive\n * technology.\n *\n * Plain SVG and CSS. One small spring tween writes the ring and the count\n * straight to the DOM. The ring is a `meter` for assistive technology.\n */\nexport type GaugeTone = \"primary\" | \"success\" | \"warning\" | \"danger\";\n\nexport type GaugeSize = \"sm\" | \"md\";\n\nexport interface GaugeThreshold {\n  /** The band starts at this value (in the same unit as `value`). */\n  from: number;\n  tone: GaugeTone;\n  /** Names the state. Shown under the number and announced with the value. */\n  label: string;\n}\n\nexport interface GaugeProps extends Omit<ComponentPropsWithoutRef<\"figure\">, \"children\"> {\n  /** The value. `null` (or a value that is not a finite number) is no data: an empty ring that reads `missingLabel`. */\n  value: number | null;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** What is measured. Names the meter. */\n  label: string;\n  /** A line under the label, such as \"Up 4 from last week\". */\n  detail?: string;\n  /** The colour when no band applies. @default \"primary\" */\n  tone?: GaugeTone;\n  /** Bands that set the tone and name the state. */\n  thresholds?: GaugeThreshold[];\n  /**\n   * `\"sm\"` is the number alone in a small ring (48px; set `--gauge-size` to\n   * change it), coloured by the tone. The percent sign, the status line and\n   * the caption are not drawn; the label, band and detail are still read.\n   * @default \"md\"\n   */\n  size?: GaugeSize;\n  /** Shown and read in place of the value when it is missing. @default \"No data\" */\n  missingLabel?: string;\n}\n\n/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */\nconst RADIUS = 42;\nconst START = -135;\nconst SPAN = 270;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\nfunction ringFor(sweep: number) {\n  const end = START + SPAN * clamp(sweep, 0, 1);\n  const at = (angle: number) =>\n    `${(50 + RADIUS * Math.sin((angle * Math.PI) / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos((angle * Math.PI) / 180)).toFixed(3)}`;\n  return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;\n}\nconst TRACK = ringFor(1);\n\nexport const Gauge = forwardRef<HTMLElement, GaugeProps>(function Gauge(\n  {\n    value: given,\n    min = 0,\n    max = 100,\n    label,\n    detail,\n    tone = \"primary\",\n    thresholds,\n    size = \"md\",\n    missingLabel = \"No data\",\n    className,\n    ...props\n  },\n  ref,\n) {\n  const missing = typeof given !== \"number\" || !Number.isFinite(given);\n  const value = missing ? min : given;\n  const small = size === \"sm\";\n  const safeMax = max > min ? max : min + 1;\n  const percentage = clamp((value - min) / (safeMax - min), 0, 1);\n  const displayValue = Math.round(percentage * 100);\n  const bands = [...(thresholds ?? [])].sort((a, b) => a.from - b.from);\n  const bandAt = (at: number) => bands.filter((band) => at >= band.from - 1e-6).pop();\n  const band = missing ? undefined : bandAt(value);\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const ring = useRef<SVGPathElement>(null);\n  const digits = useRef<HTMLSpanElement>(null);\n  const sizer = useRef<HTMLSpanElement>(null);\n  const sweep = useRef(live(0));\n  const count = useRef(live(0));\n\n  const [seen, setSeen] = useState(false);\n  const [filled, setFilled] = useState(false);\n  // The band on screen: after the first fill it follows the number as it counts.\n  const [shownBand, setShownBand] = useState(band);\n  const [moved, setMoved] = useState({ value: displayValue, direction: 1 });\n  if (moved.value !== displayValue) {\n    setMoved({ value: displayValue, direction: displayValue < moved.value ? -1 : 1 });\n  }\n\n  const latest = useRef({ bandAt, min, span: safeMax - min, filled, missing });\n  useIsomorphicLayoutEffect(() => {\n    latest.current = { bandAt, min, span: safeMax - min, filled, missing };\n  });\n  const shownRef = useRef(shownBand);\n  useIsomorphicLayoutEffect(() => {\n    shownRef.current = shownBand;\n  });\n\n  /** One writer: the ring, its fade-in over the first sliver, and the count. */\n  const paint = useCallback(() => {\n    const to = clamp(sweep.current.value, 0, 1);\n    ring.current?.setAttribute(\"d\", ringFor(to));\n    if (ring.current) ring.current.style.opacity = String(clamp(to / 0.02, 0, 1));\n    const shown = clamp(count.current.value, 0, 100);\n    const { bandAt: pick, min: lo, span, filled: done, missing: empty } = latest.current;\n    if (digits.current) digits.current.textContent = empty ? \"–\" : String(Math.round(shown));\n    // After the first fill the state follows the number on screen, so the colour and label change as the count crosses a threshold.\n    if (done && !empty) {\n      const next = pick(lo + (shown / 100) * span);\n      const current = shownRef.current;\n      if (next?.from !== current?.from || next?.label !== current?.label) {\n        shownRef.current = next;\n        setShownBand(next);\n      }\n    }\n  }, []);\n\n  // The ring fills once half of it is in view.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setSeen(true);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first fill is slower and never overshoots; later values spring to place, the count a beat calmer.\n  const bandRef = useRef(band);\n  useIsomorphicLayoutEffect(() => {\n    bandRef.current = band;\n  });\n  useEffect(() => {\n    if (!seen) return;\n    const first = !latest.current.filled;\n    retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);\n    retarget(\n      count.current,\n      percentage * 100,\n      first ? REVEAL : SMOOTH,\n      paint,\n      0,\n      first\n        ? () => {\n            latest.current.filled = true;\n            shownRef.current = bandRef.current;\n            setShownBand(bandRef.current);\n            setFilled(true);\n          }\n        : undefined,\n    );\n  }, [percentage, seen, paint]);\n  // A value that goes missing (or comes back) at the same percentage still repaints the digits.\n  useIsomorphicLayoutEffect(paint, [missing, paint]);\n  useEffect(() => {\n    const sweeping = sweep.current;\n    const number = count.current;\n    return () => {\n      sweeping.stop();\n      number.stop();\n    };\n  }, []);\n  useIsomorphicLayoutEffect(paint, [paint]);\n\n  // The digits sit right aligned in a box sized to the target number, so the ones column never jumps while counting and the group recentres when the number gains or loses a digit.\n  useEffect(() => {\n    const node = sizer.current;\n    const box = digits.current;\n    if (!node || !box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = missing ? undefined : filled ? shownBand : band;\n  const activeTone = shown?.tone ?? tone;\n  const clampedValue = clamp(value, min, safeMax);\n  const reading = missing\n    ? { role: \"img\", \"aria-label\": `${label}: ${missingLabel}` }\n    : {\n        role: \"meter\",\n        \"aria-label\": label,\n        \"aria-valuemin\": min,\n        \"aria-valuemax\": safeMax,\n        \"aria-valuenow\": clampedValue,\n        \"aria-valuetext\": `${displayValue}%${band ? `, ${band.label}` : \"\"}`,\n      };\n\n  return (\n    <figure\n      ref={refs}\n      {...props}\n      data-slot=\"gauge\"\n      data-tone={activeTone}\n      data-size={small ? size : undefined}\n      data-missing={missing || undefined}\n      className={cn(\"gauge\", className)}\n    >\n      <div data-slot=\"gauge-visual\" {...reading} className=\"gauge-visual\">\n        <svg\n          viewBox=\"0 0 100 90\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className=\"block size-full overflow-visible\"\n        >\n          <path d={TRACK} className=\"gauge-track\" />\n          <path ref={ring} className=\"gauge-fill\" style={{ opacity: 0 }} />\n        </svg>\n        <div aria-hidden=\"true\" className=\"gauge-readout\">\n          <span className=\"gauge-number\">\n            <span ref={digits} className=\"gauge-digits\" />\n            {small || missing ? null : <span className=\"gauge-unit\">%</span>}\n            <span ref={sizer} className=\"gauge-sizer\">\n              {missing ? \"–\" : displayValue}\n            </span>\n          </span>\n          {!small && (thresholds || missing) ? (\n            <span className=\"gauge-status\">\n              <SwapText\n                swapKey={missing ? missingLabel : filled ? (shown?.label ?? \"\") : \"\"}\n                dir={moved.direction}\n                className=\"block\"\n              >\n                {missing ? missingLabel : shown?.label}\n              </SwapText>\n            </span>\n          ) : null}\n        </div>\n      </div>\n      <figcaption className={small ? \"sr-only\" : \"grid min-w-0 gap-0.5\"}>\n        <strong className=\"text-sm font-medium text-foreground\">\n          <SwapText swapKey={label} className=\"block\">\n            {label}\n          </SwapText>\n        </strong>\n        {detail ? (\n          <span className=\"text-xs tabular-nums text-text-secondary\">\n            <SwapText swapKey={detail} dir={moved.direction} className=\"block\">\n              {detail}\n            </SwapText>\n          </span>\n        ) : null}\n      </figcaption>\n    </figure>\n  );\n});\n"],"mappings":";;;;;;;;;;AAgFA,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,SAAS,OAAe,KAAa,SAAiB,KAAK,IAAI,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC;AAE/F,SAAS,QAAQ,OAAe;CAC9B,MAAM,MAAM,QAAQ,OAAO,MAAM,OAAO,GAAG,CAAC;CAC5C,MAAM,MAAM,UACV,IAAI,KAAK,SAAS,KAAK,IAAK,QAAQ,KAAK,KAAM,GAAG,EAAA,CAAG,QAAQ,CAAC,EAAE,IAAI,KAAK,SAAS,KAAK,IAAK,QAAQ,KAAK,KAAM,GAAG,EAAA,CAAG,QAAQ,CAAC;CAChI,OAAO,KAAK,GAAG,KAAK,EAAE,KAAK,OAAO,GAAG,OAAO,KAAK,MAAM,QAAQ,MAAM,IAAI,EAAE,KAAK,GAAG,GAAG;AACxF;AACA,MAAM,QAAQ,QAAQ,CAAC;AAEvB,MAAa,QAAQ,WAAoC,SAAS,MAChE,EACE,OAAO,OACP,MAAM,GACN,MAAM,KACN,OACA,QACA,OAAO,WACP,YACA,OAAO,MACP,eAAe,WACf,WACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,OAAO,UAAU,YAAY,CAAC,OAAO,SAAS,KAAK;CACnE,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM;CACxC,MAAM,aAAa,OAAO,QAAQ,QAAQ,UAAU,MAAM,GAAG,CAAC;CAC9D,MAAM,eAAe,KAAK,MAAM,aAAa,GAAG;CAChD,MAAM,QAAQ,CAAC,GAAI,cAAc,CAAC,CAAE,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI;CACpE,MAAM,UAAU,OAAe,MAAM,QAAQ,SAAS,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI;CAClF,MAAM,OAAO,UAAU,KAAA,IAAY,OAAO,KAAK;CAE/C,MAAM,SAAS,OAA2B,IAAI;CAC9C,MAAM,OAAO,cAAc,UAAU,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;CACxD,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,SAAS,OAAwB,IAAI;CAC3C,MAAM,QAAQ,OAAwB,IAAI;CAC1C,MAAM,QAAQ,OAAO,KAAK,CAAC,CAAC;CAC5B,MAAM,QAAQ,OAAO,KAAK,CAAC,CAAC;CAE5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS;EAAE,OAAO;EAAc,WAAW;CAAE,CAAC;CACxE,IAAI,MAAM,UAAU,cAClB,SAAS;EAAE,OAAO;EAAc,WAAW,eAAe,MAAM,QAAQ,KAAK;CAAE,CAAC;CAGlF,MAAM,SAAS,OAAO;EAAE;EAAQ;EAAK,MAAM,UAAU;EAAK;EAAQ;CAAQ,CAAC;CAC3E,gCAAgC;EAC9B,OAAO,UAAU;GAAE;GAAQ;GAAK,MAAM,UAAU;GAAK;GAAQ;EAAQ;CACvE,CAAC;CACD,MAAM,WAAW,OAAO,SAAS;CACjC,gCAAgC;EAC9B,SAAS,UAAU;CACrB,CAAC;;CAGD,MAAM,QAAQ,kBAAkB;EAC9B,MAAM,KAAK,MAAM,MAAM,QAAQ,OAAO,GAAG,CAAC;EAC1C,KAAK,SAAS,aAAa,KAAK,QAAQ,EAAE,CAAC;EAC3C,IAAI,KAAK,SAAS,KAAK,QAAQ,MAAM,UAAU,OAAO,MAAM,KAAK,KAAM,GAAG,CAAC,CAAC;EAC5E,MAAM,QAAQ,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG;EAC/C,MAAM,EAAE,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,MAAM,SAAS,UAAU,OAAO;EAC7E,IAAI,OAAO,SAAS,OAAO,QAAQ,cAAc,QAAQ,MAAM,OAAO,KAAK,MAAM,KAAK,CAAC;EAEvF,IAAI,QAAQ,CAAC,OAAO;GAClB,MAAM,OAAO,KAAK,KAAM,QAAQ,MAAO,IAAI;GAC3C,MAAM,UAAU,SAAS;GACzB,IAAI,MAAM,SAAS,SAAS,QAAQ,MAAM,UAAU,SAAS,OAAO;IAClE,SAAS,UAAU;IACnB,aAAa,IAAI;GACnB;EACF;CACF,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,QAAQ,qBAAqB,KAAK,OAAO,yBAAyB,aAAa;GAClF,QAAQ,IAAI;GACZ;EACF;EACA,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAW;GACX,IAAI,CAAC,OAAO,gBAAgB;GAC5B,SAAS,WAAW;GACpB,QAAQ,IAAI;EACd,GACA,EAAE,WAAW,GAAI,CACnB;EACA,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAGL,MAAM,UAAU,OAAO,IAAI;CAC3B,gCAAgC;EAC9B,QAAQ,UAAU;CACpB,CAAC;CACD,gBAAgB;EACd,IAAI,CAAC,MAAM;EACX,MAAM,QAAQ,CAAC,OAAO,QAAQ;EAC9B,SAAS,MAAM,SAAS,YAAY,QAAQ,SAAS,OAAO,KAAK;EACjE,SACE,MAAM,SACN,aAAa,KACb,QAAQ,SAAS,QACjB,OACA,GACA,cACU;GACJ,OAAO,QAAQ,SAAS;GACxB,SAAS,UAAU,QAAQ;GAC3B,aAAa,QAAQ,OAAO;GAC5B,UAAU,IAAI;EAChB,IACA,KAAA,CACN;CACF,GAAG;EAAC;EAAY;EAAM;CAAK,CAAC;CAE5B,0BAA0B,OAAO,CAAC,SAAS,KAAK,CAAC;CACjD,gBAAgB;EACd,MAAM,WAAW,MAAM;EACvB,MAAM,SAAS,MAAM;EACrB,aAAa;GACX,SAAS,KAAK;GACd,OAAO,KAAK;EACd;CACF,GAAG,CAAC,CAAC;CACL,0BAA0B,OAAO,CAAC,KAAK,CAAC;CAGxC,gBAAgB;EACd,MAAM,OAAO,MAAM;EACnB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO,mBAAmB,aAAa;EAC5D,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,IAAI,CAAC,OAAO;GACZ,IAAI,MAAM,QAAQ,GAAG,MAAM,gBAAgB,EAAE,EAAE,cAAc,KAAK,YAAY;EAChF,CAAC;EACD,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,UAAU,KAAA,IAAY,SAAS,YAAY;CACzD,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,eAAe,MAAM,OAAO,KAAK,OAAO;CAC9C,MAAM,UAAU,UACZ;EAAE,MAAM;EAAO,cAAc,GAAG,MAAM,IAAI;CAAe,IACzD;EACE,MAAM;EACN,cAAc;EACd,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB,GAAG,aAAa,GAAG,OAAO,KAAK,KAAK,UAAU;CAClE;CAEJ,OACE,qBAAC,UAAD;EACE,KAAK;EACL,GAAI;EACJ,aAAU;EACV,aAAW;EACX,aAAW,QAAQ,OAAO,KAAA;EAC1B,gBAAc,WAAW,KAAA;EACzB,WAAW,GAAG,SAAS,SAAS;EAPlC,UAAA,CASE,qBAAC,OAAD;GAAK,aAAU;GAAe,GAAI;GAAS,WAAU;GAArD,UAAA,CACE,qBAAC,OAAD;IACE,SAAQ;IACR,eAAY;IACZ,WAAU;IACV,WAAU;IAJZ,UAAA,CAME,oBAAC,QAAD;KAAM,GAAG;KAAO,WAAU;IAAe,CAAA,GACzC,oBAAC,QAAD;KAAM,KAAK;KAAM,WAAU;KAAa,OAAO,EAAE,SAAS,EAAE;IAAI,CAAA,CAC7D;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;IAAlC,UAAA,CACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACE,oBAAC,QAAD;OAAM,KAAK;OAAQ,WAAU;MAAgB,CAAA;MAC5C,SAAS,UAAU,OAAO,oBAAC,QAAD;OAAM,WAAU;OAAa,UAAA;MAAO,CAAA;MAC/D,oBAAC,QAAD;OAAM,KAAK;OAAO,WAAU;OACzB,UAAA,UAAU,MAAM;MACb,CAAA;KACF;IACL,CAAA,GAAA,CAAC,UAAU,cAAc,WACxB,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,oBAAC,UAAD;MACE,SAAS,UAAU,eAAe,SAAU,OAAO,SAAS,KAAM;MAClE,KAAK,MAAM;MACX,WAAU;MAET,UAAA,UAAU,eAAe,OAAO;KACzB,CAAA;IACN,CAAA,IACJ,IACD;GACF,CAAA,CAAA;EACL,CAAA,GAAA,qBAAC,cAAD;GAAY,WAAW,QAAQ,YAAY;GAA3C,UAAA,CACE,oBAAC,UAAD;IAAQ,WAAU;IAChB,UAAA,oBAAC,UAAD;KAAU,SAAS;KAAO,WAAU;KACjC,UAAA;IACO,CAAA;GACJ,CAAA,GACP,SACC,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,UAAD;KAAU,SAAS;KAAQ,KAAK,MAAM;KAAW,WAAU;KACxD,UAAA;IACO,CAAA;GACN,CAAA,IACJ,IACM;EACN,CAAA,CAAA;;AAEZ,CAAC"}

package/dist/gauge/index.d.ts

@@ -1,2 +1,2 @@
-import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge.js";
-export { Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone };
+import { Gauge, GaugeProps, GaugeSize, GaugeThreshold, GaugeTone } from "./gauge.js";
+export { Gauge, type GaugeProps, type GaugeSize, type GaugeThreshold, type GaugeTone };