@noya-app/noya-designsystem 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +24 -0
- package/dist/index.d.mts +65 -44
- package/dist/index.d.ts +65 -44
- package/dist/index.js +71 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +70 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/components/Button.tsx +84 -78
- package/src/components/Chip.tsx +74 -73
- package/src/components/Dialog.tsx +51 -26
- package/src/components/GridView.tsx +113 -100
- package/src/components/IconButton.tsx +10 -8
- package/src/components/InputFieldWithCompletions.tsx +3 -0
- package/src/components/InspectorPrimitives.tsx +1 -1
- package/src/components/Switch.tsx +25 -25
- package/src/components/Text.tsx +60 -56
- package/src/theme/dark.ts +33 -31
- package/src/theme/light.ts +76 -64
package/.turbo/turbo-build.log
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
[34mCLI[39m Target: esnext
|
|
7
7
|
[34mCJS[39m Build start
|
|
8
8
|
[34mESM[39m Build start
|
|
9
|
-
[
|
|
10
|
-
[
|
|
11
|
-
[
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
9
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m169.22 KB[39m
|
|
10
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m369.46 KB[39m
|
|
11
|
+
[32mESM[39m ⚡️ Build success in 138ms
|
|
12
|
+
[32mCJS[39m [1mdist/index.js [22m[32m185.57 KB[39m
|
|
13
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m370.38 KB[39m
|
|
14
|
+
[32mCJS[39m ⚡️ Build success in 165ms
|
|
15
15
|
[34mDTS[39m Build start
|
|
16
|
-
[32mDTS[39m ⚡️ Build success in
|
|
17
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
|
18
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
|
16
|
+
[32mDTS[39m ⚡️ Build success in 13680ms
|
|
17
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m54.19 KB[39m
|
|
18
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m54.19 KB[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @noya-app/noya-designsystem
|
|
2
2
|
|
|
3
|
+
## 0.0.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Bump versions
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @noya-app/noya-colorpicker@0.0.9
|
|
10
|
+
- @noya-app/noya-geometry@0.0.13
|
|
11
|
+
- @noya-app/noya-icons@0.0.6
|
|
12
|
+
- @noya-app/noya-keymap@0.0.8
|
|
13
|
+
- @noya-app/noya-utils@0.0.12
|
|
14
|
+
|
|
15
|
+
## 0.0.14
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Bump version
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
- @noya-app/noya-colorpicker@0.0.8
|
|
22
|
+
- @noya-app/noya-geometry@0.0.12
|
|
23
|
+
- @noya-app/noya-icons@0.0.5
|
|
24
|
+
- @noya-app/noya-keymap@0.0.7
|
|
25
|
+
- @noya-app/noya-utils@0.0.11
|
|
26
|
+
|
|
3
27
|
## 0.0.13
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -34,17 +34,19 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
|
|
|
34
34
|
overflow?: number;
|
|
35
35
|
}): React__default.JSX.Element;
|
|
36
36
|
|
|
37
|
-
type ButtonVariant =
|
|
38
|
-
type ButtonSize =
|
|
37
|
+
type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
|
|
38
|
+
type ButtonSize = "normal" | "large";
|
|
39
39
|
declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
|
|
40
40
|
active: boolean;
|
|
41
41
|
variant: ButtonVariant;
|
|
42
42
|
size: ButtonSize;
|
|
43
|
-
flex?: CSSProperties[
|
|
43
|
+
flex?: CSSProperties["flex"];
|
|
44
44
|
}, never>;
|
|
45
45
|
interface ButtonRootProps {
|
|
46
46
|
id?: string;
|
|
47
|
-
|
|
47
|
+
className?: string;
|
|
48
|
+
style?: CSSProperties;
|
|
49
|
+
flex?: CSSProperties["flex"];
|
|
48
50
|
tabIndex?: number;
|
|
49
51
|
children: ReactNode;
|
|
50
52
|
active?: boolean;
|
|
@@ -62,9 +64,9 @@ interface ButtonRootProps {
|
|
|
62
64
|
}
|
|
63
65
|
declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
64
66
|
|
|
65
|
-
type ChipColorScheme =
|
|
66
|
-
type ChipSize =
|
|
67
|
-
type ChipVariant =
|
|
67
|
+
type ChipColorScheme = "primary" | "secondary" | "error";
|
|
68
|
+
type ChipSize = "small" | "medium";
|
|
69
|
+
type ChipVariant = "solid" | "outlined" | "ghost";
|
|
68
70
|
interface ChipProps {
|
|
69
71
|
colorScheme?: ChipColorScheme;
|
|
70
72
|
variant?: ChipVariant;
|
|
@@ -91,6 +93,7 @@ declare const colors$1: {
|
|
|
91
93
|
textMuted: string;
|
|
92
94
|
textSubtle: string;
|
|
93
95
|
textDisabled: string;
|
|
96
|
+
textDecorativeLight: string;
|
|
94
97
|
dividerSubtle: string;
|
|
95
98
|
divider: string;
|
|
96
99
|
dividerStrong: string;
|
|
@@ -104,6 +107,9 @@ declare const colors$1: {
|
|
|
104
107
|
inputBackground: string;
|
|
105
108
|
inputBackgroundLight: string;
|
|
106
109
|
codeBackground: string;
|
|
110
|
+
codeBackgroundLight: string;
|
|
111
|
+
readonly codeBackgroundDark: string;
|
|
112
|
+
codeBackgroundDecorativeDark: string;
|
|
107
113
|
selectedBackground: string;
|
|
108
114
|
transparentChecker: string;
|
|
109
115
|
activeBackground: string;
|
|
@@ -142,6 +148,7 @@ declare const colors$1: {
|
|
|
142
148
|
readonly dragOutline: string;
|
|
143
149
|
selection: string;
|
|
144
150
|
thumbnailBackground: string;
|
|
151
|
+
thumbnailShadow: string;
|
|
145
152
|
};
|
|
146
153
|
declare const fonts: {
|
|
147
154
|
normal: string;
|
|
@@ -251,13 +258,14 @@ interface Props$g {
|
|
|
251
258
|
title?: ReactNode;
|
|
252
259
|
description?: ReactNode;
|
|
253
260
|
children?: ReactNode;
|
|
254
|
-
style?: ComponentProps<typeof StyledContent>[
|
|
255
|
-
open: ComponentProps<typeof DialogPrimitive.Root>[
|
|
256
|
-
onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>[
|
|
257
|
-
onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>[
|
|
261
|
+
style?: ComponentProps<typeof StyledContent>["style"];
|
|
262
|
+
open: ComponentProps<typeof DialogPrimitive.Root>["open"];
|
|
263
|
+
onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
|
|
264
|
+
onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
|
|
258
265
|
closeOnInteractOutside?: boolean;
|
|
259
266
|
}
|
|
260
267
|
declare const Dialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
268
|
+
declare const FullscreenDialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
261
269
|
|
|
262
270
|
type DividerVariant = 'normal' | 'strong' | 'subtle';
|
|
263
271
|
interface DividerProps {
|
|
@@ -336,7 +344,7 @@ type GridProps = {
|
|
|
336
344
|
background?: keyof Colors;
|
|
337
345
|
};
|
|
338
346
|
|
|
339
|
-
type GridViewSize =
|
|
347
|
+
type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
|
|
340
348
|
interface ItemProps$2<MenuItemType extends string = string> {
|
|
341
349
|
id: string;
|
|
342
350
|
title?: ReactNode;
|
|
@@ -351,10 +359,11 @@ interface ItemProps$2<MenuItemType extends string = string> {
|
|
|
351
359
|
menuItems?: MenuItem<MenuItemType>[];
|
|
352
360
|
onSelectMenuItem?: (value: MenuItemType) => void;
|
|
353
361
|
onContextMenu?: () => void;
|
|
362
|
+
style?: CSSProperties;
|
|
354
363
|
}
|
|
355
364
|
type GridViewContextValue = {
|
|
356
365
|
size: GridViewSize;
|
|
357
|
-
textPosition:
|
|
366
|
+
textPosition: "overlay" | "below" | "toolip";
|
|
358
367
|
bordered: boolean;
|
|
359
368
|
disabled: boolean;
|
|
360
369
|
};
|
|
@@ -377,6 +386,8 @@ declare namespace GridView {
|
|
|
377
386
|
|
|
378
387
|
declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
|
|
379
388
|
iconName: keyof typeof Icons;
|
|
389
|
+
className?: string | undefined;
|
|
390
|
+
style?: React__default.CSSProperties | undefined;
|
|
380
391
|
selected?: boolean | undefined;
|
|
381
392
|
color?: string | undefined;
|
|
382
393
|
size?: number | undefined;
|
|
@@ -676,6 +687,7 @@ type Props$b = {
|
|
|
676
687
|
onDeleteWhenEmpty?: () => void;
|
|
677
688
|
size?: InputFieldSize;
|
|
678
689
|
style?: React__default.CSSProperties;
|
|
690
|
+
className?: string;
|
|
679
691
|
children?: React__default.ReactNode;
|
|
680
692
|
hideChildrenWhenFocused?: boolean;
|
|
681
693
|
hideMenuWhenEmptyValue?: boolean;
|
|
@@ -867,54 +879,58 @@ declare const Stack: {
|
|
|
867
879
|
H: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
868
880
|
};
|
|
869
881
|
|
|
870
|
-
type
|
|
882
|
+
type SwitchColorScheme = "normal" | "primary" | "secondary";
|
|
871
883
|
interface Props$3 {
|
|
872
884
|
value: boolean;
|
|
873
885
|
onChange: (value: boolean) => void;
|
|
874
|
-
|
|
886
|
+
colorScheme?: SwitchColorScheme;
|
|
875
887
|
}
|
|
876
|
-
declare const Switch: ({ value, onChange,
|
|
888
|
+
declare const Switch: ({ value, onChange, colorScheme, }: Props$3) => React__default.JSX.Element;
|
|
877
889
|
|
|
878
890
|
type StyleProps = {
|
|
879
|
-
flex?: CSSProperties$1[
|
|
880
|
-
padding?: CSSProperties$1[
|
|
881
|
-
background?: CSSProperties$1[
|
|
882
|
-
borderRadius?: CSSProperties$1[
|
|
883
|
-
textAlign?: CSSProperties$1[
|
|
884
|
-
fontWeight?: CSSProperties$1[
|
|
885
|
-
fontStyle?: CSSProperties$1[
|
|
886
|
-
fontSize?: CSSProperties$1[
|
|
887
|
-
lineHeight?: CSSProperties$1[
|
|
888
|
-
fontFamily?: CSSProperties$1[
|
|
889
|
-
wordBreak?: CSSProperties$1[
|
|
890
|
-
whiteSpace?: CSSProperties$1[
|
|
891
|
-
height?: CSSProperties$1[
|
|
892
|
-
width?: CSSProperties$1[
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
891
|
+
flex?: CSSProperties$1["flex"];
|
|
892
|
+
padding?: CSSProperties$1["padding"];
|
|
893
|
+
background?: CSSProperties$1["background"];
|
|
894
|
+
borderRadius?: CSSProperties$1["borderRadius"];
|
|
895
|
+
textAlign?: CSSProperties$1["textAlign"];
|
|
896
|
+
fontWeight?: CSSProperties$1["fontWeight"];
|
|
897
|
+
fontStyle?: CSSProperties$1["fontStyle"];
|
|
898
|
+
fontSize?: CSSProperties$1["fontSize"];
|
|
899
|
+
lineHeight?: CSSProperties$1["lineHeight"];
|
|
900
|
+
fontFamily?: CSSProperties$1["fontFamily"];
|
|
901
|
+
wordBreak?: CSSProperties$1["wordBreak"];
|
|
902
|
+
whiteSpace?: CSSProperties$1["whiteSpace"];
|
|
903
|
+
height?: CSSProperties$1["height"];
|
|
904
|
+
width?: CSSProperties$1["width"];
|
|
905
|
+
minWidth?: CSSProperties$1["minWidth"];
|
|
906
|
+
maxWidth?: CSSProperties$1["maxWidth"];
|
|
907
|
+
opacity?: CSSProperties$1["opacity"];
|
|
908
|
+
position?: CSSProperties$1["position"];
|
|
909
|
+
overflow?: CSSProperties$1["overflow"];
|
|
910
|
+
textOverflow?: CSSProperties$1["textOverflow"];
|
|
911
|
+
textDecoration?: CSSProperties$1["textDecoration"];
|
|
912
|
+
display?: CSSProperties$1["display"];
|
|
913
|
+
top?: CSSProperties$1["top"];
|
|
914
|
+
right?: CSSProperties$1["right"];
|
|
915
|
+
bottom?: CSSProperties$1["bottom"];
|
|
916
|
+
left?: CSSProperties$1["left"];
|
|
917
|
+
userSelect?: CSSProperties$1["userSelect"];
|
|
918
|
+
cursor?: CSSProperties$1["cursor"];
|
|
904
919
|
};
|
|
905
920
|
type TextBreakpointList = BreakpointCollection<StyleProps>;
|
|
906
921
|
interface Props$2 extends StyleProps {
|
|
907
922
|
as?: keyof ReactHTML;
|
|
908
923
|
href?: string;
|
|
909
924
|
className?: string;
|
|
910
|
-
variant: keyof Theme[
|
|
925
|
+
variant: keyof Theme["textStyles"];
|
|
911
926
|
breakpoints?: BreakpointCollection<StyleProps> | null | false;
|
|
912
927
|
color?: ThemeColorName;
|
|
913
928
|
children: ReactNode;
|
|
914
929
|
onClick?: () => void;
|
|
930
|
+
onDoubleClick?: () => void;
|
|
915
931
|
}
|
|
916
932
|
declare const Text$1: (props: Props$2 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
917
|
-
type PresetProps = Omit<Props$2,
|
|
933
|
+
type PresetProps = Omit<Props$2, "variant">;
|
|
918
934
|
declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
919
935
|
declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
920
936
|
declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
@@ -1108,6 +1124,7 @@ declare const colors: {
|
|
|
1108
1124
|
textMuted: string;
|
|
1109
1125
|
textSubtle: string;
|
|
1110
1126
|
textDisabled: string;
|
|
1127
|
+
textDecorativeLight: string;
|
|
1111
1128
|
dividerSubtle: string;
|
|
1112
1129
|
divider: string;
|
|
1113
1130
|
dividerStrong: string;
|
|
@@ -1121,6 +1138,9 @@ declare const colors: {
|
|
|
1121
1138
|
inputBackground: string;
|
|
1122
1139
|
inputBackgroundLight: string;
|
|
1123
1140
|
codeBackground: string;
|
|
1141
|
+
codeBackgroundLight: string;
|
|
1142
|
+
readonly codeBackgroundDark: string;
|
|
1143
|
+
codeBackgroundDecorativeDark: string;
|
|
1124
1144
|
selectedBackground: string;
|
|
1125
1145
|
transparentChecker: string;
|
|
1126
1146
|
activeBackground: string;
|
|
@@ -1159,6 +1179,7 @@ declare const colors: {
|
|
|
1159
1179
|
readonly dragOutline: string;
|
|
1160
1180
|
selection: string;
|
|
1161
1181
|
thumbnailBackground: string;
|
|
1182
|
+
thumbnailShadow: string;
|
|
1162
1183
|
};
|
|
1163
1184
|
|
|
1164
1185
|
declare const dark_colors: typeof colors;
|
|
@@ -1268,4 +1289,4 @@ declare module "react" {
|
|
|
1268
1289
|
function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
|
|
1269
1290
|
}
|
|
1270
1291
|
|
|
1271
|
-
export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DropValidator, DropdownMenu, type EditableRowProps, type EventName, type ExtractMenuItemType, FillInputField, FillPreviewBackground, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, 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 ReactDOMEventHandlers, type ReactEventHandlers, 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, isLeftButtonClicked, isRightButtonClicked, lightTheme, mediaQuery, mergeEventHandlers, normalizeListIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
|
|
1292
|
+
export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DropValidator, DropdownMenu, type EditableRowProps, type EventName, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, 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 ReactDOMEventHandlers, type ReactEventHandlers, 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, isLeftButtonClicked, isRightButtonClicked, lightTheme, mediaQuery, mergeEventHandlers, normalizeListIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
|
package/dist/index.d.ts
CHANGED
|
@@ -34,17 +34,19 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
|
|
|
34
34
|
overflow?: number;
|
|
35
35
|
}): React__default.JSX.Element;
|
|
36
36
|
|
|
37
|
-
type ButtonVariant =
|
|
38
|
-
type ButtonSize =
|
|
37
|
+
type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
|
|
38
|
+
type ButtonSize = "normal" | "large";
|
|
39
39
|
declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
|
|
40
40
|
active: boolean;
|
|
41
41
|
variant: ButtonVariant;
|
|
42
42
|
size: ButtonSize;
|
|
43
|
-
flex?: CSSProperties[
|
|
43
|
+
flex?: CSSProperties["flex"];
|
|
44
44
|
}, never>;
|
|
45
45
|
interface ButtonRootProps {
|
|
46
46
|
id?: string;
|
|
47
|
-
|
|
47
|
+
className?: string;
|
|
48
|
+
style?: CSSProperties;
|
|
49
|
+
flex?: CSSProperties["flex"];
|
|
48
50
|
tabIndex?: number;
|
|
49
51
|
children: ReactNode;
|
|
50
52
|
active?: boolean;
|
|
@@ -62,9 +64,9 @@ interface ButtonRootProps {
|
|
|
62
64
|
}
|
|
63
65
|
declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
64
66
|
|
|
65
|
-
type ChipColorScheme =
|
|
66
|
-
type ChipSize =
|
|
67
|
-
type ChipVariant =
|
|
67
|
+
type ChipColorScheme = "primary" | "secondary" | "error";
|
|
68
|
+
type ChipSize = "small" | "medium";
|
|
69
|
+
type ChipVariant = "solid" | "outlined" | "ghost";
|
|
68
70
|
interface ChipProps {
|
|
69
71
|
colorScheme?: ChipColorScheme;
|
|
70
72
|
variant?: ChipVariant;
|
|
@@ -91,6 +93,7 @@ declare const colors$1: {
|
|
|
91
93
|
textMuted: string;
|
|
92
94
|
textSubtle: string;
|
|
93
95
|
textDisabled: string;
|
|
96
|
+
textDecorativeLight: string;
|
|
94
97
|
dividerSubtle: string;
|
|
95
98
|
divider: string;
|
|
96
99
|
dividerStrong: string;
|
|
@@ -104,6 +107,9 @@ declare const colors$1: {
|
|
|
104
107
|
inputBackground: string;
|
|
105
108
|
inputBackgroundLight: string;
|
|
106
109
|
codeBackground: string;
|
|
110
|
+
codeBackgroundLight: string;
|
|
111
|
+
readonly codeBackgroundDark: string;
|
|
112
|
+
codeBackgroundDecorativeDark: string;
|
|
107
113
|
selectedBackground: string;
|
|
108
114
|
transparentChecker: string;
|
|
109
115
|
activeBackground: string;
|
|
@@ -142,6 +148,7 @@ declare const colors$1: {
|
|
|
142
148
|
readonly dragOutline: string;
|
|
143
149
|
selection: string;
|
|
144
150
|
thumbnailBackground: string;
|
|
151
|
+
thumbnailShadow: string;
|
|
145
152
|
};
|
|
146
153
|
declare const fonts: {
|
|
147
154
|
normal: string;
|
|
@@ -251,13 +258,14 @@ interface Props$g {
|
|
|
251
258
|
title?: ReactNode;
|
|
252
259
|
description?: ReactNode;
|
|
253
260
|
children?: ReactNode;
|
|
254
|
-
style?: ComponentProps<typeof StyledContent>[
|
|
255
|
-
open: ComponentProps<typeof DialogPrimitive.Root>[
|
|
256
|
-
onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>[
|
|
257
|
-
onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>[
|
|
261
|
+
style?: ComponentProps<typeof StyledContent>["style"];
|
|
262
|
+
open: ComponentProps<typeof DialogPrimitive.Root>["open"];
|
|
263
|
+
onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
|
|
264
|
+
onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
|
|
258
265
|
closeOnInteractOutside?: boolean;
|
|
259
266
|
}
|
|
260
267
|
declare const Dialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
268
|
+
declare const FullscreenDialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
261
269
|
|
|
262
270
|
type DividerVariant = 'normal' | 'strong' | 'subtle';
|
|
263
271
|
interface DividerProps {
|
|
@@ -336,7 +344,7 @@ type GridProps = {
|
|
|
336
344
|
background?: keyof Colors;
|
|
337
345
|
};
|
|
338
346
|
|
|
339
|
-
type GridViewSize =
|
|
347
|
+
type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
|
|
340
348
|
interface ItemProps$2<MenuItemType extends string = string> {
|
|
341
349
|
id: string;
|
|
342
350
|
title?: ReactNode;
|
|
@@ -351,10 +359,11 @@ interface ItemProps$2<MenuItemType extends string = string> {
|
|
|
351
359
|
menuItems?: MenuItem<MenuItemType>[];
|
|
352
360
|
onSelectMenuItem?: (value: MenuItemType) => void;
|
|
353
361
|
onContextMenu?: () => void;
|
|
362
|
+
style?: CSSProperties;
|
|
354
363
|
}
|
|
355
364
|
type GridViewContextValue = {
|
|
356
365
|
size: GridViewSize;
|
|
357
|
-
textPosition:
|
|
366
|
+
textPosition: "overlay" | "below" | "toolip";
|
|
358
367
|
bordered: boolean;
|
|
359
368
|
disabled: boolean;
|
|
360
369
|
};
|
|
@@ -377,6 +386,8 @@ declare namespace GridView {
|
|
|
377
386
|
|
|
378
387
|
declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
|
|
379
388
|
iconName: keyof typeof Icons;
|
|
389
|
+
className?: string | undefined;
|
|
390
|
+
style?: React__default.CSSProperties | undefined;
|
|
380
391
|
selected?: boolean | undefined;
|
|
381
392
|
color?: string | undefined;
|
|
382
393
|
size?: number | undefined;
|
|
@@ -676,6 +687,7 @@ type Props$b = {
|
|
|
676
687
|
onDeleteWhenEmpty?: () => void;
|
|
677
688
|
size?: InputFieldSize;
|
|
678
689
|
style?: React__default.CSSProperties;
|
|
690
|
+
className?: string;
|
|
679
691
|
children?: React__default.ReactNode;
|
|
680
692
|
hideChildrenWhenFocused?: boolean;
|
|
681
693
|
hideMenuWhenEmptyValue?: boolean;
|
|
@@ -867,54 +879,58 @@ declare const Stack: {
|
|
|
867
879
|
H: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
868
880
|
};
|
|
869
881
|
|
|
870
|
-
type
|
|
882
|
+
type SwitchColorScheme = "normal" | "primary" | "secondary";
|
|
871
883
|
interface Props$3 {
|
|
872
884
|
value: boolean;
|
|
873
885
|
onChange: (value: boolean) => void;
|
|
874
|
-
|
|
886
|
+
colorScheme?: SwitchColorScheme;
|
|
875
887
|
}
|
|
876
|
-
declare const Switch: ({ value, onChange,
|
|
888
|
+
declare const Switch: ({ value, onChange, colorScheme, }: Props$3) => React__default.JSX.Element;
|
|
877
889
|
|
|
878
890
|
type StyleProps = {
|
|
879
|
-
flex?: CSSProperties$1[
|
|
880
|
-
padding?: CSSProperties$1[
|
|
881
|
-
background?: CSSProperties$1[
|
|
882
|
-
borderRadius?: CSSProperties$1[
|
|
883
|
-
textAlign?: CSSProperties$1[
|
|
884
|
-
fontWeight?: CSSProperties$1[
|
|
885
|
-
fontStyle?: CSSProperties$1[
|
|
886
|
-
fontSize?: CSSProperties$1[
|
|
887
|
-
lineHeight?: CSSProperties$1[
|
|
888
|
-
fontFamily?: CSSProperties$1[
|
|
889
|
-
wordBreak?: CSSProperties$1[
|
|
890
|
-
whiteSpace?: CSSProperties$1[
|
|
891
|
-
height?: CSSProperties$1[
|
|
892
|
-
width?: CSSProperties$1[
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
891
|
+
flex?: CSSProperties$1["flex"];
|
|
892
|
+
padding?: CSSProperties$1["padding"];
|
|
893
|
+
background?: CSSProperties$1["background"];
|
|
894
|
+
borderRadius?: CSSProperties$1["borderRadius"];
|
|
895
|
+
textAlign?: CSSProperties$1["textAlign"];
|
|
896
|
+
fontWeight?: CSSProperties$1["fontWeight"];
|
|
897
|
+
fontStyle?: CSSProperties$1["fontStyle"];
|
|
898
|
+
fontSize?: CSSProperties$1["fontSize"];
|
|
899
|
+
lineHeight?: CSSProperties$1["lineHeight"];
|
|
900
|
+
fontFamily?: CSSProperties$1["fontFamily"];
|
|
901
|
+
wordBreak?: CSSProperties$1["wordBreak"];
|
|
902
|
+
whiteSpace?: CSSProperties$1["whiteSpace"];
|
|
903
|
+
height?: CSSProperties$1["height"];
|
|
904
|
+
width?: CSSProperties$1["width"];
|
|
905
|
+
minWidth?: CSSProperties$1["minWidth"];
|
|
906
|
+
maxWidth?: CSSProperties$1["maxWidth"];
|
|
907
|
+
opacity?: CSSProperties$1["opacity"];
|
|
908
|
+
position?: CSSProperties$1["position"];
|
|
909
|
+
overflow?: CSSProperties$1["overflow"];
|
|
910
|
+
textOverflow?: CSSProperties$1["textOverflow"];
|
|
911
|
+
textDecoration?: CSSProperties$1["textDecoration"];
|
|
912
|
+
display?: CSSProperties$1["display"];
|
|
913
|
+
top?: CSSProperties$1["top"];
|
|
914
|
+
right?: CSSProperties$1["right"];
|
|
915
|
+
bottom?: CSSProperties$1["bottom"];
|
|
916
|
+
left?: CSSProperties$1["left"];
|
|
917
|
+
userSelect?: CSSProperties$1["userSelect"];
|
|
918
|
+
cursor?: CSSProperties$1["cursor"];
|
|
904
919
|
};
|
|
905
920
|
type TextBreakpointList = BreakpointCollection<StyleProps>;
|
|
906
921
|
interface Props$2 extends StyleProps {
|
|
907
922
|
as?: keyof ReactHTML;
|
|
908
923
|
href?: string;
|
|
909
924
|
className?: string;
|
|
910
|
-
variant: keyof Theme[
|
|
925
|
+
variant: keyof Theme["textStyles"];
|
|
911
926
|
breakpoints?: BreakpointCollection<StyleProps> | null | false;
|
|
912
927
|
color?: ThemeColorName;
|
|
913
928
|
children: ReactNode;
|
|
914
929
|
onClick?: () => void;
|
|
930
|
+
onDoubleClick?: () => void;
|
|
915
931
|
}
|
|
916
932
|
declare const Text$1: (props: Props$2 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
917
|
-
type PresetProps = Omit<Props$2,
|
|
933
|
+
type PresetProps = Omit<Props$2, "variant">;
|
|
918
934
|
declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
919
935
|
declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
920
936
|
declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
|
|
@@ -1108,6 +1124,7 @@ declare const colors: {
|
|
|
1108
1124
|
textMuted: string;
|
|
1109
1125
|
textSubtle: string;
|
|
1110
1126
|
textDisabled: string;
|
|
1127
|
+
textDecorativeLight: string;
|
|
1111
1128
|
dividerSubtle: string;
|
|
1112
1129
|
divider: string;
|
|
1113
1130
|
dividerStrong: string;
|
|
@@ -1121,6 +1138,9 @@ declare const colors: {
|
|
|
1121
1138
|
inputBackground: string;
|
|
1122
1139
|
inputBackgroundLight: string;
|
|
1123
1140
|
codeBackground: string;
|
|
1141
|
+
codeBackgroundLight: string;
|
|
1142
|
+
readonly codeBackgroundDark: string;
|
|
1143
|
+
codeBackgroundDecorativeDark: string;
|
|
1124
1144
|
selectedBackground: string;
|
|
1125
1145
|
transparentChecker: string;
|
|
1126
1146
|
activeBackground: string;
|
|
@@ -1159,6 +1179,7 @@ declare const colors: {
|
|
|
1159
1179
|
readonly dragOutline: string;
|
|
1160
1180
|
selection: string;
|
|
1161
1181
|
thumbnailBackground: string;
|
|
1182
|
+
thumbnailShadow: string;
|
|
1162
1183
|
};
|
|
1163
1184
|
|
|
1164
1185
|
declare const dark_colors: typeof colors;
|
|
@@ -1268,4 +1289,4 @@ declare module "react" {
|
|
|
1268
1289
|
function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
|
|
1269
1290
|
}
|
|
1270
1291
|
|
|
1271
|
-
export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DropValidator, DropdownMenu, type EditableRowProps, type EventName, type ExtractMenuItemType, FillInputField, FillPreviewBackground, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, 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 ReactDOMEventHandlers, type ReactEventHandlers, 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, isLeftButtonClicked, isRightButtonClicked, lightTheme, mediaQuery, mergeEventHandlers, normalizeListIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
|
|
1292
|
+
export { ActivityIndicator, ArrayController, type ArrayControllerProps, Avatar, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DropValidator, DropdownMenu, type EditableRowProps, type EventName, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, 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 ReactDOMEventHandlers, type ReactEventHandlers, 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, isLeftButtonClicked, isRightButtonClicked, lightTheme, mediaQuery, mergeEventHandlers, normalizeListIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
|