@noya-app/noya-designsystem 0.1.41 → 0.1.43

package/dist/index.d.ts

@@ -1,29 +1,30 @@
 import * as React from 'react';
-import React__default, { CSSProperties, ReactNode, InputHTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, Ref, HTMLAttributes, ComponentProps, SyntheticEvent, LabelHTMLAttributes, ReactHTML } from 'react';
-import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
-import { Size } from '@noya-app/noya-geometry';
+import React__default, { CSSProperties, ReactNode, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, HTMLAttributes, ComponentProps, SyntheticEvent, ReactHTML } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import { Property } from 'csstype';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
+import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
+import { Size } from '@noya-app/noya-geometry';
 import { useSortable } from '@dnd-kit/sortable';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
 import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
 import { KeyModifiers, PlatformName } from '@noya-app/noya-keymap';
+import { MultiplayerUser } from '@noya-app/noya-multiplayer-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectProps } from '@radix-ui/react-select';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
-interface Props$f {
+interface Props$e {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: React__default.NamedExoticComponent<Props$f>;
+declare const ActivityIndicator: React.NamedExoticComponent<Props$e>;
 
 type AnimatePresenceProps = {
     children: React__default.ReactNode;
@@ -65,6 +66,9 @@ type AvatarProps = {
     /** @default normal */
     variant?: "normal" | "bare";
     disabled?: boolean;
+    /** Intended to be used in place of a fallback monogram, like an icon */
+    children?: React__default.ReactNode;
+    onClick?: () => void;
 };
 declare const Avatar: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLDivElement>>>;
 declare const AvatarStack: React__default.NamedExoticComponent<{
@@ -99,10 +103,10 @@ interface ButtonRootProps {
 }
 declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     colorScheme?: "primary" | "secondary";
 }
-declare const Checkbox$1: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>>;
+declare const Checkbox$1: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
@@ -155,24 +159,59 @@ declare function fuzzyTokenize({ item, itemScore, }: {
     itemScore: IItemScore;
 }): IToken[];
 
-type CompletionItem = {
+type ComboboxOption = {
     type?: undefined;
     id: string;
     name: string;
     icon?: ReactNode;
     alwaysInclude?: boolean;
 };
-type CompletionSectionHeader = {
-    type: 'sectionHeader';
+type ComboboxSectionHeader = {
+    type: "sectionHeader";
     id: string;
     name: string;
     maxVisibleItems?: number;
 };
-type CompletionListItem = (CompletionItem & IScoredItem) | CompletionSectionHeader;
+type ComboboxItem = ComboboxOption | ComboboxSectionHeader;
+type InternalComboboxItem = (ComboboxOption & IScoredItem) | ComboboxSectionHeader;
+type ComboboxStateSnapshot = {
+    filter: string;
+    selectedIndex: number;
+    filteredItems: InternalComboboxItem[];
+    lastSubmittedValue: {
+        filter: string;
+        itemName: string;
+    };
+};
+declare class ComboboxState {
+    private filter;
+    private selectedIndex;
+    private items;
+    private lastSubmittedValue;
+    private subscribers;
+    private version;
+    private _cachedSnapshot;
+    constructor(items: ComboboxItem[], initialValue: string, allowArbitraryValues: boolean);
+    subscribe: (listener: () => void) => (() => void);
+    private notifyChange;
+    private getFilteredItems;
+    getSnapshot: () => ComboboxStateSnapshot;
+    setItems(items: ComboboxItem[]): void;
+    setFilter(filter: string): void;
+    moveSelection(direction: "up" | "down"): void;
+    selectCurrentItem(item?: InternalComboboxItem): InternalComboboxItem | undefined;
+    restoreLastSubmittedValue(): void;
+    reset(newFilter?: string): void;
+    getSelectedItem(): InternalComboboxItem | undefined;
+    getTypeaheadValue(): string | undefined;
+    setSelectedIndex(index: number): void;
+    submitArbitraryFilter(filter: string): void;
+}
+declare function useComboboxState(state: ComboboxState): ComboboxStateSnapshot;
 
 type IconName = keyof typeof Icons;
 
-declare function renderIcon(iconName: Exclude<ReactNode, string> | IconName): ReactNode;
+declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.ReactNode;
 
 declare const SEPARATOR_ITEM = "separator";
 type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
@@ -188,11 +227,12 @@ type RegularMenuItem<T extends string> = {
 };
 type MenuItem<T extends string> = typeof SEPARATOR_ITEM | RegularMenuItem<T>;
 type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
+declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
 declare const KeyboardShortcut: React__default.NamedExoticComponent<{
     shortcut: string;
 }>;
 
-type Props$e = {
+type Props$d = {
     id?: string;
     style?: any;
     className?: string;
@@ -210,15 +250,15 @@ type Props$e = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$e & {
+type ReadOnlyProps = Props$d & {
     readOnly: true;
 };
-type ControlledProps = Props$e & {
+type ControlledProps = Props$d & {
     onChange: (value: string) => void;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
 };
-type SubmittableProps = Props$e & {
+type SubmittableProps = Props$d & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -237,12 +277,13 @@ type InputFieldInputProps = TextInputProps & {
     textAlign?: Property.TextAlign;
     variant?: "bare";
 };
-type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit"> & {
+type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit" | "readOnly"> & {
     value: number | undefined;
     onNudge?: (value: number) => void;
     variant?: "bare";
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
+    readOnly?: boolean;
 } & ({
     onChange: (value: number) => void;
 } | {
@@ -251,33 +292,40 @@ type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "o
 declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React__default.JSX.Element;
 interface InputFieldRootProps {
     id?: string;
-    flex?: string;
     children?: ReactNode;
     width?: number;
     /** @default end */
     labelPosition?: LabelPosition;
     labelSize?: number;
-    hasDropdown?: boolean;
     /** @default medium */
     size?: InputFieldSize;
     renderPopoverContent?: (options: {
         width: number;
     }) => ReactNode;
+    /**
+     * if there is a popover, this is the offset from the trigger
+     * @default 3
+     */
+    sideOffset?: number;
     onFocusChange?: (isFocused: boolean) => void;
     style?: React__default.CSSProperties;
     className?: string;
 }
-declare function InputFieldRoot({ id, flex, children, width, labelPosition, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
+declare function InputFieldRoot({ id, children, width, labelPosition, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
 declare namespace InputField {
     const Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
     const Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
     const Typeahead: React__default.MemoExoticComponent<(props: {
         prefix: string;
         value: string;
+        isFocused: boolean;
     }) => React__default.JSX.Element>;
     const NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
     const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
-    const Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>>;
+    const Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
+        buttonClassName?: string;
+        variant?: "floating" | "normal";
+    } & React__default.RefAttributes<HTMLButtonElement>>>;
     const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
     const PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
         readOnly?: boolean;
@@ -285,30 +333,75 @@ declare namespace InputField {
     } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
 }
 
+type BaseComboboxProps = {
+    id?: string;
+    loading?: boolean;
+    placeholder?: string;
+    items: ComboboxItem[];
+    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    onDeleteWhenEmpty?: () => void;
+    size?: InputFieldSize;
+    style?: React__default.CSSProperties;
+    className?: string;
+    label?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    hideMenuWhenEmptyValue?: boolean;
+    readOnly?: boolean;
+    tabBehavior?: "autocomplete" | "select";
+    openMenuBehavior?: "showAllItems" | "showFilteredItems";
+};
+type StringModeOnlyProps = {
+    mode: "string";
+    initialValue?: string;
+    onChange?: (value: string) => void;
+    onSelectItem?: (value: string) => void;
+    onBlur?: (didSubmit: boolean, value: string) => void;
+    onHoverItem?: (value: string | undefined) => void;
+    allowArbitraryValues?: boolean;
+};
+type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
+type OptionModeOnlyProps = {
+    mode?: "option";
+    initialValue?: ComboboxOption;
+    onChange?: (value: ComboboxOption) => void;
+    onSelectItem?: (value: ComboboxOption) => void;
+    onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
+    onHoverItem?: (value: ComboboxOption | undefined) => void;
+    allowArbitraryValues?: false;
+};
+type OptionModeProps = BaseComboboxProps & OptionModeOnlyProps;
+type ComboboxProps = StringModeProps | OptionModeProps;
+interface ComboboxRef {
+    focus(): void;
+    setValue(value: string | ComboboxOption): void;
+    selectAllInputText(): void;
+}
+declare const Combobox: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ComboboxProps & React__default.RefAttributes<ComboboxRef>>>;
+
 type RelativeDropPosition = "above" | "below" | "inside";
 type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
 declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
 type UseSortableReturnType = ReturnType<typeof useSortable>;
-interface ItemProps$2<T> {
+interface ItemProps$1<T> {
     id: string;
     disabled?: boolean;
     children: (props: {
-        ref: Ref<T>;
+        ref: React.Ref<T>;
         relativeDropPosition?: RelativeDropPosition;
         [key: string]: any;
     } & UseSortableReturnType["attributes"]) => JSX.Element;
 }
 interface RootProps {
     keys: string[];
-    children: ReactNode;
-    renderOverlay?: (index: number) => ReactNode;
+    children: React.ReactNode;
+    renderOverlay?: (index: number) => React.ReactNode;
     onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
     acceptsDrop?: DropValidator;
     axis?: "x" | "y";
 }
 declare namespace Sortable {
-    const Item: <T extends HTMLElement>(props: ItemProps$2<T>) => React__default.ReactElement | null;
-    const Root: (props: RootProps) => React__default.ReactElement | null;
+    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React.ReactElement | null;
+    const Root: (props: RootProps) => React.ReactElement | null;
 }
 
 type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
@@ -435,40 +528,15 @@ declare namespace ListView {
     const normalizeDestinationIndex: (index: number, position: "above" | "below") => number;
 }
 
-interface CompletionMenuProps {
-    items: CompletionListItem[];
+interface ComboboxMenuProps {
+    items: InternalComboboxItem[];
     selectedIndex: number;
-    onSelectItem: (item: CompletionListItem) => void;
+    onSelectItem: (item: InternalComboboxItem) => void;
     onHoverIndex: (index: number) => void;
     listSize: Size;
-}
-declare const CompletionMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>>>;
-type InputFieldWithCompletionsProps = {
-    id?: string;
-    loading?: boolean;
-    initialValue?: string;
-    placeholder?: string;
-    items: (CompletionItem | CompletionSectionHeader)[];
-    onChange?: (value: string) => void;
-    onHoverItem?: (item: CompletionItem | undefined) => void;
-    onSelectItem?: (item: CompletionItem) => void;
-    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (didSubmit: boolean, value: string) => void;
-    onDeleteWhenEmpty?: () => void;
-    size?: InputFieldSize;
     style?: React__default.CSSProperties;
-    className?: string;
-    label?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    hideChildrenWhenFocused?: boolean;
-    hideMenuWhenEmptyValue?: boolean;
-};
-interface InputFieldWithCompletionsRef {
-    focus(): void;
-    setValue(value: string): void;
-    selectAllInputText(): void;
 }
-declare const Combobox: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldWithCompletionsProps & React__default.RefAttributes<InputFieldWithCompletionsRef>>>;
+declare const ComboboxMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ComboboxMenuProps & React__default.RefAttributes<IVirtualizedList>>>;
 
 interface MenuItemProps<T extends string> {
     value?: T;
@@ -495,7 +563,7 @@ declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<Dialo
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$d {
+interface Props$c {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -504,10 +572,11 @@ interface Props$d {
     onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
     onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
     closeOnInteractOutside?: boolean;
+    showCloseButton?: boolean;
     className?: string;
 }
-declare const Dialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
-declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
+declare const Dialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
+declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
 
 type DividerVariant = "normal" | "subtle" | "strong";
 interface DividerProps {
@@ -545,21 +614,21 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$c {
+interface Props$b {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<HTMLButtonElement>>>;
+declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<HTMLButtonElement>>>;
 
-declare const PatternPreviewBackground: React__default.NamedExoticComponent<{
+declare const PatternPreviewBackground: React.NamedExoticComponent<{
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
 }>;
-interface Props$b {
+interface Props$a {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: React__default.NamedExoticComponent<Props$b>;
+declare const FillPreviewBackground: React.NamedExoticComponent<Props$a>;
 
 interface FloatingWindowProps {
     title?: string;
@@ -580,7 +649,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$a {
+interface Props$9 {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -589,10 +658,10 @@ interface Props$a {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: React__default.NamedExoticComponent<Props$a>;
+declare const GradientPicker: React.NamedExoticComponent<Props$9>;
 
 type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-interface ItemProps$1<MenuItemType extends string = string> {
+interface ItemProps<MenuItemType extends string = string> {
     id: string;
     title?: ReactNode;
     subtitle?: ReactNode;
@@ -629,19 +698,19 @@ declare function GridViewSectionHeader({ title }: {
 }): React__default.JSX.Element;
 declare namespace GridView {
     const Root: React__default.MemoExoticComponent<typeof GridViewRoot>;
-    const Item: React__default.MemoExoticComponent<(<MenuItemType extends string>(props: ItemProps$1<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null)>;
+    const Item: React__default.MemoExoticComponent<(<MenuItemType extends string>(props: ItemProps<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null)>;
     const Section: React__default.MemoExoticComponent<typeof GridViewSection>;
     const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
 }
 
-declare const IconButton: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
     iconName: IconName;
     className?: string;
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     selected?: boolean;
     color?: string;
     size?: number;
-} & React__default.RefAttributes<HTMLButtonElement>>>;
+} & React.RefAttributes<HTMLButtonElement>>>;
 
 declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     header?: React__default.ReactNode;
@@ -653,21 +722,30 @@ declare const InspectorContainer: React__default.MemoExoticComponent<React__defa
     style?: React__default.CSSProperties;
 } & React__default.RefAttributes<HTMLDivElement>>>;
 
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
 }
-declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
+declare const Label: React.MemoExoticComponent<React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>>;
 
 interface ContainerProps {
-    children: ReactNode;
+    children: React.ReactNode;
     renderLabel: (provided: {
         id: string;
         index: number;
-    }) => ReactNode;
+    }) => React.ReactNode;
 }
-declare const LabeledElementView: React__default.NamedExoticComponent<ContainerProps>;
+declare const LabeledElementView: React.NamedExoticComponent<ContainerProps>;
+
+type MessageProps = {
+    role: "user" | "assistant" | "system" | "data";
+    children?: React__default.ReactNode;
+    user?: MultiplayerUser;
+    /** @default 27 */
+    avatarSize?: number;
+};
+declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
 
 type PopoverVariant = "normal" | "large";
-interface Props$9 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$8 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
@@ -678,41 +756,40 @@ interface Props$9 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content
     onClickClose?: () => void;
     showArrow?: boolean;
 }
-declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$9): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$8): React__default.JSX.Element;
 
 type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
 declare function Progress({ value, variant, className, }: {
     value: number;
     variant?: ProgressVariant;
     className?: string;
-}): React__default.JSX.Element;
+}): React.JSX.Element;
 
-type RadioGroupColorScheme = "primary" | "secondary";
-interface ItemProps {
-    value: string;
-    tooltip?: ReactNode;
-    children: ReactNode;
-    disabled?: boolean;
+interface Props$7 {
+    children?: React.ReactNode | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
 }
-interface Props$8 {
+declare const ScrollArea: React.NamedExoticComponent<Props$7>;
+
+type SegmentedControlColorScheme = "primary" | "secondary";
+interface SegmentedControlProps<T extends string> {
     id?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
+    value?: T;
+    onValueChange?: (value: T) => void;
     /** @default primary */
-    colorScheme?: RadioGroupColorScheme;
+    colorScheme?: SegmentedControlColorScheme;
     allowEmpty?: boolean;
-    children: ReactNode;
-}
-declare function ToggleGroupRoot({ id, value, onValueChange, colorScheme, allowEmpty, children, }: Props$8): React__default.JSX.Element;
-declare namespace RadioGroup {
-    const Root: React__default.MemoExoticComponent<typeof ToggleGroupRoot>;
-    const Item: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ItemProps & React__default.RefAttributes<HTMLButtonElement>>>;
-}
-
-interface Props$7 {
-    children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
+    separator?: boolean;
+    items: SegmentedControlItemProps<T>[];
+    className?: string;
+    style?: React__default.CSSProperties;
 }
-declare const ScrollArea: React__default.NamedExoticComponent<Props$7>;
+type SegmentedControlItemProps<T extends string> = {
+    title?: ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    tooltip?: ReactNode;
+} & Pick<RegularMenuItem<T>, "value" | "disabled" | "icon" | "role">;
+declare const SegmentedControl: React__default.MemoExoticComponent<(<T extends string>({ id, value, onValueChange, colorScheme, allowEmpty, items, separator, className, style, }: SegmentedControlProps<T>) => React__default.JSX.Element)>;
 
 type Props$6<T extends string> = {
     id?: string;
@@ -727,7 +804,8 @@ type Props$6<T extends string> = {
     label?: React__default.ReactNode;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
-} & Pick<SelectProps, "open">;
+} & Pick<SelectProps, "open" | "onOpenChange">;
+declare const labelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%]";
 declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement | null;
 
 type ColorScheme = "primary" | "secondary";
@@ -744,6 +822,7 @@ interface Props$5 {
     label?: React__default.ReactNode;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
+    readOnly?: boolean;
 }
 declare const Slider: React__default.NamedExoticComponent<Props$5>;
 
@@ -752,11 +831,11 @@ interface Props$4 {
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: React__default.ForwardRefExoticComponent<Props$4 & React__default.RefAttributes<HTMLSpanElement>>;
-    const Horizontal: React__default.ForwardRefExoticComponent<Props$4 & React__default.RefAttributes<HTMLSpanElement>>;
+    const Vertical: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLSpanElement>>;
+    const Horizontal: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLSpanElement>>;
 }
 
-type SwitchColorScheme = "normal" | "primary" | "secondary";
+type SwitchColorScheme = "primary" | "secondary";
 interface Props$3 {
     id?: string;
     value: boolean;
@@ -764,12 +843,12 @@ interface Props$3 {
     /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
-    onFocus?: FocusEventHandler;
-    onBlur?: FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onBlur?: React.FocusEventHandler;
     className?: string;
-    style?: CSSProperties;
+    style?: React.CSSProperties;
 }
-declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$3) => React__default.JSX.Element;
+declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$3) => React.JSX.Element;
 
 declare const config: {
     content: string[];
@@ -815,7 +894,7 @@ declare const config: {
                 "listview-editing-background": string;
                 "slider-thumb-background": string;
                 "slider-border": string;
-                "radio-group-background": string;
+                "segmented-control-item": string;
                 mask: string;
                 "transparent-checker": string;
                 scrollbar: string;
@@ -831,7 +910,6 @@ declare const config: {
                 icon: string;
                 "icon-selected": string;
                 warning: string;
-                "radio-group-item": string;
                 dot: string;
                 "row-highlight": string;
                 "table-row-background": string;
@@ -982,7 +1060,7 @@ declare const cssVars: {
         listviewEditingBackground: string;
         sliderThumbBackground: string;
         sliderBorder: string;
-        radioGroupBackground: string;
+        segmentedControlItem: string;
         mask: string;
         transparentChecker: string;
         scrollbar: string;
@@ -998,7 +1076,6 @@ declare const cssVars: {
         icon: string;
         iconSelected: string;
         warning: string;
-        radioGroupItem: string;
         dot: string;
         rowHighlight: string;
         tableRowBackground: string;
@@ -1136,11 +1213,25 @@ declare const Italic: ({ children }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
 
-declare const useAutoResize: (value: string) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
-declare const AutoResizingTextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
-    onChangeText: (value: string) => void;
+declare const useAutoResize: (value: string | undefined) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
+declare const TextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
+    onChangeText?: (value: string) => void;
     value?: string;
+    autoResize?: boolean;
 } & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextAreaRow: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<{
+    className?: string;
+    textAreaClassName?: string;
+    textAreaRef?: React__default.Ref<HTMLTextAreaElement>;
+    end?: React__default.ReactNode;
+    endClassName?: string;
+} & Omit<{
+    onChangeText?: (value: string) => void;
+    value?: string;
+    autoResize?: boolean;
+} & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>, "ref"> & {
+    ref?: ((instance: HTMLTextAreaElement | null) => void | React__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React__default.RefObject<HTMLTextAreaElement> | null | undefined;
+}, "ref"> & React__default.RefAttributes<HTMLDivElement>>>;
 
 declare const Toast: ({ title, content, children, ...props }: {
     title?: string;
@@ -1152,10 +1243,10 @@ declare const ToastProvider: ({ children }: {
 }) => React__default.JSX.Element;
 
 interface Props$2 {
-    children: ReactNode;
-    content: ReactNode;
+    children: React.ReactNode;
+    content: React.ReactNode;
 }
-declare const Tooltip: React__default.NamedExoticComponent<Props$2>;
+declare const Tooltip: React.NamedExoticComponent<Props$2>;
 
 type TreeRowBaseProps = {
     icon?: Exclude<ReactNode, string> | IconName;
@@ -1231,45 +1322,43 @@ type PanelLayoutState = {
 declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
 
 interface Props$1 {
+    id?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
     autoSavePrefix?: string;
-    leftSidebarContent?: React__default.ReactNode;
+    left?: React__default.ReactNode;
+    leftOptions?: SideOptions;
     children?: React__default.ReactNode;
-    rightSidebarContent?: React__default.ReactNode;
-    hasRightSidebar?: boolean;
-    hasLeftSidebar?: boolean;
+    right?: React__default.ReactNode;
+    rightOptions?: SideOptions;
+    toolbar?: React__default.ReactNode;
     onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-    leftSidebarCanResize?: boolean;
-    rightSidebarCanResize?: boolean;
-    id?: string;
-    className?: string;
+}
+type IWorkspaceLayout = {
+    setLeftExpanded: (expanded: boolean) => void;
+    setRightExpanded: (expanded: boolean) => void;
+    toggleSides: () => void;
+    toggleLeft: () => void;
+    toggleRight: () => void;
+};
+type SideOptions = {
     style?: React__default.CSSProperties;
+    className?: string;
+    resizable?: boolean;
     /**
      * Accepts a number (px) or % string (e.g. "50%").
      * Use % to avoid flicker server-rendering.
      */
-    leftSidebarInitialSize?: number | string;
-    leftSidebarMinSize?: number | string;
-    /**
-     * Accepts a number (px) or % string (e.g. "50%").
-     * Use % to avoid flicker server-rendering.
-     */
-    rightSidebarInitialSize?: number | string;
-    rightSidebarMinSize?: number | string;
-}
-type IWorkspaceLayout = {
-    setLeftSidebarExpanded: (expanded: boolean) => void;
-    setRightSidebarExpanded: (expanded: boolean) => void;
-    toggleAllSidebars: () => void;
-    toggleLeftSidebar: () => void;
-    toggleRightSidebar: () => void;
+    initialSize?: number | string;
+    minSize?: number | string;
 };
 declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<IWorkspaceLayout>>;
 
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
 };
-declare const DesignSystemConfigurationProvider: React__default.NamedExoticComponent<{
-    children: ReactNode;
+declare const DesignSystemConfigurationProvider: React.NamedExoticComponent<{
+    children: React.ReactNode;
     platform?: PlatformName;
 }>;
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
@@ -1281,6 +1370,10 @@ type DialogContextValue = {
         placeholder?: string;
         initialValue?: string;
     }): Promise<string | undefined>;
+    openConfirmationDialog(options: string | {
+        title: string;
+        description?: ReactNode;
+    }): Promise<boolean>;
     containsElement(element: HTMLElement): boolean;
 };
 declare const DialogProvider: ({ children, }: {
@@ -1293,6 +1386,10 @@ declare function useOpenInputDialog(): (options: string | {
     initialValue?: string;
 }) => Promise<string | undefined>;
 declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
+declare function useOpenConfirmationDialog(): (options: string | {
+    title: string;
+    description?: ReactNode;
+}) => Promise<boolean>;
 
 type FloatingWindowContextValue = {
     createWindow: (element: React__default.ReactNode) => string;
@@ -1327,8 +1424,8 @@ declare function useGlobalInputBlurTrigger(): () => void;
 type ImageDataContextValue = {
     getImageData: (ref: string) => ArrayBuffer | undefined;
 };
-declare const ImageDataProvider: React__default.NamedExoticComponent<{
-    children: ReactNode;
+declare const ImageDataProvider: React.NamedExoticComponent<{
+    children: React.ReactNode;
     getImageData?: (ref: string) => ArrayBuffer | undefined;
 }>;
 declare function useImageData(ref: string): ArrayBuffer | undefined;
@@ -1429,7 +1526,7 @@ interface Props {
     disabled?: boolean;
     trigger?: "change" | "submit";
 }
-declare const DimensionInput: React__default.NamedExoticComponent<Props>;
+declare const DimensionInput: React.NamedExoticComponent<Props>;
 
 declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
@@ -1471,4 +1568,28 @@ declare namespace InspectorPrimitives {
   export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_Row as Row, InspectorPrimitives_RowLabel as RowLabel, InspectorPrimitives_Section as Section, InspectorPrimitives_SectionHeader as SectionHeader, InspectorPrimitives_Text as Text, InspectorPrimitives_Title as Title, InspectorPrimitives_VerticalSeparator as VerticalSeparator };
 }
 
-export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, AutoResizingTextArea, Avatar, type AvatarProps, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, type InputFieldWithCompletionsProps, type InputFieldWithCompletionsRef, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, RadioGroup, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SelectMenu, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Tooltip, TreeView, type UseThemeReturnType, UserPointer, type UserPointerProps, WorkspaceLayout, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };
+interface BaseToolbarProps {
+    children?: React__default.ReactNode;
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    logo?: React__default.ReactNode;
+    showDivider?: boolean;
+}
+declare function BaseToolbar({ children, left, right, logo, showDivider, }: BaseToolbarProps): React__default.JSX.Element;
+
+interface ToolbarProps<T extends string = string> {
+    children?: React__default.ReactNode;
+    logo?: React__default.ReactNode;
+    leftMenuItems?: MenuItem<T>[];
+    rightMenuItems?: MenuItem<T>[];
+    onSelectMenuItem?: (value: T) => void;
+    /** Whether to bind keyboard shortcuts for menu items. @default true */
+    shouldBindKeyboardShortcuts?: boolean;
+}
+declare function Toolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, }: ToolbarProps<T>): React__default.JSX.Element;
+declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
+    items: MenuItem<T>[];
+    onSelectMenuItem?: (value: T) => void;
+}): React__default.JSX.Element;
+
+export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type ComboboxItem, ComboboxMenu, type ComboboxOption, type ComboboxProps, type ComboboxRef, type ComboboxSectionHeader, ComboboxState, type ComboboxStateSnapshot, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, type InternalComboboxItem, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, Message, type MessageProps, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SetNumberMode, type SideOptions, type SketchPattern, Slider, Small, Sortable, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserPointer, type UserPointerProps, WorkspaceLayout, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getKeyboardShortcutsForMenuItems, getNewValue, labelTextStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenConfirmationDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };