@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Toast.js

@@ -0,0 +1,217 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { Toast as i } from "@base-ui/react/toast";
+import { cn as u } from "../lib/cn.js";
+import { Icon as f } from "./Icon.js";
+import { Button as b } from "./Button.js";
+import { IconButton as w } from "./IconButton.js";
+import { useUiStrings as v } from "../lib/i18n/provider.js";
+const x = {
+  info: { icon: "info", className: "text-info" },
+  success: { icon: "circle-check", className: "text-success" },
+  warning: { icon: "triangle-alert", className: "text-warning" },
+  error: { icon: "circle-x", className: "text-danger" },
+  loading: { icon: "loader-circle", className: "text-accent animate-spin" }
+}, g = ({ className: e }) => /* @__PURE__ */ t(i.Action, { className: e, render: /* @__PURE__ */ t(b, { size: "sm", variant: "outline" }) });
+function N({
+  hasAction: e,
+  tone: s,
+  onClick: o,
+  closeLabel: a
+}) {
+  const r = h(), n = /* @__PURE__ */ t(
+    i.Close,
+    {
+      render: (
+        /* The name moved from the Base UI slot onto the control
+           itself. It was reaching the button either way, but only
+           `IconButton`'s required `label` makes it impossible to
+           drop — which is the whole point of routing through it. */
+        /* @__PURE__ */ t(
+          w,
+          {
+            label: a,
+            hideTooltip: !0,
+            size: "xs",
+            icon: /* @__PURE__ */ t(f, { name: "x", size: "xs" })
+          }
+        )
+      )
+    }
+  ), l = /* @__PURE__ */ t(f, { name: s.icon, size: "md", className: u("mt-px", s.className) }), m = /* @__PURE__ */ t(
+    i.Title,
+    {
+      id: o ? r : void 0,
+      className: "text-sm font-semibold text-primary"
+    }
+  ), p = /* @__PURE__ */ t(
+    i.Description,
+    {
+      render: /* @__PURE__ */ t("div", {}),
+      className: "mt-0.5 text-xs text-secondary text-pretty"
+    }
+  );
+  return o ? /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-labelledby": r,
+          onClick: o,
+          onKeyDown: (d) => {
+            d.target === d.currentTarget && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), o());
+          },
+          className: u(
+            "-m-1 flex cursor-pointer items-start gap-3 rounded-lg p-1 outline-none",
+            "transition-[var(--tx-colors)] hover:bg-surface-hover",
+            "focus-visible:ring-2 focus-visible:ring-accent"
+          ),
+          children: [
+            l,
+            /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+              m,
+              p
+            ] })
+          ]
+        }
+      ),
+      e ? /* @__PURE__ */ t(g, { className: "mt-2.5 ml-8" }) : null
+    ] }),
+    n
+  ] }) : /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
+    l,
+    /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+      m,
+      p,
+      e ? /* @__PURE__ */ t(g, { className: "mt-2.5" }) : null
+    ] }),
+    n
+  ] });
+}
+const T = {
+  "top-right": "top-4 right-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+};
+function j({ position: e = "bottom-right" }) {
+  const s = v().toast, { toasts: o } = i.useToastManager(), a = e.startsWith("top");
+  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
+    i.Viewport,
+    {
+      "aria-label": s.viewport,
+      className: u(
+        "fixed z-(--z-toast) flex w-[min(24rem,calc(100vw-2rem))] flex-col outline-none",
+        T[e]
+      ),
+      children: o.map((r, n) => {
+        const l = x[r.type ?? "info"] ?? x.info;
+        return /* @__PURE__ */ t(
+          i.Root,
+          {
+            toast: r,
+            className: u(
+              /* dx-toast is a stable hook for the overlay screenshot pass —
+                 Base UI gives the root role="dialog", which is not something
+                 a test can select on unambiguously. */
+              "dx-toast absolute inset-x-0 select-none",
+              a ? "top-0" : "bottom-0",
+              "dx-ground-overlay rounded-xl border border-border bg-surface-overlay p-4 shadow-lg",
+              "transition-[var(--tx-colors),opacity,transform] duration-(--dur-slower) ease-emphasis",
+              /* The stack expression. `--toast-offset-y` is the summed height
+                                 of the toasts in front, so cards of different heights still
+                                 nest correctly instead of overlapping their own text.
+              
+                                 IT ALREADY CARRIES UNITS — Base UI publishes it as `73px`,
+                                 not `73`. Multiplying it by `1px` gave `calc(73px * 1px)`,
+                                 which is an area, not a length; CSS dropped the whole
+                                 declaration and every toast landed at the same y, the
+                                 scaled-down ones hidden inside the front one. No error, no
+                                 warning, and the stack simply never existed. Multiply by the
+                                 unitless `-1` to flip direction, and use the value directly
+                                 when it does not need flipping. */
+              a ? "translate-y-[var(--toast-offset-y)]" : "translate-y-[calc(var(--toast-offset-y)*-1)]",
+              "scale-[calc(1-var(--toast-index)*0.05)]",
+              "data-[expanded]:scale-100",
+              /* Entry comes from OFF the edge it lives on, so the toast
+                 reads as sliding in from outside the viewport rather than
+                 materialising over the content. */
+              a ? "data-starting-style:-translate-y-full" : "data-starting-style:translate-y-full",
+              "data-starting-style:opacity-0",
+              "data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)",
+              /* Swiped away: follow the finger out rather than fading in
+                 place, which feels like the gesture was ignored. */
+              "data-[swipe-direction=right]:data-ending-style:translate-x-full",
+              "data-[swipe-direction=left]:data-ending-style:-translate-x-full",
+              r.limited && "opacity-0"
+            ),
+            style: { zIndex: o.length - n },
+            swipeDirection: a ? "up" : "down",
+            children: /* @__PURE__ */ t(
+              N,
+              {
+                hasAction: !!r.actionProps,
+                tone: l,
+                onClick: r.data?.onClick,
+                closeLabel: s.dismiss
+              }
+            )
+          },
+          r.id
+        );
+      })
+    }
+  ) });
+}
+function A({ children: e, limit: s = 3 }) {
+  return /* @__PURE__ */ t(i.Provider, { limit: s, children: e });
+}
+const y = {
+  info: 5e3,
+  success: 4e3,
+  warning: 7e3,
+  /* An error someone never read is an error that will happen again. */
+  error: 0,
+  /* A loading toast ends when the work does, not on a clock. */
+  loading: 0
+};
+function K() {
+  const e = i.useToastManager();
+  return {
+    show({ title: s, description: o, tone: a = "info", timeout: r, action: n, onClick: l, onClose: m }) {
+      return e.add({
+        title: s,
+        description: o,
+        type: a,
+        timeout: r ?? y[a],
+        priority: a === "error" ? "high" : "low",
+        onClose: m,
+        ...l ? { data: { onClick: l } } : {},
+        ...n ? { actionProps: { children: n.label, onClick: n.onClick } } : {}
+      });
+    },
+    promise(s, o) {
+      const a = e.add({
+        title: o.loading,
+        type: "loading",
+        timeout: 0
+      });
+      return s.then((r) => (e.update(a, {
+        title: o.success,
+        type: "success",
+        timeout: y.success
+      }), r)).catch((r) => {
+        throw e.update(a, { title: o.error, type: "error", timeout: 0 }), r;
+      });
+    },
+    close: e.close
+  };
+}
+export {
+  A as ToastProvider,
+  j as Toaster,
+  K as useToast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../src/components/Toast.tsx"],"sourcesContent":["import { useId, type KeyboardEvent, type ReactNode } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { Button } from \"./Button\";\nimport { IconButton } from \"./IconButton\";\n\n/* ============================================================================\n   TOAST\n\n   THE STACK IS THE HARD PART, AND IT IS SOLVED WITH ONE VARIABLE.\n\n   Toasts do not sit in a list — they sit on top of each other, the front one\n   readable and the ones behind it peeking out, scaled down and dimmed. Base UI\n   exposes `--toast-index` and `--toast-offset-y` on each toast, so the whole\n   effect is a transform expression rather than any layout maths:\n\n     translateY  push back by the accumulated height of everything in front\n     scale       shrink 5% per position, so depth reads without a shadow trick\n     opacity     fade out past the third, so a burst does not become a wall\n\n   All three are transform/opacity, so a stack of ten animates on the\n   compositor no matter how much text each one holds.\n\n   TIMING IS SEMANTIC. An error stays until dismissed (timeout 0) because a\n   failure someone did not read is a failure that will happen again; success\n   leaves on its own, because it needs acknowledging, not acting on.\n   ========================================================================= */\n\nconst TONE: Record<string, { icon: IconName; className: string }> = {\n  info: { icon: \"info\", className: \"text-info\" },\n  success: { icon: \"circle-check\", className: \"text-success\" },\n  warning: { icon: \"triangle-alert\", className: \"text-warning\" },\n  error: { icon: \"circle-x\", className: \"text-danger\" },\n  loading: { icon: \"loader-circle\", className: \"text-accent animate-spin\" },\n};\n\nexport type ToastTone = keyof typeof TONE;\n\ninterface ToastData {\n  onClick?: () => void;\n}\n\nconst ToastAction = ({ className }: { className?: string }) => (\n  <BaseToast.Action className={className} render={<Button size=\"sm\" variant=\"outline\" />} />\n);\n\n/**\n * DXUI-13: with `onClick` the icon, title and description are ONE pressable\n * region (role=button, Tab, Enter/Space, named from the title). The action and\n * the close button sit outside it, so pressing them can never reach `onClick`.\n * Without `onClick` the markup is exactly what it was before.\n */\nfunction ToastBody({\n  hasAction,\n  tone,\n  onClick,\n  closeLabel,\n}: {\n  hasAction: boolean;\n  tone: { icon: IconName; className: string };\n  onClick?: () => void;\n  closeLabel: string;\n}) {\n  const titleId = useId();\n  const close = (\n    <BaseToast.Close\n      render={\n        /* The name moved from the Base UI slot onto the control\n           itself. It was reaching the button either way, but only\n           `IconButton`'s required `label` makes it impossible to\n           drop — which is the whole point of routing through it. */\n        <IconButton\n          label={closeLabel}\n          hideTooltip\n          size=\"xs\"\n          icon={<Icon name=\"x\" size=\"xs\" />}\n        />\n      }\n    />\n  );\n  const icon = <Icon name={tone.icon} size=\"md\" className={cn(\"mt-px\", tone.className)} />;\n  const title = (\n    <BaseToast.Title\n      id={onClick ? titleId : undefined}\n      className=\"text-sm font-semibold text-primary\"\n    />\n  );\n  /* `render={<div />}` rather than the default `<p>`. `description`\n     is typed `ReactNode` (below), not `string` — a caller passing\n     block content (a progress bar, a list) inside a `<p>` produces\n     invalid HTML: the browser silently closes the `<p>` at the first\n     nested block element, splitting the DOM out from under\n     `aria-describedby` and anything a test or a screen reader\n     expects to find inside it. `BaseToast.Description` still emits\n     the same id/aria wiring either way — only the tag changes. */\n  const description = (\n    <BaseToast.Description\n      render={<div />}\n      className=\"mt-0.5 text-xs text-secondary text-pretty\"\n    />\n  );\n\n  if (!onClick) {\n    return (\n      <div className=\"flex items-start gap-3\">\n        {icon}\n        <div className=\"min-w-0 flex-1\">\n          {title}\n          {description}\n          {hasAction ? <ToastAction className=\"mt-2.5\" /> : null}\n        </div>\n        {close}\n      </div>\n    );\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onClick();\n    }\n  };\n  return (\n    <div className=\"flex items-start gap-3\">\n      <div className=\"min-w-0 flex-1\">\n        <div\n          role=\"button\"\n          tabIndex={0}\n          aria-labelledby={titleId}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          className={cn(\n            \"-m-1 flex cursor-pointer items-start gap-3 rounded-lg p-1 outline-none\",\n            \"transition-[var(--tx-colors)] hover:bg-surface-hover\",\n            \"focus-visible:ring-2 focus-visible:ring-accent\",\n          )}\n        >\n          {icon}\n          <div className=\"min-w-0 flex-1\">\n            {title}\n            {description}\n          </div>\n        </div>\n        {/* ml-8 = icon width (md) + gap-3, so the action lines up under the title. */}\n        {hasAction ? <ToastAction className=\"mt-2.5 ml-8\" /> : null}\n      </div>\n      {close}\n    </div>\n  );\n}\n\nexport interface ToasterProps {\n  /** Where the stack lives. Bottom-right keeps it clear of primary content. */\n  position?: \"top-right\" | \"top-center\" | \"bottom-right\" | \"bottom-center\";\n}\n\nconst POSITION: Record<NonNullable<ToasterProps[\"position\"]>, string> = {\n  \"top-right\": \"top-4 right-4\",\n  \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-4 right-4\",\n  \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n};\n\n/** Renders the stack. Mount once, inside `ToastProvider`. */\nexport function Toaster({ position = \"bottom-right\" }: ToasterProps) {\n  const strings = useUiStrings().toast;\n  const { toasts } = BaseToast.useToastManager();\n  const fromTop = position.startsWith(\"top\");\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport\n        aria-label={strings.viewport}\n        className={cn(\n          \"fixed z-(--z-toast) flex w-[min(24rem,calc(100vw-2rem))] flex-col outline-none\",\n          POSITION[position],\n        )}\n      >\n        {toasts.map((toast, index) => {\n          // I18N-ALLOW: toast type token used as a key into the tone table\n          const tone = TONE[toast.type ?? \"info\"] ?? TONE.info;\n          return (\n            <BaseToast.Root\n              key={toast.id}\n              toast={toast}\n              className={cn(\n                /* dx-toast is a stable hook for the overlay screenshot pass —\n                   Base UI gives the root role=\"dialog\", which is not something\n                   a test can select on unambiguously. */\n                \"dx-toast absolute inset-x-0 select-none\",\n                fromTop ? \"top-0\" : \"bottom-0\",\n                \"dx-ground-overlay rounded-xl border border-border bg-surface-overlay p-4 shadow-lg\",\n                \"transition-[var(--tx-colors),opacity,transform] duration-(--dur-slower) ease-emphasis\",\n                /* The stack expression. `--toast-offset-y` is the summed height\n                   of the toasts in front, so cards of different heights still\n                   nest correctly instead of overlapping their own text.\n\n                   IT ALREADY CARRIES UNITS — Base UI publishes it as `73px`,\n                   not `73`. Multiplying it by `1px` gave `calc(73px * 1px)`,\n                   which is an area, not a length; CSS dropped the whole\n                   declaration and every toast landed at the same y, the\n                   scaled-down ones hidden inside the front one. No error, no\n                   warning, and the stack simply never existed. Multiply by the\n                   unitless `-1` to flip direction, and use the value directly\n                   when it does not need flipping. */\n                fromTop\n                  ? \"translate-y-[var(--toast-offset-y)]\"\n                  : \"translate-y-[calc(var(--toast-offset-y)*-1)]\",\n                \"scale-[calc(1-var(--toast-index)*0.05)]\",\n                \"data-[expanded]:scale-100\",\n                /* Entry comes from OFF the edge it lives on, so the toast\n                   reads as sliding in from outside the viewport rather than\n                   materialising over the content. */\n                fromTop\n                  ? \"data-starting-style:-translate-y-full\"\n                  : \"data-starting-style:translate-y-full\",\n                \"data-starting-style:opacity-0\",\n                \"data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)\",\n                /* Swiped away: follow the finger out rather than fading in\n                   place, which feels like the gesture was ignored. */\n                \"data-[swipe-direction=right]:data-ending-style:translate-x-full\",\n                \"data-[swipe-direction=left]:data-ending-style:-translate-x-full\",\n                toast.limited && \"opacity-0\",\n              )}\n              /* Newest toast frontmost. `toasts` is newest-first, so the\n                 z-index has to COUNT DOWN with the index — the first version\n                 gave every toast the same value, which left DOM order to\n                 decide and put the oldest on top of the newest. */\n              style={{ zIndex: toasts.length - index }}\n              swipeDirection={fromTop ? \"up\" : \"down\"}\n            >\n              <ToastBody\n                hasAction={Boolean(toast.actionProps)}\n                tone={tone}\n                onClick={(toast.data as ToastData | undefined)?.onClick}\n                closeLabel={strings.dismiss}\n              />\n            </BaseToast.Root>\n          );\n        })}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  );\n}\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  limit?: number;\n}\n\nexport function ToastProvider({ children, limit = 3 }: ToastProviderProps) {\n  return <BaseToast.Provider limit={limit}>{children}</BaseToast.Provider>;\n}\n\n/** Default lifetimes, in ms. `0` means \"stays until dismissed\". */\nconst TIMEOUT: Record<ToastTone, number> = {\n  info: 5000,\n  success: 4000,\n  warning: 7000,\n  /* An error someone never read is an error that will happen again. */\n  error: 0,\n  /* A loading toast ends when the work does, not on a clock. */\n  loading: 0,\n};\n\nexport interface ToastOptions {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: ToastTone;\n  /** Override the tone's default lifetime. `0` keeps it until dismissed. */\n  timeout?: number;\n  action?: { label: string; onClick: () => void };\n  /**\n   * Makes the toast body (icon, title, description) one pressable region:\n   * pointer cursor, hover and focus styles, Tab, Enter and Space, named from\n   * the title. The close button and `action` stay separate targets and never\n   * fire it. It does not close the toast; call `close(id)` to do that.\n   * `description` must hold no interactive content when `onClick` is set: it\n   * sits inside the pressable region.\n   */\n  onClick?: () => void;\n  /**\n   * Called when this toast leaves the stack — by its own close button, by\n   * swipe, by timeout, or by a caller's own `close(id)`. For a caller that\n   * needs to know WHETHER a toast it raised is still up (a reopen affordance\n   * beside a dismissed notification, say) without holding a reference to the\n   * manager itself.\n   */\n  onClose?: () => void;\n}\n\n/**\n * Raise toasts from anywhere under `ToastProvider`.\n *\n * `promise` is the one worth reaching for: it shows a loading toast, then\n * swaps that SAME toast to success or error in place. Two separate toasts for\n * one operation makes the stack tell a story nobody asked for.\n */\nexport function useToast() {\n  const manager = BaseToast.useToastManager();\n\n  return {\n    show({ title, description, tone = \"info\", timeout, action, onClick, onClose }: ToastOptions) {\n      return manager.add({\n        title,\n        description,\n        type: tone,\n        timeout: timeout ?? TIMEOUT[tone],\n        priority: tone === \"error\" ? \"high\" : \"low\",\n        onClose,\n        ...(onClick ? { data: { onClick } satisfies ToastData } : {}),\n        ...(action\n          ? { actionProps: { children: action.label, onClick: action.onClick } }\n          : {}),\n      });\n    },\n    promise<T>(\n      promise: Promise<T>,\n      messages: { loading: ReactNode; success: ReactNode; error: ReactNode },\n    ) {\n      const id = manager.add({\n        title: messages.loading,\n        type: \"loading\",\n        timeout: 0,\n      });\n      return promise\n        .then((value) => {\n          manager.update(id, {\n            title: messages.success,\n            type: \"success\",\n            timeout: TIMEOUT.success,\n          });\n          return value;\n        })\n        .catch((error: unknown) => {\n          manager.update(id, { title: messages.error, type: \"error\", timeout: 0 });\n          throw error;\n        });\n    },\n    close: manager.close,\n  };\n}\n"],"names":["TONE","ToastAction","className","BaseToast","jsx","Button","ToastBody","hasAction","tone","onClick","closeLabel","titleId","useId","close","IconButton","Icon","icon","cn","title","description","jsxs","event","POSITION","Toaster","position","strings","useUiStrings","toasts","fromTop","toast","index","ToastProvider","children","limit","TIMEOUT","useToast","manager","timeout","action","onClose","promise","messages","id","value","error"],"mappings":"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"}

package/dist/components/Toggle.js

@@ -0,0 +1,147 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { Toggle as u } from "@base-ui/react/toggle";
+import { ToggleGroup as c } from "@base-ui/react/toggle-group";
+import { Toolbar as l } from "@base-ui/react/toolbar";
+import { tv as p } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+import { buttonVariants as b } from "./Button.js";
+import { Input as f } from "./Input.js";
+import { PendingVeil as g } from "./PendingVeil.js";
+const x = p({
+  base: [
+    "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2",
+    "rounded-md font-medium whitespace-nowrap text-secondary",
+    "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+    "hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-primary",
+    "data-pressed:bg-control-subtle data-pressed:text-control-text",
+    /* Pressed AND hovered. The hover rule above carries three conditions and
+       `data-pressed:` carries one, so without this a pressed toggle painted
+       itself UNPRESSED for as long as the pointer sat on it. */
+    "data-pressed:hover:not-data-disabled:bg-control-subtle-hover",
+    "data-disabled:pointer-events-none data-disabled:opacity-45",
+    "active:not-data-disabled:scale-[0.97]"
+  ],
+  variants: {
+    size: {
+      sm: "h-control-sm px-2.5 text-xs",
+      md: "h-control-md px-3 text-sm",
+      lg: "h-control-lg px-4 text-md"
+    },
+    iconOnly: { true: "px-0 aspect-square", false: "" }
+  },
+  defaultVariants: { size: "md", iconOnly: !1 }
+});
+function I({ size: r, iconOnly: t, className: e, children: o, ref: s, ...i }) {
+  return /* @__PURE__ */ a(u, { ref: s, className: n(x({ size: r, iconOnly: t }), e), ...i, children: o });
+}
+function V({
+  className: r,
+  variant: t = "plain",
+  loading: e = !1,
+  disabled: o,
+  children: s,
+  ref: i,
+  ...d
+}) {
+  return /* @__PURE__ */ m(
+    c,
+    {
+      ref: i,
+      disabled: o || e,
+      "data-loading": e || void 0,
+      "aria-busy": e || void 0,
+      className: n(
+        "relative inline-flex items-center gap-1",
+        /* DXUI-51: a track never outgrows its container. Options that do not fit
+           share rows (flex-wrap), and one option wider than the track wraps its
+           own text (whitespace-normal, h-auto with the size's height as a floor)
+           instead of spilling past the rim. Options that fit are unchanged. */
+        t === "segmented" && [
+          "max-w-full flex-wrap rounded-lg border border-border bg-surface-inset p-1",
+          "*:max-w-full *:min-w-0 *:h-auto *:min-h-control-sm *:py-1 *:text-center *:whitespace-normal"
+        ],
+        r
+      ),
+      ...d,
+      children: [
+        s,
+        e && /* @__PURE__ */ a(g, {})
+      ]
+    }
+  );
+}
+function $({ className: r, children: t, ref: e, ...o }) {
+  return /* @__PURE__ */ a(
+    l.Root,
+    {
+      ref: e,
+      className: n(
+        "flex min-w-0 flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1.5",
+        r
+      ),
+      ...o,
+      children: t
+    }
+  );
+}
+function k({ className: r }) {
+  return /* @__PURE__ */ a(
+    l.Separator,
+    {
+      className: n("mx-1 h-5 w-px shrink-0 self-center bg-border", r)
+    }
+  );
+}
+function B({
+  variant: r,
+  size: t,
+  iconOnly: e,
+  className: o,
+  children: s,
+  ref: i,
+  ...d
+}) {
+  return /* @__PURE__ */ a(
+    l.Button,
+    {
+      ref: i,
+      className: d.render === void 0 ? n(
+        b({ variant: r ?? "ghost", size: t ?? "sm", iconOnly: e }),
+        o
+      ) : o,
+      ...d,
+      children: s
+    }
+  );
+}
+function O({ focusableWhenDisabled: r, ref: t, ...e }) {
+  return /* @__PURE__ */ a(
+    l.Input,
+    {
+      focusableWhenDisabled: r,
+      disabled: e.disabled,
+      render: /* @__PURE__ */ a(f, { ...e, ref: t })
+    }
+  );
+}
+function S({ className: r, children: t, ref: e, ...o }) {
+  return /* @__PURE__ */ a(
+    l.Group,
+    {
+      ref: e,
+      className: n("flex min-w-0 items-center gap-1", r),
+      ...o,
+      children: t
+    }
+  );
+}
+export {
+  I as Toggle,
+  V as ToggleGroup,
+  $ as Toolbar,
+  B as ToolbarButton,
+  S as ToolbarGroup,
+  O as ToolbarInput,
+  k as ToolbarSeparator
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../src/components/Toggle.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as BaseToggleGroup } from \"@base-ui/react/toggle-group\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants, type ButtonProps } from \"./Button\";\nimport { Input, type InputProps } from \"./Input\";\nimport { PendingVeil } from \"./PendingVeil\";\n\n/* ============================================================================\n   TOGGLE, TOGGLE GROUP, TOOLBAR\n\n   A TOGGLE IS NOT A SWITCH, and the difference is not cosmetic. A switch\n   commits a SETTING — it says \"notifications are on\" and takes effect\n   immediately. A toggle applies a FORMAT or a FILTER to something you are\n   looking at — bold, list view, \"show only failures\". Switches belong in\n   settings; toggles belong in toolbars.\n\n   Getting this wrong is why some apps have a row of switches above a document,\n   which reads as configuration and makes people hesitate before pressing one.\n\n   A TOOLBAR IS ONE TAB STOP. Arrow keys move between its controls; Tab leaves\n   the whole thing. That is the difference between a toolbar of fifteen buttons\n   costing one Tab press to skip and costing fifteen — and it is the single\n   thing most hand-rolled toolbars get wrong.\n\n   THAT LAST PARAGRAPH WAS UNTRUE FOR AS LONG AS `Toolbar` SHIPPED ALONE.\n   Base UI's toolbar is a COMPOSITE: the root keeps a map of registered items\n   and moves focus between the entries in it. Registration happens in the ITEM\n   wrappers, and this module exported none of them — only the root and the\n   separator. So every consumer got a bordered box in which each control was\n   still its own tab stop, while the paragraph above promised the opposite.\n   Nothing threw and nothing looked wrong; the single behaviour the component\n   was adopted for was the one thing it did not do.\n\n   `ToolbarButton` / `ToolbarInput` / `ToolbarGroup` are that registration. The\n   rule for a consumer is short: EVERY interactive child goes in a wrapper. An\n   unwrapped control renders perfectly and is invisible to the composite —\n   `toolbar.test.tsx` pins that as a fact so it is read from a test rather than\n   discovered from a bug report.\n   ========================================================================= */\n\nconst toggle = tv({\n  base: [\n    \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2\",\n    \"rounded-md font-medium whitespace-nowrap text-secondary\",\n    \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n    \"hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-primary\",\n    \"data-pressed:bg-control-subtle data-pressed:text-control-text\",\n    /* Pressed AND hovered. The hover rule above carries three conditions and\n       `data-pressed:` carries one, so without this a pressed toggle painted\n       itself UNPRESSED for as long as the pointer sat on it. */\n    \"data-pressed:hover:not-data-disabled:bg-control-subtle-hover\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-45\",\n    \"active:not-data-disabled:scale-[0.97]\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-control-sm px-2.5 text-xs\",\n      md: \"h-control-md px-3 text-sm\",\n      lg: \"h-control-lg px-4 text-md\",\n    },\n    iconOnly: { true: \"px-0 aspect-square\", false: \"\" },\n  },\n  defaultVariants: { size: \"md\", iconOnly: false },\n});\n\nexport interface ToggleProps\n  extends Omit<BaseToggle.Props, \"className\" | \"render\">,\n    VariantProps<typeof toggle> {\n  className?: string;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Toggle({ size, iconOnly, className, children, ref, ...props }: ToggleProps) {\n  return (\n    <BaseToggle ref={ref} className={cn(toggle({ size, iconOnly }), className)} {...props}>\n      {children}\n    </BaseToggle>\n  );\n}\n\nexport interface ToggleGroupProps extends Omit<BaseToggleGroup.Props, \"className\" | \"render\"> {\n  className?: string;\n  /** Segmented gives the group a shared inset background. */\n  variant?: \"plain\" | \"segmented\";\n  /**\n   * DX-6426 - the choice this group sends is out and unanswered: every option is disabled and a veil with a spinner covers the set until it is\n   * answered. Pass it from the pending state of the write; the pressed option stays the saved one until the answer repaints.\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A set of related toggles.\n *\n * `multiple` decides the meaning: false makes it a single choice (list\n * view OR grid view), true makes it independent formats (bold AND italic).\n * There is no separate \"type\" prop, because the multiplicity IS the type.\n */\nexport function ToggleGroup({\n  className,\n  variant = \"plain\",\n  loading = false,\n  disabled,\n  children,\n  ref,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <BaseToggleGroup\n      ref={ref}\n      disabled={disabled || loading}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      className={cn(\n        \"relative inline-flex items-center gap-1\",\n        /* DXUI-51: a track never outgrows its container. Options that do not fit\n           share rows (flex-wrap), and one option wider than the track wraps its\n           own text (whitespace-normal, h-auto with the size's height as a floor)\n           instead of spilling past the rim. Options that fit are unchanged. */\n        variant === \"segmented\" && [\n          \"max-w-full flex-wrap rounded-lg border border-border bg-surface-inset p-1\",\n          \"*:max-w-full *:min-w-0 *:h-auto *:min-h-control-sm *:py-1 *:text-center *:whitespace-normal\",\n        ],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {loading && <PendingVeil />}\n    </BaseToggleGroup>\n  );\n}\n\nexport interface ToolbarProps extends Omit<BaseToolbar.Root.Props, \"className\" | \"render\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Toolbar({ className, children, ref, ...props }: ToolbarProps) {\n  return (\n    <BaseToolbar.Root\n      ref={ref}\n      className={cn(\n        \"flex min-w-0 flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </BaseToolbar.Root>\n  );\n}\n\n/** A hairline between groups of toolbar controls. */\nexport function ToolbarSeparator({ className }: { className?: string }) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\"mx-1 h-5 w-px shrink-0 self-center bg-border\", className)}\n    />\n  );\n}\n\ntype ToolbarButtonBase = Omit<BaseToolbar.Button.Props, \"className\" | \"nativeButton\" | \"render\"> & {\n  className?: string;\n  ref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * TWO FORMS, AND THE TYPE REFUSES TO MIX THEM.\n *\n * Either this renders its own `<button>` and wears `buttonVariants` — in which\n * case `variant` / `size` / `iconOnly` choose which row of that table — or it\n * renders somebody else's control through `render`, in which case that control\n * already carries a variant table and this one must not add a second. The two\n * are mutually exclusive rather than merely discouraged, because a `render`\n * plus a `size` is not a preference somebody expressed: it is two size classes\n * in one attribute with no rule for which wins. See `ToolbarButton`'s own doc\n * for the measurement.\n */\nexport type ToolbarButtonProps =\n  | (ToolbarButtonBase &\n      Pick<ButtonProps, \"variant\" | \"size\" | \"iconOnly\"> & {\n        /** The styled form owns the element, so there is nothing to render into. */\n        render?: undefined;\n      })\n  | (ToolbarButtonBase & {\n      render: NonNullable<BaseToolbar.Button.Props[\"render\"]>;\n      variant?: never;\n      size?: never;\n      iconOnly?: never;\n    });\n\n/**\n * A button that is part of the toolbar's rotation.\n *\n * It wears `buttonVariants` — the same recipe `Button` compiles — rather than a\n * second class list, so the two can never drift apart. It is not `Button`\n * itself because the registration has to own the element: Base UI needs to put\n * its own `tabIndex` and key handling on the rendered node, and the\n * `focusableWhenDisabled` behaviour below depends on NOT setting the native\n * `disabled` attribute, which `Button` sets unconditionally.\n *\n * `ghost` at `sm` by default — the right resting state in a row of controls,\n * the same default `IconButton` picks. A row of solid buttons reads as a row of\n * primary actions, which no toolbar is.\n *\n * ANYTHING ALREADY BUILT ON `Button` GOES IN THROUGH `render`, which is what\n * keeps this from becoming a second button component:\n * `<ToolbarButton render={<IconButton icon={…} label=\"Bold\" />} />` registers\n * exactly the same and keeps the tooltip and the `disabledReason`.\n *\n * THAT PATH APPLIES NO VARIANT TABLE AT ALL, and the type enforces it —\n * `variant`, `size` and `iconOnly` are not accepted beside `render`. Base UI's\n * render slot CONCATENATES `className`; it does not run `cn`. So a recipe\n * applied here landed in the same attribute as the rendered component's own,\n * and which one won was decided by Tailwind's emission order rather than by\n * either component. It measured fine while the two happened to agree — a\n * default `render={<IconButton/>}` came out 36×36, identical to a standalone\n * one, while carrying both `aspect-square` and `px-3.5` — and broke visibly the\n * moment they disagreed: `<ToolbarButton size=\"lg\" render={<IconButton\n * size=\"sm\" …/>} />` carried `h-control-lg` AND `h-control-sm` and rendered\n * 48 × 36 with 24px of padding, a squashed oval neither component asked for.\n *\n * Unrepresentable beats documented, and it is free to do NOW: nothing has\n * adopted the pair yet, so narrowing the type costs nothing that removing the\n * props after adoption would have cost.\n */\nexport function ToolbarButton({\n  variant,\n  size,\n  iconOnly,\n  className,\n  children,\n  ref,\n  ...props\n}: ToolbarButtonProps) {\n  return (\n    <BaseToolbar.Button\n      ref={ref}\n      /* `ghost` at `sm` is the DEFAULT of the styled form, not of the\n         component — defaulting in the signature would compile a recipe for the\n         `render` form too, which is the bug above. */\n      className={\n        props.render === undefined\n          ? cn(\n              buttonVariants({ variant: variant ?? \"ghost\", size: size ?? \"sm\", iconOnly }),\n              className,\n            )\n          : className\n      }\n      {...props}\n    >\n      {children}\n    </BaseToolbar.Button>\n  );\n}\n\nexport interface ToolbarInputProps\n  extends Omit<InputProps, \"ref\">,\n    Pick<BaseToolbar.Input.Props, \"focusableWhenDisabled\"> {\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A text field that is part of the toolbar's rotation — a filter box beside the\n * buttons that filter with it.\n *\n * Renders this library's own `Input` through Base UI's `render` slot, so the\n * adornments, sizes and focus ring are the ones every other field in the\n * application already has. The composite's props land on the `<input>` itself\n * rather than on `Input`'s adornment wrapper, which is what keeps DOM order —\n * and therefore the arrow-key order — matching what the reader sees.\n *\n * Arrow keys still move OUT of it, which is Base UI's deliberate call and not\n * an oversight: a toolbar field is a filter box, not a document, and a caret\n * that traps the only navigation key in the pattern is worse than one that\n * moves on.\n */\nexport function ToolbarInput({ focusableWhenDisabled, ref, ...props }: ToolbarInputProps) {\n  return (\n    <BaseToolbar.Input\n      focusableWhenDisabled={focusableWhenDisabled}\n      disabled={props.disabled}\n      render={<Input {...props} ref={ref} />}\n    />\n  );\n}\n\nexport interface ToolbarGroupProps extends Omit<BaseToolbar.Group.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A labelled cluster of toolbar controls — \"Alignment\", \"Text style\".\n *\n * IT IS NOT ITSELF A STOP. The group renders `role=\"group\"` and its CHILDREN\n * register; a group that registered would insert a phantom position between the\n * controls it contains. Give it an `aria-label`: a group announced as an\n * unnamed group is noise in the rotation rather than context for it.\n *\n * Distinct from `ToggleGroup`, which is a set of related toggles with a shared\n * VALUE. This one shares only a name.\n */\nexport function ToolbarGroup({ className, children, ref, ...props }: ToolbarGroupProps) {\n  return (\n    <BaseToolbar.Group\n      ref={ref}\n      className={cn(\"flex min-w-0 items-center gap-1\", className)}\n      {...props}\n    >\n      {children}\n    </BaseToolbar.Group>\n  );\n}\n"],"names":["toggle","tv","Toggle","size","iconOnly","className","children","ref","props","jsx","BaseToggle","cn","ToggleGroup","variant","loading","disabled","jsxs","BaseToggleGroup","PendingVeil","Toolbar","BaseToolbar","ToolbarSeparator","ToolbarButton","buttonVariants","ToolbarInput","focusableWhenDisabled","Input","ToolbarGroup"],"mappings":"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"}

package/dist/components/ToggleMatrix.js

@@ -0,0 +1,157 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useMemo as S, Fragment as B } from "react";
+import { cn as m } from "../lib/cn.js";
+import { groupInOrder as T } from "../lib/group-in-order.js";
+import { Badge as F } from "./Badge.js";
+import { Checkbox as G } from "./Choice.js";
+import { Icon as y } from "./Icon.js";
+import { Tooltip as U } from "./Popover.js";
+import { Spinner as q } from "./Spinner.js";
+import { useUiStrings as R } from "../lib/i18n/provider.js";
+function Y({
+  caption: r,
+  rowHeader: d,
+  rows: i,
+  columns: g,
+  cell: c,
+  readOnly: x = !1,
+  onChange: k,
+  onColumnChange: b,
+  // I18N-ALLOW: a prop value naming a layout, never user text
+  rowDescription: p = "inline",
+  dense: n = !1,
+  cellLabel: v,
+  otherGroupLabel: h,
+  columnSetLabel: z,
+  className: _
+}) {
+  const N = R().toggleMatrix, w = S(() => T(i, (t) => t.group, h ?? N.otherGroup), [i, h, N.otherGroup]), C = g.length + 1, M = n ? "px-2 sm:px-4" : "px-5", I = v ?? ((t, u, a) => N.cell(u.label, t.label, a));
+  return /* @__PURE__ */ e("div", { className: m("relative w-full min-w-0 overflow-auto overscroll-x-contain rounded-xl border border-border bg-surface shadow-sm", _), children: /* @__PURE__ */ l("table", { className: "w-full border-collapse text-left", children: [
+    /* @__PURE__ */ e("caption", { className: "sr-only", children: r }),
+    /* @__PURE__ */ e("thead", { className: "sticky top-0 z-10", children: /* @__PURE__ */ l("tr", { children: [
+      /* @__PURE__ */ e(
+        "th",
+        {
+          scope: "col",
+          className: m("h-12 border-b border-border bg-surface-raised text-2xs font-semibold tracking-widest text-tertiary uppercase", n ? "px-3 sm:px-5" : "px-5 whitespace-nowrap"),
+          children: d
+        }
+      ),
+      g.map((t) => {
+        const u = t.lockedReason !== void 0, a = i.filter((s) => s.lockedReason === void 0 && c(s.id, t.id).state !== "unavailable"), o = a.filter((s) => c(s.id, t.id).state === "on"), $ = a.some((s) => {
+          const f = c(s.id, t.id);
+          return f.state !== "unavailable" && f.busy === !0;
+        }), j = b !== void 0 && !x && !u;
+        return /* @__PURE__ */ e(
+          "th",
+          {
+            scope: "col",
+            className: m(
+              "border-b border-border bg-surface-raised text-center align-middle text-2xs font-semibold tracking-widest text-tertiary uppercase",
+              n ? "min-w-20 px-2 py-2 sm:px-4" : "h-12 min-w-24 px-5 whitespace-nowrap"
+            ),
+            children: /* @__PURE__ */ l("span", { className: "inline-flex flex-col items-center gap-1", children: [
+              j && /* Above its label, so a column stays narrow and the box and the words stay centred on the cells below them. */
+              /* @__PURE__ */ e(
+                G,
+                {
+                  "data-testid": `toggle-matrix-column-${t.id}`,
+                  "aria-label": (z ?? ((s) => N.setColumn(s.label)))(t),
+                  checked: a.length > 0 && o.length === a.length,
+                  indeterminate: o.length > 0 && o.length < a.length,
+                  disabled: a.length === 0 || $,
+                  onCheckedChange: (s) => b(
+                    t.id,
+                    s === !0,
+                    a.filter((f) => c(f.id, t.id).state === "on" != (s === !0)).map((f) => f.id)
+                  )
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: m("inline-flex items-center gap-1", n && "whitespace-normal break-words"), children: [
+                t.label,
+                !x && u && /* @__PURE__ */ e(y, { name: "lock", size: "xs", className: "text-tertiary", label: t.lockedReason })
+              ] })
+            ] })
+          },
+          t.id
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ e("tbody", { children: w.map((t, u) => /* @__PURE__ */ l(B, { children: [
+      t.label && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        "th",
+        {
+          scope: "colgroup",
+          colSpan: C,
+          className: m("border-b border-border-subtle bg-surface-sunken py-2 text-left text-2xs font-semibold tracking-widest text-tertiary uppercase", n ? "px-3 sm:px-5" : "px-5"),
+          children: t.label
+        }
+      ) }),
+      t.items.map((a) => /* @__PURE__ */ l("tr", { className: "border-b border-border-subtle last:border-b-0", children: [
+        /* @__PURE__ */ e("th", { scope: "row", className: m("py-3 text-left align-middle text-sm font-normal text-primary", n ? "px-3 sm:px-5" : "px-5"), children: /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(A, { row: a, description: p }),
+          !x && a.lockedReason !== void 0 && /* @__PURE__ */ e(y, { name: "lock", size: "xs", className: "text-tertiary", label: a.lockedReason })
+        ] }) }),
+        g.map((o) => /* @__PURE__ */ e("td", { className: m("py-3 text-center align-middle", M), children: /* @__PURE__ */ e(
+          D,
+          {
+            row: a,
+            column: o,
+            state: c(a.id, o.id),
+            editable: !x && o.lockedReason === void 0 && a.lockedReason === void 0,
+            sentence: I,
+            onChange: k
+          }
+        ) }, o.id))
+      ] }, a.id))
+    ] }, t.label ?? `__section-${u}`)) })
+  ] }) });
+}
+function A({ row: r, description: d }) {
+  return r.description === void 0 || r.description === "" ? r.label : d === "tooltip" ? /* @__PURE__ */ e(U, { content: r.description, children: /* @__PURE__ */ e("span", { tabIndex: 0, className: "cursor-help underline decoration-dotted decoration-border-strong underline-offset-4 outline-none", children: r.label }) }) : /* @__PURE__ */ l("span", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ e("span", { children: r.label }),
+    /* @__PURE__ */ e("span", { className: "text-xs font-normal text-tertiary", children: r.description })
+  ] });
+}
+function D({
+  row: r,
+  column: d,
+  state: i,
+  editable: g,
+  sentence: c,
+  onChange: x
+}) {
+  const k = R().toggleMatrix, b = `toggle-matrix-${r.id}-${d.id}`;
+  if (i.state === "unavailable")
+    return /* @__PURE__ */ l("div", { "data-testid": b, "data-state": "unavailable", className: "mx-auto flex max-w-40 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ e(F, { size: "sm", tone: "muted", children: k.unavailable }),
+      /* @__PURE__ */ e("span", { className: "text-2xs leading-snug font-normal tracking-normal text-tertiary normal-case", children: i.reason })
+    ] });
+  const p = i.state === "on", n = c(r, d, p), v = p ? /* @__PURE__ */ e(y, { name: "check", size: "sm", className: "mx-auto text-control" }) : /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "mx-auto block text-tertiary", children: "—" });
+  if (!g)
+    return /* @__PURE__ */ l("span", { "data-testid": b, "data-state": i.state, children: [
+      /* @__PURE__ */ e("span", { className: "sr-only", children: n }),
+      v
+    ] });
+  const h = i.busy === !0;
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": p,
+      "aria-label": n,
+      "aria-busy": h || void 0,
+      disabled: h,
+      "data-testid": b,
+      "data-state": i.state,
+      onClick: () => x?.(r.id, d.id, !p),
+      className: "dx-tap mx-auto flex size-7 items-center justify-center rounded-md transition-[var(--tx-colors)] duration-(--dur-fast) hover:bg-surface-hover focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)] disabled:cursor-progress",
+      children: h ? /* @__PURE__ */ e(q, { size: "xs", label: k.busy }) : p ? /* @__PURE__ */ e(y, { name: "check", size: "sm", className: "text-control" }) : /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "block text-tertiary", children: "—" })
+    }
+  );
+}
+export {
+  Y as ToggleMatrix
+};
+//# sourceMappingURL=ToggleMatrix.js.map