prime-ui-kit 0.9.0 → 0.9.2

package/dist/tokens/semantic.d.ts

@@ -22,11 +22,25 @@ export declare const semanticTokens: {
             readonly sunken: "{color.gray.75}";
             readonly inverse: "{color.gray.925}";
             readonly scrim: "rgba(17, 19, 24, 0.44)";
+            /** Soft shade over an edge that hides scrolled content (DataTable columns). */
+            readonly edgeShadow: "rgba(17, 19, 24, 0.14)";
+            /**
+             * Translucent glass over content (floating BottomNav), always with a light backdrop blur:
+             * clear enough that the content reads through it, as Liquid Glass.
+             */
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent)";
+            /** The specular top edge of a glass surface: the line that makes it read as glass. */
+            readonly glassEdge: "rgba(255, 255, 255, 0.85)";
         };
         readonly fill: {
             /** Transparent wash: ghost hover, row hover. Works on any background. */
             readonly subtle: "rgba(17, 19, 24, 0.04)";
             readonly subtleActive: "rgba(17, 19, 24, 0.07)";
+            /**
+             * The faintest wash: hover of a tab in the sunken strip (Tabs). Stays below the
+             * sunken → surface step in both themes, so a hovered tab never reads as the selected one.
+             */
+            readonly faint: "rgba(17, 19, 24, 0.04)";
             /**
              * Neutral buttons, chips, segmented track. Translucent ink wash: always one step off whatever
              * it sits on (canvas, card, sunken tile, a custom container), in both themes.
@@ -99,6 +113,8 @@ export declare const semanticTokens: {
             /** Translucent wash, visible on any background; `bgSurface` kept equal for surface contexts. */
             readonly bg: "color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent)";
             readonly bgSurface: "color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent)";
+            /** Hover wash of a field: the `bg` wash, twice as dense (≈ `bg` mixed 94% with the text color). */
+            readonly bgHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, transparent)";
             readonly bgFocus: "{color.gray.0}";
             readonly bgDisabled: "color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent)";
         };
@@ -140,6 +156,13 @@ export declare const semanticTokens: {
             readonly medium: "{font.weight.medium}";
             readonly semibold: "{font.weight.semibold}";
         };
+        /** Letter-spacing steps for overriding a role's own tracking (Typography `tracking`). */
+        readonly tracking: {
+            readonly normal: "{font.tracking.normal}";
+            readonly tight: "{font.tracking.tight}";
+            readonly tighter: "{font.tracking.tighter}";
+            readonly wide: "{font.tracking.wide}";
+        };
     };
     /**
      * Type roles. Each role = size / lineHeight / weight / tracking.
@@ -242,7 +265,6 @@ export declare const semanticTokens: {
         readonly 6: "{space.6}";
         readonly 7: "{space.7}";
         readonly 8: "{space.8}";
-        readonly 9: "{space.9}";
         readonly 10: "{space.10}";
         readonly 12: "{space.12}";
         readonly 14: "{space.14}";
@@ -256,7 +278,6 @@ export declare const semanticTokens: {
         readonly m: "{radius.8}";
         readonly l: "{radius.12}";
         readonly xl: "{radius.16}";
-        readonly "2xl": "{radius.20}";
         readonly full: "{radius.full}";
     };
     readonly icon: {
@@ -285,43 +306,42 @@ export declare const semanticTokens: {
         readonly overlay: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18)";
         /** Modals and drawers. */
         readonly modal: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 32px 64px -16px rgba(17, 19, 24, 0.30)";
+        /** Slider thumb: one crisp outer edge plus a short contact shadow. */
+        readonly thumb: "0 0 0 1px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.16)";
     };
     readonly motion: {
         readonly duration: {
-            readonly fast: "{duration.120}";
-            readonly base: "{duration.200}";
-            readonly slow: "{duration.300}";
+            /** Hover fill on dense, high-frequency rows and cells. */
+            readonly xfast: "{duration.150}";
+            readonly fast: "{duration.230}";
+            readonly base: "{duration.380}";
+            readonly slow: "{duration.570}";
         };
         readonly easing: {
             readonly standard: "{easing.standard}";
             readonly enter: "{easing.enter}";
             readonly exit: "{easing.exit}";
+            /** State that glides into place (thumbs, indicators, checkmarks); pair with `base`. */
+            readonly emphasized: "{easing.emphasized}";
+        };
+        /** Step between items of a staggered first render. */
+        readonly stagger: "{duration.80}";
+        /** `:active` scale of pressable controls; `compact` for icon-only and small targets. */
+        readonly press: {
+            readonly scale: "0.98";
+            readonly scaleCompact: "0.96";
         };
     };
     readonly z: {
-        readonly base: "{zIndex.base}";
         readonly sticky: "{zIndex.sticky}";
-        readonly popover: "{zIndex.popover}";
-        readonly dropdown: "{zIndex.dropdown}";
-        readonly tooltip: "{zIndex.tooltip}";
-        readonly drawer: "{zIndex.drawer}";
-        readonly popoverInDrawer: "{zIndex.popoverInDrawer}";
-        readonly dropdownInDrawer: "{zIndex.dropdownInDrawer}";
-        readonly tooltipInDrawer: "{zIndex.tooltipInDrawer}";
-        readonly modal: "{zIndex.modal}";
-        readonly popoverInModal: "{zIndex.popoverInModal}";
-        readonly dropdownInModal: "{zIndex.dropdownInModal}";
-        readonly tooltipInModal: "{zIndex.tooltipInModal}";
-        readonly drawerNestedShell: "{zIndex.drawerNestedShell}";
-        readonly popoverInDrawerInModal: "{zIndex.popoverInDrawerInModal}";
-        readonly dropdownInDrawerInModal: "{zIndex.dropdownInDrawerInModal}";
-        readonly tooltipInDrawerInModal: "{zIndex.tooltipInDrawerInModal}";
+        readonly overlay: "{zIndex.overlay}";
         readonly toast: "{zIndex.toast}";
     };
     /**
      * Control size tiers shared by Button, Input, Select, Datepicker, Tabs, SegmentedControl, etc.
      * Pairing: a field of tier T uses `labelSize`/`hintSize` of tier T; menus opened from tier T
      * use `itemHeight` of tier T; badges inside tier T use the badge tier one step down.
+     * `track` is the line thickness of Slider and ProgressBar; their thumb and gaps derive from it.
      */
     readonly control: {
         readonly xs: {
@@ -341,6 +361,7 @@ export declare const semanticTokens: {
             readonly hintGap: "{space.1}";
             readonly itemHeight: "{space.6}";
             readonly choice: "{icon.14}";
+            readonly track: "0.25rem";
         };
         readonly s: {
             readonly height: "{space.8}";
@@ -359,6 +380,7 @@ export declare const semanticTokens: {
             readonly hintGap: "{space.1}";
             readonly itemHeight: "{space.7}";
             readonly choice: "{icon.16}";
+            readonly track: "0.3125rem";
         };
         readonly m: {
             readonly height: "{space.9}";
@@ -377,6 +399,7 @@ export declare const semanticTokens: {
             readonly hintGap: "{space.1}";
             readonly itemHeight: "{space.8}";
             readonly choice: "1.125rem";
+            readonly track: "0.375rem";
         };
         readonly l: {
             readonly height: "{space.10}";
@@ -395,6 +418,7 @@ export declare const semanticTokens: {
             readonly hintGap: "{space.1}";
             readonly itemHeight: "{space.9}";
             readonly choice: "{icon.20}";
+            readonly track: "0.4375rem";
         };
         readonly xl: {
             readonly height: "{space.12}";
@@ -413,9 +437,17 @@ export declare const semanticTokens: {
             readonly hintGap: "{space.1}";
             readonly itemHeight: "{space.10}";
             readonly choice: "{icon.24}";
+            readonly track: "0.5rem";
         };
+        /**
+         * Coarse pointers (`@media (pointer: coarse)`): the hit area of a control below this size grows
+         * to it (WCAG 2.5.5); the visual size stays the tier's.
+         */
+        readonly touchTarget: "2.75rem";
+        /** Touch screens and narrow viewports: the least text size of an editable value (iOS zoom). */
+        readonly touchTextSize: "{font.size.16}";
     };
-    /** Badge / Tag / Kbd tiers. Inside a control of tier T use the badge tier one step down. */
+    /** Badge / Kbd tiers. Inside a control of tier T use the badge tier one step down. */
     readonly badge: {
         readonly xs: {
             readonly height: "1rem";
@@ -493,6 +525,29 @@ export declare const semanticTokens: {
         readonly xl: "{space.12}";
         readonly "2xl": "{space.16}";
     };
+    /** Thumbnail tier: height (width follows the aspect ratio) and corner radius. */
+    readonly thumbnail: {
+        readonly xs: {
+            readonly height: "{space.6}";
+            readonly radius: "{radius.4}";
+        };
+        readonly s: {
+            readonly height: "{space.8}";
+            readonly radius: "{radius.6}";
+        };
+        readonly m: {
+            readonly height: "{space.10}";
+            readonly radius: "{radius.8}";
+        };
+        readonly l: {
+            readonly height: "{space.12}";
+            readonly radius: "{radius.8}";
+        };
+        readonly xl: {
+            readonly height: "{space.16}";
+            readonly radius: "{radius.12}";
+        };
+    };
     /** Floating panel shared by Select, Dropdown, Combobox, Datepicker, Popover. Item radius = radius − padding. */
     readonly panel: {
         readonly radius: "{radius.12}";
@@ -517,7 +572,6 @@ export declare const semanticTokens: {
     readonly modal: {
         readonly radius: "{radius.16}";
         readonly padding: "{space.6}";
-        readonly gap: "{space.4}";
         readonly viewportPadding: "{space.4}";
         readonly widthS: "27.5rem";
         readonly widthM: "35rem";
@@ -526,17 +580,61 @@ export declare const semanticTokens: {
     };
     readonly drawer: {
         readonly padding: "{space.6}";
-        readonly gap: "{space.4}";
         readonly widthS: "22.5rem";
         readonly widthM: "30rem";
         readonly widthL: "40rem";
         readonly widthXl: "50rem";
     };
+    /** Bottom sheets: Drawer `side="bottom"`, Modal and floating layers on a narrow viewport. */
+    readonly sheet: {
+        readonly radius: "{radius.16}";
+        /** The grab bar at the top edge and the strip that holds it. */
+        readonly handleWidth: "2.25rem";
+        readonly handleHeight: "{space.1}";
+        readonly handleArea: "{space.5}";
+        /** Room kept above a sheet so the page behind stays visible. */
+        readonly topGap: "{space.10}";
+        /** A bottom sheet on a tablet or desktop is never narrower than this (= Modal m). */
+        readonly minWidth: "35rem";
+    };
+    readonly bottomNav: {
+        /** Bar height without the safe-area inset: icon 20 + gap 4 + label 12 and air around them. */
+        readonly height: "3.25rem";
+        /** An icon-only flat bar: no label row, so it is lower. */
+        readonly iconOnlyHeight: "{space.12}";
+        /**
+         * Floating capsule (iOS 26 tab bar): items 44 high — icon-only items are 44 squares, the touch
+         * size — inset 4 inside the capsule, so the selection capsule sits clear of its edge (52 in all).
+         */
+        readonly floatingItemSize: "2.75rem";
+        readonly floatingPadding: "{space.1}";
+        readonly paddingX: "{space.2}";
+        /** Between the icon and the label. */
+        readonly itemGap: "{space.1}";
+        /** The box that holds the icon and anchors the count. */
+        readonly indicatorWidth: "{space.7}";
+        readonly indicatorHeight: "{space.5}";
+        /** A light icon (20) over a small label (10, as the iOS tab bar): the bar stays quiet. */
+        readonly iconSize: "{icon.20}";
+        readonly labelSize: "{font.size.10}";
+        readonly labelLineHeight: "{font.lineHeight.12}";
+        /**
+         * Floating: the capsule's gap from the screen edges and the blur behind it — light, as Liquid
+         * Glass: the content stays recognisable under the glass, only softened.
+         */
+        readonly floatingInset: "{space.3}";
+        readonly blur: "0.5rem";
+    };
     readonly tooltip: {
         readonly radius: "{radius.6}";
         readonly paddingX: "{space.2}";
         readonly paddingY: "{space.1}";
         readonly maxWidth: "17.5rem";
+        /** Arrow base and depth; the arrow points at the trigger's centre. */
+        readonly arrowWidth: "0.625rem";
+        readonly arrowHeight: "0.3125rem";
+        /** Gap from the trigger to the chip body (the arrow sits inside it). */
+        readonly offset: "{space.2}";
     };
     readonly table: {
         readonly rowHeightS: "{space.9}";
@@ -554,4 +652,3 @@ export declare const semanticTokens: {
         readonly readingMaxWidth: "42rem";
     };
 };
-//# sourceMappingURL=semantic.d.ts.map

package/dist/tokens/themes/dark.d.ts

@@ -8,10 +8,15 @@ export declare const darkThemeOverrides: {
             readonly sunken: "{color.gray.950}";
             readonly inverse: "{color.gray.100}";
             readonly scrim: "rgba(0, 0, 0, 0.6)";
+            /** Darker than the scrim's share: a shade on a 900 surface needs more ink to read. */
+            readonly edgeShadow: "rgba(0, 0, 0, 0.5)";
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent)";
+            readonly glassEdge: "rgba(255, 255, 255, 0.16)";
         };
         readonly fill: {
             readonly subtle: "rgba(233, 235, 240, 0.05)";
             readonly subtleActive: "rgba(233, 235, 240, 0.09)";
+            readonly faint: "rgba(233, 235, 240, 0.02)";
             readonly muted: "color-mix(in srgb, var(--prime-ref-color-gray-100) 7%, transparent)";
             readonly mutedHover: "color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent)";
             readonly strong: "color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent)";
@@ -69,6 +74,7 @@ export declare const darkThemeOverrides: {
         readonly field: {
             readonly bg: "color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent)";
             readonly bgSurface: "color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent)";
+            readonly bgHover: "color-mix(in srgb, var(--prime-ref-color-gray-100) 12%, transparent)";
             readonly bgFocus: "{color.gray.925}";
             readonly bgDisabled: "color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent)";
         };
@@ -94,6 +100,6 @@ export declare const darkThemeOverrides: {
         readonly raised: "none";
         readonly overlay: "0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.6)";
         readonly modal: "0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 72px -16px rgba(0, 0, 0, 0.75)";
+        readonly thumb: "0 1px 3px rgba(0, 0, 0, 0.5)";
     };
 };
-//# sourceMappingURL=dark.d.ts.map

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.9.0",
-  "description": "React 19 UI kit for product interfaces: 50 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y. Ships COMPONENT.md docs and copyable examples.",
+  "version": "0.9.2",
+  "packageManager": "bun@1.3.13",
+  "description": "React 19 UI kit for product interfaces: 61 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y. Ships COMPONENT.md docs and copyable examples.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -65,22 +66,24 @@
     "access": "public"
   },
   "devDependencies": {
-    "date-fns": "^4.1.0",
-    "react-aria-components": "^1.16.0",
-    "@biomejs/biome": "latest",
-    "@testing-library/jest-dom": "latest",
-    "@testing-library/react": "latest",
-    "@testing-library/user-event": "latest",
+    "@biomejs/biome": "^2.4.8",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.5.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5",
-    "@vitest/coverage-v8": "^4.1.0",
-    "jsdom": "latest",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.27.0",
+    "jsdom": "^29.0.1",
+    "react": "^19.2.4",
+    "react-aria-components": "^1.16.0",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
     "typescript": "^5",
     "vite": "^7",
-    "vitest": "latest"
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "date-fns": "^4.0.0",
@@ -88,28 +91,33 @@
     "react-dom": "^19.0.0",
     "react-aria-components": "^1.16.0"
   },
+  "peerDependenciesMeta": {
+    "react-aria-components": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "default": "./dist/components/index.js"
+    "./color-picker": {
+      "types": "./dist/color-picker.d.ts",
+      "default": "./dist/color-picker.js"
     },
-    "./styles.css": "./src/styles/globals.css",
+    "./bundle.css": "./dist/index.css",
+    "./fonts.css": "./src/styles/fonts.css",
+    "./reset.css": "./src/styles/reset.css",
     "./tokens.css": "./src/styles/tokens.css",
     "./theme-light.css": "./src/styles/theme-light.css",
-    "./theme-dark.css": "./src/styles/theme-dark.css",
-    "./bundle.css": "./dist/index.css",
-    "./components.css": "./dist/components/index.css"
+    "./theme-dark.css": "./src/styles/theme-dark.css"
   },
   "scripts": {
-    "clean": "rm -rf dist .dts-stage coverage playground/dist",
+    "clean": "rm -rf dist .dts-stage playground/dist",
     "tokens:build": "bun run scripts/build-tokens.ts",
+    "docs:build": "bun run scripts/build-docs.ts",
     "build": "bun run tokens:build && bun run scripts/bundle-lib.ts",
     "prepublishOnly": "bun run clean && bun run build",
-    "dev": "bun run scripts/bundle-lib.ts --watch",
     "playground:dev": "vite playground --config playground/vite.config.ts",
     "check": "biome check .",
     "check:ci": "biome ci .",
@@ -117,8 +125,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "verify": "bun run check:ci && bun run typecheck && bun run test && bun run build",
-    "verify:quick": "bun run check:ci && bun run typecheck && bun run test",
+    "verify": "bun run check:ci && bun run typecheck && bun run test && bun run verify:tokens && bun run build",
     "verify:tokens": "bun run tokens:build && git diff --exit-code -- src/styles/tokens.css src/styles/theme-light.css src/styles/theme-dark.css"
   },
   "sideEffects": [
@@ -126,7 +133,6 @@
   ],
   "type": "module",
   "dependencies": {
-    "lucide-react": "^0.577.0",
-    "react-router-dom": "^7.13.1"
+    "lucide-react": "^0.577.0"
   }
 }