prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,143 +1,101 @@
 export declare const darkThemeOverrides: {
     readonly color: {
-        readonly status: {
-            readonly information: {
-                readonly background: "{color.blue.950}";
-                readonly backgroundEmphasis: "{color.blue.500}";
-                readonly foreground: "{color.blue.200}";
-                readonly border: "{color.blue.800}";
-            };
-            readonly warning: {
-                readonly background: "{color.orange.950}";
-                readonly backgroundEmphasis: "{color.orange.500}";
-                readonly foreground: "{color.orange.200}";
-                readonly border: "{color.orange.800}";
-            };
-            readonly success: {
-                readonly background: "{color.green.950}";
-                readonly backgroundEmphasis: "{color.green.500}";
-                readonly foreground: "{color.green.200}";
-                readonly border: "{color.green.800}";
-            };
-            readonly away: {
-                readonly background: "{color.yellow.950}";
-                readonly backgroundEmphasis: "{color.yellow.500}";
-                readonly foreground: "{color.yellow.200}";
-                readonly border: "{color.yellow.800}";
-            };
-            readonly feature: {
-                readonly background: "{color.purple.950}";
-                readonly backgroundEmphasis: "{color.purple.500}";
-                readonly foreground: "{color.purple.200}";
-                readonly border: "{color.purple.800}";
-            };
-            readonly verified: {
-                readonly background: "{color.sky.950}";
-                readonly backgroundEmphasis: "{color.sky.500}";
-                readonly foreground: "{color.sky.200}";
-                readonly border: "{color.sky.800}";
-            };
-            readonly error: {
-                readonly background: "{color.red.950}";
-                readonly backgroundEmphasis: "{color.red.500}";
-                readonly foreground: "{color.red.200}";
-                readonly border: "{color.red.800}";
-            };
+        readonly bg: {
+            readonly canvas: "{color.gray.950}";
+            readonly surface: "{color.gray.900}";
+            readonly raised: "{color.gray.875}";
+            /** = canvas: nested tiles on the 900 surface need a clear step (925 read as 1.03:1). */
+            readonly sunken: "{color.gray.950}";
+            readonly inverse: "{color.gray.100}";
+            readonly scrim: "rgba(0, 0, 0, 0.6)";
         };
-        readonly surface: {
-            readonly default: "{color.gray.950}";
-            readonly raised: "{color.gray.900}";
-            readonly elevated: "{color.gray.800}";
-            readonly accentSoft: "{color.gray.800}";
-            readonly dangerSoft: "{color.red.950}";
-            readonly overlay: "{color.overlay.scrimDark}";
+        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)";
+            readonly strongHover: "color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent)";
         };
-        readonly content: {
-            readonly primary: "{color.gray.50}";
+        readonly text: {
+            readonly primary: "{color.gray.100}";
             readonly secondary: "{color.gray.300}";
             readonly muted: "{color.gray.400}";
+            readonly placeholder: "{color.gray.400}";
             readonly disabled: "{color.gray.600}";
-            readonly inverse: "{color.gray.950}";
-            readonly accent: "{color.gray.200}";
-            readonly danger: "{color.red.200}";
+            readonly inverse: "{color.gray.925}";
         };
         readonly border: {
+            readonly faint: "{color.gray.850}";
+            /** One step above raised (875) so hairlines stay visible on floating layers too. */
             readonly subtle: "{color.gray.800}";
-            readonly separator: "{color.gray.500}";
-            readonly strong: "{color.gray.600}";
-            readonly emphasis: "{color.gray.50}";
-            readonly muted: "{color.gray.700}";
-            readonly accent: "{color.gray.500}";
-            readonly danger: "{color.red.400}";
-            readonly disabled: "{color.gray.800}";
-            readonly inverse: "{color.white}";
+            readonly default: "{color.gray.750}";
+            readonly control: "transparent";
         };
-        readonly action: {
-            readonly primaryBackground: "{color.gray.50}";
-            readonly primaryBackgroundHover: "{color.gray.200}";
-            readonly primaryForeground: "{color.gray.950}";
-            readonly primarySoftBackground: "color-mix(in srgb, var(--prime-ref-color-gray-50) 42%, var(--prime-ref-color-gray-950))";
-            readonly primarySoftForeground: "{color.gray.50}";
-            readonly neutralBackground: "{color.gray.900}";
-            readonly neutralBackgroundHover: "{color.gray.800}";
-            readonly neutralForeground: "{color.gray.50}";
-            readonly errorBackground: "{color.red.500}";
-            readonly errorBackgroundHover: "{color.red.600}";
-            readonly errorForeground: "{color.white}";
+        readonly accent: {
+            readonly default: "{color.cobalt.600}";
+            readonly hover: "{color.cobalt.500}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.cobalt.950}";
+            readonly softHover: "color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent)";
+            readonly text: "{color.cobalt.400}";
         };
-        readonly focus: {
-            readonly ring: "{color.gray.100}";
+        readonly danger: {
+            readonly default: "{color.red.600}";
+            readonly hover: "{color.red.500}";
+            readonly fg: "{color.white}";
+            readonly soft: "color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent)";
+            readonly text: "{color.red.300}";
+            readonly border: "{color.red.400}";
+        };
+        readonly success: {
+            readonly default: "{color.green.400}";
+            readonly fg: "{color.gray.950}";
+            readonly soft: "color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent)";
+            readonly text: "{color.green.300}";
+        };
+        readonly warning: {
+            readonly default: "{color.orange.400}";
+            readonly fg: "{color.gray.950}";
+            readonly soft: "color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent)";
+            readonly text: "{color.orange.300}";
+        };
+        readonly info: {
+            readonly default: "{color.sky.400}";
+            readonly fg: "{color.gray.950}";
+            readonly soft: "color-mix(in srgb, var(--prime-ref-color-sky-500) 16%, transparent)";
+            readonly text: "{color.sky.300}";
         };
         readonly field: {
-            readonly bg: "{color.gray.900}";
-            readonly text: "{color.gray.50}";
-            readonly placeholder: "{color.gray.500}";
-            readonly border: "{color.gray.700}";
-            readonly borderHover: "{color.gray.600}";
-            readonly borderFocus: "{color.gray.300}";
-            readonly borderError: "{color.red.400}";
+            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)";
         };
-        readonly tooltip: {
-            readonly background: "{color.gray.100}";
-            readonly foreground: "{color.gray.950}";
-            readonly border: "{color.gray.300}";
+        readonly focus: {
+            readonly ring: "{color.cobalt.400}";
         };
-        readonly dataTable: {
-            readonly dividerVertical: "color-mix(in srgb, var(--prime-sys-color-border-subtle) 78%, transparent)";
-            readonly dividerHorizontal: "color-mix(in srgb, var(--prime-sys-color-border-subtle) 86%, transparent)";
-            readonly headBackground: "{color.surface.elevated}";
-            readonly rowBackground: "{color.surface.default}";
+        readonly control: {
+            readonly thumb: "{color.gray.100}";
+            readonly selected: "{color.gray.750}";
         };
-        readonly badge: {
-            readonly grayFilled: {
-                readonly background: "{color.gray.500}";
-            };
-            readonly pink: {
-                readonly backgroundSoft: "{color.pink.950}";
-                readonly foregroundOnSoft: "{color.pink.200}";
-                readonly backgroundEmphasis: "{color.pink.500}";
-                readonly border: "{color.pink.800}";
-            };
-            readonly teal: {
-                readonly backgroundSoft: "{color.teal.950}";
-                readonly foregroundOnSoft: "{color.teal.200}";
-                readonly backgroundEmphasis: "{color.teal.500}";
-                readonly border: "{color.teal.800}";
-            };
+        readonly tooltip: {
+            readonly bg: "{color.gray.750}";
+            readonly text: "{color.gray.100}";
         };
+        readonly palette: Record<string, {
+            soft: string;
+            text: string;
+            solid: string;
+            solidFg: string;
+        }>;
     };
-    readonly elevation: {
-        readonly shadow: {
-            readonly surface: "0 1px 2px rgba(8, 10, 14, 0.35)";
-            readonly modal: "0 24px 48px rgba(8, 10, 14, 0.45)";
-            readonly tooltip: "0 14px 30px rgba(8, 10, 14, 0.5), 0 4px 10px rgba(8, 10, 14, 0.4)";
-            readonly buttonFocus: "0 0 0 2px rgba(244, 244, 245, 0.28)";
-            readonly primaryFocus: "0 0 0 2px rgba(244, 244, 245, 0.4)";
-            readonly errorFocus: "0 0 0 2px rgba(248, 113, 113, 0.38)";
-            readonly fancyButtonNeutral: "0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-content-primary)";
-            readonly fancyButtonPrimary: "0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-action-primaryBackground)";
-            readonly fancyButtonError: "0 1px 2px rgba(8, 10, 14, 0.45), 0 0 0 1px var(--prime-sys-color-action-errorBackground)";
-        };
+    readonly shadow: {
+        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,55 +1,47 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.7.13",
-  "description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
+  "version": "0.9.1",
+  "description": "React 19 UI kit for product interfaces: 57 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",
   "keywords": [
-    "a11y",
-    "accessible",
+    "react",
+    "react-ui",
+    "react-components",
+    "react19",
+    "ui-kit",
+    "ui-library",
     "component-library",
-    "composable",
+    "design-system",
+    "design-tokens",
+    "typescript",
     "css-modules",
     "css-variables",
     "dark-mode",
+    "theming",
+    "accessible",
+    "a11y",
+    "admin-dashboard",
+    "dashboard",
+    "forms",
     "data-table",
     "datepicker",
-    "design-system",
-    "design-tokens",
-    "dialog",
+    "date-range-picker",
+    "select",
+    "multiselect",
+    "modal",
     "drawer",
     "dropdown",
-    "esm",
-    "forms",
-    "framer-motion",
-    "light-mode",
-    "lucide-react",
-    "modal",
-    "nextjs",
-    "notifications",
-    "npm-package",
     "popover",
-    "prime-ui",
-    "prime-ui-kit",
-    "react",
-    "react-19",
-    "react-aria",
-    "react-components",
-    "react-day-picker",
-    "react-ui",
-    "reactjs",
-    "remix",
-    "select",
-    "sidebar",
-    "table",
-    "theming",
-    "toast",
     "tooltip",
-    "typescript",
-    "ui-components",
-    "ui-kit",
-    "vite"
+    "toast",
+    "command-palette",
+    "sidebar",
+    "app-shell",
+    "color-picker",
+    "file-upload",
+    "otp-input"
   ],
   "license": "MIT",
   "repository": {
@@ -73,53 +65,58 @@
     "access": "public"
   },
   "devDependencies": {
-    "date-fns": "^4.1.0",
-    "react-day-picker": "^9.14.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",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-aria-components": "^1.16.0",
-    "react-day-picker": "^9.14.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 .",
@@ -127,8 +124,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": [
@@ -136,8 +132,6 @@
   ],
   "type": "module",
   "dependencies": {
-    "framer-motion": "^12.38.0",
-    "lucide-react": "^0.577.0",
-    "react-router-dom": "^7.13.1"
+    "lucide-react": "^0.577.0"
   }
 }