@pithyjs/ui-kit 0.1.0-beta.0

package/dist/shared/_media-fit.scss

@@ -0,0 +1,63 @@
+/// Slot media sizing — resolves the `data-media-fit` the renderer stamps from a
+/// slot's PIDL `media` field. Geometry lives here (fluid, token-driven); the
+/// Image's own `fit` prop controls pixel-fill within that geometry.
+/// @group shared
+
+@mixin _img-fill($object-fit) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: $object-fit;
+}
+
+[data-media-fit='fill'] {
+  &.ui-image,
+  .ui-image {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  &.ui-image .ui-image-img,
+  .ui-image .ui-image-img {
+    @include _img-fill(cover);
+  }
+}
+
+[data-media-fit='fit'] {
+  &.ui-image,
+  .ui-image {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  &.ui-image .ui-image-img,
+  .ui-image .ui-image-img {
+    @include _img-fill(contain);
+  }
+}
+
+[data-media-fit='logo'] {
+  &.ui-image,
+  .ui-image {
+    block-size: var(--icon-size-lg);
+    inline-size: auto;
+    max-inline-size: 100%;
+    flex-shrink: 0;
+  }
+  &.ui-image .ui-image-img,
+  .ui-image .ui-image-img {
+    block-size: 100%;
+    inline-size: auto;
+    object-fit: contain;
+  }
+}
+
+[data-media-fit='avatar'] {
+  &.ui-image,
+  .ui-image {
+    aspect-ratio: 1;
+    inline-size: 100%;
+    block-size: auto;
+  }
+  &.ui-image .ui-image-img,
+  .ui-image .ui-image-img {
+    @include _img-fill(cover);
+  }
+}

package/dist/shared/_mixins.scss

@@ -0,0 +1,69 @@
+/// Shared layout mixins for UI Kit components.
+///
+/// @group shared
+
+@use 'tokens' as *;
+
+// ============================================
+// Fluid center
+// ============================================
+
+// Breakpoint at which two $min-column children + a typical gap no longer fit
+// side-by-side. Below this the layout stacks and we switch to centered text.
+// 2 × 18rem + ~4rem gap ≈ 40rem.
+$_stacking-threshold: $min-column * 2 + 4rem;
+
+/// Centre a flex child that may wrap to full width — **parent-side** mixin.
+///
+/// Apply this to the `flex-wrap: wrap` **container**, not the child.
+///
+/// **Problem:** In a two-column `flex-wrap: wrap` layout, each side is
+/// start-aligned. When the container narrows and children wrap to their own
+/// line, they stretch to full width — but their content sits flush-start,
+/// leaving an awkward void on the inline-end side.
+///
+/// **Why not `margin-inline: auto` on the child?** In flexbox, `flex-grow`
+/// consumes free space *before* auto margins can claim it. Even after
+/// `max-inline-size` clamps the item, browsers do not redistribute the
+/// clamped-off space to auto margins — they resolve to 0.
+///
+/// **Solution:** Set `justify-content: center` on the **parent** and make it
+/// an inline-size container. `justify-content` positions items within whatever
+/// free space remains *after* flex sizing + max clamping. When two items share
+/// a line and flex-grow fills it, free space = 0 and centering has no visible
+/// effect. When one item wraps to its own line and gets clamped by
+/// `max-inline-size`, the remaining space is distributed equally → the item
+/// centres. A `@container` query on the child switches `text-align` to
+/// `center` only when the parent is narrow enough for stacking — layout
+/// itself stays intrinsically fluid (no breakpoints for stacking).
+///
+/// Pair with `fluid-center-child($max)` on the item that should cap + center.
+///
+/// @access public
+@mixin fluid-center-parent {
+  justify-content: center;
+  container-type: inline-size;
+}
+
+/// Cap a flex child's inline size so it centres when wrapped.
+///
+/// Apply to individual children inside a `fluid-center-parent` container.
+/// The cap has no visual effect in two-column mode (the item is narrower
+/// than `$max` anyway); when the child wraps to its own line, the cap
+/// limits its width and the parent's `justify-content: center` centres it.
+/// Text alignment switches to `center` only when the parent container is
+/// narrow enough that children stack (below `$_stacking-threshold`).
+///
+/// @param {Length} $max [$measure-half] - Maximum inline size of the block
+/// @access public
+@mixin fluid-center-child($max: $measure-half) {
+  max-inline-size: $max;
+
+  // Default: left-aligned text (two-column mode)
+  text-align: start;
+
+  // When parent is narrow → children stacked → centre text
+  @container (max-width: #{$_stacking-threshold}) {
+    text-align: center;
+  }
+}

package/dist/shared/_tokens.scss

@@ -0,0 +1,116 @@
+/// Shared SCSS tokens for UI Kit components.
+/// Single source of truth for color scheme lists, fluid layout constraints,
+/// and content measures.
+///
+/// @group shared
+
+$semantic-colors: (
+  primary,
+  secondary,
+  tertiary,
+  success,
+  info,
+  warning,
+  danger
+) !default;
+$control-sizes: (sm, md, lg) !default;
+
+// -- Control font-size map ----------------------------------------------------
+// Controls use one font-size step below the control size for compact text.
+$control-font-sizes: (
+  sm: var(--font-size-xs),
+  md: var(--font-size-sm),
+  lg: var(--font-size-body),
+) !default;
+
+// -- Control icon-size map ----------------------------------------------------
+// Icons inside controls scale with the control size.
+$control-icon-sizes: (
+  sm: var(--icon-size-xs),
+  md: var(--icon-size-sm),
+  lg: var(--icon-size-md),
+) !default;
+
+// -- Control indicator size map -----------------------------------------------
+// Visual indicators rendered inline with control labels (checkbox box, radio
+// dot, toggle thumb). Derived from font-size tokens so indicators scale
+// proportionally when the site builder theme changes typography — slightly
+// smaller than --icon-size-* so the indicator reads as part of the text run.
+$control-indicator-sizes: (
+  sm: calc(var(--font-size-xs) * 1.25),
+  md: calc(var(--font-size-sm) * 1.25),
+  lg: calc(var(--font-size-body) * 1.25),
+) !default;
+
+// -- Control inline-button size map -------------------------------------------
+// Interactive buttons inside form controls (clear ×, password toggle) need
+// a visible hit area slightly larger than the icon itself. The invisible 44×44
+// touch target (in the form-inline-button mixin) handles WCAG 2.5.8 AAA.
+$control-btn-sizes: (
+  sm: 1.25rem,
+  md: 1.5rem,
+  lg: 1.75rem,
+) !default;
+
+// -- Label letter-spacing -----------------------------------------------------
+// Slight positive tracking for compact label text (badges, tags) at small sizes.
+// Sits between the design-system "normal" (0) and "wide" (0.025em) scale steps;
+// --body-letter-spacing (0.02em) is too wide for single-word badge labels.
+$label-letter-spacing: 0.01em !default;
+
+// -- Checked-glow shadow opacity ----------------------------------------------
+// When a form control (checkbox, radio, toggle) is checked, the box-shadow is
+// tinted with the accent color at this opacity. Kept as a SCSS variable so all
+// form atoms share a single source of truth; the value is baked into the
+// `color-mix()` call at build time.
+$checked-glow-opacity: 45% !default;
+
+// -- Spinner layout -----------------------------------------------------------
+// Inset for the loading spinner ring inside square indicators (checkbox, radio).
+// Toggle uses explicit sizing instead because its pill-shaped track would create
+// an oval with a percentage inset.
+$spinner-inset: 15% !default;
+
+// Opacity for the spinner's reduced-motion fallback (full ring, dimmed).
+// Shared across all form atoms that render a loading spinner.
+$spinner-reduced-opacity: 0.5 !default;
+
+// -- Ghost dot preview --------------------------------------------------------
+// When hovering an unchecked radio, a faint ghost of the inner dot appears to
+// preview what the checked state will look like. These tokens control its
+// opacity and scale. Kept here so all radio-like controls share the same
+// preview affordance values.
+$ghost-dot-opacity: 0.25 !default;
+$ghost-dot-scale: 0.6 !default;
+
+// -- Focus ring offset --------------------------------------------------------
+// Offset between the control indicator border and the focus ring. Shared across
+// form atoms that render a custom focus ring via borders.ring().
+$focus-ring-offset: 2px !default;
+
+// -- Disabled desaturation ----------------------------------------------------
+// Disabled form controls are dimmed (via --state-disabled-opacity) *and*
+// desaturated so colors look properly deactivated, not just transparent.
+$disabled-saturation: 0.4 !default;
+
+// -- Form control placeholder opacity -----------------------------------------
+// Placeholder text is subtler than input text — shared across Input, Select, etc.
+$placeholder-opacity: 0.8 !default;
+
+// -- Scrollbar thumb width ----------------------------------------------------
+// Thin scrollbar for scrollable form controls (Textarea, Select listbox).
+// Derived from spacing tokens so scrollbar sizing stays design-system driven.
+$scrollbar-thumb-size: calc(var(--space-sm) * 0.75) !default;
+
+// -- Fluid layout constraints -------------------------------------------------
+// Children use `flex: 1 1 $min-column` so they wrap naturally when the
+// container can no longer fit two columns — no @container breakpoints needed.
+$min-column: 18rem !default; // Min inline-size for a content column (text, info, cards)
+$min-column-wide: 24rem !default; // Min inline-size for wide content (forms with field rows)
+
+// -- Content measure constraints ----------------------------------------------
+$measure-content: 48rem !default; // Max inline-size for centered content blocks
+$measure-text: 60ch !default; // Max inline-size for readable text lines
+$measure-half: 24rem !default; // Max inline-size for a "half-column" block (see fluid-center mixin)
+$measure-tooltip: 16rem !default; // Max inline-size for a tooltip / hint bubble
+$card-media-max-block: 18rem !default; // Max block-size for card media so it never dominates a wide card

package/dist/shared/badge.d.ts

@@ -0,0 +1,15 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.badge-constants",
+  "title": "Badge Shared Constants",
+  "category": "types"
+}
+*/
+/**
+ * Badge-specific constants. Shared types (SemanticColor, CONTROL_SIZES)
+ * live in shared/types.ts.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.badge-constants","name":"BADGE_VARIANTS","stability":"stable","signature":"readonly [\"filled\", \"outline\", \"subtle\"]"} */
+export declare const BADGE_VARIANTS: readonly ["filled", "outline", "subtle"];
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+//# sourceMappingURL=badge.d.ts.map

package/dist/shared/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/shared/badge.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;GAGG;AAIH,oKAAoK;AACpK,eAAO,MAAM,cAAc,0CAA2C,CAAC;AACvE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/shared/badge.js

@@ -0,0 +1,15 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.badge-constants",
+  "title": "Badge Shared Constants",
+  "category": "types"
+}
+*/
+/**
+ * Badge-specific constants. Shared types (SemanticColor, CONTROL_SIZES)
+ * live in shared/types.ts.
+ */
+// -- Variants -----------------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.badge-constants","name":"BADGE_VARIANTS","stability":"stable","signature":"readonly [\"filled\", \"outline\", \"subtle\"]"} */
+export const BADGE_VARIANTS = ['filled', 'outline', 'subtle'];
+//# sourceMappingURL=badge.js.map

package/dist/shared/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/shared/badge.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;GAGG;AAEH,gFAAgF;AAEhF,oKAAoK;AACpK,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC"}

package/dist/shared/button.d.ts

@@ -0,0 +1,22 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.button-constants",
+  "title": "Button Shared Constants",
+  "category": "types"
+}
+*/
+/**
+ * Button-specific constants. Shared types (SemanticColor, CONTROL_SIZES)
+ * live in shared/types.ts; shared class maps (CONTROL_CLASS) live in
+ * shared/common.ts.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_VARIANTS","stability":"stable","signature":"readonly [\"solid\", \"outline\", \"ghost\", \"link\"]"} */
+export declare const BUTTON_VARIANTS: readonly ["solid", "outline", "ghost", "link"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_TAGS","stability":"stable","signature":"readonly [\"button\", \"a\"]"} */
+export declare const BUTTON_TAGS: readonly ["button", "a"];
+export type ButtonTag = (typeof BUTTON_TAGS)[number];
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_TYPES","stability":"stable","signature":"readonly [\"button\", \"submit\", \"reset\"]"} */
+export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
+export type ButtonType = (typeof BUTTON_TYPES)[number];
+//# sourceMappingURL=button.d.ts.map

package/dist/shared/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/shared/button.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;;GAIG;AAIH,8KAA8K;AAC9K,eAAO,MAAM,eAAe,gDAAiD,CAAC;AAC9E,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAI7D,gJAAgJ;AAChJ,eAAO,MAAM,WAAW,0BAA2B,CAAC;AACpD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAIrD,iKAAiK;AACjK,eAAO,MAAM,YAAY,wCAAyC,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/shared/button.js

@@ -0,0 +1,22 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.button-constants",
+  "title": "Button Shared Constants",
+  "category": "types"
+}
+*/
+/**
+ * Button-specific constants. Shared types (SemanticColor, CONTROL_SIZES)
+ * live in shared/types.ts; shared class maps (CONTROL_CLASS) live in
+ * shared/common.ts.
+ */
+// -- Variants -----------------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_VARIANTS","stability":"stable","signature":"readonly [\"solid\", \"outline\", \"ghost\", \"link\"]"} */
+export const BUTTON_VARIANTS = ['solid', 'outline', 'ghost', 'link'];
+// -- Element tags -------------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_TAGS","stability":"stable","signature":"readonly [\"button\", \"a\"]"} */
+export const BUTTON_TAGS = ['button', 'a'];
+// -- HTML button types --------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.button-constants","name":"BUTTON_TYPES","stability":"stable","signature":"readonly [\"button\", \"submit\", \"reset\"]"} */
+export const BUTTON_TYPES = ['button', 'submit', 'reset'];
+//# sourceMappingURL=button.js.map

package/dist/shared/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/shared/button.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;;GAIG;AAEH,gFAAgF;AAEhF,8KAA8K;AAC9K,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AAG9E,gFAAgF;AAEhF,gJAAgJ;AAChJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAU,CAAC;AAGpD,gFAAgF;AAEhF,iKAAiK;AACjK,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC"}

package/dist/shared/card.d.ts

@@ -0,0 +1,21 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.card-constants",
+  "title": "Card Shared Constants",
+  "category": "types"
+}
+*/
+import type { ControlSize } from '@pithyjs/design-system';
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_VARIANTS","stability":"stable","signature":"readonly [\"default\", \"outlined\", \"elevated\", \"subtle\", \"ghost\"]"} */
+export declare const CARD_VARIANTS: readonly ["default", "outlined", "elevated", "subtle", "ghost"];
+export type CardVariant = (typeof CARD_VARIANTS)[number];
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_PADDINGS","stability":"stable","signature":"readonly [\"none\", ...typeof CONTROL_SIZES]"} */
+export declare const CARD_PADDINGS: readonly ["none", "sm", "md", "lg"];
+export type CardPadding = 'none' | ControlSize;
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_RADII","stability":"stable","signature":"readonly [\"none\", ...typeof CONTROL_SIZES]"} */
+export declare const CARD_RADII: readonly ["none", "sm", "md", "lg"];
+export type CardRadius = 'none' | ControlSize;
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_MEDIA_ASPECTS","stability":"stable","signature":"readonly [\"1/1\", \"4/3\", \"16/9\", \"3/2\", \"21/9\"]"} */
+export declare const CARD_MEDIA_ASPECTS: readonly ["1/1", "4/3", "16/9", "3/2", "21/9"];
+export type CardMediaAspect = (typeof CARD_MEDIA_ASPECTS)[number];
+//# sourceMappingURL=card.d.ts.map

package/dist/shared/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/shared/card.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AASF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI1D,6LAA6L;AAC7L,eAAO,MAAM,aAAa,iEAMhB,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAIzD,gKAAgK;AAChK,eAAO,MAAM,aAAa,qCAAsC,CAAC;AACjE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAI/C,6JAA6J;AAC7J,eAAO,MAAM,UAAU,qCAAsC,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;AAI9C,iLAAiL;AACjL,eAAO,MAAM,kBAAkB,gDAMrB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/shared/card.js

@@ -0,0 +1,38 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.card-constants",
+  "title": "Card Shared Constants",
+  "category": "types"
+}
+*/
+/**
+ * Card-specific constants. Shared types (Orientation, ControlSize) live in
+ * shared/types.ts; padding/radius scales mirror CONTROL_SIZES with "none"
+ * prepended so the card's size vocabulary tracks the rest of the atoms.
+ */
+import { CONTROL_SIZES } from './types';
+// -- Variants -----------------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_VARIANTS","stability":"stable","signature":"readonly [\"default\", \"outlined\", \"elevated\", \"subtle\", \"ghost\"]"} */
+export const CARD_VARIANTS = [
+    'default',
+    'outlined',
+    'elevated',
+    'subtle',
+    'ghost',
+];
+// -- Padding (mirrors CONTROL_SIZES + "none") ---------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_PADDINGS","stability":"stable","signature":"readonly [\"none\", ...typeof CONTROL_SIZES]"} */
+export const CARD_PADDINGS = ['none', ...CONTROL_SIZES];
+// -- Radius (mirrors CONTROL_SIZES + "none") ----------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_RADII","stability":"stable","signature":"readonly [\"none\", ...typeof CONTROL_SIZES]"} */
+export const CARD_RADII = ['none', ...CONTROL_SIZES];
+// -- Media aspect ratios ------------------------------------------------------
+/** @codexApi {"parent":"pithy.ui-kit.card-constants","name":"CARD_MEDIA_ASPECTS","stability":"stable","signature":"readonly [\"1/1\", \"4/3\", \"16/9\", \"3/2\", \"21/9\"]"} */
+export const CARD_MEDIA_ASPECTS = [
+    '1/1',
+    '4/3',
+    '16/9',
+    '3/2',
+    '21/9',
+];
+//# sourceMappingURL=card.js.map

package/dist/shared/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/shared/card.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,gFAAgF;AAEhF,6LAA6L;AAC7L,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,SAAS;IACT,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;CACC,CAAC;AAGX,gFAAgF;AAEhF,gKAAgK;AAChK,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,GAAG,aAAa,CAAU,CAAC;AAGjE,gFAAgF;AAEhF,6JAA6J;AAC7J,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,GAAG,aAAa,CAAU,CAAC;AAG9D,gFAAgF;AAEhF,iLAAiL;AACjL,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK;IACL,KAAK;IACL,MAAM;IACN,KAAK;IACL,MAAM;CACE,CAAC"}

package/dist/shared/checkbox.d.ts

@@ -0,0 +1,10 @@
+/** @codex { "id": "pithy.ui-kit.shared-checkbox", "title": "Shared Checkbox Constants", "category": "types" } */
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"generateCheckboxId","stability":"stable","signature":"() => string"} */
+export declare function generateCheckboxId(): string;
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"resetCheckboxIdCounter","stability":"stable","signature":"() => void"} */
+export declare function resetCheckboxIdCounter(): void;
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"generateCheckboxGroupId","stability":"stable","signature":"() => string"} */
+export declare function generateCheckboxGroupId(): string;
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"resetCheckboxGroupIdCounter","stability":"stable","signature":"() => void"} */
+export declare function resetCheckboxGroupIdCounter(): void;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/shared/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/shared/checkbox.ts"],"names":[],"mappings":"AAAA,iHAAiH;AAajH,sIAAsI;AACtI,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C;AAED,wIAAwI;AACxI,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C;AAID,2IAA2I;AAC3I,wBAAgB,uBAAuB,IAAI,MAAM,CAEhD;AAED,6IAA6I;AAC7I,wBAAgB,2BAA2B,IAAI,IAAI,CAElD"}

package/dist/shared/checkbox.js

@@ -0,0 +1,28 @@
+/** @codex { "id": "pithy.ui-kit.shared-checkbox", "title": "Shared Checkbox Constants", "category": "types" } */
+/**
+ * Shared constants for the Checkbox / CheckboxGroup atoms.
+ * Single source of truth for ID generation.
+ *
+ * **SSR:** Counters are module-level state. Call `resetCheckboxIdCounter()` and
+ * `resetCheckboxGroupIdCounter()` between SSR requests to ensure deterministic
+ * IDs (same pattern as `resetSectionIdCounter()` in section templates).
+ */
+let checkboxIdCounter = 0;
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"generateCheckboxId","stability":"stable","signature":"() => string"} */
+export function generateCheckboxId() {
+    return `ui-checkbox-${++checkboxIdCounter}`;
+}
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"resetCheckboxIdCounter","stability":"stable","signature":"() => void"} */
+export function resetCheckboxIdCounter() {
+    checkboxIdCounter = 0;
+}
+let checkboxGroupIdCounter = 0;
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"generateCheckboxGroupId","stability":"stable","signature":"() => string"} */
+export function generateCheckboxGroupId() {
+    return `ui-checkbox-group-${++checkboxGroupIdCounter}`;
+}
+/** @codexApi {"parent":"pithy.ui-kit.shared-checkbox","name":"resetCheckboxGroupIdCounter","stability":"stable","signature":"() => void"} */
+export function resetCheckboxGroupIdCounter() {
+    checkboxGroupIdCounter = 0;
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/shared/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/shared/checkbox.ts"],"names":[],"mappings":"AAAA,iHAAiH;AAEjH;;;;;;;GAOG;AAEH,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B,sIAAsI;AACtI,MAAM,UAAU,kBAAkB;IAChC,OAAO,eAAe,EAAE,iBAAiB,EAAE,CAAC;AAC9C,CAAC;AAED,wIAAwI;AACxI,MAAM,UAAU,sBAAsB;IACpC,iBAAiB,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,IAAI,sBAAsB,GAAG,CAAC,CAAC;AAE/B,2IAA2I;AAC3I,MAAM,UAAU,uBAAuB;IACrC,OAAO,qBAAqB,EAAE,sBAAsB,EAAE,CAAC;AACzD,CAAC;AAED,6IAA6I;AAC7I,MAAM,UAAU,2BAA2B;IACzC,sBAAsB,GAAG,CAAC,CAAC;AAC7B,CAAC"}

package/dist/shared/clickable.d.ts

@@ -0,0 +1,34 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.clickable",
+  "title": "Clickable Reactive State Helpers",
+  "category": "types"
+}
+*/
+/** A prop that is either a static value or a `() => T` accessor (signal/computed). */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"Reactive","stability":"stable","signature":"type Reactive<T> = T | (() => T)"} */
+export type Reactive<T> = T | (() => T);
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"ReactiveText","stability":"stable","signature":"type ReactiveText = string | (() => string | undefined)"} */
+export type ReactiveText = string | (() => string | undefined);
+/** Read a `Reactive<T>` — invokes the accessor when given a function, otherwise returns the value. */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"readReactive","stability":"stable","signature":"<T>(value: Reactive<T>) => T"} */
+export declare function readReactive<T>(value: Reactive<T>): T;
+/** True when at least one of the given values is a function (i.e. a reactive accessor). */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"hasReactive","stability":"stable","signature":"(...values: ReadonlyArray<unknown>) => boolean"} */
+export declare function hasReactive(...values: ReadonlyArray<unknown>): boolean;
+/**
+ * Run `apply` either inside a tracked `effect()` (when any source is reactive)
+ * or once for the synchronous initial paint. Returns a disposer — a no-op when
+ * no effect was created — so callers can push it into their disposers list
+ * without branching.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"bindReactive","stability":"stable","signature":"(reactive: boolean, apply: () => void) => () => void"} */
+export declare function bindReactive(reactive: boolean, apply: () => void): () => void;
+/**
+ * Wrap a click handler so it short-circuits while `isBlocked()` is true.
+ * `preventDefault` + `stopImmediatePropagation` mirror the Button pattern —
+ * the element stays focusable for screen readers but the click is neutralised.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"guardClick","stability":"stable","signature":"(handler: ((e: MouseEvent) => void) | undefined, isBlocked: () => boolean) => (e: MouseEvent) => void"} */
+export declare function guardClick(handler: ((e: MouseEvent) => void) | undefined, isBlocked: () => boolean): (e: MouseEvent) => void;
+//# sourceMappingURL=clickable.d.ts.map

package/dist/shared/clickable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable.d.ts","sourceRoot":"","sources":["../../src/shared/clickable.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAWF,sFAAsF;AACtF,0IAA0I;AAC1I,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAGxC,qKAAqK;AACrK,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;AAE/D,sGAAsG;AACtG,0IAA0I;AAC1I,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAErD;AAED,2FAA2F;AAC3F,2JAA2J;AAC3J,wBAAgB,WAAW,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,OAAO,CAEtE;AAED;;;;;GAKG;AACH,kKAAkK;AAClK,wBAAgB,YAAY,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAI7E;AAED;;;;GAIG;AACH,iNAAiN;AACjN,wBAAgB,UAAU,CACxB,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,EAC9C,SAAS,EAAE,MAAM,OAAO,GACvB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CASzB"}

package/dist/shared/clickable.js

@@ -0,0 +1,54 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.clickable",
+  "title": "Clickable Reactive State Helpers",
+  "category": "types"
+}
+*/
+/**
+ * Composable primitives for reactive boolean props (disabled / selected /
+ * loading) and click-handler guarding. Used by clickable atoms (Tile, …)
+ * to avoid duplicating the `typeof === "function"` ternary, the
+ * effect-vs-once branch, and the disabled-click guard.
+ */
+import { effect } from '@pithyjs/signals';
+/** Read a `Reactive<T>` — invokes the accessor when given a function, otherwise returns the value. */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"readReactive","stability":"stable","signature":"<T>(value: Reactive<T>) => T"} */
+export function readReactive(value) {
+    return typeof value === 'function' ? value() : value;
+}
+/** True when at least one of the given values is a function (i.e. a reactive accessor). */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"hasReactive","stability":"stable","signature":"(...values: ReadonlyArray<unknown>) => boolean"} */
+export function hasReactive(...values) {
+    return values.some(v => typeof v === 'function');
+}
+/**
+ * Run `apply` either inside a tracked `effect()` (when any source is reactive)
+ * or once for the synchronous initial paint. Returns a disposer — a no-op when
+ * no effect was created — so callers can push it into their disposers list
+ * without branching.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"bindReactive","stability":"stable","signature":"(reactive: boolean, apply: () => void) => () => void"} */
+export function bindReactive(reactive, apply) {
+    if (reactive)
+        return effect(apply);
+    apply();
+    return () => { };
+}
+/**
+ * Wrap a click handler so it short-circuits while `isBlocked()` is true.
+ * `preventDefault` + `stopImmediatePropagation` mirror the Button pattern —
+ * the element stays focusable for screen readers but the click is neutralised.
+ */
+/** @codexApi {"parent":"pithy.ui-kit.clickable","name":"guardClick","stability":"stable","signature":"(handler: ((e: MouseEvent) => void) | undefined, isBlocked: () => boolean) => (e: MouseEvent) => void"} */
+export function guardClick(handler, isBlocked) {
+    return (e) => {
+        if (isBlocked()) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            return;
+        }
+        handler?.(e);
+    };
+}
+//# sourceMappingURL=clickable.js.map

package/dist/shared/clickable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable.js","sourceRoot":"","sources":["../../src/shared/clickable.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF;;;;;GAKG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAU1C,sGAAsG;AACtG,0IAA0I;AAC1I,MAAM,UAAU,YAAY,CAAI,KAAkB;IAChD,OAAO,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAE,KAAiB,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;AACpE,CAAC;AAED,2FAA2F;AAC3F,2JAA2J;AAC3J,MAAM,UAAU,WAAW,CAAC,GAAG,MAA8B;IAC3D,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,UAAU,CAAC,CAAC;AACnD,CAAC;AAED;;;;;GAKG;AACH,kKAAkK;AAClK,MAAM,UAAU,YAAY,CAAC,QAAiB,EAAE,KAAiB;IAC/D,IAAI,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,KAAK,EAAE,CAAC;IACR,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;AAClB,CAAC;AAED;;;;GAIG;AACH,iNAAiN;AACjN,MAAM,UAAU,UAAU,CACxB,OAA8C,EAC9C,SAAwB;IAExB,OAAO,CAAC,CAAa,EAAE,EAAE;QACvB,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,CAAC;AACJ,CAAC"}

package/dist/shared/common.d.ts

@@ -0,0 +1,31 @@
+/** @codex { "id": "pithy.ui-kit.shared-common", "title": "Shared Utility Class Maps", "category": "types" } */
+/**
+ * Shared utility class maps for layout and control components.
+ *
+ * Full class strings are written out explicitly so the design-system JIT
+ * scanner detects them on startup — dynamic template literals like
+ * `u-gap-${gap}` produce incomplete fragments the scanner can't match.
+ *
+ * Derived from the design-system spacing tokens and layout SCSS values.
+ */
+import type { ControlSize, SpacingSize } from '@pithyjs/design-system';
+export declare const GAP_CLASS: Record<SpacingSize, string>;
+export declare const ROW_GAP_CLASS: Record<SpacingSize, string>;
+export declare const COL_GAP_CLASS: Record<SpacingSize, string>;
+declare const ALIGN_ITEMS: readonly ["start", "center", "end", "stretch", "baseline"];
+export type AlignItems = (typeof ALIGN_ITEMS)[number];
+export declare const ALIGN_CLASS: Record<AlignItems, string>;
+declare const JUSTIFY_ITEMS: readonly ["start", "end", "center", "between", "around", "evenly"];
+export type JustifyContent = (typeof JUSTIFY_ITEMS)[number];
+export declare const JUSTIFY_CLASS: Record<JustifyContent, string>;
+export declare const PY_CLASS: Record<SpacingSize, string>;
+export declare const SECTION_TAGS: readonly ["section", "article", "aside", "header", "footer", "main"];
+export type SectionTag = (typeof SECTION_TAGS)[number];
+/** @codexApi {"parent":"pithy.ui-kit.shared-common","name":"CONTROL_CLASS","stability":"stable","signature":"Record<ControlSize, string>"} */
+export declare const CONTROL_CLASS: Record<ControlSize, string>;
+/** Matches a numeric CSS length value (e.g. "250px", "15rem", "50%"). */
+export declare const CSS_LENGTH_PATTERN: RegExp;
+/** @codexApi {"parent":"pithy.ui-kit.shared-common","name":"nextUid","stability":"internal","signature":"(prefix: string) => string"} */
+export declare function nextUid(prefix: string): string;
+export {};
+//# sourceMappingURL=common.d.ts.map

package/dist/shared/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/shared/common.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAE/G;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIvE,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAOjD,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAOrD,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAOrD,CAAC;AAIF,QAAA,MAAM,WAAW,4DAA6D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMlD,CAAC;AAIF,QAAA,MAAM,aAAa,oEAOT,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAOxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAOhD,CAAC;AAIF,eAAO,MAAM,YAAY,sEAOf,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAIvD,8IAA8I;AAC9I,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIrD,CAAC;AAIF,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,QAC0C,CAAC;AAM1E,yIAAyI;AACzI,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAI9C"}