@instruments/materia-ui 0.1.0

package/dist/tokens/motion.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Motion vocabulary tokens for @instruments/materia-ui.
+ *
+ * The single source of truth for animation timing, easing, scale, spring and
+ * preset tokens. Deliberately small: five durations, three curves, three
+ * springs. A choice nobody can tell apart at a quarter speed is not a choice,
+ * so near-duplicates are folded together.
+ *
+ * Runtime purity: this module has ZERO runtime imports - every value is a plain
+ * const literal - so the tokens invariant that token modules stay
+ * runtime-pure holds.
+ *
+ * @module
+ */
+/**
+ * Duration tokens, in seconds for Motion. Use `durationMs` for CSS.
+ *
+ * - instant: no animation (0ms)
+ * - quick: press feedback, hovers, exits, small state changes (120ms)
+ * - normal: menus, popovers, dialogs, sheets, reveals (220ms)
+ * - moderate: large surfaces and page-level entrances (400ms)
+ * - slow: ambient and looping motion such as shimmer (1000ms)
+ */
+export declare const durations: {
+    readonly instant: 0;
+    readonly quick: 0.12;
+    readonly normal: 0.22;
+    readonly moderate: 0.4;
+    readonly slow: 1;
+};
+/** Duration tokens in milliseconds, for CSS and Tailwind. */
+export declare const durationMs: {
+    readonly instant: 0;
+    readonly quick: 120;
+    readonly normal: 220;
+    readonly moderate: 400;
+    readonly slow: 1000;
+};
+export type Duration = keyof typeof durations;
+/** Cubic bezier easing curve as [x1, y1, x2, y2] control points */
+export type EasingTuple = [number, number, number, number];
+export declare const easings: {
+    readonly out: EasingTuple;
+    readonly inOut: EasingTuple;
+    readonly sheet: EasingTuple;
+};
+/** CSS cubic-bezier strings, for Tailwind and inline styles. */
+export declare const easingsCSS: {
+    readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly inOut: "cubic-bezier(0.77, 0, 0.175, 1)";
+    readonly sheet: "cubic-bezier(0.32, 0.72, 0, 1)";
+};
+export type Easing = keyof typeof easings;
+/**
+ * Scale tokens for press and hover feedback.
+ *
+ * - press: subtle shrink on click or tap (0.97)
+ * - pressDeep: firmer press, for large targets (0.95)
+ * - hover: slight lift on hover (1.02)
+ */
+export declare const scales: {
+    readonly press: 0.97;
+    readonly pressDeep: 0.95;
+    readonly hover: 1.02;
+};
+export type Scale = keyof typeof scales;
+/**
+ * Springs, described by how quickly they visually arrive (`visualDuration`,
+ * seconds) and how far they overshoot (`bounce`, 0 is none). Use a spring for
+ * anything the user can touch, drag or interrupt: it starts from what is on
+ * screen and carries velocity when retargeted.
+ *
+ * - standard: the default for interface motion; arrives in 0.3s, no overshoot
+ * - swift: indicators, menus, quick follow-ups; 0.2s, no overshoot
+ * - settle: where a flick or drag throws something into place; a small,
+ *   earned overshoot
+ */
+export declare const springs: {
+    readonly standard: {
+        readonly type: "spring";
+        readonly visualDuration: 0.3;
+        readonly bounce: 0;
+    };
+    readonly swift: {
+        readonly type: "spring";
+        readonly visualDuration: 0.2;
+        readonly bounce: 0;
+    };
+    readonly settle: {
+        readonly type: "spring";
+        readonly visualDuration: 0.35;
+        readonly bounce: 0.15;
+    };
+};
+export type SpringType = keyof typeof springs;
+/**
+ * Named transitions for common moves. Spread into a transition prop.
+ *
+ * @example
+ * ```tsx
+ * <m.div transition={presets.enter} />
+ * ```
+ */
+export declare const presets: {
+    /** Something arriving: a dialog, a sheet's content, a reveal. */
+    readonly enter: {
+        readonly duration: 0.22;
+        readonly ease: EasingTuple;
+    };
+    /** Something leaving: quicker than it came, on the same curve. */
+    readonly exit: {
+        readonly duration: 0.12;
+        readonly ease: EasingTuple;
+    };
+    /** Error feedback; pair with `shakeKeyframes`. */
+    readonly shake: {
+        readonly duration: 0.22;
+        readonly ease: EasingTuple;
+    };
+};
+/**
+ * Shake animation keyframes for error feedback.
+ * Apply to the `x` property with `animate` prop.
+ *
+ * @example
+ * ```tsx
+ * <m.div animate={hasError ? { x: shakeKeyframes } : { x: 0 }} transition={presets.shake} />
+ * ```
+ */
+export declare const shakeKeyframes: number[];
+export type Preset = keyof typeof presets;

package/dist/tokens/motion.js

@@ -0,0 +1,128 @@
+/**
+ * Motion vocabulary tokens for @instruments/materia-ui.
+ *
+ * The single source of truth for animation timing, easing, scale, spring and
+ * preset tokens. Deliberately small: five durations, three curves, three
+ * springs. A choice nobody can tell apart at a quarter speed is not a choice,
+ * so near-duplicates are folded together.
+ *
+ * Runtime purity: this module has ZERO runtime imports - every value is a plain
+ * const literal - so the tokens invariant that token modules stay
+ * runtime-pure holds.
+ *
+ * @module
+ */
+// ============================================================================
+// DURATIONS
+// ============================================================================
+/**
+ * Duration tokens, in seconds for Motion. Use `durationMs` for CSS.
+ *
+ * - instant: no animation (0ms)
+ * - quick: press feedback, hovers, exits, small state changes (120ms)
+ * - normal: menus, popovers, dialogs, sheets, reveals (220ms)
+ * - moderate: large surfaces and page-level entrances (400ms)
+ * - slow: ambient and looping motion such as shimmer (1000ms)
+ */
+export const durations = {
+    instant: 0,
+    quick: 0.12,
+    normal: 0.22,
+    moderate: 0.4,
+    slow: 1,
+};
+/** Duration tokens in milliseconds, for CSS and Tailwind. */
+export const durationMs = {
+    instant: 0,
+    quick: 120,
+    normal: 220,
+    moderate: 400,
+    slow: 1000,
+};
+/**
+ * - out: anything entering or leaving, and the default when unsure. A strong
+ *   ease-out (quint): it moves at once and settles gently, so even a quick
+ *   exit reads as responsive.
+ * - inOut: moving between two visible positions, or morphing in place.
+ * - sheet: panels and drawers sliding in from an edge (the iOS sheet curve).
+ *
+ * There is deliberately no ease-in: it spends its first frames barely moving,
+ * exactly when the eye is on the element.
+ */
+const OUT = [0.22, 1, 0.36, 1];
+const IN_OUT = [0.77, 0, 0.175, 1];
+const SHEET = [0.32, 0.72, 0, 1];
+export const easings = {
+    out: OUT,
+    inOut: IN_OUT,
+    sheet: SHEET,
+};
+/** CSS cubic-bezier strings, for Tailwind and inline styles. */
+export const easingsCSS = {
+    out: "cubic-bezier(0.22, 1, 0.36, 1)",
+    inOut: "cubic-bezier(0.77, 0, 0.175, 1)",
+    sheet: "cubic-bezier(0.32, 0.72, 0, 1)",
+};
+// ============================================================================
+// SCALES
+// ============================================================================
+/**
+ * Scale tokens for press and hover feedback.
+ *
+ * - press: subtle shrink on click or tap (0.97)
+ * - pressDeep: firmer press, for large targets (0.95)
+ * - hover: slight lift on hover (1.02)
+ */
+export const scales = {
+    press: 0.97,
+    pressDeep: 0.95,
+    hover: 1.02,
+};
+// ============================================================================
+// SPRINGS
+// ============================================================================
+/**
+ * Springs, described by how quickly they visually arrive (`visualDuration`,
+ * seconds) and how far they overshoot (`bounce`, 0 is none). Use a spring for
+ * anything the user can touch, drag or interrupt: it starts from what is on
+ * screen and carries velocity when retargeted.
+ *
+ * - standard: the default for interface motion; arrives in 0.3s, no overshoot
+ * - swift: indicators, menus, quick follow-ups; 0.2s, no overshoot
+ * - settle: where a flick or drag throws something into place; a small,
+ *   earned overshoot
+ */
+export const springs = {
+    standard: { type: "spring", visualDuration: 0.3, bounce: 0 },
+    swift: { type: "spring", visualDuration: 0.2, bounce: 0 },
+    settle: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
+};
+// ============================================================================
+// PRESETS
+// ============================================================================
+/**
+ * Named transitions for common moves. Spread into a transition prop.
+ *
+ * @example
+ * ```tsx
+ * <m.div transition={presets.enter} />
+ * ```
+ */
+export const presets = {
+    /** Something arriving: a dialog, a sheet's content, a reveal. */
+    enter: { duration: durations.normal, ease: OUT },
+    /** Something leaving: quicker than it came, on the same curve. */
+    exit: { duration: durations.quick, ease: OUT },
+    /** Error feedback; pair with `shakeKeyframes`. */
+    shake: { duration: durations.normal, ease: OUT },
+};
+/**
+ * Shake animation keyframes for error feedback.
+ * Apply to the `x` property with `animate` prop.
+ *
+ * @example
+ * ```tsx
+ * <m.div animate={hasError ? { x: shakeKeyframes } : { x: 0 }} transition={presets.shake} />
+ * ```
+ */
+export const shakeKeyframes = [0, -6, 6, -4, 4, 0];

package/dist/tokens/orientation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Orientation vocabulary for the Materia design system.
+ *
+ * The shared axis type for components that lay out or scroll along one of two
+ * directions (ButtonGroup, Carousel, ScrollArea, ScrollFade, FileUploadList, …).
+ * `ResponsiveOrientation` adds `"responsive"` for components (Field, SettingsRow)
+ * that stack on small viewports and sit side-by-side on larger ones.
+ *
+ * @module
+ */
+/** A single layout/scroll axis. */
+export type Orientation = "horizontal" | "vertical";
+/** {@link Orientation} plus `"responsive"` - vertical on mobile, horizontal on wider viewports. */
+export type ResponsiveOrientation = Orientation | "responsive";

package/dist/tokens/orientation.js

@@ -0,0 +1,11 @@
+/**
+ * Orientation vocabulary for the Materia design system.
+ *
+ * The shared axis type for components that lay out or scroll along one of two
+ * directions (ButtonGroup, Carousel, ScrollArea, ScrollFade, FileUploadList, …).
+ * `ResponsiveOrientation` adds `"responsive"` for components (Field, SettingsRow)
+ * that stack on small viewports and sit side-by-side on larger ones.
+ *
+ * @module
+ */
+export {};

package/dist/tokens/overlay-styles.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Shared class tokens for the overlay family (Dialog, Sheet, Drawer,
+ * AlertDialog, Sidepanel). These components wrap different underlying
+ * primitives (Base UI Dialog/AlertDialog/Drawer, plain div) so they cannot share
+ * one element - but the scrim/title/description/header class strings are
+ * byte-identical and live here as a single source of truth.
+ *
+ * Intentionally NOT shared (each overlay differs on purpose): Dialog's larger
+ * title (text-xl), AlertDialog's text-lg title, and every Footer (each has its
+ * own padding/border).
+ */
+/** Frosted scrim - Dialog, Sheet. */
+export declare const OVERLAY_SCRIM_GLASS = "glass-scrim fixed inset-0 z-50 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0";
+/** Dark scrim - Drawer, AlertDialog. */
+export declare const OVERLAY_SCRIM_DARK = "fixed inset-0 z-50 bg-black/50 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0";
+/** Title - Sheet, Drawer, Sidepanel. Figma binds text/lg (18px).
+ * `text-balance` evens out multi-line headings. */
+export declare const OVERLAY_TITLE = "text-lg font-medium text-balance text-foreground";
+/** Description - Sheet, Drawer, AlertDialog, Sidepanel.
+ * `text-pretty` avoids orphan words in supporting copy. */
+export declare const OVERLAY_DESCRIPTION = "text-sm text-pretty text-muted-foreground";
+/** Centred header - Dialog, AlertDialog. */
+export declare const OVERLAY_HEADER_CENTERED = "flex flex-col gap-2 text-center sm:text-left";
+/**
+ * Enter/exit fade + zoom + overlay-in/out + motion-reduce cluster shared by every
+ * animated overlay panel. Dialog and AlertDialog use this directly (they don't
+ * slide); popover-family surfaces layer the directional slide on top via
+ * `POPOVER_CONTENT_ANIMATION`. Per-family origin / max-h / min-w / surface classes
+ * stay inline at each call site.
+ */
+export declare const OVERLAY_PANEL_ANIMATION = "data-closed:animate-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-overlay-in data-open:fade-in-0 data-open:zoom-in-95 motion-reduce:animate-none!";
+/**
+ * Popover-family animation: the shared panel animation plus the four
+ * `data-[side=*]:slide-in-from-*` directional slides. Used by every popover-style
+ * surface (dropdown/context/menubar content + sub-content, popover, hover-card,
+ * select, tooltip). Per-family origin / max-h / min-w / surface classes stay
+ * inline at each call site.
+ */
+export declare const POPOVER_CONTENT_ANIMATION = "data-closed:animate-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-overlay-in data-open:fade-in-0 data-open:zoom-in-95 motion-reduce:animate-none! data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+/**
+ * Popover-family surface: colour pair, clipping, the default `shadow-md` and a
+ * hidden outline. Radius, border, padding and sizing stay at each call site. A
+ * call site that needs a different shadow or outline style lists it after this
+ * token so tailwind-merge keeps it. An `overflow-x-*`/`overflow-y-*` pair does
+ * not replace `overflow-hidden`, so surfaces that scroll on one axis (Select,
+ * menu Content) keep their own classes.
+ */
+export declare const POPOVER_SURFACE = "bg-popover text-popover-foreground overflow-hidden shadow-md outline-hidden";
+/**
+ * Fixed-centre panel cluster - Dialog, AlertDialog. The centred-modal geometry
+ * and surface (`gap-6 bg-card`). Animation is applied separately via
+ * `OVERLAY_PANEL_ANIMATION`.
+ */
+export declare const OVERLAY_PANEL_CENTERED = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] -translate-1/2 gap-6 rounded-modal bg-card p-6 shadow-lg sm:max-w-lg";

package/dist/tokens/overlay-styles.js

@@ -0,0 +1,54 @@
+/**
+ * Shared class tokens for the overlay family (Dialog, Sheet, Drawer,
+ * AlertDialog, Sidepanel). These components wrap different underlying
+ * primitives (Base UI Dialog/AlertDialog/Drawer, plain div) so they cannot share
+ * one element - but the scrim/title/description/header class strings are
+ * byte-identical and live here as a single source of truth.
+ *
+ * Intentionally NOT shared (each overlay differs on purpose): Dialog's larger
+ * title (text-xl), AlertDialog's text-lg title, and every Footer (each has its
+ * own padding/border).
+ */
+/** Frosted scrim - Dialog, Sheet. */
+export const OVERLAY_SCRIM_GLASS = "glass-scrim fixed inset-0 z-50 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0";
+/** Dark scrim - Drawer, AlertDialog. */
+export const OVERLAY_SCRIM_DARK = "fixed inset-0 z-50 bg-black/50 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0";
+/** Title - Sheet, Drawer, Sidepanel. Figma binds text/lg (18px).
+ * `text-balance` evens out multi-line headings. */
+export const OVERLAY_TITLE = "text-lg font-medium text-balance text-foreground";
+/** Description - Sheet, Drawer, AlertDialog, Sidepanel.
+ * `text-pretty` avoids orphan words in supporting copy. */
+export const OVERLAY_DESCRIPTION = "text-sm text-pretty text-muted-foreground";
+/** Centred header - Dialog, AlertDialog. */
+export const OVERLAY_HEADER_CENTERED = "flex flex-col gap-2 text-center sm:text-left";
+/**
+ * Enter/exit fade + zoom + overlay-in/out + motion-reduce cluster shared by every
+ * animated overlay panel. Dialog and AlertDialog use this directly (they don't
+ * slide); popover-family surfaces layer the directional slide on top via
+ * `POPOVER_CONTENT_ANIMATION`. Per-family origin / max-h / min-w / surface classes
+ * stay inline at each call site.
+ */
+export const OVERLAY_PANEL_ANIMATION = "data-closed:animate-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-overlay-in data-open:fade-in-0 data-open:zoom-in-95 motion-reduce:animate-none!";
+/**
+ * Popover-family animation: the shared panel animation plus the four
+ * `data-[side=*]:slide-in-from-*` directional slides. Used by every popover-style
+ * surface (dropdown/context/menubar content + sub-content, popover, hover-card,
+ * select, tooltip). Per-family origin / max-h / min-w / surface classes stay
+ * inline at each call site.
+ */
+export const POPOVER_CONTENT_ANIMATION = `${OVERLAY_PANEL_ANIMATION} data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`;
+/**
+ * Popover-family surface: colour pair, clipping, the default `shadow-md` and a
+ * hidden outline. Radius, border, padding and sizing stay at each call site. A
+ * call site that needs a different shadow or outline style lists it after this
+ * token so tailwind-merge keeps it. An `overflow-x-*`/`overflow-y-*` pair does
+ * not replace `overflow-hidden`, so surfaces that scroll on one axis (Select,
+ * menu Content) keep their own classes.
+ */
+export const POPOVER_SURFACE = "bg-popover text-popover-foreground overflow-hidden shadow-md outline-hidden";
+/**
+ * Fixed-centre panel cluster - Dialog, AlertDialog. The centred-modal geometry
+ * and surface (`gap-6 bg-card`). Animation is applied separately via
+ * `OVERLAY_PANEL_ANIMATION`.
+ */
+export const OVERLAY_PANEL_CENTERED = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] -translate-1/2 gap-6 rounded-modal bg-card p-6 shadow-lg sm:max-w-lg";

package/dist/tokens/radius-tokens.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Border radius design tokens for use in JavaScript/TypeScript contexts.
+ * These mirror the `--radius-*` values in styles/index.css (Figma's radius
+ * scale) for use in style props (e.g., Motion animations) where CSS classes
+ * aren't available.
+ *
+ * Surface-weight ladder (semantic guidance, expressed in the scale tokens
+ * below - not a parallel numbering): the rounder the corner, the more
+ * prominent/floating the surface. 2xl (16px) inner bordered containers →
+ * 3xl (24px) product cards/images → 4xl (36px) large card surfaces and
+ * `modal` (36px) Dialog/AlertDialog. Pick radius by surface weight.
+ *
+ * @example
+ * import { radii } from "@instruments/materia-ui/tokens/radius-tokens";
+ *
+ * <motion.div style={{ borderRadius: radii["2xl"] }} />
+ */
+export declare const radii: {
+    /** 16px - 1rem */
+    readonly "2xl": 16;
+    /** 24px - 1.5rem */
+    readonly "3xl": 24;
+    /** 36px - 2.25rem - Figma radius/4xl */
+    readonly "4xl": 36;
+    /** 4px - 0.25rem - Default rounded */
+    readonly DEFAULT: 4;
+    /** 9999px - Fully rounded (pill/circle) */
+    readonly full: 9999;
+    /** 10px - 0.625rem */
+    readonly lg: 10;
+    /** 8px - 0.5rem */
+    readonly md: 8;
+    /** 36px - 2.25rem - Modal/dialog surface; the same corner
+     * as 4xl. Mirrors CSS `--radius-modal` (`rounded-modal`). */
+    readonly modal: 36;
+    /** 0px - No border radius */
+    readonly none: 0;
+    /** 6px - 0.375rem */
+    readonly sm: 6;
+    /** 12px - 0.75rem */
+    readonly xl: 12;
+    /** 4px - 0.25rem */
+    readonly xs: 4;
+};
+export type RadiusSize = keyof typeof radii;

package/dist/tokens/radius-tokens.js

@@ -0,0 +1,44 @@
+/**
+ * Border radius design tokens for use in JavaScript/TypeScript contexts.
+ * These mirror the `--radius-*` values in styles/index.css (Figma's radius
+ * scale) for use in style props (e.g., Motion animations) where CSS classes
+ * aren't available.
+ *
+ * Surface-weight ladder (semantic guidance, expressed in the scale tokens
+ * below - not a parallel numbering): the rounder the corner, the more
+ * prominent/floating the surface. 2xl (16px) inner bordered containers →
+ * 3xl (24px) product cards/images → 4xl (36px) large card surfaces and
+ * `modal` (36px) Dialog/AlertDialog. Pick radius by surface weight.
+ *
+ * @example
+ * import { radii } from "@instruments/materia-ui/tokens/radius-tokens";
+ *
+ * <motion.div style={{ borderRadius: radii["2xl"] }} />
+ */
+export const radii = {
+    /** 16px - 1rem */
+    "2xl": 16,
+    /** 24px - 1.5rem */
+    "3xl": 24,
+    /** 36px - 2.25rem - Figma radius/4xl */
+    "4xl": 36,
+    /** 4px - 0.25rem - Default rounded */
+    DEFAULT: 4,
+    /** 9999px - Fully rounded (pill/circle) */
+    full: 9999,
+    /** 10px - 0.625rem */
+    lg: 10,
+    /** 8px - 0.5rem */
+    md: 8,
+    /** 36px - 2.25rem - Modal/dialog surface; the same corner
+     * as 4xl. Mirrors CSS `--radius-modal` (`rounded-modal`). */
+    modal: 36,
+    /** 0px - No border radius */
+    none: 0,
+    /** 6px - 0.375rem */
+    sm: 6,
+    /** 12px - 0.75rem */
+    xl: 12,
+    /** 4px - 0.25rem */
+    xs: 4,
+};

package/dist/tokens/radius.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared border radius options used across UI components.
+ * - rounded: Default border radius (rounded-md)
+ * - square: No border radius (sharp corners)
+ * - full: Fully rounded (pill/circle shape)
+ */
+export declare const RADIUS_OPTIONS: readonly ["rounded", "square", "full"];
+export type Radius = (typeof RADIUS_OPTIONS)[number];
+/**
+ * Default Tailwind class mappings for radius options.
+ * Components may override with compound variants for size-specific behaviour.
+ */
+export declare const RADIUS_CLASSES: Record<Radius, string>;

package/dist/tokens/radius.js

@@ -0,0 +1,16 @@
+/**
+ * Shared border radius options used across UI components.
+ * - rounded: Default border radius (rounded-md)
+ * - square: No border radius (sharp corners)
+ * - full: Fully rounded (pill/circle shape)
+ */
+export const RADIUS_OPTIONS = ["rounded", "square", "full"];
+/**
+ * Default Tailwind class mappings for radius options.
+ * Components may override with compound variants for size-specific behaviour.
+ */
+export const RADIUS_CLASSES = {
+    full: "rounded-full",
+    rounded: "rounded-lg",
+    square: "rounded-none",
+};

package/dist/tokens/responsive-classes.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Pre-defined class maps for responsive utilities.
+ * All classes are spelled out explicitly for Tailwind static analysis.
+ */
+import type { FlexAlign } from "./alignment.js";
+import type { FlexDirection } from "./direction.js";
+import type { FlexJustify } from "./justify.js";
+import type { ComponentSize } from "./size.js";
+import type { FlexWrap } from "./wrap.js";
+/** Extended gap size including none and 3xs */
+export declare const GAP_SIZES: readonly ["none", "3xs", "2xs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl"];
+export type GapSize = (typeof GAP_SIZES)[number];
+/**
+ * GAP_CLASS utility.
+ */
+export declare const GAP_CLASS: Record<GapSize, string>;
+/**
+ * GAP_X_CLASS utility.
+ */
+export declare const GAP_X_CLASS: Record<GapSize, string>;
+/**
+ * GAP_Y_CLASS utility.
+ */
+export declare const GAP_Y_CLASS: Record<GapSize, string>;
+/**
+ * DIRECTION_CLASS utility.
+ */
+export declare const DIRECTION_CLASS: Record<FlexDirection, string>;
+/**
+ * JUSTIFY_CLASS utility.
+ */
+export declare const JUSTIFY_CLASS: Record<FlexJustify, string>;
+/**
+ * ALIGN_CLASS utility.
+ */
+export declare const ALIGN_CLASS: Record<FlexAlign, string>;
+/**
+ * WRAP_CLASS utility.
+ */
+export declare const WRAP_CLASS: Record<FlexWrap, string>;
+/**
+ * GRID_COLS_CLASS utility.
+ */
+export declare const GRID_COLS_CLASS: {
+    1: string;
+    10: string;
+    11: string;
+    12: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+};
+/**
+ * COL_SPAN_CLASS utility.
+ */
+export declare const COL_SPAN_CLASS: {
+    1: string;
+    10: string;
+    11: string;
+    12: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    auto: string;
+    full: string;
+};
+/**
+ * COL_START_CLASS utility.
+ */
+export declare const COL_START_CLASS: {
+    1: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    auto: string;
+};
+/**
+ * WIDTH_CLASS utility.
+ */
+export declare const WIDTH_CLASS: Record<ComponentSize, string>;
+/**
+ * HEIGHT_CLASS utility.
+ */
+export declare const HEIGHT_CLASS: Record<ComponentSize, string>;
+/**
+ * PADDING_X_CLASS utility.
+ */
+export declare const PADDING_X_CLASS: Record<ComponentSize, string>;
+/**
+ * PADDING_Y_CLASS utility.
+ */
+export declare const PADDING_Y_CLASS: Record<ComponentSize, string>;
+/**
+ * CARD_INSET_CLASS utility. Each class sets `--card-inset`, which the Card root
+ * and its parts read. Defined as `@utility` rules in styles/index.css.
+ */
+export declare const CARD_INSET_CLASS: Record<ComponentSize | "none", string>;
+/**
+ * MAX_WIDTH_CLASS utility.
+ */
+export declare const MAX_WIDTH_CLASS: Record<ComponentSize, string>;
+/**
+ * Canonical page gutter shared by the Container and Section page shells:
+ * `px-4` collapsing to `px-6` from the `sm` breakpoint. Matches the de-facto
+ * app-frame literal used across brands and admin pages.
+ */
+export declare const PAGE_GUTTER_INSET: {
+    base: "base";
+    sm: "xl";
+};
+/**
+ * Container max-width scale. Maps directly onto Tailwind's `max-w-*` tokens so
+ * `size="7xl"` reads as `max-w-7xl`. Wider than the shared `ComponentSize`
+ * scale because page shells routinely need the 7xl gutter.
+ */
+export type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "prose" | "full";
+/**
+ * CONTAINER_SIZE_CLASS utility.
+ */
+export declare const CONTAINER_SIZE_CLASS: Record<ContainerSize, string>;
+/**
+ * Vertical rhythm scale for page bands. Larger than the component-level
+ * `PADDING_Y_CLASS` scale because sections breathe at page scale (py-12, py-24).
+ */
+export type SectionSpace = "none" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+/**
+ * SECTION_SPACE_CLASS utility.
+ */
+export declare const SECTION_SPACE_CLASS: Record<SectionSpace, string>;
+/** Order type - supports numbers 1-12 plus special values */
+export type OrderValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "first" | "last" | "none";
+/**
+ * ORDER_CLASS utility.
+ */
+export declare const ORDER_CLASS: Record<OrderValue, string>;