@wallarm-org/design-system 0.1.0

package/dist/components/Text/Text.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const textVariants = cva('font-sans-display break-words', {
+    variants: {
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-base',
+            xl: 'text-lg leading-xl'
+        },
+        weight: {
+            light: 'font-light',
+            regular: 'font-normal',
+            medium: 'font-medium',
+            bold: 'font-bold'
+        },
+        color: {
+            primary: 'text-text-primary',
+            'primary-alt': 'text-text-primary-alt',
+            secondary: 'text-text-secondary',
+            'secondary-alt': 'text-text-secondary-alt',
+            danger: 'text-text-danger',
+            inherit: 'text-inherit'
+        },
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right'
+        },
+        grow: {
+            true: 'flex-1 w-full'
+        },
+        truncate: {
+            true: 'truncate',
+            false: 'whitespace-pre-wrap'
+        }
+    }
+});
+const Text = ({ size = 'lg', weight = 'regular', color = 'inherit', truncate = false, asChild = false, grow = false, align, lineClamp, ...props })=>{
+    const Comp = asChild ? Slot : 'p';
+    const lineClampClass = lineClamp ? `line-clamp-${lineClamp}` : '';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(textVariants({
+            size,
+            weight,
+            color,
+            truncate,
+            align,
+            grow
+        }), lineClampClass)
+    });
+};
+Text.displayName = 'Text';
+export { Text };

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

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/dist/components/Text/index.js

@@ -0,0 +1,2 @@
+import { Text } from "./Text.js";
+export { Text };

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,14 @@
+import type { FC, Ref, TextareaHTMLAttributes } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { inputVariants } from '../Input';
+declare const textareaVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextareaNativeProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'>;
+type TextareaVariantsProps = VariantProps<typeof textareaVariants>;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+export type TextareaProps = TextareaNativeProps & TextareaVariantsProps & InputVariantsProps & {
+    ref?: Ref<HTMLTextAreaElement>;
+};
+export declare const Textarea: FC<TextareaProps>;
+export {};

package/dist/components/Textarea/Textarea.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Textarea/Textarea.figma.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Textarea } from "./Textarea.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=106-126403';
+code_connect.connect(Textarea, figmaNodeUrl, {
+    props: {
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'default'
+        }),
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder')
+    },
+    example: ({ size, placeholder })=>/*#__PURE__*/ jsx(Textarea, {
+            size: size,
+            placeholder: placeholder
+        })
+});
+code_connect.connect(Textarea, figmaNodeUrl, {
+    props: {
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'default'
+        }),
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder')
+    },
+    variant: {
+        Error: true
+    },
+    example: ({ size, placeholder })=>/*#__PURE__*/ jsx(Textarea, {
+            size: size,
+            placeholder: placeholder,
+            error: true
+        })
+});
+code_connect.connect(Textarea, figmaNodeUrl, {
+    props: {
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'default'
+        }),
+        state: code_connect["enum"]('State', {
+            Disabled: 'disabled'
+        }),
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder')
+    },
+    variant: {
+        State: 'Disabled'
+    },
+    example: ({ size, placeholder, error })=>/*#__PURE__*/ jsx(Textarea, {
+            size: size,
+            placeholder: placeholder,
+            error: error,
+            disabled: true
+        })
+});

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { mergeProps } from "@ark-ui/react/utils";
+import { cva } from "class-variance-authority";
+import { SvgIcon } from "../../icons/SvgIcon.js";
+import { cn } from "../../utils/cn.js";
+import { inputVariants } from "../Input/index.js";
+const textareaVariants = cva('min-h-[60px]', {
+    variants: {
+        size: {
+            small: 'py-0 min-h-[60px]',
+            medium: 'py-6 min-h-[72px]',
+            default: 'py-8 min-h-[76px]'
+        }
+    }
+});
+const Textarea = ({ error = false, disabled = false, size = 'default', ...props })=>{
+    const field = useFieldContext();
+    const mergedProps = mergeProps(field?.getTextareaProps());
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative",
+        children: [
+            /*#__PURE__*/ jsx("textarea", {
+                ...mergedProps,
+                ...props,
+                className: cn(inputVariants({
+                    error
+                }), textareaVariants({
+                    size
+                })),
+                disabled: disabled,
+                "aria-invalid": Boolean(error),
+                "aria-disabled": disabled
+            }),
+            /*#__PURE__*/ jsx(SvgIcon, {
+                className: "w-12 h-12 absolute bottom-0 right-0 text-icon-secondary pointer-events-none",
+                viewBox: "0 0 12 12",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M6 8L8 6M8 3L3 8",
+                    stroke: "currentColor",
+                    strokeLinecap: "round"
+                })
+            })
+        ]
+    });
+};
+Textarea.displayName = 'Textarea';
+export { Textarea };

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

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from './Textarea';

package/dist/components/Textarea/index.js

@@ -0,0 +1,2 @@
+import { Textarea } from "./Textarea.js";
+export { Textarea };

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

@@ -0,0 +1,9 @@
+import { type FC, type ReactNode } from 'react';
+type Theme = 'dark' | 'light' | 'system';
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}
+export declare const ThemeProvider: FC<ThemeProviderProps>;
+export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ThemeProviderContext } from "./ThemeProviderContext.js";
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'wasd-theme', ...props })=>{
+    const [theme, setTheme] = useState(()=>localStorage.getItem(storageKey) || defaultTheme);
+    useEffect(()=>{
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+    }, [
+        theme
+    ]);
+    const value = useMemo(()=>({
+            theme,
+            setTheme: (theme)=>{
+                localStorage.setItem(storageKey, theme);
+                setTheme(theme);
+            }
+        }), [
+        theme,
+        storageKey
+    ]);
+    return /*#__PURE__*/ jsx(ThemeProviderContext.Provider, {
+        ...props,
+        value: value,
+        children: children
+    });
+};
+ThemeProvider.displayName = 'ThemeProvider';
+export { ThemeProvider };

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

@@ -0,0 +1,6 @@
+import type { Theme } from './types';
+export interface ThemeProviderState {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+export declare const ThemeProviderContext: import("react").Context<ThemeProviderState>;

package/dist/components/ThemeProvider/ThemeProviderContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const ThemeProviderContext = createContext({
+    theme: 'system',
+    setTheme: ()=>null
+});
+export { ThemeProviderContext };

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

@@ -0,0 +1,3 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { Theme } from './types';
+export { useTheme } from './useTheme';

package/dist/components/ThemeProvider/index.js

@@ -0,0 +1,3 @@
+import { ThemeProvider } from "./ThemeProvider.js";
+import { useTheme } from "./useTheme.js";
+export { ThemeProvider, useTheme };

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

@@ -0,0 +1 @@
+export type Theme = 'dark' | 'light' | 'system';

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

@@ -0,0 +1 @@
+export declare const useTheme: () => import("./ThemeProviderContext").ThemeProviderState;

package/dist/components/ThemeProvider/useTheme.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ThemeProviderContext } from "./ThemeProviderContext.js";
+const useTheme = ()=>{
+    const context = useContext(ThemeProviderContext);
+    if (void 0 === context) throw new Error('useTheme must be used within a ThemeProvider');
+    return context;
+};
+export { useTheme };

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface ToastData {
+    id: string;
+    title?: string;
+    description?: string;
+    type?: 'success' | 'error' | 'warning' | 'info' | 'loading' | 'default';
+    actions?: ReactNode;
+    icon?: ReactNode;
+    variant?: 'extended' | 'simple';
+    closable?: boolean;
+    [key: string]: unknown;
+}
+export interface ToastProps {
+    toast: ToastData;
+}
+export declare const Toast: {
+    ({ toast }: ToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Toast/Toast.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { Toast } from "@ark-ui/react/toast";
+import { cva } from "class-variance-authority";
+import { CircleCheckBig, Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { Loader } from "../Loader/index.js";
+import { ToastClose } from "./ToastClose.js";
+import { ToastDescription } from "./ToastDescription.js";
+import { ToastIcon } from "./ToastIcon.js";
+import { ToastTitle } from "./ToastTitle.js";
+const toastVariants = cva('group relative flex min-w-[256px] max-w-[560px] items-start gap-12 rounded-12 bg-slate-800 p-12 pl-16 shadow-lg transition-all', {
+    variants: {
+        variant: {
+            extended: 'flex-col',
+            simple: 'flex-row items-center'
+        }
+    },
+    defaultVariants: {
+        variant: 'extended'
+    }
+});
+const toastIconMap = {
+    success: {
+        component: CircleCheckBig,
+        className: 'text-green-500'
+    },
+    error: {
+        component: OctagonAlert,
+        className: 'text-red-500'
+    },
+    warning: {
+        component: TriangleAlert,
+        className: 'text-amber-500'
+    },
+    info: {
+        component: Info,
+        className: 'text-blue-500'
+    }
+};
+const Toast_Toast = ({ toast })=>{
+    const toastVariant = toast.variant || 'simple';
+    const isSimple = 'simple' === toastVariant;
+    const closable = false !== toast.closable;
+    const getToastIcon = ()=>{
+        const toastType = toast.type || 'default';
+        if (toast.icon) {
+            if (/*#__PURE__*/ isValidElement(toast.icon)) {
+                const iconElement = toast.icon;
+                const existingProps = iconElement.props || {};
+                const colorClass = 'default' !== toastType && 'loading' !== toastType ? toastIconMap[toastType]?.className : null;
+                const existingClassName = existingProps.className;
+                const hasColorClass = existingClassName?.includes('text-') ?? false;
+                const newProps = {
+                    ...existingProps,
+                    size: existingProps.size || 'lg'
+                };
+                if (colorClass && !hasColorClass) newProps.className = cn(existingClassName, colorClass);
+                return /*#__PURE__*/ cloneElement(iconElement, newProps);
+            }
+            return toast.icon;
+        }
+        if ('default' === toastType) return null;
+        if ('loading' === toastType) return /*#__PURE__*/ jsx(Loader, {
+            type: "sonner",
+            size: "lg",
+            color: "primary-alt"
+        });
+        const iconConfig = toastIconMap[toastType];
+        if (!iconConfig) return null;
+        const IconComponent = iconConfig.component;
+        return /*#__PURE__*/ jsx(IconComponent, {
+            size: "lg",
+            className: iconConfig.className
+        });
+    };
+    const toastIcon = getToastIcon();
+    return /*#__PURE__*/ jsx(Toast.Root, {
+        className: cn(toastVariants({
+            variant: toastVariant
+        })),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn('flex w-full items-start gap-8 relative z-10'),
+            children: [
+                toastIcon && /*#__PURE__*/ jsx(ToastIcon, {
+                    children: toastIcon
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: cn('flex-1 flex', isSimple ? 'flex-row gap-16 items-start' : 'flex-col gap-8'),
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex-1 py-2",
+                            children: [
+                                toast.title && /*#__PURE__*/ jsx(ToastTitle, {
+                                    variant: toastVariant,
+                                    children: toast.title
+                                }),
+                                !isSimple && toast.description && /*#__PURE__*/ jsx(ToastDescription, {
+                                    children: toast.description
+                                })
+                            ]
+                        }),
+                        toast.actions && toast.actions
+                    ]
+                }),
+                closable && /*#__PURE__*/ jsx(ToastClose, {})
+            ]
+        })
+    }, toast.id);
+};
+Toast_Toast.displayName = 'Toast';
+export { Toast_Toast as Toast };

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

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const ToastActions: FC<PropsWithChildren>;

package/dist/components/Toast/ToastActions.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const ToastActions = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center gap-4'),
+        children: children
+    });
+ToastActions.displayName = 'ToastActions';
+export { ToastActions };

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

@@ -0,0 +1,4 @@
+export declare const ToastClose: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Toast/ToastClose.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@ark-ui/react/toast";
+import { X } from "../../icons/index.js";
+import { Button } from "../Button/index.js";
+const ToastClose = ()=>/*#__PURE__*/ jsx(Toast.CloseTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx(Button, {
+            variant: "ghost",
+            size: "small",
+            color: "neutral-alt",
+            children: /*#__PURE__*/ jsx(X, {
+                size: "md"
+            })
+        })
+    });
+ToastClose.displayName = 'ToastClose';
+export { ToastClose };

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface ToastDescriptionProps {
+    children: ReactNode;
+}
+/**
+ * Description component for Toast.
+ *
+ * Displays secondary description text with regular weight and secondary color.
+ * Supports text truncation with configurable max lines.
+ * Shows a tooltip with full text when content is truncated.
+ */
+export declare const ToastDescription: import("react").ForwardRefExoticComponent<ToastDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Toast/ToastDescription.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { Text } from "../Text/index.js";
+const ToastDescription = /*#__PURE__*/ forwardRef(({ children }, ref)=>/*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                children: /*#__PURE__*/ jsx(Text, {
+                    ref: ref,
+                    size: "md",
+                    color: "secondary-alt",
+                    lineClamp: 4,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    }));
+ToastDescription.displayName = "ToastDescription";
+export { ToastDescription };

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

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const ToastIcon: FC<PropsWithChildren>;

package/dist/components/Toast/ToastIcon.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+const ToastIcon = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: "shrink-0 pt-2 pb-2",
+        "data-part": "toast-icon",
+        children: children
+    });
+ToastIcon.displayName = 'ToastIcon';
+export { ToastIcon };

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface ToastTitleProps {
+    children: ReactNode;
+    variant?: 'extended' | 'simple';
+}
+/**
+ * Title component for Toast.
+ *
+ * Displays the main title text with medium weight.
+ * For simple variant, limits to 1 line with tooltip on overflow.
+ */
+export declare const ToastTitle: import("react").ForwardRefExoticComponent<ToastTitleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Toast/ToastTitle.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { Text } from "../Text/index.js";
+const ToastTitle = /*#__PURE__*/ forwardRef(({ children, variant = 'extended' }, ref)=>{
+    const isSimple = 'simple' === variant;
+    return /*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                children: /*#__PURE__*/ jsx(Text, {
+                    ref: ref,
+                    size: "md",
+                    weight: "medium",
+                    color: "primary-alt",
+                    lineClamp: isSimple ? 1 : 2,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+});
+ToastTitle.displayName = 'ToastTitle';
+export { ToastTitle };

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

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import { type CreateToasterReturn } from '@ark-ui/react/toast';
+import { type ToastData } from './Toast';
+export interface ToastCreateOptions extends Omit<ToastData, 'id'> {
+    duration?: number;
+}
+export interface TypedToaster extends Omit<CreateToasterReturn, 'create'> {
+    create: (options: ToastCreateOptions) => string;
+    __arkToaster: CreateToasterReturn;
+}
+/**
+ * @todo Should be refactored
+ */
+export declare const toaster: TypedToaster;
+export declare const Toaster: FC;

package/dist/components/Toast/Toaster.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { Toaster, createToaster } from "@ark-ui/react/toast";
+import { cn } from "../../utils/cn.js";
+import { Toast } from "./Toast.js";
+const SIMPLE_TOAST_DURATION_MS = 5000;
+const EXTENDED_TOAST_DURATION_MS = 10000;
+const arkToaster = createToaster({
+    overlap: true,
+    gap: 12
+});
+const toaster = {
+    ...arkToaster,
+    __arkToaster: arkToaster,
+    create: (options)=>arkToaster.create({
+            ...options,
+            duration: options.duration ?? ('extended' === options.variant ? EXTENDED_TOAST_DURATION_MS : SIMPLE_TOAST_DURATION_MS)
+        })
+};
+const Toaster_Toaster = ()=>{
+    const arkToasterInstance = toaster.__arkToaster || toaster;
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(Toaster, {
+            toaster: arkToasterInstance,
+            className: cn('fixed bottom-0 right-0 !z-[50] flex flex-col gap-12 p-24', '[&_[data-scope=toast][data-part=group]]:flex [&_[data-scope=toast][data-part=group]]:flex-col [&_[data-scope=toast][data-part=group]]:gap-12 [&_[data-scope=toast][data-part=group]]:max-w-[560px] [&_[data-scope=toast][data-part=group]]:mx-auto', '[&_[data-scope=toast][data-part=root]]:[translate:var(--x)_var(--y)] [&_[data-scope=toast][data-part=root]]:scale-[var(--scale)] [&_[data-scope=toast][data-part=root]]:z-[var(--z-index)] [&_[data-scope=toast][data-part=root]]:h-[var(--height)] [&_[data-scope=toast][data-part=root]]:opacity-[var(--opacity)] [&_[data-scope=toast][data-part=root]]:[will-change:translate,opacity,scale] [&_[data-scope=toast][data-part=root]]:[transition:translate_200ms_ease-in-out,scale_200ms_ease-in-out,opacity_200ms_ease-in-out,height_200ms_ease-in-out,box-shadow_200ms_ease-in-out]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:[transition:translate_200ms_ease-in-out,scale_200ms_ease-in-out,opacity_200ms_ease-in-out]', '[&_[data-scope=toast][data-part=root]:nth-child(n+4)]:hidden', '[&_[data-scope=toast][data-part=root]]:after:content-[""] [&_[data-scope=toast][data-part=root]]:after:absolute [&_[data-scope=toast][data-part=root]]:after:inset-0 [&_[data-scope=toast][data-part=root]]:after:rounded-[inherit] [&_[data-scope=toast][data-part=root]]:after:pointer-events-none [&_[data-scope=toast][data-part=root]]:after:z-[1] [&_[data-scope=toast][data-part=root]]:after:opacity-0 [&_[data-scope=toast][data-part=root]]:after:transition-opacity [&_[data-scope=toast][data-part=root]]:after:duration-200 [&_[data-scope=toast][data-part=root]]:after:ease-in-out', '[&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:[background:--alpha(var(--color-white)/50%)] [&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:opacity-100', '[&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:[background:--alpha(var(--color-white)/20%)] [&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:opacity-100'),
+            children: (toast)=>/*#__PURE__*/ jsx(Toast, {
+                    toast: toast
+                }, toast.id)
+        })
+    });
+};
+Toaster_Toaster.displayName = 'Toaster';
+export { Toaster_Toaster as Toaster, toaster };

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

@@ -0,0 +1,5 @@
+export { Toast } from './Toast';
+export { ToastActions } from './ToastActions';
+export { Toaster, toaster } from './Toaster';
+export type { CreateToastOptions, DismissToastOptions, UpdateToastOptions, UseToastReturn, } from './useToast';
+export { useToast } from './useToast';

package/dist/components/Toast/index.js

@@ -0,0 +1,5 @@
+import { Toast } from "./Toast.js";
+import { ToastActions } from "./ToastActions.js";
+import { Toaster, toaster } from "./Toaster.js";
+import { useToast } from "./useToast.js";
+export { Toast, ToastActions, Toaster, toaster, useToast };

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

@@ -0,0 +1,17 @@
+import { type ToastCreateOptions } from './Toaster';
+export type CreateToastOptions = ToastCreateOptions;
+export type UpdateToastOptions = {
+    id: string;
+} & Partial<ToastCreateOptions>;
+export interface DismissToastOptions {
+    id?: string;
+}
+export interface UseToastReturn {
+    create: (options: CreateToastOptions) => string;
+    update: (options: UpdateToastOptions) => string;
+    dismiss: (options?: DismissToastOptions) => void;
+}
+export declare const useToast: {
+    (): UseToastReturn;
+    displayName: string;
+};

package/dist/components/Toast/useToast.js

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { toaster } from "./Toaster.js";
+const useToast = ()=>useMemo(()=>({
+            create: (options)=>toaster.create(options),
+            update: ({ id, ...options })=>toaster.update(id, options),
+            dismiss: (options = {})=>toaster.dismiss(options.id)
+        }), []);
+useToast.displayName = 'useToast';
+export { useToast };