@kismet-ux/constellation 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrew Loehr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# 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';
+```
+
+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`.
+
+---
+
+## 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/brand/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logo';
+//# sourceMappingURL=index.d.ts.map

package/dist/brand/Logo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/brand/Logo/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/brand/Logo/logo.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface LogoProps {
+    className?: string;
+    /** Overall mark height in px. Defaults to `--size-4` (2rem). */
+    height?: number;
+    /** Wordmark text. Pass `null` to render the mark alone. */
+    name?: React.ReactNode;
+    /** Replace the default glyph entirely (any SVG/ReactNode). */
+    mark?: React.ReactNode;
+    /** Accessible label. Defaults to `name` when that is a string. */
+    title?: string;
+}
+/**
+ * Brand lockup: a constellation mark plus a text wordmark.
+ *
+ * The wordmark is real text rather than baked-into-SVG paths, so a consuming
+ * project rebrands by passing `name` — no vector editing, no font subsetting.
+ * The mark is likewise swappable via `mark`. Colors read from `--logo-mark`
+ * and `--logo-fill`, so a brand override is two custom properties.
+ */
+declare function Logo({ className, height, name, mark, title }: LogoProps): React.JSX.Element;
+export { Logo };
+//# sourceMappingURL=logo.d.ts.map

package/dist/brand/Logo/logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../src/brand/Logo/logo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAsB,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,qBAkBlF;AAsBD,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/brand/Logo/logo.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'clsx';
+import s from './logo.module.scss.js';
+
+/**
+ * Brand lockup: a constellation mark plus a text wordmark.
+ *
+ * The wordmark is real text rather than baked-into-SVG paths, so a consuming
+ * project rebrands by passing `name` — no vector editing, no font subsetting.
+ * The mark is likewise swappable via `mark`. Colors read from `--logo-mark`
+ * and `--logo-fill`, so a brand override is two custom properties.
+ */
+function Logo({ className, height, name = 'Constellation', mark, title }) {
+    const style = height ? { '--logo-height': `${height}px` } : undefined;
+    const label = title ?? (typeof name === 'string' ? name : undefined);
+    return (jsxs("span", { "data-slot": 'logo', className: cn(s.logo, className), style: style, role: 'img', "aria-label": label, children: [jsx("span", { className: s.mark, "aria-hidden": true, children: mark ?? jsx(DefaultMark, {}) }), name ? jsx("span", { className: s.wordmark, children: name }) : null] }));
+}
+/**
+ * A five-star asterism: links drawn first, stars on top, the lead star largest.
+ * Deliberately sparse so it still reads as a constellation at 16px in a
+ * collapsed sidebar, where a busier mark turns to mush.
+ */
+function DefaultMark() {
+    return (jsxs("svg", { viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsx("path", { d: 'M6 13 15.5 16.5 24 7', className: s['mark-link'] }), jsx("path", { d: 'M15.5 16.5 12 26', className: s['mark-link'] }), jsx("path", { d: 'M15.5 16.5 26 22', className: s['mark-link'] }), jsx("circle", { cx: '24', cy: '7', r: '4', className: s['mark-star-lead'] }), jsx("circle", { cx: '15.5', cy: '16.5', r: '2.5', className: s['mark-star'] }), jsx("circle", { cx: '6', cy: '13', r: '1.75', className: s['mark-star-dim'] }), jsx("circle", { cx: '12', cy: '26', r: '1.75', className: s['mark-star-dim'] }), jsx("circle", { cx: '26', cy: '22', r: '1.75', className: s['mark-star-dim'] })] }));
+}
+
+export { Logo };
+//# sourceMappingURL=logo.js.map

package/dist/brand/Logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sources":["../../../src/brand/Logo/logo.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\nimport s from './logo.module.scss';\n\nexport interface LogoProps {\n  className?: string;\n  /** Overall mark height in px. Defaults to `--size-4` (2rem). */\n  height?: number;\n  /** Wordmark text. Pass `null` to render the mark alone. */\n  name?: React.ReactNode;\n  /** Replace the default glyph entirely (any SVG/ReactNode). */\n  mark?: React.ReactNode;\n  /** Accessible label. Defaults to `name` when that is a string. */\n  title?: string;\n}\n\n/**\n * Brand lockup: a constellation mark plus a text wordmark.\n *\n * The wordmark is real text rather than baked-into-SVG paths, so a consuming\n * project rebrands by passing `name` — no vector editing, no font subsetting.\n * The mark is likewise swappable via `mark`. Colors read from `--logo-mark`\n * and `--logo-fill`, so a brand override is two custom properties.\n */\nfunction Logo({ className, height, name = 'Constellation', mark, title }: LogoProps) {\n  const style = height ? ({ '--logo-height': `${height}px` } as React.CSSProperties) : undefined;\n  const label = title ?? (typeof name === 'string' ? name : undefined);\n\n  return (\n    <span\n      data-slot={'logo'}\n      className={cn(s.logo, className)}\n      style={style}\n      role={'img'}\n      aria-label={label}\n    >\n      <span className={s.mark} aria-hidden={true}>\n        {mark ?? <DefaultMark />}\n      </span>\n      {name ? <span className={s.wordmark}>{name}</span> : null}\n    </span>\n  );\n}\n\n/**\n * A five-star asterism: links drawn first, stars on top, the lead star largest.\n * Deliberately sparse so it still reads as a constellation at 16px in a\n * collapsed sidebar, where a busier mark turns to mush.\n */\nfunction DefaultMark() {\n  return (\n    <svg viewBox={'0 0 32 32'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>\n      <path d={'M6 13 15.5 16.5 24 7'} className={s['mark-link']} />\n      <path d={'M15.5 16.5 12 26'} className={s['mark-link']} />\n      <path d={'M15.5 16.5 26 22'} className={s['mark-link']} />\n      <circle cx={'24'} cy={'7'} r={'4'} className={s['mark-star-lead']} />\n      <circle cx={'15.5'} cy={'16.5'} r={'2.5'} className={s['mark-star']} />\n      <circle cx={'6'} cy={'13'} r={'1.75'} className={s['mark-star-dim']} />\n      <circle cx={'12'} cy={'26'} r={'1.75'} className={s['mark-star-dim']} />\n      <circle cx={'26'} cy={'22'} r={'1.75'} className={s['mark-star-dim']} />\n    </svg>\n  );\n}\n\nexport { Logo };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAgBA;;;;;;;AAOG;AACH,SAAS,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAG,eAAe,EAAE,IAAI,EAAE,KAAK,EAAa,EAAA;AACjF,IAAA,MAAM,KAAK,GAAG,MAAM,GAAI,EAAE,eAAe,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,EAA0B,GAAG,SAAS;AAC9F,IAAA,MAAM,KAAK,GAAG,KAAK,KAAK,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAC;AAEpE,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EACa,MAAM,EACjB,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAChC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,EAAA,YAAA,EACC,KAAK,EAAA,QAAA,EAAA,CAEjBC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAC,CAAC,IAAI,EAAA,aAAA,EAAe,IAAI,EAAA,QAAA,EACvC,IAAI,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAA,CAAG,EAAA,CACnB,EACN,IAAI,GAAGA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,GAAG,IAAI,CAAA,EAAA,CACpD;AAEX;AAEA;;;;AAIG;AACH,SAAS,WAAW,GAAA;AAClB,IAAA,QACED,IAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,4BAA4B,EAAA,QAAA,EAAA,CAC1EC,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,sBAAsB,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,GAAI,EAC9DA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAA,CAAI,EAC1DA,cAAM,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAA,CAAI,EAC1DA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAA,CAAI,EACrEA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAA,CAAI,EACvEA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,GAAI,EACvEA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAAA,CAAI,EACxEA,gBAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAAA,CAAI,CAAA,EAAA,CACpE;AAEV;;"}

package/dist/brand/Logo/logo.module.scss.js

@@ -0,0 +1,4 @@
+var s = {"logo":"logo-module_logo__JNon2","mark":"logo-module_mark__hFkmQ","mark-link":"logo-module_mark-link__uFFv5","mark-star":"logo-module_mark-star__hbpwu","mark-star-dim":"logo-module_mark-star-dim__8wZWz","mark-star-lead":"logo-module_mark-star-lead__AAWv4","wordmark":"logo-module_wordmark__GnfAC"};
+
+export { s as default };
+//# sourceMappingURL=logo.module.scss.js.map

package/dist/brand/Logo/logo.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/brand/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Logo';
+//# sourceMappingURL=index.d.ts.map

package/dist/brand/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/brand/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/brand.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface LogoProps {
+    className?: string;
+    /** Overall mark height in px. Defaults to `--size-4` (2rem). */
+    height?: number;
+    /** Wordmark text. Pass `null` to render the mark alone. */
+    name?: React.ReactNode;
+    /** Replace the default glyph entirely (any SVG/ReactNode). */
+    mark?: React.ReactNode;
+    /** Accessible label. Defaults to `name` when that is a string. */
+    title?: string;
+}
+/**
+ * Brand lockup: a constellation mark plus a text wordmark.
+ *
+ * The wordmark is real text rather than baked-into-SVG paths, so a consuming
+ * project rebrands by passing `name` — no vector editing, no font subsetting.
+ * The mark is likewise swappable via `mark`. Colors read from `--logo-mark`
+ * and `--logo-fill`, so a brand override is two custom properties.
+ */
+declare function Logo({ className, height, name, mark, title }: LogoProps): React.JSX.Element;
+
+export { Logo };
+export type { LogoProps };

package/dist/brand.js

@@ -0,0 +1,2 @@
+export { Logo } from './brand/Logo/logo.js';
+//# sourceMappingURL=brand.js.map

package/dist/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/Checkbox/checkbox.d.ts

@@ -0,0 +1,20 @@
+import { type FormTheme } from '@constellation/types';
+import * as React from 'react';
+type CheckedState = boolean | 'indeterminate';
+export interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'defaultChecked'> {
+    theme?: FormTheme;
+    destructive?: boolean;
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */
+    label?: React.ReactNode;
+    /** Optional helper / validation text rendered beneath the checkbox + label row. */
+    helperText?: React.ReactNode;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/form/Checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/form/Checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,gBAAgB,CACzD;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mFAAmF;IACnF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,yFAmIb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/form/Checkbox/checkbox.js

@@ -0,0 +1,57 @@
+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 { CheckIcon } from 'lucide-react';
+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, 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;
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const generatedId = React.useId();
+    const checkboxId = id ?? generatedId;
+    const helperId = helperText ? `${checkboxId}-helper` : undefined;
+    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+    const dataState = checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';
+    const toggle = () => {
+        if (disabled)
+            return;
+        const next = checked === 'indeterminate' ? true : !checked;
+        if (!isControlled) {
+            setInternalChecked(next);
+        }
+        onCheckedChange?.(next);
+    };
+    const handleClick = (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented)
+            return;
+        toggle();
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.key === ' ') {
+            e.preventDefault();
+            toggle();
+        }
+    };
+    const button = (jsx("button", { ref: ref, id: checkboxId, type: 'button', role: 'checkbox', "aria-checked": checked === 'indeterminate' ? 'mixed' : checked, "aria-invalid": destructive ? 'true' : ariaInvalid, "aria-required": required, "aria-describedby": describedBy, "data-slot": 'checkbox', "data-state": dataState, disabled: disabled, className: cn(s.checkbox, s[`theme-${theme}`], className), ...props, onClick: handleClick, onKeyDown: handleKeyDown, children: checked ? (jsx("span", { "data-slot": 'checkbox-indicator', className: s.indicator, children: jsx(CheckIcon, { className: s.icon }) })) : null }));
+    // Match native <input type='checkbox'> form-submission semantics: an
+    // unchecked (or indeterminate) box is omitted entirely from the submission,
+    // not present-but-empty. Only emit the hidden input when actually checked.
+    const hiddenInput = name && checked === true ? jsx("input", { type: 'hidden', name: name, value: value }) : null;
+    if (label === undefined && helperText === undefined) {
+        return (jsxs(Fragment, { children: [button, hiddenInput] }));
+    }
+    return (jsxs(Column, { "data-slot": 'checkbox-field', gap: 1, children: [jsxs(Row, { "data-slot": 'checkbox-row', gap: 1, align: 'center', children: [button, label !== undefined ? (jsx(Label, { "data-slot": 'checkbox-label', htmlFor: checkboxId, className: cn(s['label'], disabled && s['label--disabled']), theme: destructive ? 'destructive' : 'inherit', children: label })) : null] }), helperText !== undefined ? (jsx(Typography, { "data-slot": 'checkbox-helper-text', id: helperId, variant: 'caption', theme: destructive ? 'destructive' : 'muted', className: s['helper-text'], children: helperText })) : null, hiddenInput] }));
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +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\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      id,\n      theme = 'primary',\n      destructive = false,\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(s.checkbox, s[`theme-${theme}`], className)}\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/Checkbox/checkbox.module.scss.js

@@ -0,0 +1,4 @@
+var s = {"theme-inherit":"checkbox-module_theme-inherit__C6Vro","theme-primary":"checkbox-module_theme-primary__AgTNt","theme-secondary":"checkbox-module_theme-secondary__J05hl","theme-destructive":"checkbox-module_theme-destructive__p72dr","theme-warning":"checkbox-module_theme-warning__xi20w","theme-success":"checkbox-module_theme-success__l3EdW","theme-info":"checkbox-module_theme-info__r4j29","theme-slate":"checkbox-module_theme-slate__-oru5","checkbox":"checkbox-module_checkbox__AK-jG","indicator":"checkbox-module_indicator__nSbkR","icon":"checkbox-module_icon__oy8pi","label":"checkbox-module_label__Vxoru","label--disabled":"checkbox-module_label--disabled__iH6YY","helper-text":"checkbox-module_helper-text__kVhvq"};
+
+export { s as default };
+//# sourceMappingURL=checkbox.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/form/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/form/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

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

@@ -0,0 +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;
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +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,qBAmcjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}