@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/components/ui/collapsible.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+import { cn } from '../../lib/utils.js';
+import { MotionCollapsePanel } from '../../motion/popup.js';
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", className: cn('flex w-full items-center justify-between', className), ...props }));
+}
+function renderCollapsePanel(props, state) {
+    return _jsx(MotionCollapsePanel, { ...props, open: state.open });
+}
+/** Animates open and shut with `presets.collapse` (motion), so callers never add their own. */
+function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", keepMounted: true, render: renderCollapsePanel, className: cn(className), ...props }));
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/combobox.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+declare function Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>({ actionsRef, onOpenChange, ...props }: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): React.JSX.Element;
+/** The field itself: an editable text input (the select trigger look) that opens the list when pressed. */
+declare function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+declare function ComboboxContent({ className, children, side, sideOffset, align, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>): React.JSX.Element;
+/** The scroll area. Group labels stick to its top edge, so it carries no top padding of its own. */
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
+/** Pinned to the top of the scroll area until the next group's label pushes it away. */
+declare function ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element;
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, };

package/dist/components/ui/combobox.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+import { Check as CheckIcon, ChevronDown as ChevronDownIcon } from '../../icons/index.js';
+function Combobox({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(ComboboxPrimitive.Root, { ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+/** The field itself: an editable text input (the select trigger look) that opens the list when pressed. */
+function ComboboxInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "combobox-input-wrapper", className: "relative w-full", children: [_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-input", className: cn('h-8 w-full truncate rounded-lg border border-input bg-transparent py-2 pr-8 pl-2.5 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40', className), ...props }), _jsx(ChevronDownIcon, { "aria-hidden": true, className: "pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-muted-foreground" })] }));
+}
+function ComboboxContent({ className, children, side = 'bottom', sideOffset = 4, align = 'start', ...props }) {
+    const renderPopup = usePopupRender();
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, className: "isolate z-(--z-dropdown)", children: _jsx(ComboboxPrimitive.Popup, { render: renderPopup, "data-slot": "combobox-content", className: cn('relative isolate z-(--z-dropdown) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10', className), ...props, children: children }) }) }));
+}
+/** The scroll area. Group labels stick to its top edge, so it carries no top padding of its own. */
+function ComboboxList({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('max-h-72 overflow-x-hidden overflow-y-auto px-1 pb-1', className), ...props }));
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('px-2 py-2 text-center text-sm text-muted-foreground empty:hidden', className), ...props }));
+}
+function ComboboxGroup({ className, ...props }) {
+    return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: className, ...props });
+}
+/** Pinned to the top of the scroll area until the next group's label pushes it away. */
+function ComboboxGroupLabel({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-group-label", className: cn('sticky top-0 z-10 bg-popover px-2 py-1.5 text-xs font-medium text-muted-foreground', className), ...props }));
+}
+function ComboboxItem({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50', className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "flex size-4 shrink-0 items-center justify-center" }), children: _jsx(CheckIcon, { "aria-hidden": true, className: "size-4" }) })] }));
+}
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, };

package/dist/components/ui/command.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog } from './dialog.js';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function CommandDialog({ children, ...props }: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, CommandDialog, };

package/dist/components/ui/command.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search as SearchIcon } from '../../icons/index.js';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent } from './dialog.js';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', className), ...props }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex items-center border-b px-3", children: [_jsx(SearchIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-72 overflow-y-auto overflow-x-hidden', className), ...props }));
+}
+function CommandEmpty({ ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props }));
+}
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn('relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), ...props }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props }));
+}
+function CommandDialog({ children, ...props }) {
+    return (_jsx(Dialog, { ...props, children: _jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", showCloseButton: false, children: _jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5", children: children }) }) }));
+}
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, CommandDialog, };

package/dist/components/ui/context-menu.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+declare function ContextMenu({ actionsRef, onOpenChange, ...props }: ContextMenuPrimitive.Root.Props): React.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function ContextMenuContent({ className, ...props }: ContextMenuPrimitive.Popup.Props): React.JSX.Element;
+declare function ContextMenuItem({ className, variant, disabled, disabledReason, ...props }: ContextMenuPrimitive.Item.Props & {
+    variant?: 'default' | 'destructive';
+    /** Disables the item and explains why on hover. Leave empty when the item is enabled. */
+    disabledReason?: React.ReactNode;
+}): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuPrimitive.CheckboxItem.Props): React.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props): React.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuPrimitive.RadioItem.Props): React.JSX.Element;
+declare function ContextMenuLabel({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props): React.JSX.Element;
+declare function ContextMenuSub({ actionsRef, onOpenChange, ...props }: ContextMenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, children, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props): React.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: ContextMenuPrimitive.Popup.Props): React.JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, };

package/dist/components/ui/context-menu.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { ChevronRight as ChevronRightIcon } from '../../icons/index.js';
+import { cn } from '../../lib/utils.js';
+import { DisabledReason } from './disabled-reason.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+function ContextMenu({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+// A touch long press is also how a webview starts a text selection or shows its callout, and it
+// starts first, so on touch devices the trigger must not be selectable.
+const TOUCH_PRESS_CLASS = 'pointer-coarse:select-none pointer-coarse:[-webkit-touch-callout:none]';
+function ContextMenuTrigger({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: typeof className === 'function'
+            ? (state) => cn(TOUCH_PRESS_CLASS, className(state))
+            : cn(TOUCH_PRESS_CLASS, className), ...props }));
+}
+function ContextMenuContent({ className, ...props }) {
+    const renderPopup = usePopupRender();
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-(--z-dropdown) outline-none", children: _jsx(ContextMenuPrimitive.Popup, { render: renderPopup, "data-slot": "context-menu-content", className: cn('z-(--z-dropdown) min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground in-data-[platform=mobile]:flex in-data-[platform=mobile]:flex-col in-data-[platform=mobile]:gap-0.5 shadow-md', className), ...props }) }) }));
+}
+function ContextMenuItem({ className, variant = 'default', disabled, disabledReason, ...props }) {
+    const item = (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-variant": variant, disabled: disabled || Boolean(disabledReason), className: cn('relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm in-data-[platform=mobile]:text-base outline-none focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50', className), ...props }));
+    return disabledReason ? (_jsx(DisabledReason, { reason: disabledReason, side: "inline-end", focusable: false, className: "flex rounded-sm", children: item })) : (item);
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+    return (_jsx(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", className: cn('relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm in-data-[platform=mobile]:text-base outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50', className), ...props, children: children }));
+}
+function ContextMenuRadioGroup({ ...props }) {
+    return _jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props });
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+    return (_jsx(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", className: cn('relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm in-data-[platform=mobile]:text-base outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50', className), ...props, children: children }));
+}
+function ContextMenuLabel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "context-menu-label", className: cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', className), ...props }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "context-menu-separator", role: "separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props }));
+}
+function ContextMenuGroup({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
+}
+function ContextMenuSub({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function ContextMenuSubTrigger({ className, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", className: cn('flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm in-data-[platform=mobile]:text-base outline-none focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function ContextMenuSubContent({ className, ...props }) {
+    const renderPopup = usePopupRender();
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-(--z-dropdown) outline-none", children: _jsx(ContextMenuPrimitive.Popup, { render: renderPopup, "data-slot": "context-menu-sub-content", className: cn('z-(--z-dropdown) min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground in-data-[platform=mobile]:flex in-data-[platform=mobile]:flex-col in-data-[platform=mobile]:gap-0.5 shadow-lg', className), ...props }) }) }));
+}
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, };

package/dist/components/ui/counter.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const counterVariants: (props?: ({
+    variant?: "default" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CounterProps extends VariantProps<typeof counterVariants> {
+    count: number;
+    max?: number;
+    className?: string;
+}
+declare function Counter({ count, max, variant, className }: CounterProps): import("react").JSX.Element | null;
+export { Counter, counterVariants, type CounterProps };

package/dist/components/ui/counter.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Swap } from '../../motion/index.js';
+import { cn } from '../../lib/utils.js';
+const counterVariants = cva('inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-body-3 font-semibold tabular-nums', {
+    variants: {
+        variant: {
+            default: 'bg-secondary text-secondary-foreground',
+            primary: 'bg-primary text-primary-foreground',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function Counter({ count, max = 99, variant, className }) {
+    if (count <= 0)
+        return null;
+    const text = count > max ? `${max}+` : String(count);
+    return (_jsx("span", { "data-slot": "counter", className: cn(counterVariants({ variant }), className), children: _jsx(Swap, { swapKey: text, inline: true, children: text }) }));
+}
+export { Counter, counterVariants };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+declare function Dialog({ actionsRef, onOpenChange, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
+declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
+declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, renderBackdrop, useModalRender, usePopupExit } from '../../motion/popup.js';
+import { presets } from '../../motion/config.js';
+import { Button } from './button.js';
+import { X as XIcon } from '../../icons/index.js';
+function Dialog({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { render: renderBackdrop, "data-slot": "dialog-overlay", className: cn('fixed inset-y-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] isolate z-(--z-modal) bg-black/10 supports-backdrop-filter:backdrop-blur-xs', className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    const renderPopup = useModalRender(presets.dialog);
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { render: renderPopup, "data-slot": "dialog-content", className: cn('fixed top-1/2 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] mx-auto z-(--z-modal) grid w-[calc(100%-var(--overlay-inset-left,0px)-var(--overlay-inset-right,0px)-var(--modal-gutter,2rem))]! -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 outline-none sm:max-w-sm', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end', className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-base leading-none font-medium', className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/disabled-reason.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from 'react';
+type DisabledReasonProps = {
+    /** Why the wrapped control is disabled. Empty means it is enabled: no tooltip, not focusable. */
+    reason?: ReactNode;
+    /** The disabled control. It still sets its own `disabled`; this only explains it. */
+    children: ReactElement;
+    side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+    /**
+     * Makes the wrapper a tab stop so keyboard users can reach the explanation, because a disabled
+     * control is skipped by Tab. Turn it off inside menus, which own their keyboard navigation.
+     */
+    focusable?: boolean;
+    className?: string;
+};
+/**
+ * Hover and focus explanation for a disabled control. A disabled control takes no pointer events
+ * (`pointer-events-none`, and no native `title`), so a tooltip or `title` on the control itself
+ * never opens; the wrapper receives the hover instead.
+ */
+declare function DisabledReason({ reason, children, side, focusable, className, }: DisabledReasonProps): import("react").JSX.Element;
+export { DisabledReason };
+export type { DisabledReasonProps };

package/dist/components/ui/disabled-reason.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+/**
+ * Hover and focus explanation for a disabled control. A disabled control takes no pointer events
+ * (`pointer-events-none`, and no native `title`), so a tooltip or `title` on the control itself
+ * never opens; the wrapper receives the hover instead.
+ */
+function DisabledReason({ reason, children, side = 'top', focusable = true, className, }) {
+    const active = Boolean(reason);
+    // The wrapper stays mounted while `reason` toggles: swapping the tree would remount the control
+    // (dropping focus and in-flight clicks) every time it flips between enabled and disabled.
+    return (_jsxs(Tooltip, { disabled: !active, children: [_jsx(TooltipTrigger, { render: _jsx("span", { "data-slot": "disabled-reason", tabIndex: active && focusable ? 0 : undefined, className: cn('inline-flex rounded-lg outline-none focus-visible:ring-3 focus-visible:ring-ring/50', className) }), children: children }), active ? _jsx(TooltipContent, { side: side, children: reason }) : null] }));
+}
+export { DisabledReason };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+declare function DropdownMenu({ actionsRef, onOpenChange, ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, disabled, disabledReason, ...props }: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+    /** Disables the item and explains why on hover. Leave empty when the item is enabled. */
+    disabledReason?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuSub({ actionsRef, onOpenChange, ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, disabled, disabledReason, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+    /** Disables the item and explains why on hover. Leave empty when the item is enabled. */
+    disabledReason?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+import { DisabledReason } from './disabled-reason.js';
+import { Check as CheckIcon, ChevronRight as ChevronRightIcon } from '../../icons/index.js';
+function DropdownMenu({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = 'start', alignOffset = 0, side = 'bottom', sideOffset = 4, className, ...props }) {
+    const renderPopup = usePopupRender();
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-(--z-dropdown) outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { render: renderPopup, "data-slot": "dropdown-menu-content", className: cn('z-(--z-dropdown) max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground in-data-[platform=mobile]:flex in-data-[platform=mobile]:flex-col in-data-[platform=mobile]:gap-0.5 shadow-md ring-1 ring-foreground/10 outline-none data-closed:overflow-hidden', className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs in-data-[platform=mobile]:text-sm font-medium text-muted-foreground data-inset:pl-7', className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = 'default', disabled, disabledReason, ...props }) {
+    const item = (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, disabled: disabled || Boolean(disabledReason), className: cn("group/dropdown-menu-item relative flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm in-data-[platform=mobile]:text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+    return disabledReason ? (_jsx(DisabledReason, { reason: disabledReason, side: "inline-end", focusable: false, className: "flex rounded-md", children: item })) : (item);
+}
+function DropdownMenuSub({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm in-data-[platform=mobile]:text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = 'start', alignOffset = -3, side = 'right', sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn('w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground in-data-[platform=mobile]:flex in-data-[platform=mobile]:flex-col in-data-[platform=mobile]:gap-0.5 shadow-lg ring-1 ring-foreground/10', className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm in-data-[platform=mobile]:text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, inset, disabled, disabledReason, ...props }) {
+    const item = (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, disabled: disabled || Boolean(disabledReason), className: cn("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm in-data-[platform=mobile]:text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return disabledReason ? (_jsx(DisabledReason, { reason: disabledReason, side: "inline-end", focusable: false, className: "flex rounded-md", children: item })) : (item);
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/editable-text.d.ts

@@ -0,0 +1,95 @@
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Typography applied to both the trigger button and the editing input so the
+ * layout does not shift when entering or leaving edit mode.
+ */
+declare const editableTextVariants: (props?: ({
+    presentation?: "h3" | "base" | "h1" | "h2" | "h4" | "h5" | "h6" | "sm" | "pageTitle" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface EditableTextProps extends Omit<ComponentProps<'span'>, 'children'>, VariantProps<typeof editableTextVariants> {
+    /** Current committed value. The component is fully controlled. */
+    value: string;
+    /**
+     * Called when the user commits an edit via Enter or blur. Receives the
+     * trimmed new value. Not called when the value is unchanged or when the
+     * input is empty (empty is silently rejected and the prior value is
+     * restored).
+     */
+    onCommit?: (value: string) => void;
+    /** Placeholder text shown when `value` is empty. */
+    placeholder?: string;
+    /**
+     * Start in edit mode on mount (the input is focused with the value selected). Used when an
+     * external action such as a "Rename" menu item mounts the control to edit right away.
+     */
+    defaultEditing?: boolean;
+    /** Fires when edit mode is entered (`true`) or left by commit or cancel (`false`). */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * Prevents entering edit mode by mouse or keyboard. The trigger button is
+     * not focusable when disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Wraps the control in a semantic heading element so screen readers can
+     * navigate to it by heading level. The `presentation` prop controls the
+     * visual size independently.
+     *
+     * Covers the `EditableHeading` use-case (chat header title, 1 call site).
+     *
+     * @example
+     * // Semantically h1 but visually h3-sized — compact chat header
+     * <EditableText as="h1" presentation="h3" value={title} onCommit={setTitle} />
+     */
+    as?: HeadingTag;
+    /**
+     * Accessible name for both the trigger button and the edit input. Defaults
+     * to the current `value` (or `placeholder` when empty). Supply this when
+     * the rendered text alone does not make the field's purpose clear.
+     */
+    'aria-label'?: string;
+}
+/**
+ * `EditableText` — inline-rename primitive.
+ *
+ * Replaces Vibe's `EditableText` (sidebar rename, 2 call sites) **and**
+ * `EditableHeading` (chat header title, 1 call site). One component covers
+ * both: use `as` for heading semantics and `presentation` for visual size.
+ *
+ * ### Accessibility contract
+ *
+ * **Read mode:** a native `<button>` — keyboard-focusable, announces as
+ * interactive, activatable via Enter or Space.
+ *
+ * **Edit mode:** a `<input type="text">` — on entry, focus moves to the
+ * input and the existing text is pre-selected so typing immediately replaces.
+ *
+ * **Commit:** Enter or blur. Blur is the right default here because it
+ * mirrors every OS file-rename pattern — clicking away is "done".
+ *
+ * **Cancel:** Escape. The _original_ value is restored (not just edit mode
+ * exited). Focus returns to the trigger button.
+ *
+ * **Empty:** blank input is rejected on commit; `onCommit` is not called and
+ * the prior value is silently restored.
+ *
+ * **Focus return:** after commit or cancel, focus returns to the trigger
+ * button — not to `document.body`.
+ *
+ * **Mode-change perception:** the native `<button>` announces as interactive.
+ * On activation focus shifts to the input, which is the screen-reader cue for
+ * the mode change. No `aria-live` region is used — it would fire twice (once
+ * on enter, once on exit) and is noisier than the natural focus-based cue.
+ * A visually-hidden `aria-describedby` hint tells SR users how to activate
+ * without lengthening the button's primary label.
+ *
+ * **Layout stability:** the trigger button and the input share identical
+ * padding and a 1 px border (transparent on the button, `border-input` on
+ * the input) so the surrounding layout does not shift on mode change.
+ */
+declare function EditableText({ value, onCommit, placeholder, disabled, defaultEditing, onEditingChange, as: Tag, presentation, align, className, 'aria-label': ariaLabel, ...rest }: EditableTextProps): import("react").JSX.Element;
+export { EditableText, editableTextVariants };
+export type { EditableTextProps };