@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/css/{violet.css → themes/violet.css}

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.702 0.183 293.541); /* --color-violet-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.702 0.183 293.541); /* --color-violet-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.541 0.281 293.009); /* --color-violet-600 */
   --sidebar-primary-foreground: oklch(0.969 0.016 293.756); /* --color-violet-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.702 0.183 293.541); /* --color-violet-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.38 0.189 293.745); /* --color-violet-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.38 0.189 293.745); /* --color-violet-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.606 0.25 292.717); /* --color-violet-500 */
   --sidebar-primary-foreground: oklch(0.969 0.016 293.756); /* --color-violet-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.38 0.189 293.745); /* --color-violet-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.491 0.27 292.581); /* --color-violet-700 */
   --chart-5: oklch(0.432 0.232 292.759); /* --color-violet-800 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.606 0.25 292.717); /* --color-violet-500 */
+    --primary-foreground: oklch(0.969 0.016 293.756); /* --color-violet-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.38 0.189 293.745); /* --color-violet-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.606 0.25 292.717); /* --color-violet-500 */
+    --sidebar-primary-foreground: oklch(0.969 0.016 293.756); /* --color-violet-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.38 0.189 293.745); /* --color-violet-900 */
+
+    --chart-1: oklch(0.811 0.111 293.571); /* --color-violet-300 */
+    --chart-2: oklch(0.606 0.25 292.717); /* --color-violet-500 */
+    --chart-3: oklch(0.541 0.281 293.009); /* --color-violet-600 */
+    --chart-4: oklch(0.491 0.27 292.581); /* --color-violet-700 */
+    --chart-5: oklch(0.432 0.232 292.759); /* --color-violet-800 */
+  }
+}

package/src/css/{yellow.css → themes/yellow.css}

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.852 0.199 91.936); /* --color-yellow-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.852 0.199 91.936); /* --color-yellow-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.681 0.162 75.834); /* --color-yellow-600 */
   --sidebar-primary-foreground: oklch(0.987 0.026 102.212); /* --color-yellow-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.852 0.199 91.936); /* --color-yellow-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.795 0.184 86.047); /* --color-yellow-500 */
   --sidebar-primary-foreground: oklch(0.987 0.026 102.212); /* --color-yellow-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.554 0.135 66.442); /* --color-yellow-700 */
   --chart-5: oklch(0.476 0.114 61.907); /* --color-yellow-800 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.795 0.184 86.047); /* --color-yellow-500 */
+    --primary-foreground: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.795 0.184 86.047); /* --color-yellow-500 */
+    --sidebar-primary-foreground: oklch(0.987 0.026 102.212); /* --color-yellow-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.421 0.095 57.708); /* --color-yellow-900 */
+
+    --chart-1: oklch(0.905 0.182 98.111); /* --color-yellow-300 */
+    --chart-2: oklch(0.795 0.184 86.047); /* --color-yellow-500 */
+    --chart-3: oklch(0.681 0.162 75.834); /* --color-yellow-600 */
+    --chart-4: oklch(0.554 0.135 66.442); /* --color-yellow-700 */
+    --chart-5: oklch(0.476 0.114 61.907); /* --color-yellow-800 */
+  }
+}

package/src/css/{zinc.css → themes/zinc.css}

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
   --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */
   --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+    --primary-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
+
+    --chart-1: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --chart-2: oklch(0.696 0.17 162.48); /* --color-emerald-500 */
+    --chart-3: oklch(0.769 0.188 70.08); /* --color-amber-500 */
+    --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */
+    --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */
+  }
+}

package/src/hooks/use-animated-value.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 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>;
+ * ```
+ *
+ * @since 0.3.16-canary.0
+ */
+export function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number {
+  // 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: number;
+
+    // RAF step
+    const animateValue = (currentTime: number): void => {
+      // 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 (): void => {
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [actualTargetValue, duration, animate]);
+
+  return Math.round(animatedValue);
+}

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+/**
+ * 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>
+ * ```
+ *
+ * @since 0.3.16-canary.0
+ */
+export function useCopyToClipboard({ onCopy, timeout = 2000 }: { onCopy?: () => void; timeout?: number } = {}): {
+  copyToClipboard: (value: string) => Promise<void>;
+  isCopied: boolean;
+} {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = async (value: string): Promise<void> => {
+    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 };
+}

package/src/hooks/use-is-mobile.ts

@@ -0,0 +1,25 @@
+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
+ * }
+ * ```
+ *
+ * @since 0.3.16-canary.0
+ */
+export function useIsMobile(mobileBreakpoint = 768): boolean {
+  return useMediaQuery(`(max-width: ${(mobileBreakpoint - 1).toString()}px)`);
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Event handler for MediaQueryList changes.
+ *
+ * @param event - Media query change event providing the updated match status.
+ */
+type MediaQueryChangeHandler = (event: MediaQueryListEvent) => void;
+
+/**
+ * Subscribe to a CSS media query and receive its match state.
+ *
+ * Evaluates the query immediately (when supported) and updates on changes
+ * via an event listener.
+ *
+ * @param query - A valid media query string (e.g., "(max-width: 768px)").
+ * @returns true when the media query currently matches; otherwise false.
+ *
+ * @example
+ * ```tsx
+ * const isNarrow = useMediaQuery("(max-width: 768px)");
+ * ```
+ *
+ * @since 0.3.16-canary.0
+ */
+export function useMediaQuery(query: string): boolean {
+  /**
+   * State to store whether the query matches.
+   * The initial value is calculated based on the current window state.
+   */
+  const [matches, setMatches] = useState<boolean>(() => {
+    // Ensure initial state matches current media query status
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      return window.matchMedia(query).matches;
+    }
+
+    return false;
+  });
+
+  useEffect(() => {
+    // Only run in a browser environment where matchMedia is available
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    /**
+     * MediaQueryList to evaluate and observe the provided query.
+     */
+    const mediaQueryList = window.matchMedia(query);
+
+    /**
+     * Update state when the media query status changes.
+     */
+    const onChange: MediaQueryChangeHandler = (event): void => {
+      setMatches(event.matches);
+    };
+
+    mediaQueryList.addEventListener("change", onChange);
+
+    /**
+     * Remove the event listener on unmount or when the query changes.
+     */
+    return (): void => {
+      mediaQueryList.removeEventListener("change", onChange);
+    };
+  }, [query]);
+
+  return matches;
+}