@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/README.md

@@ -40,7 +40,8 @@ Built with React, TypeScript, Tailwind CSS v4, and Radix UI primitives.
 - Layout shells for dashboards and entry pages
 - TypeScript support with exported types
 - Tailwind CSS v4 design tokens and shared preset
-- ESM sub-path exports (`/components`, `/layouts`, `/common`, `/utils`) so apps can narrow the entry graph; fine-grained per-component bundle shrinking is limited by the pre-built chunks (see [Bundle size, Babel warnings, and imports](#bundle-size-babel-warnings-and-imports))
+- ESM entry points down to a single component (`/components/button`) or one heavy family (`/charts`, `/date`, …), so an app, its tests and its dev server only load what they import (see [Entry points](#entry-points))
+- Theming beyond colour: density, motion, focus-ring and on-colour tokens, a tokens-only stylesheet, dark mode by class or `data-theme`, and variants an app can register
 - Pure components — no internal state management, routing, or API calls
 - Published to public npm (semver ranges, pre-built ESM, no consumer-side build)
 
@@ -82,6 +83,25 @@ Import the library's design tokens and base styles in your global Tailwind CSS e
 @import "@espressif/dashboard-ui-components/styles";
 ```
 
+#### Which stylesheet to pick
+
+| Import | Contains | Use when |
+|---|---|---|
+| `@espressif/dashboard-ui-components/styles` | Tailwind (with its Preflight reset), every token, the base page styles (body colours, autofill) and Toast styles | almost always: one line and you are done |
+| `@espressif/dashboard-ui-components/theme.css` | every token, the `dark` variant, the keyframes and the library's `@source`; **no** `@import "tailwindcss"`, no Preflight, no page styles | your app brings its own Tailwind setup, or legacy CSS that a global reset would break |
+
+With `theme.css`, import Tailwind yourself first, and set your own page colours:
+
+```css
+@import "tailwindcss";
+@import "@espressif/dashboard-ui-components/theme.css";
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+```
+
 ### 2. Peer Dependencies
 
 Required:
@@ -185,19 +205,167 @@ All tokens live in the library's [`src/styles/colors.css`](./src/styles/colors.c
 **Charts** — `--color-chart-1` through `--color-chart-10`, plus `--color-chart-success`, `-error`, `-warning`, `-disabled`, `-gray`, `-primary`, `-secondary`
 
 **Layout dimensions** (light and dark share the same value; override in `:root`):
-`--espd-sidebar-width`, `--espd-sidebar-width-collapsed`, `--espd-sidebar-width-mobile`, `--espd-header-height`, `--espd-navbar-height`, `--espd-banner-height`, `--espd-footer-height`, `--espd-hidden-footer-height`, `--espd-sidebar-item-font-size`, `--espd-sidebar-flyout-group-label-font-size`
+`--espd-sidebar-width`, `--espd-sidebar-width-collapsed`, `--espd-sidebar-width-mobile`, `--espd-shell-header-height`, `--espd-navbar-height`, `--espd-banner-height`, `--espd-workspace-layout-footer-height`, `--espd-workspace-layout-hidden-footer-height`, `--espd-sidebar-item-font-size`, `--espd-sidebar-flyout-group-label-font-size`
+
+The 1.x names `--espd-header-height`, `--espd-footer-height` and `--espd-hidden-footer-height` still work as fallbacks and are removed in 2.0 (see the CHANGELOG).
+
+**Typography and radius** — `--font-sans` and `--font-mono` (whole font stacks; override in `@theme` to replace; `--font-mono` is what code, logs and `MonospaceContent` use), `--radius-lg` (drives `-md` and `-sm`)
+
+**Density, motion, focus and on-colour text** — set on `:root`; defaults reproduce the previous look exactly (details in [docs/token-audit.md](./docs/token-audit.md)):
+`--espd-control-height-sm|md|lg` (buttons, inputs, selects, toggles), `--espd-button-padding-x-sm|md|lg`, `--espd-duration-fast|normal|slow`, `--espd-ring-width`, `--espd-ring-offset`, `--espd-on-solid-foreground`, `--espd-table-head-height`, `--espd-table-cell-padding`, `--espd-sidebar-row-height` (+ `-sm`), `--espd-item-height` (List rows; falls back to `--menu-item-height`), `--espd-gap-field` (FormItem), `--espd-gap-stack` (DialogContent)
+
+```css
+:root {
+  --espd-control-height-md: 2.5rem;   /* roomier buttons */
+  --espd-duration-slow: 180ms;        /* snappier hover rings */
+  --espd-ring-width: 3px;
+}
+```
+
+Already overridable through Tailwind's own theme variables, no library token needed: `--radius-*`, `--spacing`, `--default-transition-duration`, `--default-transition-timing-function`, and `--shadow-*` (in `@theme` only: Tailwind writes shadow values into the utilities, so redeclaring them on `:root` changes no `shadow-*` class; the style-axis elevations below do read them on `:root`).
+
+For corner radius, shadow, border width and density **per kind of component**, or on one component, see [Shape, elevation, border and density](#shape-elevation-border-and-density).
+
+### Dark mode
+
+Dark applies under a `.dark` class **or** a `data-theme="dark"` attribute on any ancestor, usually `<html>`. Pick whichever your app already uses; override dark tokens under the same selector. The library never decides when dark applies (no `prefers-color-scheme` handling): the app does.
+
+```css
+.dark,
+[data-theme="dark"] {
+  --color-sidebar: #064e3b;
+}
+```
+
+### Adding a variant
+
+Variant-driven components (Badge, Alert, Tag, StatusBadge, SimpleClickableCard, SimpleInfoCard, IconTextActionCard, SectionCard, IconAvatar, Toast…) take `variant="outline" | "solid" | "soft" | "gradient" | "glow"`. An app can add its own, without forking, by declaring the name and registering its styles once at start-up:
+
+```ts
+// src/theme/neon-variant.ts
+import type { CSSProperties } from 'react'
+import { registerVariant } from '@espressif/dashboard-ui-components/components'
+
+declare module '@espressif/dashboard-ui-components/components' {
+  interface VariantRegistry {
+    neon: true
+  }
+}
+
+registerVariant('neon', (color) => {
+  const c = typeof color === 'string' && !color.startsWith('#') ? `var(--color-${color})` : color
+  return {
+    container: 'border border-transparent shadow-[0_0_24px_-4px_var(--neon)]',
+    containerStyle: { '--neon': c, backgroundColor: `color-mix(in oklab, ${c} 12%, transparent)` } as CSSProperties,
+    foreground: 'text-foreground',
+    description: 'text-muted-foreground',
+  }
+})
+```
+
+```tsx
+<Badge variant="neon" color="primary">AI</Badge>
+```
+
+The recipe returns the same shape as `resolveVariantStyles` (`container`, `foreground`, `description`, optional inline styles). Built-in variants cannot be replaced (a warning is logged), `VARIANTS` stays the five built-ins, and `listVariants()` returns built-ins plus registered ones. Augment the entry point you import `registerVariant` from (`/components`, `/utils` or the root); the declaring file must import that entry.
+
+### Shape, elevation, border and density
+
+Four **style axes** give an app its own personality without forking a component:
+`radius`, `elevation` (shadow), `border` (width) and `density`. They work at three levels,
+from broadest to narrowest; the narrower one wins, and a component's own `className` wins
+over all of them.
+
+**1. Role tokens: one value for a kind of component.** Components are grouped into
+**roles**; set a role's token and every member changes, wherever it is set (`:root`, a page
+wrapper, or `StyleScope`). Unset (the default), each component keeps its own look.
 
-**Typography and radius** — `--font-sans` (whole font stack; override in `@theme` to replace), `--radius-lg` (drives `-md` and `-sm`)
+| Role | Tokens | Members (summary) |
+|---|---|---|
+| control | `--espd-radius-control`, `--espd-border-width-control`, `--espd-elevation-control` | Button and its variants, Input, Textarea, Select trigger, search boxes, FileInput, InputOTP, TagInput, date-picker triggers, Combobox, ToggleGroup |
+| surface | `--espd-radius-surface`, `--espd-border-width-surface`, `--espd-elevation-surface` | Card, SimpleCard, SectionCard, CollapsibleCard, StatCard, Alert and the info/clickable cards, SelectableCardList, FileUpload, CodeEditor, Code, DataTable, ListDetails, ScrollableSections, StatusCardList |
+| overlay | `--espd-radius-overlay`, `--espd-elevation-overlay` | Dialog, Sheet, Popover, DropdownMenu, Select list, Tooltip, Toast, PreviewCard |
+| pill | `--espd-radius-pill` | Badge, Tag, StatusBadge, UserTypeBadge, OverflowBadgeList |
+| item | `--espd-radius-item` | rows of menus, selects, Sidebar, NavBar, Tabs, List, TransferList; Calendar day cells |
+
+The full matrix, with the shapes that never take a role (avatars, switches, checkboxes…), is in
+[docs/token-audit.md](./docs/token-audit.md).
+
+```css
+@import "@espressif/dashboard-ui-components/styles";
+
+:root {
+  --espd-radius-control: 9999px;          /* pill buttons and inputs */
+  --espd-radius-surface: 1rem;
+  --espd-elevation-surface: 0 0 #0000;    /* flat cards; any box-shadow value except `none`, */
+                                          /* which would also drop focus rings */
+  --espd-border-width-surface: 2px;
+  --espd-elevation-overlay: var(--shadow-xl);
+}
+```
+
+Overlays render in portals on `<body>`, outside any wrapper: set overlay tokens on `:root`.
+
+**2. `StyleScope`: the same from React, for a subtree.**
+
+```tsx
+import { StyleScope } from '@espressif/dashboard-ui-components/components/style-scope'
+
+<StyleScope radius={{ control: 'full', surface: 'lg' }} elevation={{ surface: 'none' }} density="compact">
+  <SettingsPage />
+</StyleScope>
+```
+
+It renders a `display: contents` wrapper (or merges onto its child with `asChild`) carrying the
+role tokens and the density's tokens; nothing else.
+
+**3. Instance props: one component.** Applicable components take `radius`, `elevation` and/or
+`border`. A value affects that component only; components nested inside it keep their own look.
+
+```tsx
+<Card radius="none" elevation="none" border="none">…</Card>
+<Button radius="full">Save</Button>
+<Dialog><DialogContent radius="xl" elevation="xl">…</DialogContent></Dialog>
+```
+
+Values: `radius` `none` `xs` `sm` `md` `lg` `xl` `2xl` `full`; `elevation` `none` `xs` `sm` `md`
+`lg` `xl`; `border` `none` `default` (1px) `strong` (2px). Where a component already had
+`rounded` (Input, InputOTP, FileInput, Tag, the date pickers) or `noShadow` / `noBorder`
+(SimpleCard), those still work and the new prop wins when both are set. The date pickers'
+`radius` shapes their trigger; `popoverRadius` and `popoverElevation` shape the calendar popover. Instance props need the
+library stylesheet (`./styles` or `./theme.css`), which keeps their values from inheriting.
+
+**Density** scales controls, table rows and cells, list rows, sidebar rows, a form field's
+spacing (`--espd-gap-field`, FormItem) and a dialog's (`--espd-gap-stack`, DialogContent) together:
+`density="compact" | "default" | "comfortable"` on Table, DataTable, Card, List, SimpleList,
+FiltersBar, Sidebar, DialogContent and SheetContent, or on `StyleScope`. `default` is today's look.
+
+**Registering your own values** works like variants:
+
+```ts
+import { registerStyleValue, registerDensity } from '@espressif/dashboard-ui-components/components'
+
+declare module '@espressif/dashboard-ui-components/components' {
+  interface RadiusRegistry { squircle: true }
+  interface DensityRegistry { kiosk: true }
+}
+
+registerStyleValue('radius', 'squircle', '1.25rem')      // a CSS value, no class needed
+registerDensity('kiosk', { '--espd-control-height-lg': '3.5rem', '--espd-item-height': '3.5rem' })
+```
+
+`listStyleValues(axis)` returns the built-ins plus registered values; built-ins cannot be replaced.
 
 ### Tips
 
 - Put your overrides **after** the `@import` line; CSS cascade order is what makes the override win.
 - Prefer redeclaring existing tokens (in `:root` / `.dark`) over adding new ones — the built-in tokens are what every component reads from.
 - If you only need light mode, a single `:root` block is enough. If you support both, always mirror the change in `.dark`.
-- Overriding `--font-sans` requires an `@theme` block so Tailwind picks it up:
+- Overriding `--font-sans` or `--font-mono` requires an `@theme` block so Tailwind picks it up:
   ```css
   @theme {
     --font-sans: "Inter", system-ui, sans-serif;
+    --font-mono: "JetBrains Mono", ui-monospace, monospace;
   }
   ```
 
@@ -314,6 +482,49 @@ The older `sidebarConfig.hideCompanyBranding: true` still works as a shorthand f
 
 ## Usage
 
+### Entry points
+
+Import from the **narrowest path you can**. Production bundlers drop unused components either way, but tests (Vitest, Jest), dev servers and CommonJS tooling evaluate every module an entry reaches, so a narrow path keeps them fast and free of other components' dependencies.
+
+| Path | Contains |
+|---|---|
+| `@espressif/dashboard-ui-components/components/<folder>` | one component folder, e.g. `/components/button`, `/components/dialog`, `/components/data-table`. Same names as `/components` exports for it, the same objects (not copies) |
+| `/charts` | charts (recharts) |
+| `/data-table` | `DataTable` (@tanstack/react-table) |
+| `/markdown` | `MarkdownContent`, `Code`, `CodeEditor`, `MonospaceContent` (react-markdown, shiki) |
+| `/date` | `Calendar`, `DatePicker`, `DateRangePicker`, `DateTimePicker`, `TimePicker` (react-day-picker, date-fns) |
+| `/carousel` | `Carousel` (embla) |
+| `/forms` | react-hook-form bindings (`Form`, `FormField`, …) |
+| `/animation` | `LottieAnimationContainer` and the bundled animations |
+| `/toast` | `Toast`, `Toaster`, `toast` (sonner) |
+| `/components`, `/layouts`, `/common`, `/utils` | everything of that surface |
+| `.` (root) | components + common + layouts together |
+
+```tsx
+import { Button } from '@espressif/dashboard-ui-components/components/button'
+import { Typography } from '@espressif/dashboard-ui-components/components/typography'
+import { BarChart } from '@espressif/dashboard-ui-components/charts'
+```
+
+The folder names are those under `src/components/`; the shipped `dist/components/<folder>/index.d.ts` lists what each exports. Every entry that includes Toast (`/toast`, `/components/toast`, `/components` and the root) imports sonner's stylesheet from JavaScript, which Node-based test runners cannot load without a CSS transform; the other entries do no work at import time.
+
+### Buttons
+
+The styled `Button` from `/components` (or `/components/button`) takes `color`, `startIcon`, `endIcon`, `loading`, `tooltip` and `iconOnlyBelow`. `/core` exports a different, uncoloured base `Button` with the same name; apps should not use `/core`.
+
+- **`fullWidth` defaults to `true`.** Pass `fullWidth={false}` for an inline button.
+- **Links:** `asChild` renders your element (an `<a>`, a router `Link`) with the button's look, icons and label inside it:
+
+  ```tsx
+  <Button asChild startIcon={<Plus />}>
+    <Link to="/devices/new">Add device</Link>
+  </Button>
+  ```
+
+  A link cannot be natively disabled, so with `disabled` or `loading` it gets `aria-disabled="true"`, `data-disabled`, `tabIndex={-1}` and the disabled look, and its clicks are cancelled before the link's own `onClick`.
+
+### Surfaces
+
 Prefer **sub-path entry points** over the package root unless you need components, common modules, and layouts from a single entry:
 
 ```tsx
@@ -347,7 +558,7 @@ import {
 
 ### Why you may see `[BABEL] … deoptimised the styling … exceeds the max of 500KB`
 
-This library is shipped as **pre-bundled ESM** (built with tsup). Published files include large shared chunks (for example `dist/chunk-*.js`). When your toolchain runs **Babel** on those files (common with Metro or other setups that transform `node_modules`), Babel switches to compact code generation for very large single files and logs an **informational** message. It does **not** mean the build is invalid; it means Babel is skipping expensive “pretty” output for that file.
+This library is shipped as **pre-built ESM**, one module per source file (Vite). A few files are still large (bundled Lottie, animation data, the type declarations). When your toolchain runs **Babel** on those files (common with Metro or other setups that transform `node_modules`), Babel switches to compact code generation for very large single files and logs an **informational** message. It does **not** mean the build is invalid; it means Babel is skipping expensive “pretty” output for that file.
 
 ### What makes the shipped JS large
 
@@ -357,7 +568,7 @@ This library is shipped as **pre-bundled ESM** (built with tsup). Published file
 
 ### How to keep consumer builds sensible
 
-1. Use `@espressif/dashboard-ui-components/components`, `/layouts`, `/common`, or `/utils` instead of the root package when you do not need everything together.
+1. Import from the narrowest [entry point](#entry-points): a single component (`/components/button`), a heavy family (`/charts`, `/date`, …), or a surface (`/components`, `/layouts`, …) rather than the root package.
 2. Install **optional peer dependencies** only for features you use (`@tanstack/react-table`, `react-hook-form`, `shiki`, `recharts`).
 3. Prefer **production builds** when measuring size; dev servers and Babel-on-vendor paths often look worse than optimized output.
 4. For web apps, use a **bundle analyzer** on your app if you need to chase kilobytes; expect a sizable vendor chunk for a full-featured UI kit.
@@ -459,13 +670,34 @@ version you have installed is the shipped type declarations:
 | MarkdownContent | Renders a markdown string with library primitives (GFM, heading anchors; raw HTML is escaped, not parsed) |
 | CopiableText / CopyButton | Copy-to-clipboard utilities |
 | ProgressBar | Progress indicator |
+| MiniBarChart | A row of bars with no axes, sized for a card (a sparkline of counts); highlight one, zeros as stubs |
+| Timeline | A short feed of events with dots on a line, paged with "Show N more" |
+| ShareMenu | Share a link: copy, the device's share sheet, X, Reddit, LinkedIn, Telegram or email |
 | Collapsible / CollapsibleCard | Expandable content sections |
 | SimpleCard / BasicDetailsCard / NoDataCard | Specialized card variants |
+| CategoryCard | One category of a collection as a card that opens or filters it: icon on a coloured tile, a count, name, one line and a few example tags; a button, or a link with `href`; lays itself out by its own width (narrow cards drop the tags) |
+| FlipCard | A card with two faces that changes to the other one, turned over or slid through; every change moves the same way, so it can show a stream of items in one slot |
 | PreviewCard | Content preview card |
 | Carousel | Slide carousel — horizontal/vertical, dots, arrows or custom navigation, optional autoplay |
+| Coverflow | 3D ring of image cards on a glass reflection, with a caption under the front item; endless, optional autoplay |
+| ShowcaseCard | Catalogue card on `MediaCard`: picture with a slide-up actions strip, a title that opens a page, an app route or an action, meta and footer rows |
+| ChoiceCard | A card you click to choose something: one toggle button, picture on a mist, ring and tick when selected, greyed with its reason when disabled; `stack` or `row` layout |
+| Toolbar / ToolbarButton | Thin bar of small controls with start, centre and end slots and arrow-key focus movement; 28px icon-only buttons with tooltip, toggle state, count or attention dot |
+| ResizableGroup / ResizablePanel / ResizableSeparator | Panels resized by dragging or the keyboard (react-resizable-panels), with a remembered layout and collapsible panels |
+| ColumnPanel | A resizable panel shown and hidden by a flag, staying mounted (and inert) while hidden; `usePanelFlag` drives any collapsible panel the same way |
+| FloatingWindow | Small draggable non-modal window with minimize-to-pill, dock and close |
+| AnchoredPanel | Small non-modal panel attached to a point by a leader line, beside the thing it edits |
+| NoticeStrip | Full-width line of news (info, warning, error) across the top of a canvas, with actions and an optional dismiss |
+| Readout | Instrument display: monospace values and units on a dark plate, optionally a toggle button |
+| SortMenu | One-of picker: the current choice as the button's label, the choices in a radio menu |
+| FiltersPanel / FilterGroup / FiltersPill / ActiveFilters | Catalogue filters: a side panel of counted groups with show-more and per-group search, folding into a floating pill, plus removable active-filter tags |
+| InputGroup / InputGroupTextarea / InputGroupAddon | A field and its controls in one bordered box with a shared focus ring; an auto-growing text area |
+| Bubble / MessageScroller | A conversation: one turn's text (tinted for the person's own words), and a scrolling log that follows new messages and offers a jump to the latest |
+| Reveal | One part of a section's entrance, rising into place when revealed, staggered by order |
+| CheckBadge | Small success circle with a tick, for inside an SVG scene |
 | PageContainer | Page wrapper with header |
 | DynamicList | Dynamic item list |
-| RequirementList | Met/unmet checklist (password rules, prerequisites); check for satisfied rows, muted circle for outstanding ones, with screen-reader state labels |
+| RequirementList | Met/unmet checklist (password rules, prerequisites); check for satisfied rows, muted circle for outstanding ones, with screen-reader state labels; an optional `description` per row adds a muted second line |
 | TogglableItemsList | Toggleable item list |
 | GlitchText / GradientText / HighlightText / ShimmeringText | Text effects |
 | LottieAnimationContainer | Lottie animation wrapper |
@@ -476,6 +708,7 @@ version you have installed is the shipped type declarations:
 | Component | Description |
 |-----------|-------------|
 | WorkspaceLayout | Full dashboard shell with sidebar, header, and footer |
+| MinimalWorkspaceLayout | Header-less shell: a full-height icon rail on the page background that expands into an elevated sidebar, a floating top-right slot. With `sidebarConfig.hideWhenCollapsed` the sidebar is hidden instead: a click on the content's left edge peeks it over the content, `MinimalWorkspaceSidebarTrigger` opens it inline. Same props as WorkspaceLayout; themed with `--espd-minimal-workspace-layout-*` |
 | EntryLayout | Authentication and entry page layout — supports a custom right panel, and hiding the logo, footer, background image or right panel entirely |
 
 ### Common (`/common`)

package/THIRD-PARTY-NOTICES.md

@@ -18,7 +18,7 @@ this file when dependencies change._
 
 | Package | Version | License |
 | --- | --- | --- |
-| @base-ui-components/react | 1.0.0-rc.0 | MIT |
+| @base-ui/react | 1.9.0 | MIT |
 | @floating-ui/react | 0.27.19 | MIT |
 | @radix-ui/react-avatar | 1.2.0 | MIT |
 | @radix-ui/react-collapsible | 1.1.14 | MIT |
@@ -42,6 +42,7 @@ this file when dependencies change._
 | radix-ui | 1.6.0 | MIT |
 | react-day-picker | 9.14.0 | MIT |
 | react-markdown | 10.1.0 | MIT |
+| react-resizable-panels | 4.22.0 | MIT |
 | rehype-slug | 6.0.0 | MIT |
 | remark-gfm | 4.0.1 | MIT |
 | shiki | 4.3.0 | MIT |

package/dist/alert.props-CcKo49Rb.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { C as Color, S as Size } from './index-BQANnKs9.js';
+import { f as Variant } from './variant-D81RhpbR.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+import { b as IconAvatarVariant } from './icon-avatar.props-RYtw2eSW.js';
+import { I as IconTextActionCardActionsPlacement } from './icon-text-action-card.props-B2ggncUK.js';
+
+type AlertColor = Color;
+type AlertVariant = Variant;
+type AlertSize = Size;
+type AlertIconAvatarVariant = IconAvatarVariant;
+type AlertType = "error" | "info" | "warning" | "success";
+interface AlertProps extends Pick<StyleAxisProps, "radius"> {
+    icon?: React.ReactNode;
+    title?: string | React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Semantic category: sets the default icon when `icon` is not provided. */
+    type?: AlertType;
+    color?: AlertColor;
+    iconAvatarVariant?: AlertIconAvatarVariant;
+    hideIcon?: boolean;
+    action?: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * Where `actions` sit, at every width: `"auto"` beside the text when they fit,
+     * otherwise below it; `"below"` always on their own line below the text.
+     * With `dismissible`, the close button shares that line.
+     *
+     * @default "auto"
+     */
+    actionsPlacement?: IconTextActionCardActionsPlacement;
+    /** Render a close button in the trailing actions slot; clicking it hides the alert. */
+    dismissible?: boolean;
+    /** Called after the alert is dismissed. Notification only — the Alert hides itself. */
+    onDismiss?: () => void;
+    /** Accessible label for the close button. */
+    dismissLabel?: string;
+    className?: string;
+    size?: AlertSize;
+    variant?: AlertVariant;
+}
+
+export type { AlertColor as A, AlertIconAvatarVariant as a, AlertProps as b, AlertSize as c, AlertType as d, AlertVariant as e };

package/dist/animation/index.d.ts

@@ -0,0 +1,3 @@
+export { LottieAnimationContainer, LottieAnimationContainerProps } from '../components/lottie-animation-container/index.js';
+export { VerificationInProgress, VerificationInProgressProps } from '../components/lottie-animations/index.js';
+import 'react';

package/dist/animation/index.js

@@ -0,0 +1,3 @@
+import { LottieAnimationContainer } from "../components/lottie-animation-container/lottie-animation-container.js";
+import { VerificationInProgress } from "../components/lottie-animations/verification-in-progress/verification-in-progress.js";
+export { LottieAnimationContainer, VerificationInProgress };

package/dist/avatar.props-2q5BsX-R.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { S as Size, C as Color } from './index-BQANnKs9.js';
+
+/** The avatar's sizes: the shared `Size` scale plus `xl`, a large tile (76px) for a profile card. */
+type AvatarSize = Size | "xl";
+interface AvatarProps {
+    name?: string;
+    imageUrl?: string;
+    size?: AvatarSize;
+    /**
+     * Shown when there is no image (or it fails to load) instead of the name's
+     * initial — a generated pattern such as an `Identicon`. Colour it with
+     * `className`, which styles the fallback surface too.
+     */
+    fallback?: ReactNode;
+    className?: string;
+    /**
+     * The colour of the initial's circle (no image, no `fallback`): a preset
+     * fills with that colour and writes the initial in its foreground; any CSS
+     * colour works too. Defaults to `primary`.
+     */
+    color?: Color;
+    /** Status dot color; ignored when `badgeIcon` is set */
+    badgeColor?: Color;
+    /** When set, shown instead of a color dot (`badgeColor` is not applied to the badge) */
+    badgeIcon?: ReactNode;
+}
+
+export type { AvatarProps as A, AvatarSize as a };

package/dist/button-BK-DIR_L.d.ts

@@ -0,0 +1,21 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "glow" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+/**
+ * Uncoloured base button: its `default` variant is only a shadow, with no
+ * colour, ring or icon props. Apps almost always want the styled `Button`
+ * from `@espressif/dashboard-ui-components/components` instead, which takes
+ * `color`, `startIcon`, `endIcon`, `loading`, `tooltip` and `iconOnlyBelow`.
+ * The two share a name on purpose (renaming either would break imports).
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { type ButtonProps as B, Button as a, buttonVariants as b };

package/dist/button-BxJ7s6sR.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { B as ButtonProps$1 } from './button-BK-DIR_L.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+import { P as PresetColor } from './index-BQANnKs9.js';
+
+/** A preset, or the brand's metallic `silver` (as `Badge` and `Tag` take it). */
+type ButtonColor = PresetColor | "silver";
+/**
+ * The styled, colourable button. Prefer it over the uncoloured base `Button`
+ * that `/core` exports (its `default` variant is only a shadow).
+ */
+/**
+ * Style axes: `radius` and `elevation` apply to every variant that has that
+ * look (`elevation` to `default` and `outline`), `border` to `outline` and
+ * `glow`. `glow` is `outline` with the halo the other components' `glow`
+ * variant uses in place of the elevation shadow.
+ */
+interface ButtonProps extends ButtonProps$1, Pick<StyleAxisProps, "radius" | "elevation" | "border"> {
+    /**
+     * A preset colour, or `"silver"`: the brand's metallic finish, as on `Badge`
+     * and `Tag` — a brushed-metal sheen on `default`, a metallic ring on
+     * `outline` and `glow`, plain `gray` on `ghost` and `link`.
+     */
+    color?: ButtonColor;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    /**
+     * Stretch to the container's width. **Defaults to `true`** (kept for
+     * compatibility); pass `fullWidth={false}` for an inline button. Ignored
+     * for `size="icon"`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Shows the loading indicator and disables the button. With `asChild`, the
+     * rendered element is disabled the way a link can be (see `asChild`).
+     */
+    loading?: boolean;
+    loadingIndicator?: "spinner" | "progress-bar";
+    animateStartIconOnHover?: boolean;
+    animateEndIconOnHover?: boolean;
+    hideRingOnHover?: boolean;
+    /** When true, outline/glow/ghost use primary hover background and ring; link uses `hover:text-primary`. Ignores `color` for those hover styles. */
+    usePrimaryColorOnHover?: boolean;
+    tooltip?: string;
+    /**
+     * Below this viewport breakpoint only the icons show; the label stays in the
+     * DOM as screen-reader text, so it remains the button's accessible name.
+     */
+    iconOnlyBelow?: ButtonIconOnlyBreakpoint;
+    /**
+     * Render the single child element (an `<a>`, a router `Link`, …) instead
+     * of a `<button>`, with the button's classes and props merged onto it. The
+     * icons, label and loading indicator render inside that element:
+     *
+     * ```tsx
+     * <Button asChild startIcon={<Plus />}>
+     *   <Link to="/devices/new">Add device</Link>
+     * </Button>
+     * ```
+     *
+     * `disabled` and `loading` cannot use the native `disabled` attribute on a
+     * link, so the element gets `aria-disabled="true"`, `data-disabled`,
+     * `tabIndex={-1}`, the disabled look, and its clicks are cancelled before
+     * the child's own `onClick` (a router `Link` does not navigate).
+     */
+    asChild?: boolean;
+}
+type ButtonIconOnlyBreakpoint = "sm" | "md";
+/**
+ * The styled button: preset `color`s, start/end icons, loading indicators,
+ * tooltip and `asChild` for links. Not the same as the uncoloured base
+ * `Button` that `/core` exports. Note `fullWidth` defaults to `true`.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button as B, type ButtonIconOnlyBreakpoint as a, type ButtonProps as b };

package/dist/calendar.props-BtCzuWH1.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = ComponentProps<typeof DayPicker> & {
+    /**
+     * Button variant used for the navigation and day buttons.
+     * @default "ghost"
+     */
+    buttonVariant?: "outline" | "ghost";
+};
+
+export type { CalendarProps as C };

package/dist/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { Carousel, CarouselAlign, CarouselItem, CarouselLabels, CarouselNavigationPlacement, CarouselNavigationState, CarouselNavigationStyle, CarouselOrientation, CarouselProps } from '../components/carousel/index.js';
+import 'react';

package/dist/carousel/index.js

@@ -0,0 +1,2 @@
+import { Carousel } from "../components/carousel/carousel.js";
+export { Carousel };

package/dist/charts/index.d.ts

@@ -0,0 +1,5 @@
+export { AreaChart, AreaChartProps, BarChart, BarChartProps, BarSize, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, ChartCategoryColorKey, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartLegendLayout, ChartLegendList, ChartLegendListItem, ChartLegendListProps, ChartLegendOptions, ChartLegendValue, ChartSeriesColorKey, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, ComposedChartProps, ComposedChartSeries, DEFAULT_CHART_SERIES_COLORS, DonutChart, DonutChartProps, DonutDatum, LineChart, LineChartProps, LineStrokeWidth, TreemapAnimationEasing, TreemapChart, TreemapChartProps, TreemapDatum, TreemapTileLabelStyle, buildSeriesChartConfig, getChartSeriesColor } from '../components/chart/index.js';
+import 'react';
+import 'recharts';
+import '../style-axes-DSQ2DGc5.js';
+import '../index-BQANnKs9.js';

package/dist/charts/index.js

@@ -0,0 +1,9 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent } from "../components/chart/chart.js";
+import { CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, DEFAULT_CHART_SERIES_COLORS, buildSeriesChartConfig, getChartSeriesColor } from "../components/chart/chart-colors.js";
+import { BarChart } from "../components/chart/bar-chart.js";
+import { AreaChart } from "../components/chart/area-chart.js";
+import { LineChart } from "../components/chart/line-chart.js";
+import { ComposedChart } from "../components/chart/composed-chart.js";
+import { DonutChart } from "../components/chart/donut-chart.js";
+import { TreemapChart } from "../components/chart/treemap-chart.js";
+export { AreaChart, BarChart, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, ChartContainer, ChartLegend, ChartLegendContent, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, DEFAULT_CHART_SERIES_COLORS, DonutChart, LineChart, TreemapChart, buildSeriesChartConfig, getChartSeriesColor };

package/dist/common/app-logo/app-logo.js

@@ -36,7 +36,7 @@ function AppLogo({ name = "espressif", logo, alt = "Logo", darkMode = false, min
 	const imgHeight = asset.height / asset.width * imgWidth;
 	return /* @__PURE__ */ jsx(motion.div, {
 		layout: true,
-		className: cn("flex items-center min-h-0 transition-[max-width,padding] duration-200 ease-in-out", minimal ? "w-full justify-center p-0.5 max-h-[calc(var(--espd-header-height)-16px)] max-w-[calc(var(--espd-sidebar-width-collapsed)-16px)]" : "w-auto justify-start p-0 max-h-[calc(var(--espd-header-height)-16px)] max-w-[calc(var(--espd-sidebar-width)-32px)]"),
+		className: cn("flex items-center min-h-0 transition-[max-width,padding] duration-200 ease-in-out", minimal ? "w-full justify-center p-0.5 max-h-[calc(var(--espd-shell-header-height,var(--espd-header-height))-16px)] max-w-[calc(var(--espd-sidebar-width-collapsed)-16px)]" : "w-auto justify-start p-0 max-h-[calc(var(--espd-shell-header-height,var(--espd-header-height))-16px)] max-w-[calc(var(--espd-sidebar-width)-32px)]"),
 		transition: logoTransition,
 		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			initial: false,

package/dist/common/index.d.ts

@@ -1,9 +1,9 @@
 import * as React$1 from 'react';
-import { ReactNode } from 'react';
-import { A as AppLogoProps } from '../app-logo.props-Ct7QBdTd.js';
-export { L as LogoAsset, a as LogoAssetConfig, b as LogoVariantSet } from '../app-logo.props-Ct7QBdTd.js';
-import { a as ListGroup } from '../list.props-x1j3CbcF.js';
+import { A as AppLogoProps, M as MyAccountMenuProps } from '../my-account-menu.props-C7DK71WC.js';
+export { L as LogoAsset, a as LogoAssetConfig, b as LogoVariantSet } from '../my-account-menu.props-C7DK71WC.js';
 import { C as Color } from '../index-BQANnKs9.js';
+import '../list.props-DP_xPTqU.js';
+import '../style-axes-DSQ2DGc5.js';
 
 declare function AppLogo({ name, logo, alt, darkMode, minimal, width, }: AppLogoProps): React$1.JSX.Element;
 
@@ -11,9 +11,11 @@ interface ProfileCardProps {
     name?: string;
     email?: string;
     imageUrl?: string;
+    /** The avatar's fill behind the initial, when there is no picture; default `primary`. */
+    avatarColor?: Color;
 }
 
-declare function ProfileCard({ name, email, imageUrl }: ProfileCardProps): React$1.JSX.Element;
+declare function ProfileCard({ name, email, imageUrl, avatarColor }: ProfileCardProps): React$1.JSX.Element;
 
 interface CopyrightCardProps {
     text: string;
@@ -31,20 +33,7 @@ declare function CopyrightCard({ text, logoSrc, logoAlt, href, logoOnly, }: Copy
  */
 declare function PageLoader(): React$1.JSX.Element;
 
-interface MyAccountMenuProps {
-    name?: string;
-    email?: string;
-    imageUrl?: string;
-    /** Passed to `Menu` content; default `200px` */
-    minWidth?: string | number;
-    menuItems: ListGroup[];
-    /** Status dot color; ignored when `badgeIcon` is set */
-    badgeColor?: Color;
-    /** When set, shown instead of a color dot (`badgeColor` is not applied) */
-    badgeIcon?: ReactNode;
-}
-
-declare function MyAccountMenu({ name, email, imageUrl, minWidth, menuItems, badgeColor, badgeIcon, }: MyAccountMenuProps): React$1.JSX.Element;
+declare function MyAccountMenu({ name, email, imageUrl, minWidth, menuItems, avatarColor, badgeColor, badgeIcon, triggerVariant, side, align, }: MyAccountMenuProps): React$1.JSX.Element;
 
 declare function FooterCard(): React$1.JSX.Element;
 
@@ -56,4 +45,4 @@ interface AnimatedRainmakerLogoProps {
 
 declare function AnimatedRainmakerLogo({ className, style, "aria-label": ariaLabel, }: AnimatedRainmakerLogoProps): React$1.JSX.Element;
 
-export { AnimatedRainmakerLogo, type AnimatedRainmakerLogoProps, AppLogo, AppLogoProps, CopyrightCard, type CopyrightCardProps, FooterCard, MyAccountMenu, type MyAccountMenuProps, PageLoader, ProfileCard, type ProfileCardProps };
+export { AnimatedRainmakerLogo, type AnimatedRainmakerLogoProps, AppLogo, AppLogoProps, CopyrightCard, type CopyrightCardProps, FooterCard, MyAccountMenu, MyAccountMenuProps, PageLoader, ProfileCard, type ProfileCardProps };