@zvk/ui 0.1.7 → 0.1.9

package/dist/tokens/token-types.d.ts

@@ -6,7 +6,11 @@ export interface ZvkUiPrimitiveTokens {
     radius: Record<string, string>;
     typography: Record<string, string>;
     shadow: Record<string, string>;
+    container: Record<string, string>;
+    material: Record<string, string>;
     motion: Record<string, string>;
+    opacity: Record<string, string>;
+    focus: Record<string, string>;
     zIndex: Record<string, number>;
 }
 export interface ZvkUiSemanticTokens {

package/dist/tokens/tokens.d.ts

@@ -37,10 +37,17 @@ export declare const ZVK_UI_TOKENS: {
     readonly typography: {
         readonly fontFamilySans: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif";
         readonly fontFamilyMono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace";
+        readonly fontFamilyPrimary: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif";
+        readonly fontFamilySecondary: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif";
+        readonly fontFamilyTertiary: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace";
         readonly fontSizeXs: "0.75rem";
         readonly fontSizeSm: "0.875rem";
         readonly fontSizeMd: "0.9375rem";
         readonly fontSizeLg: "1rem";
+        readonly fontSizeBase: "1rem";
+        readonly fontSizeXl: "1.125rem";
+        readonly fontSize2xl: "1.5rem";
+        readonly fontSize3xl: "1.875rem";
         readonly lineHeightTight: "1.2";
         readonly lineHeightNormal: "1.5";
     };
@@ -48,17 +55,48 @@ export declare const ZVK_UI_TOKENS: {
         readonly xs: "0 1px 1px rgb(15 23 42 / 0.06)";
         readonly sm: "0 1px 2px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.04)";
         readonly md: "0 12px 32px rgb(15 23 42 / 0.10)";
+        readonly lg: "0 18px 48px rgb(15 23 42 / 0.14)";
+    };
+    readonly container: {
+        readonly sm: "40rem";
+        readonly md: "48rem";
+        readonly lg: "64rem";
+        readonly xl: "80rem";
+    };
+    readonly material: {
+        readonly surfaceBackdropFilter: "none";
+        readonly floatingBackdropFilter: "none";
+        readonly controlBackdropFilter: "none";
+        readonly glassHighlight: "0 0 0 0 transparent";
+        readonly glassShadow: "var(--zvk-ui-shadow-sm)";
+        readonly overlayBackground: "color-mix(in srgb, var(--zvk-ui-color-foreground) 28%, transparent)";
+        readonly reducedTransparencySurface: "var(--zvk-ui-color-surface)";
+        readonly reducedTransparencySurfaceRaised: "var(--zvk-ui-color-surface-raised)";
+        readonly reducedTransparencyControl: "var(--zvk-ui-control-background)";
     };
     readonly motion: {
+        readonly durationInstant: "80ms";
         readonly durationFast: "120ms";
         readonly durationNormal: "180ms";
+        readonly durationSlow: "240ms";
         readonly easeStandard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly easeEnter: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly easeExit: "cubic-bezier(0.7, 0, 0.84, 0)";
+        readonly easeEmphasized: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+    };
+    readonly opacity: {
+        readonly disabled: "0.56";
+    };
+    readonly focus: {
+        readonly ring: "0 0 0 3px color-mix(in srgb, var(--zvk-ui-color-ring) 24%, transparent)";
     };
     readonly zIndex: {
         readonly base: 0;
-        readonly overlay: 40;
-        readonly modal: 50;
-        readonly toast: 60;
+        readonly overlay: 1000;
+        readonly modal: 1001;
+        readonly popover: 1100;
+        readonly tooltip: 1200;
+        readonly toast: 1300;
     };
 };
 export declare const ZVK_UI_LIGHT_TOKENS: {
@@ -86,7 +124,6 @@ export declare const ZVK_UI_LIGHT_TOKENS: {
         readonly controlHover: "#f8fafc";
         readonly controlActive: "#eef4ff";
         readonly cardBorder: "#7f8ea3";
-        readonly overlay: "rgb(255 255 255 / 0.96)";
     };
 };
 export declare const ZVK_UI_DARK_TOKENS: {
@@ -114,7 +151,6 @@ export declare const ZVK_UI_DARK_TOKENS: {
         readonly controlHover: "#172233";
         readonly controlActive: "#1b2f50";
         readonly cardBorder: "#5c708a";
-        readonly overlay: "rgb(17 24 33 / 0.96)";
     };
 };
 export declare const ZVK_UI_DENSITY_TOKENS: {

package/dist/tokens/tokens.js

@@ -37,28 +37,66 @@ export const ZVK_UI_TOKENS = {
     typography: {
         fontFamilySans: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif",
         fontFamilyMono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace",
+        fontFamilyPrimary: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif",
+        fontFamilySecondary: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif",
+        fontFamilyTertiary: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace",
         fontSizeXs: "0.75rem",
         fontSizeSm: "0.875rem",
         fontSizeMd: "0.9375rem",
         fontSizeLg: "1rem",
+        fontSizeBase: "1rem",
+        fontSizeXl: "1.125rem",
+        fontSize2xl: "1.5rem",
+        fontSize3xl: "1.875rem",
         lineHeightTight: "1.2",
         lineHeightNormal: "1.5"
     },
     shadow: {
         xs: "0 1px 1px rgb(15 23 42 / 0.06)",
         sm: "0 1px 2px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.04)",
-        md: "0 12px 32px rgb(15 23 42 / 0.10)"
+        md: "0 12px 32px rgb(15 23 42 / 0.10)",
+        lg: "0 18px 48px rgb(15 23 42 / 0.14)"
+    },
+    container: {
+        sm: "40rem",
+        md: "48rem",
+        lg: "64rem",
+        xl: "80rem"
+    },
+    material: {
+        surfaceBackdropFilter: "none",
+        floatingBackdropFilter: "none",
+        controlBackdropFilter: "none",
+        glassHighlight: "0 0 0 0 transparent",
+        glassShadow: "var(--zvk-ui-shadow-sm)",
+        overlayBackground: "color-mix(in srgb, var(--zvk-ui-color-foreground) 28%, transparent)",
+        reducedTransparencySurface: "var(--zvk-ui-color-surface)",
+        reducedTransparencySurfaceRaised: "var(--zvk-ui-color-surface-raised)",
+        reducedTransparencyControl: "var(--zvk-ui-control-background)"
     },
     motion: {
+        durationInstant: "80ms",
         durationFast: "120ms",
         durationNormal: "180ms",
-        easeStandard: "cubic-bezier(0.2, 0, 0, 1)"
+        durationSlow: "240ms",
+        easeStandard: "cubic-bezier(0.2, 0, 0, 1)",
+        easeEnter: "cubic-bezier(0.16, 1, 0.3, 1)",
+        easeExit: "cubic-bezier(0.7, 0, 0.84, 0)",
+        easeEmphasized: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+    },
+    opacity: {
+        disabled: "0.56"
+    },
+    focus: {
+        ring: "0 0 0 3px color-mix(in srgb, var(--zvk-ui-color-ring) 24%, transparent)"
     },
     zIndex: {
         base: 0,
-        overlay: 40,
-        modal: 50,
-        toast: 60
+        overlay: 1000,
+        modal: 1001,
+        popover: 1100,
+        tooltip: 1200,
+        toast: 1300
     }
 };
 export const ZVK_UI_LIGHT_TOKENS = {
@@ -85,8 +123,7 @@ export const ZVK_UI_LIGHT_TOKENS = {
         controlBorderStrong: "#64748b",
         controlHover: "#f8fafc",
         controlActive: "#eef4ff",
-        cardBorder: "#7f8ea3",
-        overlay: "rgb(255 255 255 / 0.96)"
+        cardBorder: "#7f8ea3"
     }
 };
 export const ZVK_UI_DARK_TOKENS = {
@@ -113,8 +150,7 @@ export const ZVK_UI_DARK_TOKENS = {
         controlBorderStrong: "#6f86a3",
         controlHover: "#172233",
         controlActive: "#1b2f50",
-        cardBorder: "#5c708a",
-        overlay: "rgb(17 24 33 / 0.96)"
+        cardBorder: "#5c708a"
     }
 };
 export const ZVK_UI_DENSITY_TOKENS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvk/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A polished, zero-runtime-dependency React component library for ZvkUi applications.",
   "private": false,
   "type": "module",
@@ -23,241 +23,315 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
     "./tokens": {
       "types": "./dist/tokens/index.d.ts",
-      "import": "./dist/tokens/index.js"
+      "import": "./dist/tokens/index.js",
+      "default": "./dist/tokens/index.js"
     },
     "./button": {
       "types": "./dist/components/button/index.d.ts",
-      "import": "./dist/components/button/index.js"
+      "import": "./dist/components/button/index.js",
+      "default": "./dist/components/button/index.js"
     },
     "./icon-button": {
       "types": "./dist/components/icon-button/index.d.ts",
-      "import": "./dist/components/icon-button/index.js"
+      "import": "./dist/components/icon-button/index.js",
+      "default": "./dist/components/icon-button/index.js"
     },
     "./badge": {
       "types": "./dist/components/badge/index.d.ts",
-      "import": "./dist/components/badge/index.js"
+      "import": "./dist/components/badge/index.js",
+      "default": "./dist/components/badge/index.js"
     },
     "./card": {
       "types": "./dist/components/card/index.d.ts",
-      "import": "./dist/components/card/index.js"
+      "import": "./dist/components/card/index.js",
+      "default": "./dist/components/card/index.js"
     },
     "./separator": {
       "types": "./dist/components/separator/index.d.ts",
-      "import": "./dist/components/separator/index.js"
+      "import": "./dist/components/separator/index.js",
+      "default": "./dist/components/separator/index.js"
     },
     "./spinner": {
       "types": "./dist/components/spinner/index.d.ts",
-      "import": "./dist/components/spinner/index.js"
+      "import": "./dist/components/spinner/index.js",
+      "default": "./dist/components/spinner/index.js"
     },
     "./skeleton": {
       "types": "./dist/components/skeleton/index.d.ts",
-      "import": "./dist/components/skeleton/index.js"
+      "import": "./dist/components/skeleton/index.js",
+      "default": "./dist/components/skeleton/index.js"
     },
     "./label": {
       "types": "./dist/components/label/index.d.ts",
-      "import": "./dist/components/label/index.js"
+      "import": "./dist/components/label/index.js",
+      "default": "./dist/components/label/index.js"
     },
     "./progress": {
       "types": "./dist/components/progress/index.d.ts",
-      "import": "./dist/components/progress/index.js"
+      "import": "./dist/components/progress/index.js",
+      "default": "./dist/components/progress/index.js"
     },
     "./alert": {
       "types": "./dist/components/alert/index.d.ts",
-      "import": "./dist/components/alert/index.js"
+      "import": "./dist/components/alert/index.js",
+      "default": "./dist/components/alert/index.js"
     },
     "./avatar": {
       "types": "./dist/components/avatar/index.d.ts",
-      "import": "./dist/components/avatar/index.js"
+      "import": "./dist/components/avatar/index.js",
+      "default": "./dist/components/avatar/index.js"
     },
     "./copy-button": {
       "types": "./dist/components/copy-button/index.d.ts",
-      "import": "./dist/components/copy-button/index.js"
+      "import": "./dist/components/copy-button/index.js",
+      "default": "./dist/components/copy-button/index.js"
     },
     "./file-upload-input": {
       "types": "./dist/components/file-upload-input/index.d.ts",
-      "import": "./dist/components/file-upload-input/index.js"
+      "import": "./dist/components/file-upload-input/index.js",
+      "default": "./dist/components/file-upload-input/index.js"
+    },
+    "./file-dropzone": {
+      "types": "./dist/components/file-dropzone/index.d.ts",
+      "import": "./dist/components/file-dropzone/index.js",
+      "default": "./dist/components/file-dropzone/index.js"
     },
     "./error-boundary": {
       "types": "./dist/components/error-boundary/index.d.ts",
-      "import": "./dist/components/error-boundary/index.js"
+      "import": "./dist/components/error-boundary/index.js",
+      "default": "./dist/components/error-boundary/index.js"
     },
     "./field": {
       "types": "./dist/components/field/index.d.ts",
-      "import": "./dist/components/field/index.js"
+      "import": "./dist/components/field/index.js",
+      "default": "./dist/components/field/index.js"
     },
     "./form": {
       "types": "./dist/components/form/index.d.ts",
-      "import": "./dist/components/form/index.js"
+      "import": "./dist/components/form/index.js",
+      "default": "./dist/components/form/index.js"
     },
     "./input": {
       "types": "./dist/components/input/index.d.ts",
-      "import": "./dist/components/input/index.js"
+      "import": "./dist/components/input/index.js",
+      "default": "./dist/components/input/index.js"
     },
     "./textarea": {
       "types": "./dist/components/textarea/index.d.ts",
-      "import": "./dist/components/textarea/index.js"
+      "import": "./dist/components/textarea/index.js",
+      "default": "./dist/components/textarea/index.js"
     },
     "./checkbox": {
       "types": "./dist/components/checkbox/index.d.ts",
-      "import": "./dist/components/checkbox/index.js"
+      "import": "./dist/components/checkbox/index.js",
+      "default": "./dist/components/checkbox/index.js"
     },
     "./switch": {
       "types": "./dist/components/switch/index.d.ts",
-      "import": "./dist/components/switch/index.js"
+      "import": "./dist/components/switch/index.js",
+      "default": "./dist/components/switch/index.js"
     },
     "./radio-group": {
       "types": "./dist/components/radio-group/index.d.ts",
-      "import": "./dist/components/radio-group/index.js"
+      "import": "./dist/components/radio-group/index.js",
+      "default": "./dist/components/radio-group/index.js"
     },
     "./slider": {
       "types": "./dist/components/slider/index.d.ts",
-      "import": "./dist/components/slider/index.js"
+      "import": "./dist/components/slider/index.js",
+      "default": "./dist/components/slider/index.js"
     },
     "./toggle": {
       "types": "./dist/components/toggle/index.d.ts",
-      "import": "./dist/components/toggle/index.js"
+      "import": "./dist/components/toggle/index.js",
+      "default": "./dist/components/toggle/index.js"
     },
     "./toggle-group": {
       "types": "./dist/components/toggle-group/index.d.ts",
-      "import": "./dist/components/toggle-group/index.js"
+      "import": "./dist/components/toggle-group/index.js",
+      "default": "./dist/components/toggle-group/index.js"
     },
     "./select": {
       "types": "./dist/components/select/index.d.ts",
-      "import": "./dist/components/select/index.js"
+      "import": "./dist/components/select/index.js",
+      "default": "./dist/components/select/index.js"
     },
     "./collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
-      "import": "./dist/components/collapsible/index.js"
+      "import": "./dist/components/collapsible/index.js",
+      "default": "./dist/components/collapsible/index.js"
     },
     "./accordion": {
       "types": "./dist/components/accordion/index.d.ts",
-      "import": "./dist/components/accordion/index.js"
+      "import": "./dist/components/accordion/index.js",
+      "default": "./dist/components/accordion/index.js"
     },
     "./tabs": {
       "types": "./dist/components/tabs/index.d.ts",
-      "import": "./dist/components/tabs/index.js"
+      "import": "./dist/components/tabs/index.js",
+      "default": "./dist/components/tabs/index.js"
     },
     "./breadcrumbs": {
       "types": "./dist/components/breadcrumbs/index.d.ts",
-      "import": "./dist/components/breadcrumbs/index.js"
+      "import": "./dist/components/breadcrumbs/index.js",
+      "default": "./dist/components/breadcrumbs/index.js"
     },
     "./pagination": {
       "types": "./dist/components/pagination/index.d.ts",
-      "import": "./dist/components/pagination/index.js"
+      "import": "./dist/components/pagination/index.js",
+      "default": "./dist/components/pagination/index.js"
     },
     "./table": {
       "types": "./dist/components/table/index.d.ts",
-      "import": "./dist/components/table/index.js"
+      "import": "./dist/components/table/index.js",
+      "default": "./dist/components/table/index.js"
     },
     "./empty-state": {
       "types": "./dist/components/empty-state/index.d.ts",
-      "import": "./dist/components/empty-state/index.js"
+      "import": "./dist/components/empty-state/index.js",
+      "default": "./dist/components/empty-state/index.js"
     },
     "./stat": {
       "types": "./dist/components/stat/index.d.ts",
-      "import": "./dist/components/stat/index.js"
+      "import": "./dist/components/stat/index.js",
+      "default": "./dist/components/stat/index.js"
     },
     "./code-block": {
       "types": "./dist/components/code-block/index.d.ts",
-      "import": "./dist/components/code-block/index.js"
+      "import": "./dist/components/code-block/index.js",
+      "default": "./dist/components/code-block/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/kbd/index.d.ts",
+      "import": "./dist/components/kbd/index.js",
+      "default": "./dist/components/kbd/index.js"
     },
     "./dialog": {
       "types": "./dist/components/dialog/index.d.ts",
-      "import": "./dist/components/dialog/index.js"
+      "import": "./dist/components/dialog/index.js",
+      "default": "./dist/components/dialog/index.js"
     },
     "./popover": {
       "types": "./dist/components/popover/index.d.ts",
-      "import": "./dist/components/popover/index.js"
+      "import": "./dist/components/popover/index.js",
+      "default": "./dist/components/popover/index.js"
     },
     "./hover-card": {
       "types": "./dist/components/hover-card/index.d.ts",
-      "import": "./dist/components/hover-card/index.js"
+      "import": "./dist/components/hover-card/index.js",
+      "default": "./dist/components/hover-card/index.js"
     },
     "./tooltip": {
       "types": "./dist/components/tooltip/index.d.ts",
-      "import": "./dist/components/tooltip/index.js"
+      "import": "./dist/components/tooltip/index.js",
+      "default": "./dist/components/tooltip/index.js"
     },
     "./dropdown-menu": {
       "types": "./dist/components/dropdown-menu/index.d.ts",
-      "import": "./dist/components/dropdown-menu/index.js"
+      "import": "./dist/components/dropdown-menu/index.js",
+      "default": "./dist/components/dropdown-menu/index.js"
     },
     "./alert-dialog": {
       "types": "./dist/components/alert-dialog/index.d.ts",
-      "import": "./dist/components/alert-dialog/index.js"
+      "import": "./dist/components/alert-dialog/index.js",
+      "default": "./dist/components/alert-dialog/index.js"
     },
     "./sheet": {
       "types": "./dist/components/sheet/index.d.ts",
-      "import": "./dist/components/sheet/index.js"
+      "import": "./dist/components/sheet/index.js",
+      "default": "./dist/components/sheet/index.js"
     },
     "./scroll-area": {
       "types": "./dist/components/scroll-area/index.d.ts",
-      "import": "./dist/components/scroll-area/index.js"
+      "import": "./dist/components/scroll-area/index.js",
+      "default": "./dist/components/scroll-area/index.js"
     },
     "./command": {
       "types": "./dist/components/command/index.d.ts",
-      "import": "./dist/components/command/index.js"
+      "import": "./dist/components/command/index.js",
+      "default": "./dist/components/command/index.js"
     },
     "./combobox": {
       "types": "./dist/components/combobox/index.d.ts",
-      "import": "./dist/components/combobox/index.js"
+      "import": "./dist/components/combobox/index.js",
+      "default": "./dist/components/combobox/index.js"
     },
     "./context-menu": {
       "types": "./dist/components/context-menu/index.d.ts",
-      "import": "./dist/components/context-menu/index.js"
+      "import": "./dist/components/context-menu/index.js",
+      "default": "./dist/components/context-menu/index.js"
     },
     "./menubar": {
       "types": "./dist/components/menubar/index.d.ts",
-      "import": "./dist/components/menubar/index.js"
+      "import": "./dist/components/menubar/index.js",
+      "default": "./dist/components/menubar/index.js"
     },
     "./calendar": {
       "types": "./dist/components/calendar/index.d.ts",
-      "import": "./dist/components/calendar/index.js"
+      "import": "./dist/components/calendar/index.js",
+      "default": "./dist/components/calendar/index.js"
     },
     "./date-picker": {
       "types": "./dist/components/date-picker/index.d.ts",
-      "import": "./dist/components/date-picker/index.js"
+      "import": "./dist/components/date-picker/index.js",
+      "default": "./dist/components/date-picker/index.js"
+    },
+    "./date-range-picker": {
+      "types": "./dist/components/date-range-picker/index.d.ts",
+      "import": "./dist/components/date-range-picker/index.js",
+      "default": "./dist/components/date-range-picker/index.js"
     },
     "./carousel": {
       "types": "./dist/components/carousel/index.d.ts",
-      "import": "./dist/components/carousel/index.js"
+      "import": "./dist/components/carousel/index.js",
+      "default": "./dist/components/carousel/index.js"
     },
     "./responsive-container": {
       "types": "./dist/components/responsive-container/index.d.ts",
-      "import": "./dist/components/responsive-container/index.js"
+      "import": "./dist/components/responsive-container/index.js",
+      "default": "./dist/components/responsive-container/index.js"
     },
     "./sidebar-shell": {
       "types": "./dist/components/sidebar-shell/index.d.ts",
-      "import": "./dist/components/sidebar-shell/index.js"
+      "import": "./dist/components/sidebar-shell/index.js",
+      "default": "./dist/components/sidebar-shell/index.js"
     },
     "./sectioned-sidebar-nav": {
       "types": "./dist/components/sectioned-sidebar-nav/index.d.ts",
-      "import": "./dist/components/sectioned-sidebar-nav/index.js"
+      "import": "./dist/components/sectioned-sidebar-nav/index.js",
+      "default": "./dist/components/sectioned-sidebar-nav/index.js"
     },
     "./tabs-with-sidebar": {
       "types": "./dist/components/tabs-with-sidebar/index.d.ts",
-      "import": "./dist/components/tabs-with-sidebar/index.js"
+      "import": "./dist/components/tabs-with-sidebar/index.js",
+      "default": "./dist/components/tabs-with-sidebar/index.js"
     },
     "./toast": {
       "types": "./dist/components/toast/index.d.ts",
-      "import": "./dist/components/toast/index.js"
+      "import": "./dist/components/toast/index.js",
+      "default": "./dist/components/toast/index.js"
     },
     "./conversation": {
       "types": "./dist/components/conversation/index.d.ts",
-      "import": "./dist/components/conversation/index.js"
+      "import": "./dist/components/conversation/index.js",
+      "default": "./dist/components/conversation/index.js"
     },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js"
+      "import": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "clean": "bun run scripts/clean.mjs",
+    "dev": "bun run preview",
     "build:types": "tsc -p tsconfig.build.json",
     "build:css": "bun run scripts/build-css.mjs",
     "build": "bun run clean && bun run build:types && bun run build:css",
@@ -270,14 +344,15 @@
     "test:ssr": "vitest run tests/ssr --environment node",
     "test:exports": "vitest run tests/exports --environment node",
     "test:accessibility": "vitest run tests/accessibility",
-    "test:browser": "playwright test --config playwright.config.ts",
+    "test:browser": "bunx playwright test --config playwright.config.ts",
     "test:types": "tsd",
     "docs:lint": "bun run scripts/lint-docs.mjs",
     "verify:style-contract": "bun run scripts/verify-style-contract.mjs",
     "validate:exports": "bun run scripts/validate-exports.mjs",
     "tarball:inspect": "bun run scripts/check-tarball.mjs",
     "pack:dry": "npm pack --dry-run",
-    "preflight": "bun run typecheck && bun run build && bun run test:unit && bun run test:ssr && bun run test:types && bun run test:exports && bun run test:accessibility && bun run test:browser && bun run docs:lint && bun run verify:style-contract && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
+    "preflight": "bun run build && bun run typecheck && bun run test:unit && bun run test:ssr && bun run test:types && bun run test:exports && bun run test:accessibility && bun run test:browser && bun run docs:lint && bun run verify:style-contract && bun run validate:exports && bun run tarball:inspect && bun run pack:dry",
+    "preflight:ci": "bun run build && bun run typecheck && bun run test:unit && bun run test:ssr && bun run test:types && bun run test:exports && bun run test:accessibility && bun run docs:lint && bun run verify:style-contract && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
   },
   "peerDependencies": {
     "react": "^19.0.0",