@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espressif/dashboard-ui-components",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Reusable React UI components, page layouts, and utilities — Espressif's dashboard design system.",
   "keywords": [
     "react",
@@ -57,6 +57,10 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    },
     "./common": {
       "types": "./dist/common/index.d.ts",
       "import": "./dist/common/index.js"
@@ -69,11 +73,45 @@
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js"
     },
+    "./animation": {
+      "types": "./dist/animation/index.d.ts",
+      "import": "./dist/animation/index.js"
+    },
+    "./carousel": {
+      "types": "./dist/carousel/index.d.ts",
+      "import": "./dist/carousel/index.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/data-table/index.d.ts",
+      "import": "./dist/data-table/index.js"
+    },
+    "./date": {
+      "types": "./dist/date/index.d.ts",
+      "import": "./dist/date/index.js"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.ts",
+      "import": "./dist/markdown/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast/index.js"
+    },
     "./styles": "./src/styles/globals.css",
+    "./theme.css": "./src/styles/theme.css",
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -89,13 +127,18 @@
     ".claude/rules/dashboard-ui-consumption.md"
   ],
   "scripts": {
-    "build": "vite build --config vite.lib.config.ts && tsup",
-    "dev:lib": "tsup && vite build --config vite.lib.config.ts --watch",
+    "build": "node scripts/gen-entries.mjs && vite build --config vite.lib.config.ts && npm run build:types",
+    "build:types": "node --max-old-space-size=4096 node_modules/tsup/dist/cli-default.js",
+    "gen:entries": "node scripts/gen-entries.mjs",
+    "dev:lib": "node scripts/gen-entries.mjs && npm run build:types && vite build --config vite.lib.config.ts --watch",
     "prepublishOnly": "npm run build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint",
     "test": "vitest run",
     "size": "node scripts/check-bundle-size.mjs",
+    "check:api": "node scripts/check-api.mjs",
+    "check:css": "node scripts/check-css.mjs",
+    "verify": "bash scripts/verify.sh",
     "clean": "rm -rf dist",
     "dev:demo": "cd demo && npm run dev",
     "build:demo": "cd demo && npm run build",
@@ -111,7 +154,7 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "recharts": "^2.15.0",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.1.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
@@ -122,7 +165,7 @@
     }
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-alpha.10",
+    "@base-ui/react": "^1.8.0",
     "@floating-ui/react": "^0.27.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.1.0",
@@ -149,6 +192,7 @@
     "radix-ui": "^1.0.0",
     "react-day-picker": "9.14.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.14.1",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
@@ -156,6 +200,8 @@
     "tailwind-merge": "^2.5.0"
   },
   "devDependencies": {
+    "@tailwindcss/node": "4.3.2",
+    "@tailwindcss/oxide": "4.3.2",
     "@tanstack/react-table": "^8.21.0",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",

package/src/styles/colors.css

@@ -18,6 +18,14 @@
   --color-secondary-container: #cdeaff;
   --color-secondary-container-foreground: #000743;
 
+  /* ─── Brand: Gradient ───
+     Three stops for brand-coloured text (`text-gradient`). They follow the
+     brand roles until an app sets its own (a logo's colours, say), and like
+     the roles they switch under `.dark` without being redeclared there. */
+  --color-gradient-start: var(--color-primary);
+  --color-gradient-middle: var(--color-secondary);
+  --color-gradient-end: var(--color-tertiary);
+
   /* Tooltip: dark canvas in light mode (same value as .dark --color-background) */
   --color-tooltip: #030303;
   --color-tooltip-foreground: #ffffff;
@@ -72,8 +80,36 @@
 
   /* ─── Surface: Muted ─── */
   --color-muted: #f3f3f3;
+
+  /* Surface: Recessed — the floor of something sunk into the surface around it
+     (StepTabs' tray). Translucent, so it darkens whatever bar it sits in. Pair
+     with `shadow-recessed`, which draws its walls. */
+  --color-recessed: rgb(0 0 0 / 0.05);
   --color-muted-foreground: #666666;
 
+  /* Surface: Canvas — a work surface things are placed on and dragged around
+     (a wiring diagram, a whiteboard), a step off the page so artwork of any
+     tone stands on it. `canvas-dot` draws its grid; `canvas-rim` outlines
+     artwork drawn in its own colours, which may be the canvas's tone. */
+  --color-canvas: #f4f4f5;
+  --color-canvas-dot: rgb(0 0 0 / 0.09);
+  --color-canvas-rim: rgb(0 0 0 / 0.38);
+
+  /* Wires on the canvas: power, ground, and eight colours for everything else.
+     Each is at least 3:1 against the canvas in its theme — darker here, lighter
+     in dark mode — so a wire never reads as a hairline. Ground is a grey that
+     stays visible, never black. */
+  --color-wire-power: #d23030;
+  --color-wire-ground: #5b6270;
+  --color-wire-1: #2563eb;
+  --color-wire-2: #15935a;
+  --color-wire-3: #b06a06;
+  --color-wire-4: #7c4ddb;
+  --color-wire-5: #0b8299;
+  --color-wire-6: #c42f7f;
+  --color-wire-7: #5a8410;
+  --color-wire-8: #c4541c;
+
   /* ─── Surface: Accent (tertiary-container) ─── */
   --color-accent: #dae9fe;
   --color-accent-foreground: #01112a;
@@ -144,13 +180,54 @@
   --color-chart-gray: #989898;
   --color-chart-primary: var(--color-primary);
   --color-chart-secondary: var(--color-secondary);
-}
 
-/* ─── Dark Mode ─── */
+  /* ─── Swatches ───
+     Five categorical colours for things told apart by colour alone and
+     meaning nothing by it (one person's avatar tile from the next). Each is an
+     ink (`text-swatch-1`, a mark on a surface) and a light tint
+     (`bg-swatch-1-light`, the surface behind it), readable together. Pick one
+     from a stable hash, never by meaning — status has its own tokens. */
+  --color-swatch-1: #3550b8;
+  --color-swatch-1-light: #e9eefc;
+  --color-swatch-2: #d53744;
+  --color-swatch-2-light: #fdecec;
+  --color-swatch-3: #6b55b8;
+  --color-swatch-3-light: #f0ecfb;
+  --color-swatch-4: #2e8a57;
+  --color-swatch-4-light: #e6f4ec;
+  --color-swatch-5: #a8681a;
+  --color-swatch-5-light: #fbf0dc;
+
+  /* ─── Scrim ───
+     A dark, see-through layer laid over content to put something on top of
+     it (a detail panel opening over a card's picture), with the text that
+     reads on it. The same in light and dark on purpose: it darkens whatever
+     is behind it either way. Use with an opacity (`bg-scrim/85`). */
+  --color-scrim: #0d0f17;
+  --color-scrim-foreground: #ffffff;
+}
 
-@custom-variant dark (&:where(.dark, .dark *));
+/* ─── Dark Mode ───
+   Dark applies under a `.dark` class or a `data-theme="dark"` attribute on any
+   ancestor (usually <html>). The library never decides when: the app sets one.
+   No prefers-color-scheme handling here, by design. */
+
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+
+.dark,
+[data-theme="dark"] {
+  /* Swatches: brighter inks on deep tints. */
+  --color-swatch-1: #8ea8ff;
+  --color-swatch-1-light: #1a2140;
+  --color-swatch-2: #f2545b;
+  --color-swatch-2-light: #2e1a20;
+  --color-swatch-3: #b9a8f0;
+  --color-swatch-3-light: #221e38;
+  --color-swatch-4: #5cc28a;
+  --color-swatch-4-light: #14281e;
+  --color-swatch-5: #e3b04b;
+  --color-swatch-5-light: #2b2214;
 
-.dark {
   /* Brand: Primary */
   --color-primary: #7cd9ff;
   --color-primary-light: #b9ebff;
@@ -213,8 +290,27 @@
 
   /* Surface: Muted */
   --color-muted: #141414;
+
+  /* Surface: Recessed — deeper on a dark surface, where a lighter veil reads as raised. */
+  --color-recessed: rgb(0 0 0 / 0.35);
   --color-muted-foreground: #c1c1c1;
 
+  /* Surface: Canvas — lifted off a dark page, never near-black: much hardware
+     artwork is dark grey and would sink into it. The rim is light here. */
+  --color-canvas: #1d1f23;
+  --color-canvas-dot: rgb(255 255 255 / 0.07);
+  --color-canvas-rim: rgb(255 255 255 / 0.42);
+  --color-wire-power: #f05252;
+  --color-wire-ground: #8b929c;
+  --color-wire-1: #4f8ff7;
+  --color-wire-2: #34c37b;
+  --color-wire-3: #f2a33a;
+  --color-wire-4: #a78bfa;
+  --color-wire-5: #22b8cf;
+  --color-wire-6: #ec5fa8;
+  --color-wire-7: #9bcf4a;
+  --color-wire-8: #f47c3c;
+
   /* Surface: Accent */
   --color-accent: #383838;
   --color-accent-foreground: #e4e4e4;

package/src/styles/globals.css

@@ -1,120 +1,12 @@
 @import "tailwindcss";
-@import "./colors.css";
-
-@source "../../dist";
-
-@theme {
-  /* Radius */
-  --radius-lg: 0.5rem;
-  --radius-md: calc(0.5rem - 2px);
-  --radius-sm: calc(0.5rem - 4px);
-
-  /* Default font stack. The library ships no font binaries — consumers can
-     override --font-sans to supply their own typeface. */
-  --font-sans:
-    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial,
-    "PingFang SC", "Microsoft YaHei", 黑体, sans-serif;
-
-  /* Animations */
-  --animate-underline-slide: underline-slide 1s ease-in-out;
-  --animate-collapsible-down: collapsible-down 0.3s ease-out;
-  --animate-collapsible-up: collapsible-up 0.3s ease-out;
-  --animate-avatar-ring: avatar-ring 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
-}
-
-@keyframes caret-blink {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}
-
-@keyframes avatar-ring {
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0.45;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0.375rem currentColor;
-    opacity: 0;
-  }
-}
-
-@keyframes collapsible-down {
-  from {
-    grid-template-rows: 0fr;
-  }
-  to {
-    grid-template-rows: 1fr;
-  }
-}
-
-@keyframes collapsible-up {
-  from {
-    grid-template-rows: 1fr;
-  }
-  to {
-    grid-template-rows: 0fr;
-  }
-}
-
-@keyframes underline-slide {
-  0% {
-    transform: scaleX(1);
-    transform-origin: right;
-  }
-  50% {
-    transform: scaleX(0);
-    transform-origin: right;
-  }
-  50.1% {
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  100% {
-    transform: scaleX(1);
-    transform-origin: left;
-  }
-}
+@import "./theme.css";
+/* Toast styles. The Toast component also imports them from JavaScript (kept
+   for compatibility); identical duplicate rules are harmless. Having them
+   here lets a future major drop that JS import. */
+@import "sonner/dist/styles.css";
 
+/* Browser autofill */
 :root {
-  --espd-sidebar-width: 288px;
-  --espd-sidebar-width-collapsed: 56px;
-  --espd-sidebar-width-mobile: 18rem;
-
-  --espd-header-height: 3.125rem;
-  --espd-navbar-height: 4rem;
-  --espd-banner-height: 0rem;
-  --espd-footer-height: 1.5rem;
-  --espd-hidden-footer-height: 0.75rem;
-
-  --espd-floating-window-offset-left: 0px;
-  --espd-floating-window-offset-right: 0px;
-  --espd-floating-window-offset-top: var(--espd-header-height);
-  --espd-floating-window-offset-bottom: var(--espd-footer-height);
-
-  --menu-item-height: 2.5rem;
-  --spacing: 0.25rem;
-  --text-sm: 0.875rem;
-  --text-sm--line-height: 1.25rem;
-
-  /** Every sidebar nav row: group labels and menu item labels share one scale. */
-  --espd-sidebar-item-font-size: 0.875rem;
-  /** Collapsed-sidebar flyout: group title row. Matches the rows above by default;
-      raise it if you want the flyout title to stand out from its submenu items. */
-  --espd-sidebar-flyout-group-label-font-size: 0.875rem;
-
-  /* Browser autofill */
   input:autofill,
   textarea:autofill,
   input:-webkit-autofill,
@@ -132,13 +24,8 @@
   }
 }
 
-.dark {
-  --espd-floating-window-offset-left: 0px;
-  --espd-floating-window-offset-right: 0px;
-  --espd-floating-window-offset-top: var(--espd-header-height);
-  --espd-floating-window-offset-bottom: var(--espd-footer-height);
-
-  /* Browser autofill */
+.dark,
+[data-theme="dark"] {
   input:autofill,
   textarea:autofill,
   input:-webkit-autofill,
@@ -156,22 +43,12 @@
 }
 
 @layer base {
-  * {
-    border-color: var(--color-border);
-  }
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
   }
 }
 
-@layer utilities {
-  .hstack {
-    display: flex;
-    flex-direction: row;
-  }
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,

package/src/styles/style-axes.css

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Espressif Systems (Shanghai) CO LTD
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* A component's own style-axis values (its `radius`, `elevation` and `border`
+   props, set inline). They do not inherit, so a value on one component never
+   reaches the components nested inside it; role tokens are what inherit. */
+@property --espd-own-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --espd-own-elevation {
+  syntax: "*";
+  inherits: false;
+}
+@property --espd-own-border-width {
+  syntax: "*";
+  inherits: false;
+}