@dev-dga/react 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @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
+
+#### Components (7 new)
+
+- **`DatePicker`** — single-date picker on `react-aria-components` + `@internationalized/date` (new deps). Gregorian ↔ Hijri (Umm al-Qura) toggle via a scoped `I18nProvider`; the public value stays `Date | null`. Month + Year `<select>` dropdowns in the header, outside-month days selectable, today indicator, optional dual-calendar display, Latin digits at all times (DGA convention), RTL-native. 28 unit + 10 Playwright tests.
+
+- **`FileUpload`** — controlled, presentational uploader (no network I/O). Owns selection (drag-drop + click + keyboard), validation (`accept` / `maxSize` / `maxFiles`) with reject-before-accept (`onFilesAdded(File[])` / `onFilesRejected(rejections)` carrying `file-too-large` / `file-invalid-type` / `too-many-files`), and renders the file list with a per-row `Progress` bar. The consumer owns the `files` array and performs the upload. Accessible drop zone (focusable input; drag-drop is a mouse enhancement). New internal `Upload` icon.
+
+- **`Slider`** — range input on Radix Slider. Single **and** range in one component: pass a `number` for one thumb or `number[]` for a range, and the emitted value mirrors that shape. `showValue` readout + `formatValue` (→ `aria-valuetext`), range `thumbLabels`, sizes, error state. RTL-native via the provider direction.
+
+- **`NumberInput`** — numeric field with flanking − / + steppers. `value: number | null` (controlled/uncontrolled); free typing clamped to `[min, max]` on blur while `step` drives the buttons + ArrowUp/Down; a focused string draft preserves partials (`-`, `1.`); non-numeric input is rejected at `onChange`; display stays plain-decimal (no scientific notation). Latin + LTR digits inside RTL forms, `inputmode` numeric/decimal. New internal `Plus` icon.
+
+- **`Rating`** — star rating, interactive (`role="slider"`: Arrow/Home/End + pointer half-detection) or `readOnly` (`role="img"`). Whole or half-star (`allowHalf`) precision; RTL-aware fill + pointer math. `max`, sizes, error tint, `formatValueText` (i18n). Recolor via the `--ddga-rating-color` CSS variable. New solid `Star` icon.
+
+- **`Toggle` + `ToggleGroup` + `ToggleGroupItem`** — Radix Toggle. Standalone two-state button (`role="button"` + `aria-pressed`) plus a group that is a segmented control (`type="single"`) or a multi-select toolbar (`type="multiple"`), via a discriminated union on `type`. `default` / `outline` variants (outline joins items into one segmented bar), sizes; item visuals cascade from the group via CSS. Dev-warns on a missing group accessible name.
+
+- **`DescriptionList` + `DescriptionItem` + `DescriptionTerm` + `DescriptionDetails`** — semantic `<dl>/<dt>/<dd>` key–value list for review / summary screens. `orientation` horizontal (label beside value, auto-stacks under 480px) or vertical; `divided` rows; term-column width via the `--ddga-dl-term-width` CSS variable. RTL via logical properties. No Radix.
+
+#### Architecture
+
+- **Body-level portal container for overlays.** `DgaProvider` now creates a `<div data-slot="dga-portal">` appended to `document.body` and exposes it as `DgaContext.portalEl`, mirroring `data-theme` / `dir` / theme CSS variables. All overlay components (Tooltip, Modal, Drawer, DropdownMenu, Select, Combobox, DatePicker) portal there instead of `rootEl`, so they escape any consumer `overflow: hidden` / `transform` ancestor while still inheriting theming. Falls back to `rootEl` during SSR / first commit.
+
+#### Tooling
+
+- **Bundle-size budgets** (`size-limit`, brotli) per component with a CI gate that fails PRs on regression.
+
+#### New dependencies
+
+- `react-aria-components` and `@internationalized/date` (DatePicker only; both externalized in the build).
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -82,13 +82,15 @@ function MyField({ label, helperText, error, errorMessage, ...rest }) {
 
 ## Components
 
-**Form:** `Button` · `Input` · `Textarea` · `Checkbox` · `RadioGroup` + `Radio` · `Switch` · `Select` + `SelectItem` · `Combobox` + `ComboboxItem` (+ `ComboboxGroup` · `ComboboxSeparator`)
+**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`)
+**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`