@glyphui/ui 0.3.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

@@ -0,0 +1,27 @@
+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 {
+  name: string;
+  transformIndexHtml: {
+    order: 'pre';
+    handler: () => {
+      tag: 'script';
+      children: string;
+      injectTo: 'head-prepend';
+    }[];
+  };
+}
+/**
+ * Injects Glyph's color-mode script into `index.html` so dark-mode visitors never see a
+ * light flash. Pass the same `defaultMode` and `storageKey` as `GlyphProvider`.
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { glyphColorMode } from '@glyphui/ui/vite'
+ * export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+ * ```
+ */
+export declare function glyphColorMode(options?: ColorModeOptions): GlyphVitePlugin;
+//#endregion
+export type { ColorModeOptions };

package/dist/vite.js

@@ -0,0 +1,29 @@
+"use client";
+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
+* light flash. Pass the same `defaultMode` and `storageKey` as `GlyphProvider`.
+*
+* ```ts
+* // vite.config.ts
+* import { glyphColorMode } from '@glyphui/ui/vite'
+* export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+* ```
+*/
+function glyphColorMode(options = {}) {
+	const script = getColorModeScript(options);
+	return {
+		name: "glyph:color-mode",
+		transformIndexHtml: {
+			order: "pre",
+			handler: () => [{
+				tag: "script",
+				children: script,
+				injectTo: "head-prepend"
+			}]
+		}
+	};
+}
+//#endregion
+export { glyphColorMode };

package/fonts.css

@@ -0,0 +1,10 @@
+/*
+ * Geist and Geist Mono, the fonts the default `glyph` theme uses. Import once, before the
+ * Glyph stylesheet:
+ *
+ *   @import "@glyphui/ui/fonts.css";
+ *   @import "tailwindcss";
+ *   @import "@glyphui/ui/styles.css";
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist-mono";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.3.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)",
@@ -24,7 +24,8 @@
     "theme",
     "dark-mode",
     "forms",
-    "data-table"
+    "data-table",
+    "react-router"
   ],
   "type": "module",
   "sideEffects": [
@@ -51,25 +52,40 @@
       "types": "./dist/chart.d.ts",
       "default": "./dist/chart.js"
     },
+    "./react-router": {
+      "@glyphui/source": "./src/integrations/react-router.tsx",
+      "types": "./dist/react-router.d.ts",
+      "default": "./dist/react-router.js"
+    },
+    "./vite": {
+      "@glyphui/source": "./src/integrations/vite.ts",
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
     "./styles.css": "./styles.css",
+    "./fonts.css": "./fonts.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "src",
     "styles.css",
+    "fonts.css",
     "!src/**/*.test.tsx",
     "!src/**/*.test-d.tsx",
     "!src/test"
   ],
   "dependencies": {
-    "@glyphui/tokens": "^0.3.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.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",
@@ -83,8 +99,10 @@
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": "^7.55.0",
+    "react-router": ">=7",
     "recharts": "^3.0.0",
-    "tailwindcss": ">=4.1"
+    "tailwindcss": ">=4.1",
+    "vite": ">=5"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
@@ -96,8 +114,14 @@
     "react-hook-form": {
       "optional": true
     },
+    "react-router": {
+      "optional": true
+    },
     "recharts": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -110,13 +134,16 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "@vitest/coverage-v8": "3.2.7",
     "jsdom": "^27.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.89.0",
+    "react-router": "^7.18.4",
     "recharts": "^3.10.1",
     "tsdown": "^0.23.0",
     "typescript": "~5.9.3",
+    "vite": "^7.3.6",
     "vitest": "^3.2.7",
     "zod": "^4.6.5"
   },
@@ -128,6 +155,7 @@
     "build": "tsdown",
     "typecheck": "tsc",
     "test": "vitest run",
-    "check:exports": "attw --pack . --profile esm-only --exclude-entrypoints ./styles.css"
+    "test:coverage": "vitest run --coverage",
+    "check:exports": "attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./fonts.css"
   }
 }

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

@@ -1,7 +1,7 @@
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-// Tinted text is mixed toward the foreground so it stays readable on light and dark surfaces.
+// Tinted text uses the theme's status text colors, which stay readable on tinted backgrounds.
 const tones = {
   neutral: {
     soft: 'bg-muted text-muted-foreground',
@@ -9,41 +9,36 @@ const tones = {
     outline: 'border-border-strong text-foreground',
   },
   primary: {
-    soft: 'bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+    soft: 'bg-primary/14 text-primary-text',
     solid: 'bg-primary text-primary-foreground',
-    outline:
-      'border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+    outline: 'border-primary/50 text-primary-text',
   },
   success: {
-    soft: 'bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+    soft: 'bg-success/14 text-success-text',
     solid: 'bg-success text-success-foreground',
-    outline:
-      'border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+    outline: 'border-success/50 text-success-text',
   },
   warning: {
-    soft: 'bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+    soft: 'bg-warning/14 text-warning-text',
     solid: 'bg-warning text-warning-foreground',
-    outline:
-      'border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+    outline: 'border-warning/50 text-warning-text',
   },
   danger: {
-    soft: 'bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+    soft: 'bg-danger/14 text-danger-text',
     solid: 'bg-danger text-danger-foreground',
-    outline:
-      'border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+    outline: 'border-danger/50 text-danger-text',
   },
   info: {
-    soft: 'bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+    soft: 'bg-info/14 text-info-text',
     solid: 'bg-info text-info-foreground',
-    outline:
-      'border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+    outline: 'border-info/50 text-info-text',
   },
 } as const
 
 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',