@siyahi/ui 0.1.9-next.34 → 0.1.9-next.36

package/dist/components/ui/questionnaire.js

@@ -0,0 +1,170 @@
+"use client";
+import { buttonVariants } from "./button.js";
+import { cn } from "cn";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Questionnaire as Questionnaire$1 } from "@shadcn/react/questionnaire";
+//#region src/components/ui/questionnaire.tsx
+function Questionnaire({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Root, {
+		"data-slot": "questionnaire",
+		className: cn("flex w-full min-w-0 flex-col gap-4", className),
+		...props
+	});
+}
+function QuestionnaireProgress({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Progress, {
+		"data-slot": "questionnaire-progress",
+		className: cn("min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums", className),
+		...props
+	});
+}
+function QuestionnaireItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Item, {
+		"data-slot": "questionnaire-item",
+		className: cn("flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", className),
+		...props
+	});
+}
+function QuestionnaireTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Title, {
+		"data-slot": "questionnaire-title",
+		className: cn("font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4", className),
+		...props
+	});
+}
+function QuestionnaireDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Description, {
+		"data-slot": "questionnaire-description",
+		className: cn("text-sm text-pretty text-muted-foreground", className),
+		...props
+	});
+}
+function QuestionnaireChoices({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Choices, {
+		"data-slot": "questionnaire-choices",
+		className: cn("group/questionnaire-choices grid min-w-0 gap-2", className),
+		...props
+	});
+}
+function QuestionnaireChoice({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Questionnaire$1.Choice, {
+		"data-slot": "questionnaire-choice",
+		className: cn("group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceInput, {
+				"data-slot": "questionnaire-choice-input",
+				className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-slot": "questionnaire-choice-indicator",
+				className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "questionnaire-choice-indicator-dot",
+					className: "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				}), /* @__PURE__ */ jsx(CheckIcon, {
+					"data-slot": "questionnaire-choice-indicator-check",
+					className: "hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceLabel, {
+				"data-slot": "questionnaire-choice-label",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug",
+				children
+			}),
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceShortcut, {
+				"data-slot": "questionnaire-choice-shortcut",
+				className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+			})
+		]
+	});
+}
+function QuestionnaireChoiceDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "questionnaire-choice-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+function QuestionnaireInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-input-wrapper",
+		className: "group/questionnaire-input relative w-full min-w-0",
+		children: /* @__PURE__ */ jsx(Questionnaire$1.Input, {
+			"data-slot": "questionnaire-input",
+			className: cn("h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground", className),
+			...props
+		})
+	});
+}
+function QuestionnaireError({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Error, {
+		"data-slot": "questionnaire-error",
+		className: cn("mt-2 text-sm text-destructive", className),
+		...props
+	});
+}
+function QuestionnaireActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-actions",
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8", className),
+		...props
+	});
+}
+function QuestionnairePrevious({ children, className, size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Previous, {
+		"data-slot": "questionnaire-previous",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0", className),
+		...props,
+		children: children ?? "Previous"
+	});
+}
+function QuestionnaireSkip({ children, className, size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Skip, {
+		"data-slot": "questionnaire-skip",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Skip"
+	});
+}
+function QuestionnaireNext({ children, className, size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Next, {
+		"data-slot": "questionnaire-next",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Next"
+	});
+}
+function QuestionnaireSubmit({ children, className, size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Submit, {
+		"data-slot": "questionnaire-submit",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Submit"
+	});
+}
+//#endregion
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,7 @@
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/components/ui/radio-group.d.ts
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): import("react").JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props): import("react").JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/radio-group.js

@@ -0,0 +1,26 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/components/ui/radio-group.tsx
+function RadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-slot": "radio-group",
+		className: cn("grid w-full gap-2", className),
+		...props
+	});
+}
+function RadioGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+		})
+	});
+}
+//#endregion
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/resizable.d.ts

@@ -0,0 +1,9 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/components/ui/resizable.d.ts
+declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react").JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): import("react").JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/resizable.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/components/ui/resizable.tsx
+function ResizablePanelGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		"data-slot": "resizable-panel-group",
+		className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+function ResizablePanel({ ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		"data-slot": "resizable-handle",
+		className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/sidebar.js

@@ -1,6 +1,6 @@
 import { Button } from "./button.js";
-import { Input } from "./input.js";
 import { Separator } from "./separator.js";
+import { Input } from "./input.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
 import { useIsMobile } from "../../hooks/use-mobile.js";
 import { Skeleton } from "./skeleton.js";

package/dist/components/ui/spinner.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/ui/spinner.d.ts
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
+//#endregion
+export { Spinner };

package/dist/components/ui/spinner.js

@@ -0,0 +1,15 @@
+import { cn } from "cn";
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/spinner.tsx
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+//#endregion
+export { Spinner };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,7 @@
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/ui/switch.d.ts
+declare function Switch({ className, size, ...props }: Switch$1.Root.Props & {
+  size?: "sm" | "default";
+}): import("react").JSX.Element;
+//#endregion
+export { Switch };

package/dist/components/ui/switch.js

@@ -0,0 +1,19 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/ui/switch.tsx
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+		})
+	});
+}
+//#endregion
+export { Switch };

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

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+//#region src/components/ui/toast.d.ts
+declare const toast: import("@base-ui/react").ToastManager<any>;
+declare function ToastProvider({ ...props }: Toast$1.Provider.Props): React$1.JSX.Element;
+declare function ToastPortal({ ...props }: Toast$1.Portal.Props): React$1.JSX.Element;
+declare function ToastViewport({ className, ...props }: Toast$1.Viewport.Props): React$1.JSX.Element;
+declare function Toast({ className, ...props }: Toast$1.Root.Props): React$1.JSX.Element;
+declare function ToastContent({ className, ...props }: Toast$1.Content.Props): React$1.JSX.Element;
+declare function ToastTitle({ className, ...props }: Toast$1.Title.Props): React$1.JSX.Element;
+declare function ToastDescription({ className, ...props }: Toast$1.Description.Props): React$1.JSX.Element;
+declare function ToastAction({ className, render, ...props }: Toast$1.Action.Props): React$1.JSX.Element;
+declare function ToastClose({ className, children, render, ...props }: Toast$1.Close.Props): React$1.JSX.Element;
+declare function Toaster({ children, toastManager, ...props }: Toast$1.Provider.Props): React$1.JSX.Element;
+declare const createToastManager: typeof Toast$1.createToastManager;
+declare const useToastManager: typeof Toast$1.useToastManager;
+//#endregion
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/components/ui/toast.js

@@ -0,0 +1,123 @@
+"use client";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+//#region src/components/ui/toast.tsx
+const toast = Toast$1.createToastManager();
+function ToastProvider({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
+}
+function ToastPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Portal, {
+		"data-slot": "toast-portal",
+		...props
+	});
+}
+function ToastViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.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 }) {
+	return /* @__PURE__ */ jsx(Toast$1.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-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "[--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 }) {
+	return /* @__PURE__ */ jsx(Toast$1.Content, {
+		"data-slot": "toast-content",
+		className: cn("flex h-full items-center gap-3 overflow-hidden p-4 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 }) {
+	return /* @__PURE__ */ jsx(Toast$1.Title, {
+		"data-slot": "toast-title",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Description, {
+		"data-slot": "toast-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+function ToastAction({ className, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "sm"
+}), ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Action, {
+		"data-slot": "toast-action",
+		render,
+		className: cn("shrink-0", className),
+		...props
+	});
+}
+function ToastClose({ className, children, render = /* @__PURE__ */ jsx(Button, {
+	variant: "ghost",
+	size: "icon-sm"
+}), ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Close, {
+		"data-slot": "toast-close",
+		"aria-label": "Close toast",
+		render,
+		className: cn("relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+	});
+}
+function ToastIcon({ type }) {
+	let icon = null;
+	if (type === "success") icon = /* @__PURE__ */ jsx(CircleCheckIcon, { "aria-hidden": "true" });
+	if (type === "info") icon = /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" });
+	if (type === "warning") icon = /* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": "true" });
+	if (type === "error") icon = /* @__PURE__ */ jsx(OctagonXIcon, {
+		className: "text-destructive",
+		"aria-hidden": "true"
+	});
+	if (type === "loading") icon = /* @__PURE__ */ jsx(Loader2Icon, {
+		className: "animate-spin",
+		"aria-hidden": "true"
+	});
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toast-icon",
+		className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+		children: icon
+	});
+}
+function ToastList() {
+	const { toasts } = Toast$1.useToastManager();
+	return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast, {
+		toast: toastItem,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
+			}),
+			/* @__PURE__ */ jsx(ToastAction, {}),
+			/* @__PURE__ */ jsx(ToastClose, {})
+		] })
+	}, toastItem.id));
+}
+function Toaster({ children, toastManager = toast, ...props }) {
+	return /* @__PURE__ */ jsxs(ToastProvider, {
+		toastManager,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, { children: /* @__PURE__ */ jsx(ToastList, {}) }) })]
+	});
+}
+const createToastManager = Toast$1.createToastManager;
+const useToastManager = Toast$1.useToastManager;
+//#endregion
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/components/ui/trace.d.ts

@@ -0,0 +1,20 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import * as React$1 from "react";
+//#region src/components/ui/trace.d.ts
+declare function Trace({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function TraceLine({ className, status, ...props }: React$1.ComponentProps<"span"> & {
+  status?: "running" | "error" | "pending";
+}): React$1.JSX.Element;
+declare function TraceIcon({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function TraceTitle({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function TraceDescription({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function TraceCollapsible({ className, ...props }: Omit<React$1.ComponentProps<typeof Collapsible>, "open"> & ({
+  open?: undefined;
+} | {
+  open: boolean;
+  onOpenChange: NonNullable<React$1.ComponentProps<typeof Collapsible>["onOpenChange"]>;
+})): React$1.JSX.Element;
+declare function TraceCollapsibleTrigger({ className, children, ...props }: React$1.ComponentProps<typeof CollapsibleTrigger>): React$1.JSX.Element;
+declare function TraceCollapsibleContent({ className, children, ...props }: React$1.ComponentProps<typeof CollapsibleContent>): React$1.JSX.Element;
+//#endregion
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };

package/dist/components/ui/trace.js

@@ -0,0 +1,75 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/ui/trace.tsx
+function Trace({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "trace",
+		className: cn("flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50", className),
+		...props
+	});
+}
+function TraceLine({ className, status, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-line",
+		"data-status": status,
+		className: cn("flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer", className),
+		...props
+	});
+}
+function TraceIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-icon",
+		"aria-hidden": "true",
+		className: cn("flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1", className),
+		...props
+	});
+}
+function TraceTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-title",
+		className: cn("min-w-0 truncate motion-reduce:shimmer-none", className),
+		...props
+	});
+}
+function TraceDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-description",
+		className: cn("shrink-0 text-muted-foreground/70 tabular-nums", className),
+		...props
+	});
+}
+function TraceCollapsible({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible, {
+		"data-slot": "trace-collapsible",
+		className: cn("flex w-full min-w-0 flex-col", className),
+		...props
+	});
+}
+function TraceCollapsibleTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		"data-slot": "trace-collapsible-trigger",
+		className: cn("group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TraceIcon, {
+			className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})]
+	});
+}
+function TraceCollapsibleContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-slot": "trace-collapsible-content",
+		className: "h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "trace-collapsible-content-inner",
+			className: cn("mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };