@tea-ui/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 landnevermore
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @tea-ui/core
+
+The primitive layer: layout, typography, inputs, feedback, overlays, navigation.
+
+Part of [TEA UI](https://landnevermore.github.io/TEAui/) — a design system built once and reused across
+products. The whole system is documented at https://landnevermore.github.io/TEAui/docs/.
+
+## Install
+
+```bash
+npm install @tea-ui/core
+```
+
+React 18.2 or 19 is expected as a peer dependency.
+
+## Use
+
+```ts
+import { Button } from "@tea-ui/core";
+```
+
+## Styles
+
+The token layer ships its stylesheet as a separate export, so it is only
+downloaded when it is asked for:
+
+```ts
+import "@tea-ui/core/styles.css";
+```
+
+## Licence
+
+MIT. See [LICENSE](./LICENSE).

package/dist/card.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+/**
+ * TEA UI — Card.
+ *
+ * The single most duplicated element in the source projects: the audit counted
+ * **twenty hand-typed copies of a bordered, padded surface** in one product,
+ * varying between `p-3`, `p-4`, `p-5`, `p-6` and `p-8`, and with one file
+ * defining its own local `Card({ title })` that shadowed the kit concept
+ * entirely. This is the one implementation.
+ *
+ * Two decisions worth stating, because both are load-bearing:
+ *
+ *  - **`CardTitle` renders a heading element, not a `div`.** The source
+ *    component rendered `<div>` for its title, which silently flattened the
+ *    heading structure of every page that used it. A screen-reader user
+ *    navigating by heading had nothing to navigate by. `level` is therefore a
+ *    prop with no default guess: a card on a page whose top heading is an `h1`
+ *    almost always wants `h2`, and guessing wrong is invisible until someone
+ *    needs the outline.
+ *  - **The surface never overrides its own padding silently.** `CardContent`
+ *    takes the density's `pad-card` step, so "how padded is a card" has one
+ *    answer rather than twenty.
+ */
+interface CardProps extends React.ComponentProps<"div"> {
+    /** Set `false` to drop the border — for a card nested inside another card. */
+    bordered?: boolean | undefined;
+    className?: string | undefined;
+}
+declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends React.ComponentProps<"div"> {
+    /** The heading level. No default: a wrong guess breaks the document outline. */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string | undefined;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * The audit's second-most-duplicated element: an icon + title + subtitle header
+ * appeared at eight call sites with the same class string. `Panel` is that
+ * header with a body, and it is what `Card` + `CardHeader` compose into when
+ * the region is a section rather than a discrete item.
+ */
+interface PanelProps extends React.ComponentProps<"section"> {
+    title: string;
+    description?: string | undefined;
+    /** Icon before the title. Decorative. */
+    icon?: React.ReactNode | undefined;
+    /** Right-aligned header content, e.g. a refresh control. */
+    actions?: React.ReactNode | undefined;
+    /** The heading level of `title`. */
+    level?: 2 | 3 | 4 | undefined;
+    className?: string | undefined;
+}
+declare const Panel: React.ForwardRefExoticComponent<Omit<PanelProps, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps, Panel, type PanelProps };

package/dist/card.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@tea-ui/utils";
+import { dataSlot } from "./internal/index.js";
+const Card = React.forwardRef(function Card2({ bordered = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "bg-surface",
+        bordered ? "border border-line" : "border border-transparent",
+        className
+      ),
+      ...dataSlot("card"),
+      ...props
+    }
+  );
+});
+const CardHeader = React.forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-1 border-b border-line pad-card pb-3", className),
+        ...dataSlot("card", "header"),
+        ...props
+      }
+    );
+  }
+);
+const CardBody = React.forwardRef(
+  function CardBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("pad-card", className), ...dataSlot("card", "body"), ...props });
+  }
+);
+const CardFooter = React.forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-wrap items-center gap-2 border-t border-line pad-card pt-3", className),
+        ...dataSlot("card", "footer"),
+        ...props
+      }
+    );
+  }
+);
+const CARD_TITLE_SIZE = {
+  1: "text-section",
+  2: "text-title",
+  3: "text-lead",
+  4: "text-ui",
+  5: "text-ui",
+  6: "text-label"
+};
+const CardTitle = React.forwardRef(function CardTitle2({ level, className, ...props }, ref) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn("font-semibold text-fg", CARD_TITLE_SIZE[level], className),
+      ...dataSlot("card", "title"),
+      ...props
+    }
+  );
+});
+const CardDescription = React.forwardRef(
+  function CardDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn("text-micro text-fg-muted", className),
+        ...dataSlot("card", "description"),
+        ...props
+      }
+    );
+  }
+);
+const Panel = React.forwardRef(function Panel2({ title, description, icon, actions, level = 2, className, children, ...props }, ref) {
+  const Heading = `h${level}`;
+  return /* @__PURE__ */ jsxs("section", { ref, className: cn("border border-line bg-surface", className), ...dataSlot("panel"), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-line pad-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+        icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "flex size-7 shrink-0 items-center justify-center bg-surface-3 text-fg-muted",
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(Heading, { className: "text-ui font-semibold leading-tight text-fg", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-label leading-tight text-fg-muted", children: description }) : null
+        ] })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pad-card", children })
+  ] });
+});
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Panel
+};
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot } from \"./internal\";\n\n/**\n * TEA UI — Card.\n *\n * The single most duplicated element in the source projects: the audit counted\n * **twenty hand-typed copies of a bordered, padded surface** in one product,\n * varying between `p-3`, `p-4`, `p-5`, `p-6` and `p-8`, and with one file\n * defining its own local `Card({ title })` that shadowed the kit concept\n * entirely. This is the one implementation.\n *\n * Two decisions worth stating, because both are load-bearing:\n *\n *  - **`CardTitle` renders a heading element, not a `div`.** The source\n *    component rendered `<div>` for its title, which silently flattened the\n *    heading structure of every page that used it. A screen-reader user\n *    navigating by heading had nothing to navigate by. `level` is therefore a\n *    prop with no default guess: a card on a page whose top heading is an `h1`\n *    almost always wants `h2`, and guessing wrong is invisible until someone\n *    needs the outline.\n *  - **The surface never overrides its own padding silently.** `CardContent`\n *    takes the density's `pad-card` step, so \"how padded is a card\" has one\n *    answer rather than twenty.\n */\nexport interface CardProps extends React.ComponentProps<\"div\"> {\n  /** Set `false` to drop the border — for a card nested inside another card. */\n  bordered?: boolean | undefined;\n  className?: string | undefined;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { bordered = true, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"bg-surface\",\n        bordered ? \"border border-line\" : \"border border-transparent\",\n        className,\n      )}\n      {...dataSlot(\"card\")}\n      {...props}\n    />\n  );\n});\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col gap-1 border-b border-line pad-card pb-3\", className)}\n        {...dataSlot(\"card\", \"header\")}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const CardBody = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  function CardBody({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(\"pad-card\", className)} {...dataSlot(\"card\", \"body\")} {...props} />;\n  },\n);\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-wrap items-center gap-2 border-t border-line pad-card pt-3\", className)}\n        {...dataSlot(\"card\", \"footer\")}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface CardTitleProps extends React.ComponentProps<\"div\"> {\n  /** The heading level. No default: a wrong guess breaks the document outline. */\n  level: 1 | 2 | 3 | 4 | 5 | 6;\n  className?: string | undefined;\n}\n\nconst CARD_TITLE_SIZE: Record<CardTitleProps[\"level\"], string> = {\n  1: \"text-section\",\n  2: \"text-title\",\n  3: \"text-lead\",\n  4: \"text-ui\",\n  5: \"text-ui\",\n  6: \"text-label\",\n};\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { level, className, ...props },\n  ref,\n) {\n  const Tag = `h${level}` as \"h2\";\n  return (\n    <Tag\n      ref={ref}\n      className={cn(\"font-semibold text-fg\", CARD_TITLE_SIZE[level], className)}\n      {...dataSlot(\"card\", \"title\")}\n      {...props}\n    />\n  );\n});\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<\"p\">>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"text-micro text-fg-muted\", className)}\n        {...dataSlot(\"card\", \"description\")}\n        {...props}\n      />\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------- */\n/* Panel: a titled region inside a page                                         */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The audit's second-most-duplicated element: an icon + title + subtitle header\n * appeared at eight call sites with the same class string. `Panel` is that\n * header with a body, and it is what `Card` + `CardHeader` compose into when\n * the region is a section rather than a discrete item.\n */\nexport interface PanelProps extends React.ComponentProps<\"section\"> {\n  title: string;\n  description?: string | undefined;\n  /** Icon before the title. Decorative. */\n  icon?: React.ReactNode | undefined;\n  /** Right-aligned header content, e.g. a refresh control. */\n  actions?: React.ReactNode | undefined;\n  /** The heading level of `title`. */\n  level?: 2 | 3 | 4 | undefined;\n  className?: string | undefined;\n}\n\nexport const Panel = React.forwardRef<HTMLElement, PanelProps>(function Panel(\n  { title, description, icon, actions, level = 2, className, children, ...props },\n  ref,\n) {\n  const Heading = `h${level}` as \"h2\";\n  return (\n    <section ref={ref} className={cn(\"border border-line bg-surface\", className)} {...dataSlot(\"panel\")} {...props}>\n      <div className=\"flex flex-wrap items-start justify-between gap-3 border-b border-line pad-card\">\n        <div className=\"flex min-w-0 items-start gap-2\">\n          {icon ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"flex size-7 shrink-0 items-center justify-center bg-surface-3 text-fg-muted\"\n            >\n              {icon}\n            </span>\n          ) : null}\n          <div className=\"min-w-0\">\n            <Heading className=\"text-ui font-semibold leading-tight text-fg\">{title}</Heading>\n            {description ? (\n              <p className=\"mt-0.5 text-label leading-tight text-fg-muted\">{description}</p>\n            ) : null}\n          </div>\n        </div>\n        {actions ? <div className=\"flex shrink-0 items-center gap-2\">{actions}</div> : null}\n      </div>\n      <div className=\"pad-card\">{children}</div>\n    </section>\n  );\n});\n"],"mappings":"AAsCI,cA+HM,YA/HN;AAtCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AA8BlB,MAAM,OAAO,MAAM,WAAsC,SAASA,MACvE,EAAE,WAAW,MAAM,WAAW,GAAG,MAAM,GACvC,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,WAAW,uBAAuB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG,SAAS,MAAM;AAAA,MAClB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0DAA0D,SAAS;AAAA,QAChF,GAAG,SAAS,QAAQ,QAAQ;AAAA,QAC5B,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASC,UAAS,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,SAAS,QAAQ,MAAM,GAAI,GAAG,OAAO;AAAA,EACvG;AACF;AAEO,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wEAAwE,SAAS;AAAA,QAC9F,GAAG,SAAS,QAAQ,QAAQ;AAAA,QAC5B,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAQA,MAAM,kBAA2D;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,YAAY,MAAM,WAA+C,SAASC,WACrF,EAAE,OAAO,WAAW,GAAG,MAAM,GAC7B,KACA;AACA,QAAM,MAAM,IAAI,KAAK;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,yBAAyB,gBAAgB,KAAK,GAAG,SAAS;AAAA,MACvE,GAAG,SAAS,QAAQ,OAAO;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM;AAAA,EACnC,SAASC,iBAAgB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACrD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,4BAA4B,SAAS;AAAA,QAClD,GAAG,SAAS,QAAQ,aAAa;AAAA,QACjC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAwBO,MAAM,QAAQ,MAAM,WAAoC,SAASC,OACtE,EAAE,OAAO,aAAa,MAAM,SAAS,QAAQ,GAAG,WAAW,UAAU,GAAG,MAAM,GAC9E,KACA;AACA,QAAM,UAAU,IAAI,KAAK;AACzB,SACE,qBAAC,aAAQ,KAAU,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,SAAS,OAAO,GAAI,GAAG,OACvG;AAAA,yBAAC,SAAI,WAAU,kFACb;AAAA,2BAAC,SAAI,WAAU,kCACZ;AAAA,eACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,WAAQ,WAAU,+CAA+C,iBAAM;AAAA,UACvE,cACC,oBAAC,OAAE,WAAU,iDAAiD,uBAAY,IACxE;AAAA,WACN;AAAA,SACF;AAAA,MACC,UAAU,oBAAC,SAAI,WAAU,oCAAoC,mBAAQ,IAAS;AAAA,OACjF;AAAA,IACA,oBAAC,SAAI,WAAU,YAAY,UAAS;AAAA,KACtC;AAEJ,CAAC;","names":["Card","CardHeader","CardBody","CardFooter","CardTitle","CardDescription","Panel"]}

package/dist/feedback/alert.d.ts

@@ -0,0 +1,57 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Alert and Callout.
+ *
+ * These are **siblings, not aliases**, and the distinction is the whole point:
+ *
+ *  - **`Alert` interrupts.** It owns an ARIA live region, so a screen reader
+ *    announces it as it appears. Use it when the user must know *now* — an
+ *    operation failed, a service is down, a destructive action is confirmed.
+ *  - **`Callout` does not interrupt.** It is static page content: a note in a
+ *    panel, a hint under a field, an aside in an article. It is present when the
+ *    user arrives and is never announced after the fact.
+ *
+ * The audit found nine copy-pasted error banners in one product and none in a
+ * component; the class string was identical in all nine, `role="alert"` was
+ * present in only two, the text colour drifted between two reds, and the
+ * padding drifted between three values. `Alert` makes that divergence
+ * impossible.
+ */
+declare const alertVariants: (props?: ({
+    tone?: "positive" | "info" | "caution" | "critical" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends Omit<React.ComponentProps<"div">, "title">, VariantProps<typeof alertVariants> {
+    /** Icon shown before the content. Keep it decorative. */
+    icon?: React.ReactNode | undefined;
+    /** Render a dismiss button. The label comes from `COPY.a11y.close`. */
+    onDismiss?: (() => void) | undefined;
+    /**
+     * Override the live-region role. Defaults to `alert` for interrupting tones
+     * and `status` for the rest, which is the correct pairing in both directions.
+     */
+    role?: "alert" | "status" | undefined;
+    className?: string | undefined;
+}
+declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/** Where the primary recovery action goes. Cancel must stay the easy path. */
+declare const AlertAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const calloutVariants: (props?: ({
+    tone?: "positive" | "info" | "caution" | "critical" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CalloutProps extends React.ComponentProps<"aside">, VariantProps<typeof calloutVariants> {
+    /** The heading. Omit for a plain note. */
+    title?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * A static, non-interrupting note. Never has a live region, because it was
+ * present before the user read it and nothing about it changes afterwards.
+ */
+declare const Callout: React.ForwardRefExoticComponent<Omit<CalloutProps, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { Alert, AlertAction, AlertDescription, type AlertProps, AlertTitle, Callout, type CalloutProps, alertVariants, calloutVariants };

package/dist/feedback/alert.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "@tea-ui/icons";
+import { COPY } from "@tea-ui/ux-standards";
+import { cn, cva } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+const alertVariants = cva(
+  [
+    "flex items-start gap-3 border p-3 text-ui",
+    "[&>svg]:mt-0.5 [&>svg]:shrink-0"
+  ],
+  {
+    variants: {
+      tone: {
+        positive: "border-positive-border bg-positive-subtle text-positive",
+        info: "border-info-border bg-info-subtle text-info",
+        caution: "border-caution-border bg-caution-subtle text-caution",
+        critical: "border-critical-border bg-critical-subtle text-critical",
+        neutral: "border-line bg-surface-2 text-fg-muted"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+const INTERRUPTS = {
+  positive: false,
+  info: false,
+  caution: true,
+  critical: true,
+  neutral: false
+};
+const Alert = React.forwardRef(function Alert2({ className, tone = "neutral", icon, onDismiss, role, children, ...props }, ref) {
+  const resolvedTone = tone ?? "neutral";
+  const resolvedRole = role ?? (INTERRUPTS[resolvedTone] ? "alert" : "status");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: resolvedRole,
+      className: cn(alertVariants({ tone: resolvedTone }), className),
+      ...dataSlot("alert"),
+      ...stateAttributes({ invalid: resolvedTone === "critical" }),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-fg", children }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": COPY.a11y.close,
+            className: "shrink-0 text-fg-muted transition-colors hover:text-fg",
+            ...dataSlot("alert", "dismiss"),
+            children: /* @__PURE__ */ jsx(X, { size: 16, "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+});
+const AlertTitle = React.forwardRef(
+  function AlertTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("p", { ref, className: cn("font-semibold text-fg", className), ...dataSlot("alert", "title"), ...props });
+  }
+);
+const AlertDescription = React.forwardRef(
+  function AlertDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("p", { ref, className: cn("text-micro text-fg-muted", className), ...dataSlot("alert", "description"), ...props });
+  }
+);
+const AlertAction = React.forwardRef(
+  function AlertAction2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-2 flex flex-wrap items-center gap-2", className), ...dataSlot("alert", "action"), ...props });
+  }
+);
+const calloutVariants = cva("border-l-2 py-1 ps-3 text-ui", {
+  variants: {
+    tone: {
+      positive: "border-positive text-fg-muted",
+      info: "border-info text-fg-muted",
+      caution: "border-caution text-fg-muted",
+      critical: "border-critical text-fg-muted",
+      neutral: "border-line-strong text-fg-muted"
+    }
+  },
+  defaultVariants: { tone: "neutral" }
+});
+const Callout = React.forwardRef(function Callout2({ className, tone = "neutral", title, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("aside", { ref, className: cn(calloutVariants({ tone }), className), ...dataSlot("callout"), ...props, children: [
+    title ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-micro font-semibold uppercase tracking-widest text-fg", children: title }) : null,
+    children
+  ] });
+});
+export {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+  Callout,
+  alertVariants,
+  calloutVariants
+};
+//# sourceMappingURL=alert.js.map

package/dist/feedback/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { X } from \"@tea-ui/icons\";\nimport type { Tone } from \"@tea-ui/tokens\";\nimport { COPY } from \"@tea-ui/ux-standards\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — Alert and Callout.\n *\n * These are **siblings, not aliases**, and the distinction is the whole point:\n *\n *  - **`Alert` interrupts.** It owns an ARIA live region, so a screen reader\n *    announces it as it appears. Use it when the user must know *now* — an\n *    operation failed, a service is down, a destructive action is confirmed.\n *  - **`Callout` does not interrupt.** It is static page content: a note in a\n *    panel, a hint under a field, an aside in an article. It is present when the\n *    user arrives and is never announced after the fact.\n *\n * The audit found nine copy-pasted error banners in one product and none in a\n * component; the class string was identical in all nine, `role=\"alert\"` was\n * present in only two, the text colour drifted between two reds, and the\n * padding drifted between three values. `Alert` makes that divergence\n * impossible.\n */\n\nexport const alertVariants = cva(\n  [\n    \"flex items-start gap-3 border p-3 text-ui\",\n    \"[&>svg]:mt-0.5 [&>svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      tone: {\n        positive: \"border-positive-border bg-positive-subtle text-positive\",\n        info: \"border-info-border bg-info-subtle text-info\",\n        caution: \"border-caution-border bg-caution-subtle text-caution\",\n        critical: \"border-critical-border bg-critical-subtle text-critical\",\n        neutral: \"border-line bg-surface-2 text-fg-muted\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/** A tone interrupts when it means \"the thing you asked for did not happen\". */\nconst INTERRUPTS: Record<Tone, boolean> = {\n  positive: false,\n  info: false,\n  caution: true,\n  critical: true,\n  neutral: false,\n};\n\nexport interface AlertProps\n  extends Omit<React.ComponentProps<\"div\">, \"title\">,\n    VariantProps<typeof alertVariants> {\n  /** Icon shown before the content. Keep it decorative. */\n  icon?: React.ReactNode | undefined;\n  /** Render a dismiss button. The label comes from `COPY.a11y.close`. */\n  onDismiss?: (() => void) | undefined;\n  /**\n   * Override the live-region role. Defaults to `alert` for interrupting tones\n   * and `status` for the rest, which is the correct pairing in both directions.\n   */\n  role?: \"alert\" | \"status\" | undefined;\n  className?: string | undefined;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { className, tone = \"neutral\", icon, onDismiss, role, children, ...props },\n  ref,\n) {\n  const resolvedTone = tone ?? \"neutral\";\n  const resolvedRole = role ?? (INTERRUPTS[resolvedTone] ? \"alert\" : \"status\");\n  return (\n    <div\n      ref={ref}\n      role={resolvedRole}\n      className={cn(alertVariants({ tone: resolvedTone }), className)}\n      {...dataSlot(\"alert\")}\n      {...stateAttributes({ invalid: resolvedTone === \"critical\" })}\n      {...props}\n    >\n      {icon ? <span aria-hidden=\"true\">{icon}</span> : null}\n      <div className=\"min-w-0 flex-1 text-fg\">{children}</div>\n      {onDismiss ? (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label={COPY.a11y.close}\n          className=\"shrink-0 text-fg-muted transition-colors hover:text-fg\"\n          {...dataSlot(\"alert\", \"dismiss\")}\n        >\n          <X size={16} aria-hidden=\"true\" />\n        </button>\n      ) : null}\n    </div>\n  );\n});\n\nexport const AlertTitle = React.forwardRef<HTMLParagraphElement, React.ComponentProps<\"p\">>(\n  function AlertTitle({ className, ...props }, ref) {\n    return <p ref={ref} className={cn(\"font-semibold text-fg\", className)} {...dataSlot(\"alert\", \"title\")} {...props} />;\n  },\n);\n\nexport const AlertDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<\"p\">>(\n  function AlertDescription({ className, ...props }, ref) {\n    return <p ref={ref} className={cn(\"text-micro text-fg-muted\", className)} {...dataSlot(\"alert\", \"description\")} {...props} />;\n  },\n);\n\n/** Where the primary recovery action goes. Cancel must stay the easy path. */\nexport const AlertAction = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  function AlertAction({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(\"mt-2 flex flex-wrap items-center gap-2\", className)} {...dataSlot(\"alert\", \"action\")} {...props} />;\n  },\n);\n\n/* -------------------------------------------------------------------------- */\n\nexport const calloutVariants = cva(\"border-l-2 py-1 ps-3 text-ui\", {\n  variants: {\n    tone: {\n      positive: \"border-positive text-fg-muted\",\n      info: \"border-info text-fg-muted\",\n      caution: \"border-caution text-fg-muted\",\n      critical: \"border-critical text-fg-muted\",\n      neutral: \"border-line-strong text-fg-muted\",\n    },\n  },\n  defaultVariants: { tone: \"neutral\" },\n});\n\nexport interface CalloutProps extends React.ComponentProps<\"aside\">, VariantProps<typeof calloutVariants> {\n  /** The heading. Omit for a plain note. */\n  title?: string | undefined;\n  className?: string | undefined;\n}\n\n/**\n * A static, non-interrupting note. Never has a live region, because it was\n * present before the user read it and nothing about it changes afterwards.\n */\nexport const Callout = React.forwardRef<HTMLElement, CalloutProps>(function Callout(\n  { className, tone = \"neutral\", title, children, ...props },\n  ref,\n) {\n  return (\n    <aside ref={ref} className={cn(calloutVariants({ tone }), className)} {...dataSlot(\"callout\")} {...props}>\n      {title ? <p className=\"mb-1 text-micro font-semibold uppercase tracking-widest text-fg\">{title}</p> : null}\n      {children}\n    </aside>\n  );\n});\n"],"mappings":"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","names":["Alert","AlertTitle","AlertDescription","AlertAction","Callout"]}

package/dist/feedback/badge.d.ts

@@ -0,0 +1,34 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Tone } from '@tea-ui/tokens';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Badge.
+ *
+ * A short, static label. Deliberately not a status: for that, use `StatusBadge`
+ * from `status.tsx`, which reads the shared status registry. Two renderers for
+ * two different jobs is the point — a source project had *seven* ad-hoc status
+ * renderers, none of which agreed.
+ *
+ * Two audit defects are fixed here:
+ *  - **Element.** The source project's Badge rendered a `<div>` and was placed
+ *    inside `<p>` elements across three pages. That is invalid HTML, and
+ *    assistive technology handles it unpredictably. A Badge renders a `<span>`.
+ *  - **Geometry.** It renders `rounded-none`. In this design language a pill is
+ *    a status, and using it decoratively destroys that meaning.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "solid" | "subtle" | "outline" | null | undefined;
+    tone?: "positive" | "info" | "caution" | "critical" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof badgeVariants> {
+    /** Render the consumer's child element instead of a `<span>`. */
+    asChild?: boolean | undefined;
+    className?: string | undefined;
+    /** Convenience passthrough so a tone can be derived from a status. */
+    tone?: Tone | undefined;
+}
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/feedback/badge.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn, cva } from "@tea-ui/utils";
+import { dataSlot } from "../internal/index.js";
+const badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1 border px-2 py-0.5 text-micro font-medium leading-none",
+    "whitespace-nowrap"
+  ],
+  {
+    variants: {
+      variant: {
+        subtle: "border-transparent",
+        solid: "border-transparent",
+        outline: "bg-transparent"
+      },
+      tone: {
+        positive: "",
+        info: "",
+        caution: "",
+        critical: "",
+        neutral: ""
+      }
+    },
+    compoundVariants: [
+      { variant: "subtle", tone: "positive", class: "bg-positive-subtle text-positive border-positive-border" },
+      { variant: "subtle", tone: "info", class: "bg-info-subtle text-info border-info-border" },
+      { variant: "subtle", tone: "caution", class: "bg-caution-subtle text-caution border-caution-border" },
+      { variant: "subtle", tone: "critical", class: "bg-critical-subtle text-critical border-critical-border" },
+      { variant: "subtle", tone: "neutral", class: "bg-neutral-subtle text-fg-muted border-neutral-border" },
+      { variant: "solid", tone: "positive", class: "bg-positive text-positive-fg" },
+      { variant: "solid", tone: "info", class: "bg-info text-info-fg" },
+      { variant: "solid", tone: "caution", class: "bg-caution text-caution-fg" },
+      { variant: "solid", tone: "critical", class: "bg-critical text-critical-fg" },
+      { variant: "solid", tone: "neutral", class: "bg-neutral text-neutral-fg" },
+      { variant: "outline", tone: "positive", class: "border-positive text-positive" },
+      { variant: "outline", tone: "info", class: "border-info text-info" },
+      { variant: "outline", tone: "caution", class: "border-caution text-caution" },
+      { variant: "outline", tone: "critical", class: "border-critical text-critical" },
+      { variant: "outline", tone: "neutral", class: "border-line-strong text-fg-muted" }
+    ],
+    defaultVariants: { variant: "subtle", tone: "neutral" }
+  }
+);
+const Badge = React.forwardRef(function Badge2({ className, variant, tone, asChild = false, ...props }, ref) {
+  const Component = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(badgeVariants({ variant, tone, className })),
+      ...dataSlot("badge"),
+      ...props
+    }
+  );
+});
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/feedback/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport type { Tone } from \"@tea-ui/tokens\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot } from \"../internal\";\n\n/**\n * TEA UI — Badge.\n *\n * A short, static label. Deliberately not a status: for that, use `StatusBadge`\n * from `status.tsx`, which reads the shared status registry. Two renderers for\n * two different jobs is the point — a source project had *seven* ad-hoc status\n * renderers, none of which agreed.\n *\n * Two audit defects are fixed here:\n *  - **Element.** The source project's Badge rendered a `<div>` and was placed\n *    inside `<p>` elements across three pages. That is invalid HTML, and\n *    assistive technology handles it unpredictably. A Badge renders a `<span>`.\n *  - **Geometry.** It renders `rounded-none`. In this design language a pill is\n *    a status, and using it decoratively destroys that meaning.\n */\nexport const badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1 border px-2 py-0.5 text-micro font-medium leading-none\",\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: \"border-transparent\",\n        solid: \"border-transparent\",\n        outline: \"bg-transparent\",\n      },\n      tone: {\n        positive: \"\",\n        info: \"\",\n        caution: \"\",\n        critical: \"\",\n        neutral: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"subtle\", tone: \"positive\", class: \"bg-positive-subtle text-positive border-positive-border\" },\n      { variant: \"subtle\", tone: \"info\", class: \"bg-info-subtle text-info border-info-border\" },\n      { variant: \"subtle\", tone: \"caution\", class: \"bg-caution-subtle text-caution border-caution-border\" },\n      { variant: \"subtle\", tone: \"critical\", class: \"bg-critical-subtle text-critical border-critical-border\" },\n      { variant: \"subtle\", tone: \"neutral\", class: \"bg-neutral-subtle text-fg-muted border-neutral-border\" },\n\n      { variant: \"solid\", tone: \"positive\", class: \"bg-positive text-positive-fg\" },\n      { variant: \"solid\", tone: \"info\", class: \"bg-info text-info-fg\" },\n      { variant: \"solid\", tone: \"caution\", class: \"bg-caution text-caution-fg\" },\n      { variant: \"solid\", tone: \"critical\", class: \"bg-critical text-critical-fg\" },\n      { variant: \"solid\", tone: \"neutral\", class: \"bg-neutral text-neutral-fg\" },\n\n      { variant: \"outline\", tone: \"positive\", class: \"border-positive text-positive\" },\n      { variant: \"outline\", tone: \"info\", class: \"border-info text-info\" },\n      { variant: \"outline\", tone: \"caution\", class: \"border-caution text-caution\" },\n      { variant: \"outline\", tone: \"critical\", class: \"border-critical text-critical\" },\n      { variant: \"outline\", tone: \"neutral\", class: \"border-line-strong text-fg-muted\" },\n    ],\n    defaultVariants: { variant: \"subtle\", tone: \"neutral\" },\n  },\n);\n\nexport interface BadgeProps\n  extends Omit<React.ComponentProps<\"span\">, \"color\">,\n    VariantProps<typeof badgeVariants> {\n  /** Render the consumer's child element instead of a `<span>`. */\n  asChild?: boolean | undefined;\n  className?: string | undefined;\n  /** Convenience passthrough so a tone can be derived from a status. */\n  tone?: Tone | undefined;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, tone, asChild = false, ...props },\n  ref,\n) {\n  const Component = asChild ? Slot.Root : \"span\";\n  return (\n    <Component\n      ref={ref}\n      className={cn(badgeVariants({ variant, tone, className }))}\n      {...dataSlot(\"badge\")}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAiFI;AAjFJ,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,IAAI,WAA8B;AAE3C,SAAS,gBAAgB;AAiBlB,MAAM,gBAAgB;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,EAAE,SAAS,UAAU,MAAM,YAAY,OAAO,0DAA0D;AAAA,MACxG,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,8CAA8C;AAAA,MACxF,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,uDAAuD;AAAA,MACpG,EAAE,SAAS,UAAU,MAAM,YAAY,OAAO,0DAA0D;AAAA,MACxG,EAAE,SAAS,UAAU,MAAM,WAAW,OAAO,wDAAwD;AAAA,MAErG,EAAE,SAAS,SAAS,MAAM,YAAY,OAAO,+BAA+B;AAAA,MAC5E,EAAE,SAAS,SAAS,MAAM,QAAQ,OAAO,uBAAuB;AAAA,MAChE,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,6BAA6B;AAAA,MACzE,EAAE,SAAS,SAAS,MAAM,YAAY,OAAO,+BAA+B;AAAA,MAC5E,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,6BAA6B;AAAA,MAEzE,EAAE,SAAS,WAAW,MAAM,YAAY,OAAO,gCAAgC;AAAA,MAC/E,EAAE,SAAS,WAAW,MAAM,QAAQ,OAAO,wBAAwB;AAAA,MACnE,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,8BAA8B;AAAA,MAC5E,EAAE,SAAS,WAAW,MAAM,YAAY,OAAO,gCAAgC;AAAA,MAC/E,EAAE,SAAS,WAAW,MAAM,WAAW,OAAO,mCAAmC;AAAA,IACnF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU,MAAM,UAAU;AAAA,EACxD;AACF;AAYO,MAAM,QAAQ,MAAM,WAAwC,SAASA,OAC1E,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAM,GACtD,KACA;AACA,QAAM,YAAY,UAAU,KAAK,OAAO;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,cAAc,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACxD,GAAG,SAAS,OAAO;AAAA,MACnB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Badge"]}

package/dist/feedback/index.d.ts

@@ -0,0 +1,13 @@
+export { Spinner, SpinnerProps, SpinnerSize } from './spinner.js';
+export { Skeleton, SkeletonProps, SkeletonText, SkeletonTextProps, skeletonVariants } from './skeleton.js';
+export { Progress, ProgressProps } from './progress.js';
+export { Badge, BadgeProps, badgeVariants } from './badge.js';
+export { StatusBadge, StatusBadgeProps, StatusBaseProps, StatusDomainKey, StatusDot, StatusDotProps, StatusSelect, StatusSelectProps, StatusText, StatusTextProps } from './status.js';
+export { Alert, AlertAction, AlertDescription, AlertProps, AlertTitle, Callout, CalloutProps, alertVariants, calloutVariants } from './alert.js';
+export { TOAST_LIMIT, TeaToast, ToastClose, ToastDescription, ToastInput, ToastRoot, ToastSurfaceProps, ToastTitle, Toaster, UseToastResult, toast, useToast } from './toast.js';
+import 'react';
+import 'class-variance-authority/types';
+import '@tea-ui/utils';
+import 'radix-ui';
+import '@tea-ui/tokens';
+import '@tea-ui/ux-standards';

package/dist/feedback/index.js

@@ -0,0 +1,62 @@
+import { Spinner } from "./spinner.js";
+import {
+  Skeleton,
+  SkeletonText,
+  skeletonVariants
+} from "./skeleton.js";
+import { Progress } from "./progress.js";
+import { Badge, badgeVariants } from "./badge.js";
+import {
+  StatusDot,
+  StatusBadge,
+  StatusText,
+  StatusSelect
+} from "./status.js";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+  Callout,
+  alertVariants,
+  calloutVariants
+} from "./alert.js";
+import {
+  ToastClose,
+  ToastDescription,
+  ToastRoot,
+  ToastTitle,
+  Toaster,
+  toast,
+  useToast,
+  TOAST_LIMIT
+} from "./toast.js";
+export {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Callout,
+  Progress,
+  Skeleton,
+  SkeletonText,
+  Spinner,
+  StatusBadge,
+  StatusDot,
+  StatusSelect,
+  StatusText,
+  TOAST_LIMIT,
+  ToastClose,
+  ToastDescription,
+  ToastRoot,
+  ToastTitle,
+  Toaster,
+  alertVariants,
+  badgeVariants,
+  calloutVariants,
+  skeletonVariants,
+  toast,
+  useToast
+};
+//# sourceMappingURL=index.js.map

package/dist/feedback/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/index.ts"],"sourcesContent":["/**\n * TEA UI — feedback surface.\n *\n * Loading, progress, status and interruption. Per the feedback standard, every\n * asynchronous surface in a TEA product is in one of seventeen named states,\n * and the affordance for each is decided rather than chosen per call site.\n */\nexport { Spinner, type SpinnerProps, type SpinnerSize } from \"./spinner\";\nexport {\n  Skeleton,\n  SkeletonText,\n  skeletonVariants,\n  type SkeletonProps,\n  type SkeletonTextProps,\n} from \"./skeleton\";\nexport { Progress, type ProgressProps } from \"./progress\";\nexport { Badge, badgeVariants, type BadgeProps } from \"./badge\";\nexport {\n  StatusDot,\n  StatusBadge,\n  StatusText,\n  StatusSelect,\n  type StatusBaseProps,\n  type StatusBadgeProps,\n  type StatusDotProps,\n  type StatusSelectProps,\n  type StatusTextProps,\n  type StatusDomainKey,\n} from \"./status\";\nexport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n  Callout,\n  alertVariants,\n  calloutVariants,\n  type AlertProps,\n  type CalloutProps,\n} from \"./alert\";\nexport {\n  ToastClose,\n  ToastDescription,\n  ToastRoot,\n  ToastTitle,\n  Toaster,\n  toast,\n  useToast,\n  TOAST_LIMIT,\n  type TeaToast,\n  type ToastInput,\n  type ToastSurfaceProps,\n  type UseToastResult,\n} from \"./toast\";\n"],"mappings":"AAOA,SAAS,eAAoD;AAC7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gBAAoC;AAC7C,SAAS,OAAO,qBAAsC;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;","names":[]}