@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/hooks/layout/use-flip.js

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { prefersReducedMotion } from '../use-motion.js';
+
+/**
+ * FLIP-animate the direct children of a container so they never teleport.
+ *
+ * Layout is instantaneous by default: a card that reflows into a new column
+ * when the window narrows, or that is pushed down because a sibling expanded,
+ * simply IS somewhere else on the next frame. The eye reads that as a glitch
+ * rather than as movement, and in a masonry — where one change can restack a
+ * whole column — it is disorienting.
+ *
+ * FLIP is the standard answer: measure where things were (First), let the
+ * browser lay them out (Last), transform them back to where they came from
+ * (Invert), then release the transform (Play). Only `transform` is animated,
+ * so it runs on the compositor and does not re-lay-out anything per frame.
+ *
+ * Positions are read in a layout effect after every commit, which is why this
+ * catches expansion, insertion, removal and re-ordering without being told
+ * about them; a ResizeObserver covers the reflows that no render accompanies,
+ * such as the window being dragged wider.
+ *
+ * Honours the app's motion preference (`useMotion`), which defaults to
+ * `prefers-reduced-motion` but can be overridden — someone who has asked for
+ * less movement gets the instant layout, and someone whose OS says so but who
+ * wants it anyway can have it.
+ */
+function useFlip(ref, { duration = 280, easing = 'cubic-bezier(0.2, 0.8, 0.3, 1)', animateEntry = true, enabled = true, } = {}) {
+    const previous = React.useRef(new Map());
+    const running = React.useRef(new Map());
+    /*
+     * Positions come from `offsetLeft`/`offsetTop`, not from
+     * `getBoundingClientRect()`, and both reasons matter.
+     *
+     * A client rect is viewport-relative, so a page that has scrolled between
+     * two measurements makes every child look like it moved by the scroll delta
+     * — FLIP then animates the whole list back through a journey it never took.
+     *
+     * Worse, a client rect INCLUDES any transform currently applied. Measuring
+     * while this hook's own animations are still in flight records the
+     * transformed position as the next baseline, so the following commit sees a
+     * move that never happened and animates again — a loop that shudders the
+     * grid on every render and animates nothing real. Proven by comparing
+     * `offsetTop` across an open: identical, while nine sections were animating.
+     *
+     * Offsets are layout positions. They ignore transforms and they ignore
+     * scrolling, which is exactly the question being asked.
+     */
+    const measure = React.useCallback(() => {
+        const map = new Map();
+        const el = ref.current;
+        if (!el)
+            return map;
+        for (const child of Array.from(el.children)) {
+            map.set(child, { left: child.offsetLeft, top: child.offsetTop });
+        }
+        return map;
+    }, [ref]);
+    const play = React.useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (!enabled || prefersReducedMotion()) {
+            previous.current = measure();
+            return;
+        }
+        const before = previous.current;
+        for (const child of Array.from(el.children)) {
+            const last = { left: child.offsetLeft, top: child.offsetTop };
+            const first = before.get(child);
+            if (!first) {
+                if (!animateEntry)
+                    continue;
+                /*
+                 * Something that has just appeared has no previous place to come
+                 * from, so it arrives instead of travelling: a short fade and a
+                 * fractional scale, which reads as "this is new" without the lurch
+                 * of sliding in from an arbitrary direction.
+                 */
+                running.current.get(child)?.cancel();
+                running.current.set(child, child.animate([
+                    { opacity: 0, transform: 'scale(0.97)' },
+                    { opacity: 1, transform: 'none' },
+                ], { duration: duration * 0.7, easing, fill: 'none' }));
+                continue;
+            }
+            const dx = first.left - last.left;
+            const dy = first.top - last.top;
+            // Sub-pixel drift is not movement; animating it costs frames and shows
+            // nothing.
+            if (Math.abs(dx) < 1 && Math.abs(dy) < 1)
+                continue;
+            // Cancel rather than stack: a child caught mid-travel should re-aim from
+            // where it is now, not queue a second journey.
+            running.current.get(child)?.cancel();
+            running.current.set(child, child.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], {
+                duration,
+                easing,
+                fill: 'none',
+            }));
+        }
+        previous.current = measure();
+    }, [ref, measure, duration, easing, animateEntry, enabled]);
+    // After every commit: catches expansion, insertion, removal, re-ordering.
+    React.useLayoutEffect(() => {
+        play();
+    });
+    // And the reflows no render accompanies — the window being dragged wider.
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const observer = new ResizeObserver(() => play());
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref, play]);
+    React.useEffect(() => {
+        const inFlight = running.current;
+        return () => {
+            for (const animation of inFlight.values())
+                animation.cancel();
+            inFlight.clear();
+        };
+    }, []);
+}
+
+export { useFlip };
+//# sourceMappingURL=use-flip.js.map

package/dist/hooks/layout/use-flip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-flip.js","sources":["../../../src/hooks/layout/use-flip.ts"],"sourcesContent":["import * as React from 'react';\nimport { prefersReducedMotion } from '../use-motion';\n\nexport interface UseFlipOptions {\n  /** Milliseconds for a child to travel to its new place. */\n  duration?: number;\n  /** Easing for that travel. Defaults to the theme's standard curve. */\n  easing?: string;\n  /** Animate children that appear, as well as ones that move. */\n  animateEntry?: boolean;\n  /** Turn the whole thing off without unmounting the hook. */\n  enabled?: boolean;\n}\n\n/**\n * FLIP-animate the direct children of a container so they never teleport.\n *\n * Layout is instantaneous by default: a card that reflows into a new column\n * when the window narrows, or that is pushed down because a sibling expanded,\n * simply IS somewhere else on the next frame. The eye reads that as a glitch\n * rather than as movement, and in a masonry — where one change can restack a\n * whole column — it is disorienting.\n *\n * FLIP is the standard answer: measure where things were (First), let the\n * browser lay them out (Last), transform them back to where they came from\n * (Invert), then release the transform (Play). Only `transform` is animated,\n * so it runs on the compositor and does not re-lay-out anything per frame.\n *\n * Positions are read in a layout effect after every commit, which is why this\n * catches expansion, insertion, removal and re-ordering without being told\n * about them; a ResizeObserver covers the reflows that no render accompanies,\n * such as the window being dragged wider.\n *\n * Honours the app's motion preference (`useMotion`), which defaults to\n * `prefers-reduced-motion` but can be overridden — someone who has asked for\n * less movement gets the instant layout, and someone whose OS says so but who\n * wants it anyway can have it.\n */\nexport function useFlip<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n  {\n    duration = 280,\n    easing = 'cubic-bezier(0.2, 0.8, 0.3, 1)',\n    animateEntry = true,\n    enabled = true,\n  }: UseFlipOptions = {},\n) {\n  const previous = React.useRef(new Map<Element, { left: number; top: number }>());\n  const running = React.useRef(new Map<Element, Animation>());\n\n  /*\n   * Positions come from `offsetLeft`/`offsetTop`, not from\n   * `getBoundingClientRect()`, and both reasons matter.\n   *\n   * A client rect is viewport-relative, so a page that has scrolled between\n   * two measurements makes every child look like it moved by the scroll delta\n   * — FLIP then animates the whole list back through a journey it never took.\n   *\n   * Worse, a client rect INCLUDES any transform currently applied. Measuring\n   * while this hook's own animations are still in flight records the\n   * transformed position as the next baseline, so the following commit sees a\n   * move that never happened and animates again — a loop that shudders the\n   * grid on every render and animates nothing real. Proven by comparing\n   * `offsetTop` across an open: identical, while nine sections were animating.\n   *\n   * Offsets are layout positions. They ignore transforms and they ignore\n   * scrolling, which is exactly the question being asked.\n   */\n  const measure = React.useCallback(() => {\n    const map = new Map<Element, { left: number; top: number }>();\n    const el = ref.current;\n    if (!el) return map;\n    for (const child of Array.from(el.children) as HTMLElement[]) {\n      map.set(child, { left: child.offsetLeft, top: child.offsetTop });\n    }\n    return map;\n  }, [ref]);\n\n  const play = React.useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (!enabled || prefersReducedMotion()) {\n      previous.current = measure();\n      return;\n    }\n\n    const before = previous.current;\n    for (const child of Array.from(el.children) as HTMLElement[]) {\n      const last = { left: child.offsetLeft, top: child.offsetTop };\n      const first = before.get(child);\n\n      if (!first) {\n        if (!animateEntry) continue;\n        /*\n         * Something that has just appeared has no previous place to come\n         * from, so it arrives instead of travelling: a short fade and a\n         * fractional scale, which reads as \"this is new\" without the lurch\n         * of sliding in from an arbitrary direction.\n         */\n        running.current.get(child)?.cancel();\n        running.current.set(\n          child,\n          child.animate(\n            [\n              { opacity: 0, transform: 'scale(0.97)' },\n              { opacity: 1, transform: 'none' },\n            ],\n            { duration: duration * 0.7, easing, fill: 'none' },\n          ),\n        );\n        continue;\n      }\n\n      const dx = first.left - last.left;\n      const dy = first.top - last.top;\n      // Sub-pixel drift is not movement; animating it costs frames and shows\n      // nothing.\n      if (Math.abs(dx) < 1 && Math.abs(dy) < 1) continue;\n\n      // Cancel rather than stack: a child caught mid-travel should re-aim from\n      // where it is now, not queue a second journey.\n      running.current.get(child)?.cancel();\n      running.current.set(\n        child,\n        child.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], {\n          duration,\n          easing,\n          fill: 'none',\n        }),\n      );\n    }\n\n    previous.current = measure();\n  }, [ref, measure, duration, easing, animateEntry, enabled]);\n\n  // After every commit: catches expansion, insertion, removal, re-ordering.\n  React.useLayoutEffect(() => {\n    play();\n  });\n\n  // And the reflows no render accompanies — the window being dragged wider.\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(() => play());\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref, play]);\n\n  React.useEffect(() => {\n    const inFlight = running.current;\n    return () => {\n      for (const animation of inFlight.values()) animation.cancel();\n      inFlight.clear();\n    };\n  }, []);\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/use-motion.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `system` follows `prefers-reduced-motion`; the other two override it.
+ *
+ * The OS setting is the right DEFAULT and the wrong prison. Someone may have
+ * switched Windows animations off years ago for a laptop that no longer
+ * exists, or turned them off for one badly-behaved app; either way they are
+ * then told, silently, that this app cannot animate. Equally, someone who
+ * genuinely needs less movement must be able to keep it off in an app that
+ * otherwise ignores them. So it is a real preference, defaulting to the
+ * system's answer.
+ */
+export type Motion = 'system' | 'full' | 'reduced';
+/** Set once before render so the first frame is already correct. */
+export declare function initializeMotion(): void;
+/**
+ * Whether motion should be suppressed, and how to change that.
+ *
+ * Prefer this over reading `prefers-reduced-motion` directly: a component that
+ * asks the media query cannot be overridden by the app's own setting.
+ */
+export declare function useMotion(): {
+    setMotion: (motion: Motion) => void;
+    motion: Motion;
+    reduced: boolean;
+};
+/** The question most callers actually have. */
+export declare function useReducedMotion(): boolean;
+/** For the non-React paths — animation helpers that run outside a component. */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=use-motion.d.ts.map

package/dist/hooks/use-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion.d.ts","sourceRoot":"","sources":["../../src/hooks/use-motion.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAwDnD,oEAAoE;AACpE,wBAAgB,gBAAgB,SAE/B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS;wBAgBgB,MAAM;;;EAM9C;AAED,+CAA+C;AAC/C,wBAAgB,gBAAgB,YAE/B;AAED,gFAAgF;AAChF,wBAAgB,oBAAoB,YAMnC"}

package/dist/hooks/use-motion.js

@@ -0,0 +1,93 @@
+import { useSyncExternalStore, useCallback } from 'react';
+
+const MOTION_STORAGE_KEY = 'motion';
+const DEFAULT_MOTION = 'system';
+const listeners = new Set();
+let initialized = false;
+let current = DEFAULT_MOTION;
+let snapshot = { motion: DEFAULT_MOTION, reduced: false };
+const isMotion = (value) => value === 'system' || value === 'full' || value === 'reduced';
+const systemPrefersReduced = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const resolve = (motion) => motion === 'system' ? systemPrefersReduced() : motion === 'reduced';
+/*
+ * Mirrored onto <html> so CSS can answer the same question. A media query
+ * cannot see a preference held in JavaScript, so any rule that turns motion
+ * off needs this attribute as well as the query.
+ */
+const apply = (motion) => {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.dataset.motion = resolve(motion) ? 'reduced' : 'full';
+};
+const read = () => {
+    if (typeof window === 'undefined')
+        return DEFAULT_MOTION;
+    const stored = localStorage.getItem(MOTION_STORAGE_KEY);
+    return isMotion(stored) ? stored : DEFAULT_MOTION;
+};
+const commit = (motion) => {
+    current = motion;
+    snapshot = { motion, reduced: resolve(motion) };
+    apply(motion);
+    listeners.forEach(l => l());
+};
+const initialize = () => {
+    if (typeof window === 'undefined' || initialized)
+        return;
+    initialized = true;
+    commit(read());
+    window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', () => {
+        if (current === 'system')
+            commit('system');
+    });
+    window.addEventListener('storage', (e) => {
+        if (e.key === null || e.key === MOTION_STORAGE_KEY)
+            commit(read());
+    });
+};
+/** Set once before render so the first frame is already correct. */
+function initializeMotion() {
+    initialize();
+}
+/**
+ * Whether motion should be suppressed, and how to change that.
+ *
+ * Prefer this over reading `prefers-reduced-motion` directly: a component that
+ * asks the media query cannot be overridden by the app's own setting.
+ */
+function useMotion() {
+    const value = useSyncExternalStore(listener => {
+        initialize();
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    }, () => {
+        initialize();
+        return snapshot;
+    }, () => ({ motion: DEFAULT_MOTION, reduced: false }));
+    const setMotion = useCallback((motion) => {
+        if (typeof window !== 'undefined')
+            localStorage.setItem(MOTION_STORAGE_KEY, motion);
+        commit(motion);
+    }, []);
+    return { ...value, setMotion };
+}
+/** The question most callers actually have. */
+function useReducedMotion() {
+    return useMotion().reduced;
+}
+/** For the non-React paths — animation helpers that run outside a component. */
+function prefersReducedMotion() {
+    if (typeof document === 'undefined')
+        return false;
+    const flag = document.documentElement.dataset.motion;
+    if (flag === 'reduced')
+        return true;
+    if (flag === 'full')
+        return false;
+    return systemPrefersReduced();
+}
+
+export { initializeMotion, prefersReducedMotion, useMotion, useReducedMotion };
+//# sourceMappingURL=use-motion.js.map

package/dist/hooks/use-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion.js","sources":["../../src/hooks/use-motion.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * `system` follows `prefers-reduced-motion`; the other two override it.\n *\n * The OS setting is the right DEFAULT and the wrong prison. Someone may have\n * switched Windows animations off years ago for a laptop that no longer\n * exists, or turned them off for one badly-behaved app; either way they are\n * then told, silently, that this app cannot animate. Equally, someone who\n * genuinely needs less movement must be able to keep it off in an app that\n * otherwise ignores them. So it is a real preference, defaulting to the\n * system's answer.\n */\nexport type Motion = 'system' | 'full' | 'reduced';\n\nconst MOTION_STORAGE_KEY = 'motion';\nconst DEFAULT_MOTION: Motion = 'system';\n\ntype MotionSnapshot = { motion: Motion; reduced: boolean };\n\nconst listeners = new Set<() => void>();\nlet initialized = false;\nlet current: Motion = DEFAULT_MOTION;\nlet snapshot: MotionSnapshot = { motion: DEFAULT_MOTION, reduced: false };\n\nconst isMotion = (value: string | null): value is Motion =>\n  value === 'system' || value === 'full' || value === 'reduced';\n\nconst systemPrefersReduced = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst resolve = (motion: Motion) =>\n  motion === 'system' ? systemPrefersReduced() : motion === 'reduced';\n\n/*\n * Mirrored onto <html> so CSS can answer the same question. A media query\n * cannot see a preference held in JavaScript, so any rule that turns motion\n * off needs this attribute as well as the query.\n */\nconst apply = (motion: Motion) => {\n  if (typeof document === 'undefined') return;\n  document.documentElement.dataset.motion = resolve(motion) ? 'reduced' : 'full';\n};\n\nconst read = (): Motion => {\n  if (typeof window === 'undefined') return DEFAULT_MOTION;\n  const stored = localStorage.getItem(MOTION_STORAGE_KEY);\n  return isMotion(stored) ? stored : DEFAULT_MOTION;\n};\n\nconst commit = (motion: Motion) => {\n  current = motion;\n  snapshot = { motion, reduced: resolve(motion) };\n  apply(motion);\n  listeners.forEach(l => l());\n};\n\nconst initialize = () => {\n  if (typeof window === 'undefined' || initialized) return;\n  initialized = true;\n  commit(read());\n  window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', () => {\n    if (current === 'system') commit('system');\n  });\n  window.addEventListener('storage', (e: StorageEvent) => {\n    if (e.key === null || e.key === MOTION_STORAGE_KEY) commit(read());\n  });\n};\n\n/** Set once before render so the first frame is already correct. */\nexport function initializeMotion() {\n  initialize();\n}\n\n/**\n * Whether motion should be suppressed, and how to change that.\n *\n * Prefer this over reading `prefers-reduced-motion` directly: a component that\n * asks the media query cannot be overridden by the app's own setting.\n */\nexport function useMotion() {\n  const value = useSyncExternalStore(\n    listener => {\n      initialize();\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    () => {\n      initialize();\n      return snapshot;\n    },\n    () => ({ motion: DEFAULT_MOTION, reduced: false }),\n  );\n\n  const setMotion = useCallback((motion: Motion) => {\n    if (typeof window !== 'undefined') localStorage.setItem(MOTION_STORAGE_KEY, motion);\n    commit(motion);\n  }, []);\n\n  return { ...value, setMotion };\n}\n\n/** The question most callers actually have. */\nexport function useReducedMotion() {\n  return useMotion().reduced;\n}\n\n/** For the non-React paths — animation helpers that run outside a component. */\nexport function prefersReducedMotion() {\n  if (typeof document === 'undefined') return false;\n  const flag = document.documentElement.dataset.motion;\n  if (flag === 'reduced') return true;\n  if (flag === 'full') return false;\n  return systemPrefersReduced();\n}\n"],"names":[],"mappings":"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"}

package/dist/index-2nHZOukj.d.ts

@@ -0,0 +1,200 @@
+import * as React from 'react';
+import React__default from 'react';
+import { a as InputBaseProps } from './input-Cp5LET5i.js';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type DatePickerProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: React__default.ReactNode;
+    helperText?: React__default.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    sizeVariant?: 'sm' | 'md';
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    name?: string;
+};
+
+type SelectAlign = 'start' | 'center' | 'end';
+type SelectSide = 'top' | 'bottom' | 'left' | 'right';
+type SelectPosition = 'item-aligned' | 'popper';
+type SelectProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    children?: React__default.ReactNode;
+};
+type SelectContentProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    position?: SelectPosition;
+    align?: SelectAlign;
+    side?: SelectSide;
+    sideOffset?: number;
+    collisionPadding?: number;
+};
+type SelectFieldContentProps = Pick<SelectContentProps, 'align' | 'className' | 'collisionPadding' | 'side' | 'sideOffset'>;
+type SelectFieldBaseProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onValueChange'> & {
+    'aria-required'?: boolean;
+    label?: React__default.ReactNode;
+    helperText?: React__default.ReactNode;
+    error?: boolean;
+    placeholder?: string;
+    fieldClassName?: string;
+    contentProps?: SelectFieldContentProps;
+    id?: string;
+    children?: React__default.ReactNode;
+    sizeVariant?: 'sm' | 'md';
+    searchThreshold?: number;
+};
+type SingleSelectFieldProps = SelectFieldBaseProps & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type MultiSelectFieldProps = SelectFieldBaseProps & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type SelectFieldProps = SingleSelectFieldProps | MultiSelectFieldProps;
+
+type FormTheme = 'inherit' | 'primary' | 'secondary' | 'destructive' | 'warning' | 'success' | 'info' | 'slate';
+
+type CheckedState = boolean | 'indeterminate';
+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;
+    /**
+     * Box size. `md` (default) is the form size; `sm` suits a dense list row and
+     * `lg` a primary confirm. The tick and the helper-text indent follow it.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface ComboboxOption {
+    /** The value written back on selection. */
+    value: string;
+    /** What the row shows. Falls back to `value`. */
+    label?: string;
+    /** Trailing muted text — a category, a count, a unit. */
+    hint?: string;
+    /** Heading this option files under. Ungrouped options render first. */
+    group?: string;
+}
+interface ComboboxProps extends InputBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'list'> {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether a value absent from `options` is allowed. Default true — this
+     * replaces a `<datalist>`, whose whole point is that typing a new one is how
+     * the vocabulary grows.
+     */
+    allowCustom?: boolean;
+    /** Shown when the filter matches nothing. */
+    emptyText?: string;
+    /** Cap on rows rendered at once. */
+    maxVisible?: number;
+}
+/**
+ * Free-text field with a suggestion list.
+ *
+ * This exists because `<datalist>` does not hold up: Chrome only reliably opens
+ * it once the user types or presses ArrowDown — a click on the field does
+ * nothing, so it reads as broken — and nothing about the popup can be styled,
+ * so it arrives as OS chrome hanging off an otherwise themed field.
+ *
+ * The panel is Select's `Surface` and Select's stylesheet, deliberately: a
+ * lookalike built from its own rules drifts the moment either is touched.
+ */
+declare function Combobox({ options, value, onValueChange, allowCustom, emptyText, maxVisible, onKeyDown, onFocus, onBlur, className, ...inputProps }: ComboboxProps): React.JSX.Element;
+
+declare function DatePicker({ value: valueProp, defaultValue, onChange, label, helperText, error, disabled, sizeVariant, placeholder, min, max, required, id, className, name, }: DatePickerProps): React.JSX.Element;
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    theme?: "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "slate" | "inherit" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
+    theme?: FormTheme;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+type SurfaceProps = {
+    align?: SelectAlign;
+    children: React.ReactNode;
+    className?: string;
+    collisionPadding?: number;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    displayOpen: boolean;
+    isClosing?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    open: boolean;
+    position?: SelectPosition;
+    side?: SelectSide;
+    sideOffset?: number;
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onKeyDown'>;
+declare function Surface({ align, children, className, collisionPadding, contentRef, displayOpen, isClosing, onKeyDown, open, position, side, sideOffset, triggerRef, ...props }: SurfaceProps): React.ReactPortal | null;
+declare function Select({ open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, disabled, children, ...props }: SelectProps): React.JSX.Element;
+/**
+ * A titled run of options — the `<optgroup>` of this select.
+ *
+ * The heading is presentational and never focusable: it names the run, it is
+ * not a thing you can pick. Labelling the group with `aria-label` rather than
+ * pointing at the heading keeps it out of the option list for a screen reader
+ * too.
+ */
+declare function SelectGroup({ label, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectValue({ children, placeholder, ...props }: React.HTMLAttributes<HTMLSpanElement> & {
+    placeholder?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectTrigger({ className, children, onClick, onKeyDown, type, asChild, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Render the caller's own element as the trigger, and drop the field styling
+     * and the chevron with it.
+     *
+     * For a control that opens a listbox without looking like a form field — a
+     * picker that states itself as an icon and a line of text, say. The caller
+     * owns every visual decision; the Select still owns the behaviour, the
+     * portaled surface and the ARIA wiring.
+     */
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SelectContent({ align, className, children, collisionPadding, onKeyDown, position, side, sideOffset, ...props }: SelectContentProps): React.JSX.Element;
+declare function SelectItem({ className, children, disabled, onClick, onMouseMove, value, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: string;
+}): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function SelectField(props: SelectFieldProps): React.JSX.Element;
+
+export { Checkbox as C, DatePicker as D, Label as L, Select as S, Combobox as b, SelectContent as h, SelectField as j, SelectGroup as l, SelectItem as m, SelectSeparator as p, SelectTrigger as r, SelectValue as s, Surface as t };
+export type { FormTheme as F, CheckboxProps as a, ComboboxOption as c, ComboboxProps as d, DatePickerProps as e, LabelProps as f, SelectAlign as g, SelectContentProps as i, SelectFieldProps as k, SelectPosition as n, SelectProps as o, SelectSide as q };