prime-ui-kit 0.9.0 → 0.9.2

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 
 **A calm, precise React 19 UI kit for product interfaces** — admin panels, dashboards, settings, forms
-and data tables. 50 components on one design contract, one API vocabulary and one set of tokens, so
+and data tables. 61 components on one design contract, one API vocabulary and one set of tokens, so
 every screen you build looks like it was drawn by the same hand.
 
 - **Graphite design language.** Depth from fill, not lines; a strict 4px grid; one size axis
@@ -15,7 +15,14 @@ every screen you build looks like it was drawn by the same hand.
 - **Light and dark as equals.** Full themes, WCAG AA text contrast, a focus ring that is never clipped.
 - **One API everywhere.** `size`, `variant`, `tone`, `color`, `invalid/hint/error`,
   `value/onValueChange`, `checked/onCheckedChange`, `open/onOpenChange`, `labels` — the same names in
-  every component, compound parts `X.Root` + `X.Part`, state in `data-*`.
+  every component, compound parts `X.Root` + `X.Part` for components with parts and a single export
+  for leaves (`<Kbd>`, `<Divider>`), state in `data-*`.
+- **Built from itself.** Components reuse the kit's own Button, Badge, Spinner, Icon, Checkbox,
+  EmptyPage and ScrollContainer instead of private copies, so a fix in one place lands everywhere.
+- **States flow, they never flip.** Controls move into their new state; a region that switches
+  between loading, data, empty and error cross-fades and glides to its new height (`Crossfade`),
+  and while it loads a `Skeleton` holds the shape of the coming content — so nothing on the page
+  jumps.
 - **Overlays that behave.** Modal, Drawer, Popover, Dropdown, Select, Tooltip and CommandMenu share
   one stack: one click or one Escape closes exactly the topmost layer, focus goes where it should.
 - **Accessible by default.** Keyboard support, ARIA roles, Russian default strings for every system
@@ -51,50 +58,36 @@ prime-ui-kit is built to be used by coding agents (Claude Code, Cursor, Codex,
 
 ---
 
-## What's new in 0.9.0
-
-- **API v1.** One vocabulary across the kit: `size`, `variant`, `tone`, `color`, `invalid/hint/error`,
-  `value/onValueChange`, `checked/onCheckedChange`, `open/onOpenChange`, `closeOnOutsideClick`,
-  `closeOnEscape`, `labels`. No aliases, no deprecated props.
-- **Graphite redesign.** Fill-based depth, borderless fields, lavender accent, soft badges and tags,
-  full dark theme, never-clipped focus ring, one overlay stack with shared dismiss and motion rules.
-- **Docs rewritten from the code.** Every component has a new `COMPONENT.md` (anatomy, every prop with
-  its default, every variant, states, a11y, mistakes) and one-scenario-per-file `examples/` that the
-  playground renders directly — one source for the playground, the npm package and the agent skill.
-- **Agent skill rebuilt** (`SKILL/`): process, design rules, API cheat sheet, choosing guide,
-  composition, page recipes, anti-slop rules and a review checklist — field-tested on real screens.
-- **Docs contract test** keeps docs, examples and the playground from drifting apart.
-- Kit fixes: `Popover.Trigger` keeps the child's `id` (field labels work for Datepicker and
-  ColorPresets), `Card.Title` / `Card.SectionTitle` take `as` for the heading level, FileUpload `solid`
-  keeps no outline on hover, more prop types exported.
-
 ## Install
 
 ```bash
-npm install prime-ui-kit react react-dom react-aria-components date-fns
+npm install prime-ui-kit react react-dom date-fns
+# using ColorPicker: also react-aria-components
 # or: pnpm add … · bun add …
 ```
 
 | Peer dependency | Version |
 |---|---|
 | `react`, `react-dom` | ^19.0.0 |
-| `react-aria-components` | ^1.16.0 |
 | `date-fns` | ^4.0.0 |
+| `react-aria-components` (optional, only for `prime-ui-kit/color-picker`) | ^1.16.0 |
 
-`lucide-react` (icons) and `react-router-dom` come with the package.
+`lucide-react` (icons) comes with the package. The kit has no router dependency: pass your router's
+pathname to `AppShell.Template scrollResetKey` and use `asChild` for router links.
 
 ## Set up styles and theme
 
 ```tsx
-import "prime-ui-kit/styles.css"; // Golos Text + JetBrains Mono, reset, tokens, light and dark themes
-import "prime-ui-kit/bundle.css"; // component styles
+import "prime-ui-kit/bundle.css"; // tokens, light and dark themes, component styles
+import "prime-ui-kit/fonts.css"; // optional: Golos Text + JetBrains Mono from Google Fonts
+import "prime-ui-kit/reset.css"; // optional: minimal document reset (skip if the app has its own)
 import { applyTheme } from "prime-ui-kit";
 
 applyTheme("dark"); // sets data-theme on <html> without a transition flash
 ```
 
+`bundle.css` is everything the components need; it leaves the root font size to the browser.
 `data-theme="light" | "dark"` also works on any wrapper, so one page can show both themes.
-Fine-grained alternatives: `prime-ui-kit/tokens.css`, `theme-light.css`, `theme-dark.css`.
 
 ## Quick start
 
@@ -108,7 +101,7 @@ export function App() {
       nav={
         <Sidebar.Root>
           <Sidebar.Content>
-            <Sidebar.Item active>Clients</Sidebar.Item>
+            <Sidebar.Item current>Clients</Sidebar.Item>
           </Sidebar.Content>
         </Sidebar.Root>
       }
@@ -135,8 +128,10 @@ export function App() {
 
 Short rules that keep code correct — for people and for AI coding assistants:
 
-1. Import everything from the package root: `import { Button, Input } from "prime-ui-kit"`.
-2. Import styles once at the app root: `prime-ui-kit/styles.css` and `prime-ui-kit/bundle.css`.
+1. Import everything from the package root: `import { Button, Input } from "prime-ui-kit"`. The one
+   exception is `import { ColorPicker } from "prime-ui-kit/color-picker"`.
+2. Import styles once at the app root: `prime-ui-kit/bundle.css` (plus the optional `fonts.css` and
+   `reset.css`).
 3. Compound components are used through parts: `<Button.Root>`, `<Modal.Root>` + `<Modal.Content>`.
    `<Button>` alone is not a component.
 4. Default `size` is `m`; controls in one row share one size.
@@ -190,32 +185,39 @@ accessibility, examples and common mistakes.
 | [**SegmentedControl**](https://github.com/esurkov1/prime-ui/blob/main/src/components/segmented-control/COMPONENT.md) | A switch between 2–5 mutually exclusive options or modes that takes effect immediately. |
 | [**Slider**](https://github.com/esurkov1/prime-ui/blob/main/src/components/slider/COMPONENT.md) | A slider for picking an approximate numeric value within a range, with an optional label and value readout. |
 | [**Select**](https://github.com/esurkov1/prime-ui/blob/main/src/components/select/COMPONENT.md) | A dropdown field for choosing one value (or several with `multiple`) from a closed list. |
+| [**NativeSelect**](https://github.com/esurkov1/prime-ui/blob/main/src/components/native-select/COMPONENT.md) | The system `<select>` in the kit's field frame: plain text options, native picker on phones. |
 | [**TagSelect**](https://github.com/esurkov1/prime-ui/blob/main/src/components/tag-select/COMPONENT.md) | A multi-select field that shows the chosen values as coloured tags, filters as you type and can create new tags. |
+| [**SmartFilter**](https://github.com/esurkov1/prime-ui/blob/main/src/components/smart-filter/COMPONENT.md) | A filter bar for lists and tables: a filter button and search with a panel of values, applied filters as tags, and a show / hide choice for every value. |
 | [**Datepicker**](https://github.com/esurkov1/prime-ui/blob/main/src/components/datepicker/COMPONENT.md) | A calendar for picking a date or a date range: a field with a popover (`Datepicker.Root`) or an embedded panel (`Datepicker.Panel`). |
 | [**ColorPicker**](https://github.com/esurkov1/prime-ui/blob/main/src/components/color-picker/COMPONENT.md) | Color selection: a full picker (area, channel sliders, hex and channel fields, eyedropper, swatches) and `ColorPresets` for a quick color from a fixed palette. |
+| [**ColorSwatches**](https://github.com/esurkov1/prime-ui/blob/main/src/components/color-swatches/COMPONENT.md) | An inline color choice: a wrapping grid of preset swatches inside a form, without a popover. |
 
 ### Data display (`data-display`)
 
 | Component | What it is for |
 |---|---|
-| [**Badge**](https://github.com/esurkov1/prime-ui/blob/main/src/components/badge/COMPONENT.md) | A compact static label for a status, category or count, in a palette color. |
-| [**Tag**](https://github.com/esurkov1/prime-ui/blob/main/src/components/tag/COMPONENT.md) | A chip for a selected value, applied filter or keyword, with an optional remove button and a palette color. |
+| [**Badge**](https://github.com/esurkov1/prime-ui/blob/main/src/components/badge/COMPONENT.md) | The kit's one chip: a status, category or count label, a removable value or applied filter, and a pressable toggle with a hover action, in a palette color. |
 | [**Avatar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/avatar/COMPONENT.md) | A round photo of a person or entity with an initials or icon fallback, presence dot and overlapping groups. |
+| [**Thumbnail**](https://github.com/esurkov1/prime-ui/blob/main/src/components/thumbnail/COMPONENT.md) | A preview of an object — product, vehicle, file, cover — at a fixed aspect ratio, with a colored icon fallback. |
 | [**Kbd**](https://github.com/esurkov1/prime-ui/blob/main/src/components/kbd/COMPONENT.md) | A key cap for a keyboard key or a shortcut, rendered as a native `<kbd>`. |
 | [**Card**](https://github.com/esurkov1/prime-ui/blob/main/src/components/card/COMPONENT.md) | A filled surface block with structural templates for metrics, charts, lists, calls to action and covers. |
 | [**DataTable**](https://github.com/esurkov1/prime-ui/blob/main/src/components/data-table/COMPONENT.md) | A data table with sorting, pagination or infinite scroll, row selection, nested rows and loading / empty / error states. |
+| [**Kanban**](https://github.com/esurkov1/prime-ui/blob/main/src/components/kanban/COMPONENT.md) | A board of status columns: cross-column moves by pointer, touch and keyboard, WIP limits, loading and empty states. |
 | [**Timeline**](https://github.com/esurkov1/prime-ui/blob/main/src/components/timeline/COMPONENT.md) | An event feed: dots on a thin line, event title and date, an optional amount on the right, grouped under labels. |
 | [**CodeBlock**](https://github.com/esurkov1/prime-ui/blob/main/src/components/code-block/COMPONENT.md) | A static TypeScript / TSX snippet with syntax highlighting, on a sunken panel or bare inside a host. |
+| [**Accordion**](https://github.com/esurkov1/prime-ui/blob/main/src/components/accordion/COMPONENT.md) | Collapsible sections: FAQ, settings groups, checkout steps. |
 
-### Feedback (`feedback`)
+### Status and loading (`status`)
 
 | Component | What it is for |
 |---|---|
 | [**Banner**](https://github.com/esurkov1/prime-ui/blob/main/src/components/banner/COMPONENT.md) | Full-width in-flow message for a page, section or card: status icon, title, description, actions and dismiss. |
 | [**Notification**](https://github.com/esurkov1/prime-ui/blob/main/src/components/notification/COMPONENT.md) | Pop-up toast notifications: `NotificationProvider` at the app root and `notify()` from any screen. |
-| [**ProgressBar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/progress-bar/COMPONENT.md) | Linear progress indicator on a native `<progress>` with a label, a percentage and a status color. |
-| [**SegmentedProgressBar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/segmented-progress-bar/COMPONENT.md) | One bar made of proportional segments: storage by type, task statuses, a funnel or quotas. |
-| [**ProgressCircle**](https://github.com/esurkov1/prime-ui/blob/main/src/components/progress-circle/COMPONENT.md) | Circular progress indicator: a track, a rounded arc and optional content in the center. |
+| [**ProgressBar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/progress-bar/COMPONENT.md) | Linear progress: one value on a native `<progress>`, or `segments` that split a whole (storage by type, task statuses), with a label, a percentage and status colors. |
+| [**ProgressCircle**](https://github.com/esurkov1/prime-ui/blob/main/src/components/progress-circle/COMPONENT.md) | Circular progress — the ring version of ProgressBar: one value or `segments` that split a whole, with status colors and optional content in the center. |
+| [**Spinner**](https://github.com/esurkov1/prime-ui/blob/main/src/components/spinner/COMPONENT.md) | An indeterminate loading indicator: a ring with a gap that turns while a request runs. |
+| [**Skeleton**](https://github.com/esurkov1/prime-ui/blob/main/src/components/skeleton/COMPONENT.md) | A placeholder in the shape of the content that is loading — text lines, a control, an avatar, a block — so the layout is in place before the data arrives. |
+| [**Crossfade**](https://github.com/esurkov1/prime-ui/blob/main/src/components/crossfade/COMPONENT.md) | A region that cross-fades between its states (loading → data → empty → error) and glides to the new height, so the page below does not jump. |
 | [**EmptyPage**](https://github.com/esurkov1/prime-ui/blob/main/src/components/empty-page/COMPONENT.md) | Empty state of a page or a block: icon, title, explanation and an action. |
 
 ### Navigation (`navigation`)
@@ -225,7 +227,9 @@ accessibility, examples and common mistakes.
 | [**Tabs**](https://github.com/esurkov1/prime-ui/blob/main/src/components/tabs/COMPONENT.md) | Tabs for navigating between content panels of one screen. |
 | [**Breadcrumb**](https://github.com/esurkov1/prime-ui/blob/main/src/components/breadcrumb/COMPONENT.md) | Breadcrumbs: the path to the current page. |
 | [**Pagination**](https://github.com/esurkov1/prime-ui/blob/main/src/components/pagination/COMPONENT.md) | Page-by-page navigation: arrows, page numbers with ellipsis and a compact «3 / 12» view. |
-| [**Stepper**](https://github.com/esurkov1/prime-ui/blob/main/src/components/stepper/COMPONENT.md) | Steps of a multi-step process with pending, active, completed and error statuses. |
+| [**Stepper**](https://github.com/esurkov1/prime-ui/blob/main/src/components/stepper/COMPONENT.md) | Steps of a multi-step process with pending, active, completed and danger statuses. |
+| [**Sidebar**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/sidebar/COMPONENT.md) | App side navigation in three modes — expanded, compact, hidden — and an off-canvas panel on narrow screens. |
+| [**BottomNav**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/bottom-nav/COMPONENT.md) | Phone navigation bar: 3–5 sections, flat or a floating glass capsule. |
 
 ### Overlays (`overlays`)
 
@@ -238,17 +242,29 @@ accessibility, examples and common mistakes.
 | [**Drawer**](https://github.com/esurkov1/prime-ui/blob/main/src/components/drawer/COMPONENT.md) | A modal side panel that slides in from the edge: filters, forms and record details. |
 | [**CommandMenu**](https://github.com/esurkov1/prime-ui/blob/main/src/components/command-menu/COMPONENT.md) | A command palette in a dialog: a search field that filters a list of commands and pages (⌘K). |
 
-### Layout (`layout`)
+### Page (`page`)
 
 | Component | What it is for |
 |---|---|
 | [**AppShell**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-shell/COMPONENT.md) | The app frame: a navigation rail on the canvas and a content panel on the surface. |
-| [**Sidebar**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/sidebar/COMPONENT.md) | App side navigation in three modes — expanded, compact, hidden — and an off-canvas panel on narrow screens. |
+| [**AppHeader**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-header/COMPONENT.md) | The bar at the top of the app: where you are, ⌘K search, a few actions and the phone menu button. |
 | [**PageContent**](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-content/COMPONENT.md) | Page structure inside the main column: title, description, page actions and content sections. |
-| [**Accordion**](https://github.com/esurkov1/prime-ui/blob/main/src/components/accordion/COMPONENT.md) | Collapsible sections: FAQ, settings groups, checkout steps. |
+| [**PageToolbar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-toolbar/COMPONENT.md) | The panel at the top of a page — sections, filter and search, view options and the primary action — one row when wide, exactly two rows when narrow. |
 | [**Divider**](https://github.com/esurkov1/prime-ui/blob/main/src/components/divider/COMPONENT.md) | A hairline separator, horizontal or vertical, with or without a label. |
 | [**ScrollContainer**](https://github.com/esurkov1/prime-ui/blob/main/src/components/scroll-container/COMPONENT.md) | A scroll region with the kit's thin scrollbar that shrinks correctly inside flex and grid parents. |
 
+### Interaction (`interaction`)
+
+| Component | What it is for |
+|---|---|
+| [**Dnd**](https://github.com/esurkov1/prime-ui/blob/main/src/components/dnd/COMPONENT.md) | Pointer-driven drag and drop: reorderable lists, draggable items and drop zones, with touch and keyboard support. |
+
+### Composition (`composition`)
+
+| Component | What it is for |
+|---|---|
+| [**LoginForm**](https://github.com/esurkov1/prime-ui/blob/main/src/components/login-form/COMPONENT.md) | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. |
+
 ### Foundations (`foundations`)
 
 | Component | What it is for |
@@ -268,9 +284,8 @@ accessibility, examples and common mistakes.
 | `NotificationProvider` + `useNotifications()` | Toast queue: `notify`, `dismiss`, `dismissAll`. Place the provider once at the app root. |
 | `ControlSizeProvider` | Default `size` for every control in a subtree (dense toolbars, compact forms). |
 | `Tooltip.Provider` | Shared open delay for a group of tooltips. |
-| `OverlayPortalLayerProvider` | Portal target for overlays rendered inside a custom layer. |
 | `applyTheme(scheme, element?)` | Switch the theme without transition flashes. |
-| `Icon`, `IconSearch`, `IconClose`, … | The kit icon set (built on lucide-react). |
+| `<Icon name="…" />`, `createIcon(glyph)` | The kit icon set (built on lucide-react); `createIcon` turns a domain glyph into a kit icon. |
 
 ## Docs inside the package
 
@@ -279,7 +294,7 @@ Each component folder ships with the package:
 ```
 node_modules/prime-ui-kit/src/components/<name>/COMPONENT.md   full reference
 node_modules/prime-ui-kit/src/components/<name>/examples/*.tsx one scenario per file, copyable
-node_modules/prime-ui-kit/src/layout/{app-shell,sidebar}/…     AppShell and Sidebar
+node_modules/prime-ui-kit/src/layout/<name>/…                  AppShell, AppHeader, Sidebar, BottomNav
 ```
 
 Examples import only from `"prime-ui-kit"` and style layout with a local `examples.module.css` on
@@ -328,12 +343,11 @@ command again with `--force` (degit) or re-copy the folder.
 
 | Path | Purpose |
 |---|---|
-| `prime-ui-kit` | Main JS/TS API (includes global styles import). |
-| `prime-ui-kit/components` | Components entry without layout extras. |
-| `prime-ui-kit/styles.css` | Fonts, reset, tokens, both themes. |
-| `prime-ui-kit/tokens.css`, `theme-light.css`, `theme-dark.css` | Individual layers. |
-| `prime-ui-kit/bundle.css` | Component CSS for the main entry. |
-| `prime-ui-kit/components.css` | Component CSS for the `components` entry. |
+| `prime-ui-kit` | The JS/TS API: every component, layout, icon and helper (no CSS side effects). |
+| `prime-ui-kit/bundle.css` | Tokens, both themes, base rules (focus ring, reduced motion) and every component's CSS. |
+| `prime-ui-kit/fonts.css` | Optional: Golos Text and JetBrains Mono from Google Fonts. |
+| `prime-ui-kit/reset.css` | Optional: minimal document reset. |
+| `prime-ui-kit/tokens.css`, `theme-light.css`, `theme-dark.css` | The token layers alone (already inside `bundle.css`), for styling without components. |
 
 Type definitions ship with the package.
 

package/dist/chunks/chunk-IQELQNMR.js

@@ -0,0 +1,379 @@
+import {
+  Button,
+  ColorSwatches,
+  Icon,
+  Input,
+  Select,
+  SwatchChip,
+  createComponentContext,
+  cx,
+  fieldSurfaceClass
+} from "./chunk-ZEFCDEEQ.js";
+
+// src/components/color-picker/ColorPicker.tsx
+import * as React from "react";
+import {
+  ColorArea as AriaColorArea,
+  ColorPicker as AriaColorPicker,
+  ColorSlider as AriaColorSlider,
+  ColorThumb as AriaColorThumb,
+  SliderOutput as AriaSliderOutput,
+  SliderTrack as AriaSliderTrack,
+  ColorPickerStateContext,
+  composeRenderProps,
+  parseColor
+} from "react-aria-components";
+
+// src/components/color-picker/ColorPicker.module.css
+var ColorPicker_default = {
+  panel: "ColorPicker_panel",
+  slider: "ColorPicker_slider",
+  sliderHeader: "ColorPicker_sliderHeader",
+  sliderLabel: "ColorPicker_sliderLabel",
+  sliderValue: "ColorPicker_sliderValue",
+  sliderTrack: "ColorPicker_sliderTrack",
+  thumb: "ColorPicker_thumb",
+  thumbArea: "ColorPicker_thumbArea",
+  area: "ColorPicker_area",
+  formatSelectWrap: "ColorPicker_formatSelectWrap",
+  channelStrip: "ColorPicker_channelStrip",
+  channelStripLead: "ColorPicker_channelStripLead",
+  channelStripEyedropperBtn: "ColorPicker_channelStripEyedropperBtn",
+  channelCell: "ColorPicker_channelCell",
+  channelInput: "ColorPicker_channelInput",
+  channelCellHex: "ColorPicker_channelCellHex",
+  channelSuffix: "ColorPicker_channelSuffix",
+  eyeDropperSquare: "ColorPicker_eyeDropperSquare"
+};
+
+// src/components/color-picker/ColorPicker.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var COLOR_PICKER_LABELS = {
+  format: "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0446\u0432\u0435\u0442\u0430",
+  eyeDropper: "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
+  hex: "Hex",
+  hue: "\u041E\u0442\u0442\u0435\u043D\u043E\u043A, \u0433\u0440\u0430\u0434\u0443\u0441\u044B",
+  saturation: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  lightness: "\u042F\u0440\u043A\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  alpha: "\u041D\u0435\u043F\u0440\u043E\u0437\u0440\u0430\u0447\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  red: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439, 0\u2013255",
+  green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439, 0\u2013255",
+  blue: "\u0421\u0438\u043D\u0438\u0439, 0\u2013255"
+};
+var CHECKER_BG = "repeating-conic-gradient(var(--prime-color-bg-surface) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
+var [ColorPickerProvider, useColorPickerContext] = createComponentContext("ColorPicker");
+function useColorState() {
+  const state = React.useContext(ColorPickerStateContext);
+  if (!state) throw new Error("ColorPicker parts must be used inside <ColorPicker.Root>.");
+  return state;
+}
+function toHexText(color) {
+  return color.toString(color.getChannelValue("alpha") < 1 ? "hexa" : "hex");
+}
+function useColorDraft(read, parse) {
+  const state = useColorState();
+  const inputRef = React.useRef(null);
+  const [text, setText] = React.useState(() => read(state.color));
+  const fingerprint = state.color.toString("hexa");
+  React.useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) return;
+    setText(read(state.color));
+  }, [fingerprint]);
+  const commit = () => {
+    const next = parse(text.trim(), state.color);
+    if (next) state.setColor(next);
+    setText(read(next ?? state.color));
+  };
+  return { inputRef, text, setText, commit };
+}
+function onCommitKeyDown(commit) {
+  return (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    commit();
+    event.currentTarget.blur();
+  };
+}
+var parseHex = (text) => {
+  try {
+    return parseColor(text);
+  } catch {
+    return null;
+  }
+};
+var FORMAT_LABELS = { hsl: "HSL", rgb: "RGB", hex: "Hex" };
+var isFormat = (value) => value in FORMAT_LABELS;
+function FormatSelect({ className, ...rest }) {
+  const { format, setFormat, labels } = useColorPickerContext();
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx(ColorPicker_default.formatSelectWrap, className), children: /* @__PURE__ */ jsxs(Select.Root, { value: format, onValueChange: (value) => isFormat(value) && setFormat(value), children: [
+    /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": labels.format, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+    /* @__PURE__ */ jsx(Select.Content, { children: Object.entries(FORMAT_LABELS).map(([value, label]) => /* @__PURE__ */ jsx(Select.Item, { label, value, children: label }, value)) })
+  ] }) });
+}
+function displayChannelValue(color, channel, space) {
+  const raw = color.toFormat(space).getChannelValue(channel);
+  return String(Math.round(channel === "alpha" ? raw * 100 : raw));
+}
+function parseChannelValue(text, color, channel, space) {
+  const n = Number.parseFloat(text.replace(",", "."));
+  if (Number.isNaN(n)) return null;
+  if (channel === "alpha")
+    return color.withChannelValue("alpha", Math.min(100, Math.max(0, n)) / 100);
+  const c = color.toFormat(space);
+  const range = c.getChannelRange(channel);
+  return c.withChannelValue(channel, Math.min(range.maxValue, Math.max(range.minValue, n)));
+}
+function ChannelField({
+  channel,
+  space,
+  suffix
+}) {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(
+    (color) => displayChannelValue(color, channel, space),
+    (value, color) => parseChannelValue(value, color, channel, space)
+  );
+  return /* @__PURE__ */ jsxs("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        "aria-label": labels[channel],
+        className: ColorPicker_default.channelInput,
+        inputMode: "decimal",
+        value: text,
+        onBlur: commit,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: onCommitKeyDown(commit)
+      }
+    ),
+    suffix ? /* @__PURE__ */ jsx("span", { className: ColorPicker_default.channelSuffix, children: suffix }) : null
+  ] });
+}
+function StripHexField() {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
+  return /* @__PURE__ */ jsx("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell, ColorPicker_default.channelCellHex), children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      "aria-label": labels.hex,
+      autoCapitalize: "off",
+      autoCorrect: "off",
+      className: ColorPicker_default.channelInput,
+      spellCheck: false,
+      value: text,
+      onBlur: commit,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: onCommitKeyDown(commit)
+    }
+  ) });
+}
+function ChannelStrip({ className, focusRing = true, ...rest }) {
+  const { format } = useColorPickerContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx(ColorPicker_default.channelStrip, className),
+      "data-focus-ring": focusRing ? void 0 : "false",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: ColorPicker_default.channelStripLead, children: /* @__PURE__ */ jsx(EyeDropperButton, { className: ColorPicker_default.channelStripEyedropperBtn }) }),
+        format === "hex" ? /* @__PURE__ */ jsx(StripHexField, {}) : format === "hsl" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChannelField, { channel: "hue", space: "hsl", suffix: "\xB0" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "saturation", space: "hsl", suffix: "%" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "lightness", space: "hsl", suffix: "%" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "alpha", space: "hsl", suffix: "%" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChannelField, { channel: "red", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "green", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "blue", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "alpha", space: "rgb", suffix: "%" })
+        ] })
+      ]
+    }
+  );
+}
+function Panel({ surface = "none", className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(ColorPicker_default.panel, className), "data-surface": surface, ...rest });
+}
+Panel.displayName = "ColorPicker.Panel";
+function ColorPickerRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  defaultFormat = "hsl",
+  labels: labelsProp,
+  children
+}) {
+  const [format, setFormat] = React.useState(defaultFormat);
+  const labels = React.useMemo(() => ({ ...COLOR_PICKER_LABELS, ...labelsProp }), [labelsProp]);
+  const contextValue = React.useMemo(() => ({ format, setFormat, labels }), [format, labels]);
+  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(AriaColorPicker, { value, defaultValue, onChange: onValueChange, children }) });
+}
+ColorPickerRoot.displayName = "ColorPicker.Root";
+function Slider({ className, disabled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorSlider,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.slider, c)),
+      isDisabled: disabled,
+      ...props
+    }
+  );
+}
+function Area({ className, disabled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorArea,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.area, c)),
+      isDisabled: disabled,
+      ...props
+    }
+  );
+}
+function SliderTrack({ className, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaSliderTrack,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.sliderTrack, c)),
+      style: (renderProps) => {
+        const fromUser = typeof style === "function" ? style(renderProps) : style;
+        const baseBg = renderProps.defaultStyle.background;
+        const layered = renderProps.isDisabled || baseBg === void 0 ? baseBg : `${String(baseBg)}, ${CHECKER_BG}`;
+        return {
+          ...renderProps.defaultStyle,
+          ...fromUser,
+          ...layered !== void 0 ? { background: layered } : null
+        };
+      },
+      ...props
+    }
+  );
+}
+function Thumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorThumb,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.thumb, c)),
+      ...props
+    }
+  );
+}
+function AreaThumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorThumb,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.thumbArea, c)),
+      ...props
+    }
+  );
+}
+function Swatches(props) {
+  const state = useColorState();
+  return /* @__PURE__ */ jsx(
+    ColorSwatches,
+    {
+      ...props,
+      value: state.color.toString("hex"),
+      onValueChange: (next) => next && state.setColor(parseColor(next))
+    }
+  );
+}
+Swatches.displayName = "ColorPicker.Swatches";
+function SliderMeta({ label, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx(ColorPicker_default.sliderHeader, className), children: [
+    /* @__PURE__ */ jsx("span", { className: ColorPicker_default.sliderLabel, children: label }),
+    /* @__PURE__ */ jsx(AriaSliderOutput, { className: ColorPicker_default.sliderValue })
+  ] });
+}
+function HexInput({ label, hint, error, focusRing = true, ...rest }) {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
+  return /* @__PURE__ */ jsx(
+    Input.Root,
+    {
+      ...rest,
+      label: label ?? labels.hex,
+      hint,
+      error,
+      focusRing,
+      children: /* @__PURE__ */ jsx(Input.Wrapper, { children: /* @__PURE__ */ jsx(
+        Input.Field,
+        {
+          ref: inputRef,
+          autoCapitalize: "off",
+          autoCorrect: "off",
+          spellCheck: false,
+          value: text,
+          onBlur: commit,
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: onCommitKeyDown(commit)
+        }
+      ) })
+    }
+  );
+}
+HexInput.displayName = "ColorPicker.HexInput";
+function EyeDropperButton({
+  children,
+  onClick,
+  type = "button",
+  className,
+  ref,
+  ...rest
+}) {
+  const { labels } = useColorPickerContext();
+  const state = useColorState();
+  const EyeDropperApi = typeof window === "undefined" ? void 0 : window.EyeDropper;
+  const supported = EyeDropperApi !== void 0;
+  return /* @__PURE__ */ jsx(
+    Button.Root,
+    {
+      variant: "soft",
+      tone: "neutral",
+      ref,
+      type,
+      "aria-label": labels.eyeDropper,
+      "aria-hidden": supported ? void 0 : true,
+      disabled: !supported,
+      tabIndex: supported ? void 0 : -1,
+      className: cx(ColorPicker_default.eyeDropperSquare, className),
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || !EyeDropperApi) return;
+        void new EyeDropperApi().open().then((result) => state.setColor(parseColor(result.sRGBHex))).catch(() => {
+        });
+      },
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(Button.Icon, { children: /* @__PURE__ */ jsx(Icon, { name: "action.eyedropper" }) })
+    }
+  );
+}
+EyeDropperButton.displayName = "ColorPicker.EyeDropperButton";
+function TriggerSwatch(props) {
+  const state = useColorState();
+  return /* @__PURE__ */ jsx(SwatchChip, { ...props, value: state.color.toString("css") });
+}
+TriggerSwatch.displayName = "ColorPicker.TriggerSwatch";
+var ColorPicker = {
+  Root: ColorPickerRoot,
+  Panel,
+  TriggerSwatch,
+  FormatSelect,
+  ChannelStrip,
+  HexInput,
+  Area,
+  AreaThumb,
+  Slider,
+  SliderMeta,
+  SliderTrack,
+  Thumb,
+  Swatches,
+  EyeDropperButton
+};
+
+export {
+  parseColor,
+  ColorPicker
+};