@noya-app/noya-designsystem 0.1.26 → 0.1.27

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
+CJS dist/index.js     237.83 KB
+CJS dist/index.js.map 477.71 KB
+CJS ⚡️ Build success in 179ms
+ESM dist/index.mjs     219.11 KB
+ESM dist/index.mjs.map 477.79 KB
+ESM ⚡️ Build success in 180ms
 DTS Build start
-CJS dist/index.js     237.57 KB
-CJS dist/index.js.map 477.33 KB
-CJS ⚡️ Build success in 262ms
-ESM dist/index.mjs     218.90 KB
-ESM dist/index.mjs.map 477.46 KB
-ESM ⚡️ Build success in 262ms
-DTS ⚡️ Build success in 11217ms
-DTS dist/index.d.ts  62.86 KB
-DTS dist/index.d.mts 62.86 KB
+DTS ⚡️ Build success in 12078ms
+DTS dist/index.d.ts  63.28 KB
+DTS dist/index.d.mts 63.28 KB

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @noya-app/noya-designsystem
 
+## 0.1.27
+
+### Patch Changes
+
+- 6f9f2df: Improve design system theme and json editor
+- 2acd3e5: Export icons
+
 ## 0.1.26
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4,6 +4,7 @@ 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';
 import * as Icons from '@noya-app/noya-icons';
+export { Icons };
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
@@ -171,6 +172,12 @@ declare const colors$1: {
     selection: string;
     thumbnailBackground: string;
     thumbnailShadow: string;
+    inlineCode: {
+        text: string;
+        background: string;
+    };
+    textLink: string;
+    textLinkFocused: string;
 };
 declare const fonts: {
     normal: string;
@@ -191,6 +198,9 @@ declare const textStyles: {
     label: CSSObject;
 };
 declare const sizes: {
+    inset: {
+        top: number;
+    };
     sidebarWidth: number;
     toolbar: {
         height: number;
@@ -235,6 +245,8 @@ type ThemeColorName = keyof PickByValue<Theme['colors'], string>;
 
 type IconName = keyof typeof Icons;
 
+declare function renderIcon(iconName: Exclude<ReactNode, string> | IconName): ReactNode;
+
 declare const SEPARATOR_ITEM = "separator";
 type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
 type RegularMenuItem<T extends string> = {
@@ -1339,6 +1351,12 @@ declare const colors: {
     selection: string;
     thumbnailBackground: string;
     thumbnailShadow: string;
+    inlineCode: {
+        text: string;
+        background: string;
+    };
+    textLink: string;
+    textLinkFocused: string;
 };
 
 declare const dark_colors: typeof colors;
@@ -1450,4 +1468,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, AutoResizingTextArea, 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, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, ArrayController, type ArrayControllerProps, AutoResizingTextArea, 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 IconName, 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, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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';
 import * as Icons from '@noya-app/noya-icons';
+export { Icons };
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
@@ -171,6 +172,12 @@ declare const colors$1: {
     selection: string;
     thumbnailBackground: string;
     thumbnailShadow: string;
+    inlineCode: {
+        text: string;
+        background: string;
+    };
+    textLink: string;
+    textLinkFocused: string;
 };
 declare const fonts: {
     normal: string;
@@ -191,6 +198,9 @@ declare const textStyles: {
     label: CSSObject;
 };
 declare const sizes: {
+    inset: {
+        top: number;
+    };
     sidebarWidth: number;
     toolbar: {
         height: number;
@@ -235,6 +245,8 @@ type ThemeColorName = keyof PickByValue<Theme['colors'], string>;
 
 type IconName = keyof typeof Icons;
 
+declare function renderIcon(iconName: Exclude<ReactNode, string> | IconName): ReactNode;
+
 declare const SEPARATOR_ITEM = "separator";
 type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
 type RegularMenuItem<T extends string> = {
@@ -1339,6 +1351,12 @@ declare const colors: {
     selection: string;
     thumbnailBackground: string;
     thumbnailShadow: string;
+    inlineCode: {
+        text: string;
+        background: string;
+    };
+    textLink: string;
+    textLinkFocused: string;
 };
 
 declare const dark_colors: typeof colors;
@@ -1450,4 +1468,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, AutoResizingTextArea, 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, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, ArrayController, type ArrayControllerProps, AutoResizingTextArea, 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 IconName, 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, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };

package/dist/index.js

@@ -66,6 +66,7 @@ __export(src_exports, {
   Heading4: () => Heading4,
   Heading5: () => Heading5,
   IconButton: () => IconButton,
+  Icons: () => Icons,
   ImageDataProvider: () => ImageDataProvider,
   InputElement: () => InputElement,
   InputField: () => InputField,
@@ -111,6 +112,7 @@ __export(src_exports, {
   lightTheme: () => light_exports,
   mediaQuery: () => mediaQuery,
   normalizeListDestinationIndex: () => normalizeListDestinationIndex,
+  renderIcon: () => renderIcon,
   rgbaToSketchColor: () => rgbaToSketchColor,
   size: () => size,
   sketchColorToHex: () => sketchColorToHex,
@@ -753,7 +755,13 @@ var colors = {
   },
   selection: "rgb(179,215,254)",
   thumbnailBackground: "#f0efff",
-  thumbnailShadow: "#D3CEED66"
+  thumbnailShadow: "#D3CEED66",
+  inlineCode: {
+    text: "rgb(103, 70, 255)",
+    background: "rgb(240, 242, 246)"
+  },
+  textLink: "rgb(103, 70, 255)",
+  textLinkFocused: "rgb(147, 86, 255)"
 };
 var fonts = {
   normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
@@ -850,6 +858,9 @@ var textStyles = {
   }
 };
 var sizes = {
+  inset: {
+    top: 46
+  },
   sidebarWidth: 260,
   toolbar: {
     height: 46,
@@ -7103,6 +7114,7 @@ var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   Heading4,
   Heading5,
   IconButton,
+  Icons,
   ImageDataProvider,
   InputElement,
   InputField,
@@ -7148,6 +7160,7 @@ var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   lightTheme,
   mediaQuery,
   normalizeListDestinationIndex,
+  renderIcon,
   rgbaToSketchColor,
   size,
   sketchColorToHex,