@noya-app/noya-designsystem 0.1.16 → 0.1.18

package/dist/index.d.ts

@@ -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$h {
+interface Props$i {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: (props: Props$h) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ActivityIndicator: (props: Props$i) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const Avatar: (props: {
     image?: string | undefined;
@@ -143,6 +143,7 @@ declare const colors$1: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -269,7 +270,7 @@ declare const CloseButtonContainer: styled_components_dist_types.IStyledComponen
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$g {
+interface Props$h {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -279,8 +280,8 @@ interface Props$g {
     onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
     closeOnInteractOutside?: boolean;
 }
-declare const Dialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-declare const FullscreenDialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+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;
 
 type DividerVariant = "normal" | "strong" | "subtle";
 interface DividerProps {
@@ -315,22 +316,22 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$f {
+interface Props$g {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
     flex?: CSSProperties["flex"];
 }
-declare const FillInputField: (props: Props$f & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillInputField: (props: Props$g & 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$e {
+interface Props$f {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: (props: Props$e) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillPreviewBackground: (props: Props$f) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface FloatingWindowProps {
     title?: string;
@@ -351,7 +352,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$d {
+interface Props$e {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -360,7 +361,7 @@ interface Props$d {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: (props: Props$d) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const GradientPicker: (props: Props$e) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type GridProps = {
     columns?: string;
@@ -436,7 +437,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$c = {
+type Props$d = {
     id?: string;
     style?: any;
     className?: string;
@@ -454,13 +455,13 @@ type Props$c = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$c & {
+type ReadOnlyProps = Props$d & {
     readOnly: true;
 };
-type ControlledProps = Props$c & {
+type ControlledProps = Props$d & {
     onChange: (value: string) => void;
 };
-type SubmittableProps = Props$c & {
+type SubmittableProps = Props$d & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -723,7 +724,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$b = {
+type Props$c = {
     loading?: boolean;
     initialValue?: string;
     placeholder?: string;
@@ -746,7 +747,17 @@ interface IInputFieldWithCompletions {
     setValue(value: string): void;
     selectAllInputText(): void;
 }
-declare const InputFieldWithCompletions: (props: Props$b & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const InputFieldWithCompletions: (props: Props$c & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const InspectorContainer: (props: {
+    header?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    fallback?: React__default.ReactNode;
+    showDividers?: boolean | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    style?: React__default.CSSProperties | undefined;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface LabelRootProps {
     label: ReactNode;
@@ -769,7 +780,7 @@ interface ContainerProps {
 declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type PopoverVariant = "normal" | "large";
-interface Props$a extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$b extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
@@ -780,7 +791,7 @@ interface Props$a 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$a): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$b): React__default.JSX.Element;
 
 type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
 declare function Progress({ value, width, height, flex, variant, }: {
@@ -798,7 +809,7 @@ interface ItemProps {
     children: ReactNode;
     disabled?: boolean;
 }
-interface Props$9 {
+interface Props$a {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
@@ -807,14 +818,14 @@ interface Props$9 {
     children: ReactNode;
 }
 declare namespace RadioGroup {
-    const Root: (props: Props$9) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: (props: Props$a) => 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$8 {
+interface Props$9 {
     children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
 }
-declare const ScrollArea: (props: Props$8) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ScrollArea: (props: Props$9) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface SelectOptionProps<T extends string> {
     value: T;
@@ -829,30 +840,30 @@ type ChildrenProps<T> = {
     getTitle?: (option: T, index: number) => string;
     onChange: (value: T) => void;
 };
-type Props$7<T extends string> = ChildrenProps<T> & {
+type Props$8<T extends string> = ChildrenProps<T> & {
     id: string;
     flex?: CSSProperties["flex"];
     value: T;
     label?: string;
 };
-declare const Select: <T extends string>(props: Props$7<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Select: <T extends string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-interface Props$6 {
+interface Props$7 {
     id?: string;
     value: number;
     onValueChange: (value: number) => void;
     min: number;
     max: number;
 }
-declare const Slider: ({ id, value, onValueChange, min, max, }: Props$6) => React__default.JSX.Element;
+declare const Slider: ({ id, value, onValueChange, min, max, }: Props$7) => React__default.JSX.Element;
 
-interface Props$5 {
+interface Props$6 {
     size?: number | string;
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    const Horizontal: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Vertical: (props: Props$6 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Horizontal: (props: Props$6 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 }
 
 type BreakpointKey = number | string;
@@ -917,7 +928,7 @@ interface StyleProps$1 {
     backdropFilter?: CSSProperties["backdropFilter"];
 }
 type StackBreakpointList = BreakpointCollection<StyleProps$1>;
-interface Props$4 extends StyleProps$1 {
+interface Props$5 extends StyleProps$1 {
     id?: string;
     as?: keyof ReactHTML;
     className?: string;
@@ -927,19 +938,19 @@ interface Props$4 extends StyleProps$1 {
     href?: string;
     tabIndex?: number;
 }
-type StackProps = Omit<Props$4, "flexDirection">;
+type StackProps = Omit<Props$5, "flexDirection">;
 declare const Stack: {
     V: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
     H: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 };
 
 type SwitchColorScheme = "normal" | "primary" | "secondary";
-interface Props$3 {
+interface Props$4 {
     value: boolean;
     onChange: (value: boolean) => void;
     colorScheme?: SwitchColorScheme;
 }
-declare const Switch: ({ value, onChange, colorScheme, }: Props$3) => React__default.JSX.Element;
+declare const Switch: ({ value, onChange, colorScheme, }: Props$4) => React__default.JSX.Element;
 
 type StyleProps = {
     flex?: CSSProperties$1["flex"];
@@ -972,7 +983,7 @@ type StyleProps = {
     cursor?: CSSProperties$1["cursor"];
 };
 type TextBreakpointList = BreakpointCollection<StyleProps>;
-interface Props$2 extends StyleProps {
+interface Props$3 extends StyleProps {
     as?: keyof ReactHTML;
     href?: string;
     className?: string;
@@ -983,8 +994,8 @@ interface Props$2 extends StyleProps {
     onClick?: () => void;
     onDoubleClick?: () => void;
 }
-declare const Text$1: (props: Props$2 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type PresetProps = Omit<Props$2, "variant">;
+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">;
 declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -1005,11 +1016,11 @@ declare const ToastProvider: ({ children }: {
     children: React__default.ReactNode;
 }) => React__default.JSX.Element;
 
-interface Props$1 {
+interface Props$2 {
     children: ReactNode;
     content: ReactNode;
 }
-declare const Tooltip: (props: Props$1) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Tooltip: (props: Props$2) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type TreeRowBaseProps = {
     icon?: ReactNode;
@@ -1051,6 +1062,32 @@ declare namespace TreeView {
     type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
 }
 
+type PanelLayoutState = {
+    leftSidebarCollapsed: boolean;
+    rightSidebarCollapsed: boolean;
+};
+
+interface Props$1 {
+    autoSavePrefix?: string;
+    leftSidebarContent?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    rightSidebarContent?: React__default.ReactNode;
+    hasRightSidebar?: boolean;
+    hasLeftSidebar?: boolean;
+    onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
+    leftSidebarInitialSize?: number;
+    rightSidebarInitialSize?: number;
+    leftSidebarCanResize?: boolean;
+}
+type IWorkspaceLayout = {
+    setLeftSidebarExpanded: (expanded: boolean) => void;
+    setRightSidebarExpanded: (expanded: boolean) => void;
+    toggleAllSidebars: () => void;
+    toggleLeftSidebar: () => void;
+    toggleRightSidebar: () => void;
+};
+declare const WorkspaceLayout: (props: Props$1 & React__default.RefAttributes<IWorkspaceLayout>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
 declare const DesignSystemThemeProvider: (props: {
     children: ReactNode;
     theme?: typeof lightTheme | undefined;
@@ -1060,7 +1097,7 @@ type DesignSystemConfigurationContextValue = {
 };
 declare const DesignSystemConfigurationProvider: (props: {
     children: ReactNode;
-    theme?: typeof lightTheme | undefined;
+    theme?: "dark" | "light" | typeof lightTheme | undefined;
     platform?: PlatformName | undefined;
 }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
@@ -1217,6 +1254,7 @@ declare const colors: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -1348,4 +1386,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, IconButton, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, 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, 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, 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 };