@noya-app/noya-designsystem 0.1.21 → 0.1.23

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     209.89 KB
-ESM dist/index.mjs.map 459.25 KB
-ESM ⚡️ Build success in 295ms
-CJS dist/index.js     227.68 KB
-CJS dist/index.js.map 459.13 KB
-CJS ⚡️ Build success in 296ms
+CJS dist/index.js     231.87 KB
+CJS dist/index.js.map 466.94 KB
+CJS ⚡️ Build success in 168ms
+ESM dist/index.mjs     213.59 KB
+ESM dist/index.mjs.map 467.05 KB
+ESM ⚡️ Build success in 170ms
 DTS Build start
-DTS ⚡️ Build success in 12004ms
-DTS dist/index.d.ts  60.59 KB
-DTS dist/index.d.mts 60.59 KB
+DTS ⚡️ Build success in 10431ms
+DTS dist/index.d.ts  61.61 KB
+DTS dist/index.d.mts 61.61 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @noya-app/noya-designsystem
 
+## 0.1.23
+
+### Patch Changes
+
+- 61cb70a: Add tree editor
+
+## 0.1.22
+
+### Patch Changes
+
+- f3e588d: Improve json editing
+- b104428: Package improvements, mainly around json
+- Updated dependencies [b104428]
+  - @noya-app/noya-utils@0.1.2
+  - @noya-app/noya-colorpicker@0.1.10
+  - @noya-app/noya-geometry@0.1.4
+
 ## 0.1.21
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, ReactElement, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
+import React__default, { CSSProperties, ReactNode, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
@@ -18,13 +18,13 @@ import { useSortable } from '@dnd-kit/sortable';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
-interface Props$i {
+interface Props$j {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: (props: Props$i) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ActivityIndicator: (props: Props$j) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const Avatar: (props: {
     image?: string | undefined;
@@ -76,10 +76,13 @@ type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium";
 type ChipVariant = "solid" | "outlined" | "ghost";
 interface ChipProps {
+    id?: string;
+    className?: string;
     colorScheme?: ChipColorScheme;
     variant?: ChipVariant;
     size?: ChipSize;
     children?: React__default.ReactNode;
+    clickable?: boolean;
     deletable?: boolean;
     addable?: boolean;
     monospace?: boolean;
@@ -90,7 +93,7 @@ interface ChipProps {
     style?: React__default.CSSProperties;
     tabIndex?: number;
 }
-declare const Chip: (props: ChipProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const name$1: string;
 declare const colors$1: {
@@ -234,7 +237,7 @@ type RegularMenuItem<T extends string> = {
     shortcut?: string;
     checked?: boolean;
     disabled?: boolean;
-    icon?: ReactElement;
+    icon?: ReactNode;
     items?: MenuItem<T>[];
     role?: MenuItemRole;
 };
@@ -252,7 +255,7 @@ interface MenuItemProps<T extends string> {
     disabled: boolean;
     indented: boolean;
     shortcut?: string;
-    icon?: ReactElement;
+    icon?: ReactNode;
     items?: MenuItem<T>[];
 }
 interface MenuProps<T extends string> {
@@ -270,7 +273,7 @@ declare const CloseButtonContainer: styled_components_dist_types.IStyledComponen
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$h {
+interface Props$i {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -280,8 +283,8 @@ interface Props$h {
     onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
     closeOnInteractOutside?: boolean;
 }
-declare const Dialog: (props: Props$h & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-declare const FullscreenDialog: (props: Props$h & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Dialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FullscreenDialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type DividerVariant = "normal" | "strong" | "subtle";
 interface DividerProps {
@@ -316,22 +319,22 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$g {
+interface Props$h {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
     flex?: CSSProperties["flex"];
 }
-declare const FillInputField: (props: Props$g & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillInputField: (props: Props$h & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const PatternPreviewBackground: (props: {
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
 }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-interface Props$f {
+interface Props$g {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: (props: Props$f) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillPreviewBackground: (props: Props$g) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface FloatingWindowProps {
     title?: string;
@@ -352,7 +355,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$e {
+interface Props$f {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -361,7 +364,7 @@ interface Props$e {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: (props: Props$e) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const GradientPicker: (props: Props$f) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type GridProps = {
     columns?: string;
@@ -437,7 +440,7 @@ declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "f
     size?: number | undefined;
 } & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-type Props$d = {
+type Props$e = {
     id?: string;
     style?: any;
     className?: string;
@@ -455,13 +458,13 @@ type Props$d = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$d & {
+type ReadOnlyProps = Props$e & {
     readOnly: true;
 };
-type ControlledProps = Props$d & {
+type ControlledProps = Props$e & {
     onChange: (value: string) => void;
 };
-type SubmittableProps = Props$d & {
+type SubmittableProps = Props$e & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -515,6 +518,8 @@ interface InputFieldRootProps {
         width: number;
     }) => ReactNode;
     onFocusChange?: (isFocused: boolean) => void;
+    style?: React__default.CSSProperties;
+    className?: string;
 }
 declare namespace InputField {
     const Root: (props: InputFieldRootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -653,6 +658,11 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     onMenuOpenChange?: (isOpen: boolean) => void;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
     style?: CSSProperties;
+    dragIndicatorStyle?: CSSProperties | ((props: {
+        depth: number;
+        indentation: number;
+        position: RelativeDropPosition;
+    }) => CSSProperties);
 }
 interface IVirtualizedList {
     scrollToIndex(index: number): void;
@@ -678,6 +688,9 @@ type RenderProps<T> = {
 type ListViewVariant = "normal" | "padded" | "bare";
 type ListViewSectionHeaderVariant = "normal" | "label";
 type ListViewRootProps = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
     onPress?: () => void;
     scrollable?: boolean;
     expandable?: boolean;
@@ -724,7 +737,7 @@ interface CompletionMenuProps {
     listSize: Size;
 }
 declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type Props$c = {
+type Props$d = {
     loading?: boolean;
     initialValue?: string;
     placeholder?: string;
@@ -747,7 +760,7 @@ interface IInputFieldWithCompletions {
     setValue(value: string): void;
     selectAllInputText(): void;
 }
-declare const InputFieldWithCompletions: (props: Props$c & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const InputFieldWithCompletions: (props: Props$d & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const InspectorContainer: (props: {
     header?: React__default.ReactNode;
@@ -780,7 +793,7 @@ interface ContainerProps {
 declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type PopoverVariant = "normal" | "large";
-interface Props$b extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$c extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
@@ -791,7 +804,7 @@ interface Props$b 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$b): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$c): React__default.JSX.Element;
 
 type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
 declare function Progress({ value, width, height, flex, variant, }: {
@@ -809,7 +822,7 @@ interface ItemProps {
     children: ReactNode;
     disabled?: boolean;
 }
-interface Props$a {
+interface Props$b {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
@@ -818,14 +831,14 @@ interface Props$a {
     children: ReactNode;
 }
 declare namespace RadioGroup {
-    const Root: (props: Props$a) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: (props: Props$b) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
     const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 }
 
-interface Props$9 {
+interface Props$a {
     children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
 }
-declare const ScrollArea: (props: Props$9) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ScrollArea: (props: Props$a) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface SelectOptionProps<T extends string> {
     value: T;
@@ -840,13 +853,24 @@ type ChildrenProps<T> = {
     getTitle?: (option: T, index: number) => string;
     onChange: (value: T) => void;
 };
-type Props$8<T extends string> = ChildrenProps<T> & {
+type Props$9<T extends string> = ChildrenProps<T> & {
     id: string;
     flex?: CSSProperties["flex"];
     value: T;
-    label?: string;
+    label?: ReactNode;
 };
-declare const Select: <T extends string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Select: <T extends string>(props: Props$9<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type Props$8<T extends string> = {
+    id?: string;
+    style?: React__default.CSSProperties;
+    className?: string;
+    menuItems: MenuItem<T>[];
+    value: T;
+    onSelect?: (value: T) => void;
+    placeholder?: string;
+};
+declare const SelectMenu: <T extends string = string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface Props$7 {
     id?: string;
@@ -993,6 +1017,8 @@ interface Props$3 extends StyleProps {
     children: ReactNode;
     onClick?: () => void;
     onDoubleClick?: () => void;
+    onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
+    tabIndex?: number;
 }
 declare const Text$1: (props: Props$3 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 type PresetProps = Omit<Props$3, "variant">;
@@ -1042,6 +1068,9 @@ declare namespace TreeView {
         sortable?: boolean | undefined;
         virtualized?: _noya_app_noya_geometry.Size | undefined;
     }) & {
+        id?: string | undefined;
+        className?: string | undefined;
+        style?: React__default.CSSProperties | undefined;
         onPress?: (() => void) | undefined;
         scrollable?: boolean | undefined;
         expandable?: boolean | undefined;
@@ -1399,4 +1428,4 @@ declare module "react" {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
-export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, ReactElement, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
+import React__default, { CSSProperties, ReactNode, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
@@ -18,13 +18,13 @@ import { useSortable } from '@dnd-kit/sortable';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
-interface Props$i {
+interface Props$j {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: (props: Props$i) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ActivityIndicator: (props: Props$j) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const Avatar: (props: {
     image?: string | undefined;
@@ -76,10 +76,13 @@ type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium";
 type ChipVariant = "solid" | "outlined" | "ghost";
 interface ChipProps {
+    id?: string;
+    className?: string;
     colorScheme?: ChipColorScheme;
     variant?: ChipVariant;
     size?: ChipSize;
     children?: React__default.ReactNode;
+    clickable?: boolean;
     deletable?: boolean;
     addable?: boolean;
     monospace?: boolean;
@@ -90,7 +93,7 @@ interface ChipProps {
     style?: React__default.CSSProperties;
     tabIndex?: number;
 }
-declare const Chip: (props: ChipProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const name$1: string;
 declare const colors$1: {
@@ -234,7 +237,7 @@ type RegularMenuItem<T extends string> = {
     shortcut?: string;
     checked?: boolean;
     disabled?: boolean;
-    icon?: ReactElement;
+    icon?: ReactNode;
     items?: MenuItem<T>[];
     role?: MenuItemRole;
 };
@@ -252,7 +255,7 @@ interface MenuItemProps<T extends string> {
     disabled: boolean;
     indented: boolean;
     shortcut?: string;
-    icon?: ReactElement;
+    icon?: ReactNode;
     items?: MenuItem<T>[];
 }
 interface MenuProps<T extends string> {
@@ -270,7 +273,7 @@ declare const CloseButtonContainer: styled_components_dist_types.IStyledComponen
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$h {
+interface Props$i {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -280,8 +283,8 @@ interface Props$h {
     onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
     closeOnInteractOutside?: boolean;
 }
-declare const Dialog: (props: Props$h & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-declare const FullscreenDialog: (props: Props$h & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Dialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FullscreenDialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type DividerVariant = "normal" | "strong" | "subtle";
 interface DividerProps {
@@ -316,22 +319,22 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$g {
+interface Props$h {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
     flex?: CSSProperties["flex"];
 }
-declare const FillInputField: (props: Props$g & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillInputField: (props: Props$h & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const PatternPreviewBackground: (props: {
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
 }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-interface Props$f {
+interface Props$g {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: (props: Props$f) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillPreviewBackground: (props: Props$g) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface FloatingWindowProps {
     title?: string;
@@ -352,7 +355,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$e {
+interface Props$f {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -361,7 +364,7 @@ interface Props$e {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: (props: Props$e) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const GradientPicker: (props: Props$f) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type GridProps = {
     columns?: string;
@@ -437,7 +440,7 @@ declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "f
     size?: number | undefined;
 } & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-type Props$d = {
+type Props$e = {
     id?: string;
     style?: any;
     className?: string;
@@ -455,13 +458,13 @@ type Props$d = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$d & {
+type ReadOnlyProps = Props$e & {
     readOnly: true;
 };
-type ControlledProps = Props$d & {
+type ControlledProps = Props$e & {
     onChange: (value: string) => void;
 };
-type SubmittableProps = Props$d & {
+type SubmittableProps = Props$e & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -515,6 +518,8 @@ interface InputFieldRootProps {
         width: number;
     }) => ReactNode;
     onFocusChange?: (isFocused: boolean) => void;
+    style?: React__default.CSSProperties;
+    className?: string;
 }
 declare namespace InputField {
     const Root: (props: InputFieldRootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -653,6 +658,11 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     onMenuOpenChange?: (isOpen: boolean) => void;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
     style?: CSSProperties;
+    dragIndicatorStyle?: CSSProperties | ((props: {
+        depth: number;
+        indentation: number;
+        position: RelativeDropPosition;
+    }) => CSSProperties);
 }
 interface IVirtualizedList {
     scrollToIndex(index: number): void;
@@ -678,6 +688,9 @@ type RenderProps<T> = {
 type ListViewVariant = "normal" | "padded" | "bare";
 type ListViewSectionHeaderVariant = "normal" | "label";
 type ListViewRootProps = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
     onPress?: () => void;
     scrollable?: boolean;
     expandable?: boolean;
@@ -724,7 +737,7 @@ interface CompletionMenuProps {
     listSize: Size;
 }
 declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type Props$c = {
+type Props$d = {
     loading?: boolean;
     initialValue?: string;
     placeholder?: string;
@@ -747,7 +760,7 @@ interface IInputFieldWithCompletions {
     setValue(value: string): void;
     selectAllInputText(): void;
 }
-declare const InputFieldWithCompletions: (props: Props$c & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const InputFieldWithCompletions: (props: Props$d & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const InspectorContainer: (props: {
     header?: React__default.ReactNode;
@@ -780,7 +793,7 @@ interface ContainerProps {
 declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type PopoverVariant = "normal" | "large";
-interface Props$b extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$c extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
@@ -791,7 +804,7 @@ interface Props$b 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$b): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$c): React__default.JSX.Element;
 
 type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
 declare function Progress({ value, width, height, flex, variant, }: {
@@ -809,7 +822,7 @@ interface ItemProps {
     children: ReactNode;
     disabled?: boolean;
 }
-interface Props$a {
+interface Props$b {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
@@ -818,14 +831,14 @@ interface Props$a {
     children: ReactNode;
 }
 declare namespace RadioGroup {
-    const Root: (props: Props$a) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: (props: Props$b) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
     const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 }
 
-interface Props$9 {
+interface Props$a {
     children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
 }
-declare const ScrollArea: (props: Props$9) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ScrollArea: (props: Props$a) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface SelectOptionProps<T extends string> {
     value: T;
@@ -840,13 +853,24 @@ type ChildrenProps<T> = {
     getTitle?: (option: T, index: number) => string;
     onChange: (value: T) => void;
 };
-type Props$8<T extends string> = ChildrenProps<T> & {
+type Props$9<T extends string> = ChildrenProps<T> & {
     id: string;
     flex?: CSSProperties["flex"];
     value: T;
-    label?: string;
+    label?: ReactNode;
 };
-declare const Select: <T extends string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Select: <T extends string>(props: Props$9<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type Props$8<T extends string> = {
+    id?: string;
+    style?: React__default.CSSProperties;
+    className?: string;
+    menuItems: MenuItem<T>[];
+    value: T;
+    onSelect?: (value: T) => void;
+    placeholder?: string;
+};
+declare const SelectMenu: <T extends string = string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface Props$7 {
     id?: string;
@@ -993,6 +1017,8 @@ interface Props$3 extends StyleProps {
     children: ReactNode;
     onClick?: () => void;
     onDoubleClick?: () => void;
+    onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
+    tabIndex?: number;
 }
 declare const Text$1: (props: Props$3 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 type PresetProps = Omit<Props$3, "variant">;
@@ -1042,6 +1068,9 @@ declare namespace TreeView {
         sortable?: boolean | undefined;
         virtualized?: _noya_app_noya_geometry.Size | undefined;
     }) & {
+        id?: string | undefined;
+        className?: string | undefined;
+        style?: React__default.CSSProperties | undefined;
         onPress?: (() => void) | undefined;
         scrollable?: boolean | undefined;
         expandable?: boolean | undefined;
@@ -1399,4 +1428,4 @@ declare module "react" {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
-export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };