@waveso/ui 0.7.7 → 0.8.0

package/README.md

@@ -137,11 +137,11 @@ npm install @waveso/ui @base-ui/react class-variance-authority clsx tailwind-mer
 
 ## Setup
 
-Add the theme preset and Tailwind to your CSS entry point:
+Import Tailwind, then the Wave UI preset, in your CSS entry point:
 
 ```css
-@import "@waveso/ui/styles.css";
 @import "tailwindcss";
+@import "@waveso/ui/styles.css";
 ```
 
 The preset provides every CSS variable (colors, radii, motion, shadows) with light and dark support. Override any variable in your own `:root` / `.dark` blocks to customize the theme.
@@ -193,7 +193,6 @@ Some components have optional peer dependencies — install only what you use:
 - **Form** — `react-hook-form`
 - **Input OTP** — `input-otp`
 - **Animations** — `motion`
-- **Sidebar** — `usehooks-ts`
 
 ## Development
 

package/dist/accordion.d.ts

@@ -26,5 +26,4 @@ declare function AccordionContent({
   ...props
 }: AccordionContentProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
-//# sourceMappingURL=accordion.d.ts.map
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion.js

@@ -55,5 +55,3 @@ function AccordionContent({ className, children, ...props }) {
 }
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
-
-//# sourceMappingURL=accordion.js.map

package/dist/action-bar.d.ts

@@ -79,5 +79,4 @@ declare function useActionBar(id: string, entry: ActionBarEntry): void;
  */
 declare function useActionBarGuard(navigate: (href: string) => void): (href: string) => boolean;
 //#endregion
-export { ActionBarEntry, ActionBarProvider, ActionBarProviderProps, useActionBar, useActionBarGuard };
-//# sourceMappingURL=action-bar.d.ts.map
+export { ActionBarEntry, ActionBarProvider, ActionBarProviderProps, useActionBar, useActionBarGuard };

package/dist/action-bar.js

@@ -49,12 +49,13 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 	const [, forceUpdate] = React.useState(0);
 	const [jiggleTransform, setJiggleTransform] = React.useState(null);
 	const jiggleTimerRef = React.useRef(null);
-	const contentRef = React.useRef(null);
+	const blockedNoticeRafRef = React.useRef(null);
 	const isMac = useIsMac();
 	const prefersReducedMotion = useReducedMotion();
 	const reducedMotionRef = React.useRef(prefersReducedMotion);
 	reducedMotionRef.current = prefersReducedMotion;
 	const [blockedNotice, setBlockedNotice] = React.useState("");
+	const [saveError, setSaveError] = React.useState(false);
 	const register = React.useCallback((id, entry) => {
 		const prev = entriesRef.current.get(id);
 		entriesRef.current.set(id, entry);
@@ -69,7 +70,11 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 	}, []);
 	const jiggle = React.useCallback(() => {
 		setBlockedNotice("");
-		requestAnimationFrame(() => setBlockedNotice(blockedMessage));
+		if (blockedNoticeRafRef.current !== null) cancelAnimationFrame(blockedNoticeRafRef.current);
+		blockedNoticeRafRef.current = requestAnimationFrame(() => {
+			blockedNoticeRafRef.current = null;
+			setBlockedNotice(blockedMessage);
+		});
 		if (reducedMotionRef.current) return;
 		if (jiggleTimerRef.current) return;
 		let step = 0;
@@ -87,6 +92,12 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 		}
 		tick();
 	}, [blockedMessage]);
+	React.useEffect(() => {
+		return () => {
+			if (jiggleTimerRef.current !== null) clearTimeout(jiggleTimerRef.current);
+			if (blockedNoticeRafRef.current !== null) cancelAnimationFrame(blockedNoticeRafRef.current);
+		};
+	}, []);
 	const dirty = [];
 	let anySaving = false;
 	for (const entry of entriesRef.current.values()) {
@@ -97,15 +108,20 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 	const dirtyCount = dirty.length;
 	const displayMessage = dirtyCount > 1 ? pluralMessage(dirtyCount) : message;
 	const handleSaveAll = React.useCallback(async () => {
+		setSaveError(false);
 		const saves = [...entriesRef.current.values()].filter((e) => e.hasChanges).map((e) => e.onSave());
-		await Promise.all(saves);
+		try {
+			await Promise.all(saves);
+		} catch {
+			setSaveError(true);
+		}
 	}, []);
 	const handleResetAll = React.useCallback(() => {
 		for (const entry of entriesRef.current.values()) if (entry.hasChanges) entry.onReset();
 	}, []);
 	React.useEffect(() => {
 		function handleKeyDown(e) {
-			if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
 				e.preventDefault();
 				if (hasDirty()) handleSaveAll();
 			}
@@ -136,7 +152,6 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				"data-slot": "action-bar-shell",
-				ref: contentRef,
 				style: jiggleTransform ? { transform: jiggleTransform } : void 0,
 				children
 			}),
@@ -150,7 +165,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 				"data-slot": "action-bar-blocked-status",
 				"aria-live": "assertive",
 				className: "sr-only",
-				children: blockedNotice
+				children: saveError ? "Couldn't save your changes" : blockedNotice
 			}),
 			/* @__PURE__ */ jsx(AnimatePresence, { children: showBar && /* @__PURE__ */ jsx(motion.div, {
 				"data-slot": "action-bar",
@@ -185,8 +200,8 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 					className: cn("flex items-center gap-6 rounded-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line backdrop-blur-sm", className),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
-						className: "whitespace-nowrap text-sm font-medium text-contrast",
-						children: displayMessage
+						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-destructive" : "text-contrast"),
+						children: saveError ? "Couldn't save your changes" : displayMessage
 					}), /* @__PURE__ */ jsxs("div", {
 						"data-slot": "action-bar-actions",
 						className: "flex items-center gap-1.5",
@@ -260,5 +275,3 @@ function useActionBarGuard(navigate) {
 }
 //#endregion
 export { ActionBarProvider, useActionBar, useActionBarGuard };
-
-//# sourceMappingURL=action-bar.js.map

package/dist/alert-dialog.d.ts

@@ -67,5 +67,4 @@ declare function AlertDialogCancel({
   ...props
 }: AlertDialogCancelProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
-//# sourceMappingURL=alert-dialog.d.ts.map
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/alert-dialog.js

@@ -93,5 +93,3 @@ function AlertDialogCancel({ className, variant = "outline", size = "default", .
 }
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
-
-//# sourceMappingURL=alert-dialog.js.map

package/dist/alert.d.ts

@@ -29,5 +29,4 @@ declare function AlertAction({
   ...props
 }: AlertActionProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Alert, AlertAction, AlertDescription, AlertTitle };
-//# sourceMappingURL=alert.d.ts.map
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/alert.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-const alertVariants = cva("grid gap-0.5 rounded-md border border-edge px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
+const alertVariants = cva("grid gap-0.5 rounded-md border border-edge px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:data-[icon]:col-start-1 *:data-[icon]:row-span-2 *:data-[icon]:translate-y-0.5 *:data-[icon]:text-current *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
 	variants: { variant: {
 		default: "bg-surface text-contrast",
 		destructive: "text-destructive bg-surface *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
@@ -28,7 +28,7 @@ function AlertTitle({ className, ...props }) {
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("text-muted [&_a]:hover:text-contrast text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
+		className: cn("text-muted [&_a]:hover:text-contrast group-has-data-[icon]/alert:col-start-2 text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
 		...props
 	});
 }
@@ -41,5 +41,3 @@ function AlertAction({ className, ...props }) {
 }
 //#endregion
 export { Alert, AlertAction, AlertDescription, AlertTitle };
-
-//# sourceMappingURL=alert.js.map

package/dist/animate.d.ts

@@ -189,5 +189,4 @@ declare function Float({
   paused
 }: FloatProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { AnimateIn, type AnimateInProps, AnimateOnView, type AnimateOnViewProps, type Direction, Float, type FloatProps, Pulse, type PulseProps, Stagger, type StaggerProps };
-//# sourceMappingURL=animate.d.ts.map
+export { AnimateIn, type AnimateInProps, AnimateOnView, type AnimateOnViewProps, type Direction, Float, type FloatProps, Pulse, type PulseProps, Stagger, type StaggerProps };

package/dist/animate.js

@@ -1,9 +1,15 @@
 "use client";
-import { Children, cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useInView, useReducedMotion } from "motion/react";
 //#region src/animate.tsx
 /**
+* `useLayoutEffect` warns when run during SSR. Fall back to `useEffect` on the
+* server so entrance components (which render on the server to avoid hydration
+* mismatch) stay warning-free while still committing pre-paint in the browser.
+*/
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
 * Direction map: `from` means where the element COMES FROM.
 * `from="left"` = starts to the left, slides right into place.
 */
@@ -108,14 +114,23 @@ function buildTransitionStr(duration, ease, delay, hasFilter) {
 function AnimateOnView({ children, delay = 0, from = "down", distance = 16, scale = false, blur = false, rotate = 0, flip = false, spring = false, once = true, transition }) {
 	const ref = useRef(null);
 	const [hydrated, setHydrated] = useState(false);
+	const [settled, setSettled] = useState(false);
 	const isInView = useInView(ref, {
 		once,
 		margin: "-50px"
 	});
 	const prefersReducedMotion = useReducedMotion();
-	useEffect(() => {
+	useIsomorphicLayoutEffect(() => {
 		setHydrated(true);
 	}, []);
+	useEffect(() => {
+		if (!isInView) setSettled(false);
+	}, [isInView]);
+	const existingOnTransitionEnd = children.props?.onTransitionEnd;
+	const handleTransitionEnd = useCallback((event) => {
+		if (event.target === ref.current) setSettled(true);
+		existingOnTransitionEnd?.(event);
+	}, [existingOnTransitionEnd]);
 	if (!isValidElement(children)) return children;
 	const childProps = children.props;
 	const existingStyle = childProps.style ?? {};
@@ -141,11 +156,12 @@ function AnimateOnView({ children, delay = 0, from = "down", distance = 16, scal
 	const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
 	return cloneElement(children, {
 		ref: mergeRefs(ref, existingRef),
+		onTransitionEnd: handleTransitionEnd,
 		style: {
 			...existingStyle,
 			...currentStyle,
 			...isInView ? { transition: transitionStr } : {},
-			willChange: "opacity, transform"
+			...isInView && !settled ? { willChange: "opacity, transform" } : {}
 		}
 	});
 }
@@ -165,12 +181,23 @@ function AnimateOnView({ children, delay = 0, from = "down", distance = 16, scal
 function AnimateIn({ children, delay = 0, from = "down", distance = 4, scale = false, blur = false, rotate = 0, flip = false, spring = false, transition }) {
 	const ref = useRef(null);
 	const [visible, setVisible] = useState(false);
+	const [settled, setSettled] = useState(false);
 	const prefersReducedMotion = useReducedMotion();
 	useEffect(() => {
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => setVisible(true));
+		let inner = 0;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => setVisible(true));
 		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
 	}, []);
+	const existingOnTransitionEnd = children.props?.onTransitionEnd;
+	const handleTransitionEnd = useCallback((event) => {
+		if (event.target === ref.current) setSettled(true);
+		existingOnTransitionEnd?.(event);
+	}, [existingOnTransitionEnd]);
 	if (!isValidElement(children)) return children;
 	const childProps = children.props;
 	const existingStyle = childProps.style ?? {};
@@ -195,11 +222,12 @@ function AnimateIn({ children, delay = 0, from = "down", distance = 4, scale = f
 	const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
 	return cloneElement(children, {
 		ref: mergeRefs(ref, existingRef),
+		onTransitionEnd: handleTransitionEnd,
 		style: {
 			...existingStyle,
 			...currentStyle,
 			...visible ? { transition: transitionStr } : {},
-			willChange: "opacity, transform"
+			...visible && !settled ? { willChange: "opacity, transform" } : {}
 		}
 	});
 }
@@ -305,5 +333,3 @@ function Float({ children, distance = 6, duration = 3, rotate = 0, paused = fals
 }
 //#endregion
 export { AnimateIn, AnimateOnView, Float, Pulse, Stagger };
-
-//# sourceMappingURL=animate.js.map

package/dist/aspect-ratio.d.ts

@@ -11,5 +11,4 @@ declare function AspectRatio({
   ...props
 }: AspectRatioProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { AspectRatio, type AspectRatioProps };
-//# sourceMappingURL=aspect-ratio.d.ts.map
+export { AspectRatio, type AspectRatioProps };

package/dist/aspect-ratio.js

@@ -12,5 +12,3 @@ function AspectRatio({ ratio, className, ...props }) {
 }
 //#endregion
 export { AspectRatio };
-
-//# sourceMappingURL=aspect-ratio.js.map

package/dist/autocomplete.d.ts

@@ -110,5 +110,4 @@ declare function AutocompleteContent({
   ...props
 }: AutocompleteContentProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Autocomplete, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue };
-//# sourceMappingURL=autocomplete.d.ts.map
+export { Autocomplete, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue };

package/dist/autocomplete.js

@@ -156,5 +156,3 @@ function AutocompleteContent({ className, align = "start", alignOffset = 0, side
 }
 //#endregion
 export { Autocomplete, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue };
-
-//# sourceMappingURL=autocomplete.js.map

package/dist/avatar.d.ts

@@ -37,5 +37,4 @@ declare function AvatarGroupCount({
   ...props
 }: AvatarGroupCountProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
-//# sourceMappingURL=avatar.d.ts.map
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/avatar.js

@@ -29,7 +29,7 @@ function AvatarFallback({ className, ...props }) {
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
-		className: cn("bg-primary text-white ring-foundation absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		className: cn("bg-primary text-white ring-foundation absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
 		...props
 	});
 }
@@ -49,5 +49,3 @@ function AvatarGroupCount({ className, ...props }) {
 }
 //#endregion
 export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
-
-//# sourceMappingURL=avatar.js.map

package/dist/badge.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "link" | "success" | "destructive" | "warning" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "success" | "warning" | "secondary" | "outline" | "ghost" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({
@@ -15,5 +15,4 @@ declare function Badge({
   ...props
 }: BadgeProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
 //#endregion
-export { Badge, badgeVariants };
-//# sourceMappingURL=badge.d.ts.map
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -33,5 +33,3 @@ function Badge({ className, variant = "default", render, ...props }) {
 }
 //#endregion
 export { Badge, badgeVariants };
-
-//# sourceMappingURL=badge.js.map

package/dist/breadcrumb.d.ts

@@ -40,5 +40,4 @@ declare function BreadcrumbEllipsis({
   ...props
 }: BreadcrumbEllipsisProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
-//# sourceMappingURL=breadcrumb.d.ts.map
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/breadcrumb.js

@@ -70,5 +70,3 @@ function BreadcrumbEllipsis({ className, ...props }) {
 }
 //#endregion
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
-
-//# sourceMappingURL=breadcrumb.js.map

package/dist/button-group.d.ts

@@ -28,5 +28,4 @@ declare function ButtonGroupSeparator({
   ...props
 }: ButtonGroupSeparatorProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
-//# sourceMappingURL=button-group.d.ts.map
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/button-group.js

@@ -40,5 +40,3 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 }
 //#endregion
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
-
-//# sourceMappingURL=button-group.js.map

package/dist/button.d.ts

@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "success" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "success" | "secondary" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon" | "lg" | "xl" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
 declare function Button({
@@ -17,5 +17,4 @@ declare function Button({
   ...props
 }: ButtonProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Button, buttonVariants };
-//# sourceMappingURL=button.d.ts.map
+export { Button, buttonVariants };

package/dist/button.js

@@ -46,5 +46,3 @@ function Button({ className, variant = "default", size = "default", ...props })
 }
 //#endregion
 export { Button, buttonVariants };
-
-//# sourceMappingURL=button.js.map

package/dist/card.d.ts

@@ -41,5 +41,4 @@ declare function CardFooter({
   ...props
 }: CardFooterProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
-//# sourceMappingURL=card.d.ts.map
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/card.js

@@ -54,5 +54,3 @@ function CardFooter({ className, ...props }) {
 }
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
-
-//# sourceMappingURL=card.js.map

package/dist/checkbox.d.ts

@@ -9,5 +9,4 @@ declare function Checkbox({
   ...props
 }: CheckboxProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Checkbox };
-//# sourceMappingURL=checkbox.d.ts.map
+export { Checkbox };

package/dist/checkbox.js

@@ -1,23 +1,21 @@
 "use client";
 import { cn } from "./lib/utils.js";
-import { CheckIcon } from "./lib/internal-icons.js";
+import { CheckIcon, MinusIcon } from "./lib/internal-icons.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/checkbox.tsx
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white dark:data-checked:bg-primary dark:data-indeterminate:bg-primary data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
 		...props,
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
-			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			className: "group/indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "col-start-1 row-start-1 group-data-indeterminate/indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "col-start-1 row-start-1 hidden group-data-indeterminate/indicator:block" })]
 		})
 	});
 }
 //#endregion
 export { Checkbox };
-
-//# sourceMappingURL=checkbox.js.map

package/dist/collapsible.d.ts

@@ -17,5 +17,4 @@ declare function CollapsibleContent({
   ...props
 }: CollapsibleContentProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsibleTrigger };
-//# sourceMappingURL=collapsible.d.ts.map
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/collapsible.js

@@ -25,5 +25,3 @@ function CollapsibleContent({ ...props }) {
 }
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
-
-//# sourceMappingURL=collapsible.js.map

package/dist/combobox.d.ts

@@ -104,5 +104,4 @@ declare function ComboboxChipsInput({
 }: ComboboxChipsInputProps): _$react_jsx_runtime0.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
-//# sourceMappingURL=combobox.d.ts.map
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/combobox.js

@@ -186,5 +186,3 @@ function useComboboxAnchor() {
 }
 //#endregion
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
-
-//# sourceMappingURL=combobox.js.map

package/dist/context-menu.d.ts

@@ -104,5 +104,4 @@ declare function ContextMenuShortcut({
   ...props
 }: ContextMenuShortcutProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
-//# sourceMappingURL=context-menu.d.ts.map
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/context-menu.js

@@ -74,7 +74,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -139,5 +139,3 @@ function ContextMenuShortcut({ className, ...props }) {
 }
 //#endregion
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
-
-//# sourceMappingURL=context-menu.js.map

package/dist/count.d.ts

@@ -83,5 +83,4 @@ declare function Count({
 /** @deprecated Use `Count` instead */
 declare const CountUp: typeof Count;
 //#endregion
-export { Count, type CountProps, CountUp, type CountUpProps, easeOut };
-//# sourceMappingURL=count.d.ts.map
+export { Count, type CountProps, CountUp, type CountUpProps, easeOut };

package/dist/count.js

@@ -160,16 +160,21 @@ function DateCount({ to, delay, format, prefix, suffix, children, once, onComple
 	]);
 	useEffect(() => {
 		if (!started) return;
+		let interval;
 		const tick = () => {
 			const ms = Math.max(0, to.getTime() - Date.now());
 			setRemaining(ms);
-			if (ms <= 0 && !completedRef.current) {
-				completedRef.current = true;
-				onComplete?.();
+			if (ms <= 0) {
+				clearInterval(interval);
+				if (!completedRef.current) {
+					completedRef.current = true;
+					onComplete?.();
+				}
+				return true;
 			}
+			return false;
 		};
-		tick();
-		const interval = setInterval(tick, 1e3);
+		if (!tick()) interval = setInterval(tick, 1e3);
 		return () => clearInterval(interval);
 	}, [
 		started,
@@ -187,5 +192,3 @@ function DateCount({ to, delay, format, prefix, suffix, children, once, onComple
 const CountUp = Count;
 //#endregion
 export { Count, CountUp, easeOut };
-
-//# sourceMappingURL=count.js.map

package/dist/dialog.d.ts

@@ -71,5 +71,4 @@ declare function DialogDescription({
   ...props
 }: DialogDescriptionProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
-//# sourceMappingURL=dialog.d.ts.map
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/dialog.js

@@ -91,5 +91,3 @@ function DialogDescription({ className, ...props }) {
 }
 //#endregion
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
-
-//# sourceMappingURL=dialog.js.map

package/dist/drawer.d.ts

@@ -55,5 +55,4 @@ declare function DrawerDescription({
   ...props
 }: DrawerDescriptionProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
-//# sourceMappingURL=drawer.d.ts.map
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/drawer.js

@@ -97,5 +97,3 @@ function DrawerDescription({ className, ...props }) {
 }
 //#endregion
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
-
-//# sourceMappingURL=drawer.js.map