@tea-ui/core 0.1.0

package/dist/feedback/progress.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Progress as Progress$1 } from 'radix-ui';
+import { Tone } from '@tea-ui/tokens';
+
+interface ProgressProps extends Omit<React.ComponentProps<typeof Progress$1.Root>, "children" | "value"> {
+    /** Current value. Omit together with `indeterminate` for unknown progress. */
+    value?: number | null | undefined;
+    /** The maximum. Defaults to 100. */
+    max?: number | undefined;
+    /** The total is not known. */
+    indeterminate?: boolean | undefined;
+    /** Semantic tone of the filled portion. */
+    tone?: Tone | undefined;
+    /** The accessible name. Required. */
+    label: string;
+    /**
+     * Human-readable value, e.g. "3 von 8". Without it a screen reader announces
+     * a bare percentage, which is rarely the thing the user needs to know.
+     */
+    valueText?: string | undefined;
+    className?: string | undefined;
+}
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Progress, type ProgressProps };

package/dist/feedback/progress.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+const TONE_FILL = {
+  positive: "bg-positive",
+  info: "bg-info",
+  caution: "bg-caution",
+  critical: "bg-critical",
+  neutral: "bg-fg-muted"
+};
+const Progress = React.forwardRef(function Progress2({ value, max = 100, indeterminate = false, tone = "info", label, valueText, className, ...props }, ref) {
+  const isIndeterminate = indeterminate || value === null || value === void 0;
+  const percent = isIndeterminate ? 0 : Math.min(100, Math.max(0, (value ?? 0) / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...dataSlot("progress", "root"), children: [
+    /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      {
+        ref,
+        value: isIndeterminate ? null : value ?? 0,
+        max,
+        "aria-label": label,
+        "aria-valuetext": valueText,
+        className: cn("relative h-2 w-full overflow-hidden bg-surface-3", "rounded-pill"),
+        ...dataSlot("progress", "track"),
+        ...stateAttributes({ loading: isIndeterminate }),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(
+              "h-full transition-[width] duration-slow ease-standard",
+              TONE_FILL[tone],
+              isIndeterminate && "w-1/3 animate-pulse"
+            ),
+            style: isIndeterminate ? void 0 : { width: `${percent}%` },
+            ...dataSlot("progress", "indicator")
+          }
+        )
+      }
+    ),
+    isIndeterminate ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Wird verarbeitet" }) : null
+  ] });
+});
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/feedback/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/progress.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport type { Tone } from \"@tea-ui/tokens\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — Progress.\n *\n * Determinate and indeterminate must be distinguishable **without colour**. A\n * moving bar reads as \"working, no total known\"; a bar with a filled portion\n * reads as \"N of M\". Colour is the third signal, never the only one.\n *\n * Under `prefers-reduced-motion` the token stylesheet neutralises the movement,\n * so the indeterminate state would become a static, meaningless bar. It\n * therefore also carries a text label, which is the signal that survives.\n */\nconst TONE_FILL: Record<Tone, string> = {\n  positive: \"bg-positive\",\n  info: \"bg-info\",\n  caution: \"bg-caution\",\n  critical: \"bg-critical\",\n  neutral: \"bg-fg-muted\",\n};\n\nexport interface ProgressProps\n  extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, \"children\" | \"value\"> {\n  /** Current value. Omit together with `indeterminate` for unknown progress. */\n  value?: number | null | undefined;\n  /** The maximum. Defaults to 100. */\n  max?: number | undefined;\n  /** The total is not known. */\n  indeterminate?: boolean | undefined;\n  /** Semantic tone of the filled portion. */\n  tone?: Tone | undefined;\n  /** The accessible name. Required. */\n  label: string;\n  /**\n   * Human-readable value, e.g. \"3 von 8\". Without it a screen reader announces\n   * a bare percentage, which is rarely the thing the user needs to know.\n   */\n  valueText?: string | undefined;\n  className?: string | undefined;\n}\n\nexport const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  { value, max = 100, indeterminate = false, tone = \"info\", label, valueText, className, ...props },\n  ref,\n) {\n  const isIndeterminate = indeterminate || value === null || value === undefined;\n  const percent = isIndeterminate ? 0 : Math.min(100, Math.max(0, ((value ?? 0) / max) * 100));\n\n  return (\n    <div className={cn(\"w-full\", className)} {...dataSlot(\"progress\", \"root\")}>\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={isIndeterminate ? null : (value ?? 0)}\n        max={max}\n        aria-label={label}\n        aria-valuetext={valueText}\n        className={cn(\"relative h-2 w-full overflow-hidden bg-surface-3\", \"rounded-pill\")}\n        {...dataSlot(\"progress\", \"track\")}\n        {...stateAttributes({ loading: isIndeterminate })}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn(\n            \"h-full transition-[width] duration-slow ease-standard\",\n            TONE_FILL[tone],\n            isIndeterminate && \"w-1/3 animate-pulse\",\n          )}\n          style={isIndeterminate ? undefined : { width: `${percent}%` }}\n          {...dataSlot(\"progress\", \"indicator\")}\n        />\n      </ProgressPrimitive.Root>\n      {isIndeterminate ? <span className=\"sr-only\">Wird verarbeitet</span> : null}\n    </div>\n  );\n});\n"],"mappings":"AAsDI,SAYI,KAZJ;AAtDJ,YAAY,WAAW;AACvB,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAEnB,SAAS,UAAU,uBAAuB;AAa1C,MAAM,YAAkC;AAAA,EACtC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAsBO,MAAM,WAAW,MAAM,WAA0C,SAASA,UAC/E,EAAE,OAAO,MAAM,KAAK,gBAAgB,OAAO,OAAO,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,GAChG,KACA;AACA,QAAM,kBAAkB,iBAAiB,UAAU,QAAQ,UAAU;AACrE,QAAM,UAAU,kBAAkB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,SAAS,KAAK,MAAO,GAAG,CAAC;AAE3F,SACE,qBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,SAAS,YAAY,MAAM,GACtE;AAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,OAAO,kBAAkB,OAAQ,SAAS;AAAA,QAC1C;AAAA,QACA,cAAY;AAAA,QACZ,kBAAgB;AAAA,QAChB,WAAW,GAAG,oDAAoD,cAAc;AAAA,QAC/E,GAAG,SAAS,YAAY,OAAO;AAAA,QAC/B,GAAG,gBAAgB,EAAE,SAAS,gBAAgB,CAAC;AAAA,QAC/C,GAAG;AAAA,QAEJ;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,IAAI;AAAA,cACd,mBAAmB;AAAA,YACrB;AAAA,YACA,OAAO,kBAAkB,SAAY,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA,YAC3D,GAAG,SAAS,YAAY,WAAW;AAAA;AAAA,QACtC;AAAA;AAAA,IACF;AAAA,IACC,kBAAkB,oBAAC,UAAK,WAAU,WAAU,8BAAgB,IAAU;AAAA,KACzE;AAEJ,CAAC;","names":["Progress"]}

package/dist/feedback/skeleton.d.ts

@@ -0,0 +1,38 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Skeleton.
+ *
+ * The *default* loading affordance in TEA UI, per the performance UX standard.
+ * A skeleton that mirrors the real layout is strictly better than a spinner: it
+ * tells the user what is arriving, it reserves the space so the page does not
+ * jump, and it never replaces content the user is already reading.
+ *
+ * It is decorative by definition — it depicts nothing that exists — so it is
+ * `aria-hidden`. The loading *message* is a separate, real element; `label`
+ * renders it as visually hidden text, or you pass the message to whatever
+ * announces the region. The audit found eight hand-written "Lade …" loaders in
+ * one product and a fully built, completely unused `Skeleton` beside them.
+ */
+declare const skeletonVariants: (props?: ({
+    shape?: "circle" | "rect" | "pill" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof skeletonVariants> {
+    /**
+     * Accessible text. Omit when the surrounding region already announces that it
+     * is loading — never leave a bare animated block with no context anywhere.
+     */
+    label?: string | undefined;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends React.ComponentProps<"div"> {
+    /** How many lines to reserve. */
+    lines?: number | undefined;
+    className?: string | undefined;
+}
+/** A paragraph-shaped skeleton, for text blocks of unknown length. */
+declare const SkeletonText: React.ForwardRefExoticComponent<Omit<SkeletonTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, type SkeletonProps, SkeletonText, type SkeletonTextProps, skeletonVariants };

package/dist/feedback/skeleton.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn, cva } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import { dataSlot } from "../internal/index.js";
+const skeletonVariants = cva("animate-pulse bg-surface-3", {
+  variants: {
+    shape: {
+      rect: "rounded-none",
+      pill: "rounded-pill",
+      circle: "rounded-pill"
+    }
+  },
+  defaultVariants: { shape: "rect" }
+});
+const Skeleton = React.forwardRef(function Skeleton2({ className, shape, label, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": label ? void 0 : true,
+        className: cn(skeletonVariants({ shape }), className),
+        "data-tea-skeleton": true,
+        "data-tea-motion": "decorative",
+        style: shape === "circle" ? { borderRadius: "9999px", ...style } : style,
+        ...dataSlot("skeleton"),
+        ...props
+      }
+    ),
+    label ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || COPY.states.loading }) : null
+  ] });
+});
+const SkeletonText = React.forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-2", className), ...dataSlot("skeleton", "text"), ...props, children: Array.from({ length: Math.max(1, lines) }, (_, index) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: cn("h-3", index === lines - 1 ? "w-2/3" : "w-full"),
+      ...dataSlot("skeleton", "line")
+    },
+    index
+  )) });
+});
+export {
+  Skeleton,
+  SkeletonText,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/feedback/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\nimport { COPY } from \"@tea-ui/ux-standards\";\n\nimport { dataSlot } from \"../internal\";\n\n/**\n * TEA UI — Skeleton.\n *\n * The *default* loading affordance in TEA UI, per the performance UX standard.\n * A skeleton that mirrors the real layout is strictly better than a spinner: it\n * tells the user what is arriving, it reserves the space so the page does not\n * jump, and it never replaces content the user is already reading.\n *\n * It is decorative by definition — it depicts nothing that exists — so it is\n * `aria-hidden`. The loading *message* is a separate, real element; `label`\n * renders it as visually hidden text, or you pass the message to whatever\n * announces the region. The audit found eight hand-written \"Lade …\" loaders in\n * one product and a fully built, completely unused `Skeleton` beside them.\n */\nexport const skeletonVariants = cva(\"animate-pulse bg-surface-3\", {\n  variants: {\n    shape: {\n      rect: \"rounded-none\",\n      pill: \"rounded-pill\",\n      circle: \"rounded-pill\",\n    },\n  },\n  defaultVariants: { shape: \"rect\" },\n});\n\nexport interface SkeletonProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\">,\n    VariantProps<typeof skeletonVariants> {\n  /**\n   * Accessible text. Omit when the surrounding region already announces that it\n   * is loading — never leave a bare animated block with no context anywhere.\n   */\n  label?: string | undefined;\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, shape, label, style, ...props },\n  ref,\n) {\n  return (\n    <>\n      <div\n        ref={ref}\n        aria-hidden={label ? undefined : true}\n        className={cn(skeletonVariants({ shape }), className)}\n        data-tea-skeleton\n        data-tea-motion=\"decorative\"\n        style={shape === \"circle\" ? { borderRadius: \"9999px\", ...style } : style}\n        {...dataSlot(\"skeleton\")}\n        {...props}\n      />\n      {label ? <span className=\"sr-only\">{label || COPY.states.loading}</span> : null}\n    </>\n  );\n});\n\nexport interface SkeletonTextProps extends React.ComponentProps<\"div\"> {\n  /** How many lines to reserve. */\n  lines?: number | undefined;\n  className?: string | undefined;\n}\n\n/** A paragraph-shaped skeleton, for text blocks of unknown length. */\nexport const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonText(\n  { lines = 3, className, ...props },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...dataSlot(\"skeleton\", \"text\")} {...props}>\n      {Array.from({ length: Math.max(1, lines) }, (_, index) => (\n        <Skeleton\n          key={index}\n          className={cn(\"h-3\", index === lines - 1 ? \"w-2/3\" : \"w-full\")}\n          {...dataSlot(\"skeleton\", \"line\")}\n        />\n      ))}\n    </div>\n  );\n});\n"],"mappings":"AA8CI,mBACE,KADF;AA9CJ,YAAY,WAAW;AACvB,SAAS,IAAI,WAA8B;AAC3C,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAgBlB,MAAM,mBAAmB,IAAI,8BAA8B;AAAA,EAChE,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAYM,MAAM,WAAW,MAAM,WAA0C,SAASA,UAC/E,EAAE,WAAW,OAAO,OAAO,OAAO,GAAG,MAAM,GAC3C,KACA;AACA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,QAAQ,SAAY;AAAA,QACjC,WAAW,GAAG,iBAAiB,EAAE,MAAM,CAAC,GAAG,SAAS;AAAA,QACpD,qBAAiB;AAAA,QACjB,mBAAgB;AAAA,QAChB,OAAO,UAAU,WAAW,EAAE,cAAc,UAAU,GAAG,MAAM,IAAI;AAAA,QAClE,GAAG,SAAS,UAAU;AAAA,QACtB,GAAG;AAAA;AAAA,IACN;AAAA,IACC,QAAQ,oBAAC,UAAK,WAAU,WAAW,mBAAS,KAAK,OAAO,SAAQ,IAAU;AAAA,KAC7E;AAEJ,CAAC;AASM,MAAM,eAAe,MAAM,WAA8C,SAASC,cACvF,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,GACjC,KACA;AACA,SACE,oBAAC,SAAI,KAAU,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,SAAS,YAAY,MAAM,GAAI,GAAG,OACnG,gBAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,KAAK,EAAE,GAAG,CAAC,GAAG,UAC9C;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,GAAG,OAAO,UAAU,QAAQ,IAAI,UAAU,QAAQ;AAAA,MAC5D,GAAG,SAAS,YAAY,MAAM;AAAA;AAAA,IAF1B;AAAA,EAGP,CACD,GACH;AAEJ,CAAC;","names":["Skeleton","SkeletonText"]}

package/dist/feedback/spinner.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * TEA UI — Spinner.
+ *
+ * The spinner is the *least* preferred loading affordance in TEA UI: it says
+ * "something is happening" without saying what or how much. Use a skeleton when
+ * there is a layout to mirror, determinate progress when the total is known,
+ * and a spinner only when neither applies.
+ *
+ * Two things it must get right, both of which the audit found broken:
+ *  - It announces itself. `role="status"` plus a text label, so a screen reader
+ *    user learns that the wait started. A bare spinning SVG is silent.
+ *  - It survives reduced motion. Rotation is the one animation that carries
+ *    meaning, so rather than freezing it, `data-tea-motion="essential"` swaps it
+ *    for a non-rotating pulse in the token stylesheet.
+ */
+type SpinnerSize = "sm" | "md" | "lg";
+interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children"> {
+    /** Visible size. */
+    size?: SpinnerSize;
+    /**
+     * Accessible name. Defaults to "Wird geladen". Pass an empty string only if
+     * the surrounding surface already announces the wait — never pass nothing.
+     */
+    label?: string;
+    className?: string | undefined;
+}
+declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+export { Spinner, type SpinnerProps, type SpinnerSize };

package/dist/feedback/spinner.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import { dataSlot } from "../internal/index.js";
+const SIZES = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-6"
+};
+const Spinner = React.forwardRef(function Spinner2({ size = "md", label = COPY.states.loading, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      className: "inline-flex items-center gap-2",
+      ...dataSlot("spinner", "root"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            "aria-hidden": label ? void 0 : true,
+            className: cn(
+              "shrink-0 animate-spin text-current",
+              SIZES[size],
+              className
+            ),
+            "data-tea-motion": "essential",
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.25" }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M21 12a9 9 0 0 0-9-9",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "butt"
+                }
+              )
+            ]
+          }
+        ),
+        label ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }) : null
+      ]
+    }
+  );
+});
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/feedback/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@tea-ui/utils\";\nimport { COPY } from \"@tea-ui/ux-standards\";\n\nimport { dataSlot } from \"../internal\";\n\n/**\n * TEA UI — Spinner.\n *\n * The spinner is the *least* preferred loading affordance in TEA UI: it says\n * \"something is happening\" without saying what or how much. Use a skeleton when\n * there is a layout to mirror, determinate progress when the total is known,\n * and a spinner only when neither applies.\n *\n * Two things it must get right, both of which the audit found broken:\n *  - It announces itself. `role=\"status\"` plus a text label, so a screen reader\n *    user learns that the wait started. A bare spinning SVG is silent.\n *  - It survives reduced motion. Rotation is the one animation that carries\n *    meaning, so rather than freezing it, `data-tea-motion=\"essential\"` swaps it\n *    for a non-rotating pulse in the token stylesheet.\n */\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface SpinnerProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** Visible size. */\n  size?: SpinnerSize;\n  /**\n   * Accessible name. Defaults to \"Wird geladen\". Pass an empty string only if\n   * the surrounding surface already announces the wait — never pass nothing.\n   */\n  label?: string;\n  className?: string | undefined;\n}\n\nconst SIZES: Record<SpinnerSize, string> = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-6\",\n};\n\nexport const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(\n  { size = \"md\", label = COPY.states.loading, className, ...props },\n  ref,\n) {\n  return (\n    <span\n      role=\"status\"\n      className=\"inline-flex items-center gap-2\"\n      {...dataSlot(\"spinner\", \"root\")}\n    >\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden={label ? undefined : true}\n        className={cn(\n          \"shrink-0 animate-spin text-current\",\n          SIZES[size],\n          className,\n        )}\n        data-tea-motion=\"essential\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.25\" />\n        <path\n          d=\"M21 12a9 9 0 0 0-9-9\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"butt\"\n        />\n      </svg>\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </span>\n  );\n});\n"],"mappings":"AAkDM,SAaE,KAbF;AAlDL,YAAY,WAAW;AACxB,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AA8BzB,MAAM,QAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,UAAU,MAAM,WAAwC,SAASA,SAC5E,EAAE,OAAO,MAAM,QAAQ,KAAK,OAAO,SAAS,WAAW,GAAG,MAAM,GAChE,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACT,GAAG,SAAS,WAAW,MAAM;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,eAAa,QAAQ,SAAY;AAAA,YACjC,WAAW;AAAA,cACT;AAAA,cACA,MAAM,IAAI;AAAA,cACV;AAAA,YACF;AAAA,YACA,mBAAgB;AAAA,YACf,GAAG;AAAA,YAEJ;AAAA,kCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,aAAY,OAAM,SAAQ,QAAO;AAAA,cACrF;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA;AAAA,cAChB;AAAA;AAAA;AAAA,QACF;AAAA,QACC,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM,IAAU;AAAA;AAAA;AAAA,EACtD;AAEJ,CAAC;","names":["Spinner"]}

package/dist/feedback/status.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { StatusDomain, StatusKey } from '@tea-ui/ux-standards';
+
+type StatusDomainKey<D extends StatusDomain> = StatusKey<D>;
+interface StatusBaseProps<D extends StatusDomain> {
+    /** Which status vocabulary the key belongs to. */
+    domain: D;
+    /** The wire value. Type-checked against the domain. */
+    status: StatusKey<D>;
+    className?: string | undefined;
+}
+interface StatusDotProps<D extends StatusDomain> extends StatusBaseProps<D> {
+    size?: "sm" | "md" | undefined;
+    /**
+     * Hide the visually hidden text. Only for a dot inside a row that already
+     * states the same status as visible text — never as a shortcut.
+     */
+    hideLabel?: boolean | undefined;
+}
+/**
+ * A dot plus a word. `rounded-full` here is one of the five documented
+ * geometric exceptions: a status indicator is a *mark*, not a surface, and the
+ * design language's square rule applies to surfaces.
+ */
+declare function StatusDot<D extends StatusDomain>({ domain, status, size, hideLabel, className, }: StatusDotProps<D>): React.ReactElement;
+interface StatusBadgeProps<D extends StatusDomain> extends StatusBaseProps<D> {
+    /** Show the registry description as a secondary line. */
+    showDescription?: boolean | undefined;
+    title?: string | undefined;
+}
+/** A bordered chip with a dot and the registry label. The default choice. */
+declare function StatusBadge<D extends StatusDomain>({ domain, status, showDescription, title, className, }: StatusBadgeProps<D>): React.ReactElement;
+interface StatusTextProps<D extends StatusDomain> extends StatusBaseProps<D> {
+    title?: string | undefined;
+}
+/** The label alone. For dense rows where a chip would be too heavy. */
+declare function StatusText<D extends StatusDomain>({ domain, status, title, className, }: StatusTextProps<D>): React.ReactElement;
+interface StatusSelectProps<D extends StatusDomain> {
+    domain: D;
+    /** Controlled value. */
+    value?: StatusKey<D> | undefined;
+    /** Uncontrolled initial value. */
+    defaultValue?: StatusKey<D> | undefined;
+    /** Called with the chosen wire value. Never a colour. */
+    onValueChange?: ((value: StatusKey<D>) => void) | undefined;
+    /** Accessible name for the group. */
+    label: string;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    /** Restrict the choices. Defaults to every key in the domain. */
+    statuses?: readonly StatusKey<D>[] | undefined;
+}
+/**
+ * The interactive picker over one domain's keys. A radiogroup, because choosing
+ * one status *is* choosing one value from a small set — a listbox here would
+ * add a level of interaction for no gain.
+ *
+ * It emits a wire value. The caller then decides what to do with it, which is
+ * what keeps this component free of application logic.
+ */
+declare function StatusSelect<D extends StatusDomain>({ domain, value, defaultValue, onValueChange, label, disabled, className, statuses, }: StatusSelectProps<D>): React.ReactElement;
+
+export { StatusBadge, type StatusBadgeProps, type StatusBaseProps, type StatusDomainKey, StatusDot, type StatusDotProps, StatusSelect, type StatusSelectProps, StatusText, type StatusTextProps };

package/dist/feedback/status.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { statusEntries, statusMeta } from "@tea-ui/ux-standards";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+const TONE_DOT = {
+  positive: "bg-positive",
+  info: "bg-info",
+  caution: "bg-caution",
+  critical: "bg-critical",
+  neutral: "bg-fg-muted"
+};
+const TONE_TEXT = {
+  positive: "text-positive",
+  info: "text-info",
+  caution: "text-caution",
+  critical: "text-critical",
+  neutral: "text-fg-muted"
+};
+const TONE_CHIP = {
+  positive: "bg-positive-subtle text-positive border-positive-border",
+  info: "bg-info-subtle text-info border-info-border",
+  caution: "bg-caution-subtle text-caution border-caution-border",
+  critical: "bg-critical-subtle text-critical border-critical-border",
+  neutral: "bg-neutral-subtle text-fg-muted border-neutral-border"
+};
+function StatusDot({
+  domain,
+  status,
+  size = "md",
+  hideLabel = false,
+  className
+}) {
+  const meta = statusMeta(domain, status);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1.5", className),
+      title: meta.description,
+      ...dataSlot("status", "dot"),
+      ...stateAttributes({ checked: true }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "shrink-0 rounded-pill",
+              size === "sm" ? "size-1.5" : "size-2",
+              TONE_DOT[meta.tone]
+            )
+          }
+        ),
+        hideLabel ? null : /* @__PURE__ */ jsx("span", { className: "sr-only", children: meta.label })
+      ]
+    }
+  );
+}
+function StatusBadge({
+  domain,
+  status,
+  showDescription = false,
+  title,
+  className
+}) {
+  const meta = statusMeta(domain, status);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      title: title ?? meta.description,
+      className: cn(
+        "inline-flex items-center gap-1.5 border px-2 py-0.5 text-micro font-medium leading-none",
+        TONE_CHIP[meta.tone],
+        className
+      ),
+      ...dataSlot("status", "badge"),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-pill", TONE_DOT[meta.tone]) }),
+        meta.label,
+        showDescription ? /* @__PURE__ */ jsx("span", { className: "font-normal text-fg-muted", children: meta.description }) : null
+      ]
+    }
+  );
+}
+function StatusText({
+  domain,
+  status,
+  title,
+  className
+}) {
+  const meta = statusMeta(domain, status);
+  return /* @__PURE__ */ jsx("span", { title: title ?? meta.description, className: cn("text-ui", TONE_TEXT[meta.tone], className), ...dataSlot("status", "text"), children: meta.label });
+}
+function StatusSelect({
+  domain,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  disabled = false,
+  className,
+  statuses
+}) {
+  const [internal, setInternal] = React.useState(
+    defaultValue ?? statuses?.[0] ?? statusEntries(domain)[0]?.[0]
+  );
+  const current = value ?? internal;
+  const options = statuses ?? statusEntries(domain).map(([key]) => key);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("flex flex-wrap items-center gap-1.5", className),
+      ...dataSlot("status", "select"),
+      ...stateAttributes({ disabled }),
+      children: options.map((option) => {
+        const meta = statusMeta(domain, option);
+        const selected = option === current;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            title: meta.description,
+            disabled,
+            "data-tea-touch": true,
+            className: cn(
+              "inline-flex items-center gap-1.5 border px-2 py-1 text-micro font-medium leading-none",
+              "transition-colors duration-fast ease-standard",
+              "disabled:pointer-events-none disabled:opacity-50",
+              selected ? TONE_CHIP[meta.tone] : "border-line bg-transparent text-fg-muted hover:border-line-strong hover:text-fg"
+            ),
+            onClick: () => {
+              setInternal(option);
+              onValueChange?.(option);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-pill", TONE_DOT[meta.tone]) }),
+              meta.label
+            ]
+          },
+          option
+        );
+      })
+    }
+  );
+}
+export {
+  StatusBadge,
+  StatusDot,
+  StatusSelect,
+  StatusText
+};
+//# sourceMappingURL=status.js.map

package/dist/feedback/status.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/status.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Tone } from \"@tea-ui/tokens\";\nimport { statusEntries, statusMeta, type StatusDomain, type StatusKey } from \"@tea-ui/ux-standards\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — the status surface.\n *\n * **The only supported way to render a status in TEA UI.** A component takes a\n * `domain` and a `key`, and this family derives the label, the tone and the\n * description from the shared registry in `@tea-ui/ux-standards`. Nothing here\n * accepts a colour or a hand-written word.\n *\n * That constraint is the fix. The audit found, across two products, five\n * hand-written status-to-label tables that did not agree — one said \"Online\"\n * where another said \"Läuft\" for the same wire value, and one used \"Gültig\"\n * for a certificate where another used \"Online\". Keying on the wire value makes\n * that class of divergence a type error instead of a review comment.\n *\n * Colour is never the only signal. Every renderer pairs the tone with a word;\n * `StatusDot` additionally carries a title and visually hidden text.\n */\n\nconst TONE_DOT: Record<Tone, string> = {\n  positive: \"bg-positive\",\n  info: \"bg-info\",\n  caution: \"bg-caution\",\n  critical: \"bg-critical\",\n  neutral: \"bg-fg-muted\",\n};\n\nconst TONE_TEXT: Record<Tone, string> = {\n  positive: \"text-positive\",\n  info: \"text-info\",\n  caution: \"text-caution\",\n  critical: \"text-critical\",\n  neutral: \"text-fg-muted\",\n};\n\nconst TONE_CHIP: Record<Tone, string> = {\n  positive: \"bg-positive-subtle text-positive border-positive-border\",\n  info: \"bg-info-subtle text-info border-info-border\",\n  caution: \"bg-caution-subtle text-caution border-caution-border\",\n  critical: \"bg-critical-subtle text-critical border-critical-border\",\n  neutral: \"bg-neutral-subtle text-fg-muted border-neutral-border\",\n};\n\nexport type StatusDomainKey<D extends StatusDomain> = StatusKey<D>;\n\nexport interface StatusBaseProps<D extends StatusDomain> {\n  /** Which status vocabulary the key belongs to. */\n  domain: D;\n  /** The wire value. Type-checked against the domain. */\n  status: StatusKey<D>;\n  className?: string | undefined;\n}\n\nexport interface StatusDotProps<D extends StatusDomain> extends StatusBaseProps<D> {\n  size?: \"sm\" | \"md\" | undefined;\n  /**\n   * Hide the visually hidden text. Only for a dot inside a row that already\n   * states the same status as visible text — never as a shortcut.\n   */\n  hideLabel?: boolean | undefined;\n}\n\n/**\n * A dot plus a word. `rounded-full` here is one of the five documented\n * geometric exceptions: a status indicator is a *mark*, not a surface, and the\n * design language's square rule applies to surfaces.\n */\nexport function StatusDot<D extends StatusDomain>({\n  domain,\n  status,\n  size = \"md\",\n  hideLabel = false,\n  className,\n}: StatusDotProps<D>): React.ReactElement {\n  const meta = statusMeta(domain, status);\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      title={meta.description}\n      {...dataSlot(\"status\", \"dot\")}\n      {...stateAttributes({ checked: true })}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"shrink-0 rounded-pill\",\n          size === \"sm\" ? \"size-1.5\" : \"size-2\",\n          TONE_DOT[meta.tone],\n        )}\n      />\n      {hideLabel ? null : <span className=\"sr-only\">{meta.label}</span>}\n    </span>\n  );\n}\n\nexport interface StatusBadgeProps<D extends StatusDomain> extends StatusBaseProps<D> {\n  /** Show the registry description as a secondary line. */\n  showDescription?: boolean | undefined;\n  title?: string | undefined;\n}\n\n/** A bordered chip with a dot and the registry label. The default choice. */\nexport function StatusBadge<D extends StatusDomain>({\n  domain,\n  status,\n  showDescription = false,\n  title,\n  className,\n}: StatusBadgeProps<D>): React.ReactElement {\n  const meta = statusMeta(domain, status);\n  return (\n    <span\n      title={title ?? meta.description}\n      className={cn(\n        \"inline-flex items-center gap-1.5 border px-2 py-0.5 text-micro font-medium leading-none\",\n        TONE_CHIP[meta.tone],\n        className,\n      )}\n      {...dataSlot(\"status\", \"badge\")}\n    >\n      <span aria-hidden=\"true\" className={cn(\"size-1.5 shrink-0 rounded-pill\", TONE_DOT[meta.tone])} />\n      {meta.label}\n      {showDescription ? <span className=\"font-normal text-fg-muted\">{meta.description}</span> : null}\n    </span>\n  );\n}\n\nexport interface StatusTextProps<D extends StatusDomain> extends StatusBaseProps<D> {\n  title?: string | undefined;\n}\n\n/** The label alone. For dense rows where a chip would be too heavy. */\nexport function StatusText<D extends StatusDomain>({\n  domain,\n  status,\n  title,\n  className,\n}: StatusTextProps<D>): React.ReactElement {\n  const meta = statusMeta(domain, status);\n  return (\n    <span title={title ?? meta.description} className={cn(\"text-ui\", TONE_TEXT[meta.tone], className)} {...dataSlot(\"status\", \"text\")}>\n      {meta.label}\n    </span>\n  );\n}\n\nexport interface StatusSelectProps<D extends StatusDomain> {\n  domain: D;\n  /** Controlled value. */\n  value?: StatusKey<D> | undefined;\n  /** Uncontrolled initial value. */\n  defaultValue?: StatusKey<D> | undefined;\n  /** Called with the chosen wire value. Never a colour. */\n  onValueChange?: ((value: StatusKey<D>) => void) | undefined;\n  /** Accessible name for the group. */\n  label: string;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n  /** Restrict the choices. Defaults to every key in the domain. */\n  statuses?: readonly StatusKey<D>[] | undefined;\n}\n\n/**\n * The interactive picker over one domain's keys. A radiogroup, because choosing\n * one status *is* choosing one value from a small set — a listbox here would\n * add a level of interaction for no gain.\n *\n * It emits a wire value. The caller then decides what to do with it, which is\n * what keeps this component free of application logic.\n */\nexport function StatusSelect<D extends StatusDomain>({\n  domain,\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  disabled = false,\n  className,\n  statuses,\n}: StatusSelectProps<D>): React.ReactElement {\n  const [internal, setInternal] = React.useState<StatusKey<D>>(\n    (defaultValue ?? statuses?.[0] ?? (statusEntries(domain)[0]?.[0] as StatusKey<D>)) as StatusKey<D>,\n  );\n  const current = (value ?? internal) as StatusKey<D>;\n  const options = (statuses ?? statusEntries(domain).map(([key]) => key)) as Array<StatusKey<D>>;\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...dataSlot(\"status\", \"select\")}\n      {...stateAttributes({ disabled })}\n    >\n      {options.map((option) => {\n        const meta = statusMeta(domain, option);\n        const selected = option === current;\n        return (\n          <button\n            key={option}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            title={meta.description}\n            disabled={disabled}\n            data-tea-touch\n            className={cn(\n              \"inline-flex items-center gap-1.5 border px-2 py-1 text-micro font-medium leading-none\",\n              \"transition-colors duration-fast ease-standard\",\n              \"disabled:pointer-events-none disabled:opacity-50\",\n              selected\n                ? TONE_CHIP[meta.tone]\n                : \"border-line bg-transparent text-fg-muted hover:border-line-strong hover:text-fg\",\n            )}\n            onClick={() => {\n              setInternal(option);\n              onValueChange?.(option);\n            }}\n          >\n            <span aria-hidden=\"true\" className={cn(\"size-1.5 shrink-0 rounded-pill\", TONE_DOT[meta.tone])} />\n            {meta.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"AAkFI,SAME,KANF;AAlFJ,YAAY,WAAW;AAEvB,SAAS,eAAe,kBAAqD;AAC7E,SAAS,UAAU;AAEnB,SAAS,UAAU,uBAAuB;AAoB1C,MAAM,WAAiC;AAAA,EACrC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AA0BO,SAAS,UAAkC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,GAA0C;AACxC,QAAM,OAAO,WAAW,QAAQ,MAAM;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC3D,OAAO,KAAK;AAAA,MACX,GAAG,SAAS,UAAU,KAAK;AAAA,MAC3B,GAAG,gBAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,SAAS,OAAO,aAAa;AAAA,cAC7B,SAAS,KAAK,IAAI;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,YAAY,OAAO,oBAAC,UAAK,WAAU,WAAW,eAAK,OAAM;AAAA;AAAA;AAAA,EAC5D;AAEJ;AASO,SAAS,YAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAA4C;AAC1C,QAAM,OAAO,WAAW,QAAQ,MAAM;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS,KAAK;AAAA,MACrB,WAAW;AAAA,QACT;AAAA,QACA,UAAU,KAAK,IAAI;AAAA,QACnB;AAAA,MACF;AAAA,MACC,GAAG,SAAS,UAAU,OAAO;AAAA,MAE9B;AAAA,4BAAC,UAAK,eAAY,QAAO,WAAW,GAAG,kCAAkC,SAAS,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9F,KAAK;AAAA,QACL,kBAAkB,oBAAC,UAAK,WAAU,6BAA6B,eAAK,aAAY,IAAU;AAAA;AAAA;AAAA,EAC7F;AAEJ;AAOO,SAAS,WAAmC;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,WAAW,QAAQ,MAAM;AACtC,SACE,oBAAC,UAAK,OAAO,SAAS,KAAK,aAAa,WAAW,GAAG,WAAW,UAAU,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,SAAS,UAAU,MAAM,GAC7H,eAAK,OACR;AAEJ;AA0BO,SAAS,aAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAA6C;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACnC,gBAAgB,WAAW,CAAC,KAAM,cAAc,MAAM,EAAE,CAAC,IAAI,CAAC;AAAA,EACjE;AACA,QAAM,UAAW,SAAS;AAC1B,QAAM,UAAW,YAAY,cAAc,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAC7D,GAAG,SAAS,UAAU,QAAQ;AAAA,MAC9B,GAAG,gBAAgB,EAAE,SAAS,CAAC;AAAA,MAE/B,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,OAAO,WAAW,QAAQ,MAAM;AACtC,cAAM,WAAW,WAAW;AAC5B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,OAAO,KAAK;AAAA,YACZ;AAAA,YACA,kBAAc;AAAA,YACd,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,WACI,UAAU,KAAK,IAAI,IACnB;AAAA,YACN;AAAA,YACA,SAAS,MAAM;AACb,0BAAY,MAAM;AAClB,8BAAgB,MAAM;AAAA,YACxB;AAAA,YAEA;AAAA,kCAAC,UAAK,eAAY,QAAO,WAAW,GAAG,kCAAkC,SAAS,KAAK,IAAI,CAAC,GAAG;AAAA,cAC9F,KAAK;AAAA;AAAA;AAAA,UArBD;AAAA,QAsBP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/feedback/toast.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Toast } from 'radix-ui';
+import { Tone } from '@tea-ui/tokens';
+
+/**
+ * TEA UI — toasts.
+ *
+ * The audit found a toast implementation that was entirely inert: a
+ * `ToastProvider` was mounted, but the `Toast` component rendered a plain `<div>`
+ * instead of Radix's root, so nothing ever registered with the provider and
+ * nothing was ever announced. Alongside it sat a store with `TOAST_LIMIT = 1`,
+ * so a second toast silently replaced the first — the user never learned the
+ * second operation happened.
+ *
+ * Three decisions fix that class of problem:
+ *  - The store is a `useSyncExternalStore` store with an immutable snapshot. The
+ *    audit's version was a module-level mutable object with a hand-managed
+ *    listener array and a side effect inside the reducer.
+ *  - The limit is three, and the overflow is **counted and shown** rather than
+ *    swallowed. A user who triggered four operations is told that three are
+ *    running and one is queued.
+ *  - The live region belongs to a permanently mounted `Toaster`, which is the
+ *    only way a region that is added and removed on every toast can work.
+ */
+interface TeaToast {
+    readonly id: string;
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly tone: Tone;
+    readonly duration: number;
+    readonly action?: {
+        readonly label: string;
+        readonly onClick: () => void;
+    } | undefined;
+    readonly createdAt: number;
+}
+type ToastInput = {
+    title: string;
+    tone?: Tone;
+} & Omit<Partial<TeaToast>, "id" | "createdAt" | "tone" | "title">;
+/** Three at once. Beyond that, the user cannot read them anyway. */
+declare const TOAST_LIMIT = 3;
+/** Imperative API, for use outside React. */
+declare const toast: ((input: ToastInput) => string) & {
+    dismiss(id: string): void;
+    clear(): void;
+};
+interface UseToastResult {
+    toasts: readonly TeaToast[];
+    dismiss: (id: string) => void;
+    clear: () => void;
+}
+/** Subscribe to the toast store. */
+declare function useToast(): UseToastResult;
+interface ToastSurfaceProps extends React.ComponentProps<typeof Toast.Root> {
+    tone?: Tone | undefined;
+    /** Adds a coloured left rule so tone survives without reading the text. */
+    showTone?: boolean | undefined;
+}
+declare const ToastRoot: React.ForwardRefExoticComponent<Omit<ToastSurfaceProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const ToastTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const ToastDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const ToastClose: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ToasterProps = React.ComponentProps<typeof Toast.Viewport>;
+/**
+ * The live region. Mount this ONCE, near the root of the application, and
+ * never conditionally — a region that is created at the moment it needs to
+ * announce is a region that is too late.
+ */
+declare const Toaster: React.ForwardRefExoticComponent<Omit<Toast.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+
+export { TOAST_LIMIT, type TeaToast, ToastClose, ToastDescription, type ToastInput, ToastRoot, type ToastSurfaceProps, ToastTitle, Toaster, type ToasterProps, type UseToastResult, toast, useToast };