@dev-dga/react 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @dev-dga/react
 
+## 0.7.0
+
+### Minor Changes
+
+#### Components (8 new)
+
+- **`EmptyState` (+ `EmptyStateMedia` / `EmptyStateTitle` / `EmptyStateDescription` / `EmptyStateActions`)** — centered placeholder for blank / no-results / error states (media badge + title + description + actions). Hybrid API: props build the body, or `children` fully replaces it. 4 variants (`default` / `search` neutral-gray, `error`, `success`) drive the tint + the default icon, × 3 sizes (sm/md/lg). `asChild` on Media/Title/Description/Actions; Title defaults to `<h3>`. Tints flow through `--ddga-empty-state-tint-*` custom props (dark-mode + forced-colors handled). New internal `Inbox` / `Search` icons. Radix `Slot` only — no new deps. 20 tests.
+
+- **`Stat` + `StatGroup`** — self-contained KPI tile (label + value + change + icon) that owns its own card surface, so it's used as `<Stat>` directly (no `Card` wrapper). Hybrid API: props build the label-row → value → change-row, `children` append (sparkline slot). **Decoupled `trend` (caret icon) and `sentiment` (color)** — sentiment derives from trend unless set explicitly, so an inverted metric (a falling error rate) can show a down caret in green. 3 sizes; compound parts (`StatLabel` / `StatValue` / `StatChange`, the last self-coloring when standalone); 3 variants `flat` / `elevated` (shadow + brand badge) / `accent` (sentiment-colored edge bar). Sentiment color via `--ddga-stat-change-color` / `--ddga-stat-accent-*` keyed off `data-sentiment`. New internal `CaretUp` / `CaretDown` icons. **`StatGroup`** is the layout parent: `orientation` horizontal (responsive auto-fit grid, or fixed `columns` collapsing to 1 under 40rem, via `--ddga-stat-group-columns`) / vertical, `gap` sm/md/lg; inside a group tiles drop their standalone `max-inline-size` cap. No Radix, no new deps. 33 tests.
+
+- **`Popover` (+ `PopoverTrigger` / `PopoverAnchor` / `PopoverContent` / `PopoverClose`)** — Radix Popover, the generic interactive floating panel between `Tooltip` and `DropdownMenu`. Content portal-anchored to `ctx.portalEl` (falls back to `rootEl`); `size` sm/md + default `max-inline-size` 20rem; optional bordered `arrow` (off by default). `PopoverClose` defaults to a corner-X (`Close` icon, localized `closeLabel`, `asChild`, falsy children fall through to the X). Non-modal by default (`modal` passes through to Root). Content renders `role="dialog"` and **dev-warns** when it has no `aria-label` / `aria-labelledby`. Dark-mode auto (semantic tokens) + forced-colors block. 22 unit + 6 Playwright tests. No new deps.
+
+- **`Sidebar` (~21 parts)** — app-shell navigation and the first **context-stateful** compound (`SidebarProvider` + `useSidebar`). Desktop **icon-rail** collapse (full ↔ slim, synchronized 250ms animation) + **mobile off-canvas reusing `Drawer`** (free focus trap / scroll lock / portal-to-`portalEl`). Variants `sidebar` / `floating` / `inset` × `collapsible` icon/offcanvas/none × logical `side` (RTL-flips). State controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`), no built-in persistence; `isMobile` via `matchMedia` (`useIsMobile`); **Cmd/Ctrl+B** toggle (on by default, `keyboardShortcut={false}` opts out). `SidebarMenuButton`: `asChild` (router Link), `isActive` → `data-active` + `aria-current="page"`, sizes, auto-`Tooltip` when collapsed. Nested nav = documented composition (Radix `Collapsible` inline when expanded / `Popover` flyout when collapsed). New `PanelLeft` icon. **No new deps** (`Collapsible` from the `radix-ui` umbrella). 36 tests.
+
+- **`ScrollArea`** — single wrapper around Radix ScrollArea (no new dep). `orientation` vertical / horizontal / both; `type` hover (default) / always / scroll / auto; `viewportRef` + `viewportProps`. Viewport is always `tabIndex={0}`; `role="region"` + accessible name only when `aria-label` / `aria-labelledby` is given (else dev-warns, mirroring Popover). No `asChild` (documented Radix-wrapper carve-out). 15 unit + 6 Playwright tests (jsdom can't measure the scrollbar corner / RTL placement).
+
+- **`Menubar`** — Radix Menubar wrapper, the horizontal File/Edit/View app-bar pattern (no new dep — `radix-ui` already exports Menubar). Built as a near-1:1 mirror of `DropdownMenu`: full part parity (Root/Menu/Trigger/Content/Item/Checkbox/Radio/Label/Separator/Group/Sub\*) plus the bar parts, `startIcon` / `shortcut` / `destructive` item extras, `sm` / `md` Content. Dedicated `menubar.css` with an **SA-green open-menu underline indicator** (mirroring the Tabs active-tab accent). Trigger `variant`: `default` (flat + green underline) / `outline` (bordered chip). No `asChild` (Radix-primitive carve-out). Portal-anchored + containment regression test. 19 unit + 5 Playwright tests.
+
+- **`Timeline` (+ `TimelineItem` / `TimelineMarker` / `TimelineContent` / `TimelineTitle` / `TimelineDescription` / `TimelineTime`)** — visual-only chronological compound for audit trails / order history / activity feeds, modeled on `Steps`. Semantic `<ol>` / `<li>` with a CSS-drawn connector line (full-height per item, RTL via logical properties) and status markers (`default` / `success` / `error` / `warning` / `info` → solid semantic `--ddga-color-*`, so dark mode adapts automatically) with a custom-icon child or a plain dot. **Connector is a completed-progress fill** — a segment takes the previous node's color only when the next node is also reached, so `complete → pending` stays neutral (Steps semantics, via a `data-reached` attr + a `:has()` gate). `TimelineTime` renders `<time>` with `dateTime`. Vertical + horizontal, sm/md. No `asChild` (`<ol>`/`<li>` carve-out, mirrors `Steps`); `ActivityFeed` is a composition story (Timeline + Avatar), not a component. No new deps, no new icons. 28 tests.
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -84,11 +84,13 @@ function MyField({ label, helperText, error, errorMessage, ...rest }) {
 
 **Form:** `Button` · `Input` · `Textarea` · `NumberInput` · `Checkbox` · `RadioGroup` + `Radio` · `Switch` · `Select` + `SelectItem` · `Combobox` + `ComboboxItem` (+ `ComboboxGroup` · `ComboboxSeparator`) · `DatePicker` (Hijri toggle) · `Slider` (single/range) · `Rating` (half-star) · `FileUpload` · `Toggle` + `ToggleGroup` (+ `ToggleGroupItem`)
 
-**Display:** `Card` (+ `CardImage`/`CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`) · `Badge` · `Divider` · `Avatar` (+ `AvatarImage`/`AvatarFallback`/`AvatarGroup`) · `DescriptionList` (+ `DescriptionItem`/`DescriptionTerm`/`DescriptionDetails`)
+**Display:** `Card` (+ `CardImage`/`CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`) · `Badge` · `Divider` · `Avatar` (+ `AvatarImage`/`AvatarFallback`/`AvatarGroup`) · `DescriptionList` (+ `DescriptionItem`/`DescriptionTerm`/`DescriptionDetails`) · `Stat` + `StatGroup` (KPI tiles) · `Timeline` (+ `TimelineItem`/`TimelineMarker`/`TimelineContent`/`TimelineTitle`/`TimelineDescription`/`TimelineTime`) · `EmptyState` (+ `EmptyStateMedia`/`EmptyStateTitle`/`EmptyStateDescription`/`EmptyStateActions`)
 
-**Feedback / overlay:** `Tooltip` · `Alert` · `Modal` · `Toast` (imperative API) · `Drawer` (off-canvas, 4 sides) · `DropdownMenu` (compound w/ CheckboxItem, RadioGroup, Sub)
+**Feedback / overlay:** `Tooltip` · `Alert` · `Modal` · `Toast` (imperative API) · `Drawer` (off-canvas, 4 sides) · `DropdownMenu` (compound w/ CheckboxItem, RadioGroup, Sub) · `Popover` (generic floating panel)
 
-**Navigation:** `Tabs` · `Breadcrumb` · `Pagination` · `Accordion` · `Steps`
+**Navigation:** `Tabs` · `Breadcrumb` · `Pagination` · `Accordion` · `Steps` · `Sidebar` (app-shell, collapsible) · `Menubar` (File/Edit/View app-bar)
+
+**Layout:** `ScrollArea`
 
 **Status:** `Spinner` · `Skeleton` · `Progress` + `CircularProgress`