@financedistrict/apps-ui 0.1.0

package/dist/tabs.cjs

@@ -0,0 +1,299 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/tabs/Tabs.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var tabsRootVariants = classVarianceAuthority.cva(["flex flex-col"]);
+var tabsListVariants = classVarianceAuthority.cva(["inline-flex items-center"]);
+var tabsTriggerVariants = classVarianceAuthority.cva(
+  [
+    "group inline-flex cursor-pointer items-center justify-center gap-1 px-2 py-2.5",
+    "body-03-medium border-b-2 transition-colors",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-card-brand-border-accent text-foreground-accent",
+        false: "border-transparent text-foreground"
+      },
+      disabled: {
+        true: "text-foreground-muted",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Unselected + enabled: faint underline on hover, purple text+underline
+      // while pressed (Figma hover / active states).
+      {
+        selected: false,
+        disabled: false,
+        className: "hover:border-card-brand-border active:border-card-brand-border-accent active:text-foreground-accent"
+      },
+      // Selected + disabled: the underline drops from accent to the faint token
+      // (Figma disabled-selected). Wins over the accent border from
+      // `selected:true` because compound variants are appended last.
+      {
+        selected: true,
+        disabled: true,
+        className: "border-card-brand-border"
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var tabsContentVariants = classVarianceAuthority.cva([
+  "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var TabsContext = React__namespace.createContext(null);
+function useTabsContext(part) {
+  const context = React__namespace.useContext(TabsContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tabs.Root>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TabsRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const select = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const baseId = React__namespace.useId();
+  const getTriggerId = (tabValue) => `${baseId}-tab-${tabValue}`;
+  const getPanelId = (tabValue) => `${baseId}-panel-${tabValue}`;
+  const [triggers, setTriggers] = React__namespace.useState([]);
+  const registerTrigger = React__namespace.useCallback((registration) => {
+    setTriggers((prev) => {
+      const existing = prev.findIndex((t) => t.value === registration.value);
+      if (existing === -1) return [...prev, registration];
+      const next = [...prev];
+      next[existing] = registration;
+      return next;
+    });
+  }, []);
+  const unregisterTrigger = React__namespace.useCallback((tabValue) => {
+    setTriggers((prev) => prev.filter((t) => t.value !== tabValue));
+  }, []);
+  const domOrdered = [...triggers].sort(
+    (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  );
+  const firstEnabled = domOrdered.find((t) => !t.disabled)?.value;
+  const tabStopValue = value ?? firstEnabled;
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
+    const enabled = domOrdered.filter((t) => !t.disabled);
+    if (enabled.length === 0) return;
+    const currentIndex = enabled.findIndex(
+      (t) => t.node === event.currentTarget
+    );
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % enabled.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabled.length - 1;
+        break;
+    }
+    const target = enabled[nextIndex];
+    if (!target) return;
+    target.node.focus();
+    select(target.value);
+  };
+  const contextValue = {
+    value,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "tabs",
+      className: cn(tabsRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function TabsList({ className, children, ref, ...props }) {
+  useTabsContext("Tabs.List");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "data-slot": "tabs-list",
+      className: cn(tabsListVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  disabled = false,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Trigger");
+  const selected = value === selectedValue;
+  const triggerId = getTriggerId(value);
+  const panelId = getPanelId(value);
+  const buttonRef = React__namespace.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef(ref, node);
+  };
+  React__namespace.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger({ value, disabled, node });
+    return () => unregisterTrigger(value);
+  }, [registerTrigger, unregisterTrigger, value, disabled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      role: "tab",
+      id: triggerId,
+      "data-slot": "tabs-trigger",
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      "aria-selected": selected,
+      "aria-controls": selected ? panelId : void 0,
+      tabIndex: value === tabStopValue ? 0 : -1,
+      disabled,
+      className: cn(tabsTriggerVariants({ selected, disabled }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) select(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Content");
+  if (value !== selectedValue) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      id: getPanelId(value),
+      "aria-labelledby": getTriggerId(value),
+      "data-slot": "tabs-content",
+      "data-state": "active",
+      tabIndex: 0,
+      className: cn(tabsContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+};
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsRoot = TabsRoot;
+exports.TabsTrigger = TabsTrigger;
+exports.tabsContentVariants = tabsContentVariants;
+exports.tabsListVariants = tabsListVariants;
+exports.tabsRootVariants = tabsRootVariants;
+exports.tabsTriggerVariants = tabsTriggerVariants;

package/dist/tabs.d.cts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface TabsRootProps extends Omit<React.ComponentProps<"div">, "defaultValue"> {
+    /** Controlled selected value. Pair with `onValueChange`. */
+    value?: string;
+    /**
+     * Uncontrolled initial value. Ignored when `value` is provided. If both are
+     * omitted, no tab is selected initially (all panels hidden).
+     */
+    defaultValue?: string;
+    /** Called with the next value whenever selection changes. */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * State owner + context provider for the compound `Tabs`. Renders a plain
+ * `<div>` (no landmark role). Owns the single-`string` selection model
+ * (controlled via `value`/`onValueChange`, or uncontrolled via `defaultValue`),
+ * the roving tab-stop computation, and the arrow-key handler with automatic
+ * activation. Forwards `ref` to the container.
+ */
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, className, children, ref, ...props }: TabsRootProps): React.JSX.Element;
+interface TabsListProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The horizontal row of triggers — `role="tablist"`. Provide an accessible name
+ * via `aria-label` or `aria-labelledby` when there is no visible label.
+ * Forwards `ref` to the tablist.
+ */
+declare function TabsList({ className, children, ref, ...props }: TabsListProps): React.JSX.Element;
+interface TabsTriggerProps extends React.ComponentProps<"button"> {
+    /** **Required.** Ties the tab to its panel (and to the selection model). */
+    value: string;
+}
+/**
+ * One tab — `role="tab"`, a native `<button type="button">`. `children` is the
+ * label (and any leading icon, which inherits the per-state text color via
+ * `currentColor`). Wires `aria-selected`, roving `tabIndex`, and — only while
+ * its panel is mounted — `aria-controls`. Composes the consumer's
+ * `onClick`/`onKeyDown` (theirs runs first; the built-in behaviour is skipped
+ * if they call `preventDefault`). Forwards `ref` to the button.
+ */
+declare function TabsTrigger({ value, disabled, className, children, onClick, onKeyDown, ref, ...props }: TabsTriggerProps): React.JSX.Element;
+interface TabsContentProps extends React.ComponentProps<"div"> {
+    /** **Required.** Matches the `value` of the trigger this panel belongs to. */
+    value: string;
+}
+/**
+ * A tab panel — `role="tabpanel"`, labelled by its trigger. Rendered **only
+ * when its tab is selected**; inactive panels are unmounted, so their content
+ * leaves the a11y tree and tab order (matching `Accordion.Content`). It is a
+ * focus stop (`tabIndex=0`) so keyboard users can reach its content. Forwards
+ * `ref` to the panel.
+ */
+declare function TabsContent({ value, className, children, ref, ...props }: TabsContentProps): React.JSX.Element | null;
+/**
+ * Compound underline-indicator `Tabs` (WAI-ARIA Tabs pattern, single selection,
+ * horizontal, automatic activation). Assemble from its namespaced parts:
+ *
+ * ```tsx
+ * <Tabs.Root defaultValue="overview">
+ *   <Tabs.List aria-label="Account sections">
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Tabs: {
+    Root: typeof TabsRoot;
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+
+/**
+ * Tabs styling — the Figma `tab` component (node `906-78043`), an
+ * underline-indicator tab. Binds ONLY to the semantic token layer (never
+ * primitives, never mode plumbing); theme switching is automatic via `.dark`,
+ * so no `dark:` variants are needed.
+ *
+ * Only the trigger carries visual state (text color + underline). The state ×
+ * selected matrix from the spec is expressed as two `cva` axes (`selected`,
+ * `disabled`) plus compound variants for the hover/active interactions and the
+ * disabled-selected underline.
+ */
+/** Root container — a plain vertical stack (tablist above, panel below). */
+declare const tabsRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The tablist row. `inline-flex items-center` with NO `gap` — the tabs sit
+ * adjacent and each carries its own horizontal padding (Figma shows no
+ * full-width bottom-border track; the indicator is per-tab).
+ */
+declare const tabsListVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * One trigger (`role="tab"`). Base holds the layout, type, the transparent
+ * baseline underline (`border-b-2`, colored per state so all tabs keep the same
+ * height with no layout shift), and the focus ring. Per repo TW4 precedent the
+ * ring needs `outline-solid`. Corners are square (no radius) — the tab and its
+ * focus ring have sharp corners. The ring is offset outward so it frames the
+ * tab clear of the underline.
+ */
+declare const tabsTriggerVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * The tabpanel (`role="tabpanel"`). Content is arbitrary (no forced type
+ * style); the panel is a focus stop (`tabIndex=0`) so it shows the same
+ * `:focus-visible` ring as the triggers.
+ */
+declare const tabsContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, tabsContentVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants };

package/dist/tabs.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface TabsRootProps extends Omit<React.ComponentProps<"div">, "defaultValue"> {
+    /** Controlled selected value. Pair with `onValueChange`. */
+    value?: string;
+    /**
+     * Uncontrolled initial value. Ignored when `value` is provided. If both are
+     * omitted, no tab is selected initially (all panels hidden).
+     */
+    defaultValue?: string;
+    /** Called with the next value whenever selection changes. */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * State owner + context provider for the compound `Tabs`. Renders a plain
+ * `<div>` (no landmark role). Owns the single-`string` selection model
+ * (controlled via `value`/`onValueChange`, or uncontrolled via `defaultValue`),
+ * the roving tab-stop computation, and the arrow-key handler with automatic
+ * activation. Forwards `ref` to the container.
+ */
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, className, children, ref, ...props }: TabsRootProps): React.JSX.Element;
+interface TabsListProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The horizontal row of triggers — `role="tablist"`. Provide an accessible name
+ * via `aria-label` or `aria-labelledby` when there is no visible label.
+ * Forwards `ref` to the tablist.
+ */
+declare function TabsList({ className, children, ref, ...props }: TabsListProps): React.JSX.Element;
+interface TabsTriggerProps extends React.ComponentProps<"button"> {
+    /** **Required.** Ties the tab to its panel (and to the selection model). */
+    value: string;
+}
+/**
+ * One tab — `role="tab"`, a native `<button type="button">`. `children` is the
+ * label (and any leading icon, which inherits the per-state text color via
+ * `currentColor`). Wires `aria-selected`, roving `tabIndex`, and — only while
+ * its panel is mounted — `aria-controls`. Composes the consumer's
+ * `onClick`/`onKeyDown` (theirs runs first; the built-in behaviour is skipped
+ * if they call `preventDefault`). Forwards `ref` to the button.
+ */
+declare function TabsTrigger({ value, disabled, className, children, onClick, onKeyDown, ref, ...props }: TabsTriggerProps): React.JSX.Element;
+interface TabsContentProps extends React.ComponentProps<"div"> {
+    /** **Required.** Matches the `value` of the trigger this panel belongs to. */
+    value: string;
+}
+/**
+ * A tab panel — `role="tabpanel"`, labelled by its trigger. Rendered **only
+ * when its tab is selected**; inactive panels are unmounted, so their content
+ * leaves the a11y tree and tab order (matching `Accordion.Content`). It is a
+ * focus stop (`tabIndex=0`) so keyboard users can reach its content. Forwards
+ * `ref` to the panel.
+ */
+declare function TabsContent({ value, className, children, ref, ...props }: TabsContentProps): React.JSX.Element | null;
+/**
+ * Compound underline-indicator `Tabs` (WAI-ARIA Tabs pattern, single selection,
+ * horizontal, automatic activation). Assemble from its namespaced parts:
+ *
+ * ```tsx
+ * <Tabs.Root defaultValue="overview">
+ *   <Tabs.List aria-label="Account sections">
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Tabs: {
+    Root: typeof TabsRoot;
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+
+/**
+ * Tabs styling — the Figma `tab` component (node `906-78043`), an
+ * underline-indicator tab. Binds ONLY to the semantic token layer (never
+ * primitives, never mode plumbing); theme switching is automatic via `.dark`,
+ * so no `dark:` variants are needed.
+ *
+ * Only the trigger carries visual state (text color + underline). The state ×
+ * selected matrix from the spec is expressed as two `cva` axes (`selected`,
+ * `disabled`) plus compound variants for the hover/active interactions and the
+ * disabled-selected underline.
+ */
+/** Root container — a plain vertical stack (tablist above, panel below). */
+declare const tabsRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The tablist row. `inline-flex items-center` with NO `gap` — the tabs sit
+ * adjacent and each carries its own horizontal padding (Figma shows no
+ * full-width bottom-border track; the indicator is per-tab).
+ */
+declare const tabsListVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * One trigger (`role="tab"`). Base holds the layout, type, the transparent
+ * baseline underline (`border-b-2`, colored per state so all tabs keep the same
+ * height with no layout shift), and the focus ring. Per repo TW4 precedent the
+ * ring needs `outline-solid`. Corners are square (no radius) — the tab and its
+ * focus ring have sharp corners. The ring is offset outward so it frames the
+ * tab clear of the underline.
+ */
+declare const tabsTriggerVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * The tabpanel (`role="tabpanel"`). Content is arbitrary (no forced type
+ * style); the panel is a focus stop (`tabIndex=0`) so it shows the same
+ * `:focus-visible` ring as the triggers.
+ */
+declare const tabsContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, tabsContentVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants };

package/dist/tabs.js

@@ -0,0 +1,2 @@
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, tabsContentVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants } from './chunk-UVUSVFOH.js';
+import './chunk-7EOSDFS3.js';

package/dist/toast.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/toast/Toast.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var toastVariants = classVarianceAuthority.cva(
+  "flex items-center gap-4 rounded-sm bg-card-reversed-background px-5 py-4"
+);
+var toastIconVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center [&_svg]:size-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      variation: {
+        success: "text-success-primary-foreground",
+        error: "text-destructive-primary-foreground"
+      }
+    },
+    defaultVariants: { variation: "success" }
+  }
+);
+var toastCloseVariants = classVarianceAuthority.cva([
+  "flex shrink-0 cursor-pointer items-center rounded-xs text-card-reversed-foreground-muted",
+  "transition-colors hover:text-card-reversed-foreground",
+  "[&_svg]:size-5 [&_svg]:shrink-0",
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+]);
+var STATUS_ICON = {
+  success: react.CheckCircleIcon,
+  error: react.XCircleIcon
+};
+function Toast({
+  variation = "success",
+  children,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const StatusIcon = STATUS_ICON[variation];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "toast",
+      role: variation === "error" ? "alert" : "status",
+      className: cn(toastVariants(), className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "toast-icon",
+              "aria-hidden": "true",
+              className: toastIconVariants({ variation }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-03 min-w-0 flex-1 text-card-reversed-foreground", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "toast-close",
+            "aria-label": "Dismiss",
+            className: toastCloseVariants(),
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Toast = Toast;
+exports.toastCloseVariants = toastCloseVariants;
+exports.toastIconVariants = toastIconVariants;
+exports.toastVariants = toastVariants;

package/dist/toast.d.cts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface ToastProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /**
+     * Status. `success` → a polite `role="status"` region; `error` → an
+     * assertive `role="alert"` region. Also selects the leading icon + its color.
+     */
+    variation?: "success" | "error";
+    /** The message body (`body-03`). */
+    children: React.ReactNode;
+    /**
+     * Dismiss handler. When provided, the trailing close button is rendered and
+     * wired to it; omit it for a toast with no close affordance.
+     */
+    onClose?: () => void;
+    /** Ref forwarded to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Toast — the Figma `Toast` (node `5020:2203`). A presentational dark
+ * notification chip: a leading status icon, a message, and an optional close
+ * button. It is a live region (`role="status"` for success, `role="alert"` for
+ * error) so it announces when mounted; positioning, stacking, and auto-dismiss
+ * are the consumer's concern (there is no toast manager here).
+ */
+declare function Toast({ variation, children, onClose, className, ref, ...props }: ToastProps): React.JSX.Element;
+
+/**
+ * Toast styling — the Figma `Toast` (node `5020:2203`). Binds ONLY to the
+ * semantic token layer (never primitives); theme switching is automatic via
+ * `.dark`, so no `dark:` variants. The surface is the fixed dark "reversed"
+ * card, so the root is not variation-dependent — only the leading status
+ * icon's color changes with `variation`.
+ */
+/** Root row — dark reversed surface; identical for both variations. */
+declare const toastVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Leading 20px status icon slot; color per variation. */
+declare const toastIconVariants: (props?: ({
+    variation?: "error" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Trailing close button — muted, brightens on hover; shared ADR-0010 focus
+ * ring (`rounded-xs` so the ring follows the small hit area).
+ */
+declare const toastCloseVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Toast, type ToastProps, toastCloseVariants, toastIconVariants, toastVariants };