@nexub/react 3.0.0 → 3.2.0

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import type { GlassMode } from '@nexub/core';
+export type ThemeMode = 'light' | 'dark' | 'system';
+/** Glass intensity dial (user preference, like iOS 27's clear → tinted slider).
+ *  'off' makes every glass surface solid. Set as `data-glass` on <html>. */
+export type { GlassMode };
+export interface ThemeContextValue {
+    /** The resolved theme actually applied (never 'system'). */
+    resolvedTheme: 'light' | 'dark';
+    /** The mode set by the consumer — may be 'system'. */
+    theme: ThemeMode;
+    /** Change the active theme. */
+    setTheme: (mode: ThemeMode) => void;
+    /** Glass intensity. */
+    glass: GlassMode;
+    /** Change (and persist) the glass intensity. */
+    setGlass: (mode: GlassMode) => void;
+}
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Initial theme.  Defaults to 'system'.
+     */
+    defaultTheme?: ThemeMode;
+    /**
+     * localStorage key used to persist the user's choice.
+     * Defaults to 'nexub-theme'.
+     */
+    storageKey?: string;
+    /** Initial glass intensity. Defaults to 'balanced'. */
+    defaultGlass?: GlassMode;
+    /** localStorage key for the glass intensity. Defaults to 'nexub-glass'. */
+    glassStorageKey?: string;
+    /**
+     * Brand seed colour (`#rgb` / `#rrggbb`) for white-label theming. The accent
+     * family named by `seedTarget` is regenerated from it (same HCT tones as the
+     * built-in roles, so WCAG pairs hold) and set on `<html>` via the CSSOM
+     * (strict-CSP safe), following the current `data-contrast` level.
+     *
+     * Runs on the client after `@nexub/tokens/seed` loads (a lazy chunk with
+     * the colour library), so server-rendered pages paint the default brand
+     * first. To avoid that flash, emit `createSeedThemeCss(seed)` from
+     * `@nexub/tokens/seed` into a server-rendered stylesheet instead.
+     */
+    seed?: string;
+    /** Accent family the seed recolours: 'primary' (default) or 'tertiary' (product brand). */
+    seedTarget?: 'primary' | 'tertiary';
+}
+export declare function ThemeProvider({ children, defaultTheme, storageKey, defaultGlass, glassStorageKey, seed, seedTarget, }: ThemeProviderProps): React.JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export interface ThemeScriptProps {
+    /** Must match ThemeProvider's `storageKey`. Defaults to 'nexub-theme'. */
+    storageKey?: string;
+    /** If set, a stored product brand (e.g. 'bookub') is applied as `data-product`. */
+    productStorageKey?: string;
+    /** Must match ThemeProvider's `glassStorageKey`. Defaults to 'nexub-glass'. */
+    glassStorageKey?: string;
+    /** If set, a stored contrast level ('standard' | 'medium' | 'high') is applied as `data-contrast`. */
+    contrastStorageKey?: string;
+    /** CSP nonce for pages whose script-src disallows inline scripts. */
+    nonce?: string;
+}
+/** @internal Exported for tests. */
+export declare function themeScriptSource(storageKey: string, productStorageKey?: string, glassStorageKey?: string, contrastStorageKey?: string): string;
+/**
+ * Applies the stored theme before first paint, so there is no light/dark flash.
+ * Render it in `<head>` (or at the top of `<body>`) on server-rendered pages.
+ */
+export declare function ThemeScript({ storageKey, productStorageKey, glassStorageKey, contrastStorageKey, nonce, }: ThemeScriptProps): React.JSX.Element;

package/dist/{chunk-ZBRRQHZG.js → components/ThemeProvider/ThemeProvider.js}

@@ -1,15 +1,11 @@
-'use client';
-import {
-  useIsomorphicLayoutEffect
-} from "./chunk-NHUQLIHL.js";
-
-// src/components/ThemeProvider/ThemeProvider.tsx
-import * as React from "react";
+"use client";
 import { jsx } from "react/jsx-runtime";
-var GLASS_MODES = ["clear", "balanced", "tinted", "off"];
-var ThemeContext = React.createContext(void 0);
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+const GLASS_MODES = ["clear", "balanced", "tinted", "off"];
+const ThemeContext = React.createContext(void 0);
 ThemeContext.displayName = "ThemeContext";
-var DARK_QUERY = "(prefers-color-scheme: dark)";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
 function applyTheme(theme) {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
@@ -36,7 +32,7 @@ function readGlass(key, fallback) {
   }
   return fallback;
 }
-var CONTRAST_QUERY = "(prefers-contrast: more)";
+const CONTRAST_QUERY = "(prefers-contrast: more)";
 function readContrast(root) {
   const attr = root.getAttribute("data-contrast");
   if (attr === "standard" || attr === "medium" || attr === "high") return attr;
@@ -161,7 +157,7 @@ function useTheme() {
   }
   return ctx;
 }
-var jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
+const jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
 function themeScriptSource(storageKey, productStorageKey, glassStorageKey = "nexub-glass", contrastStorageKey) {
   const contrast = contrastStorageKey ? `var c=localStorage.getItem(${jsString(contrastStorageKey)});if(['standard','medium','high'].indexOf(c)>-1)d.setAttribute('data-contrast',c);` : "";
   const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
@@ -184,9 +180,9 @@ function ThemeScript({
     }
   );
 }
-
 export {
   ThemeProvider,
-  useTheme,
-  ThemeScript
+  ThemeScript,
+  themeScriptSource,
+  useTheme
 };

package/dist/components/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, ThemeScript, useTheme } from './ThemeProvider.js';
+export type { ThemeMode, GlassMode, ThemeContextValue, ThemeProviderProps, ThemeScriptProps } from './ThemeProvider.js';

package/dist/components/ThemeProvider/index.js

@@ -1,10 +1,4 @@
-'use client';
-import {
-  ThemeProvider,
-  ThemeScript,
-  useTheme
-} from "../../chunk-ZBRRQHZG.js";
-import "../../chunk-NHUQLIHL.js";
+import { ThemeProvider, ThemeScript, useTheme } from "./ThemeProvider.js";
 export {
   ThemeProvider,
   ThemeScript,

package/dist/components/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface ThinkingIndicatorMessages {
+    thinking: string;
+}
+export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visible text. Pass `null` to hide it (it is still announced). @default messages.thinking */
+    label?: React.ReactNode;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /** Local overrides for this component's strings. */
+    messages?: Partial<ThinkingIndicatorMessages>;
+}
+/**
+ * Shows the assistant is working before tokens arrive: a primary-tinted shape
+ * morphing between a circle and a soft four-lobed squircle (.nx-morph), and a
+ * label with a decorative shimmer (.nx-shimmer). Reduced motion: both static.
+ */
+export declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/{chunk-VX56VQMF.js → components/ThinkingIndicator/ThinkingIndicator.js}

@@ -1,16 +1,10 @@
-'use client';
-import {
-  useNexubMessages
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/ThinkingIndicator/ThinkingIndicator.tsx
-import * as React from "react";
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-var fallbackMessages = { thinking: "Thinking" };
-var ThinkingIndicator = React.forwardRef(
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const fallbackMessages = { thinking: "Thinking" };
+const ThinkingIndicator = React.forwardRef(
   ({ label, size = "md", messages: messagesProp, className, ...props }, ref) => {
     const m = {
       ...fallbackMessages,
@@ -48,7 +42,6 @@ var ThinkingIndicator = React.forwardRef(
   }
 );
 ThinkingIndicator.displayName = "ThinkingIndicator";
-
 export {
   ThinkingIndicator
 };

package/dist/components/ThinkingIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ThinkingIndicator } from './ThinkingIndicator.js';
+export type { ThinkingIndicatorProps, ThinkingIndicatorMessages } from './ThinkingIndicator.js';

package/dist/components/ThinkingIndicator/index.js

@@ -1,9 +1,4 @@
-'use client';
-import {
-  ThinkingIndicator
-} from "../../chunk-VX56VQMF.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { ThinkingIndicator } from "./ThinkingIndicator.js";
 export {
   ThinkingIndicator
 };

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as RadixToast from '@radix-ui/react-toast';
+/** Swipe to dismiss toward the viewport's inline-end edge: right, or left in RTL. */
+declare function Provider({ swipeDirection, ...props }: RadixToast.ToastProviderProps): React.JSX.Element;
+declare namespace Provider {
+    var displayName: string;
+}
+export declare const Toast: {
+    Provider: typeof Provider;
+    Viewport: React.ForwardRefExoticComponent<RadixToast.ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
+    Root: React.ForwardRefExoticComponent<RadixToast.ToastProps & React.RefAttributes<HTMLLIElement>>;
+    Title: React.ForwardRefExoticComponent<RadixToast.ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<RadixToast.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+    Action: React.ForwardRefExoticComponent<RadixToast.ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Close: React.ForwardRefExoticComponent<RadixToast.ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/Toast/Toast.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadixToast from "@radix-ui/react-toast";
+import { cn } from "../../utils/cn.js";
+import { useLocale } from "../NexubProvider/NexubProvider.js";
+function Provider({ swipeDirection, ...props }) {
+  const { dir } = useLocale();
+  return /* @__PURE__ */ jsx(RadixToast.Provider, { swipeDirection: swipeDirection ?? (dir === "rtl" ? "left" : "right"), ...props });
+}
+Provider.displayName = "Toast.Provider";
+const Viewport = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Viewport,
+    {
+      ref,
+      className: cn(
+        "fixed top-0 end-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Viewport.displayName = "Toast.Viewport";
+const Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Root,
+    {
+      ref,
+      className: cn(
+        // Snackbar: the inverse surface stands out from any page, light or dark.
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+        "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
+        // Follow the finger (Radix's signed swipe offsets), snap back on cancel, leave from where it was let go.
+        "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+        // Enter/exit slide from the right edge, where the viewport sits.
+        "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "Toast.Root";
+const Title = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-title-sm", className), ...props })
+);
+Title.displayName = "Toast.Title";
+const Description = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Description,
+    {
+      ref,
+      className: cn("text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", className),
+      ...props
+    }
+  )
+);
+Description.displayName = "Toast.Description";
+const Action = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Action,
+    {
+      ref,
+      className: cn(
+        "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Action.displayName = "Toast.Action";
+const Close = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("nx-state-layer relative grid h-8 w-8 place-items-center rounded-full", className), ...props })
+);
+Close.displayName = "Toast.Close";
+const Toast = { Provider, Viewport, Root, Title, Description, Action, Close };
+export {
+  Toast
+};

package/dist/components/Toast/Toaster.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface ToasterProps {
+    /** Always show the toasts as a list instead of a collapsed stack. */
+    expand?: boolean;
+    /** How many toasts are visible at once; older ones are visually hidden. Default 3. */
+    visibleToasts?: number;
+}
+/**
+ * Sonner-style stack. Collapsed: the newest toast in front, older ones peek
+ * out below it, scaled down. Hovering or focusing the viewport fans them out
+ * into a list. Radix pauses every toast's timer while the viewport is hovered
+ * or focused — the same condition that expands the stack.
+ *
+ * Measured heights reach CSS as custom properties set through the CSSOM
+ * (--nx-toast-index / --nx-toast-offset per toast, --nx-front-height and
+ * --nx-stack-height on the viewport), never a style attribute (strict CSP).
+ */
+export declare function Toaster({ expand, visibleToasts }: ToasterProps): React.JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}

package/dist/{chunk-MQGBAWSJ.js → components/Toast/Toaster.js}

@@ -1,192 +1,34 @@
-'use client';
-import {
-  useIsomorphicLayoutEffect
-} from "./chunk-NHUQLIHL.js";
-import {
-  useLocale,
-  useNexubMessages
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/Toast/Toast.tsx
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixToast from "@radix-ui/react-toast";
-import { jsx } from "react/jsx-runtime";
-function Provider2({ swipeDirection, ...props }) {
-  const { dir } = useLocale();
-  return /* @__PURE__ */ jsx(RadixToast.Provider, { swipeDirection: swipeDirection ?? (dir === "rtl" ? "left" : "right"), ...props });
-}
-Provider2.displayName = "Toast.Provider";
-var Viewport2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixToast.Viewport,
-    {
-      ref,
-      className: cn(
-        "fixed top-0 end-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Viewport2.displayName = "Toast.Viewport";
-var Root2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixToast.Root,
-    {
-      ref,
-      className: cn(
-        // Snackbar: the inverse surface stands out from any page, light or dark.
-        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
-        "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
-        // Follow the finger (Radix's signed swipe offsets), snap back on cancel, leave from where it was let go.
-        "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
-        // Enter/exit slide from the right edge, where the viewport sits.
-        "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Root2.displayName = "Toast.Root";
-var Title2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-title-sm", className), ...props })
-);
-Title2.displayName = "Toast.Title";
-var Description2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixToast.Description,
-    {
-      ref,
-      className: cn("text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", className),
-      ...props
-    }
-  )
-);
-Description2.displayName = "Toast.Description";
-var Action2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixToast.Action,
-    {
-      ref,
-      className: cn(
-        "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Action2.displayName = "Toast.Action";
-var Close2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("nx-state-layer relative grid h-8 w-8 place-items-center rounded-full", className), ...props })
-);
-Close2.displayName = "Toast.Close";
-var Toast = { Provider: Provider2, Viewport: Viewport2, Root: Root2, Title: Title2, Description: Description2, Action: Action2, Close: Close2 };
-
-// src/components/Toast/Toaster.tsx
-import * as React2 from "react";
-import * as RadixToast2 from "@radix-ui/react-toast";
 import { X } from "@nexub/icons";
-
-// src/components/Toast/useToast.ts
-import { useState, useEffect } from "react";
-var g = typeof window !== "undefined" ? (() => {
-  const _g = globalThis;
-  _g.__nexub_toast_items ??= [];
-  _g.__nexub_toast_listeners ??= /* @__PURE__ */ new Set();
-  _g.__nexub_toast_counter ??= 0;
-  return _g;
-})() : { __nexub_toast_items: [], __nexub_toast_listeners: /* @__PURE__ */ new Set(), __nexub_toast_counter: 0 };
-function notify() {
-  g.__nexub_toast_listeners.forEach((l) => l([...g.__nexub_toast_items]));
-}
-function add(item) {
-  const id = String(++g.__nexub_toast_counter);
-  g.__nexub_toast_items = [...g.__nexub_toast_items, { ...item, id }];
-  notify();
-  return id;
-}
-function useToastStore() {
-  const [state, setState] = useState([...g.__nexub_toast_items]);
-  useEffect(() => {
-    g.__nexub_toast_listeners.add(setState);
-    return () => {
-      g.__nexub_toast_listeners.delete(setState);
-    };
-  }, []);
-  return state;
-}
-var closeFired = /* @__PURE__ */ new Set();
-function fireToastClose(item) {
-  if (closeFired.has(item.id)) return;
-  closeFired.add(item.id);
-  item.onClose?.();
-}
-function dismiss(id) {
-  const removed = id ? g.__nexub_toast_items.filter((i) => i.id === id) : g.__nexub_toast_items;
-  g.__nexub_toast_items = id ? g.__nexub_toast_items.filter((i) => i.id !== id) : [];
-  notify();
-  for (const item of removed) {
-    fireToastClose(item);
-    closeFired.delete(item.id);
-  }
-}
-function undoable(title, { onUndo, onCommit, undoLabel, description, duration }) {
-  let undone = false;
-  return add({
-    title,
-    tone: "neutral",
-    description,
-    duration,
-    undo: { label: undoLabel, onUndo: () => {
-      undone = true;
-      onUndo();
-    } },
-    onClose: () => {
-      if (!undone) onCommit?.();
-    }
-  });
-}
-var toast = {
-  success: (title, opts) => add({ title, tone: "success", ...opts }),
-  error: (title, opts) => add({ title, tone: "error", ...opts }),
-  info: (title, opts) => add({ title, tone: "info", ...opts }),
-  warning: (title, opts) => add({ title, tone: "warning", ...opts }),
-  custom: (title, opts) => add({ title, tone: "neutral", ...opts }),
-  /** A toast with an Undo action: Undo calls `onUndo`; any other close calls `onCommit`, once. */
-  undoable,
-  dismiss
-};
-
-// src/components/Toast/Toaster.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var toneMap = {
+import { cn } from "../../utils/cn.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { fireToastClose, toast, useToastStore } from "./useToast.js";
+const toneMap = {
   success: "border-s-4 border-[var(--color-success)]",
   error: "border-s-4 border-[var(--color-error)]",
   warning: "border-s-4 border-[var(--color-warning)]",
   info: "border-s-4 border-[var(--color-info)]",
   neutral: ""
 };
-var GAP = 8;
+const GAP = 8;
 function Toaster({ expand = false, visibleToasts = 3 }) {
   const toasts = useToastStore();
   const messages = useNexubMessages();
   const { dir } = useLocale();
-  const [closed, setClosed] = React2.useState(() => /* @__PURE__ */ new Set());
-  const [hovered, setHovered] = React2.useState(false);
-  const [focused, setFocused] = React2.useState(false);
+  const [closed, setClosed] = React.useState(() => /* @__PURE__ */ new Set());
+  const [hovered, setHovered] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
   const order = toasts.filter((t) => !closed.has(t.id)).map((t) => t.id).reverse();
   const expanded = expand || order.length > 0 && (hovered || focused);
-  const viewportRef = React2.useRef(null);
-  const heights = React2.useRef(/* @__PURE__ */ new Map());
-  const state = React2.useRef({ order, expanded, visibleToasts });
+  const viewportRef = React.useRef(null);
+  const heights = React.useRef(/* @__PURE__ */ new Map());
+  const state = React.useRef({ order, expanded, visibleToasts });
   state.current = { order, expanded, visibleToasts };
-  const layout = React2.useCallback(() => {
+  const layout = React.useCallback(() => {
     const ol = viewportRef.current;
     if (!ol) return;
     const { order: order2, expanded: expanded2, visibleToasts: visibleToasts2 } = state.current;
@@ -239,18 +81,18 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
       region.removeEventListener("focusout", focusOut);
     };
   }, [layout]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (order.length === 0) {
       setHovered(false);
       setFocused(false);
     }
   }, [order.length]);
-  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: dir === "rtl" ? "left" : "right", children: [
+  return /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: dir === "rtl" ? "left" : "right", children: [
     toasts.map((t) => {
       const i = order.indexOf(t.id);
       const action = t.action ?? (t.undo && { label: t.undo.label ?? messages.undo, onClick: t.undo.onUndo });
       return /* @__PURE__ */ jsxs(
-        RadixToast2.Root,
+        RadixToast.Root,
         {
           "data-toast-id": t.id,
           "data-front": i === -1 ? void 0 : i === 0,
@@ -292,11 +134,11 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
           duration: t.duration ?? 5e3,
           children: [
             /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-              /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-title-sm", children: t.title }),
-              t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", children: t.description })
+              /* @__PURE__ */ jsx(RadixToast.Title, { className: "text-title-sm", children: t.title }),
+              t.description && /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", children: t.description })
             ] }),
-            action && /* @__PURE__ */ jsx2(
-              RadixToast2.Action,
+            action && /* @__PURE__ */ jsx(
+              RadixToast.Action,
               {
                 altText: action.label,
                 onClick: action.onClick,
@@ -304,17 +146,17 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
                 children: action.label
               }
             ),
-            /* @__PURE__ */ jsxs(RadixToast2.Close, { className: "nx-state-layer relative grid h-8 w-8 place-items-center rounded-full transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: [
-              /* @__PURE__ */ jsx2(X, { size: "sm", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx2("span", { className: "sr-only", children: messages.close })
+            /* @__PURE__ */ jsxs(RadixToast.Close, { className: "nx-state-layer relative grid h-8 w-8 place-items-center rounded-full transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: [
+              /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.close })
             ] })
           ]
         },
         t.id
       );
     }),
-    /* @__PURE__ */ jsx2(
-      RadixToast2.Viewport,
+    /* @__PURE__ */ jsx(
+      RadixToast.Viewport,
       {
         ref: viewportRef,
         label: messages.notifications,
@@ -330,10 +172,6 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
   ] });
 }
 Toaster.displayName = "Toaster";
-
 export {
-  Toast,
-  useToastStore,
-  toast,
   Toaster
 };

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,5 @@
+export { Toast } from './Toast.js';
+export { Toaster } from './Toaster.js';
+export type { ToasterProps } from './Toaster.js';
+export { toast, useToastStore } from './useToast.js';
+export type { ToastItem, ToastTone, UndoableToastOptions } from './useToast.js';

package/dist/components/Toast/index.js

@@ -1,13 +1,6 @@
-'use client';
-import {
-  Toast,
-  Toaster,
-  toast,
-  useToastStore
-} from "../../chunk-MQGBAWSJ.js";
-import "../../chunk-NHUQLIHL.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { Toast } from "./Toast.js";
+import { Toaster } from "./Toaster.js";
+import { toast, useToastStore } from "./useToast.js";
 export {
   Toast,
   Toaster,