@cladd-ui/react 0.0.1 → 0.0.2

package/components/SurfaceCutContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+export const SurfaceCutContent = (props) => {
+    const { children, fullHeight = true, component = 'div', className = '', ref, ...rest } = props;
+    const Component = component;
+    return (_jsx(Component, { ref: ref, className: cn(`relative`, fullHeight && 'h-full', className), ...rest, children: children }));
+};
+//# sourceMappingURL=SurfaceCutContent.js.map

package/components/SurfaceCutContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceCutContent.js","sourceRoot":"","sources":["../../../src/components/SurfaceCutContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAgC,EAChC,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,SAAwB,CAAC;IAC3C,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,UAAU,IAAI,QAAQ,EAAE,SAAS,CAAC,KACxD,IAAI,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC"}

package/components/TextArea.d.ts

@@ -0,0 +1,61 @@
+import { ElementType, ReactNode, Ref, FocusEvent, KeyboardEvent, FormEvent, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type TextAreaSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface TextAreaOwnProps<C extends ElementType = 'div'> {
+    /** Polymorphic wrapper element. Defaults to `'div'`. The editable area itself is always a `contenteditable` `<div>`. */
+    component?: C;
+    /** Forwarded to the wrapper element. */
+    ref?: Ref<HTMLElement>;
+    /** Controlled value. Synced into the editable `innerText` on change (see `updateContentOnChange`). */
+    value?: string;
+    placeholder?: string;
+    /** Visually dim the textarea and remove `contenteditable`. */
+    disabled?: boolean;
+    /** Make the textarea non-editable but still selectable. */
+    readOnly?: boolean;
+    /** Apply pill-style corners. Default `false` - uses size-specific radii. */
+    rounded?: boolean;
+    size?: TextAreaSize;
+    /** Fires on every input event. First arg is the new text, second is the raw event. */
+    onChange?: (value: string, event?: FormEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+    /** Accent color token. Drives the focus ring and `infoMessage` colors. Default: theme accent. */
+    color?: Color;
+    /** Slot rendered before the editable area. */
+    prefix?: ReactNode;
+    /** Slot rendered after the editable area. */
+    suffix?: ReactNode;
+    /**
+     * When `true` (default), syncs the editable `innerText` whenever `value` changes from
+     * the outside. Set to `false` for performance-sensitive editors that manage their own
+     * DOM (e.g. rich-text editors) - otherwise external `value` updates would stomp on
+     * caret position and selection.
+     */
+    updateContentOnChange?: boolean;
+    /** Extra classes for the outer wrapper. */
+    className?: string;
+    /** Extra classes for the inner content row (where prefix/editor/suffix live). */
+    contentClassName?: string;
+    /** Extra classes for the editable `[contenteditable]` `<div>`. */
+    inputClassName?: string;
+    /** Extra classes for the placeholder layer. */
+    placeholderClassName?: string;
+    /** Validity state. Default `true`. When `false`, switches the focus ring to red and shows `errorMessage`. */
+    valid?: boolean;
+    /** Floating label shown above the editor on focus. Hidden when `valid === false` or `readOnly`. */
+    infoMessage?: ReactNode;
+    /** Floating error label. Always visible when `valid === false`. */
+    errorMessage?: ReactNode;
+    /** Icon node rendered absolutely positioned on the left. */
+    icon?: ReactNode;
+    /** Extra classes applied to the inner `SurfaceCut`. */
+    surfaceClassName?: string;
+    /** Reserved - currently not applied in the rendered output. */
+    inputPadding?: string;
+}
+export type TextAreaProps<C extends ElementType = 'div'> = TextAreaOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof TextAreaOwnProps<C>>;
+export declare const TextArea: <C extends ElementType = "div">(props: TextAreaProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextArea.d.ts.map

package/components/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,GAAG,EACH,UAAU,EACV,aAAa,EACb,SAAS,EAGT,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE7D,UAAU,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACtD,wHAAwH;IACxH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjD,iGAAiG;IACjG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6GAA6G;IAC7G,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACpD,OAAO,aAAa,CAAC,CAAC,CAAC,4CA2OxB,CAAC"}

package/components/TextArea.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+import { FocusableLayer } from './FocusableLayer';
+import { SurfaceCut } from './SurfaceCut';
+import { SurfaceCutContent } from './SurfaceCutContent';
+export const TextArea = (props) => {
+    const accentColor = useAccentColor();
+    const { component = 'div', ref: externalRef, value, placeholder, disabled = false, readOnly, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, color = accentColor, prefix, suffix, updateContentOnChange = true, className, contentClassName, inputClassName, placeholderClassName = '', valid = true, infoMessage, errorMessage, icon, surfaceClassName, } = props;
+    const fontSizes = {
+        sm: 'text-xs',
+        md: 'text-xs',
+        lg: 'text-xs',
+        xl: 'text-xs',
+        '2xl': 'text-xs',
+    };
+    const iconWrapClasses = {
+        sm: 'left-2.5 [&>svg]:size-4 top-1',
+        md: 'left-2.5 [&>svg]:size-4 top-1.5',
+        lg: 'left-2.5 [&>svg]:size-4 top-2.5',
+        xl: 'left-2.5 [&>svg]:size-4 top-3',
+        '2xl': 'left-3.5 [&>svg]:size-4 top-4',
+    };
+    const inputPaddingNoIcon = {
+        sm: 'px-2.5',
+        md: 'px-2.5',
+        lg: 'px-2.5',
+        xl: 'px-2.5',
+        '2xl': 'px-3.5',
+    };
+    const inputPaddingVertical = {
+        sm: 'py-1',
+        md: 'py-1.5',
+        lg: 'py-2.5',
+        xl: 'py-3',
+        '2xl': 'py-4',
+    };
+    const inputPaddingWithIcon = {
+        sm: 'pl-8.5 pr-2',
+        md: 'pl-8.5 pr-2',
+        lg: 'pl-8.5 pr-3',
+        xl: 'pl-8.5 pr-3',
+        '2xl': 'pl-9.5 pr-4',
+    };
+    const roundedFullSizes = {
+        sm: 'rounded-[12px]',
+        md: 'rounded-[14px]',
+        lg: 'rounded-[18px]',
+        xl: 'rounded-[20px]',
+        '2xl': 'rounded-[24px]',
+    };
+    const roundedSizes = {
+        sm: 'rounded-md',
+        md: 'rounded-lg',
+        lg: 'rounded-[10px]',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-xl',
+    };
+    const heights = {
+        sm: 'min-h-6',
+        md: 'min-h-7',
+        lg: 'min-h-9',
+        xl: 'min-h-10',
+        '2xl': 'min-h-12',
+    };
+    const inputPadding = cn(inputPaddingVertical[size], icon ? inputPaddingWithIcon[size] : inputPaddingNoIcon[size]);
+    const elRef = useRef(null);
+    const inputElRef = useRef(null);
+    const [text, setText] = useState();
+    const onPaste = (e) => {
+        if (e.clipboardData && e.clipboardData.getData) {
+            const text = e.clipboardData.getData('text/plain');
+            e.preventDefault();
+            document.execCommand('insertText', false, text);
+        }
+    };
+    const onInput = (e) => {
+        const target = e.target;
+        setText(target.innerText);
+        onChange(target.innerText, e);
+    };
+    useEffect(() => {
+        if (text !== value) {
+            setText(value);
+            if (updateContentOnChange && inputElRef.current) {
+                inputElRef.current.innerText = value || '';
+            }
+        }
+    }, [value]);
+    const Component = component;
+    return (_jsxs(Component, { className: cn('input group/textarea relative', disabled && 'opacity-50', className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(rounded ? roundedFullSizes[size] : roundedSizes[size], valid === false && 'color-red'), force: valid === false, color: valid === false ? 'red' : color, group: "textarea" })), _jsx(SurfaceCut, { className: cn(rounded ? roundedFullSizes[size] : roundedSizes[size], surfaceClassName), hoverable: !disabled && !readOnly, onContextMenuCapture: (e) => e.preventDefault(), ref: (el) => {
+                    elRef.current = el;
+                    if (externalRef) {
+                        if (typeof externalRef === 'function')
+                            externalRef(el);
+                        else
+                            externalRef.current = el;
+                    }
+                }, children: _jsxs(SurfaceCutContent, { className: cn('flex items-center', contentClassName), children: [prefix, icon && (_jsx("div", { className: cn('pointer-events-none absolute', iconWrapClasses[size]), children: icon })), _jsxs("div", { className: "relative w-full", children: [_jsx("div", { contentEditable: !disabled && !readOnly, ref: inputElRef, className: cn(inputPadding, heights[size], roundedSizes, fontSizes[size], 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-on-surface-darker', inputClassName), onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onInput: onInput }), !text && placeholder && (_jsx("div", { className: cn('pointer-events-none absolute top-0 left-0 h-full w-full text-on-surface-darker select-none', fontSizes[size], inputPadding, placeholderClassName), children: placeholder }))] }), suffix] }) }), infoMessage && valid !== false && !readOnly && (_jsx("div", { className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-1 rounded-lg bg-primary px-2 py-1.5 text-[10px] leading-none font-semibold text-on-primary opacity-0 duration-200 group-has-[[contenteditable]:focus]/textarea:-translate-y-1/2 group-has-[[contenteditable]:focus]/textarea:opacity-100', `color-${color}`), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-sm bg-primary px-1 py-0.5 text-[10px] leading-none font-semibold text-on-primary opacity-100 duration-200', `color-red`), children: errorMessage }))] }));
+};
+//# sourceMappingURL=TextArea.js.map

package/components/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"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"}

package/components/ThemeContext.d.ts

@@ -0,0 +1,23 @@
+import { Color } from '../types';
+type ThemeContextValue = {
+    theme: 'dark' | 'light';
+    accentColor: Color;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextValue>;
+/**
+ * Provides `{ theme, accentColor }` to the rest of the tree via `ThemeContext`.
+ * Most apps use `UIProvider` instead, which wraps this together with the dialog/toast portals.
+ *
+ * Components read these values via `useTheme()` and `useAccentColor()` to pick:
+ * - per-theme defaults (Dialog/Popover/Tooltip variant, outline, surfaceLevel),
+ * - the default `color` for interactive components (Button/Toggle/Checkbox/Radio default to `accentColor`).
+ */
+export declare const ThemeProvider: ({ children, theme, accentColor, }: {
+    children: React.ReactNode;
+    /** Color scheme to expose to descendants. */
+    theme: "dark" | "light";
+    /** App-wide accent color token used as the default for interactive components. */
+    accentColor: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/components/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,EAAE,KAAK,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,YAAY,4CAGvB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,mCAI3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,kFAAkF;IAClF,WAAW,EAAE,MAAM,CAAC;CACrB,4CAMA,CAAC"}

package/components/ThemeContext.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const ThemeContext = createContext({
+    theme: 'dark',
+    accentColor: 'brand',
+});
+/**
+ * Provides `{ theme, accentColor }` to the rest of the tree via `ThemeContext`.
+ * Most apps use `UIProvider` instead, which wraps this together with the dialog/toast portals.
+ *
+ * Components read these values via `useTheme()` and `useAccentColor()` to pick:
+ * - per-theme defaults (Dialog/Popover/Tooltip variant, outline, surfaceLevel),
+ * - the default `color` for interactive components (Button/Toggle/Checkbox/Radio default to `accentColor`).
+ */
+export const ThemeProvider = ({ children, theme, accentColor, }) => {
+    return (_jsx(ThemeContext.Provider, { value: { theme, accentColor }, children: children }));
+};
+//# sourceMappingURL=ThemeContext.js.map

package/components/ThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../../src/components/ThemeContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB;IAC3D,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,OAAO;CACrB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,GAOZ,EAAE,EAAE;IACH,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YACjD,QAAQ,GACa,CACzB,CAAC;AACJ,CAAC,CAAC"}

package/components/Toast.d.ts

@@ -0,0 +1,89 @@
+import { ElementType, ReactNode, Ref } from 'react';
+import { Color } from '../types';
+import { SurfaceVariant } from './Surface';
+/**
+ * State container for the `Toast` + `ToastTrigger` + `Toast` compound. Less commonly used than
+ * the imperative `useToasts()` portal API - prefer the portal for app-wide notifications and
+ * use this only when you need a toast tied to a specific trigger element in JSX.
+ */
+export declare const ToastRoot: ({ children, defaultOpen, open: openProp, onOpenChange, }: {
+    children: ReactNode;
+    /** Initial open state (uncontrolled). Default `false`. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, internal state is bypassed. */
+    open?: boolean;
+    /** Fires whenever the open state should change (trigger click, close button, auto-timeout). */
+    onOpenChange?: (open: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps a single child element to act as the toast trigger. **Clones** the child to attach
+ * an `onClick` handler that toggles the surrounding `ToastRoot`'s open state (composed with
+ * any existing `onClick` on the child).
+ *
+ * No-ops (renders the child as-is) when used outside a `ToastRoot`.
+ */
+export declare const ToastTrigger: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps a single child element to close the surrounding toast when clicked. **Clones** the
+ * child to attach an `onClick` handler that flips the surrounding `ToastRoot`'s open state
+ * to `false` (composed with any existing `onClick` on the child).
+ *
+ * ```tsx
+ * <ToastRoot>
+ *   <ToastTrigger><Button>Notify</Button></ToastTrigger>
+ *   <Toast title="...">
+ *     <ToastClose><Button>Dismiss</Button></ToastClose>
+ *   </Toast>
+ * </ToastRoot>
+ * ```
+ *
+ * No-ops (renders the child as-is) when used outside a `ToastRoot`.
+ */
+export declare const ToastClose: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ToastProps {
+    /** Controlled open state. When omitted, falls back to the surrounding `ToastRoot` state, then `false`. */
+    open?: boolean;
+    /** Fires whenever the open state should change (close button, auto-timeout, etc.). */
+    onOpenChange?: (open: boolean) => void;
+    /** Portal target selector. Default `'#app, #__next, #root'`. */
+    root?: string;
+    /** Fires after the close transition completes - use for unmount or post-dismiss cleanup. */
+    onClosed?: () => void;
+    /** Extra classes applied to the toast root `Surface`. */
+    className?: string;
+    /** Title slot. Rendered as a bold line above `text`. */
+    title?: ReactNode;
+    /** Body text slot. Rendered as a smaller line under `title`. */
+    text?: ReactNode;
+    /** Icon node rendered before the text content. Pre-rendered. */
+    icon?: ReactNode;
+    /** Icon component rendered before the text content. Instantiated as `<IconComponent />` (no props). */
+    iconComponent?: ElementType<any>;
+    /** Stop click propagation on the toast surface. Use when the toast renders inside a clickable parent. */
+    stopPropagationOnClick?: boolean;
+    /** Render the auto close button on the right. Default `true`. */
+    closeButton?: boolean;
+    /**
+     * Forwarded to the underlying `Surface` as `level`. Default depends on theme:
+     * `3` for dark theme, `1` for light theme - keeps the toast visually elevated above page content.
+     */
+    surfaceLevel?: string | number;
+    /** Default `'neutral'`. */
+    color?: Color;
+    /** Surface variant. Default `'gradient'`. */
+    variant?: SurfaceVariant;
+    /** Outline ring on the toast surface. Default `true`. */
+    outline?: boolean;
+    /** Auto-close after this many ms. Pass `0` to disable auto-close. Default `5000`. */
+    timeout?: number;
+    /** Forwarded to the toast surface root. */
+    ref?: Ref<HTMLDivElement>;
+    /** Custom content rendered after the title/text block, before the close button. */
+    children?: ReactNode;
+}
+export declare const Toast: ({ open, onOpenChange, ...rest }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/components/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,GAAG,EAGJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AASpD;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,0DAKvB;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+FAA+F;IAC/F,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAeA,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAajE,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAa/D,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uGAAuG;IACvG,aAAa,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACjC,yGAAyG;IACzG,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA0HD,eAAO,MAAM,KAAK,GAAI,iCAAiC,UAAU,4CAShE,CAAC"}

package/components/Toast.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, useContext, useState, useEffect, useRef, } from 'react';
+import { createPortal } from 'react-dom';
+import { useModalUtils } from '../hooks/use-modal-utils';
+import { useTheme } from '../hooks/use-theme';
+import { cn } from '../shared/cn';
+import { Button } from './Button';
+import { CloseIcon } from './icons/CloseIcon';
+import { ModalController } from './ModalController';
+import { Surface } from './Surface';
+const ToastRootContext = createContext(null);
+/**
+ * State container for the `Toast` + `ToastTrigger` + `Toast` compound. Less commonly used than
+ * the imperative `useToasts()` portal API - prefer the portal for app-wide notifications and
+ * use this only when you need a toast tied to a specific trigger element in JSX.
+ */
+export const ToastRoot = ({ children, defaultOpen = false, open: openProp, onOpenChange, }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : internalOpen;
+    const setOpen = (newOpen) => {
+        if (!isControlled)
+            setInternalOpen(newOpen);
+        onOpenChange?.(newOpen);
+    };
+    return (_jsx(ToastRootContext.Provider, { value: { open, setOpen }, children: children }));
+};
+/**
+ * Wraps a single child element to act as the toast trigger. **Clones** the child to attach
+ * an `onClick` handler that toggles the surrounding `ToastRoot`'s open state (composed with
+ * any existing `onClick` on the child).
+ *
+ * No-ops (renders the child as-is) when used outside a `ToastRoot`.
+ */
+export const ToastTrigger = ({ children }) => {
+    const ctx = useContext(ToastRootContext);
+    if (!ctx)
+        return _jsx(_Fragment, { children: children });
+    const child = children;
+    const originalOnClick = child?.props?.onClick;
+    const onClick = (e) => {
+        if (originalOnClick)
+            originalOnClick(e);
+        ctx.setOpen(!ctx.open);
+    };
+    return cloneElement(child, { onClick });
+};
+/**
+ * Wraps a single child element to close the surrounding toast when clicked. **Clones** the
+ * child to attach an `onClick` handler that flips the surrounding `ToastRoot`'s open state
+ * to `false` (composed with any existing `onClick` on the child).
+ *
+ * ```tsx
+ * <ToastRoot>
+ *   <ToastTrigger><Button>Notify</Button></ToastTrigger>
+ *   <Toast title="...">
+ *     <ToastClose><Button>Dismiss</Button></ToastClose>
+ *   </Toast>
+ * </ToastRoot>
+ * ```
+ *
+ * No-ops (renders the child as-is) when used outside a `ToastRoot`.
+ */
+export const ToastClose = ({ children }) => {
+    const ctx = useContext(ToastRootContext);
+    if (!ctx)
+        return _jsx(_Fragment, { children: children });
+    const child = children;
+    const originalOnClick = child?.props?.onClick;
+    const onClick = (e) => {
+        if (originalOnClick)
+            originalOnClick(e);
+        ctx.setOpen(false);
+    };
+    return cloneElement(child, { onClick });
+};
+const ToastInner = (props) => {
+    const theme = useTheme();
+    const { root = '#app, #__next, #root', phase = 'closed', onPhaseChange = () => { }, onClosed = () => { }, className = '', title, text, stopPropagationOnClick, closeButton = true, color = 'neutral', icon, iconComponent, surfaceLevel = theme === 'dark' ? 3 : 1, variant = 'gradient', outline = true, timeout = 5000, ref, children, } = props;
+    const elRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const { opened, open, close } = useModalUtils({
+        phase,
+        onPhaseChange,
+        onClosed,
+        closeOnEscape: false,
+        transitionEndElRef: elRef,
+    });
+    useEffect(() => {
+        open();
+        if (timeout && timeout > 0) {
+            timeoutRef.current = setTimeout(() => {
+                close();
+            }, timeout);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const IconComponent = iconComponent;
+    const content = (_jsxs(Surface, { className: cn(`toast fixed right-safe-4 bottom-safe-4 z-50 max-w-full origin-bottom rounded-3xl`, !opened &&
+            cn('translate-y-4 scale-75 opacity-0 duration-200 ease-out!'), opened &&
+            'scale-100 opacity-100 duration-500 ease-[cubic-bezier(0,1,0.2,1.1)] has-[+.toast+.toast+.toast:not(.toast-closing)]:opacity-0 has-[+.toast+.toast:not(.toast-closing)]:-translate-y-8 has-[+.toast+.toast:not(.toast-closing)]:scale-80 has-[+.toast:not(.toast-closing)]:origin-top has-[+.toast:not(.toast-closing)]:-translate-y-4 has-[+.toast:not(.toast-closing)]:scale-90', phase === 'closing' && 'toast-closing', className), ref: (el) => {
+            elRef.current = el;
+            if (typeof ref === 'function') {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }, level: surfaceLevel, variant: variant, outline: outline, color: color, contentClassName: "flex items-center gap-4 pl-4 pr-2 py-2", onClick: (e) => {
+            if (stopPropagationOnClick) {
+                e.stopPropagation();
+            }
+        }, children: [icon ||
+                (iconComponent && (_jsxs("div", { className: "flex shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", children: [icon, iconComponent && _jsx(IconComponent, {})] }))), (title || text) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && _jsx("div", { className: "text-sm font-semibold", children: title }), text && _jsx("div", { className: "text-xs leading-relaxed", children: text })] })), children, closeButton && (_jsx("div", { className: "ml-auto", children: _jsx(Button, { rounded: true, outline: false, variant: "transparent", onClick: () => {
+                        close();
+                    }, children: _jsx(CloseIcon, {}) }) }))] }));
+    return root ? createPortal(content, document.querySelector(root)) : content;
+};
+export const Toast = ({ open, onOpenChange, ...rest }) => {
+    const ctx = useContext(ToastRootContext);
+    const effectiveOpen = open ?? ctx?.open ?? false;
+    const effectiveOnOpenChange = onOpenChange ?? ctx?.setOpen ?? (() => { });
+    return (_jsx(ModalController, { open: effectiveOpen, onOpenChange: effectiveOnOpenChange, children: _jsx(ToastInner, { ...rest }) }));
+};
+//# sourceMappingURL=Toast.js.map

package/components/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast.tsx"],"names":[],"mappings":"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"}

package/components/ToastsPortal.d.ts

@@ -0,0 +1,2 @@
+export declare function ToastsPortal(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ToastsPortal.d.ts.map

package/components/ToastsPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/ToastsPortal.tsx"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,mDA+B3B"}

package/components/ToastsPortal.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Toast } from './Toast';
+import { useToastsPortalContext } from './ToastsPortalContext';
+export function ToastsPortal() {
+    const { data, state, setState, setData } = useToastsPortalContext();
+    if (!data)
+        return null;
+    return (_jsx(_Fragment, { children: data.map((toast) => (_jsx(Toast, { open: state[toast.id], onOpenChange: (newState) => setState({ ...state, [toast.id]: newState }), title: toast.title, text: toast.text, closeButton: toast.closeButton, icon: toast.icon, iconComponent: toast.iconComponent, color: toast.color, timeout: toast.timeout, className: toast.className, onClosed: () => {
+                if (toast.removed)
+                    return;
+                toast.removed = true;
+                data.splice(data.indexOf(toast), 1);
+                setData([...data]);
+                toast.onClosed?.(false);
+            } }, toast.id))) }));
+}
+//# sourceMappingURL=ToastsPortal.js.map

package/components/ToastsPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsPortal.js","sourceRoot":"","sources":["../../../src/components/ToastsPortal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,UAAU,YAAY;IAC1B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,4BACG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,KAAK,IACJ,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,EACrB,YAAY,EAAE,CAAC,QAAQ,EAAE,EAAE,CACzB,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAG9C,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,KAAK,CAAC,OAAO;oBAAE,OAAO;gBAC1B,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;gBACnB,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,IAfI,KAAK,CAAC,EAAE,CAgBb,CACH,CAAC,GACD,CACJ,CAAC;AACJ,CAAC"}

package/components/ToastsPortalContext.d.ts

@@ -0,0 +1,45 @@
+import { Color } from '../types';
+/**
+ * Shape of a queued toast in the imperative toast portal. Mirrors `ToastProps` but adds an
+ * `id` (used as React key + lifecycle handle) and an internal `removed` flag.
+ */
+export type ToastsPortalData = {
+    /** Stable identifier - also used as the React key when rendering the toast list. */
+    id: string;
+    /** Toast title (bold line). */
+    title: string;
+    /** Toast body text. */
+    text: string | React.ReactNode;
+    /** Render the auto close button. Default `true` (in `Toast`). */
+    closeButton?: boolean;
+    /** Icon node rendered before the text content. */
+    icon?: React.ReactNode;
+    /** Icon component instantiated as `<IconComponent />` (no props). */
+    iconComponent?: React.ElementType<any>;
+    /** Accent color token. */
+    color?: Color;
+    /** Internal flag set after `onClosed` fires once - prevents double-removal from the queue. */
+    removed?: boolean;
+    /** Auto-close timeout in ms (`0` disables). */
+    timeout?: number;
+    /** Extra classes for the toast surface. */
+    className?: string;
+    /** Fires after the close transition completes. */
+    onClosed?: (closed: boolean) => void;
+};
+export declare const ToastsPortalContext: import("react").Context<{
+    data: ToastsPortalData[];
+    setData: React.Dispatch<React.SetStateAction<ToastsPortalData[]>>;
+    state: Record<string, boolean>;
+    setState: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+}>;
+export declare const ToastsPortalProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useToastsPortalContext: () => {
+    data: ToastsPortalData[];
+    setData: React.Dispatch<React.SetStateAction<ToastsPortalData[]>>;
+    state: Record<string, boolean>;
+    setState: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+};
+//# sourceMappingURL=ToastsPortalContext.d.ts.map

package/components/ToastsPortalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsPortalContext.d.ts","sourceRoot":"","sources":["../../../src/components/ToastsPortalContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACvC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8FAA8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,mBAAmB;UACxB,gBAAgB,EAAE;aACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC;WAC1D,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cACpB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;EAMvE,CAAC;AAEH,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAQA,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAzB3B,gBAAgB,EAAE;aACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC;WAC1D,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cACpB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAwBxE,CAAC"}

package/components/ToastsPortalContext.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+export const ToastsPortalContext = createContext({
+    data: [],
+    setData: () => { },
+    state: {},
+    setState: () => { },
+});
+export const ToastsPortalProvider = ({ children, }) => {
+    const [data, setData] = useState([]);
+    const [state, setState] = useState({});
+    return (_jsx(ToastsPortalContext.Provider, { value: { data, setData, state, setState }, children: children }));
+};
+export const useToastsPortalContext = () => {
+    return useContext(ToastsPortalContext);
+};
+//# sourceMappingURL=ToastsPortalContext.js.map

package/components/ToastsPortalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastsPortalContext.js","sourceRoot":"","sources":["../../../src/components/ToastsPortalContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAiC5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAK7C;IACD,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAChE,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YACpE,QAAQ,GACoB,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,OAAO,UAAU,CAAC,mBAAmB,CAAC,CAAC;AACzC,CAAC,CAAC"}