@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.1

package/src/components/status-dot.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import type * as React from "react";
+
+/** The wrapper: dot + optional label, inline. Sets the color vars for the dot. */
+const statusDotVariants = cva("group/status-dot inline-flex items-center text-sm text-foreground", {
+    variants: {
+        color: colorVariants,
+        size: {
+            sm: "gap-1.5 text-xs",
+            default: "gap-2",
+            lg: "gap-2",
+        },
+    },
+    defaultVariants: {color: "neutral", size: "default"},
+});
+
+const dotSize = {
+    sm: "size-1.5",
+    default: "size-2",
+    lg: "size-2.5",
+} as const;
+
+interface StatusDotProps extends Omit<useRender.ComponentProps<"span">, "color"> {
+    /** Status hue. Defaults to `neutral` (muted grey). */
+    color?: Color | null;
+    size?: "sm" | "default" | "lg";
+    /** Animated ping ring for live / in-progress states. Disabled under `prefers-reduced-motion`. */
+    pulse?: boolean;
+    /** Accessible name when there is no visible label. */
+    label?: string;
+}
+
+/**
+ * A small pill dot that carries a status color. Put the visible label as children; color is never the only
+ * signal, so give a dot without children a `label`.
+ */
+function StatusDot({
+    className,
+    color,
+    size = "default",
+    pulse = false,
+    label,
+    children,
+    render,
+    ...props
+}: StatusDotProps) {
+    const resolved = color ?? "neutral";
+    const dot = (
+        <span data-slot="status-dot-indicator" className={cn("relative inline-flex shrink-0", dotSize[size])}>
+            {pulse ? (
+                <span
+                    data-slot="status-dot-ping"
+                    aria-hidden="true"
+                    className="absolute inset-0 animate-ping rounded-pill bg-(--c) opacity-60 motion-reduce:hidden"
+                />
+            ) : null}
+            <span
+                aria-hidden="true"
+                className={cn(
+                    "relative inline-flex size-full rounded-pill bg-(--c)",
+                    resolved === "neutral" && "bg-muted-foreground",
+                )}
+            />
+        </span>
+    );
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps<"span">(
+            {
+                className: cn(statusDotVariants({color: resolved, size}), className),
+                role: label && !children ? "img" : undefined,
+                "aria-label": label && !children ? label : undefined,
+                children: (
+                    <>
+                        {dot}
+                        {children ? <span data-slot="status-dot-label">{children}</span> : null}
+                    </>
+                ),
+            } as React.ComponentProps<"span">,
+            props,
+        ),
+        render,
+        state: {slot: "status-dot", color: resolved, size, pulse: pulse || undefined},
+    });
+}
+
+export {StatusDot, statusDotVariants};
+export type {StatusDotProps};

package/src/components/switch.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {Switch as SwitchPrimitive} from "@base-ui/react/switch";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+
+/**
+ * Track classes. The track is border-box with a 1px border, so the thumb sits 1px inside it and travels
+ * (width - height) when checked.
+ */
+const switchVariants = cva(
+    [
+        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-pill border px-px",
+        "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+        "after:absolute after:-inset-x-3 after:-inset-y-2",
+        focusRing,
+        "data-unchecked:border-input data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-unchecked:hover:bg-[color-mix(in_oklch,var(--input),var(--foreground)_15%)] dark:data-unchecked:hover:bg-[color-mix(in_oklch,var(--input),var(--foreground)_15%)]", // lint-design-ignore: paired dark:hover below
+        "data-checked:border-primary data-checked:bg-primary data-checked:hover:border-primary/85 data-checked:hover:bg-primary/85",
+        "aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none",
+        "group-has-[:focus-visible]/field-label:ring-0",
+    ],
+    {
+        variants: {
+            size: {
+                sm: "h-4 w-7",
+                default: "h-5 w-9",
+                lg: "h-6 w-11",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+const switchThumbVariants = cva(
+    [
+        "pointer-events-none block rounded-pill shadow-sm shadow-(color:--shadow-color) ring-0 transition-[translate,background-color] duration-100 motion-reduce:transition-none",
+        "data-unchecked:translate-x-0 data-unchecked:bg-background dark:data-unchecked:bg-foreground", // lint-design-ignore: thumb has no hover state
+        "data-checked:bg-primary-foreground",
+    ],
+    {
+        variants: {
+            size: {
+                sm: "size-3 data-checked:translate-x-3",
+                default: "size-4 data-checked:translate-x-4",
+                lg: "size-5 data-checked:translate-x-5",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+type SwitchProps = SwitchPrimitive.Root.Props & VariantProps<typeof switchVariants>;
+
+function Switch({className, size = "default", ...props}: SwitchProps) {
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            data-size={size}
+            className={cn(switchVariants({size}), className)}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb data-slot="switch-thumb" className={switchThumbVariants({size})} />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export {Switch, switchThumbVariants, switchVariants};
+export type {SwitchProps};

package/src/components/table.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import type * as React from "react";
+
+const tableContainerVariants = cva("relative w-full", {
+    variants: {
+        // `bordered` clips with overflow-hidden so the rounded corners stay clean. Override the overflow
+        // via `containerClassName` (e.g. "overflow-auto max-h-96") for a bordered, scrollable frame.
+        bordered: {
+            true: "overflow-hidden rounded-lg border border-border",
+            false: "overflow-x-auto",
+        },
+    },
+    defaultVariants: {bordered: false},
+});
+
+interface TableProps extends React.ComponentProps<"table">, VariantProps<typeof tableContainerVariants> {
+    containerClassName?: string;
+    /** Zebra-stripe even body rows. */
+    striped?: boolean;
+    /** Row hover wash (on by default). */
+    hoverable?: boolean;
+    /** Vertical separators between columns. */
+    dividers?: boolean;
+}
+
+function Table({className, containerClassName, bordered, striped, hoverable = true, dividers, ...props}: TableProps) {
+    return (
+        <div data-slot="table-container" className={cn(tableContainerVariants({bordered}), containerClassName)}>
+            <table
+                data-slot="table"
+                data-bordered={bordered || undefined}
+                data-striped={striped || undefined}
+                data-hoverable={hoverable || undefined}
+                data-dividers={dividers || undefined}
+                className={cn("group/table w-full caption-bottom text-sm", className)}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function TableHeader({className, ...props}: React.ComponentProps<"thead">) {
+    return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({className, ...props}: React.ComponentProps<"tbody">) {
+    return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({className, ...props}: React.ComponentProps<"tfoot">) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+            {...props}
+        />
+    );
+}
+
+function TableRow({className, ...props}: React.ComponentProps<"tr">) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                "border-b border-border transition-colors duration-100 has-aria-expanded:bg-hover",
+                // flags on <Table>: striping targets even body rows; hover skips the header row
+                "group-data-striped/table:in-data-[slot=table-body]:even:bg-muted/50",
+                "group-data-hoverable/table:not-in-data-[slot=table-header]:hover:bg-hover",
+                // selected = accent tint + a 2px primary indicator on the first cell (never shade alone)
+                "data-[state=selected]:bg-accent! data-[state=selected]:text-accent-foreground data-[state=selected]:*:first:shadow-[inset_2px_0_0_var(--primary-text)]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableHead({className, ...props}: React.ComponentProps<"th">) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "h-10 px-2 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
+                "group-data-dividers/table:not-last:border-r group-data-dividers/table:border-border",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCell({className, ...props}: React.ComponentProps<"td">) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+                "group-data-dividers/table:not-last:border-r group-data-dividers/table:border-border",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({className, ...props}: React.ComponentProps<"caption">) {
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn(
+                "mt-4 text-sm text-muted-foreground group-data-bordered/table:mt-0 group-data-bordered/table:border-t group-data-bordered/table:border-border group-data-bordered/table:py-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    tableContainerVariants,
+    TableFooter,
+    TableHead,
+    TableHeader,
+    TableRow,
+};
+export type {TableProps};

package/src/components/tabs.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import {Tabs as TabsPrimitive} from "@base-ui/react/tabs";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+
+function Tabs({className, orientation = "horizontal", ...props}: TabsPrimitive.Root.Props) {
+    return (
+        <TabsPrimitive.Root
+            data-slot="tabs"
+            data-orientation={orientation}
+            orientation={orientation}
+            className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+            {...props}
+        />
+    );
+}
+
+/**
+ * `default`: a tray with the active tab raised on a bordered surface (the border keeps it readable in
+ * high contrast). `line`: a baseline with a 2px primary indicator under the active tab.
+ * Sizes follow the control table (GUIDELINES §4) so a tabs list lines up with buttons and inputs.
+ */
+const tabsListVariants = cva(
+    "group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground data-vertical:h-fit data-vertical:flex-col data-vertical:items-stretch",
+    {
+        variants: {
+            variant: {
+                default: "rounded-lg border border-transparent bg-muted p-[3px] data-vertical:gap-0.5 hc:border-border",
+                line: "gap-1 rounded-none border-border bg-transparent data-horizontal:border-b data-horizontal:py-[3px] data-vertical:border-r data-vertical:px-[3px]",
+            },
+            size: {
+                sm: "data-horizontal:h-7",
+                default: "data-horizontal:h-8",
+                lg: "data-horizontal:h-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+function TabsList({
+    className,
+    variant = "default",
+    size = "default",
+    ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            data-variant={variant}
+            data-size={size}
+            className={cn(tabsListVariants({variant, size}), className)}
+            {...props}
+        />
+    );
+}
+
+const tabsTriggerClass = cn(
+    "relative inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm font-medium whitespace-nowrap text-muted-foreground select-none",
+    "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+    focusRing,
+    "hover:text-foreground not-data-active:hover:bg-hover",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
+    "has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    // sizes, read from the list
+    "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:px-1.5 group-data-[size=sm]/tabs-list:text-[0.8rem] group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5",
+    "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:px-2.5",
+    // vertical: full-width rows
+    "data-vertical:w-full data-vertical:flex-none data-vertical:justify-start data-vertical:py-1",
+    // default: raised, bordered surface + foreground text (readable without the shade in hc)
+    "data-active:text-foreground",
+    "group-data-[variant=default]/tabs-list:data-active:border-input group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=default]/tabs-list:data-active:shadow-(color:--shadow-color) dark:group-data-[variant=default]/tabs-list:data-active:bg-input/30",
+    // line: 2px primary indicator over the list's baseline
+    "after:pointer-events-none after:absolute after:rounded-pill after:bg-primary-text after:opacity-0 after:transition-opacity group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+    "data-horizontal:after:inset-x-1 data-horizontal:after:-bottom-1 data-horizontal:after:h-0.5",
+    "data-vertical:after:inset-y-1 data-vertical:after:-right-1 data-vertical:after:w-0.5",
+);
+
+function TabsTrigger({className, ...props}: TabsPrimitive.Tab.Props) {
+    return <TabsPrimitive.Tab data-slot="tabs-trigger" className={cn(tabsTriggerClass, className)} {...props} />;
+}
+
+function TabsContent({className, ...props}: TabsPrimitive.Panel.Props) {
+    return (
+        <TabsPrimitive.Panel
+            data-slot="tabs-content"
+            className={cn("flex-1 rounded-md text-sm", focusRing, className)}
+            {...props}
+        />
+    );
+}
+
+export {Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger, tabsTriggerClass};

package/src/components/textarea.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import {fieldSurface, focusRing, invalidRing} from "@repraze/kernelkit/lib/recipes";
+import {cn} from "cn";
+import * as React from "react";
+
+function Textarea({className, ...props}: React.ComponentProps<"textarea">) {
+    return (
+        <textarea
+            data-slot="textarea"
+            className={cn(
+                fieldSurface,
+                focusRing,
+                invalidRing,
+                "flex field-sizing-content min-h-16 w-full px-2.5 py-2 text-base md:text-sm",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {Textarea};

package/src/components/toast.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import {Toast as ToastPrimitive} from "@base-ui/react/toast";
+import {Button} from "@repraze/kernelkit/components/button";
+import {focusRing, heading} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import {CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon} from "lucide-react";
+import * as React from "react";
+
+const toast = ToastPrimitive.createToastManager();
+
+function ToastProvider({...props}: ToastPrimitive.Provider.Props) {
+    return <ToastPrimitive.Provider data-slot="toast-provider" {...props} />;
+}
+
+function ToastPortal({...props}: ToastPrimitive.Portal.Props) {
+    return <ToastPrimitive.Portal container={usePortalContainer()} data-slot="toast-portal" {...props} />;
+}
+
+function ToastViewport({className, ...props}: ToastPrimitive.Viewport.Props) {
+    return (
+        <ToastPrimitive.Viewport
+            data-slot="toast-viewport"
+            className={cn(
+                "pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function Toast({className, ...props}: ToastPrimitive.Root.Props) {
+    return (
+        <ToastPrimitive.Root
+            data-slot="toast"
+            className={cn(
+                "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-xl border border-border bg-popover text-popover-foreground shadow-lg shadow-(color:--shadow-color) will-change-transform select-none motion-reduce:transition-none",
+                focusRing,
+                "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+                "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+                "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+                "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+                "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+                "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+                "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+                "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+                "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+                "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ToastContent({className, ...props}: ToastPrimitive.Content.Props) {
+    return (
+        <ToastPrimitive.Content
+            data-slot="toast-content"
+            className={cn(
+                "flex h-full items-start gap-3 overflow-hidden p-3 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ToastTitle({className, ...props}: ToastPrimitive.Title.Props) {
+    return (
+        <ToastPrimitive.Title
+            data-slot="toast-title"
+            className={cn(heading, "text-sm leading-5", className)}
+            {...props}
+        />
+    );
+}
+
+function ToastDescription({className, ...props}: ToastPrimitive.Description.Props) {
+    return (
+        <ToastPrimitive.Description
+            data-slot="toast-description"
+            className={cn("text-sm text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function ToastAction({
+    className,
+    render = <Button variant="outline" size="sm" />,
+    ...props
+}: ToastPrimitive.Action.Props) {
+    return (
+        <ToastPrimitive.Action
+            data-slot="toast-action"
+            render={render}
+            className={cn("shrink-0 self-center", className)}
+            {...props}
+        />
+    );
+}
+
+function ToastClose({
+    className,
+    children,
+    render = <Button variant="ghost" size="icon-xs" />,
+    ...props
+}: ToastPrimitive.Close.Props) {
+    return (
+        <ToastPrimitive.Close
+            data-slot="toast-close"
+            aria-label="Close toast"
+            render={render}
+            className={cn(
+                "relative -my-1 -mr-1 size-6 shrink-0 text-muted-foreground after:absolute after:-inset-1 after:content-[''] hover:text-foreground",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? <XIcon aria-hidden="true" />}
+        </ToastPrimitive.Close>
+    );
+}
+
+/** Toast `type`s with an icon. Status is never color alone (GUIDELINES §2): each has its own glyph. */
+const TOAST_ICONS: Record<string, React.ReactNode> = {
+    success: <CircleCheckIcon className="text-success" aria-hidden="true" />,
+    info: <InfoIcon className="text-info" aria-hidden="true" />,
+    warning: <TriangleAlertIcon className="text-warning" aria-hidden="true" />,
+    error: <OctagonXIcon className="text-danger" aria-hidden="true" />,
+    danger: <OctagonXIcon className="text-danger" aria-hidden="true" />,
+    loading: (
+        <Loader2Icon className="animate-spin text-muted-foreground motion-reduce:animate-none" aria-hidden="true" />
+    ),
+};
+
+function ToastIcon({type, className}: {type: string | undefined; className?: string}) {
+    const icon = type ? TOAST_ICONS[type] : null;
+    if (!icon) {
+        return null;
+    }
+    return (
+        <span
+            data-slot="toast-icon"
+            className={cn(
+                "flex h-5 shrink-0 items-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+        >
+            {icon}
+        </span>
+    );
+}
+
+function ToastList() {
+    const {toasts} = ToastPrimitive.useToastManager();
+
+    return toasts.map((toastItem) => (
+        <Toast key={toastItem.id} toast={toastItem}>
+            <ToastContent>
+                <ToastIcon type={toastItem.type} />
+                <div data-slot="toast-text" className="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <ToastTitle />
+                    <ToastDescription />
+                </div>
+                <ToastAction />
+                <ToastClose />
+            </ToastContent>
+        </Toast>
+    ));
+}
+
+/**
+ * Provider + viewport + default toast rendering. Uses the global `toast` manager by default;
+ * `toastManager={null}` gives it a local one, reached through `useToastManager()` inside.
+ */
+function Toaster({
+    children,
+    toastManager = toast,
+    ...props
+}: Omit<ToastPrimitive.Provider.Props, "toastManager"> & {
+    toastManager?: ToastPrimitive.Provider.Props["toastManager"] | null;
+}) {
+    return (
+        <ToastProvider toastManager={toastManager ?? undefined} {...props}>
+            {children}
+            <ToastPortal>
+                <ToastViewport>
+                    <ToastList />
+                </ToastViewport>
+            </ToastPortal>
+        </ToastProvider>
+    );
+}
+
+const createToastManager = ToastPrimitive.createToastManager;
+const useToastManager = ToastPrimitive.useToastManager;
+
+export {
+    createToastManager,
+    Toast,
+    toast,
+    ToastAction,
+    ToastClose,
+    ToastContent,
+    ToastDescription,
+    Toaster,
+    ToastIcon,
+    ToastPortal,
+    ToastProvider,
+    ToastTitle,
+    ToastViewport,
+    useToastManager,
+};