@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/Icon.js

@@ -0,0 +1,50 @@
+import { jsx as t } from "react/jsx-runtime";
+import { getIcon as x } from "../lib/icons.js";
+import { cn as g } from "../lib/cn.js";
+const k = {
+  xs: "var(--icon-xs)",
+  sm: "var(--icon-sm)",
+  md: "var(--icon-md)",
+  lg: "var(--icon-lg)",
+  xl: "var(--icon-xl)"
+}, u = {
+  xs: "var(--icon-stroke-xs)",
+  sm: "var(--icon-stroke-sm)",
+  md: "var(--icon-stroke-md)",
+  lg: "var(--icon-stroke-lg)",
+  xl: "var(--icon-stroke-xl)"
+};
+function R({
+  name: o,
+  node: r,
+  size: n = "md",
+  label: i,
+  className: c,
+  style: e,
+  ref: a,
+  ...l
+}) {
+  const s = r ?? (o ? x(o) : void 0);
+  return s ? /* @__PURE__ */ t(
+    "svg",
+    {
+      ref: a,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: u[n],
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "data-icon": r ? void 0 : o,
+      className: g("dx-icon shrink-0", c),
+      style: { "--dx-icon-size": k[n], ...e },
+      ...i ? { role: "img", "aria-label": i } : { "aria-hidden": !0, focusable: !1 },
+      ...l,
+      children: s.map(([m, d], v) => /* @__PURE__ */ t(m, { ...d }, v))
+    }
+  ) : null;
+}
+export {
+  R as Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { CSSProperties, SVGProps } from \"react\";\nimport { getIcon, type IconNode } from \"../lib/icons\";\nimport type { CoreIconName } from \"../icons/data\";\nimport { cn } from \"../lib/cn\";\n\nexport type IconSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * `(string & {})` keeps the core names as autocomplete suggestions while still\n * accepting anything a consumer registered. Plain `string` would collapse the\n * union and lose the suggestions entirely.\n */\nexport type IconName = CoreIconName | (string & {});\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, \"name\" | \"ref\"> {\n  /** A registered icon name. Ignored when `node` is given. */\n  name?: IconName;\n  /** Raw geometry, for an icon that is not worth registering. */\n  node?: IconNode;\n  size?: IconSize;\n  /**\n   * An accessible name. Supplying it makes the icon `role=\"img\"`; omitting it\n   * marks the icon decorative and hides it from assistive tech.\n   *\n   * The DEFAULT IS DECORATIVE, and that is the right default: an icon almost\n   * always sits beside a label that already carries the meaning, and announcing\n   * both makes every button read twice. The exception — an icon that IS the\n   * only label — is the case worth typing a prop for.\n   */\n  label?: string;\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nconst SIZE_VAR: Record<IconSize, string> = {\n  xs: \"var(--icon-xs)\",\n  sm: \"var(--icon-sm)\",\n  md: \"var(--icon-md)\",\n  lg: \"var(--icon-lg)\",\n  xl: \"var(--icon-xl)\",\n};\n\nconst STROKE_VAR: Record<IconSize, string> = {\n  xs: \"var(--icon-stroke-xs)\",\n  sm: \"var(--icon-stroke-sm)\",\n  md: \"var(--icon-stroke-md)\",\n  lg: \"var(--icon-stroke-lg)\",\n  xl: \"var(--icon-stroke-xl)\",\n};\n\n/**\n * Renders registered icon geometry.\n *\n * Everything is `currentColor` and sized from CSS variables, so an icon inherits\n * both the colour and the size scale of whatever it sits in — no per-call\n * colour prop, and no icon left behind when the user changes the size toggle.\n *\n * `shrink-0` is not a detail: an icon inside a flex row with a long label will\n * otherwise be squeezed into an oval, which is the single most common way icons\n * break in a real layout.\n */\nexport function Icon({\n  name,\n  node,\n  size = \"md\",\n  label,\n  className,\n  style,\n  ref,\n  ...props\n}: IconProps) {\n  const geometry = node ?? (name ? getIcon(name) : undefined);\n\n  // An unregistered name renders nothing rather than throwing. A missing icon\n  // is a cosmetic gap; taking down the surrounding tree over one is a far worse\n  // outcome than a button that is briefly wordless — and config-driven icon\n  // names are exactly where an unknown value legitimately shows up.\n  if (!geometry) return null;\n\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={STROKE_VAR[size]}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      data-icon={node ? undefined : name}\n      className={cn(\"dx-icon shrink-0\", className)}\n      style={{ \"--dx-icon-size\": SIZE_VAR[size], ...style } as CSSProperties}\n      {...(label ? { role: \"img\", \"aria-label\": label } : { \"aria-hidden\": true, focusable: false })}\n      {...props}\n    >\n      {geometry.map(([tag, attrs], i) => {\n        const Tag = tag as keyof React.JSX.IntrinsicElements;\n        return <Tag key={i} {...attrs} />;\n      })}\n    </svg>\n  );\n}\n"],"names":["SIZE_VAR","STROKE_VAR","Icon","name","node","size","label","className","style","ref","props","geometry","getIcon","jsx","cn","tag","attrs","i"],"mappings":";;;AAiCA,MAAMA,IAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAWP,MAASD,IAAOS,EAAQT,CAAI,IAAI;AAMjD,SAAKQ,IAGH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAaR,EAAWI,CAAI;AAAA,MAC5B,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAWD,IAAO,SAAYD;AAAA,MAC9B,WAAWW,EAAG,oBAAoBP,CAAS;AAAA,MAC3C,OAAO,EAAE,kBAAkBP,EAASK,CAAI,GAAG,GAAGG,EAAA;AAAA,MAC7C,GAAIF,IAAQ,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAU,EAAE,eAAe,IAAM,WAAW,GAAA;AAAA,MACrF,GAAGI;AAAA,MAEH,YAAS,IAAI,CAAC,CAACK,GAAKC,CAAK,GAAGC,MAEpB,gBAAAJ,EADKE,GACJ,EAAa,GAAGC,EAAA,GAAPC,CAAc,CAChC;AAAA,IAAA;AAAA,EAAA,IApBiB;AAuBxB;"}

package/dist/components/IconButton.js

@@ -0,0 +1,59 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { Button as v } from "./Button.js";
+import { CountBadge as x } from "./CountBadge.js";
+import { Tooltip as B } from "./Popover.js";
+import { cn as I } from "../lib/cn.js";
+const N = {
+  ghost: { neutral: "ghost", danger: "ghost-danger" },
+  subtle: { neutral: "subtle", danger: "danger-subtle" },
+  outline: { neutral: "outline", danger: "outline-danger" },
+  solid: { neutral: "solid", danger: "danger" }
+};
+function y({
+  icon: u,
+  label: r,
+  badge: t,
+  variant: s = "ghost",
+  tone: a = "neutral",
+  size: e = "sm",
+  disabledReason: n,
+  hideTooltip: c = !1,
+  tooltipSide: m = "top",
+  className: d,
+  onClick: f,
+  ...p
+}) {
+  const g = n !== void 0;
+  if (t !== void 0 && (!Number.isInteger(t.count) || t.count < 0))
+    throw new Error(`IconButton: badge.count must be a non-negative integer, got ${t.count}`);
+  const i = /* @__PURE__ */ o(
+    v,
+    {
+      variant: N[s][g ? "neutral" : a],
+      size: e,
+      iconOnly: !0,
+      "aria-label": r,
+      disabledReason: n,
+      disabledReasonTooltip: !1,
+      onClick: f,
+      className: I(
+        /* The coarse-pointer floor. `--control-*` already carries it for the
+           height; this covers the width on the same terms. */
+        /* DX-4031 — except `2xs`, whose whole contract is a 20px layout box: its 44px fingertip target is the
+           Button's own `::after` reach, and this class's `min-*` would grow the box instead. */
+        e !== "2xs" && "dx-tap",
+        d
+      ),
+      ...p,
+      children: u
+    }
+  ), l = c ? i : /* @__PURE__ */ o(B, { content: n ?? r, side: m, children: i });
+  return t === void 0 ? l : /* @__PURE__ */ h("span", { className: "relative inline-flex", children: [
+    l,
+    /* @__PURE__ */ o(x, { count: t.count, tone: t.tone })
+  ] });
+}
+export {
+  y as IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Button, type ButtonProps } from \"./Button\";\nimport { CountBadge, type CountBadgeTone } from \"./CountBadge\";\nimport { Tooltip } from \"./Popover\";\nimport { cn } from \"../lib/cn\";\n\n/* ============================================================================\n   ICON BUTTON — the single door every icon-only control goes through.\n\n   WHY THIS EXISTS AS A COMPONENT AND NOT A CONVENTION.\n\n   A control whose whole content is a glyph has three obligations a text button\n   gets for free, and all three were being met one control at a time — which\n   means they were being MISSED one control at a time:\n\n     1. A POINTER CURSOR. `<button>` computes `cursor: default`, so nothing\n        about resting on it says it can be pressed. That one is now fixed for\n        every button on `Button`'s base, where it belonged.\n     2. AN ACCESSIBLE NAME. A glyph has no text, so a screen reader announces\n        an icon-only button as \"button\" and nothing else. This is the obligation\n        that cannot be delegated to discipline, and it is the reason this file\n        is a COMPONENT rather than a documented pattern — see below.\n     3. A REASON WHEN IT IS OFF. A control that refuses without saying why is\n        indistinguishable from one that is broken, which is precisely how the\n        delete affordance in `PhaseManager` was read.\n\n   WHY A NEW COMPONENT RATHER THAN A `Button` VARIANT — the deciding argument is\n   obligation 2, and it is a TYPE argument, not a styling one.\n\n   `Button` already carries the sizing ramp, the press affordance, the ripple,\n   the focus ring and the `iconOnly` box, and this component reuses every one of\n   them by RENDERING A `Button` — nothing is duplicated here, and a `tone` that\n   goes red is expressed as two ordinary `Button` variants (`ghost-danger`,\n   `outline-danger`) so a TEXT \"Delete\" button can reach it too. If the name\n   could be made mandatory on `Button`, this file would not need to exist.\n\n   It cannot. `Button`'s accessible name comes from its CHILDREN, which is\n   correct and must stay optional — making `aria-label` required on `Button`\n   would break every text button in the library and mean nothing anyway, since\n   a name that is required in a type only matters where there is no other\n   source for it. `IconButton` is exactly the case where there is no other\n   source, so `label` is a required prop of a distinct type: it is not possible\n   to construct one of these without a name. That is enforcement rather than a\n   lint rule people learn to silence.\n\n   `label` FEEDS `aria-label`, AND THE ICON IS `aria-hidden`. Worth stating\n   because this library has shipped the inverse defect before: `aria-label`\n   REPLACES an element's content in the accessibility tree, it does not extend\n   it. On a control that also has text that is a way to silently hide the text;\n   here there is no text to lose, and `children` is deliberately omitted from\n   the props type so none can be introduced.\n\n   `disabledReason` REPLACES `disabled`, AND THAT IS THE POINT.\n\n   There is no boolean `disabled` on this component. Turning an icon control off\n   requires a sentence saying why, because the failure this component was built\n   in response to was not a dead button — it was a LIVE guard refusing in\n   silence, which presents identically. A required string makes the mute\n   refusal unrepresentable.\n\n   THE WIRING FOR THAT LIVES IN `Button` NOW, NOT HERE (SG-839). `Button`\n   grew its own `disabledReason` (SG-833 slice 7, the labelled case needed the\n   same behaviour) by re-implementing what this file had already built —\n   `aria-disabled`, the click guard, the `sr-only` description, the dimmed\n   styling. Two copies of an accessibility behaviour is the one duplication\n   that is guaranteed to drift silently, on the half screen-reader users\n   depend on, so this file no longer computes any of it itself. It passes\n   `disabledReason` straight through to the `Button` it already renders and\n   lets `Button` own the mechanism end to end — this component's only\n   remaining job is the one genuine difference: an icon has no visible label,\n   so its tooltip has to carry the NAME while live, not only the reason while\n   off (`Button` shows no tooltip at all when it isn't disabled — a labelled\n   button doesn't need one). That is why `disabledReasonTooltip={false}` is\n   passed to `Button` below: this component supplies its own, wider-scoped\n   tooltip and would otherwise nest a second one around the same trigger.\n\n   It is applied as `aria-disabled`, NOT the native attribute. Native `disabled`\n   removes the element from the tab order and, via\n   `disabled:pointer-events-none`, from hit-testing — so it can be neither\n   hovered nor focused, and the tooltip carrying the explanation becomes\n   unreachable by construction. `aria-disabled` announces the same state to\n   assistive tech while leaving the control able to be asked about. The click is\n   suppressed by `Button` itself, and `Button` treats `aria-disabled` as inert\n   for ripple and press feedback so nothing says the press landed.\n   ========================================================================= */\n\n/** Which `Button` variant backs each (variant, tone) pair. */\nconst VARIANT_FOR = {\n  ghost: { neutral: \"ghost\", danger: \"ghost-danger\" },\n  subtle: { neutral: \"subtle\", danger: \"danger-subtle\" },\n  outline: { neutral: \"outline\", danger: \"outline-danger\" },\n  solid: { neutral: \"solid\", danger: \"danger\" },\n} as const satisfies Record<string, Record<string, NonNullable<ButtonProps[\"variant\"]>>>;\n\nexport type IconButtonVariant = keyof typeof VARIANT_FOR;\nexport type IconButtonTone = \"neutral\" | \"danger\";\n\n/** A count drawn on the glyph's top-right corner: `neutral` is the quiet gray of a count nothing waits on, `danger` the red of one that does. */\nexport type IconButtonBadgeTone = CountBadgeTone;\n\nexport interface IconButtonBadge {\n  /** The number drawn; above 99 it reads `99+`. Zero is drawn too: a count of nothing is still a count. */\n  count: number;\n  tone: IconButtonBadgeTone;\n}\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    /* `children` is omitted so text cannot be smuggled in behind the\n       `aria-label` and silently lost. `iconOnly` is implied. `variant` and\n       `aria-label` are re-declared below with narrower contracts. */\n    | \"children\"\n    | \"iconOnly\"\n    | \"leadingIcon\"\n    | \"trailingIcon\"\n    | \"variant\"\n    | \"aria-label\"\n    | \"disabled\"\n    | \"aria-disabled\"\n    /* Internal to the delegation below — see `Button.disabledReasonTooltip`'s\n       own doc. Not part of `IconButton`'s public surface: this component\n       always supplies its own tooltip, so callers have no reason to touch\n       `Button`'s self-wrapping toggle directly. */\n    | \"disabledReasonTooltip\"\n  > {\n  /** The glyph. Rendered `aria-hidden` — the name comes from `label`. */\n  icon: ReactNode;\n  /**\n   * The accessible name, and the tooltip text. REQUIRED — an icon carries no\n   * text, so there is no other source for it.\n   *\n   * Name the ACTION and its object (\"Delete Phase 2\"), not the picture\n   * (\"Trash\"). It is read aloud in a list of controls where nothing else\n   * distinguishes one row's delete from another's.\n   */\n  label: string;\n  /**\n   * A count drawn as a small round badge over the glyph's top-right corner (a comment button's number of comments). The accessible name stays\n   * `label`: put the count in the label, since the badge itself is `aria-hidden`. A count below 0 or not an integer throws.\n   */\n  badge?: IconButtonBadge;\n  /** Visual weight. Defaults to `ghost` — the right resting state in a row. */\n  variant?: IconButtonVariant;\n  /** `danger` makes the hover destructive. Resting state is unchanged. */\n  tone?: IconButtonTone;\n  /**\n   * Unavailable, AND WHY — there is no boolean form. The string is shown in\n   * the tooltip and announced as the control's description, so the refusal is\n   * never silent.\n   */\n  disabledReason?: string;\n  /**\n   * Suppress the tooltip. For the rare control already named in adjacent\n   * visible text, where a tooltip would only repeat it. The `aria-label` is\n   * unaffected — the name is never optional.\n   */\n  hideTooltip?: boolean;\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function IconButton({\n  icon,\n  label,\n  badge,\n  variant = \"ghost\",\n  tone = \"neutral\",\n  size = \"sm\",\n  disabledReason,\n  hideTooltip = false,\n  tooltipSide = \"top\",\n  className,\n  onClick,\n  ...props\n}: IconButtonProps) {\n  const off = disabledReason !== undefined;\n  if (badge !== undefined && (!Number.isInteger(badge.count) || badge.count < 0)) {\n    throw new Error(`IconButton: badge.count must be a non-negative integer, got ${badge.count}`);\n  }\n\n  const control = (\n    <Button\n      /* A REFUSING CONTROL MUST NOT LOOK ARMED. The destructive tone is the\n         signal that pressing this will destroy something; showing it on a\n         control that will not fire promises an action it then refuses, which\n         is worse than no signal at all. So an unavailable control drops back\n         to the neutral tone and keeps only the neutral hover — enough to\n         confirm the pointer is on it, which is what makes the tooltip\n         discoverable in the first place. */\n      /* I18N-ALLOW: tone token used as a lookup key into the button variant table */\n      variant={VARIANT_FOR[variant][off ? \"neutral\" : tone]}\n      size={size}\n      iconOnly\n      aria-label={label}\n      /* Everything the OFF state needs — aria-disabled, aria-describedby +\n         its sr-only span, the click guard, the dimmed/not-allowed styling —\n         is `Button`'s own `disabledReason` mechanism now. Passing the string\n         straight through IS the delegation; see this file's own header for\n         why the tooltip alone is still handled here. */\n      disabledReason={disabledReason}\n      disabledReasonTooltip={false}\n      onClick={onClick}\n      className={cn(\n        /* The coarse-pointer floor. `--control-*` already carries it for the\n           height; this covers the width on the same terms. */\n        /* DX-4031 — except `2xs`, whose whole contract is a 20px layout box: its 44px fingertip target is the\n           Button's own `::after` reach, and this class's `min-*` would grow the box instead. */\n        size !== \"2xs\" && \"dx-tap\",\n        className,\n      )}\n      {...props}\n    >\n      {icon}\n    </Button>\n  );\n\n  const tooltipped = hideTooltip ? (\n    control\n  ) : (\n    <Tooltip content={disabledReason ?? label} side={tooltipSide}>\n      {control}\n    </Tooltip>\n  );\n  if (badge === undefined) return tooltipped;\n\n  /* DX-6446: the badge is a SIBLING of the button, not its child. `Button` clips its content (`overflow-hidden`, for the click ripple), so a\n     badge drawn inside it was cut at the button's edge, and moving it inward to avoid the cut put it over the glyph. Outside the clip it sits\n     on the button's own top-right corner, where it overlaps the glyph (centred in the button) only at the badge's inner corner. */\n  return (\n    <span className=\"relative inline-flex\">\n      {tooltipped}\n      <CountBadge count={badge.count} tone={badge.tone} />\n    </span>\n  );\n}\n"],"names":["VARIANT_FOR","IconButton","icon","label","badge","variant","tone","size","disabledReason","hideTooltip","tooltipSide","className","onClick","props","off","control","jsx","Button","cn","tooltipped","Tooltip","jsxs","CountBadge"],"mappings":";;;;;AAuFA,MAAMA,IAAc;AAAA,EAClB,OAAO,EAAE,SAAS,SAAS,QAAQ,eAAA;AAAA,EACnC,QAAQ,EAAE,SAAS,UAAU,QAAQ,gBAAA;AAAA,EACrC,SAAS,EAAE,SAAS,WAAW,QAAQ,iBAAA;AAAA,EACvC,OAAO,EAAE,SAAS,SAAS,QAAQ,SAAA;AACrC;AAsEO,SAASC,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,gBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAMN,MAAmB;AAC/B,MAAIJ,MAAU,WAAc,CAAC,OAAO,UAAUA,EAAM,KAAK,KAAKA,EAAM,QAAQ;AAC1E,UAAM,IAAI,MAAM,+DAA+DA,EAAM,KAAK,EAAE;AAG9F,QAAMW,IACJ,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MASC,SAASjB,EAAYK,CAAO,EAAES,IAAM,YAAYR,CAAI;AAAA,MACpD,MAAAC;AAAA,MACA,UAAQ;AAAA,MACR,cAAYJ;AAAA,MAMZ,gBAAAK;AAAA,MACA,uBAAuB;AAAA,MACvB,SAAAI;AAAA,MACA,WAAWM;AAAA;AAAA;AAAA;AAAA;AAAA,QAKTX,MAAS,SAAS;AAAA,QAClBI;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAX;AAAA,IAAA;AAAA,EAAA,GAICiB,IAAaV,IACjBM,IAEA,gBAAAC,EAACI,GAAA,EAAQ,SAASZ,KAAkBL,GAAO,MAAMO,GAC9C,UAAAK,EAAA,CACH;AAEF,SAAIX,MAAU,SAAkBe,IAM9B,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,IAAAF;AAAA,sBACAG,GAAA,EAAW,OAAOlB,EAAM,OAAO,MAAMA,EAAM,KAAA,CAAM;AAAA,EAAA,GACpD;AAEJ;"}

package/dist/components/IconStack.js

@@ -0,0 +1,69 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { cn as n } from "../lib/cn.js";
+import { Icon as a } from "./Icon.js";
+const u = {
+  neutral: "border-border bg-surface-raised text-secondary",
+  accent: "border-accent-border bg-accent-subtle text-accent-text",
+  success: "border-success-border bg-success-subtle text-success-text",
+  warning: "border-warning-border bg-warning-subtle text-warning-text",
+  danger: "border-danger-border bg-danger-subtle text-danger-text",
+  info: "border-info-border bg-info-subtle text-info-text",
+  muted: "border-muted-border bg-muted-subtle text-muted-text"
+}, x = "border-dashed border-muted-border bg-surface text-muted-text", m = {
+  neutral: "text-secondary",
+  accent: "text-accent-text",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  danger: "text-danger-text",
+  info: "text-info-text",
+  muted: "text-muted-text"
+}, p = {
+  sm: { chip: "size-5", overlap: "-ml-1.5", badge: "size-2.5", glyph: "xs" },
+  md: { chip: "size-6", overlap: "-ml-2", badge: "size-3", glyph: "sm" },
+  lg: { chip: "size-7", overlap: "-ml-2.5", badge: "size-3.5", glyph: "sm" }
+};
+function z({ items: c, label: o, size: d = "md", className: i, ref: l, ...b }) {
+  const t = p[d];
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      ref: l,
+      role: "img",
+      "aria-label": o,
+      className: n("inline-flex items-center", i),
+      ...b,
+      children: c.map((e, s) => /* @__PURE__ */ g(
+        "span",
+        {
+          "data-empty": e.empty || void 0,
+          className: n(
+            "relative grid shrink-0 place-items-center rounded-full border ring-2 ring-surface",
+            "transition-[var(--tx-colors)] duration-(--dur-fast)",
+            t.chip,
+            s > 0 && t.overlap,
+            e.empty ? x : u[e.tone ?? "neutral"]
+          ),
+          children: [
+            /* @__PURE__ */ r(a, { name: e.icon, size: t.glyph }),
+            e.badge && /* @__PURE__ */ r(
+              "span",
+              {
+                className: n(
+                  "absolute -right-1 -bottom-1 grid place-items-center rounded-full bg-surface ring-1 ring-surface",
+                  t.badge,
+                  m[e.badge.tone ?? "neutral"]
+                ),
+                children: /* @__PURE__ */ r(a, { name: e.badge.icon, className: "size-full" })
+              }
+            )
+          ]
+        },
+        s
+      ))
+    }
+  );
+}
+export {
+  z as IconStack
+};
+//# sourceMappingURL=IconStack.js.map

package/dist/components/IconStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconStack.js","sources":["../../src/components/IconStack.tsx"],"sourcesContent":["import type { HTMLAttributes, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Icon, type IconName } from \"./Icon\";\n\n/* ============================================================================\n   ICON STACK — several small marks overlapped into ONE compact glyph.\n\n   WHAT IT IS FOR. A control whose state is the COMBINATION of several\n   independent facts (\"approved\", \"docs on\", \"docs auto-approved\") needs one\n   glyph that shows all of them at once. Three separate icons side by side read\n   as three controls; overlapped into a single mark they read as one thing with\n   parts, which is what the combination is.\n\n   EACH MARK IS A CHIP, not a bare glyph. A bare glyph overlapped onto another\n   is a tangle of strokes; a chip with a ring in the page colour CUTS the glyph\n   beneath it, so the one on top stays readable at 20px and the overlap reads\n   as \"in front of\", never as noise. The later mark sits on top of the earlier.\n\n   AN ABSENT FACT IS DRAWN, NOT OMITTED. `empty` renders a dashed, quiet chip.\n   \"Not approved yet\" is information; a missing glyph is indistinguishable from\n   a glyph that failed to load, and a stack whose first mark vanishes when the\n   fact is false changes width — shifting everything beside it.\n\n   A `badge` PINS A SECOND MARK TO A CHIP'S CORNER, for a fact that qualifies\n   another rather than standing beside it (\"docs, and auto-approved\").\n\n   NAME IT. The whole stack is one `role=\"img\"` carrying the label, and every\n   mark inside is hidden from assistive tech: a screen reader must hear the\n   combination in words once, not three icon names. `label` is required for\n   exactly that reason.\n   ========================================================================= */\n\nexport type IconStackTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"muted\";\n\nexport interface IconStackBadge {\n  icon: IconName;\n  tone?: IconStackTone;\n}\n\nexport interface IconStackItem {\n  icon: IconName;\n  tone?: IconStackTone;\n  /**\n   * The fact is ABSENT: a dashed, quiet outline in place of the filled chip.\n   * `tone` is ignored — an absent mark is always the muted one.\n   */\n  empty?: boolean;\n  /** A smaller mark pinned to this chip's bottom-right corner. */\n  badge?: IconStackBadge;\n}\n\nexport type IconStackSize = \"sm\" | \"md\" | \"lg\";\n\nconst CHIP_TONE: Record<IconStackTone, string> = {\n  neutral: \"border-border bg-surface-raised text-secondary\",\n  accent: \"border-accent-border bg-accent-subtle text-accent-text\",\n  success: \"border-success-border bg-success-subtle text-success-text\",\n  warning: \"border-warning-border bg-warning-subtle text-warning-text\",\n  danger: \"border-danger-border bg-danger-subtle text-danger-text\",\n  info: \"border-info-border bg-info-subtle text-info-text\",\n  muted: \"border-muted-border bg-muted-subtle text-muted-text\",\n};\n\nconst EMPTY_CHIP = \"border-dashed border-muted-border bg-surface text-muted-text\";\n\nconst BADGE_TONE: Record<IconStackTone, string> = {\n  neutral: \"text-secondary\",\n  accent: \"text-accent-text\",\n  success: \"text-success-text\",\n  warning: \"text-warning-text\",\n  danger: \"text-danger-text\",\n  info: \"text-info-text\",\n  muted: \"text-muted-text\",\n};\n\n/* Chip box, glyph size, and how far each later chip tucks under its\n   predecessor. The overlap is a fraction of the chip so it scales with it. */\nconst SIZE: Record<IconStackSize, { chip: string; overlap: string; badge: string; glyph: \"xs\" | \"sm\" }> = {\n  sm: { chip: \"size-5\", overlap: \"-ml-1.5\", badge: \"size-2.5\", glyph: \"xs\" },\n  md: { chip: \"size-6\", overlap: \"-ml-2\", badge: \"size-3\", glyph: \"sm\" },\n  lg: { chip: \"size-7\", overlap: \"-ml-2.5\", badge: \"size-3.5\", glyph: \"sm\" },\n};\n\nexport interface IconStackProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\" | \"aria-label\"> {\n  /** Marks in paint order: the LAST one is on top. At least one. */\n  items: readonly IconStackItem[];\n  /** The whole combination, in words. REQUIRED — the marks carry no text. */\n  label: string;\n  size?: IconStackSize;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function IconStack({ items, label, size = \"md\", className, ref, ...props }: IconStackProps) {\n  const dims = SIZE[size];\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={label}\n      className={cn(\"inline-flex items-center\", className)}\n      {...props}\n    >\n      {items.map((item, index) => (\n        <span\n          // The list is positional by construction (paint order IS identity),\n          // and a mark never reorders without the whole stack re-rendering.\n          key={index}\n          data-empty={item.empty || undefined}\n          className={cn(\n            \"relative grid shrink-0 place-items-center rounded-full border ring-2 ring-surface\",\n            \"transition-[var(--tx-colors)] duration-(--dur-fast)\",\n            dims.chip,\n            index > 0 && dims.overlap,\n            item.empty ? EMPTY_CHIP : CHIP_TONE[item.tone ?? \"neutral\"],\n          )}\n        >\n          <Icon name={item.icon} size={dims.glyph} />\n          {item.badge && (\n            <span\n              className={cn(\n                \"absolute -right-1 -bottom-1 grid place-items-center rounded-full bg-surface ring-1 ring-surface\",\n                dims.badge,\n                BADGE_TONE[item.badge.tone ?? \"neutral\"],\n              )}\n            >\n              <Icon name={item.badge.icon} className=\"size-full\" />\n            </span>\n          )}\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"names":["CHIP_TONE","EMPTY_CHIP","BADGE_TONE","SIZE","IconStack","items","label","size","className","ref","props","dims","jsx","cn","item","index","jsxs","Icon"],"mappings":";;;AAqDA,MAAMA,IAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT,GAEMC,IAAa,gEAEbC,IAA4C;AAAA,EAChD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT,GAIMC,IAAoG;AAAA,EACxG,IAAI,EAAE,MAAM,UAAU,SAAS,WAAW,OAAO,YAAY,OAAO,KAAA;AAAA,EACpE,IAAI,EAAE,MAAM,UAAU,SAAS,SAAS,OAAO,UAAU,OAAO,KAAA;AAAA,EAChE,IAAI,EAAE,MAAM,UAAU,SAAS,WAAW,OAAO,YAAY,OAAO,KAAA;AACtE;AAWO,SAASC,EAAU,EAAE,OAAAC,GAAO,OAAAC,GAAO,MAAAC,IAAO,MAAM,WAAAC,GAAW,KAAAC,GAAK,GAAGC,KAAyB;AACjG,QAAMC,IAAOR,EAAKI,CAAI;AACtB,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,WAAWO,EAAG,4BAA4BL,CAAS;AAAA,MAClD,GAAGE;AAAA,MAEH,UAAAL,EAAM,IAAI,CAACS,GAAMC,MAChB,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAIC,cAAYF,EAAK,SAAS;AAAA,UAC1B,WAAWD;AAAA,YACT;AAAA,YACA;AAAA,YACAF,EAAK;AAAA,YACLI,IAAQ,KAAKJ,EAAK;AAAA,YAClBG,EAAK,QAAQb,IAAaD,EAAUc,EAAK,QAAQ,SAAS;AAAA,UAAA;AAAA,UAG5D,UAAA;AAAA,YAAA,gBAAAF,EAACK,KAAK,MAAMH,EAAK,MAAM,MAAMH,EAAK,OAAO;AAAA,YACxCG,EAAK,SACJ,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACAF,EAAK;AAAA,kBACLT,EAAWY,EAAK,MAAM,QAAQ,SAAS;AAAA,gBAAA;AAAA,gBAGzC,4BAACG,GAAA,EAAK,MAAMH,EAAK,MAAM,MAAM,WAAU,YAAA,CAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACrD;AAAA,QAAA;AAAA,QApBGC;AAAA,MAAA,CAuBR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/ImageUploadField.js

@@ -0,0 +1,146 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as d, useRef as S } from "react";
+import { cn as m } from "../lib/cn.js";
+import { FileUpload as q } from "./FileUpload.js";
+import { Icon as u } from "./Icon.js";
+import { IconButton as I } from "./IconButton.js";
+import { Spinner as D } from "./Spinner.js";
+import { useUiStrings as G } from "../lib/i18n/provider.js";
+const J = {
+  sm: "size-14",
+  md: "size-20",
+  lg: "size-28",
+  xl: "size-36"
+};
+function $({
+  value: P,
+  onChange: f,
+  onUpload: C,
+  shape: p = "circle",
+  size: F = "md",
+  removable: L = !0,
+  accept: g = "image/*",
+  maxSize: A,
+  disabled: t = !1,
+  label: x,
+  description: v,
+  uploadLabel: h,
+  removeLabel: E,
+  className: B,
+  ref: O
+}) {
+  const l = G().imageUploadField, [H, b] = d(null), [i, N] = d(!1), [z, c] = d(null), a = S(null), U = S(null);
+  function R() {
+    a.current && (URL.revokeObjectURL(a.current), a.current = null);
+  }
+  async function k(s) {
+    const n = s[0];
+    if (!n) return;
+    R();
+    const j = URL.createObjectURL(n);
+    a.current = j, b(j), c(null), N(!0);
+    try {
+      const o = await C(n);
+      f?.(o);
+    } catch (o) {
+      c(o instanceof Error ? o.message : l.failed);
+    } finally {
+      N(!1), b(null), R();
+    }
+  }
+  function Z() {
+    c(null), f?.(null);
+  }
+  const y = H ?? P ?? null, _ = !!y, w = p === "circle" ? "rounded-full" : "rounded-lg";
+  return /* @__PURE__ */ r("div", { ref: O, className: m("flex flex-col gap-2", B), children: [
+    x && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-secondary", children: x }),
+    _ ? /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: m(
+            "relative shrink-0 overflow-hidden border border-border bg-surface-inset",
+            J[F],
+            w
+          ),
+          children: [
+            /* @__PURE__ */ e("img", { src: y ?? void 0, alt: "", className: "size-full object-cover" }),
+            i && /* @__PURE__ */ e(
+              "div",
+              {
+                className: m(
+                  "absolute inset-0 grid place-items-center bg-surface/70",
+                  w
+                ),
+                children: /* @__PURE__ */ e(D, { size: "sm" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ e(
+            I,
+            {
+              icon: /* @__PURE__ */ e(u, { name: "upload", size: "sm" }),
+              label: h ?? l.upload,
+              size: "sm",
+              disabledReason: t ? l.disabled : i ? l.uploading : void 0,
+              onClick: () => U.current?.click()
+            }
+          ),
+          L && /* @__PURE__ */ e(
+            I,
+            {
+              icon: /* @__PURE__ */ e(u, { name: "trash-2", size: "sm" }),
+              label: E ?? l.remove,
+              tone: "danger",
+              size: "sm",
+              disabledReason: t ? l.disabled : i ? l.uploading : void 0,
+              onClick: Z
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: U,
+            type: "file",
+            accept: g,
+            disabled: t || i,
+            onChange: (s) => {
+              const n = s.target.files ? Array.from(s.target.files) : [];
+              s.target.value = "", k(n);
+            },
+            className: "sr-only",
+            "aria-hidden": !0,
+            tabIndex: -1
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ e(
+      q,
+      {
+        multiple: !1,
+        accept: g,
+        maxSize: A,
+        disabled: t || i,
+        label: i ? l.uploading : h ?? l.upload,
+        hint: p === "circle" ? l.cropHint : void 0,
+        onFilesAdded: (s) => {
+          k(s);
+        },
+        className: "max-w-2xs"
+      }
+    ),
+    z ? /* @__PURE__ */ r("p", { className: "flex items-start gap-1.5 text-2xs text-danger-text", children: [
+      /* @__PURE__ */ e(u, { name: "circle-alert", size: "xs", className: "mt-px shrink-0" }),
+      z
+    ] }) : v && /* @__PURE__ */ e("p", { className: "text-2xs text-tertiary", children: v })
+  ] });
+}
+export {
+  $ as ImageUploadField
+};
+//# sourceMappingURL=ImageUploadField.js.map

package/dist/components/ImageUploadField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadField.js","sources":["../../src/components/ImageUploadField.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { FileUpload } from \"./FileUpload\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Spinner } from \"./Spinner\";\n\n/* ============================================================================\n   IMAGE UPLOAD FIELD\n\n   ONE IMAGE, TWO STATES OF UI — and which one is on screen is decided purely\n   by whether there is a value to show. With nothing set, this composes\n   `FileUpload` directly (per this library's own rule: drag/drop is that\n   component's job, never hand-rolled a second time) so the empty state gets\n   its focusable `<label>`/`<input type=file>`, its drag-depth counter and its\n   rejected-file messaging for free. With a value set — either the caller's\n   `value` or a locally-held object URL for a file mid-upload — the drop zone\n   is replaced by a compact preview (circle or square) with a floating\n   replace/remove pair, because a full drop zone the size of an avatar reads as\n   broken chrome, not an upload control.\n\n   THIS COMPONENT NEVER UPLOADS ANYTHING ITSELF. `onUpload` is the consumer's\n   async callback (an S3 PUT, a multipart POST, whatever their backend wants);\n   this component's only jobs are picking the file, showing a pending state\n   while that promise is in flight, and surfacing whatever it rejects with.\n   The moment it resolves, the returned URL becomes the new `value` via\n   `onChange` — this is a controlled component, same relationship every other\n   field in this library has with its data, never a fetch of its own.\n\n   THE OBJECT-URL PREVIEW IS LOCAL AND TEMPORARY. Showing the *picked* file\n   immediately (before `onUpload` has resolved) is what makes the control feel\n   instant rather than frozen for however long the upload takes; the blob URL\n   is revoked the moment it stops being the active preview so a rapid\n   replace-replace-replace sequence cannot leak one per attempt.\n   ========================================================================= */\n\nexport type ImageUploadFieldShape = \"circle\" | \"square\";\nexport type ImageUploadFieldSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst SIZE_CLASS: Record<ImageUploadFieldSize, string> = {\n  sm: \"size-14\",\n  md: \"size-20\",\n  lg: \"size-28\",\n  xl: \"size-36\",\n};\n\nexport interface ImageUploadFieldProps {\n  /** The current image URL. `undefined`/`null` means nothing is set yet. */\n  value?: string | null;\n  /**\n   * Fired once a pick resolves — either a successful upload (the URL\n   * `onUpload` returned) or a remove (`null`). This is the only way `value`\n   * ever changes; the component holds no persistent state of its own.\n   */\n  onChange?: (url: string | null) => void;\n  /** Uploads the picked file and resolves with its stored URL. Rejecting\n   *  surfaces the rejection's `message` (or the rejection itself, stringified)\n   *  as this field's error. */\n  onUpload: (file: File) => Promise<string>;\n  shape?: ImageUploadFieldShape;\n  size?: ImageUploadFieldSize;\n  /** Hides the remove control even when a value is set — for a slot that must\n   *  always hold *something* (e.g. a required team logo with a seeded\n   *  default). Default `true`. */\n  removable?: boolean;\n  accept?: string;\n  /** Bytes. Forwarded to `FileUpload`'s own limit + rejection message. */\n  maxSize?: number;\n  disabled?: boolean;\n  /** Rendered above the preview. */\n  label?: ReactNode;\n  /** Rendered under the preview, when there is no error to show instead. */\n  description?: ReactNode;\n  /** Accessible name for the replace/pick control — required since the\n   *  control the preview state renders is icon-only. */\n  uploadLabel?: string;\n  removeLabel?: string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ImageUploadField({\n  value,\n  onChange,\n  onUpload,\n  shape = \"circle\",\n  size = \"md\",\n  removable = true,\n  accept = \"image/*\",\n  maxSize,\n  disabled = false,\n  label,\n  description,\n  uploadLabel,\n  removeLabel,\n  className,\n  ref,\n}: ImageUploadFieldProps) {\n  const strings = useUiStrings().imageUploadField;\n  const [pendingPreview, setPendingPreview] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const objectUrlRef = useRef<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  function revokePending() {\n    if (objectUrlRef.current) {\n      URL.revokeObjectURL(objectUrlRef.current);\n      objectUrlRef.current = null;\n    }\n  }\n\n  async function pick(files: File[]) {\n    const file = files[0];\n    if (!file) return;\n\n    revokePending();\n    const localUrl = URL.createObjectURL(file);\n    objectUrlRef.current = localUrl;\n    setPendingPreview(localUrl);\n    setError(null);\n    setUploading(true);\n\n    try {\n      const url = await onUpload(file);\n      onChange?.(url);\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : strings.failed);\n    } finally {\n      setUploading(false);\n      setPendingPreview(null);\n      revokePending();\n    }\n  }\n\n  function handleRemove() {\n    setError(null);\n    onChange?.(null);\n  }\n\n  const preview = pendingPreview ?? value ?? null;\n  const hasPreview = Boolean(preview);\n  const shapeClass = shape === \"circle\" ? \"rounded-full\" : \"rounded-lg\";\n\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-2\", className)}>\n      {label && <span className=\"text-xs font-medium text-secondary\">{label}</span>}\n\n      {hasPreview ? (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"relative shrink-0 overflow-hidden border border-border bg-surface-inset\",\n              SIZE_CLASS[size],\n              shapeClass,\n            )}\n          >\n            {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}\n            <img src={preview ?? undefined} alt=\"\" className=\"size-full object-cover\" />\n            {uploading && (\n              <div\n                className={cn(\n                  \"absolute inset-0 grid place-items-center bg-surface/70\",\n                  shapeClass,\n                )}\n              >\n                <Spinner size=\"sm\" />\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center gap-1.5\">\n              <IconButton\n                icon={<Icon name=\"upload\" size=\"sm\" />}\n                label={uploadLabel ?? strings.upload}\n                size=\"sm\"\n                disabledReason={disabled ? strings.disabled : uploading ? strings.uploading : undefined}\n                onClick={() => inputRef.current?.click()}\n              />\n              {removable && (\n                <IconButton\n                  icon={<Icon name=\"trash-2\" size=\"sm\" />}\n                  label={removeLabel ?? strings.remove}\n                  tone=\"danger\"\n                  size=\"sm\"\n                  disabledReason={disabled ? strings.disabled : uploading ? strings.uploading : undefined}\n                  onClick={handleRemove}\n                />\n              )}\n            </div>\n            {/* A hidden native input backs the replace button above — the\n                compact preview state has no room for `FileUpload`'s full drop\n                zone, but the file PICKING still goes through one real\n                `<input type=file>` rather than a second hand-rolled one. */}\n            <input\n              ref={inputRef}\n              type=\"file\"\n              accept={accept}\n              disabled={disabled || uploading}\n              onChange={(event) => {\n                const files = event.target.files ? Array.from(event.target.files) : [];\n                event.target.value = \"\";\n                void pick(files);\n              }}\n              className=\"sr-only\"\n              aria-hidden\n              tabIndex={-1}\n            />\n          </div>\n        </div>\n      ) : (\n        <FileUpload\n          multiple={false}\n          accept={accept}\n          maxSize={maxSize}\n          disabled={disabled || uploading}\n          label={uploading ? strings.uploading : (uploadLabel ?? strings.upload)}\n          hint={shape === \"circle\" ? strings.cropHint : undefined}\n          onFilesAdded={(files) => void pick(files)}\n          /* Capped rather than left full-width: `FileUpload`'s own drop zone\n             is sized for a document/attachment upload, and stretching it to\n             match a form's full column width reads oddly next to a control\n             whose whole point is a small circular/square image. The cap\n             keeps its real drag/drop mechanics and messaging intact — only\n             the WIDTH it is allowed to claim changes. */\n          className=\"max-w-2xs\"\n        />\n      )}\n\n      {error ? (\n        <p className=\"flex items-start gap-1.5 text-2xs text-danger-text\">\n          <Icon name=\"circle-alert\" size=\"xs\" className=\"mt-px shrink-0\" />\n          {error}\n        </p>\n      ) : (\n        description && <p className=\"text-2xs text-tertiary\">{description}</p>\n      )}\n    </div>\n  );\n}\n"],"names":["SIZE_CLASS","ImageUploadField","value","onChange","onUpload","shape","size","removable","accept","maxSize","disabled","label","description","uploadLabel","removeLabel","className","ref","strings","useUiStrings","pendingPreview","setPendingPreview","useState","uploading","setUploading","error","setError","objectUrlRef","useRef","inputRef","revokePending","pick","files","file","localUrl","url","cause","handleRemove","preview","hasPreview","shapeClass","cn","jsx","jsxs","Spinner","IconButton","Icon","event","FileUpload"],"mappings":";;;;;;;;AAwCA,MAAMA,IAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAqCO,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AACF,GAA0B;AACxB,QAAMC,IAAUC,IAAe,kBACzB,CAACC,GAAgBC,CAAiB,IAAIC,EAAwB,IAAI,GAClE,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAOC,CAAQ,IAAIJ,EAAwB,IAAI,GAChDK,IAAeC,EAAsB,IAAI,GACzCC,IAAWD,EAAyB,IAAI;AAE9C,WAASE,IAAgB;AACvB,IAAIH,EAAa,YACf,IAAI,gBAAgBA,EAAa,OAAO,GACxCA,EAAa,UAAU;AAAA,EAE3B;AAEA,iBAAeI,EAAKC,GAAe;AACjC,UAAMC,IAAOD,EAAM,CAAC;AACpB,QAAI,CAACC,EAAM;AAEX,IAAAH,EAAA;AACA,UAAMI,IAAW,IAAI,gBAAgBD,CAAI;AACzC,IAAAN,EAAa,UAAUO,GACvBb,EAAkBa,CAAQ,GAC1BR,EAAS,IAAI,GACbF,EAAa,EAAI;AAEjB,QAAI;AACF,YAAMW,IAAM,MAAM9B,EAAS4B,CAAI;AAC/B,MAAA7B,IAAW+B,CAAG;AAAA,IAChB,SAASC,GAAO;AACd,MAAAV,EAASU,aAAiB,QAAQA,EAAM,UAAUlB,EAAQ,MAAM;AAAA,IAClE,UAAA;AACE,MAAAM,EAAa,EAAK,GAClBH,EAAkB,IAAI,GACtBS,EAAA;AAAA,IACF;AAAA,EACF;AAEA,WAASO,IAAe;AACtB,IAAAX,EAAS,IAAI,GACbtB,IAAW,IAAI;AAAA,EACjB;AAEA,QAAMkC,IAAUlB,KAAkBjB,KAAS,MACrCoC,IAAa,EAAQD,GACrBE,IAAalC,MAAU,WAAW,iBAAiB;AAEzD,2BACG,OAAA,EAAI,KAAAW,GAAU,WAAWwB,EAAG,uBAAuBzB,CAAS,GAC1D,UAAA;AAAA,IAAAJ,KAAS,gBAAA8B,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAA9B,GAAM;AAAA,IAErE2B,IACC,gBAAAI,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAA,YACT;AAAA,YACAxC,EAAWM,CAAI;AAAA,YACfiC;AAAA,UAAA;AAAA,UAIF,UAAA;AAAA,YAAA,gBAAAE,EAAC,SAAI,KAAKJ,KAAW,QAAW,KAAI,IAAG,WAAU,0BAAyB;AAAA,YACzEf,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD;AAAA,kBACT;AAAA,kBACAD;AAAA,gBAAA;AAAA,gBAGF,UAAA,gBAAAE,EAACE,GAAA,EAAQ,MAAK,KAAA,CAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACrB;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJ,gBAAAD,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAM,gBAAAH,EAACI,GAAA,EAAK,MAAK,UAAS,MAAK,MAAK;AAAA,cACpC,OAAOhC,KAAeI,EAAQ;AAAA,cAC9B,MAAK;AAAA,cACL,gBAAgBP,IAAWO,EAAQ,WAAWK,IAAYL,EAAQ,YAAY;AAAA,cAC9E,SAAS,MAAMW,EAAS,SAAS,MAAA;AAAA,YAAM;AAAA,UAAA;AAAA,UAExCrB,KACC,gBAAAkC;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAM,gBAAAH,EAACI,GAAA,EAAK,MAAK,WAAU,MAAK,MAAK;AAAA,cACrC,OAAO/B,KAAeG,EAAQ;AAAA,cAC9B,MAAK;AAAA,cACL,MAAK;AAAA,cACL,gBAAgBP,IAAWO,EAAQ,WAAWK,IAAYL,EAAQ,YAAY;AAAA,cAC9E,SAASmB;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,GAEJ;AAAA,QAKA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,MAAK;AAAA,YACL,QAAApB;AAAA,YACA,UAAUE,KAAYY;AAAA,YACtB,UAAU,CAACwB,MAAU;AACnB,oBAAMf,IAAQe,EAAM,OAAO,QAAQ,MAAM,KAAKA,EAAM,OAAO,KAAK,IAAI,CAAA;AACpE,cAAAA,EAAM,OAAO,QAAQ,IAChBhB,EAAKC,CAAK;AAAA,YACjB;AAAA,YACA,WAAU;AAAA,YACV,eAAW;AAAA,YACX,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ,EAAA,CACF;AAAA,IAAA,EAAA,CACF,IAEA,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,QAAAvC;AAAA,QACA,SAAAC;AAAA,QACA,UAAUC,KAAYY;AAAA,QACtB,OAAOA,IAAYL,EAAQ,YAAaJ,KAAeI,EAAQ;AAAA,QAC/D,MAAMZ,MAAU,WAAWY,EAAQ,WAAW;AAAA,QAC9C,cAAc,CAACc;AAAU,UAAKD,EAAKC,CAAK;AAAA;AAAA,QAOxC,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAIbP,IACC,gBAAAkB,EAAC,KAAA,EAAE,WAAU,sDACX,UAAA;AAAA,MAAA,gBAAAD,EAACI,KAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,kBAAiB;AAAA,MAC9DrB;AAAA,IAAA,GACH,IAEAZ,KAAe,gBAAA6B,EAAC,KAAA,EAAE,WAAU,0BAA0B,UAAA7B,EAAA,CAAY;AAAA,EAAA,GAEtE;AAEJ;"}