@script-it/json-views-react 0.1.0-beta.1

package/dist/lib/clipboard.js

@@ -0,0 +1,24 @@
+export async function copyTextToClipboard(value) {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        try {
+            await navigator.clipboard.writeText(value);
+            return;
+        }
+        catch { /* Fall back when the browser exposes but denies the Clipboard API. */ }
+    }
+    if (typeof document === 'undefined')
+        throw new Error('Clipboard access is unavailable');
+    const textarea = document.createElement('textarea');
+    textarea.value = value;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+        if (!document.execCommand('copy'))
+            throw new Error('Clipboard access was denied');
+    }
+    finally {
+        textarea.remove();
+    }
+}

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/file-data.d.ts

@@ -0,0 +1,7 @@
+export interface FileContentData {
+    source: {
+        base64: string;
+    };
+    mimeType?: string | null;
+}
+export declare function fileDataToText(data: FileContentData): string;

package/dist/lib/file-data.js

@@ -0,0 +1,5 @@
+export function fileDataToText(data) {
+    const binary = atob(data.source.base64);
+    const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+}

package/dist/lib/floating-portal-selectors.d.ts

@@ -0,0 +1,4 @@
+export declare const FLOATING_PORTAL_SELECTORS: {
+    readonly radixPopper: "[data-radix-popper-content-wrapper]";
+    readonly anchoredPopup: "[data-anchored-popup]";
+};

package/dist/lib/floating-portal-selectors.js

@@ -0,0 +1,4 @@
+export const FLOATING_PORTAL_SELECTORS = {
+    radixPopper: '[data-radix-popper-content-wrapper]',
+    anchoredPopup: '[data-anchored-popup]',
+};

package/dist/lib/time.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Parse a value as an ISO-8601 datetime string. Returns the epoch millis, or
+ * null when the value isn't a string in ISO datetime shape.
+ */
+export declare function parseIsoDateString(value: unknown): number | null;
+/**
+ * Format an epoch-millis timestamp as a readable local date-time, e.g.
+ * "Jul 5, 2026, 1:05 PM" (locale-dependent).
+ */
+export declare function formatAbsoluteTimestamp(timestamp: number): string;
+/** Compact relative form: "just now", "12s ago", "2m ago", "3h ago", "5d ago",
+ *  else a local date. Sub-minute rendering is per-surface: the default
+ *  `'seconds'` shows "12s ago" (with "just now" under 5s) for surfaces where
+ *  events land moments apart (e.g. a trigger's run history);
+ *  `'just-now'` collapses everything under a minute for surfaces where
+ *  second-level churn is noise (e.g. file modification times). */
+export declare function formatRelativeTimeShort(timestamp: number, { subMinute }?: {
+    subMinute?: 'seconds' | 'just-now';
+}): string;
+/**
+ * Short relative form ("2m ago") for past timestamps, null for future ones —
+ * "ago" phrasing makes no sense for a time that hasn't happened yet.
+ */
+export declare function formatRelativeTimeShortIfPast(timestamp: number): string | null;

package/dist/lib/time.js

@@ -0,0 +1,60 @@
+/**
+ * ISO-8601 datetime shape: `2026-07-05T13:05:56Z`, with optional fractional
+ * seconds and either a `Z` or `±HH[:]MM` offset (a timezone-less string parses
+ * as local time). Date-only strings and epoch numbers are deliberately NOT
+ * matched — bare `2026-07-05` or a 13-digit integer could just as well be an
+ * identifier, and misformatting data is worse than leaving it raw.
+ */
+const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?(Z|[+-]\d{2}:?\d{2})?$/;
+/**
+ * Parse a value as an ISO-8601 datetime string. Returns the epoch millis, or
+ * null when the value isn't a string in ISO datetime shape.
+ */
+export function parseIsoDateString(value) {
+    if (typeof value !== 'string' || !ISO_DATETIME_RE.test(value))
+        return null;
+    const ms = Date.parse(value);
+    return Number.isNaN(ms) ? null : ms;
+}
+/**
+ * Format an epoch-millis timestamp as a readable local date-time, e.g.
+ * "Jul 5, 2026, 1:05 PM" (locale-dependent).
+ */
+export function formatAbsoluteTimestamp(timestamp) {
+    return new Date(timestamp).toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    });
+}
+/** Compact relative form: "just now", "12s ago", "2m ago", "3h ago", "5d ago",
+ *  else a local date. Sub-minute rendering is per-surface: the default
+ *  `'seconds'` shows "12s ago" (with "just now" under 5s) for surfaces where
+ *  events land moments apart (e.g. a trigger's run history);
+ *  `'just-now'` collapses everything under a minute for surfaces where
+ *  second-level churn is noise (e.g. file modification times). */
+export function formatRelativeTimeShort(timestamp, { subMinute = 'seconds' } = {}) {
+    const now = Date.now();
+    const diffSeconds = Math.floor((now - timestamp) / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffSeconds < 60) {
+        if (subMinute === 'just-now' || diffSeconds < 5)
+            return 'just now';
+        return `${diffSeconds}s ago`;
+    }
+    if (diffMinutes < 60)
+        return `${diffMinutes}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return new Date(timestamp).toLocaleDateString();
+}
+/**
+ * Short relative form ("2m ago") for past timestamps, null for future ones —
+ * "ago" phrasing makes no sense for a time that hasn't happened yet.
+ */
+export function formatRelativeTimeShortIfPast(timestamp) {
+    return timestamp <= Date.now() ? formatRelativeTimeShort(timestamp) : null;
+}

package/dist/lib/ui-size.d.ts

@@ -0,0 +1,28 @@
+/**
+ * App-wide UI size: the three stops a user can pick in Settings → Appearance.
+ *
+ * The CSS side lives in `src/tokens/ui-size.css`, which keys the root
+ * font-size off a `data-ui-size` attribute on <html> — that cascade is what
+ * scales the whole rem-based UI. This module is the JS mirror: the stop names,
+ * the attribute contract, and the numeric multiplier for consumers that need
+ * the scale outside CSS (e.g. virtualized row heights). Keep in sync with the
+ * token file.
+ */
+export declare const UI_SIZES: readonly ["small", "medium", "large"];
+export type UiSize = (typeof UI_SIZES)[number];
+/** Attribute on <html> that `tokens/ui-size.css` keys the root font-size off. */
+export declare const UI_SIZE_ATTRIBUTE = "data-ui-size";
+/** Root font-size multiplier per stop — mirrors `tokens/ui-size.css`. */
+export declare const UI_SIZE_SCALE: Record<UiSize, number>;
+/**
+ * Explorer floor width per stop, in px — the JS mirror of the
+ * `--explorer-sidebar-min-width` custom property in `tokens/ui-size.css`
+ * (which carries the same numbers for CSS-side pins). Kept as its own stop
+ * table rather than `UI_SIZE_SCALE × a base`, because the explorer's tab row
+ * grows more slowly than the root font-size: each value is that row's
+ * measured content plus a few px, so its trailing controls stay snug against
+ * the tabs at every stop. Consumed by hosts whose sizing API takes numbers
+ * (react-resizable-panels' Panel props). Keep in sync with the token file.
+ */
+export declare const EXPLORER_SIDEBAR_MIN_WIDTH_PX: Record<UiSize, number>;
+export declare function isUiSize(value: unknown): value is UiSize;

package/dist/lib/ui-size.js

@@ -0,0 +1,39 @@
+/**
+ * App-wide UI size: the three stops a user can pick in Settings → Appearance.
+ *
+ * The CSS side lives in `src/tokens/ui-size.css`, which keys the root
+ * font-size off a `data-ui-size` attribute on <html> — that cascade is what
+ * scales the whole rem-based UI. This module is the JS mirror: the stop names,
+ * the attribute contract, and the numeric multiplier for consumers that need
+ * the scale outside CSS (e.g. virtualized row heights). Keep in sync with the
+ * token file.
+ */
+export const UI_SIZES = ['small', 'medium', 'large'];
+/** Attribute on <html> that `tokens/ui-size.css` keys the root font-size off. */
+export const UI_SIZE_ATTRIBUTE = 'data-ui-size';
+/** Root font-size multiplier per stop — mirrors `tokens/ui-size.css`. */
+export const UI_SIZE_SCALE = {
+    small: 1,
+    medium: 1.125,
+    large: 1.25,
+};
+/**
+ * Explorer floor width per stop, in px — the JS mirror of the
+ * `--explorer-sidebar-min-width` custom property in `tokens/ui-size.css`
+ * (which carries the same numbers for CSS-side pins). Kept as its own stop
+ * table rather than `UI_SIZE_SCALE × a base`, because the explorer's tab row
+ * grows more slowly than the root font-size: each value is that row's
+ * measured content plus a few px, so its trailing controls stay snug against
+ * the tabs at every stop. Consumed by hosts whose sizing API takes numbers
+ * (react-resizable-panels' Panel props). Keep in sync with the token file.
+ */
+export const EXPLORER_SIDEBAR_MIN_WIDTH_PX = {
+    small: 270,
+    medium: 294,
+    // 318 + 0.5rem (10px at this stop's 20px root), matching the token file's
+    // calc(): `large` needs the extra breathing room the others don't.
+    large: 328,
+};
+export function isUiSize(value) {
+    return typeof value === 'string' && UI_SIZES.includes(value);
+}

package/dist/lib/use-anchored-position.d.ts

@@ -0,0 +1,5 @@
+import { type CSSProperties, type RefObject } from 'react';
+/** Fixed popovers use viewport coordinates and stay within its visible edges. */
+export declare function useAnchoredPosition(enabled: boolean, anchorRef: RefObject<HTMLElement | null>, contentRef: RefObject<HTMLElement | null>, side?: 'bottom' | 'right', align?: 'start' | 'end', 
+/** Floors the content at the anchor's width, for an editor that replaces it. */
+matchAnchorWidth?: boolean): CSSProperties;

package/dist/lib/use-anchored-position.js

@@ -0,0 +1,65 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const PADDING = 8;
+const GAP = 4;
+/** Fixed popovers use viewport coordinates and stay within its visible edges. */
+export function useAnchoredPosition(enabled, anchorRef, contentRef, side = 'bottom', align = 'start', 
+/** Floors the content at the anchor's width, for an editor that replaces it. */
+matchAnchorWidth = false) {
+    const [position, setPosition] = useState();
+    const update = () => {
+        const anchor = anchorRef.current;
+        const content = contentRef.current;
+        if (!enabled || !anchor || !content)
+            return;
+        const local = anchor.getBoundingClientRect();
+        const frame = anchor.ownerDocument.defaultView?.frameElement;
+        const offset = frame?.getBoundingClientRect();
+        const bounds = { left: local.left + (offset?.left ?? 0), right: local.right + (offset?.left ?? 0), top: local.top + (offset?.top ?? 0), bottom: local.bottom + (offset?.top ?? 0) };
+        const size = content.getBoundingClientRect();
+        const width = Math.min(size.width, window.innerWidth - PADDING * 2);
+        const height = Math.min(size.height, window.innerHeight - PADDING * 2);
+        const fitsBelow = bounds.bottom + GAP + height <= window.innerHeight - PADDING;
+        const fitsRight = bounds.right + GAP + width <= window.innerWidth - PADDING;
+        const left = side === 'right'
+            ? fitsRight ? bounds.right + GAP : bounds.left - width - GAP
+            : align === 'end' ? bounds.right - width : bounds.left;
+        const top = side === 'bottom'
+            ? fitsBelow ? bounds.bottom + GAP : bounds.top - height - GAP
+            : bounds.top;
+        const next = {
+            left: Math.max(PADDING, Math.min(left, window.innerWidth - width - PADDING)),
+            top: Math.max(PADDING, Math.min(top, window.innerHeight - height - PADDING)),
+            minWidth: matchAnchorWidth ? Math.min(bounds.right - bounds.left, window.innerWidth - PADDING * 2) : undefined,
+        };
+        setPosition((current) => current?.left === next.left && current.top === next.top && current.minWidth === next.minWidth ? current : next);
+    };
+    useBrowserLayoutEffect(update);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+        if (anchorRef.current)
+            observer?.observe(anchorRef.current);
+        if (contentRef.current)
+            observer?.observe(contentRef.current);
+        anchorRef.current?.ownerDocument.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        window.addEventListener('scroll', update, true);
+        return () => {
+            anchorRef.current?.ownerDocument.removeEventListener('scroll', update, true);
+            observer?.disconnect();
+            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
+        };
+    }, [enabled, anchorRef, contentRef, side, align, matchAnchorWidth]);
+    return {
+        position: 'fixed',
+        left: position?.left ?? 0,
+        top: position?.top ?? 0,
+        minWidth: position?.minWidth,
+        maxWidth: 'calc(100vw - 16px)',
+        maxHeight: 'calc(100vh - 16px)',
+        overflowY: 'auto',
+    };
+}

package/dist/lib/use-dismiss.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+export interface UseDismissOptions {
+    /** When false the listeners are detached (the popup is closed). */
+    enabled: boolean;
+    /** Called on Escape or a click outside every `insideRefs` subtree. */
+    onDismiss: () => void;
+    /** Elements whose subtree counts as "inside" — a click within any of them
+     *  (the popup itself, its anchor row, etc.) does not dismiss. Read live at
+     *  event time, so the array identity may change between renders without
+     *  re-subscribing the listeners. */
+    insideRefs: Array<RefObject<HTMLElement | null>>;
+    /** Delay (ms) before arming click-outside, so the click that opened the popup
+     *  doesn't immediately dismiss it. Only needed when the opening click lands
+     *  outside every `insideRefs` subtree. @default 0 */
+    armDelayMs?: number;
+    /** Also treat clicks inside any portalled `[data-anchored-popup]` layer as
+     *  inside — for popups that themselves contain nested `AnchoredPopup`s (e.g.
+     *  a widget dropdown), which render at `document.body` and so escape the
+     *  `insideRefs` subtree checks. @default false */
+    ignoreAnchoredPopups?: boolean;
+    /** Host-owned layers that should not dismiss this popup. */
+    ignoreSelectors?: readonly string[];
+}
+/**
+ * Click-outside + Escape dismissal for portalled popups. Treats Radix popper
+ * content (menus, tooltips) — which renders at `document.body`, outside any
+ * anchor subtree — as inside, so interacting with a popup's own menu never
+ * dismisses it. Shared by `AnchoredPopup` and the inputs-table inline editor so
+ * dismissal behaves identically across portalled surfaces.
+ */
+export declare function useDismiss({ enabled, onDismiss, insideRefs, armDelayMs, ignoreAnchoredPopups, ignoreSelectors, }: UseDismissOptions): void;

package/dist/lib/use-dismiss.js

@@ -0,0 +1,65 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { FLOATING_PORTAL_SELECTORS } from './floating-portal-selectors.js';
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/**
+ * Click-outside + Escape dismissal for portalled popups. Treats Radix popper
+ * content (menus, tooltips) — which renders at `document.body`, outside any
+ * anchor subtree — as inside, so interacting with a popup's own menu never
+ * dismisses it. Shared by `AnchoredPopup` and the inputs-table inline editor so
+ * dismissal behaves identically across portalled surfaces.
+ */
+export function useDismiss({ enabled, onDismiss, insideRefs, armDelayMs = 0, ignoreAnchoredPopups = false, ignoreSelectors = [], }) {
+    // Read `insideRefs` and `onDismiss` live inside the handler so unstable
+    // identities each render (a fresh refs array, an inline `onDismiss` closure)
+    // don't force the listeners to re-subscribe. Re-subscribing would also clear
+    // and restart the arming timer every render, so with `armDelayMs > 0` rapid
+    // renders (typing, hovering) could keep `armed` false forever and break
+    // click-outside dismissal. Synced in a layout effect — before the browser
+    // dispatches the next mousedown, so a click landing between commit and this
+    // sync reads the current refs rather than the previous render's. Never
+    // written during render, and read only inside the event handlers below.
+    const insideRefsRef = useRef(insideRefs);
+    const onDismissRef = useRef(onDismiss);
+    useBrowserLayoutEffect(() => {
+        insideRefsRef.current = insideRefs;
+        onDismissRef.current = onDismiss;
+    });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let armed = armDelayMs === 0;
+        const handlePointerDown = (event) => {
+            if (!armed)
+                return;
+            const target = event.target instanceof Element ? event.target : null;
+            if (!target)
+                return;
+            if (insideRefsRef.current.some((ref) => ref.current?.contains(target)))
+                return;
+            if (target.closest(FLOATING_PORTAL_SELECTORS.radixPopper))
+                return;
+            if (ignoreAnchoredPopups && target.closest(FLOATING_PORTAL_SELECTORS.anchoredPopup))
+                return;
+            if (ignoreSelectors.some((selector) => target.closest(selector)))
+                return;
+            onDismissRef.current();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                onDismissRef.current();
+        };
+        const timerId = armDelayMs > 0
+            ? window.setTimeout(() => {
+                armed = true;
+            }, armDelayMs)
+            : undefined;
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            if (timerId !== undefined)
+                window.clearTimeout(timerId);
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [enabled, armDelayMs, ignoreAnchoredPopups, ignoreSelectors.join('\n')]);
+}

package/dist/primitives/boolean-toggle.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface BooleanToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: boolean;
+    onChange: (next: boolean) => void;
+    disabled?: boolean;
+    trueLabel?: string;
+    falseLabel?: string;
+}
+declare const BooleanToggle: React.ForwardRefExoticComponent<BooleanToggleProps & React.RefAttributes<HTMLDivElement>>;
+export { BooleanToggle };

package/dist/primitives/boolean-toggle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const BooleanToggle = React.forwardRef(({ className, value, onChange, disabled = false, trueLabel = 'True', falseLabel = 'False', ...props }, ref) => {
+    const buttonClass = (selected) => cn('rounded-md border px-2.5 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50', selected
+        ? 'border-primary bg-primary text-primary-foreground'
+        : 'border-border bg-card text-foreground hover:bg-accent');
+    return (_jsxs("div", { ref: ref, className: cn('flex items-center gap-2', className), ...props, children: [_jsx("button", { type: "button", onClick: () => onChange(true), disabled: disabled, "aria-pressed": value, className: buttonClass(value), children: trueLabel }), _jsx("button", { type: "button", onClick: () => onChange(false), disabled: disabled, "aria-pressed": !value, className: buttonClass(!value), children: falseLabel })] }));
+});
+BooleanToggle.displayName = 'BooleanToggle';
+export { BooleanToggle };

package/dist/primitives/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "destructive" | "default" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/primitives/button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/cn.js';
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+            outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-10 rounded-md px-8',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+Button.displayName = 'Button';
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants };

package/dist/primitives/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/primitives/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-sm border border-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(Check, { className: "h-3 w-3" }) }) })));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/dist/primitives/choice-control.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface ChoiceOption {
+    value: string;
+    label: string;
+    color?: string;
+}
+export type ChoiceControlMode = 'single' | 'multiple';
+export type ChoiceControlProfile = 'plain' | 'pill' | 'pill-cell' | 'menu';
+export interface ChoiceControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    mode: ChoiceControlMode;
+    value: string[];
+    onValueChange: (next: string[]) => void;
+    options: ReadonlyArray<ChoiceOption>;
+    profile?: ChoiceControlProfile;
+    creatable?: boolean;
+    emptyOptionLabel?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    openOnMount?: boolean;
+    /** Lets a menu live inside another dismissible surface without blocking
+     * pointer events to that surface. Defaults to true for inline cell editors. */
+    nonModal?: boolean;
+    /** Ends an edit when the menu is dismissed, independently of saving a choice. */
+    onDismiss?: () => void;
+    onSelectionBlur?: () => void;
+    onOptionColorChange?: (optionValue: string, color: string) => void;
+}
+export declare const ChoiceControl: React.ForwardRefExoticComponent<ChoiceControlProps & React.RefAttributes<HTMLDivElement>>;