@noya-app/noya-designsystem 0.1.37 → 0.1.39

package/dist/index.d.ts

@@ -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';
 
@@ -274,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;
@@ -316,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>[];
@@ -369,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;
@@ -714,18 +707,338 @@ interface Props$3 {
 }
 declare const Switch: ({ id, value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
 
-declare const config: Config;
+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>;
@@ -735,7 +1048,7 @@ type TextProps = {
     className?: string;
     style?: React__default.CSSProperties;
     variant: Variant;
-    color?: ThemeColor;
+    color?: KebabToCamelCase<ThemeColor>;
     children: ReactNode;
     onClick?: () => void;
     onDoubleClick?: () => void;
@@ -974,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>[];
@@ -1022,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;
@@ -1055,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, 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, 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 };