@espressif/dashboard-ui-components 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,93 @@ 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.5.0] - 2026-09-22
+
+A minor release adding a combined date and time control.
+
+### Added
+- **`DateTimePicker`** — one read-only input that opens a dropdown with a
+  `Calendar` and a `TimePicker`, together editing one `Date`. Picking a day
+  keeps the dropdown open so the time can be set in the same interaction; a
+  time typed before a day is kept and applied to the chosen day; an incomplete
+  time (the browser reports `""` mid-edit) never snaps the value. `defaultTime`
+  sets the time of day used when a day is picked first (default `"00:00"`),
+  `timeStep` below 60 shows seconds, `clearable` shows an X inside the input
+  that clears both parts without changing the layout. Carries the usual
+  `label` / `required` / `error` / `errorContent` / `hintContent` / `size` /
+  `rounded` / `disabled` / `open` / `onOpenChange` props and an optional
+  hidden `name` input with the ISO string, like `DatePicker`. Values are local
+  wall-clock `Date`s; callers convert to UTC or epoch seconds.
+- **`SelectTrigger`** — `label`, `required`, `hintContent`, `error` and
+  `errorContent`, the same field chrome `Input` has: a label row above the
+  trigger (label, required marker, right-aligned hint) and an error line
+  below it, with `aria-required` / `aria-invalid` / `aria-describedby` wired.
+  With none of them set the trigger renders exactly as before, so existing
+  `FormLabel` + `Select` compositions are unaffected.
+- **`SectionCard`** — `open` for a controlled collapsible state, paired with
+  the existing `onOpenChange`. Lets an action in the header (an "Edit"
+  button, for instance) expand the card. Omit it and the card keeps its
+  `defaultOpen`-seeded internal state exactly as before. `hideCollapseIcon`
+  drops the chevron from the header's right column while the header row
+  itself stays a labelled toggle, for cards whose action button already
+  says the card can be expanded.
+- **`Illustration`** — `animated` (default `false`). Off, the component
+  renders an illustration's static resting frame and strips every SMIL
+  element from the markup, so pages that only need a picture get exactly
+  that. On, the animation plays. Sources mark parts that exist in only one
+  variant with `data-variant="static"` / `data-variant="animated"` groups.
+  Illustrations without animations render identically either way.
+- **`DatePicker`** — `clearable` and `clearLabel`. When `clearable` is set
+  and a date is selected, a 16px X appears inside the trigger next to the
+  calendar icon (the same end slot `DateTimePicker` uses) and calls
+  `onChange(undefined)` without opening the calendar. Off by default, so existing pickers are unchanged
+  (previously the only way to clear was re-clicking the selected day).
+
+### Changed
+- **`Illustration`** — `rm-data-download` redrawn: the RainMaker logo cloud
+  rains data, records travel along a dashed connector into a laptop, and rows
+  of the on-screen table light up as they land while the download progress
+  fills. Colours come from the theme tokens except the cloud, which keeps the
+  logo's own reds. Ids are prefixed `rmdd-` so the inlined markup cannot
+  collide with other inline SVGs on the page. The source carries both a
+  static resting frame and the SMIL animation; see `animated` below.
+- **`OverflowBadgeList`** — each item is now a `StatusBadge` instead of a
+  hand-styled `Badge`, so the pills match status chips elsewhere (rounded,
+  `StatusBadge` paddings, 14/16/18px icon). New `badgeSize` (`"sm" |
+  "default" | "lg"`, default `"default"`); `badgeVariant` still defaults to
+  `"outline"`. Long labels still truncate at 12rem.
+- **`StatusBadge`** — the label is wrapped in a `min-w-0 truncate` span, so a
+  `className` with a `max-w-*` now ellipsises instead of overflowing.
+- **`SelectTrigger`** — the chevron is now 16px at every `size` (it scaled
+  14/16/20px before), matching the fixed 16px decorators inside `Input`, so a
+  Select and an Input placed side by side show the same icon dimensions.
+
+### Fixed
+- **`Dialog`, `Sheet`, `DropdownMenu`, `Checkbox`, `Switch`, `Toggle`,
+  `ToggleGroup`, `Accordion`, `RadioGroup`, `PreviewCard`, `CopyButton`,
+  `NavBar`** — controlled mode is now genuinely controlled. The shared
+  `useControlledState` hook used to write its internal state on every
+  change and only then call `onChange`, so a component whose owner kept
+  `open`/`checked`/`value` unchanged still flipped on its own. A
+  `FullscreenDialog` with `open={true}` closed on the X button even when
+  its `onOpenChange` handler decided not to close (for example while a
+  navigation guard asked for confirmation), leaving an empty page. With
+  `value` defined the hook now reports that value and the setter only
+  notifies `onChange`; uncontrolled usage is unchanged.
+- **`DatePicker`** — a controlled picker whose `value` is set back to
+  `undefined` no longer flips to uncontrolled mode and shows a stale day; the
+  component now treats the presence of the `value` prop as "controlled".
+- **Field label geometry** — a `FormLabel` stacked above a control and an
+  `Input`'s own label row used to leave different gaps between label text and
+  control: `FormLabel` was an inline `<label>` sitting on a taller anonymous
+  line box, and the `Input` row grew from 14px to 20px whenever a hint was
+  present because the hint kept the default line-height. Both now render the
+  same 14px block-level row (`flex items-center gap-2 leading-none`; hints
+  are `leading-none`), so labels sit exactly 8px above every control. The
+  required marker also gets the same `gap-2` spacing in both.
+- **`DatePicker`** — the calendar's square background no longer pokes past
+  the rounded corners of its dropdown; the popover now clips its content.
+
 ## [1.4.0] - 2026-09-18
 
 A minor release that lets `ConfirmationDialog` be opened without a trigger, and

package/dist/{chunk-TSNA6BHK.js → chunk-45DCL46L.js}

@@ -1,4 +1,4 @@
-import { Avatar, Menu, List, Button, Link } from './chunk-UHRNPXO5.js';
+import { Avatar, Menu, List, Button, Link } from './chunk-ZEQNTNMW.js';
 import { cn } from './chunk-VU4CZ76T.js';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-RCRU3JW2.js → chunk-6RJAKSPV.js}

@@ -1,6 +1,6 @@
-import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-TSNA6BHK.js';
-import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-UHRNPXO5.js';
-import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-7BO76CNB.js';
+import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-45DCL46L.js';
+import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-ZEQNTNMW.js';
+import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-OKB2WTX7.js';
 import { cn } from './chunk-VU4CZ76T.js';
 import { Menu, Palette, Check, Globe, LogOut } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';

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

@@ -1,4 +1,4 @@
-import { Separator } from './chunk-7BO76CNB.js';
+import { Separator } from './chunk-OKB2WTX7.js';
 import { cn, isPresetColor, resolveColor } from './chunk-VU4CZ76T.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';

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

@@ -10,20 +10,21 @@ import { ChevronRight, MoreHorizontal } from 'lucide-react';
 
 function useControlledState(props) {
   const { value, defaultValue, onChange } = props;
-  const [state, setInternalState] = React9.useState(
-    value !== void 0 ? value : defaultValue
+  const isControlled = value !== void 0;
+  const [internalState, setInternalState] = React9.useState(
+    isControlled ? value : defaultValue
   );
   React9.useEffect(() => {
-    if (value !== void 0) setInternalState(value);
-  }, [value]);
+    if (isControlled) setInternalState(value);
+  }, [isControlled, value]);
   const setState = React9.useCallback(
     (next, ...args) => {
-      setInternalState(next);
+      if (!isControlled) setInternalState(next);
       onChange?.(next, ...args);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  return [state, setState];
+  return [isControlled ? value : internalState, setState];
 }
 function getStrictContext(name) {
   const Context = React9.createContext(void 0);

package/dist/{chunk-CPVDY4CV.js → chunk-WR54R7J6.js}

@@ -1,6 +1,6 @@
-import { ProgressBar } from './chunk-XMEZ2BP6.js';
-import { Card, CardContent } from './chunk-KCMVLNM5.js';
-import { Tooltip2 } from './chunk-UHRNPXO5.js';
+import { ProgressBar } from './chunk-X7LDLZBT.js';
+import { Card, CardContent } from './chunk-ABBHGIFI.js';
+import { Tooltip2 } from './chunk-ZEQNTNMW.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function CopyrightCard({