@kismet-ux/constellation 1.14.0 → 1.15.0

package/README.md

@@ -1,208 +1,219 @@
-# Kismet Constellation
-
-A themeable React component library. ~60 components, light/dark out of the box, and a design-token system where **one file holds every color decision**.
-
-No router dependency, no bundled fonts, no registry, no brand baked in — it's meant to be copied into a project and made yours.
-
-```bash
-npm install
-npm run dev     # → http://localhost:5173
-```
-
-The dev server opens on **Foundations**, a live showcase of the whole token system: color families, type scale, spacing, radius, elevation, and components in context. Every other component has its own preview page in the sidebar.
-
-Append `?theme=light`, `?theme=dark`, or `?theme=system` to pin the mode.
-
----
-
-## Two ways to use it
-
-**Copy the repo** (what it's designed for) — you own the source, and rebranding means editing `_palette.scss` and `_theme.scss` as described below.
-
-**Install it** as a dependency:
-
-```bash
-npm install @kismet-ux/constellation
-```
-
-```tsx
-import '@kismet-ux/constellation/styles';
-import { Button } from '@kismet-ux/constellation/ui';
-```
-
-**You only pay for what you render.** Each component ships its own stylesheet, imported by the component itself, so your bundler drops the CSS for everything you don't use — the same way it drops the JS. Importing `…/styles` gives you the tokens and reset (4.6 kB gzipped); each component adds its own on top.
-
-Installed, the SCSS is already compiled, so the two-file seam isn't available to you — retheme by overriding the custom properties *after* importing the stylesheet. Every token in the next section is fair game:
-
-```css
-@import '@kismet-ux/constellation/styles';
-
-:root {
-  --primary-main: #7c3aed;
-  --primary-emphasis: #6d28d9;
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-}
-:root:not([data-theme='light']) { /* your dark overrides */ }
-```
-
----
-
-## Making it yours
-
-### 1. Color
-
-Everything routes through two files:
-
-| File | Holds |
-|---|---|
-| `src/styles/_palette.scss` | The raw ramps — `$sky-500`, `$slate-900`, … |
-| `src/styles/_theme.scss` | The mapping to CSS custom properties, light and dark |
-
-No component names a color. Change the ramps and the entire library follows.
-
-Seven theme families ship by default — `primary` (sky), `secondary` (violet), `info`, `success` (emerald), `warning` (amber), `destructive` (rose), `slate` — and every one exposes the same ten roles:
-
-```
-main · dark · emphasis · light · contrast
-focus · focus-visible · hover · outlined-border · selected
-```
-
-That uniformity is what lets any component accept a `theme` prop and behave predictably:
-
-```tsx
-<Button theme={'success'}>Save</Button>
-<Chip theme={'warning'}>Pending</Chip>
-<StatCard theme={'info'} label={'Queries'} value={42} />
-```
-
-Two ramp shapes, chosen on purpose:
-
-- **Alpha tints (25–400)** for states that sit over an unknown surface — hover, selected, focus. They compose correctly on light and dark without knowing what's behind them.
-- **Solid shades (500–950)** for text and fills, where the value must be exact.
-
-`$info-*` is the per-channel midpoint of `$slate-*` and `$sky-*`, shade for shade. Same hue as primary at lower chroma — which is what makes "info" read as the quiet informational tone rather than a competing accent. If you re-pick the primary, regenerate info the same way.
-
-### 2. Type
-
-`--font-sans`, `--font-serif` and `--font-mono` resolve to system stacks. Nothing to download, nothing to license, no flash of unstyled text. To brand it, override one variable:
-
-```scss
-:root { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; }
-```
-
-`src/styles/_fonts.scss` has a `font-face` mixin and notes for self-hosting.
-
-### 3. Brand
-
-`<Logo />` is a geometric mark plus a **text** wordmark — no baked-in SVG paths:
-
-```tsx
-<Logo name={'Acme'} />                   {/* rename */}
-<Logo name={'Acme'} mark={<YourMark />} />  {/* or replace the glyph */}
-<Logo name={null} />                     {/* mark only */}
-```
-
-Colors come from `--logo-mark` and `--logo-fill`. Inside a collapsed sidebar the wordmark folds away and the mark holds its place.
-
-### 4. Space, radius, elevation
-
-- `--size-1` … `--size-12`, where `--size-N` is N ÷ 2 rem. No magic numbers.
-- `--radius-xs|sm|md|lg|xl|2xl|full`.
-- 24 elevation levels. In light mode height is carried by a two-layer key + ambient shadow; in dark mode, where shadow reads as nothing, by a progressively lighter surface. Both ramps are generated in `_theme.scss` — change the formula once, not 24 times.
-
----
-
-## Routing
-
-The library never imports a router. Out of the box `Link` renders a plain `<a>` and navigation is a full page load — correct everywhere, just not SPA-fast.
-
-Wrap the app once and every link, breadcrumb, sidebar item and menu action upgrades together:
-
-```tsx
-import { RouterProvider } from '@kismet-ux/constellation/navigation';
-import { Link, useNavigate } from 'react-router-dom';
-
-<RouterProvider linkComponent={Link} navigate={useNavigate()}>
-  <App />
-</RouterProvider>
-```
-
-Works the same with Next, TanStack Router, or anything else that exposes a link component and an imperative navigate.
-
-Components take data, never globals: `AppShell` takes `defaultSidebarOpen`, `NavUser` takes `user` plus `onSettings` / `onLogout`.
-
----
-
-## Layout of the repo
-
-```
-src/
-  styles/      ← _palette.scss + _theme.scss: the theming seam
-  ui/          Button, Dialog, Table, Chip, Alert, StatCard, …
-  form/        Input, Select, Checkbox, DatePicker, Label
-  layout/      AppShell, Sidebar, Container, Row, Column, Grid
-  navigation/  Link, RouterProvider, Breadcrumbs, DropdownMenu, Sheet
-  typography/  Typography, Heading, TruncatedText
-  settings/    appearance switchers
-  user/        UserInfo, UserMenuContent
-  brand/       Logo
-  hooks/       useAppearance, useBreakpoint, useAlerts, useTableSorting, …
-dev/           the preview harness you see at localhost:5173
-```
-
-Each component is a folder: `component-name.tsx` + `component-name.module.scss` + `index.ts`.
-
----
-
-## Developing it against a real app
-
-Publishing a version for every small change is how versioning goes off the rails. Instead, point a consuming app at a sibling checkout:
-
-```
-projects/
-  kismet-constellation/   ← this repo
-  your-app/
-```
-
-In the app's `vite.config.js`:
-
-```js
-import constellationLocal from '@kismet-ux/constellation/vite';
-
-export default defineConfig({
-  plugins: [constellationLocal({ root: '../kismet-constellation' }), react()],
-});
-```
-
-…and in its `.env.local`:
-
-```
-CONSTELLATION_LOCAL=true
-```
-
-The plugin builds resolve aliases from this package's own `exports` map, so there is no alias list to maintain. It aliases to `dist`, so keep a build running:
-
-```bash
-npx rollup -c --watch
-```
-
-`__CONSTELLATION_LOCAL__` is defined as `true` while it is on, which is what `DevIndicator` reads to show its badge. With the variable unset the plugin is inert and the app uses the published package, so nothing depends on the checkout existing.
-
-⚠️ **The plugin appends to `server.fs.allow`, and must.** Setting that option at all replaces Vite's default, so listing only the library root locks the consuming app out of its own source — every module 403s and the page renders blank with no useful error.
-
-## Commands
-
-```bash
-npm run dev        # dev harness
-npm run build      # bundle + type declarations → dist/
-npm run typecheck  # tsc --noEmit
-npm run lint       # eslint --fix
-npm run stylelint  # alphabetical SCSS property order
-npm run format     # prettier
-```
-
----
-
-## Notes for agents
-
-`AGENTS.md` documents the architecture and conventions; `.claude/skills/constellation-*` carry per-category component references. Load the relevant skill before editing in a category.
+# Kismet Constellation
+
+A themeable React component library. ~60 components, light/dark out of the box, and a design-token system where **one file holds every color decision**.
+
+No router dependency, no bundled fonts, no registry, no brand baked in — it's meant to be copied into a project and made yours.
+
+```bash
+npm install
+npm run dev     # → http://localhost:5173
+```
+
+The dev server opens on **Foundations**, a live showcase of the whole token system: color families, type scale, spacing, radius, elevation, and components in context. Every other component has its own preview page in the sidebar.
+
+Append `?theme=light`, `?theme=dark`, or `?theme=system` to pin the mode.
+
+---
+
+## Two ways to use it
+
+**Copy the repo** (what it's designed for) — you own the source, and rebranding means editing `_palette.scss` and `_theme.scss` as described below.
+
+**Install it** as a dependency:
+
+```bash
+npm install @kismet-ux/constellation
+```
+
+```tsx
+import '@kismet-ux/constellation/styles';
+import { Button } from '@kismet-ux/constellation/ui';
+```
+
+**You only pay for what you render.** Each component ships its own stylesheet, imported by the component itself, so your bundler drops the CSS for everything you don't use — the same way it drops the JS. Importing `…/styles` gives you the tokens and reset (4.6 kB gzipped); each component adds its own on top.
+
+Installed, the SCSS is already compiled, so the two-file seam isn't available to you — retheme by overriding the custom properties *after* importing the stylesheet. Every token in the next section is fair game:
+
+```css
+@import '@kismet-ux/constellation/styles';
+
+:root {
+  --primary-main: #7c3aed;
+  --primary-emphasis: #6d28d9;
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+:root:not([data-theme='light']) { /* your dark overrides */ }
+```
+
+---
+
+## Making it yours
+
+### 1. Color
+
+Everything routes through two files:
+
+| File | Holds |
+|---|---|
+| `src/styles/_palette.scss` | The raw ramps — `$sky-500`, `$slate-900`, … |
+| `src/styles/_theme.scss` | The mapping to CSS custom properties, light and dark |
+
+No component names a color. Change the ramps and the entire library follows.
+
+Seven theme families ship by default — `primary` (sky), `secondary` (violet), `info`, `success` (emerald), `warning` (amber), `destructive` (rose), `slate` — and every one exposes the same ten roles:
+
+```
+main · dark · emphasis · light · contrast
+focus · focus-visible · hover · outlined-border · selected
+```
+
+That uniformity is what lets any component accept a `theme` prop and behave predictably:
+
+```tsx
+<Button theme={'success'}>Save</Button>
+<Chip theme={'warning'}>Pending</Chip>
+<StatCard theme={'info'} label={'Queries'} value={42} />
+```
+
+Two ramp shapes, chosen on purpose:
+
+- **Alpha tints (25–400)** for states that sit over an unknown surface — hover, selected, focus. They compose correctly on light and dark without knowing what's behind them.
+- **Solid shades (500–950)** for text and fills, where the value must be exact.
+
+`$info-*` is the per-channel midpoint of `$slate-*` and `$sky-*`, shade for shade. Same hue as primary at lower chroma — which is what makes "info" read as the quiet informational tone rather than a competing accent. If you re-pick the primary, regenerate info the same way.
+
+### 2. Type
+
+`--font-sans`, `--font-serif` and `--font-mono` resolve to system stacks. Nothing to download, nothing to license, no flash of unstyled text. To brand it, override one variable:
+
+```scss
+:root { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; }
+```
+
+`src/styles/_fonts.scss` has a `font-face` mixin and notes for self-hosting.
+
+A brand with a separate display face sets two more, both unset by default — every heading (`h1`–`h6`) follows:
+
+```scss
+:root {
+  --font-display: 'Fraunces', ui-serif, Georgia, serif;
+  --font-display-weight: 700;
+}
+```
+
+### 3. Brand
+
+`<Logo />` is a geometric mark plus a **text** wordmark — no baked-in SVG paths:
+
+```tsx
+<Logo name={'Acme'} />                   {/* rename */}
+<Logo name={'Acme'} mark={<YourMark />} />  {/* or replace the glyph */}
+<Logo name={null} />                     {/* mark only */}
+```
+
+Colors come from `--logo-mark` and `--logo-fill`. Inside a collapsed sidebar the wordmark folds away and the mark holds its place.
+
+### 4. Space, radius, elevation
+
+- `--size-1` … `--size-12`, where `--size-N` is N ÷ 2 rem. No magic numbers.
+- `--radius-xs|sm|md|lg|xl|2xl|full`.
+- `--button-radius` and `--field-radius` re-cut every button and form field at once. Both are unset by default (buttons fall back to `--size-5`, fields to a `36px` pill).
+- Fields take `appearance={'outlined' | 'filled' | 'underline'}`, or set `data-field-appearance` on `<html>` for the whole app. `--field-filled-background` picks the filled ground.
+- 24 elevation levels. In light mode height is carried by a two-layer key + ambient shadow; in dark mode, where shadow reads as nothing, by a progressively lighter surface. Both ramps are generated in `_theme.scss` — change the formula once, not 24 times.
+
+---
+
+## Routing
+
+The library never imports a router. Out of the box `Link` renders a plain `<a>` and navigation is a full page load — correct everywhere, just not SPA-fast.
+
+Wrap the app once and every link, breadcrumb, sidebar item and menu action upgrades together:
+
+```tsx
+import { RouterProvider } from '@kismet-ux/constellation/navigation';
+import { Link, useNavigate } from 'react-router-dom';
+
+<RouterProvider linkComponent={Link} navigate={useNavigate()}>
+  <App />
+</RouterProvider>
+```
+
+Works the same with Next, TanStack Router, or anything else that exposes a link component and an imperative navigate.
+
+Components take data, never globals: `AppShell` takes `defaultSidebarOpen`, `NavUser` takes `user` plus `onSettings` / `onLogout`.
+
+---
+
+## Layout of the repo
+
+```
+src/
+  styles/      ← _palette.scss + _theme.scss: the theming seam
+  ui/          Button, Dialog, Table, Chip, Alert, StatCard, …
+  form/        Input, Select, Checkbox, DatePicker, Label
+  layout/      AppShell, Sidebar, Container, Row, Column, Grid
+  navigation/  Link, RouterProvider, Breadcrumbs, DropdownMenu, Sheet
+  typography/  Typography, Heading, TruncatedText
+  settings/    appearance switchers
+  user/        UserInfo, UserMenuContent
+  brand/       Logo
+  hooks/       useAppearance, useBreakpoint, useAlerts, useTableSorting, …
+dev/           the preview harness you see at localhost:5173
+```
+
+Each component is a folder: `component-name.tsx` + `component-name.module.scss` + `index.ts`.
+
+---
+
+## Developing it against a real app
+
+Publishing a version for every small change is how versioning goes off the rails. Instead, point a consuming app at a sibling checkout:
+
+```
+projects/
+  kismet-constellation/   ← this repo
+  your-app/
+```
+
+In the app's `vite.config.js`:
+
+```js
+import constellationLocal from '@kismet-ux/constellation/vite';
+
+export default defineConfig({
+  plugins: [constellationLocal({ root: '../kismet-constellation' }), react()],
+});
+```
+
+…and in its `.env.local`:
+
+```
+CONSTELLATION_LOCAL=true
+```
+
+The plugin builds resolve aliases from this package's own `exports` map, so there is no alias list to maintain. It aliases to `dist`, so keep a build running:
+
+```bash
+npx rollup -c --watch
+```
+
+`__CONSTELLATION_LOCAL__` is defined as `true` while it is on, which is what `DevIndicator` reads to show its badge. With the variable unset the plugin is inert and the app uses the published package, so nothing depends on the checkout existing.
+
+⚠️ **The plugin appends to `server.fs.allow`, and must.** Setting that option at all replaces Vite's default, so listing only the library root locks the consuming app out of its own source — every module 403s and the page renders blank with no useful error.
+
+## Commands
+
+```bash
+npm run dev        # dev harness
+npm run build      # bundle + type declarations → dist/
+npm run typecheck  # tsc --noEmit
+npm run lint       # eslint --fix
+npm run stylelint  # alphabetical SCSS property order
+npm run format     # prettier
+```
+
+---
+
+## Notes for agents
+
+`AGENTS.md` documents the architecture and conventions; `.claude/skills/constellation-*` carry per-category component references. Load the relevant skill before editing in a category.

package/dist/form/Checkbox/checkbox.js

@@ -1,65 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Label } from '../Label/label.js';
+import { Typography } from '../../typography/Typography/typography.js';
 import cn from 'clsx';
-import '../Input/input.js';
-import * as React from 'react';
-import '../../layout/Sidebar/sidebar-context.js';
-import '../../ui/Alert/alert-context.js';
-import '../../ui/Table/table-sort-context.js';
-import '../../layout/Skeleton/skeleton.css';
-import '../../navigation/Sheet/sheet.js';
-import '../../ui/Button/button.js';
-import '../../ui/Tooltip/tooltip.js';
 import { CheckIcon } from 'lucide-react';
-import '../../internal/slot.js';
-import '../../layout/Sidebar/sidebar-variants.js';
-import '../../layout/Sidebar/sidebar.css';
-import '../../layout/AppContent/app-content.css';
-import '../../layout/AppContentFooter/app-content-footer.css';
-import '../../layout/AppContentMain/app-content-main.css';
-import { Row } from '../../layout/Row/row.js';
-import '../../navigation/Link/link.js';
-import { Typography } from '../../typography/Typography/typography.js';
-import '../../layout/AppFooter/app-footer.css';
-import '../../navigation/Router/router-context.js';
-import '../../ui/Separator/separator.js';
-import 'react-dom';
-import '../../typography/TruncatedText/truncated-text.js';
-import '../../navigation/Breadcrumbs/breadcrumbs.css';
-import '../../navigation/DropdownMenu/dropdown-menu.js';
-import '../../ui/Avatar/avatar.js';
-import '../../user/UserInfo/user-info.css';
-import '../../navigation/NavUser/nav-user.css';
-import '../../ui/Alert/alert.js';
-import '../../ui/Alert/alert.css';
-import '../../ui/Chip/chip.js';
-import '../../ui/ChipSelect/chip-select.js';
-import '../../ui/CodeBlock/code-block.js';
-import '../../ui/DevIndicator/dev-indicator.css';
-import '../../ui/Dialog/dialog.js';
-import '../../ui/EmptyState/empty-state.js';
-import '../../ui/Icon/icon.js';
-import '../../ui/List/list.js';
-import '../../ui/Pagination/pagination.js';
-import '../../ui/ProgressBar/progress-bar.js';
-import '../../ui/StatCard/stat-card.js';
-import '../../ui/StatusDot/status-dot.js';
-import '../../ui/StatusDot/status-dot-variants.js';
-import '../../ui/StepProgress/step-progress.js';
-import '../../ui/SwipeRow/swipe-row.js';
-import '../../ui/Switch/switch.js';
-import '../../ui/Table/table.js';
-import '../../ui/TableActionCell/table-action-cell.js';
-import '../../ui/TableToolbar/table-toolbar.js';
-import '../../ui/Toggle/toggle.js';
-import '../../ui/ToggleGroup/toggle-group.js';
-import '../../settings/AppearanceTabs/appearance-tabs.css';
-import '../../layout/AppSidebarHeader/app-sidebar-header.css';
-import '../../layout/Collapse/collapse.js';
-import { Column } from '../../layout/Column/column.js';
-import '../../layout/Container/container.js';
-import '../../layout/Grid/grid.js';
+import * as React from 'react';
 import s from './checkbox.module.scss.js';
+import { Column } from '../../layout/Column/column.js';
+import { Row } from '../../layout/Row/row.js';
 
 const Checkbox = React.forwardRef(({ className, id, theme = 'primary', destructive = false, size = 'md', checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, value = 'on', name, required, label, helperText, ['aria-invalid']: ariaInvalid, ['aria-describedby']: ariaDescribedBy, onClick, onKeyDown, ...props }, ref) => {
     const isControlled = controlledChecked !== undefined;

package/dist/form/Checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/form/Checkbox/checkbox.tsx"],"sourcesContent":["import { Label } from '@constellation/form/Label';\nimport { Column, Row } from '@constellation/layout';\nimport { type FormTheme } from '@constellation/types';\nimport { Typography } from '@constellation/typography/Typography';\nimport cn from 'clsx';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './checkbox.module.scss';\n\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'value' | 'defaultValue' | 'defaultChecked'\n> {\n  theme?: FormTheme;\n  destructive?: boolean;\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n  value?: string;\n  name?: string;\n  required?: boolean;\n  /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */\n  label?: React.ReactNode;\n  /** Optional helper / validation text rendered beneath the checkbox + label row. */\n  helperText?: React.ReactNode;\n  /**\n   * Box size. `md` (default) is the form size; `sm` suits a dense list row and\n   * `lg` a primary confirm. The tick and the helper-text indent follow it.\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      id,\n      theme = 'primary',\n      destructive = false,\n      size = 'md',\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      disabled,\n      value = 'on',\n      name,\n      required,\n      label,\n      helperText,\n      ['aria-invalid']: ariaInvalid,\n      ['aria-describedby']: ariaDescribedBy,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const generatedId = React.useId();\n    const checkboxId = id ?? generatedId;\n    const helperId = helperText ? `${checkboxId}-helper` : undefined;\n    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;\n\n    const dataState =\n      checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n    const toggle = () => {\n      if (disabled) return;\n      const next = checked === 'indeterminate' ? true : !checked;\n      if (!isControlled) {\n        setInternalChecked(next);\n      }\n      onCheckedChange?.(next);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (e.defaultPrevented) return;\n      toggle();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ') {\n        e.preventDefault();\n        toggle();\n      }\n    };\n\n    const button = (\n      <button\n        ref={ref}\n        id={checkboxId}\n        type={'button'}\n        role={'checkbox'}\n        aria-checked={checked === 'indeterminate' ? 'mixed' : checked}\n        aria-invalid={destructive ? 'true' : ariaInvalid}\n        aria-required={required}\n        aria-describedby={describedBy}\n        data-slot={'checkbox'}\n        data-state={dataState}\n        disabled={disabled}\n        className={cn(\n          s.checkbox,\n          s[`theme-${theme}`],\n          size !== 'md' && s[`size-${size}`],\n          className,\n        )}\n        {...props}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {checked ? (\n          <span data-slot={'checkbox-indicator'} className={s.indicator}>\n            <CheckIcon className={s.icon} />\n          </span>\n        ) : null}\n      </button>\n    );\n\n    // Match native <input type='checkbox'> form-submission semantics: an\n    // unchecked (or indeterminate) box is omitted entirely from the submission,\n    // not present-but-empty. Only emit the hidden input when actually checked.\n    const hiddenInput =\n      name && checked === true ? <input type={'hidden'} name={name} value={value} /> : null;\n\n    if (label === undefined && helperText === undefined) {\n      return (\n        <>\n          {button}\n          {hiddenInput}\n        </>\n      );\n    }\n\n    return (\n      <Column data-slot={'checkbox-field'} gap={1}>\n        <Row data-slot={'checkbox-row'} gap={1} align={'center'}>\n          {button}\n          {label !== undefined ? (\n            <Label\n              data-slot={'checkbox-label'}\n              htmlFor={checkboxId}\n              className={cn(s['label'], disabled && s['label--disabled'])}\n              theme={destructive ? 'destructive' : 'inherit'}\n            >\n              {label}\n            </Label>\n          ) : null}\n        </Row>\n        {helperText !== undefined ? (\n          <Typography\n            data-slot={'checkbox-helper-text'}\n            id={helperId}\n            variant={'caption'}\n            theme={destructive ? 'destructive' : 'muted'}\n            className={s['helper-text']}\n          >\n            {helperText}\n          </Typography>\n        ) : null}\n        {hiddenInput}\n      </Column>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/form/Checkbox/checkbox.tsx"],"sourcesContent":["import { Label } from '@constellation/form/Label';\nimport { Column, Row } from '@constellation/layout';\nimport { type FormTheme } from '@constellation/types';\nimport { Typography } from '@constellation/typography/Typography';\nimport cn from 'clsx';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './checkbox.module.scss';\n\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'value' | 'defaultValue' | 'defaultChecked'\n> {\n  theme?: FormTheme;\n  destructive?: boolean;\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n  value?: string;\n  name?: string;\n  required?: boolean;\n  /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */\n  label?: React.ReactNode;\n  /** Optional helper / validation text rendered beneath the checkbox + label row. */\n  helperText?: React.ReactNode;\n  /**\n   * Box size. `md` (default) is the form size; `sm` suits a dense list row and\n   * `lg` a primary confirm. The tick and the helper-text indent follow it.\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      id,\n      theme = 'primary',\n      destructive = false,\n      size = 'md',\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      disabled,\n      value = 'on',\n      name,\n      required,\n      label,\n      helperText,\n      ['aria-invalid']: ariaInvalid,\n      ['aria-describedby']: ariaDescribedBy,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const generatedId = React.useId();\n    const checkboxId = id ?? generatedId;\n    const helperId = helperText ? `${checkboxId}-helper` : undefined;\n    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;\n\n    const dataState =\n      checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n    const toggle = () => {\n      if (disabled) return;\n      const next = checked === 'indeterminate' ? true : !checked;\n      if (!isControlled) {\n        setInternalChecked(next);\n      }\n      onCheckedChange?.(next);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (e.defaultPrevented) return;\n      toggle();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ') {\n        e.preventDefault();\n        toggle();\n      }\n    };\n\n    const button = (\n      <button\n        ref={ref}\n        id={checkboxId}\n        type={'button'}\n        role={'checkbox'}\n        aria-checked={checked === 'indeterminate' ? 'mixed' : checked}\n        aria-invalid={destructive ? 'true' : ariaInvalid}\n        aria-required={required}\n        aria-describedby={describedBy}\n        data-slot={'checkbox'}\n        data-state={dataState}\n        disabled={disabled}\n        className={cn(\n          s.checkbox,\n          s[`theme-${theme}`],\n          size !== 'md' && s[`size-${size}`],\n          className,\n        )}\n        {...props}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {checked ? (\n          <span data-slot={'checkbox-indicator'} className={s.indicator}>\n            <CheckIcon className={s.icon} />\n          </span>\n        ) : null}\n      </button>\n    );\n\n    // Match native <input type='checkbox'> form-submission semantics: an\n    // unchecked (or indeterminate) box is omitted entirely from the submission,\n    // not present-but-empty. Only emit the hidden input when actually checked.\n    const hiddenInput =\n      name && checked === true ? <input type={'hidden'} name={name} value={value} /> : null;\n\n    if (label === undefined && helperText === undefined) {\n      return (\n        <>\n          {button}\n          {hiddenInput}\n        </>\n      );\n    }\n\n    return (\n      <Column data-slot={'checkbox-field'} gap={1}>\n        <Row data-slot={'checkbox-row'} gap={1} align={'center'}>\n          {button}\n          {label !== undefined ? (\n            <Label\n              data-slot={'checkbox-label'}\n              htmlFor={checkboxId}\n              className={cn(s['label'], disabled && s['label--disabled'])}\n              theme={destructive ? 'destructive' : 'inherit'}\n            >\n              {label}\n            </Label>\n          ) : null}\n        </Row>\n        {helperText !== undefined ? (\n          <Typography\n            data-slot={'checkbox-helper-text'}\n            id={helperId}\n            variant={'caption'}\n            theme={destructive ? 'destructive' : 'muted'}\n            className={s['helper-text']}\n          >\n            {helperText}\n          </Typography>\n        ) : null}\n        {hiddenInput}\n      </Column>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/form/DatePicker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { type DatePickerProps } from '@constellation/types';
 import * as React from 'react';
-declare function DatePicker({ value: valueProp, defaultValue, onChange, label, helperText, error, disabled, sizeVariant, placeholder, min, max, required, id, className, name, }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ value: valueProp, defaultValue, onChange, label, helperText, error, appearance, disabled, sizeVariant, placeholder, min, max, required, id, className, name, }: DatePickerProps): React.JSX.Element;
 export { DatePicker };
 //# sourceMappingURL=date-picker.d.ts.map

package/dist/form/DatePicker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/form/DatePicker/date-picker.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAK5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,iBAAS,UAAU,CAAC,EAClB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAa,EACb,QAAgB,EAChB,WAAW,EACX,WAAW,EACX,GAAG,EACH,GAAG,EACH,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,IAAI,GACL,EAAE,eAAe,qBAocjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/form/DatePicker/date-picker.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAK5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,iBAAS,UAAU,CAAC,EAClB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAa,EACb,UAAU,EACV,QAAgB,EAChB,WAAW,EACX,WAAW,EACX,GAAG,EACH,GAAG,EACH,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,IAAI,GACL,EAAE,eAAe,qBA0cjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}