@codefast/ui 0.3.11 → 0.3.12-canary.0

package/dist/components/toggle-group.js

@@ -1,53 +1,35 @@
 "use client";
-import { toggleVariants } from "./toggle.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
-import { jsx } from "react/jsx-runtime";
 import { createContextScope } from "@radix-ui/react-context";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
-//#region src/components/toggle-group.tsx
+import { toggleVariants } from "#components/toggle";
+/* -----------------------------------------------------------------------------
+ * Context: ToggleGroup
+ * -------------------------------------------------------------------------- */
 const TOGGLE_GROUP_NAME = "ToggleGroup";
 const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
 const useToggleGroupScope = createToggleGroupScope();
 const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
 function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing = 0, variant, ...props }) {
-	const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
-	return /* @__PURE__ */ jsx(ToggleGroupProvider, {
-		scope: __scopeToggleGroup,
-		size,
-		spacing,
-		variant,
-		children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
-			className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-lg data-[spacing=default]:data-[variant=outline]:shadow-xs", className),
-			"data-size": size,
-			"data-slot": "toggle-group",
-			"data-spacing": spacing,
-			"data-variant": variant,
-			style: { "--gap": spacing },
-			...toggleGroupScope,
-			...props,
-			children
-		})
-	});
+    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+    return (_jsx(ToggleGroupProvider, { scope: __scopeToggleGroup, size: size, spacing: spacing, variant: variant, children: _jsx(ToggleGroupPrimitive.Root, { className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-lg data-[spacing=default]:data-[variant=outline]:shadow-xs", className), "data-size": size, "data-slot": "toggle-group", "data-spacing": spacing, "data-variant": variant, style: { "--gap": spacing }, ...toggleGroupScope, ...props, children: children }) }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: ToggleGroupItem
+ * -------------------------------------------------------------------------- */
 const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
 function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props }) {
-	const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
-	const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
-	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
-		className: cn(toggleVariants({
-			className,
-			size,
-			variant
-		}), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-lg data-[spacing=0]:last:rounded-r-lg data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l"),
-		"data-size": size,
-		"data-slot": "toggle-group-item",
-		"data-spacing": spacing,
-		"data-variant": variant,
-		...toggleGroupScope,
-		...props,
-		children
-	});
+    const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
+    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+    return (_jsx(ToggleGroupPrimitive.Item, { className: cn(toggleVariants({
+            className,
+            size,
+            variant,
+        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-lg data-[spacing=0]:last:rounded-r-lg data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l"), "data-size": size, "data-slot": "toggle-group-item", "data-spacing": spacing, "data-variant": variant, ...toggleGroupScope, ...props, children: children }));
 }
-//#endregion
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
 export { ToggleGroup, ToggleGroupItem };

package/dist/components/toggle.d.ts

@@ -1,28 +1,21 @@
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
-import { VariantProps } from "@codefast/tailwind-variants";
-import { ComponentProps, JSX } from "react";
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-
-//#region src/components/toggle.d.ts
-declare const toggleVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
-  size: {
-    default: string;
-    lg: string;
-    sm: string;
-  };
-  variant: {
-    default: string;
-    outline: string;
-  };
+declare const toggleVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
+    size: {
+        default: string;
+        lg: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        outline: string;
+    };
 }, Record<string, never>>;
 type ToggleVariants = VariantProps<typeof toggleVariants>;
-interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
-declare function Toggle({
-  children,
-  className,
-  size,
-  variant,
-  ...props
-}: ToggleProps): JSX.Element;
-//#endregion
-export { Toggle, type ToggleProps, type ToggleVariants, toggleVariants };
+interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {
+}
+declare function Toggle({ children, className, size, variant, ...props }: ToggleProps): JSX.Element;
+export { Toggle, toggleVariants };
+export type { ToggleProps, ToggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAM1D,QAAA,MAAM,cAAc;;;;;;;;;;yBAkBlB,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAM1D,UAAU,WAAY,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,cAAc;CAAG;AAE5F,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAU1F;AAMD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -1,37 +1,32 @@
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "@codefast/tailwind-variants";
-import { jsx } from "react/jsx-runtime";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-//#region src/components/toggle.tsx
+/* -----------------------------------------------------------------------------
+ * Variant: Toggle
+ * -------------------------------------------------------------------------- */
 const toggleVariants = tv({
-	base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-	variants: {
-		size: {
-			default: "h-9 min-w-9 px-2",
-			lg: "h-10 min-w-10 px-2.5",
-			sm: "h-8 min-w-8 px-1.5"
-		},
-		variant: {
-			default: "bg-transparent",
-			outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	}
+    base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+        size: {
+            default: "h-9 min-w-9 px-2",
+            lg: "h-10 min-w-10 px-2.5",
+            sm: "h-8 min-w-8 px-1.5",
+        },
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        variant: "default",
+    },
 });
 function Toggle({ children, className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
-		className: toggleVariants({
-			className,
-			size,
-			variant
-		}),
-		"data-slot": "toggle",
-		...props,
-		children
-	});
+    return (_jsx(TogglePrimitive.Root, { className: toggleVariants({ className, size, variant }), "data-slot": "toggle", ...props, children: children }));
 }
-//#endregion
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
 export { Toggle, toggleVariants };

package/dist/components/tooltip.d.ts

@@ -1,30 +1,15 @@
-import { ComponentProps, JSX } from "react";
+import type { ComponentProps, JSX } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-//#region src/components/tooltip.d.ts
 type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
-declare function TooltipProvider({
-  ...props
-}: TooltipProviderProps): JSX.Element;
+declare function TooltipProvider({ ...props }: TooltipProviderProps): JSX.Element;
 type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
-declare function Tooltip({
-  ...props
-}: TooltipProps): JSX.Element;
+declare function Tooltip({ ...props }: TooltipProps): JSX.Element;
 type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
-declare function TooltipTrigger({
-  ...props
-}: TooltipTriggerProps): JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipTriggerProps): JSX.Element;
 type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
-declare function TooltipContent({
-  children,
-  className,
-  sideOffset,
-  ...props
-}: TooltipContentProps): JSX.Element;
+declare function TooltipContent({ children, className, sideOffset, ...props }: TooltipContentProps): JSX.Element;
 type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
-declare function TooltipArrow({
-  className,
-  ...props
-}: TooltipArrowProps): JSX.Element;
-//#endregion
-export { Tooltip, TooltipArrow, type TooltipArrowProps, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };
+declare function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element;
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps, };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,KAAK,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAE7E,iBAAS,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAExE;AAMD,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAExD;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAEtE;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAmBnC;AAMD,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEvE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAQ7E;AAMD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAClF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,CAAC"}

package/dist/components/tooltip.js

@@ -1,42 +1,23 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-//#region src/components/tooltip.tsx
 function TooltipProvider({ ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
-		"data-slot": "tooltip-provider",
-		...props
-	});
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", ...props });
 }
 function Tooltip({ ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
-		"data-slot": "tooltip",
-		...props
-	});
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
-		"data-slot": "tooltip-trigger",
-		...props
-	});
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ children, className, sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
-		className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2", "max-w-(--radix-tooltip-content-available-width)", className),
-		collisionPadding: 8,
-		"data-slot": "tooltip-content",
-		sideOffset,
-		...props,
-		children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
-	}) });
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2", "max-w-(--radix-tooltip-content-available-width)", className), collisionPadding: 8, "data-slot": "tooltip-content", sideOffset: sideOffset, ...props, children: [children, _jsx(TooltipArrow, {})] }) }));
 }
 function TooltipArrow({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
-		className: cn("fill-primary", className),
-		"data-slot": "tooltip-arrow",
-		...props
-	});
+    return (_jsx(TooltipPrimitive.Arrow, { className: cn("fill-primary", className), "data-slot": "tooltip-arrow", ...props }));
 }
-//#endregion
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/hooks/use-animated-value.d.ts

@@ -1,4 +1,3 @@
-//#region src/hooks/use-animated-value.d.ts
 /**
  * Produce a smoothly animated numeric value in response to changes.
  *
@@ -16,6 +15,5 @@
  * return <div>{value}%</div>;
  * ```
  */
-declare function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number;
-//#endregion
-export { useAnimatedValue };
+export declare function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number;
+//# sourceMappingURL=use-animated-value.d.ts.map

package/dist/hooks/use-animated-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-animated-value.d.ts","sourceRoot":"","sources":["../../src/hooks/use-animated-value.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,IAAI,GAAG,MAAM,EAC1B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,GAChB,MAAM,CAqER"}

package/dist/hooks/use-animated-value.js

@@ -1,62 +1,71 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
-//#region src/hooks/use-animated-value.ts
 /**
-* Produce a smoothly animated numeric value in response to changes.
-*
-* Applies a time-based easing (easeOutQuad) between the current and target values
-* over the specified duration. When disabled, the value updates immediately.
-*
-* @param targetValue - Target number to animate toward; null resolves to 0.
-* @param duration - Animation duration in milliseconds.
-* @param animate - When false, bypasses animation and sets the value directly.
-* @returns The current (rounded) animated value.
-*
-* @example
-* ```tsx
-* const value = useAnimatedValue(75, 1000, true);
-* return <div>{value}%</div>;
-* ```
-*/
-function useAnimatedValue(targetValue, duration, animate) {
-	const actualTargetValue = targetValue ?? 0;
-	const [animatedValue, setAnimatedValue] = useState(actualTargetValue);
-	const animatedValueRef = useRef(actualTargetValue);
-	useEffect(() => {
-		animatedValueRef.current = animatedValue;
-	}, [animatedValue]);
-	useEffect(() => {
-		if (!animate) {
-			setAnimatedValue(actualTargetValue);
-			return;
-		}
-		const currentValue = animatedValueRef.current;
-		const valueRange = actualTargetValue - currentValue;
-		const startTime = performance.now();
-		if (duration <= 0 || valueRange === 0) {
-			setAnimatedValue(actualTargetValue);
-			return;
-		}
-		let animationFrame;
-		const animateValue = (currentTime) => {
-			const elapsedTime = currentTime - startTime;
-			if (elapsedTime >= duration) setAnimatedValue(actualTargetValue);
-			else {
-				const progress = elapsedTime / duration;
-				setAnimatedValue(currentValue + valueRange * (1 - (1 - progress) * (1 - progress)));
-				animationFrame = requestAnimationFrame(animateValue);
-			}
-		};
-		animationFrame = requestAnimationFrame(animateValue);
-		return () => {
-			cancelAnimationFrame(animationFrame);
-		};
-	}, [
-		actualTargetValue,
-		duration,
-		animate
-	]);
-	return Math.round(animatedValue);
+ * Produce a smoothly animated numeric value in response to changes.
+ *
+ * Applies a time-based easing (easeOutQuad) between the current and target values
+ * over the specified duration. When disabled, the value updates immediately.
+ *
+ * @param targetValue - Target number to animate toward; null resolves to 0.
+ * @param duration - Animation duration in milliseconds.
+ * @param animate - When false, bypasses animation and sets the value directly.
+ * @returns The current (rounded) animated value.
+ *
+ * @example
+ * ```tsx
+ * const value = useAnimatedValue(75, 1000, true);
+ * return <div>{value}%</div>;
+ * ```
+ */
+export function useAnimatedValue(targetValue, duration, animate) {
+    // Default to 0 when targetValue is null
+    const actualTargetValue = targetValue ?? 0;
+    // Current animated output
+    const [animatedValue, setAnimatedValue] = useState(actualTargetValue);
+    // Prevent stale closures inside RAF loop
+    const animatedValueRef = useRef(actualTargetValue);
+    useEffect(() => {
+        animatedValueRef.current = animatedValue;
+    }, [animatedValue]);
+    useEffect(() => {
+        if (!animate) {
+            setAnimatedValue(actualTargetValue);
+            return;
+        }
+        // Starting value
+        const currentValue = animatedValueRef.current;
+        // Total delta across the animation
+        const valueRange = actualTargetValue - currentValue;
+        // Start timestamp
+        const startTime = performance.now();
+        if (duration <= 0 || valueRange === 0) {
+            setAnimatedValue(actualTargetValue);
+            return;
+        }
+        // requestAnimationFrame id for cleanup
+        let animationFrame;
+        // RAF step
+        const animateValue = (currentTime) => {
+            // Elapsed milliseconds
+            const elapsedTime = currentTime - startTime;
+            if (elapsedTime >= duration) {
+                setAnimatedValue(actualTargetValue);
+            }
+            else {
+                // Linear progress (0..1)
+                const progress = elapsedTime / duration;
+                // easeOutQuad easing
+                const easeProgress = 1 - (1 - progress) * (1 - progress);
+                // Interpolated value
+                const nextValue = currentValue + valueRange * easeProgress;
+                setAnimatedValue(nextValue);
+                animationFrame = requestAnimationFrame(animateValue);
+            }
+        };
+        animationFrame = requestAnimationFrame(animateValue);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [actualTargetValue, duration, animate]);
+    return Math.round(animatedValue);
 }
-//#endregion
-export { useAnimatedValue };

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -1,4 +1,3 @@
-//#region src/hooks/use-copy-to-clipboard.d.ts
 /**
  * Provide clipboard copy capability with a transient copied state.
  *
@@ -16,15 +15,11 @@
  * <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
  * ```
  */
-declare function useCopyToClipboard({
-  onCopy,
-  timeout
-}?: {
-  onCopy?: () => void;
-  timeout?: number;
+export declare function useCopyToClipboard({ onCopy, timeout, }?: {
+    onCopy?: () => void;
+    timeout?: number;
 }): {
-  copyToClipboard: (value: string) => Promise<void>;
-  isCopied: boolean;
+    copyToClipboard: (value: string) => Promise<void>;
+    isCopied: boolean;
 };
-//#endregion
-export { useCopyToClipboard };
+//# sourceMappingURL=use-copy-to-clipboard.d.ts.map

package/dist/hooks/use-copy-to-clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-to-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-copy-to-clipboard.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAc,GACf,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG;IAClD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACnB,CAiCA"}

package/dist/hooks/use-copy-to-clipboard.js

@@ -1,43 +1,46 @@
 "use client";
 import { useState } from "react";
-//#region src/hooks/use-copy-to-clipboard.ts
 /**
-* Provide clipboard copy capability with a transient copied state.
-*
-* Internally uses the Clipboard API when available and sets a temporary
-* `isCopied` flag for UI feedback. A custom callback may be invoked upon copy.
-*
-* @param options - Configuration options.
-*   - onCopy: Callback invoked after a successful copy.
-*   - timeout: Duration in milliseconds to keep `isCopied` true. Defaults to 2000.
-* @returns An object with a `copyToClipboard` function and an `isCopied` flag.
-*
-* @example
-* ```tsx
-* const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500 });
-* <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
-* ```
-*/
-function useCopyToClipboard({ onCopy, timeout = 2e3 } = {}) {
-	const [isCopied, setIsCopied] = useState(false);
-	const copyToClipboard = async (value) => {
-		if (typeof window === "undefined" || !("clipboard" in navigator) || typeof navigator.clipboard.writeText !== "function") return;
-		if (!value) return;
-		try {
-			await navigator.clipboard.writeText(value);
-			setIsCopied(true);
-			if (onCopy) onCopy();
-			setTimeout(() => {
-				setIsCopied(false);
-			}, timeout);
-		} catch (error) {
-			console.error(error);
-		}
-	};
-	return {
-		copyToClipboard,
-		isCopied
-	};
+ * Provide clipboard copy capability with a transient copied state.
+ *
+ * Internally uses the Clipboard API when available and sets a temporary
+ * `isCopied` flag for UI feedback. A custom callback may be invoked upon copy.
+ *
+ * @param options - Configuration options.
+ *   - onCopy: Callback invoked after a successful copy.
+ *   - timeout: Duration in milliseconds to keep `isCopied` true. Defaults to 2000.
+ * @returns An object with a `copyToClipboard` function and an `isCopied` flag.
+ *
+ * @example
+ * ```tsx
+ * const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500 });
+ * <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
+ * ```
+ */
+export function useCopyToClipboard({ onCopy, timeout = 2000, } = {}) {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = async (value) => {
+        if (typeof window === "undefined" ||
+            !("clipboard" in navigator) ||
+            typeof navigator.clipboard.writeText !== "function") {
+            return;
+        }
+        if (!value) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(value);
+            setIsCopied(true);
+            if (onCopy) {
+                onCopy();
+            }
+            setTimeout(() => {
+                setIsCopied(false);
+            }, timeout);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    return { copyToClipboard, isCopied };
 }
-//#endregion
-export { useCopyToClipboard };

package/dist/hooks/use-is-mobile.d.ts

@@ -1,4 +1,3 @@
-//#region src/hooks/use-is-mobile.d.ts
 /**
  * Determine whether the current viewport should be treated as mobile.
  *
@@ -17,6 +16,5 @@
  * }
  * ```
  */
-declare function useIsMobile(mobileBreakpoint?: number): boolean;
-//#endregion
-export { useIsMobile };
+export declare function useIsMobile(mobileBreakpoint?: number): boolean;
+//# sourceMappingURL=use-is-mobile.d.ts.map

package/dist/hooks/use-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-mobile.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,gBAAgB,SAAM,GAAG,OAAO,CAE3D"}

package/dist/hooks/use-is-mobile.js

@@ -1,26 +1,23 @@
 "use client";
-import { useMediaQuery } from "./use-media-query.js";
-//#region src/hooks/use-is-mobile.ts
+import { useMediaQuery } from "#hooks/use-media-query";
 /**
-* Determine whether the current viewport should be treated as mobile.
-*
-* Uses {@link useMediaQuery} to evaluate a max-width media query derived from the
-* provided breakpoint. By default, widths below 768px are considered mobile.
-*
-* @param mobileBreakpoint - Pixel width used as the mobile breakpoint. Values strictly
-* less than this breakpoint are treated as mobile. Defaults to 768.
-* @returns true when the viewport width is less than the given breakpoint; otherwise false.
-*
-* @example
-* ```tsx
-* const isMobile = useIsMobile();
-* if (isMobile) {
-*   // Render compact layout
-* }
-* ```
-*/
-function useIsMobile(mobileBreakpoint = 768) {
-	return useMediaQuery(`(max-width: ${(mobileBreakpoint - 1).toString()}px)`);
+ * Determine whether the current viewport should be treated as mobile.
+ *
+ * Uses {@link useMediaQuery} to evaluate a max-width media query derived from the
+ * provided breakpoint. By default, widths below 768px are considered mobile.
+ *
+ * @param mobileBreakpoint - Pixel width used as the mobile breakpoint. Values strictly
+ * less than this breakpoint are treated as mobile. Defaults to 768.
+ * @returns true when the viewport width is less than the given breakpoint; otherwise false.
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useIsMobile();
+ * if (isMobile) {
+ *   // Render compact layout
+ * }
+ * ```
+ */
+export function useIsMobile(mobileBreakpoint = 768) {
+    return useMediaQuery(`(max-width: ${(mobileBreakpoint - 1).toString()}px)`);
 }
-//#endregion
-export { useIsMobile };

package/dist/hooks/use-media-query.d.ts

@@ -1,4 +1,3 @@
-//#region src/hooks/use-media-query.d.ts
 /**
  * Subscribe to a CSS media query and receive its match state.
  *
@@ -13,6 +12,5 @@
  * const isNarrow = useMediaQuery("(max-width: 768px)");
  * ```
  */
-declare function useMediaQuery(query: string): boolean;
-//#endregion
-export { useMediaQuery };
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=use-media-query.d.ts.map