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

package/dist/primitives/choice-control.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Check, ChevronDown, Palette } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { OptionPill, optionColorsForValues } from './option-pill.js';
+const OPTION_COLORS = [
+    ['gray', 'bg-muted'],
+    ['blue', 'bg-muted'],
+    ['green', 'bg-muted'],
+    ['yellow', 'bg-muted'],
+    ['orange', 'bg-muted'],
+    ['red', 'bg-muted'],
+    ['purple', 'bg-muted'],
+    ['pink', 'bg-muted'],
+];
+function selectedOption(options, value) {
+    return options.find((option) => option.value === value) ?? { value, label: value };
+}
+export const ChoiceControl = React.forwardRef(({ mode, value, onValueChange, options, profile = 'plain', creatable = false, emptyOptionLabel, disabled = false, readOnly = false, invalid = false, openOnMount = false, nonModal = profile === 'pill-cell', onDismiss, onSelectionBlur, onOptionColorChange, className, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const [open, setOpen] = React.useState(openOnMount);
+    const [query, setQuery] = React.useState('');
+    const [colorOption, setColorOption] = React.useState(null);
+    const inputRef = React.useRef(null);
+    const knownOptions = React.useMemo(() => {
+        const byValue = new Map(options.map((option) => [option.value, option]));
+        value.forEach((selected) => {
+            if (!byValue.has(selected))
+                byValue.set(selected, { value: selected, label: selected });
+        });
+        const entries = [...byValue.values()];
+        const colors = optionColorsForValues(entries.map((option) => option.value), Object.fromEntries(entries.filter((option) => option.color).map((option) => [option.value, option.color])));
+        return entries.map((option) => ({ ...option, color: colors[option.value] }));
+    }, [options, value]);
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    const visibleOptions = knownOptions.filter((option) => (!normalizedQuery || option.label.toLocaleLowerCase().includes(normalizedQuery)));
+    const canCreate = Boolean(creatable
+        && query.trim()
+        && !knownOptions.some((option) => (option.value.toLocaleLowerCase() === normalizedQuery
+            || option.label.toLocaleLowerCase() === normalizedQuery)));
+    const choose = (nextValue) => {
+        if (disabled || readOnly)
+            return;
+        if (mode === 'single') {
+            onValueChange(nextValue ? [nextValue] : []);
+            setOpen(false);
+            onSelectionBlur?.();
+            return;
+        }
+        onValueChange(value.includes(nextValue)
+            ? value.filter((selected) => selected !== nextValue)
+            : [...value, nextValue]);
+    };
+    const createOption = () => {
+        const nextValue = query.trim();
+        if (!nextValue || !canCreate)
+            return;
+        setQuery('');
+        choose(nextValue);
+    };
+    const handleQueryKeyDown = (event) => {
+        if (event.key === 'Enter' && canCreate) {
+            event.preventDefault();
+            createOption();
+        }
+        if (event.key !== 'Escape')
+            event.stopPropagation();
+    };
+    const optionButtons = visibleOptions.map((option) => {
+        const active = value.includes(option.value);
+        const selectionButton = (_jsxs("button", { type: "button", "data-id": mode === 'single' ? 'pill-select-option' : 'multi-select-option', "data-value": option.value, "aria-pressed": active, disabled: disabled || readOnly, onClick: () => choose(option.value), className: cn(profile === 'plain'
+                ? 'rounded-md border px-3 py-1.5 text-sm transition-colors'
+                : 'flex min-h-8 w-full min-w-0 flex-1 items-center justify-between gap-3 rounded-md px-1.5 text-left hover:bg-accent focus-visible:bg-accent focus-visible:outline-none', profile === 'plain' && (active
+                ? 'border-primary bg-primary text-primary-foreground'
+                : 'border-border bg-card text-foreground hover:bg-accent'), 'disabled:cursor-not-allowed disabled:opacity-50'), children: [profile === 'plain'
+                    ? _jsx("span", { children: option.label })
+                    : profile === 'menu'
+                        ? _jsx("span", { className: "min-w-0 flex-1 truncate px-1.5 text-xs", children: option.label })
+                        : _jsx(OptionPill, { label: option.label, color: option.color, className: "min-w-0 max-w-full", labelClassName: "truncate" }), profile !== 'plain' && active && (_jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }))] }));
+        if (profile === 'plain' || !onOptionColorChange || readOnly)
+            return React.cloneElement(selectionButton, { key: option.value });
+        return (_jsxs("div", { className: "rounded-md", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [selectionButton, _jsx("button", { type: "button", "aria-label": `Change color for ${option.label}`, "aria-expanded": colorOption === option.value, disabled: disabled, className: "grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setColorOption((current) => current === option.value ? null : option.value);
+                            }, children: _jsx(Palette, { className: "h-3.5 w-3.5" }) })] }), colorOption === option.value && (_jsx("div", { "data-id": "option-color-palette", className: "flex items-center gap-1 px-1.5 pb-1.5 pt-0.5", children: OPTION_COLORS.map(([color, swatchClass]) => (_jsx("button", { type: "button", "aria-label": `Set ${option.label} color to ${color}`, "data-option-color": color, disabled: disabled, className: cn('h-4 w-4 rounded-full border-2 border-card shadow-sm outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring', swatchClass, option.color === color && 'ring-2 ring-ring'), onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            onOptionColorChange(option.value, color);
+                            setColorOption(null);
+                        } }, color))) }))] }, option.value));
+    });
+    if (profile === 'plain') {
+        return (_jsxs("div", { ref: ref, role: "group", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, className: cn('space-y-2', className), ...props, children: [_jsx("div", { className: "flex flex-wrap gap-2", children: optionButtons }), mode === 'multiple' && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [value.length, " selected"] }))] }));
+    }
+    const singleSelection = mode === 'single' && value[0]
+        ? selectedOption(knownOptions, value[0])
+        : undefined;
+    return (_jsx("div", { ref: ref, role: "group", className: cn('relative min-w-0', className), ...props, children: _jsxs(DropdownMenu, { modal: !nonModal, open: open, onOpenChange: (nextOpen) => {
+                setOpen(nextOpen);
+                if (nextOpen)
+                    setQuery('');
+                if (!nextOpen) {
+                    setColorOption(null);
+                    if (mode === 'multiple' && open)
+                        onSelectionBlur?.();
+                    if (open)
+                        onDismiss?.();
+                }
+            }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-id": mode === 'single' ? 'pill-select' : 'multi-select-trigger', "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, disabled: disabled, className: cn('flex w-full min-w-0 items-center gap-1 overflow-hidden text-left text-xs text-foreground outline-none focus:ring-2 focus:ring-inset focus:ring-ring/20 disabled:pointer-events-none disabled:opacity-50', profile === 'pill-cell'
+                            ? 'min-h-7 rounded-sm px-1 hover:bg-accent/40'
+                            : 'min-h-8 rounded-md border border-border bg-background px-2 py-1 hover:border-ring focus:border-ring', mode === 'single' && 'justify-between gap-2', invalid && 'border-destructive focus:border-destructive focus:ring-destructive/20'), children: [mode === 'single' ? (singleSelection
+                                ? profile === 'menu'
+                                    ? _jsx("span", { className: "min-w-0 flex-1 truncate px-0.5 text-xs", children: singleSelection.label })
+                                    : _jsx(OptionPill, { label: singleSelection.label, color: singleSelection.color })
+                                : _jsx("span", { className: "text-muted-foreground", children: emptyOptionLabel ?? 'None' })) : value.length > 0 ? (_jsx("span", { "data-id": "multi-select-preview", className: "flex min-w-0 flex-nowrap gap-1 overflow-hidden", children: value.map((selected) => {
+                                    const option = selectedOption(knownOptions, selected);
+                                    return _jsx(OptionPill, { label: option.label, color: option.color }, selected);
+                                }) })) : (_jsx("span", { className: cn('text-muted-foreground', profile !== 'pill-cell' && 'px-0.5'), children: "None" })), mode === 'single' && (_jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }))] }) }), _jsx(DropdownMenuContent, { "data-id": "input-widget-overlay", align: "start", sideOffset: 4, onOpenAutoFocus: (event) => {
+                        if (mode === 'single' && !creatable)
+                            return;
+                        event.preventDefault();
+                        inputRef.current?.focus();
+                    }, className: cn('text-foreground', mode === 'multiple'
+                        ? 'w-[min(36rem,calc(100vw-2rem))] p-0'
+                        : 'min-w-[var(--radix-dropdown-menu-trigger-width)] p-1'), children: mode === 'single' ? (_jsxs(_Fragment, { children: [creatable && !readOnly && (_jsx("div", { className: "border-b border-border p-1.5", children: _jsx("input", { ref: inputRef, "aria-label": "Filter or add options", value: query, placeholder: "Type to add an option\u2026", className: "h-8 w-full rounded-md bg-transparent px-2 text-xs outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", onChange: (event) => setQuery(event.target.value), onKeyDown: handleQueryKeyDown }) })), emptyOptionLabel && (_jsxs("button", { type: "button", "data-id": "pill-select-option", "aria-pressed": !singleSelection, className: "flex min-h-8 w-full items-center justify-between gap-3 rounded-md px-1.5 text-left hover:bg-accent focus-visible:bg-accent focus-visible:outline-none", onClick: () => choose(''), children: [_jsx("span", { className: "px-2 text-xs text-muted-foreground", children: emptyOptionLabel }), !singleSelection && _jsx(Check, { className: "h-3.5 w-3.5 text-muted-foreground" })] })), optionButtons, canCreate && (_jsxs("button", { type: "button", "data-id": "select-create", className: "flex min-h-8 w-full items-center gap-2 rounded-md px-1.5 text-left text-xs hover:bg-accent focus-visible:bg-accent focus-visible:outline-none", onClick: createOption, children: ["Add ", _jsx(OptionPill, { label: query.trim() })] })), visibleOptions.length === 0 && !canCreate && (_jsx("p", { className: "px-2 py-3 text-xs text-muted-foreground", children: "No matching options" }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-h-12 flex-wrap items-center gap-1.5 border-b border-border p-2.5", children: [value.map((selected) => {
+                                        const option = selectedOption(knownOptions, selected);
+                                        return (_jsx(OptionPill, { label: option.label, color: option.color, onRemove: readOnly ? undefined : () => choose(selected) }, selected));
+                                    }), !readOnly && (_jsx("input", { ref: inputRef, "aria-label": "Filter options", value: query, placeholder: value.length === 0 ? 'Add an option…' : '', className: "h-6 min-w-24 flex-1 bg-transparent px-1 text-xs outline-none placeholder:text-muted-foreground", onChange: (event) => setQuery(event.target.value), onKeyDown: handleQueryKeyDown }))] }), _jsxs("div", { className: "p-2", children: [_jsx("p", { className: "px-1.5 pb-1.5 text-[0.6875rem] font-medium text-muted-foreground", children: readOnly ? 'Selected options' : creatable ? 'Select an option or create one' : 'Select an option' }), _jsxs("div", { "data-id": "multi-select-options", className: "max-h-64 space-y-0.5 overflow-y-auto", children: [optionButtons, canCreate && (_jsxs("button", { type: "button", "data-id": "multi-select-create", className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-accent focus-visible:bg-accent focus-visible:outline-none", onClick: createOption, children: ["Create ", _jsx(OptionPill, { label: query.trim() })] })), visibleOptions.length === 0 && !canCreate && (_jsx("p", { className: "px-2 py-3 text-xs text-muted-foreground", children: "No matching options" }))] })] })] })) })] }) }));
+});
+ChoiceControl.displayName = 'ChoiceControl';

package/dist/primitives/dialog.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Hide the dark overlay behind the dialog */
+    hideOverlay?: boolean;
+    /** Optional styling for the overlay, including nested-dialog stacking. */
+    overlayClassName?: string;
+    /** Portal into a local surface instead of the document body. */
+    portalContainer?: HTMLElement | null;
+    /** Position the overlay and content within the portal container. */
+    contained?: boolean;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/primitives/dialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonViewsPortalContainer } from '../surface.js';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '../lib/cn.js';
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, "data-slot": "dialog-overlay", className: cn('fixed inset-0 z-[80] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, hideOverlay, overlayClassName, portalContainer, contained = false, ...props }, ref) => {
+    const defaultPortalContainer = useJsonViewsPortalContainer();
+    return (_jsxs(DialogPortal, { container: portalContainer ?? defaultPortalContainer, children: [!hideOverlay && contained && (_jsx("div", { "aria-hidden": "true", "data-slot": "dialog-overlay", "data-state": "open", className: cn('absolute inset-0 z-[80] bg-black/60 data-[state=open]:animate-in data-[state=open]:fade-in-0', overlayClassName) })), !hideOverlay && !contained && (_jsx(DialogOverlay, { className: overlayClassName })), _jsx(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-[90] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', contained && 'absolute', className), ...props, children: children })] }));
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse gap-3 sm:flex-row sm:justify-end', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/primitives/dropdown-menu.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null;
+    /**
+     * Fires when the menu opens, before Radix moves focus into the content;
+     * call `event.preventDefault()` to keep focus where it is (e.g. for
+     * hover-opened menus). Radix's Menu supports this at runtime but omits
+     * it from the public DropdownMenu.Content prop type, so it is declared
+     * here and forwarded via the props spread.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/primitives/dropdown-menu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonViewsPortalContainer } from '../surface.js';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '../lib/cn.js';
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent', inset && 'pl-8', className), ...props, children: [children, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ml-auto h-4 w-4", children: _jsx("path", { d: "m9 18 6-6-6-6" }) })] })));
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn('z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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', className), ...props })));
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+    const defaultPortalContainer = useJsonViewsPortalContainer();
+    const content = (_jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-foreground shadow-lg', className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { container: container ?? defaultPortalContainer, children: content }));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-2 w-2 fill-current", children: _jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-border', className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest opacity-60', className), ...props }));
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/primitives/inline-feedback-action.d.ts

@@ -0,0 +1,13 @@
+import type { MouseEvent, ReactNode } from 'react';
+export declare function InlineFeedbackAction({ ariaLabel, className, dataId, disabled, feedback, icon, label, onClick, tone, title, }: {
+    ariaLabel?: string;
+    className?: string;
+    dataId?: string;
+    disabled?: boolean;
+    feedback?: string;
+    icon: ReactNode;
+    label: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    tone?: 'default' | 'strong' | 'destructive';
+    title?: string;
+}): import("react").JSX.Element;

package/dist/primitives/inline-feedback-action.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function InlineFeedbackAction({ ariaLabel, className, dataId, disabled = false, feedback, icon, label, onClick, tone = 'default', title, }) {
+    const showingFeedback = Boolean(feedback);
+    return (_jsxs("button", { type: "button", "data-id": dataId, "data-feedback-active": showingFeedback ? 'true' : 'false', "aria-label": ariaLabel ?? (showingFeedback ? feedback : label), "aria-live": "polite", title: title ?? (showingFeedback ? feedback : label), disabled: disabled, className: cn('json-views-inline-feedback-action', showingFeedback && 'is-feedback', tone === 'strong' && 'is-strong', tone === 'destructive' && 'is-destructive', className), onClick: onClick, children: [icon, _jsx("span", { className: "json-views-inline-feedback-label", children: feedback })] }));
+}

package/dist/primitives/menu-select.d.ts

@@ -0,0 +1,12 @@
+import { type ChoiceOption } from './choice-control.js';
+export interface MenuSelectProps {
+    ariaLabel: string;
+    className?: string;
+    disabled?: boolean;
+    emptyOptionLabel?: string;
+    onChange: (value: string) => void;
+    options: ReadonlyArray<ChoiceOption>;
+    value: string;
+}
+/** The shared compact dropdown used inside JSON Views menus and popovers. */
+export declare function MenuSelect({ ariaLabel, className, disabled, emptyOptionLabel, onChange, options, value, }: MenuSelectProps): import("react").JSX.Element;

package/dist/primitives/menu-select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+import { ChoiceControl } from './choice-control.js';
+/** The shared compact dropdown used inside JSON Views menus and popovers. */
+export function MenuSelect({ ariaLabel, className, disabled, emptyOptionLabel, onChange, options, value, }) {
+    return (_jsx(ChoiceControl, { "aria-label": ariaLabel, className: cn('w-full', className), disabled: disabled, emptyOptionLabel: emptyOptionLabel, mode: "single", nonModal: true, options: options, profile: "menu", value: value ? [value] : [], onValueChange: (next) => onChange(next[0] ?? '') }));
+}

package/dist/primitives/multi-select.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type ChoiceControlProfile, type ChoiceOption } from './choice-control.js';
+export type MultiSelectOption = ChoiceOption;
+export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: string[];
+    onChange: (next: string[]) => void;
+    options: ReadonlyArray<string | number | MultiSelectOption>;
+    profile?: ChoiceControlProfile;
+    creatable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    openOnMount?: boolean;
+    onDismiss?: () => void;
+    onSelectionBlur?: () => void;
+    onOptionColorChange?: (optionValue: string, color: string) => void;
+}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/multi-select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChoiceControl, } from './choice-control.js';
+export const MultiSelect = React.forwardRef(({ options, onChange, profile = 'plain', creatable = false, invalid = false, ...props }, ref) => (_jsx(ChoiceControl, { ref: ref, mode: "multiple", profile: profile, creatable: creatable, invalid: invalid, options: options.map((option) => typeof option === 'object'
+        ? option
+        : { value: String(option), label: String(option) }), onValueChange: onChange, ...props })));
+MultiSelect.displayName = 'MultiSelect';

package/dist/primitives/number-input.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> {
+    value: string;
+    onChange: (value: string) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInput };

package/dist/primitives/number-input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const NumberInput = React.forwardRef(({ className, value, onChange, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, type: "text", inputMode: "decimal", value: value, onChange: (e) => onChange(e.target.value), className: cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm transition-colors focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+});
+NumberInput.displayName = 'NumberInput';
+export { NumberInput };

package/dist/primitives/option-pill.d.ts

@@ -0,0 +1,13 @@
+declare const AUTOMATIC_OPTION_COLORS: readonly ["blue", "green", "yellow", "orange", "purple", "pink", "red", "gray"];
+/** Reserve manual colors first, then balance automatic assignments across the full palette. */
+export declare function optionColorsForValues(values: readonly string[], explicit?: Readonly<Record<string, string>>, offset?: number): Record<string, (typeof AUTOMATIC_OPTION_COLORS)[number]>;
+export declare function optionColorForLabel(value: string): string;
+export interface OptionPillProps {
+    label: string;
+    color?: string;
+    onRemove?: () => void;
+    className?: string;
+    labelClassName?: string;
+}
+export declare function OptionPill({ label, color, onRemove, className, labelClassName }: OptionPillProps): import("react").JSX.Element;
+export {};

package/dist/primitives/option-pill.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const OPTION_PILL_COLORS = {
+    gray: 'bg-muted text-foreground',
+    blue: 'bg-muted text-foreground',
+    green: 'bg-muted text-foreground',
+    yellow: 'bg-muted text-foreground',
+    orange: 'bg-muted text-foreground',
+    red: 'bg-muted text-foreground',
+    purple: 'bg-muted text-foreground',
+    pink: 'bg-muted text-foreground',
+};
+const AUTOMATIC_OPTION_COLORS = ['blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'red', 'gray'];
+/** Reserve manual colors first, then balance automatic assignments across the full palette. */
+export function optionColorsForValues(values, explicit = {}, offset = 0) {
+    const colors = Object.create(null);
+    const uses = new Map(AUTOMATIC_OPTION_COLORS.map((color) => [color, 0]));
+    const start = ((offset % AUTOMATIC_OPTION_COLORS.length) + AUTOMATIC_OPTION_COLORS.length) % AUTOMATIC_OPTION_COLORS.length;
+    const rotation = [...AUTOMATIC_OPTION_COLORS.slice(start), ...AUTOMATIC_OPTION_COLORS.slice(0, start)];
+    const unique = [...new Set(values)];
+    for (const value of unique) {
+        const color = explicit[value];
+        if (!uses.has(color))
+            continue;
+        colors[value] = color;
+        uses.set(color, uses.get(color) + 1);
+    }
+    for (const value of unique) {
+        if (colors[value])
+            continue;
+        const color = rotation.reduce((best, candidate) => uses.get(candidate) < uses.get(best) ? candidate : best);
+        colors[value] = color;
+        uses.set(color, uses.get(color) + 1);
+    }
+    return colors;
+}
+export function optionColorForLabel(value) {
+    const hash = [...value].reduce((total, character) => ((total * 31) + (character.codePointAt(0) ?? 0)) >>> 0, 0);
+    return AUTOMATIC_OPTION_COLORS[hash % AUTOMATIC_OPTION_COLORS.length];
+}
+export function OptionPill({ label, color, onRemove, className, labelClassName }) {
+    const resolvedColor = color && OPTION_PILL_COLORS[color]
+        ? color
+        : optionColorForLabel(label);
+    return (_jsxs("span", { "data-id": "option-pill", "data-option-color": resolvedColor, className: cn('inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium', OPTION_PILL_COLORS[resolvedColor], className), children: [_jsx("span", { className: labelClassName, children: label }), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${label}`, className: "-mr-1 grid h-4 w-4 place-items-center rounded-sm opacity-70 hover:bg-black/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (event) => {
+                    event.stopPropagation();
+                    onRemove();
+                }, children: _jsx(X, { className: "h-3 w-3" }) }))] }));
+}

package/dist/primitives/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/primitives/tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../lib/cn.js';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow', className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/primitives/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { ref: ref, className: cn('w-full rounded-md border border-border bg-card px-3 py-1 text-sm transition-colors focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * Radix opens a tooltip on *any* focus, including the programmatic focus a
+ * dialog or popover moves onto its first focusable child when it mounts —
+ * which pops a tooltip the user never pointed at. Gate that to keyboard focus:
+ * Radix composes its own focus handler behind this one and skips it once
+ * default is prevented, so hover and real keyboard tabbing still open normally.
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ConditionalTooltipProps {
+    enabled?: boolean;
+    label: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Cross-axis alignment of the tooltip against the trigger. `'start'`
+     *  left-aligns the tooltip to the trigger when `side` is `'top'`/`'bottom'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Pixel offset along the alignment axis. With `align="start"` on a
+     *  `'top'`/`'bottom'` side, a negative value nudges the tooltip left. */
+    alignOffset?: number;
+    /** Open delay in ms. Omit to inherit the provider default; pass `0` for an
+     *  instant tooltip on hover/focus. */
+    delayDuration?: number;
+    tooltipClassName?: string;
+    children: React.ReactElement;
+}
+export declare function ConditionalTooltip({ enabled, label, side, align, alignOffset, delayDuration, tooltipClassName, children, }: ConditionalTooltipProps): React.JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/primitives/tooltip.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonViewsPortalContainer } from '../surface.js';
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../lib/cn.js';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+/**
+ * Radix opens a tooltip on *any* focus, including the programmatic focus a
+ * dialog or popover moves onto its first focusable child when it mounts —
+ * which pops a tooltip the user never pointed at. Gate that to keyboard focus:
+ * Radix composes its own focus handler behind this one and skips it once
+ * default is prevented, so hover and real keyboard tabbing still open normally.
+ */
+const TooltipTrigger = React.forwardRef(({ onFocus, ...props }, ref) => (_jsx(TooltipPrimitive.Trigger, { ref: ref, onFocus: (event) => {
+        onFocus?.(event);
+        if (!event.defaultPrevented && !event.currentTarget.matches(':focus-visible')) {
+            event.preventDefault();
+        }
+    }, ...props })));
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => {
+    const portalContainer = useJsonViewsPortalContainer();
+    return (_jsx(TooltipPrimitive.Portal, { container: portalContainer, children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn(
+            // Top of the overlay ladder (slide panels 60/70, dialog 80/90, menus
+            // 100). The content portals to `body`, so a lower value paints behind
+            // whichever surface holds the trigger.
+            'z-[110] overflow-hidden rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-lg', 'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', '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', className), ...props }) }));
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export function ConditionalTooltip({ enabled = true, label, side = 'bottom', align, alignOffset, delayDuration, tooltipClassName, children, }) {
+    if (!enabled) {
+        return children;
+    }
+    return (_jsxs(Tooltip, { delayDuration: delayDuration, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, align: align, alignOffset: alignOffset, className: tooltipClassName, children: label })] }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };