@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,9 @@
+import type { FieldTextareaProps } from '@ark-ui/solid/field';
+type TextareaProps = FieldTextareaProps & {
+    defaultValue?: string | number | readonly string[];
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function Textarea(props: TextareaProps): import("solid-js").JSX.Element;
+export { Textarea };

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,45 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { createEffect, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function Textarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'autoresize',
+        'class',
+        'defaultValue',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return createComponent(Field.Textarea, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, ()=>local.asChild ? {
+            'prop:defaultValue': local.defaultValue
+        } : {}, {
+        "data-scope": "field",
+        "data-part": "textarea",
+        "data-slot": "textarea-root",
+        get ["data-autoresize"] () {
+            return local.autoresize ? '' : void 0;
+        },
+        get ["class"] () {
+            return cn('min-h-24 w-full max-w-none resize-y rounded-md border border-border bg-background px-3.5 py-2 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-autoresize:overflow-y-hidden data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
+        },
+        get autoresize () {
+            return local.autoresize;
+        },
+        ref: (element)=>{
+            textareaRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+export { Textarea };

package/dist/components/textarea/Textarea.jsx

@@ -0,0 +1,26 @@
+import { Field } from "@ark-ui/solid/field";
+import { createEffect, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function Textarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'autoresize',
+        'class',
+        'defaultValue',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return <Field.Textarea asChild={local.asChild} {...others} {...local.asChild ? {
+        'prop:defaultValue': local.defaultValue
+    } : {}} data-scope="field" data-part="textarea" data-slot="textarea-root" data-autoresize={local.autoresize ? '' : void 0} class={cn('min-h-24 w-full max-w-none resize-y rounded-md border border-border bg-background px-3.5 py-2 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-autoresize:overflow-y-hidden data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} autoresize={local.autoresize} ref={(element)=>{
+        textareaRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+export { Textarea };

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

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

package/dist/components/textarea/index.js

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

package/dist/components/textarea/index.jsx

@@ -0,0 +1 @@
+export { Textarea } from "./Textarea.jsx";

package/dist/components/timer/Timer.d.ts

@@ -0,0 +1,26 @@
+import { Timer as TimerPrimitive, useTimer, useTimerContext } from '@ark-ui/solid/timer';
+import type { ComponentProps, JSX } from 'solid-js';
+declare function TimerRoot(props: ComponentProps<typeof TimerPrimitive.Root>): JSX.Element;
+declare function TimerRootProvider(props: ComponentProps<typeof TimerPrimitive.RootProvider>): JSX.Element;
+declare function TimerArea(props: ComponentProps<typeof TimerPrimitive.Area>): JSX.Element;
+declare function TimerItem(props: ComponentProps<typeof TimerPrimitive.Item>): JSX.Element;
+declare function TimerSeparator(props: ComponentProps<typeof TimerPrimitive.Separator>): JSX.Element;
+declare function TimerControl(props: ComponentProps<typeof TimerPrimitive.Control>): JSX.Element;
+declare function TimerActionTrigger(props: ComponentProps<typeof TimerPrimitive.ActionTrigger>): JSX.Element;
+type TimerSegmentsProps = Omit<ComponentProps<typeof TimerPrimitive.Area>, 'asChild' | 'children'> & {
+    separator?: JSX.Element;
+    types?: ComponentProps<typeof TimerPrimitive.Item>['type'][];
+};
+declare function TimerSegments(props: TimerSegmentsProps): JSX.Element;
+declare const Timer: typeof TimerRoot & {
+    Root: typeof TimerRoot;
+    RootProvider: typeof TimerRootProvider;
+    Area: typeof TimerArea;
+    Item: typeof TimerItem;
+    Separator: typeof TimerSeparator;
+    Control: typeof TimerControl;
+    ActionTrigger: typeof TimerActionTrigger;
+    Context: (props: TimerPrimitive.ContextProps) => JSX.Element;
+    Segments: typeof TimerSegments;
+};
+export { Timer, type TimerSegmentsProps, useTimer, useTimerContext };

package/dist/components/timer/Timer.js

@@ -0,0 +1,126 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Timer, useTimer, useTimerContext } from "@ark-ui/solid/timer";
+import { Index, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function TimerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Root, mergeProps({
+        "data-slot": "timer-root",
+        get ["class"] () {
+            return cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class);
+        }
+    }, others));
+}
+function TimerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.RootProvider, mergeProps({
+        "data-slot": "timer-root-provider",
+        get ["class"] () {
+            return cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class);
+        }
+    }, others));
+}
+function TimerArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Area, mergeProps({
+        "data-slot": "timer-area",
+        get ["class"] () {
+            return cn('inline-flex max-w-full min-w-0 flex-wrap items-baseline justify-center gap-1 text-2xl leading-5 font-semibold tracking-normal tabular-nums', local.class);
+        }
+    }, others));
+}
+function TimerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Item, mergeProps({
+        "data-slot": "timer-item",
+        get ["class"] () {
+            return cn('min-w-[2ch] text-center', local.class);
+        }
+    }, others));
+}
+function TimerSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Separator, mergeProps({
+        "data-slot": "timer-separator",
+        get ["class"] () {
+            return cn('text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function TimerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Control, mergeProps({
+        "data-slot": "timer-control",
+        get ["class"] () {
+            return cn('inline-flex flex-wrap items-center gap-2', local.class);
+        }
+    }, others));
+}
+function TimerActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.ActionTrigger, mergeProps({
+        "data-slot": "timer-action-trigger",
+        get ["class"] () {
+            return cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+const defaultTimerSegmentTypes = [
+    'hours',
+    'minutes',
+    'seconds'
+];
+function TimerSegments(props) {
+    const [local, others] = splitProps(props, [
+        'separator',
+        'types'
+    ]);
+    const segmentTypes = ()=>local.types ?? defaultTimerSegmentTypes;
+    return createComponent(TimerArea, mergeProps(others, {
+        get children () {
+            return createComponent(Index, {
+                get each () {
+                    return segmentTypes();
+                },
+                children: (type, index)=>[
+                        createComponent(TimerItem, {
+                            get type () {
+                                return type();
+                            }
+                        }),
+                        memo(()=>memo(()=>index < segmentTypes().length - 1)() && createComponent(TimerSeparator, {
+                                get children () {
+                                    return local.separator ?? ':';
+                                }
+                            }))
+                    ]
+            });
+        }
+    }));
+}
+const Timer_Timer = Object.assign(TimerRoot, {
+    Root: TimerRoot,
+    RootProvider: TimerRootProvider,
+    Area: TimerArea,
+    Item: TimerItem,
+    Separator: TimerSeparator,
+    Control: TimerControl,
+    ActionTrigger: TimerActionTrigger,
+    Context: Timer.Context,
+    Segments: TimerSegments
+});
+export { Timer_Timer as Timer, useTimer, useTimerContext };

package/dist/components/timer/Timer.jsx

@@ -0,0 +1,77 @@
+import { Timer, useTimer, useTimerContext } from "@ark-ui/solid/timer";
+import { Index, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function TimerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Root data-slot="timer-root" class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others}/>;
+}
+function TimerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.RootProvider data-slot="timer-root-provider" class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others}/>;
+}
+function TimerArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Area data-slot="timer-area" class={cn('inline-flex max-w-full min-w-0 flex-wrap items-baseline justify-center gap-1 text-2xl leading-5 font-semibold tracking-normal tabular-nums', local.class)} {...others}/>;
+}
+function TimerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Item data-slot="timer-item" class={cn('min-w-[2ch] text-center', local.class)} {...others}/>;
+}
+function TimerSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Separator data-slot="timer-separator" class={cn('text-muted-foreground', local.class)} {...others}/>;
+}
+function TimerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Control data-slot="timer-control" class={cn('inline-flex flex-wrap items-center gap-2', local.class)} {...others}/>;
+}
+function TimerActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.ActionTrigger data-slot="timer-action-trigger" class={cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+const defaultTimerSegmentTypes = [
+    'hours',
+    'minutes',
+    'seconds'
+];
+function TimerSegments(props) {
+    const [local, others] = splitProps(props, [
+        'separator',
+        'types'
+    ]);
+    const segmentTypes = ()=>local.types ?? defaultTimerSegmentTypes;
+    return <TimerArea {...others}>
+      <Index each={segmentTypes()}>
+        {(type, index)=><>
+            <TimerItem type={type()}/>
+            {index < segmentTypes().length - 1 && <TimerSeparator>{local.separator ?? ':'}</TimerSeparator>}
+          </>}
+      </Index>
+    </TimerArea>;
+}
+const Timer_Timer = Object.assign(TimerRoot, {
+    Root: TimerRoot,
+    RootProvider: TimerRootProvider,
+    Area: TimerArea,
+    Item: TimerItem,
+    Separator: TimerSeparator,
+    Control: TimerControl,
+    ActionTrigger: TimerActionTrigger,
+    Context: Timer.Context,
+    Segments: TimerSegments
+});
+export { Timer_Timer as Timer, useTimer, useTimerContext };

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

@@ -0,0 +1 @@
+export { Timer, useTimer, useTimerContext, type TimerSegmentsProps } from './Timer.js';

package/dist/components/timer/index.js

@@ -0,0 +1 @@
+export { Timer, useTimer, useTimerContext } from "./Timer.js";

package/dist/components/timer/index.jsx

@@ -0,0 +1 @@
+export { Timer, useTimer, useTimerContext } from "./Timer.jsx";

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

@@ -0,0 +1,22 @@
+import { Toast as ToastPrimitive, Toaster as ToasterPrimitive, createToaster, useToastContext } from '@ark-ui/solid/toast';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type ToasterProps = Omit<ComponentProps<typeof ToasterPrimitive>, 'children'> & OverlayPortalProps & {
+    children?: ComponentProps<typeof ToasterPrimitive>['children'];
+};
+declare function Toaster(props: ToasterProps): import("solid-js").JSX.Element;
+declare function ToastRoot(props: ComponentProps<typeof ToastPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ToastTitle(props: ComponentProps<typeof ToastPrimitive.Title>): import("solid-js").JSX.Element;
+declare function ToastDescription(props: ComponentProps<typeof ToastPrimitive.Description>): import("solid-js").JSX.Element;
+declare function ToastActionTrigger(props: ComponentProps<typeof ToastPrimitive.ActionTrigger>): import("solid-js").JSX.Element;
+declare function ToastCloseTrigger(props: ComponentProps<typeof ToastPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare const Toast: typeof ToastRoot & {
+    Root: typeof ToastRoot;
+    Context: (props: ToastPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    ActionTrigger: typeof ToastActionTrigger;
+    CloseTrigger: typeof ToastCloseTrigger;
+    Toaster: typeof Toaster;
+};
+export { Toast, Toaster, createToaster, useToastContext };

package/dist/components/toast/Toast.js

@@ -0,0 +1,184 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/solid/toast";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DEFAULT_CLOSE_TRIGGER_LABEL = 'Close toast';
+function Toast_Toaster(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'portalRef',
+        'portalled'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(OverlayPortal, {
+                get children () {
+                    return createComponent(Toaster, mergeProps({
+                        "data-slot": "toast-toaster",
+                        get ["class"] () {
+                            return cn('z-70 max-[40rem]:w-full', local.class);
+                        }
+                    }, others, {
+                        get children () {
+                            return local.children ?? ((toast)=>createComponent(DefaultToast, {
+                                    toast: toast
+                                }));
+                        }
+                    }));
+                }
+            });
+        }
+    });
+}
+function DefaultToast(props) {
+    const hasAction = ()=>null != props.toast().action;
+    const actionLabel = ()=>props.toast().action?.label;
+    return createComponent(ToastRoot, {
+        get children () {
+            return [
+                memo(()=>memo(()=>null != props.toast().title)() ? createComponent(ToastTitle, {}) : null),
+                memo(()=>memo(()=>null != props.toast().description)() ? createComponent(ToastDescription, {}) : null),
+                memo(()=>memo(()=>!!hasAction())() ? createComponent(ToastActionTrigger, {
+                        get children () {
+                            return actionLabel();
+                        }
+                    }) : null),
+                memo(()=>memo(()=>false !== props.toast().closable)() ? createComponent(ToastCloseTrigger, {}) : null)
+            ];
+        }
+    });
+}
+function ToastRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toast.Root, mergeProps({
+        "data-slot": "toast-root",
+        get ["class"] () {
+            return cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class);
+        }
+    }, others));
+}
+function ToastTitle(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return createComponent(Toast.Title, mergeProps({
+        "data-slot": "toast-title",
+        get ["class"] () {
+            return cn('m-0 flex min-w-0 items-center gap-2 text-sm leading-5 font-semibold wrap-anywhere text-inherit', local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? toast().title : resolvedChildren();
+        }
+    }));
+}
+function ToastDescription(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return createComponent(Toast.Description, mergeProps({
+        "data-slot": "toast-description",
+        get ["class"] () {
+            return cn('m-0 min-w-0 text-sm leading-5 wrap-anywhere text-muted-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? toast().description : resolvedChildren();
+        }
+    }));
+}
+function ToastActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Toast.ActionTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "toast-action-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'mt-2 inline-flex min-h-control-xs w-max max-w-full min-w-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-border bg-transparent px-2 py-1 text-start text-xs leading-4 font-medium wrap-anywhere text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function ToastCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const ariaLabel = void 0 === local['aria-label'] ? DEFAULT_CLOSE_TRIGGER_LABEL : local['aria-label'];
+    if (local.asChild) return createComponent(Toast.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "toast-close-trigger",
+        "aria-label": ariaLabel,
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(Toast.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "toast-close-trigger",
+                "aria-label": ariaLabel,
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('absolute end-2 top-2', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            })),
+        "data-slot": "toast-close-trigger",
+        "aria-label": ariaLabel,
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        }
+    }, others));
+}
+const Toast_Toast = Object.assign(ToastRoot, {
+    Root: ToastRoot,
+    Context: Toast.Context,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    ActionTrigger: ToastActionTrigger,
+    CloseTrigger: ToastCloseTrigger,
+    Toaster: Toast_Toaster
+});
+export { Toast_Toast as Toast, Toast_Toaster as Toaster, createToaster, useToastContext };

package/dist/components/toast/Toast.jsx

@@ -0,0 +1,94 @@
+import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/solid/toast";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_TRIGGER_LABEL = 'Close toast';
+function Toast_Toaster(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'portalRef',
+        'portalled'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <OverlayPortal>
+        <Toaster data-slot="toast-toaster" class={cn('z-70 max-[40rem]:w-full', local.class)} {...others} children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
+      </OverlayPortal>
+    </OverlayPortalProvider>;
+}
+function DefaultToast(props) {
+    const hasAction = ()=>null != props.toast().action;
+    const actionLabel = ()=>props.toast().action?.label;
+    return <ToastRoot>
+      {null != props.toast().title ? <ToastTitle/> : null}
+      {null != props.toast().description ? <ToastDescription/> : null}
+      {hasAction() ? <ToastActionTrigger>{actionLabel()}</ToastActionTrigger> : null}
+      {false !== props.toast().closable ? <ToastCloseTrigger/> : null}
+    </ToastRoot>;
+}
+function ToastRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toast.Root data-slot="toast-root" class={cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class)} {...others}/>;
+}
+function ToastTitle(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return <Toast.Title data-slot="toast-title" class={cn('m-0 flex min-w-0 items-center gap-2 text-sm leading-5 font-semibold wrap-anywhere text-inherit', local.class)} {...others}>
+      {void 0 === resolvedChildren() ? toast().title : resolvedChildren()}
+    </Toast.Title>;
+}
+function ToastDescription(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return <Toast.Description data-slot="toast-description" class={cn('m-0 min-w-0 text-sm leading-5 wrap-anywhere text-muted-foreground', local.class)} {...others}>
+      {void 0 === resolvedChildren() ? toast().description : resolvedChildren()}
+    </Toast.Description>;
+}
+function ToastActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Toast.ActionTrigger asChild={local.asChild} data-slot="toast-action-trigger" class={cn(!local.asChild && 'mt-2 inline-flex min-h-control-xs w-max max-w-full min-w-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-border bg-transparent px-2 py-1 text-start text-xs leading-4 font-medium wrap-anywhere text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+      {local.children}
+    </Toast.ActionTrigger>;
+}
+function ToastCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const ariaLabel = void 0 === local['aria-label'] ? DEFAULT_CLOSE_TRIGGER_LABEL : local['aria-label'];
+    if (local.asChild) return <Toast.CloseTrigger asChild={local.asChild} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={local.class} {...others}>
+        {local.children}
+      </Toast.CloseTrigger>;
+    return <Toast.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-2 top-2', local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} {...others}/>;
+}
+const Toast_Toast = Object.assign(ToastRoot, {
+    Root: ToastRoot,
+    Context: Toast.Context,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    ActionTrigger: ToastActionTrigger,
+    CloseTrigger: ToastCloseTrigger,
+    Toaster: Toast_Toaster
+});
+export { Toast_Toast as Toast, Toast_Toaster as Toaster, createToaster, useToastContext };

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

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from './Toast.js';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from "./Toast.js";

package/dist/components/toast/index.jsx

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from "./Toast.jsx";