hazo_ui 3.5.0 → 4.2.0

package/CHANGE_LOG.md

@@ -5,6 +5,62 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v4.2.0 (2026-06-14)
+
+### New
+- `HazoUiImageCropper` — round profile-photo cropper built on `react-easy-crop`.
+  Pan and zoom a source image inside a 320 px stage; uses `forwardRef` to expose a
+  `getCroppedBlob()` imperative handle so parent components (e.g. a dialog confirm
+  button) can request the WebP blob on demand. Zoom control uses the existing
+  `Slider` primitive. All user-facing strings are props with English defaults.
+- `HazoUiImageCropperDialog` — dialog wrapper (built on `HazoUiDialog`) that manages
+  the File → object URL lifecycle, triggers `getCroppedBlob()` on Confirm, shows a
+  loading spinner while the blob is produced, and closes automatically after
+  `onConfirm` resolves. Label props (`title`, `confirmLabel`, `cancelLabel`,
+  `zoomLabel`) accept translated strings so no next-intl dependency is needed.
+
+### Dependencies
+- **`react-easy-crop` (^6.0.2) added to `dependencies`.**
+
+## v4.1.1 (2026-06-14)
+
+### New
+- `Slider` — Radix-backed (`@radix-ui/react-slider`) range slider primitive following the shadcn pattern; styled via theme tokens (`bg-primary`/`bg-secondary`) so consumers re-skin via CSS variables. Closes FR-003.
+- `InputAffix` — input with optional `prefix`/`suffix` slots (e.g. a `$` affix) sharing the `Input` primitive's border/height styling; numeric-friendly. Closes FR-004.
+- **ETA Progress Bar** — determinate progress with rolling-window time estimation:
+  - `HazoUiProgressBar` — controlled determinate bar driven by a `0..1` `value` prop.
+  - `useEtaProgress` — driver hook (`{ value, start, unitDone, finish }`) that estimates remaining time from a rolling window of past run durations.
+  - `HazoUiEtaProgress` — storage-backed self-estimating bar that persists its duration window via **`hazo_state`**.
+  - Pure estimation helpers `median`, `computeEta`, `easeToward` are exported for direct use/testing.
+
+### Dependencies
+- **`hazo_state` (^0.1.0) is now a required peer dependency.** The `hazo_ui` barrel statically imports `hazo_state/client` (for `HazoUiEtaProgress`), so consumers must install `hazo_state` alongside `hazo_ui`. (It was briefly declared optional, which was incorrect — the import is unconditional.)
+
+### Fixed
+- test-app: `hazo_state` webpack alias now uses an exact (`$`) match so subpath imports (`hazo_state/client`) resolve instead of being rewritten into the bare-package path.
+- test-app autotest: `Slider` / `InputAffix` export-contract scenarios now accept `forwardRef`/`memo` components (which are objects, not functions); added `eta_progress_estimation` (pure-helper behaviour) and `eta_progress_ui` (progress-bar export contract) scenarios.
+
+## v4.0.0 (2026-06-13)
+
+### BREAKING
+
+- **`LineChart` and `MultiLineChart` removed.** These components (along with their prop types
+  `LineChartProps`, `MultiLineChartProps`, and the `MultiSeries` type) have been extracted from
+  `hazo_ui` and re-implemented in `hazo_dataviz` on recharts with the same prop API. Consumers
+  must update their imports:
+
+  ```ts
+  // Before (hazo_ui ≤ 3.x)
+  import { LineChart, MultiLineChart, type MultiSeries } from "hazo_ui";
+
+  // After (hazo_ui 4.x)
+  import { LineChart, MultiLineChart, type MultiSeries } from "hazo_dataviz/client";
+  ```
+
+  All other chart primitives are **unchanged**: `Sparkline`, `InverseSparkline`, `StackedBars`,
+  `DateRangeSelector`, and `FunnelChart` remain in `hazo_ui` along with their shared types
+  (`ChartDataPoint`, `ChartDataSeries`, `StackedBar`, `DateRangeOption`, `FunnelStep`).
+
 ## v3.5.0 (2026-06-12)
 
 ### New

package/README.md

@@ -204,6 +204,8 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiConfirmDialog](#hazouiconfirmdialog)** - A compact, opinionated confirmation dialog with accent top border, variant system (destructive, warning, info, success), async loading support, and configurable buttons. Perfect for delete confirmations, unsaved changes warnings, and simple acknowledgments.
 
+- **[HazoUiImageCropper / HazoUiImageCropperDialog](#hazouiimagecropper--hazouiimagecropperdialog)** (v4.2.0) - Round profile-photo cropper with pan/zoom built on `react-easy-crop`. Outputs a 512×512 WebP Blob. The standalone `HazoUiImageCropper` exposes a `getCroppedBlob()` imperative handle; `HazoUiImageCropperDialog` wraps it in a dialog with a managed object-URL lifecycle and loading state.
+
 - **[HazoUiTable](#hazouitable--column-config-driven-data-table-v2140)** - A column-config-driven data table built on a shadcn `Table` primitive family. Sortable headers, debounced search, multi-column filter / sort dialogs, pagination, row click (mouse + keyboard), loading / empty / no-results states, and a card-per-row mobile fallback. Optional server-side `onLoad`.
 
 - **[Drawer](#drawer)** - A `vaul`-backed bottom sheet primitive for mobile UIs. Pair with `useMediaQuery` to swap between `Dialog` and `Drawer` based on viewport width.
@@ -224,6 +226,20 @@ Lightweight, opinionated components for the four ubiquitous async states: **load
 - **[useLoadingState](#useloadingstate)** hook - `{ isLoading, setLoading, withLoading }` with an async wrapper.
 - **[useErrorDisplay](#useerrordisplay)** hook - Passive `{ error, setError, clearError }` that coerces `Error` instances to strings.
 
+### Form & Feedback Primitives (v4.1)
+
+- **Slider** - Radix-backed (`@radix-ui/react-slider`) range slider following the shadcn pattern. Styled via theme tokens (`bg-primary` / `bg-secondary`) so consumers re-skin through CSS variables.
+- **InputAffix** - Input with optional `prefix` / `suffix` slots (e.g. a `$` affix) sharing the base `Input` primitive's border/height styling; numeric-friendly.
+- **ETA Progress Bar** - Determinate progress with rolling-window time estimation:
+  - `HazoUiProgressBar` - controlled determinate bar driven by a `0..1` `value` prop.
+  - `useEtaProgress` - driver hook returning `{ value, start, unitDone, finish }` that estimates remaining time from past run durations.
+  - `HazoUiEtaProgress` - storage-backed self-estimating bar that persists its duration window via `hazo_state` (a **required** peer dependency of hazo_ui — see Setup).
+  - Pure helpers `median`, `computeEta`, `easeToward` are exported for direct use/testing.
+
+  ```tsx
+  import { Slider, InputAffix, HazoUiProgressBar, HazoUiEtaProgress, useEtaProgress } from 'hazo_ui';
+  ```
+
 ### shadcn/ui Primitive Re-exports
 
 All shadcn/ui base components are re-exported from hazo_ui, so sibling hazo_* packages (and consumers) can import UI primitives from a single source without installing shadcn/ui separately:
@@ -2110,6 +2126,101 @@ Use the `loading` prop to override this behavior with external control.
 
 ---
 
+## HazoUiImageCropper / HazoUiImageCropperDialog
+
+Round profile-photo cropper (v4.2.0). Pan and zoom a source image inside a circular
+stage; outputs a square WebP `Blob` at a configurable resolution (default 512×512).
+
+### Basic usage — standalone cropper with imperative handle
+
+```tsx
+import { useRef } from 'react';
+import { HazoUiImageCropper, type HazoUiImageCropperHandle } from 'hazo_ui';
+
+function MyPage() {
+  const cropperRef = useRef<HazoUiImageCropperHandle>(null);
+
+  const handleSave = async () => {
+    const blob = await cropperRef.current!.getCroppedBlob();
+    // Upload blob, create preview, etc.
+  };
+
+  return (
+    <>
+      <HazoUiImageCropper ref={cropperRef} imageSrc={objectUrl} />
+      <button onClick={handleSave}>Save</button>
+    </>
+  );
+}
+```
+
+### Basic usage — dialog wrapper
+
+```tsx
+import { useState } from 'react';
+import { HazoUiImageCropperDialog } from 'hazo_ui';
+
+function ProfileEditor() {
+  const [file, setFile] = useState<File | null>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <input type="file" accept="image/*"
+        onChange={e => { setFile(e.target.files![0]); setOpen(true); }} />
+
+      <HazoUiImageCropperDialog
+        open={open}
+        onOpenChange={setOpen}
+        file={file}
+        onConfirm={async (blob) => {
+          await uploadAvatar(blob);
+        }}
+        title="Crop photo"
+        confirmLabel="Save"
+        cancelLabel="Cancel"
+        zoomLabel="Zoom"
+      />
+    </>
+  );
+}
+```
+
+### HazoUiImageCropper Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSrc` | `string` | — | **Required.** Source image URL or object URL |
+| `onCropped` | `(blob: Blob) => void \| Promise<void>` | — | Optional convenience callback when blob is produced |
+| `outputSize` | `number` | `512` | Output canvas dimensions in pixels (square) |
+| `quality` | `number` | `0.9` | WebP quality (0–1) |
+| `zoomLabel` | `string` | `"Zoom"` | Zoom slider label (pass a translated string) |
+| `className` | `string` | — | Additional className for the root element |
+
+The component accepts a `ref` of type `HazoUiImageCropperHandle` exposing:
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getCroppedBlob()` | `Promise<Blob>` | Produces a WebP blob from the current crop area |
+
+### HazoUiImageCropperDialog Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | **Required.** Controls dialog visibility |
+| `onOpenChange` | `(open: boolean) => void` | — | **Required.** Called when dialog open state changes |
+| `file` | `File \| null` | — | **Required.** The image file to crop |
+| `onConfirm` | `(blob: Blob) => void \| Promise<void>` | — | **Required.** Called with the cropped blob on Save |
+| `onCancel` | `() => void` | — | Called when the user cancels |
+| `title` | `string` | `"Crop photo"` | Dialog title |
+| `confirmLabel` | `string` | `"Save"` | Confirm button text |
+| `cancelLabel` | `string` | `"Cancel"` | Cancel button text |
+| `zoomLabel` | `string` | `"Zoom"` | Zoom slider label |
+| `outputSize` | `number` | `512` | Output size in pixels |
+| `quality` | `number` | `0.9` | WebP quality (0–1) |
+
+---
+
 ## HazoUiDialog
 
 A flexible, standardized dialog component with customizable animations, sizes, and theming. Built on Radix UI Dialog primitives with a consistent header/body/footer layout.

package/SETUP_CHECKLIST.md

@@ -98,11 +98,13 @@ The following peer dependencies are required:
 
 - [ ] React (^18.0.0 or ^19.0.0)
 - [ ] React DOM (^18.0.0 or ^19.0.0)
+- [ ] hazo_core (^1.2.0)
+- [ ] hazo_state (^0.1.0) — the `hazo_ui` barrel statically imports `hazo_state/client` (for `HazoUiEtaProgress`), so this is **required** even if you don't use the ETA progress bar.
 
 If not already installed:
 
 ```bash
-npm install react react-dom
+npm install react react-dom hazo_core hazo_state
 ```
 
 ### 3. Install Required Dependencies
@@ -137,6 +139,11 @@ npm install @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-selec
   - **useLoadingState, useErrorDisplay** hooks: No additional dependencies
 - **Celebration (v2.18.0)**:
   - **CelebrationProvider, celebrate, CELEBRATION_GRADIENT**: No additional peer deps — `canvas-confetti` and `html-to-image` are bundled direct dependencies
+- **Form & Feedback primitives (v4.1)**:
+  - **Slider**: `@radix-ui/react-slider`
+  - **InputAffix**: No additional dependencies (uses the base shadcn/ui `Input` component)
+  - **HazoUiProgressBar, useEtaProgress, median, computeEta, easeToward**: No additional dependencies
+  - **HazoUiEtaProgress**: `hazo_state` (^0.1.0) — a **required** peer dep of hazo_ui (the barrel imports it unconditionally), so it is always installed regardless of which components you use.
 
 ### 4. Configure Tailwind CSS