@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/spinner/spinner.js

@@ -0,0 +1,143 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { loader } from "../tokens/dist/motion.js";
+import { useSound } from "../sound/sound.js";
+import { Arc } from "../loaders/arc.js";
+import { BouncingDots } from "../loaders/bouncing-dots.js";
+import { CircularDots } from "../loaders/circular-dots.js";
+import { Classic } from "../loaders/classic.js";
+import { Orbit } from "../loaders/orbit.js";
+import { Pulse } from "../loaders/pulse.js";
+import { Ring } from "../loaders/ring.js";
+import { Wave } from "../loaders/wave.js";
+import { useLoaderContext } from "./loader-provider.js";
+import { getLoader, registerLoaders } from "./registry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+// src/spinner/spinner.tsx
+registerLoaders({
+	arc: Arc,
+	ring: Ring,
+	classic: Classic,
+	"circular-dots": CircularDots,
+	"bouncing-dots": BouncingDots,
+	pulse: Pulse,
+	orbit: Orbit,
+	wave: Wave
+});
+/** The decorative glyph: a registered loader (Arc when the name isn't registered) or shadcn's Loader2. */
+function glyph(variant) {
+	if (variant !== "lucide") return React.createElement(getLoader(variant) ?? Arc);
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		"data-loader": "lucide",
+		className: "animate-spin",
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+/** Paused while scrolled out of view or while the tab is hidden (performance, #63). */
+function useOutOfSight(element, active) {
+	const [offscreen, setOffscreen] = React.useState(false);
+	const [hidden, setHidden] = React.useState(false);
+	React.useEffect(() => {
+		if (!active) return;
+		const el = element.current;
+		const onVisibility = () => setHidden(document.visibilityState === "hidden");
+		onVisibility();
+		document.addEventListener("visibilitychange", onVisibility);
+		let observer;
+		if (el && typeof IntersectionObserver !== "undefined") {
+			observer = new IntersectionObserver(([entry]) => setOffscreen(!entry?.isIntersecting));
+			observer.observe(el);
+		}
+		return () => {
+			document.removeEventListener("visibilitychange", onVisibility);
+			observer?.disconnect();
+		};
+	}, [element, active]);
+	return offscreen || hidden;
+}
+function Spinner({ variant = "arc", size, label, delay: delayProp, minDisplay = loader["min-display"], loading = true, duration, paused = false, sound = false, className, style, ...props }) {
+	const context = useLoaderContext();
+	const root = React.useRef(null);
+	const delay = delayProp ?? loader.delay;
+	const [phase, setPhase] = React.useState(!loading ? "hidden" : delay > 0 ? "pending" : "shown");
+	const shownAt = React.useRef(0);
+	const [wasLoading, setWasLoading] = React.useState(loading);
+	if (loading !== wasLoading) {
+		setWasLoading(loading);
+		if (loading && phase === "hidden") setPhase(delay > 0 ? "pending" : "shown");
+		if (!loading && phase === "pending") setPhase("hidden");
+	}
+	React.useEffect(() => {
+		if (phase === "shown") shownAt.current = Date.now();
+	}, [phase]);
+	React.useEffect(() => {
+		if (loading && phase === "pending") {
+			const timer = setTimeout(() => setPhase("shown"), delay);
+			return () => clearTimeout(timer);
+		}
+		if (!loading && phase === "shown") {
+			const left = shownAt.current + minDisplay - Date.now();
+			const timer = setTimeout(() => setPhase("hidden"), Math.max(0, left));
+			return () => clearTimeout(timer);
+		}
+	}, [
+		loading,
+		phase,
+		delay,
+		minDisplay
+	]);
+	const pendingRef = React.useCallback((node) => {
+		root.current = node;
+		if (node?.closest("button, [role=\"button\"], [data-slot=\"input-group\"]")) setPhase("shown");
+	}, []);
+	const outOfSight = useOutOfSight(root, phase === "shown");
+	const { loop } = useSound();
+	const audible = sound && phase === "shown" && !paused && !outOfSight;
+	React.useEffect(() => {
+		if (!audible) return;
+		return loop("progress.loop");
+	}, [audible, loop]);
+	if (phase === "hidden") return null;
+	if (phase === "pending") return /* @__PURE__ */ jsx("span", {
+		ref: pendingRef,
+		role: "status",
+		"data-slot": "spinner",
+		"data-pending": "",
+		className,
+		style,
+		...props
+	});
+	const vars = {
+		...size === void 0 && /(^|\s)size-/.test(className ?? "") ? { "--nsaa-loader-size": "100%" } : null,
+		...size === void 0 ? null : { "--nsaa-loader-size": typeof size === "number" ? `${size}px` : `var(--nsaa-loader-size-${size})` },
+		...duration === void 0 ? null : { "--nsaa-loader-duration": `${duration}ms` }
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		ref: root,
+		role: "status",
+		"data-slot": "spinner",
+		"data-variant": variant,
+		"data-loader-paused": paused || outOfSight ? "" : void 0,
+		className: cn("inline-flex shrink-0 items-center gap-1.5", className),
+		style: {
+			...vars,
+			...style
+		},
+		...props,
+		children: [glyph(variant), /* @__PURE__ */ jsx("span", {
+			"data-slot": "spinner-label",
+			className: "sr-only",
+			children: label ?? context.label ?? "Loading"
+		})]
+	});
+}
+export { Spinner };

package/dist/switch/index.d.ts

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

package/dist/switch/switch.d.ts

@@ -0,0 +1,6 @@
+
+import { Switch } from "@base-ui/react/switch";
+declare function Switch$1({ className, size, onCheckedChange, ...props }: Switch.Root.Props & {
+  size?: "sm" | "default";
+}): import("react").JSX.Element;
+export { Switch$1 as Switch };

package/dist/switch/switch.js

@@ -0,0 +1,25 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/switch/switch.tsx
+function Switch$1({ className, size = "default", onCheckedChange, ...props }) {
+	const cue = useCue("switch");
+	return /* @__PURE__ */ jsx(Switch.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),
+		onCheckedChange: (checked, details) => {
+			onCheckedChange?.(checked, details);
+			if (!details.isCanceled) cue(checked ? "on" : "off");
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.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"
+		})
+	});
+}
+export { Switch$1 as Switch };

package/dist/table/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/table/table.d.ts

@@ -0,0 +1,17 @@
+
+import * as React from "react";
+declare function Table({ className, containerProps, ...props }: React.ComponentProps<"table"> & {
+  /**
+   * Props for the scrolling container (Nsaa, #123). A table wider than its box scrolls inside it,
+   * so give it `tabIndex={0}`, `role="region"` and an `aria-label` to make it reachable by keyboard.
+   */
+  containerProps?: React.ComponentProps<"div">;
+}): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/table/table.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/table/table.tsx
+function Table({ className, containerProps, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		...containerProps,
+		className: cn("relative w-full overflow-x-auto", containerProps?.className),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("w-full caption-bottom text-sm", className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-sm text-muted-foreground", className),
+		...props
+	});
+}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tabs/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./tabs.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,11 @@
+
+import { VariantProps } from "class-variance-authority";
+import { Tabs } from "@base-ui/react/tabs";
+declare function Tabs$1({ className, orientation, ...props }: Tabs.Root.Props): import("react").JSX.Element;
+declare const tabsListVariants: (props?: ({
+  variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: Tabs.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: Tabs.Tab.Props): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs.Panel.Props): import("react").JSX.Element;
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/dist/tabs/tabs.js

@@ -0,0 +1,46 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Tabs } from "@base-ui/react/tabs";
+// src/tabs/tabs.tsx
+function Tabs$1({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+		...props
+	});
+}
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+	variants: { variant: {
+		default: "bg-muted",
+		line: "gap-1 bg-transparent"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function TabsList({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: cn(tabsListVariants({ variant }), className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("flex-1 text-sm outline-none", className),
+		...props
+	});
+}
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/dist/textarea/index.d.ts

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

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,4 @@
+
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/textarea/textarea.js

@@ -0,0 +1,12 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/textarea/textarea.tsx
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+export { Textarea };

package/dist/toast/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from "./toast.js";
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/toast/toast.d.ts

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

package/dist/toast/toast.js

@@ -0,0 +1,211 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { Arc } from "../loaders/arc.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Toast } from "@base-ui/react/toast";
+// src/toast/toast.tsx
+const toast = Toast.createToastManager();
+function ToastProvider({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, { ...props });
+}
+function ToastPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		...props
+	});
+}
+function ToastViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.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$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.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.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.Title, {
+		"data-slot": "toast-title",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.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.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.Close, {
+		"data-slot": "toast-close",
+		"aria-label": "Close toast",
+		"aria-hidden": false,
+		render,
+		className: cn("relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		})
+	});
+}
+function ToastIcon({ type }) {
+	let icon = null;
+	if (type === "success") icon = /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "m16 9-5.5 5.5L8 12" })]
+	});
+	if (type === "info") icon = /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+	if (type === "warning") icon = /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	});
+	if (type === "error") icon = /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "text-destructive",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+			/* @__PURE__ */ jsx("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }),
+			/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+		]
+	});
+	if (type === "loading") icon = /* @__PURE__ */ jsx(Arc, {});
+	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
+	});
+}
+/**
+* Nsaa feel layer (#108): success, warning and error toasts play their feedback cue once, when the
+* toast appears or when a promise toast settles into that type. Default, info and loading are silent.
+*/
+function useToastCues(toasts) {
+	const cue = useCue("toast");
+	const played = React.useRef(null);
+	React.useEffect(() => {
+		const first = played.current === null;
+		played.current ??= /* @__PURE__ */ new Map();
+		const activated = typeof navigator === "undefined" || navigator.userActivation?.hasBeenActive !== false;
+		for (const { id, type } of toasts) {
+			if (played.current.get(id) === type) continue;
+			played.current.set(id, type);
+			if (type && !first && activated) cue(type);
+		}
+		const live = new Set(toasts.map((t) => t.id));
+		for (const id of played.current.keys()) if (!live.has(id)) played.current.delete(id);
+	}, [toasts, cue]);
+}
+function ToastList() {
+	const { toasts } = Toast.useToastManager();
+	useToastCues(toasts);
+	return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast$1, {
+		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.createToastManager;
+const useToastManager = Toast.useToastManager;
+export { Toast$1 as Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,3 @@
+
+import { ToggleGroup, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize, ToggleGroupVariant } from "./toggle-group.js";
+export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant };