@noya-app/noya-designsystem 0.1.36 → 0.1.38

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, ComponentProps, SyntheticEvent, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
+import React__default, { CSSProperties, ReactNode, InputHTMLAttributes, ComponentProps, SyntheticEvent, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, Ref, LabelHTMLAttributes, ReactHTML } from 'react';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -14,7 +14,6 @@ import { IItemScore } from 'vscode-fuzzy-scorer';
 import { useSortable } from '@dnd-kit/sortable';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectProps } from '@radix-ui/react-select';
-import { Config } from 'tailwindcss';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
@@ -64,6 +63,11 @@ interface ButtonRootProps {
 }
 declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
 
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    colorScheme?: "primary" | "secondary";
+}
+declare const Checkbox$1: (props: CheckboxProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
+
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
@@ -269,7 +273,7 @@ declare namespace GridView {
     }) => React__default.ReactElement | null;
 }
 
-declare const IconButton: (props: Omit<ButtonRootProps, "size" | "flex" | "children" | "variant"> & {
+declare const IconButton: (props: Omit<ButtonRootProps, "size" | "children" | "flex" | "variant"> & {
     iconName: IconName;
     className?: string;
     style?: CSSProperties;
@@ -311,12 +315,6 @@ type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
 
 type LabelPosition = "start" | "end";
 type InputFieldSize = "small" | "medium" | "large";
-interface InputFieldLabelProps {
-    children?: ReactNode;
-    pointerEvents?: Property.PointerEvents;
-    style?: React__default.CSSProperties;
-    className?: string;
-}
 interface InputFieldDropdownProps<T extends string> {
     id?: string;
     items: MenuItem<T>[];
@@ -364,7 +362,7 @@ declare namespace InputField {
     const NumberInput: (props: InputFieldNumberInputProps) => React__default.ReactElement | null;
     const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
     const Button: (props: React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
-    const Label: (props: InputFieldLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
+    const Label: (props: React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
     const PrimitiveElement: ({ readOnly, disabled, className, ...props }: {
         readOnly?: boolean;
         disabled?: boolean;
@@ -606,13 +604,9 @@ declare const InspectorContainer: (props: {
     style?: React__default.CSSProperties;
 } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
 
-interface LabelRootProps {
-    label: ReactNode;
-    children: ReactNode;
-}
-declare namespace Label {
-    const Root: (props: LabelRootProps) => React__default.ReactElement | null;
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
+declare const Label: (props: LabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
 
 interface ContainerProps {
     children: ReactNode;
@@ -704,26 +698,347 @@ declare namespace Spacer {
 
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 interface Props$3 {
+    id?: string;
     value: boolean;
     onChange: (value: boolean) => void;
     /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
 }
-declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
-
-declare const config: Config;
+declare const Switch: ({ id, value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
+
+declare const config: {
+    content: string[];
+    corePlugins: {
+        preflight: false;
+    };
+    theme: {
+        extend: {
+            colors: {
+                "logo-fill": string;
+                "logo-highlight": string;
+                background: string;
+                text: string;
+                "text-muted": string;
+                "text-subtle": string;
+                "text-disabled": string;
+                "text-decorative-light": string;
+                "divider-subtle": string;
+                divider: string;
+                "divider-strong": string;
+                primary: string;
+                "primary-light": string;
+                "primary-pastel": string;
+                secondary: string;
+                "secondary-light": string;
+                "secondary-pastel": string;
+                "secondary-bright": string;
+                "input-background": string;
+                "input-background-light": string;
+                "code-background": string;
+                "code-background-dark": string;
+                "selected-background": string;
+                "breadcrumb-text": string;
+                "breadcrumb-text-hover": string;
+                "breadcrumb-icon": string;
+                "canvas-background": string;
+                "canvas-grid": string;
+                "sidebar-background": string;
+                "sidebar-background-transparent": string;
+                "popover-background": string;
+                "popover-divider": string;
+                "listview-raised-background": string;
+                "listview-editing-background": string;
+                "slider-background": string;
+                "slider-border": string;
+                "radio-group-background": string;
+                mask: string;
+                "transparent-checker": string;
+                scrollbar: string;
+                "placeholder-dots": string;
+                "drag-outline": string;
+                "active-background": string;
+                "thumbnail-background": string;
+                "thumbnail-shadow": string;
+                "inline-code-text": string;
+                "inline-code-background": string;
+                "text-link": string;
+                "text-link-focused": string;
+                icon: string;
+                "icon-selected": string;
+                warning: string;
+                "radio-group-item": string;
+                dot: string;
+                "row-highlight": string;
+                "table-row-background": string;
+                "chip-primary-bg": string;
+                "chip-secondary-bg": string;
+                "chip-error-bg": string;
+                "chip-default-bg": string;
+                "chip-primary-shadow": string;
+                "chip-secondary-shadow": string;
+                "chip-error-shadow": string;
+                "chip-default-shadow": string;
+            };
+            fontFamily: {
+                sans: [string, string, string, string, string, string, string, string, string, string];
+                mono: [string, string, string, string, string];
+            };
+            fontSize: {
+                title: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                subtitle: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                heading1: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                heading2: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                heading3: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                heading4: [string, {
+                    lineHeight: string;
+                }];
+                heading5: [string, {
+                    lineHeight: string;
+                }];
+                body: [string, {
+                    lineHeight: string;
+                }];
+                small: [string, {
+                    lineHeight: string;
+                }];
+                code: [string, {
+                    lineHeight: string;
+                }];
+                button: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+                label: [string, {
+                    lineHeight: string;
+                    letterSpacing: string;
+                }];
+            };
+            spacing: {
+                nano: string;
+                micro: string;
+                small: string;
+                medium: string;
+                large: string;
+                xlarge: string;
+                xxlarge: string;
+                "inset-top": string;
+                "sidebar-width": string;
+                "toolbar-height": string;
+                "toolbar-separator": string;
+                "inspector-h-separator": string;
+                "inspector-v-separator": string;
+                "dialog-padding": string;
+            };
+            keyframes: {
+                spin: {
+                    "0%": {
+                        transform: string;
+                    };
+                    "100%": {
+                        transform: string;
+                    };
+                };
+                shimmer: {
+                    "0%": {
+                        backgroundPosition: string;
+                    };
+                    "100%": {
+                        backgroundPosition: string;
+                    };
+                };
+            };
+            animation: {
+                spin: string;
+                shimmer: string;
+            };
+            zIndex: {
+                interactable: string;
+                label: string;
+            };
+        };
+    };
+    safelist: string[];
+};
 
-type Theme = typeof config.theme.extend;
+type Theme = (typeof config.theme)["extend"];
+type ThemeColor = keyof Theme["colors"];
+declare const cssVars: {
+    colors: {
+        logoFill: string;
+        logoHighlight: string;
+        background: string;
+        text: string;
+        textMuted: string;
+        textSubtle: string;
+        textDisabled: string;
+        textDecorativeLight: string;
+        dividerSubtle: string;
+        divider: string;
+        dividerStrong: string;
+        primary: string;
+        primaryLight: string;
+        primaryPastel: string;
+        secondary: string;
+        secondaryLight: string;
+        secondaryPastel: string;
+        secondaryBright: string;
+        inputBackground: string;
+        inputBackgroundLight: string;
+        codeBackground: string;
+        codeBackgroundDark: string;
+        selectedBackground: string;
+        breadcrumbText: string;
+        breadcrumbTextHover: string;
+        breadcrumbIcon: string;
+        canvasBackground: string;
+        canvasGrid: string;
+        sidebarBackground: string;
+        sidebarBackgroundTransparent: string;
+        popoverBackground: string;
+        popoverDivider: string;
+        listviewRaisedBackground: string;
+        listviewEditingBackground: string;
+        sliderBackground: string;
+        sliderBorder: string;
+        radioGroupBackground: string;
+        mask: string;
+        transparentChecker: string;
+        scrollbar: string;
+        placeholderDots: string;
+        dragOutline: string;
+        activeBackground: string;
+        thumbnailBackground: string;
+        thumbnailShadow: string;
+        inlineCodeText: string;
+        inlineCodeBackground: string;
+        textLink: string;
+        textLinkFocused: string;
+        icon: string;
+        iconSelected: string;
+        warning: string;
+        radioGroupItem: string;
+        dot: string;
+        rowHighlight: string;
+        tableRowBackground: string;
+        chipPrimaryBg: string;
+        chipSecondaryBg: string;
+        chipErrorBg: string;
+        chipDefaultBg: string;
+        chipPrimaryShadow: string;
+        chipSecondaryShadow: string;
+        chipErrorShadow: string;
+        chipDefaultShadow: string;
+    };
+    fontFamily: {
+        sans: [string, string, string, string, string, string, string, string, string, string];
+        mono: [string, string, string, string, string];
+    };
+    fontSize: {
+        title: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        subtitle: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        heading1: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        heading2: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        heading3: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        heading4: [string, {
+            lineHeight: string;
+        }];
+        heading5: [string, {
+            lineHeight: string;
+        }];
+        body: [string, {
+            lineHeight: string;
+        }];
+        small: [string, {
+            lineHeight: string;
+        }];
+        code: [string, {
+            lineHeight: string;
+        }];
+        button: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+        label: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
+    };
+    spacing: {
+        nano: string;
+        micro: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+        xxlarge: string;
+        insetTop: string;
+        sidebarWidth: string;
+        toolbarHeight: string;
+        toolbarSeparator: string;
+        inspectorHSeparator: string;
+        inspectorVSeparator: string;
+        dialogPadding: string;
+    };
+    keyframes: {
+        spin: {
+            "0%": {
+                transform: string;
+            };
+            "100%": {
+                transform: string;
+            };
+        };
+        shimmer: {
+            "0%": {
+                backgroundPosition: string;
+            };
+            "100%": {
+                backgroundPosition: string;
+            };
+        };
+    };
+    animation: {
+        spin: string;
+        shimmer: string;
+    };
+    zIndex: {
+        interactable: string;
+        label: string;
+    };
+};
 
-/**
- * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
- * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
- * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
-*/
-declare const cn: (...classes: (string | boolean | undefined | null)[]) => string;
-type ThemeExtend = NonNullable<Theme['extend']>;
-type ThemeColor = keyof ThemeExtend['colors'];
+type KebabToCamelCase<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamelCase<Rest>>}` : S;
 
 type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
 declare const textStyles: Record<Variant, string>;
@@ -733,7 +1048,7 @@ type TextProps = {
     className?: string;
     style?: React__default.CSSProperties;
     variant: Variant;
-    color?: ThemeColor;
+    color?: KebabToCamelCase<ThemeColor>;
     children: ReactNode;
     onClick?: () => void;
     onDoubleClick?: () => void;
@@ -972,6 +1287,13 @@ declare const mediaQuery: {
     xlarge: string;
 };
 
+/**
+ * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
+ * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
+ * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
+ */
+declare const cn: (...classes: (string | boolean | undefined | null)[]) => string;
+
 type Optional<T> = T | false | null | undefined;
 type MenuConfig<T extends string> = Optional<Optional<RegularMenuItem<T>>[]>[];
 declare function createSectionedMenu<T extends string>(...sections: MenuConfig<T>): MenuItem<T>[];
@@ -988,7 +1310,10 @@ declare function sketchColorToRgbaString(value: Sketch.Color): string;
 declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
 declare function sketchColorToHex(value: Sketch.Color): string;
 
-declare function withSeparatorElements(elements: ReactNode, separator: ReactNode | (() => ReactNode)): (string | number | React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | React$1.ReactPortal)[];
+interface SeparatorOptions {
+    traverseFragments?: boolean;
+}
+declare function withSeparatorElements(elements: ReactNode, separator: ReactNode | (() => ReactNode), options?: SeparatorOptions): ReactNode[];
 
 type SetNumberMode = "replace" | "adjust";
 declare function getNewValue(value: number, mode: SetNumberMode, delta?: number): number;
@@ -1017,9 +1342,9 @@ declare const Checkbox: (props: React__default.InputHTMLAttributes<HTMLInputElem
 declare const Text: (props: React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
 declare const VerticalSeparator: () => React__default.JSX.Element;
 declare const HorizontalSeparator: () => React__default.JSX.Element;
-declare const RowLabel: (props: React__default.HTMLAttributes<HTMLSpanElement> & {
+declare const RowLabel: (props: React__default.LabelHTMLAttributes<HTMLLabelElement> & {
     $textStyle?: TitleTextStyle | "label";
-} & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+} & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
 interface LabeledRowProps {
     id?: string;
     children: ReactNode;
@@ -1050,4 +1375,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, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Chip, type ChipProps, 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, InputFieldWithCompletions, 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, WorkspaceLayout, cn, createSectionedMenu, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDarkMode, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, withSeparatorElements };
+export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, 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, InputFieldWithCompletions, 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, WorkspaceLayout, cn, createSectionedMenu, cssVars, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDarkMode, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, withSeparatorElements };