@glyphui/ui 0.4.0 → 0.5.0

package/dist/register.d.ts

@@ -0,0 +1,57 @@
+import { avatarStyles } from "./components/avatar/avatar.styles.js";
+import { badgeStyles } from "./components/badge/badge.styles.js";
+import { buttonStyles } from "./components/button/button.styles.js";
+import { cardStyles } from "./components/card/card.styles.js";
+import { checkboxStyles } from "./components/checkbox/checkbox.js";
+import { eyebrowStyles } from "./components/eyebrow/eyebrow.styles.js";
+import { fieldStyles } from "./components/field/field.styles.js";
+import { headingStyles } from "./components/heading/heading.styles.js";
+import { inputStyles } from "./components/input/input.styles.js";
+import { kbdStyles } from "./components/kbd/kbd.js";
+import { labelStyles } from "./components/label/label.js";
+import { segmentedControlStyles } from "./components/segmented-control/segmented-control.js";
+import { selectStyles } from "./components/select/select.js";
+import { separatorStyles } from "./components/separator/separator.js";
+import { skeletonStyles } from "./components/skeleton/skeleton.js";
+import { spinnerStyles } from "./components/spinner/spinner.styles.js";
+import { switchStyles } from "./components/switch/switch.js";
+import { tableStyles } from "./components/table/table.js";
+import { tabsStyles } from "./components/tabs/tabs.js";
+import { textStyles } from "./components/text/text.styles.js";
+import { textareaStyles } from "./components/textarea/textarea.js";
+import { tooltipStyles } from "./components/tooltip/tooltip.js";
+import { appShellStyles, navbarStyles, pageHeaderStyles, sidebarStyles } from "./patterns/app-shell/app-shell.styles.js";
+import { stateStyles } from "./patterns/async/states.js";
+import { StylesEntry } from "./utils/registry.js";
+//#region src/register.d.ts
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AppShell: StylesEntry<typeof appShellStyles>;
+    Avatar: StylesEntry<typeof avatarStyles>;
+    Badge: StylesEntry<typeof badgeStyles>;
+    Button: StylesEntry<typeof buttonStyles>;
+    Card: StylesEntry<typeof cardStyles>;
+    Checkbox: StylesEntry<typeof checkboxStyles>;
+    EmptyState: StylesEntry<typeof stateStyles>;
+    Eyebrow: StylesEntry<typeof eyebrowStyles>;
+    Field: StylesEntry<typeof fieldStyles>;
+    Heading: StylesEntry<typeof headingStyles>;
+    Input: StylesEntry<typeof inputStyles>;
+    Kbd: StylesEntry<typeof kbdStyles>;
+    Label: StylesEntry<typeof labelStyles>;
+    Navbar: StylesEntry<typeof navbarStyles>;
+    PageHeader: StylesEntry<typeof pageHeaderStyles>;
+    SegmentedControl: StylesEntry<typeof segmentedControlStyles>;
+    Select: StylesEntry<typeof selectStyles>;
+    Separator: StylesEntry<typeof separatorStyles>;
+    Sidebar: StylesEntry<typeof sidebarStyles>;
+    Skeleton: StylesEntry<typeof skeletonStyles>;
+    Spinner: StylesEntry<typeof spinnerStyles>;
+    Switch: StylesEntry<typeof switchStyles>;
+    Table: StylesEntry<typeof tableStyles>;
+    Tabs: StylesEntry<typeof tabsStyles>;
+    Text: StylesEntry<typeof textStyles>;
+    Textarea: StylesEntry<typeof textareaStyles>;
+    Tooltip: StylesEntry<typeof tooltipStyles>;
+  }
+}

package/dist/themes.d.ts

@@ -0,0 +1,22 @@
+import "./register.js";
+//#region src/themes.d.ts
+/**
+ * Built-in themes: the token presets from @glyphui/tokens plus per-component recipes.
+ * Extend any of them in your theme file: `defineTheme({ name: 'acme', extends: presets.glyph, ... })`.
+ */
+/** Precise, dark-first, one electric-blue accent, layered soft shadows, Geist. */
+export declare const glyph: import("@glyphui/tokens").Theme;
+/** Zero radius, heavy borders, hard offset shadows, loud color. */
+export declare const brutalist: import("@glyphui/tokens").Theme;
+/** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
+export declare const editorial: import("@glyphui/tokens").Theme;
+/** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
+export declare const playful: import("@glyphui/tokens").Theme;
+export declare const presets: {
+  readonly glyph: import("@glyphui/tokens").Theme;
+  readonly brutalist: import("@glyphui/tokens").Theme;
+  readonly editorial: import("@glyphui/tokens").Theme;
+  readonly playful: import("@glyphui/tokens").Theme;
+};
+export type PresetName = keyof typeof presets;
+//#endregion

package/dist/themes.js

@@ -0,0 +1,49 @@
+"use client";
+import { defineTheme, presets } from "@glyphui/tokens";
+//#region src/themes.ts
+/**
+* Built-in themes: the token presets from @glyphui/tokens plus per-component recipes.
+* Extend any of them in your theme file: `defineTheme({ name: 'acme', extends: presets.glyph, ... })`.
+*/
+/** Precise, dark-first, one electric-blue accent, layered soft shadows, Geist. */
+const glyph = presets.glyph;
+/** Zero radius, heavy borders, hard offset shadows, loud color. */
+const brutalist = /* @__PURE__ */ defineTheme({
+	name: "brutalist",
+	extends: presets.brutalist,
+	components: {
+		Button: { className: { base: "font-bold uppercase tracking-wide shadow-sm hover:-translate-x-px hover:-translate-y-px hover:shadow-md active:translate-x-[3px] active:translate-y-[3px] active:shadow-none" } },
+		Badge: { className: { base: "font-bold uppercase" } },
+		Card: { defaultVariants: { variant: "elevated" } },
+		Heading: { className: { base: "uppercase" } },
+		Input: { className: { root: "shadow-sm focus-within:ring-0 focus-within:shadow-md" } }
+	}
+});
+/** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
+const editorial = /* @__PURE__ */ defineTheme({
+	name: "editorial",
+	extends: presets.editorial,
+	components: {
+		Card: { defaultVariants: { variant: "outline" } },
+		Eyebrow: { className: { base: "font-sans tracking-[0.18em]" } },
+		Button: { className: { base: "tracking-wide" } }
+	}
+});
+/** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
+const playful = /* @__PURE__ */ defineTheme({
+	name: "playful",
+	extends: presets.playful,
+	components: {
+		Button: { className: { base: "font-bold hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97]" } },
+		Card: { defaultVariants: { variant: "elevated" } },
+		Badge: { className: { base: "font-semibold" } }
+	}
+});
+const presets$1 = {
+	glyph,
+	brutalist,
+	editorial,
+	playful
+};
+//#endregion
+export { brutalist, editorial, glyph, playful, presets$1 as presets };

package/dist/utils/cn.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+//#region src/utils/cn.d.ts
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export type { ClassValue };

package/dist/utils/cn.js

@@ -0,0 +1,12 @@
+"use client";
+import { twMergeConfig } from "./tw-merge-config.js";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/utils/cn.ts
+const twMerge = extendTailwindMerge(twMergeConfig);
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };

package/dist/utils/compose-refs.js

@@ -0,0 +1,11 @@
+"use client";
+//#region src/utils/compose-refs.ts
+/** Combines several refs into one callback ref. */
+function composeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+//#endregion
+export { composeRefs };

package/dist/{registry-BGSJoiLq.d.ts → utils/registry.d.ts}

@@ -2,8 +2,7 @@ import { ComponentEntry } from "@glyphui/tokens";
 import { VariantProps } from "tailwind-variants";
 //#region src/utils/registry.d.ts
 /** Derives a registry entry (variant props + slot names) from a component's `tv()` styles. */
-type StylesEntry<T extends ((...args: any) => any) & {
+export type StylesEntry<T extends ((...args: any) => any) & {
   slots: unknown;
 }> = ComponentEntry<VariantProps<T>, Extract<keyof NonNullable<T['slots']>, string>>;
-//#endregion
-export { StylesEntry as t };
+//#endregion

package/dist/utils/styles.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,translate,scale,opacity] duration-(--glyph-duration-base) ease-standard";
+/**
+* Enter and exit for anything Radix positions next to a trigger: springs out of the trigger
+* (pair with the primitive's transform-origin class) and leaves quickly. Distance and scale
+* follow the motion level; the side moves it toward the trigger.
+*/
+const popoverMotion = "animate-pop-in data-[state=closed]:animate-pop-out data-[side=bottom]:[--glyph-motion-y:calc(var(--glyph-motion-distance)*-1)] data-[side=top]:[--glyph-motion-y:var(--glyph-motion-distance)] data-[side=left]:[--glyph-motion-x:var(--glyph-motion-distance)] data-[side=right]:[--glyph-motion-x:calc(var(--glyph-motion-distance)*-1)]";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = `z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg ${popoverMotion}`;
+/** Dimmed backdrop behind dialogs and sheets. */
+const overlayMotion = "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out";
+/** Centered dialogs: rise and scale in on the theme's spring, settle out quickly. */
+const dialogMotion = "animate-dialog-in data-[state=closed]:animate-dialog-out";
+//#endregion
+export { dialogMotion, focusRing, overlayMotion, popover, popoverMotion, themedBorder, transition };

package/dist/{tv-DuMh7UH2.d.ts → utils/tv.d.ts}

@@ -1,6 +1,6 @@
 import { VariantProps as VariantProps$1 } from "tailwind-variants";
 //#region src/utils/tv.d.ts
 /** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
-declare const tv: import("tailwind-variants").TV;
+export declare const tv: import("tailwind-variants").TV;
 //#endregion
-export { tv as n, VariantProps$1 as t };
+export type { VariantProps$1 as VariantProps };

package/dist/utils/tv.js

@@ -0,0 +1,8 @@
+"use client";
+import { twMergeConfig } from "./tw-merge-config.js";
+import { createTV } from "tailwind-variants";
+//#region src/utils/tv.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+const tv = createTV({ twMergeConfig });
+//#endregion
+export { tv };

package/dist/utils/tw-merge-config.js

@@ -0,0 +1,13 @@
+"use client";
+import { textTokens } from "@glyphui/tokens";
+//#region src/utils/tw-merge-config.ts
+/**
+* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+* keeps only the last size instead of treating `text-h1` as a color.
+*/
+const twMergeConfig = { extend: { theme: {
+	text: [...textTokens],
+	radius: ["pill"]
+} } };
+//#endregion
+export { twMergeConfig };

package/dist/vite.d.ts

@@ -1,4 +1,4 @@
-import { t as ColorModeOptions } from "./color-mode-script-KdwItKN2.js";
+import { ColorModeOptions } from "./provider/color-mode-script.js";
 //#region src/integrations/vite.d.ts
 /** The subset of Vite's `Plugin` this plugin uses, so `vite` stays an optional peer. */
 export interface GlyphVitePlugin {

package/dist/vite.js

@@ -1,5 +1,5 @@
 "use client";
-import { r as getColorModeScript } from "./color-mode-script-Bf7LYkOj.js";
+import { getColorModeScript } from "./provider/color-mode-script.js";
 //#region src/integrations/vite.ts
 /**
 * Injects Glyph's color-mode script into `index.html` so dark-mode visitors never see a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
   "license": "MIT",
   "author": "Mohak Gupta (https://github.com/khalmohak)",
@@ -78,13 +78,14 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
-    "@glyphui/tokens": "^0.4.0",
+    "@glyphui/tokens": "^0.5.0",
     "@standard-schema/spec": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
+    "motion": "14.0.0",
     "radix-ui": "^1.6.7",
     "react-day-picker": "^9.14.0",
     "react-resizable-panels": "^3.0.6",

package/src/components/accordion/accordion.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const accordionStyles = tv({
+export const accordionStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'w-full',
     item: '',

package/src/components/alert/alert.styles.ts

@@ -3,7 +3,7 @@ import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
 // Soft fills per tone. Icon color is mixed toward the foreground so it stays readable in both modes.
-export const alertStyles = tv({
+export const alertStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['relative flex w-full items-start gap-3 rounded-md px-4 py-3 text-small', themedBorder],
     icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',

package/src/components/alert-dialog/alert-dialog.styles.ts

@@ -1,13 +1,14 @@
 import type { StylesEntry } from '../../utils/registry'
-import { themedBorder } from '../../utils/styles'
+import { dialogMotion, overlayMotion, themedBorder } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const alertDialogStyles = tv({
+export const alertDialogStyles = /* @__PURE__ */ tv({
   slots: {
-    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    overlay: ['fixed inset-0 z-50 bg-overlay', overlayMotion],
     content: [
       'fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-5',
-      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in',
+      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none',
+      dialogMotion,
       themedBorder,
     ],
     header: 'flex flex-col gap-1.5',

package/src/components/alert-dialog/confirm-dialog.tsx

@@ -0,0 +1,42 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog'
+import type { ConfirmOptions } from './confirm'
+
+export interface ConfirmDialogProps {
+  open: boolean
+  options: ConfirmOptions
+  onSettle: (confirmed: boolean) => void
+}
+
+/** The dialog behind `useConfirm()`. Loaded lazily by ConfirmProvider. */
+export function ConfirmDialog({ open, options, onSettle }: ConfirmDialogProps) {
+  const danger = options.tone === 'danger'
+  return (
+    <AlertDialog open={open} onOpenChange={(next) => !next && onSettle(false)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{options.title}</AlertDialogTitle>
+          {options.description && (
+            <AlertDialogDescription>{options.description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => onSettle(false)}>
+            {options.cancelLabel ?? 'Cancel'}
+          </AlertDialogCancel>
+          <AlertDialogAction tone={options.tone} onClick={() => onSettle(true)}>
+            {options.confirmLabel ?? (danger ? 'Delete' : 'Confirm')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/src/components/alert-dialog/confirm.tsx

@@ -1,22 +1,14 @@
 import {
   createContext,
+  lazy,
   type ReactNode,
+  Suspense,
   useCallback,
   useContext,
   useMemo,
   useRef,
   useState,
 } from 'react'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from './alert-dialog'
 
 export interface ConfirmOptions {
   title: ReactNode
@@ -31,6 +23,11 @@ export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>
 
 const ConfirmContext = createContext<ConfirmFn | null>(null)
 
+// The dialog loads the first time confirm() is called, so apps that never confirm don't ship it.
+const ConfirmDialog = lazy(() =>
+  import('./confirm-dialog').then((m) => ({ default: m.ConfirmDialog })),
+)
+
 interface Pending {
   options: ConfirmOptions
   resolve: (value: boolean) => void
@@ -64,31 +61,15 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
 
   const value = useMemo(() => confirm, [confirm])
   const options = pending?.options
-  const danger = options?.tone === 'danger'
 
   return (
     <ConfirmContext.Provider value={value}>
       {children}
-      <AlertDialog open={open} onOpenChange={(next) => !next && settle(false)}>
-        {options && (
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>{options.title}</AlertDialogTitle>
-              {options.description && (
-                <AlertDialogDescription>{options.description}</AlertDialogDescription>
-              )}
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel onClick={() => settle(false)}>
-                {options.cancelLabel ?? 'Cancel'}
-              </AlertDialogCancel>
-              <AlertDialogAction tone={options.tone} onClick={() => settle(true)}>
-                {options.confirmLabel ?? (danger ? 'Delete' : 'Confirm')}
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        )}
-      </AlertDialog>
+      {options && (
+        <Suspense fallback={null}>
+          <ConfirmDialog open={open} options={options} onSettle={settle} />
+        </Suspense>
+      )}
     </ConfirmContext.Provider>
   )
 }

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -4,7 +4,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const aspectRatioStyles = tv({
+export const aspectRatioStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover',
   },

package/src/components/avatar/avatar.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const avatarStyles = tv({
+export const avatarStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-muted align-middle',
     image: 'size-full object-cover',

package/src/components/badge/badge.styles.ts

@@ -38,7 +38,7 @@ const tones = {
 type Tone = keyof typeof tones
 type Variant = keyof (typeof tones)[Tone]
 
-export const badgeStyles = tv({
+export const badgeStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'inline-flex h-5.5 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2',

package/src/components/banner/banner.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const bannerStyles = tv({
+export const bannerStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['w-full border-b-(length:--glyph-border-width) text-small'],
     inner: 'mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-2.5 sm:px-6',

package/src/components/blockquote/blockquote.tsx

@@ -3,7 +3,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const blockquoteStyles = tv({
+export const blockquoteStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-3 border-l-2 border-primary pl-5',
     quote: 'font-display text-pretty text-foreground',

package/src/components/breadcrumb/breadcrumb.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const breadcrumbStyles = tv({
+export const breadcrumbStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'min-w-0',
     list: 'flex flex-wrap items-center gap-1.5 text-small text-muted-foreground',

package/src/components/button/button.styles.ts

@@ -1,7 +1,7 @@
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const buttonStyles = tv({
+export const buttonStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap',
@@ -10,6 +10,8 @@ export const buttonStyles = tv({
       transition,
       focusRing,
       'disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress',
+      // Press feedback. CSS only, so Button stays free of animation libraries.
+      'active:scale-[0.98] motion-expressive:active:scale-[0.95]',
     ],
     icon: 'inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full',
   },
@@ -23,7 +25,7 @@ export const buttonStyles = tv({
       ghost: { base: 'text-muted-foreground hover:bg-muted hover:text-foreground' },
       danger: { base: 'bg-danger text-danger-foreground shadow-sm hover:bg-danger/88' },
       link: {
-        base: 'h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline',
+        base: 'h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline active:scale-100 motion-expressive:active:scale-100',
       },
     },
     size: {

package/src/components/calendar/calendar.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const calendarStyles = tv({
+export const calendarStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative w-fit p-3 text-small text-foreground',
     months: 'relative flex flex-col gap-6 sm:flex-row',

package/src/components/card/card.styles.ts

@@ -1,7 +1,7 @@
 import { themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const cardStyles = tv({
+export const cardStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['flex flex-col rounded-lg text-foreground', themedBorder, transition],
     header: 'flex flex-col gap-1',

package/src/components/carousel/carousel.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const carouselStyles = tv({
+export const carouselStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative',
     viewport: 'overflow-hidden rounded-lg',

package/src/components/checkbox/checkbox.tsx

@@ -1,12 +1,12 @@
 import { Checkbox as CheckboxPrimitive } from 'radix-ui'
-import type { ComponentProps } from 'react'
+import { type ComponentProps, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { CheckIcon, MinusIcon } from '../../internal/icons'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 
-export const checkboxStyles = tv({
+export const checkboxStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       'peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs',
@@ -18,20 +18,35 @@ export const checkboxStyles = tv({
       'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
-    indicator: 'flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]',
+    indicator: [
+      'flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]',
+      // Draws the tick when the user checks it (not for boxes already checked on load).
+      '[--glyph-draw-length:24] data-[animate]:[&_path]:animate-draw',
+    ],
   },
 })
 
 export function Checkbox(inProps: ComponentProps<typeof CheckboxPrimitive.Root>) {
-  const [{ className, ...rest }, slots] = useComponentConfig('Checkbox', useFieldControl(inProps))
+  const [{ className, onCheckedChange, ...rest }, slots] = useComponentConfig(
+    'Checkbox',
+    useFieldControl(inProps),
+  )
   const s = checkboxStyles()
+  const [changed, setChanged] = useState(false)
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={s.root({ class: [slots.root, className] })}
+      onCheckedChange={(checked) => {
+        setChanged(true)
+        onCheckedChange?.(checked)
+      }}
       {...rest}
     >
-      <CheckboxPrimitive.Indicator className={s.indicator({ class: slots.indicator })}>
+      <CheckboxPrimitive.Indicator
+        data-animate={changed || undefined}
+        className={s.indicator({ class: slots.indicator })}
+      >
         {rest.checked === 'indeterminate' ? <MinusIcon /> : <CheckIcon />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>

package/src/components/code/code.styles.ts

@@ -2,13 +2,13 @@ import type { StylesEntry } from '../../utils/registry'
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const codeStyles = tv({
+export const codeStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground',
   },
 })
 
-export const codeBlockStyles = tv({
+export const codeBlockStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle', themedBorder],
     header:

package/src/components/collapsible/collapsible.tsx

@@ -4,7 +4,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { tv } from '../../utils/tv'
 
-export const collapsibleStyles = tv({
+export const collapsibleStyles = /* @__PURE__ */ tv({
   slots: {
     root: '',
     trigger: '',