@espressif/dashboard-ui-components 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -4,6 +4,160 @@ All notable changes to this project are documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/).
 
+## [1.3.0] - 2026-09-10
+
+A minor release that adds three new components (`NavBar`, `FileInput`,
+`FlashButton`), extends `Separator`, `Link`, `EntryLayout` and `InvertButton`,
+and **renames the `LinkComponent` prop to `linkComponent`** on `Sidebar`,
+`WorkspaceLayout` and `PageContainer` (and `Icon` to `icon` on `StatusBadge`).
+The renames are source-incompatible — see *Changed* for the migration.
+
+### Added
+- **`NavBar`** — new component. A horizontal top navigation bar for
+  marketing-style and single-shell apps, as the counterpart to `Sidebar`.
+  Items are supplied as `items` (`NavBarMenuItem[]`: `id`, `label`, optional
+  `href` / `onClick` / `icon` / `disabled`, and optional `details`); an item
+  with `href` renders as a link through `linkComponent` (or a plain `<a>`),
+  otherwise as a `<button>`. `logo` and `rightContent` fill the left and right
+  slots. Active state is controlled (`activeId` + `onActiveChange`) or
+  uncontrolled (`defaultActiveId`). An item with `details` opens a full-width
+  dropdown panel below the bar — controlled via `openDetailsId` /
+  `onDetailsPanelChange`, closed on Escape or click-outside. Items that do not
+  fit are measured and collapsed into a "More" dropdown (`moreLabel`, default
+  `"More"`); below the `lg` breakpoint the whole menu moves into a `Sheet`
+  (`mobileMenuTitle`, `mobileMenuTrigger`). `position` selects `sticky`
+  (default) / `fixed` / `static`, and `height` defaults to the new
+  `--espd-navbar-height` token. `morphOnScroll` animates the bar from
+  full-width into a floating rounded pill past `morphScrollThreshold` px
+  (default `50`), reading `window.scrollY` or the element in
+  `morphScrollContainer`; it is disabled on mobile. `color` accents the active
+  item and panel highlights (preset token or arbitrary CSS color, default
+  `"primary"`), with `className` / `itemsClassName` as style hooks. Rows are
+  marked up as a `menubar` with `menuitem` children. Exports: `NavBar`,
+  `NavBarProps`, `NavBarMenuItem`, `NavBarPosition`. No new dependencies.
+- **`FileInput`** — new component. A compact, single-line file picker: a
+  read-only display area showing the selected file name (plus an "and N more"
+  suffix for multi-select) with a browse/change button and a clear button —
+  for forms where the large drop target of `FileUpload` is too heavy. Wraps a
+  hidden `<input type="file">`, so `accept`, `multiple` and `name` behave
+  natively and native form submission still works. Controlled via `files` +
+  `onFilesChange`, or uncontrolled; `onChange` also fires with a synthetic
+  event whose `target.files` reflects the current list, so
+  `react-hook-form`'s `register()` works unchanged. Composes with the standard
+  input shell (`label`, `required`, `size`, `rounded`, `color`, `startIcon`,
+  `disabled`, `readOnly`, `startHelperContent` / `endHelperContent`,
+  `hintContent`, `error` / `errorContent`). Every string is overridable for
+  i18n: `browseLabel`, `changeLabel`, `clearLabel`, `placeholder` and
+  `andMoreLabel(remaining)`. Exports: `FileInput`, `FileInputProps`. No new
+  dependencies.
+- **`FlashButton`** — new component, alongside `InvertButton`. A pill button
+  whose fill inverts to `bg-background` on hover while the original color
+  blinks back over it at randomised opacity and interval, so no two hovers
+  look alike. `label` and an optional `icon` (default `ZapIcon`), with
+  `iconPosition` (`"start"` / `"end"`, default `"end"`) and `hideIcon` for a
+  label-only chip; `size` and `color` (any `PresetColor`, default `"primary"`)
+  match the rest of the button family. Exports: `FlashButton`,
+  `FlashButtonProps`. Uses the already-bundled `motion` dependency.
+- `Separator`: `label` renders text between two rules instead of a single
+  line — the "OR" divider every auth form hand-rolls. `stackLabel` stacks the
+  characters upright for vertical separators, and `labelClassName` overrides
+  the label typography. Without `label` the component is byte-for-byte the
+  previous single-line Radix separator. The labelled form is a `div` with
+  `role="separator"` (Radix `Separator.Root` cannot host children).
+  `SeparatorProps` is now exported.
+- `Link`: `variant` — `"ghost"` strips the padding, fixed height and hover
+  background that `color` applies, leaving a bare inline anchor that still
+  picks up the color token. Default `"default"` keeps the existing pill
+  styling. `LinkVariant` is now exported.
+- `EntryLayout`: five new props for entry pages that are not the default
+  split-screen — `customRightPanel` (arbitrary content in the right panel,
+  overriding `heading` and layered over the background image),
+  `disableBackgroundImage` (drops the shipped default background; ignored when
+  `backgroundImageUrl` is passed), `hideLogo`, `hideFooter`, and
+  `hideRightPanel` (the left panel keeps its 40 % width and centres on
+  screen).
+- `InvertButton`: `color` (any `PresetColor`, default `"primary"`) now drives
+  the resting fill, the icon's resting/hover colors and the dark-mode hover
+  border, and `size` is threaded through to the icon disc. Previously the
+  effect was hard-coded to `primary`.
+- `AppLogo`: new `zerocode-ai` preset (light/dark × full/minimal), also
+  selectable as `WorkspaceLayout` / `EntryLayout` `appName`.
+- New `--espd-navbar-height` layout token (`4rem`), the default `NavBar`
+  height. Override it in `:root` like the other `--espd-*` dimensions.
+
+### Changed
+- **BREAKING:** the router-adapter prop is now `linkComponent` (lower-case
+  first letter) everywhere, matching the casing already used by `List`,
+  `MarkdownContent` and `NavBar`. Renamed on `Sidebar` (`linkComponent`),
+  `WorkspaceLayout` (`sidebarConfig.linkComponent`) and `PageContainer`
+  (`goBackLinkData.linkComponent`). The old `LinkComponent` spelling is gone
+  rather than deprecated: since it is a required prop on `Sidebar` /
+  `sidebarConfig`, TypeScript flags every call site. Migration is a rename —
+  `sidebarConfig={{ …, LinkComponent: Link }}` becomes
+  `sidebarConfig={{ …, linkComponent: Link }}`.
+- **BREAKING:** `StatusBadge`'s `Icon` prop is renamed to `icon`, for the same
+  reason. It stays a `LucideIcon` (a component reference, not an element), so
+  `<StatusBadge Icon={CheckIcon} …>` becomes
+  `<StatusBadge icon={CheckIcon} …>`.
+- `StatusBadge`: a chip with no icon and no `isLoading` is now padded
+  symmetrically. The asymmetric padding (a tight leading edge sized for the
+  icon disc) previously applied even when there was no icon, leaving
+  label-only chips visually off-centre.
+- `solid` variants no longer set `border-none`; they carry a transparent
+  1px border instead. Every variant of a given component now reserves the
+  same border box, so a solid item sitting next to an outline one lines up
+  instead of being 2px smaller. Affects every consumer of the shared variant
+  table (`Alert`, `Badge`, the card components, …). Visually identical on its
+  own; the outer box grows by 1px per side, which can shift a tightly
+  hand-tuned layout.
+- `AppLogo`: the `launchpad` preset ships redrawn artwork with corrected
+  intrinsic dimensions, and gains a dedicated dark-mode minimal asset
+  (previously the light minimal mark was reused in dark mode).
+- Browser autofill styling: autofilled `input` / `textarea` fields now match
+  the surrounding theme in both modes instead of Chrome's yellow (or, in dark
+  mode, an unreadable dark-on-dark). Implemented with
+  `-webkit-box-shadow` / `-webkit-text-fill-color` overrides in the library's
+  global stylesheet.
+
+### Internal
+Nothing in this section affects the published package.
+
+- ESLint added as a dev dependency (`eslint` 10.10.0, `typescript-eslint`
+  8.70.0) with an `npm run lint` script; the one stale
+  `react-hooks/exhaustive-deps` suppression in `Carousel` is now unnecessary
+  and was removed.
+- Demo: new pages for `NavBar`, `FileInput` and `FlashButton`; the `Link`,
+  `Separator`, `InvertButton`, `AppLogo`, `PageContainer`, `StatusBadge` and
+  layout pages were extended for the props above.
+
+## [1.2.2] - 2026-09-02
+
+A patch release with layout and component refinements. No breaking changes.
+
+### Added
+- `Sidebar`: `focusActiveGroup` prop — when enabled, only the group containing
+  the current route is expanded; other groups collapse automatically whenever
+  the active group changes. Users can still expand other groups manually, and
+  those manual expansions persist until the active group changes. Useful for
+  sidebars with many groups where a fully-expanded tree is noisy. Default
+  `false`. Also exposed on `WorkspaceLayout` via
+  `sidebarConfig.focusActiveGroup`.
+- `InputOTP`: `expand` prop — when `true`, slots stretch to fill the parent
+  width, dividing space equally across groups (each group's `flex-grow` is
+  weighted by its slot count so all slots end up the same width). When `false`
+  (default), slots use the existing fixed size based on `size`.
+
+### Changed
+- `PageContainer`: the sticky heading strip now uses a translucent background
+  with a backdrop blur (`bg-background/75 backdrop-blur-xs`) instead of a solid
+  `bg-background`, so content scrolling underneath is subtly visible.
+- `EntryLayout`: reworked scroll behaviour — the outer container is now
+  `h-screen overflow-hidden` and the left panel scrolls internally, so the
+  background image stays viewport-locked on long forms. The logo is sticky at
+  the top of the scroll area with the same translucent backdrop-blur treatment
+  as `PageContainer`, and the footer sits at the bottom of the scrollable
+  content instead of being pinned to the viewport edge.
+
 ## [1.2.1] - 2026-08-27
 
 A patch release that adds one new component (`StatusBadge`). No breaking

package/README.md

@@ -185,7 +185,7 @@ 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-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-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`
 
 **Typography and radius** — `--font-sans` (whole font stack; override in `@theme` to replace), `--radius-lg` (drives `-md` and `-sm`)
 
@@ -417,6 +417,11 @@ Re-run after upgrading the library to pick up guidance changes. Commit the copie
 
 ## Available Components
 
+The tables below are a human-readable overview, grouped by surface. They are not
+exhaustive and they do not list props — the authoritative list of exports for the
+version you have installed is the shipped type declarations:
+`node_modules/@espressif/dashboard-ui-components/dist/<surface>/index.d.ts`.
+
 ### Components (`/components`)
 
 | Component | Description |
@@ -425,27 +430,30 @@ Re-run after upgrading the library to pick up guidance changes. Commit the copie
 | Avatar | User avatar with image and fallback |
 | List / ListGroup / ListItem | Structured list display; rows are buttons by default, or real links when an item sets `href` and `List` is given a `linkComponent` adapter. Styling hooks: `className` / `itemClassName` / `separatorClassName` / `ListGroup.labelClassName` / `ListItem.className`, plus the always-present classes in `LIST_CLASS_NAMES` (`.espd-list`, `.espd-list-group-label`, `.espd-list-item`, `.espd-list-custom-item`, `.espd-list-separator`) |
 | Sidebar | Collapsible sidebar navigation |
+| NavBar | Horizontal top navigation bar — overflow "More" dropdown, full-width details panels, mobile `Sheet` menu, and an optional scroll-driven morph into a floating pill |
 | Menu | Context and action menus |
 | Tooltip | Hover tooltips |
 | Sheet | Slide-out panel |
 | Dropdown Menu | Dropdown action menu |
 | ScrollArea | Custom scrollable container |
 | Form / Label / Checkbox | Form controls |
-| Button / ButtonGroup | Standard and grouped buttons |
+| Button / ButtonGroup / InvertButton / FlashButton | Standard and grouped buttons, plus the invert-on-hover and random-flash pill variants |
 | Card | Content card container |
 | Input / InputPassword / Textarea | Text input fields |
+| InputOTP | One-time-code input — grouped slots, numeric or alphanumeric, custom regex |
+| FileUpload / FileInput | Drop-target uploader, and a compact single-line file picker for forms |
 | AsyncCombobox | Async searchable combobox |
 | SearchBox / AdvancedSearchBox | Search inputs |
 | Breadcrumb | Navigation breadcrumbs |
-| Separator | Visual divider |
+| Separator | Visual divider, optionally with a centred `label` ("OR" dividers) |
 | Skeleton / TableSkeleton | Loading placeholders |
 | Table / DataTable | Data tables with sorting and pagination |
 | Tabs | Tabbed content panels |
 | Dialog / ConfirmationDialog / FullscreenDialog | Modal dialogs |
 | Pagination | Page navigation controls |
-| Badge | Status and label badges |
+| Badge / StatusBadge | Status and label badges; `StatusBadge` is the icon-plus-label status chip, with a loading spinner state |
 | Alert | Alert banners (optionally dismissible) |
-| Link | Styled anchor element |
+| Link | Styled anchor element — colour-tinted pill, or `variant="ghost"` for a bare inline link |
 | Code | Syntax-highlighted code blocks |
 | MarkdownContent | Renders a markdown string with library primitives (GFM, heading anchors; raw HTML is escaped, not parsed) |
 | CopiableText / CopyButton | Copy-to-clipboard utilities |
@@ -453,6 +461,7 @@ Re-run after upgrading the library to pick up guidance changes. Commit the copie
 | Collapsible / CollapsibleCard | Expandable content sections |
 | SimpleCard / BasicDetailsCard / NoDataCard | Specialized card variants |
 | PreviewCard | Content preview card |
+| Carousel | Slide carousel — horizontal/vertical, dots, arrows or custom navigation, optional autoplay |
 | 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 |
@@ -466,7 +475,7 @@ Re-run after upgrading the library to pick up guidance changes. Commit the copie
 | Component | Description |
 |-----------|-------------|
 | WorkspaceLayout | Full dashboard shell with sidebar, header, and footer |
-| EntryLayout | Authentication and entry page 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/dist/{app-logo.props-TKCDuodn.d.ts → app-logo.props-Ct7QBdTd.d.ts}

@@ -1,4 +1,4 @@
-import { A as AppName } from './index-Cv9vHALn.js';
+import { A as AppName } from './index-BQANnKs9.js';
 
 /** A single logo image asset. */
 interface LogoAsset {

package/dist/{chunk-F5P6S7K2.js → chunk-7BO76CNB.js}

@@ -190,22 +190,83 @@ function useIsMobile() {
   return !!isMobile;
 }
 var Separator = React9.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      ref,
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      ),
-      ...props
+  ({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    label,
+    stackLabel = false,
+    labelClassName,
+    ...props
+  }, ref) => {
+    if (!label) {
+      return /* @__PURE__ */ jsx(
+        SeparatorPrimitive.Root,
+        {
+          ref,
+          decorative,
+          orientation,
+          className: cn(
+            "shrink-0 bg-border",
+            orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+            className
+          ),
+          ...props
+        }
+      );
     }
-  )
+    const isHorizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        "data-orientation": orientation,
+        className: cn(
+          "flex items-center gap-3",
+          isHorizontal ? "w-full" : "flex-col h-full",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "shrink-0 bg-border flex-1",
+                isHorizontal ? "h-[1px]" : "w-[1px]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs font-medium text-muted-foreground shrink-0 select-none",
+                !isHorizontal && stackLabel && "[writing-mode:vertical-lr] [text-orientation:upright]",
+                labelClassName
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "shrink-0 bg-border flex-1",
+                isHorizontal ? "h-[1px]" : "w-[1px]"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
 );
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator.displayName = "Separator";
 function Skeleton({
   className,
   ...props

package/dist/{chunk-JPMN2UMF.js → chunk-KCMVLNM5.js}

@@ -1,4 +1,4 @@
-import { Separator } from './chunk-F5P6S7K2.js';
+import { Separator } from './chunk-7BO76CNB.js';
 import { cn, isPresetColor, resolveColor } from './chunk-VU4CZ76T.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -129,7 +129,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-primary/80"
     },
     solid: {
-      container: "border-none bg-primary text-primary-foreground [&>svg]:text-primary-foreground",
+      container: "border border-transparent bg-primary text-primary-foreground [&>svg]:text-primary-foreground",
       foreground: "text-primary-foreground",
       description: "text-primary-foreground/80"
     },
@@ -151,7 +151,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-secondary/80"
     },
     solid: {
-      container: "border-none bg-secondary text-secondary-foreground [&>svg]:text-secondary-foreground",
+      container: "border border-transparent bg-secondary text-secondary-foreground [&>svg]:text-secondary-foreground",
       foreground: "text-secondary-foreground",
       description: "text-secondary-foreground/80"
     },
@@ -173,7 +173,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-info/80"
     },
     solid: {
-      container: "border-none bg-info text-info-foreground [&>svg]:text-info-foreground",
+      container: "border border-transparent bg-info text-info-foreground [&>svg]:text-info-foreground",
       foreground: "text-info-foreground",
       description: "text-info-foreground/80"
     },
@@ -195,7 +195,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-warning"
     },
     solid: {
-      container: "border-none bg-warning text-warning-foreground [&>svg]:text-warning-foreground",
+      container: "border border-transparent bg-warning text-warning-foreground [&>svg]:text-warning-foreground",
       foreground: "text-warning-foreground",
       description: "text-warning-foreground/80"
     },
@@ -217,7 +217,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-error/80"
     },
     solid: {
-      container: "border-none bg-error text-error-foreground [&>svg]:text-error-foreground",
+      container: "border border-transparent bg-error text-error-foreground [&>svg]:text-error-foreground",
       foreground: "text-error-foreground",
       description: "text-error-foreground/80"
     },
@@ -239,7 +239,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-success/80"
     },
     solid: {
-      container: "border-none bg-success text-success-foreground [&>svg]:text-success-foreground",
+      container: "border border-transparent bg-success text-success-foreground [&>svg]:text-success-foreground",
       foreground: "text-success-foreground",
       description: "text-success-foreground/80"
     },
@@ -261,7 +261,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-disabled/80"
     },
     solid: {
-      container: "border-none bg-disabled text-disabled-foreground [&>svg]:text-disabled-foreground",
+      container: "border border-transparent bg-disabled text-disabled-foreground [&>svg]:text-disabled-foreground",
       foreground: "text-disabled-foreground",
       description: "text-disabled-foreground/80"
     },
@@ -283,7 +283,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-gray/80"
     },
     solid: {
-      container: "border-none bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
+      container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
       foreground: "text-gray-foreground",
       description: "text-gray-foreground/80"
     },
@@ -305,7 +305,7 @@ var PRESET_VARIANT_STYLES = {
       description: "text-mist-secondary"
     },
     solid: {
-      container: "border-none bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
+      container: "border border-transparent bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
       foreground: "text-mist-foreground",
       description: "text-mist-secondary"
     },
@@ -330,7 +330,7 @@ var SILVER_VARIANT_ROWS = {
   },
   solid: {
     /** Metallic surface gradient layered on top of `bg-gray` via `SILVER_SOLID_SURFACE_STYLE`. */
-    container: "border-none bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
+    container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
     foreground: "text-gray-foreground",
     description: "text-gray-foreground/80"
   },
@@ -377,7 +377,7 @@ function getArbitraryVariantStyles(variant, color) {
   }
   if (variant === "solid") {
     return {
-      container: "border-none text-white [&>svg]:text-white",
+      container: "border border-transparent text-white [&>svg]:text-white",
       foreground: "text-white",
       foregroundStyle: { color: "#fff" },
       description: "text-white/80",