@prismicio/editor-ui 0.4.27 → 0.4.28
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/dist/components/Accordion/Accordion.d.ts +16 -0
- package/dist/components/Accordion/Accordion.stories.d.ts +33 -0
- package/dist/components/Accordion/index.d.ts +3 -0
- package/dist/components/Accordion/useAccordion.d.ts +18 -0
- package/dist/components/AnimatedList/AnimatedList.stories.d.ts +1 -1
- package/dist/components/Box/Box.stories.d.ts +33 -33
- package/dist/components/Button/Button.stories.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -2
- package/dist/components/Cropper/Cropper.stories.d.ts +2 -2
- package/dist/components/Group/Group.d.ts +4 -2
- package/dist/components/Group/Group.stories.d.ts +30 -2
- package/dist/components/Group/GroupItem.d.ts +1 -0
- package/dist/components/Skeleton/Skeleton.d.ts +11 -11
- package/dist/components/Skeleton/Skeleton.stories.d.ts +1 -1
- package/dist/components/Slider/Slider.stories.d.ts +2 -2
- package/dist/components/Toast/Toast.stories.d.ts +2 -2
- package/dist/components/Video/Video.stories.d.ts +1 -1
- package/dist/index.cjs.js +131 -131
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +10097 -9698
- package/dist/style.css +1 -1
- package/dist/theme/new/theme.d.ts +0 -1
- package/dist/theme/sprinkles.css.d.ts +220 -220
- package/package.json +3 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type AccordionItemProps as ItemProps, type AccordionMultipleProps as RootMultipleProps, type AccordionSingleProps as RootSingleProps } from "@radix-ui/react-accordion";
|
|
2
|
+
export type AccordionProps = Omit<RootMultipleProps, "type" | "value" | "defaultValue" | "onValueChange"> & {
|
|
3
|
+
type: RootMultipleProps["type"] | RootSingleProps["type"];
|
|
4
|
+
expanded?: RootMultipleProps["value"];
|
|
5
|
+
defaultExpanded?: RootMultipleProps["defaultValue"];
|
|
6
|
+
onExpandedChange?: RootMultipleProps["onValueChange"];
|
|
7
|
+
};
|
|
8
|
+
export declare function Accordion(props: AccordionProps): JSX.Element;
|
|
9
|
+
type AccordionItemState = {
|
|
10
|
+
isExpanded: boolean;
|
|
11
|
+
};
|
|
12
|
+
type AccordionItemProps = Omit<ItemProps, "children"> & {
|
|
13
|
+
children?: ItemProps["children"] | ((state: AccordionItemState) => ItemProps["children"]);
|
|
14
|
+
};
|
|
15
|
+
export declare function AccordionItem(props: AccordionItemProps): JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Accordion } from "./Accordion";
|
|
3
|
+
type Story = StoryObj<typeof meta>;
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: typeof Accordion;
|
|
7
|
+
argTypes: {
|
|
8
|
+
children: {
|
|
9
|
+
control: {
|
|
10
|
+
disable: boolean;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
type: {
|
|
14
|
+
control: {
|
|
15
|
+
type: string;
|
|
16
|
+
};
|
|
17
|
+
options: string[];
|
|
18
|
+
};
|
|
19
|
+
expanded: {
|
|
20
|
+
control: {
|
|
21
|
+
disable: boolean;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
defaultExpanded: {
|
|
25
|
+
control: {
|
|
26
|
+
disable: boolean;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export default meta;
|
|
32
|
+
export declare const Controlled: Story;
|
|
33
|
+
export declare const Uncontrolled: Story;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type UseAccordionType = "single" | "multiple";
|
|
2
|
+
type UseAccordionArgs = {
|
|
3
|
+
type: UseAccordionType;
|
|
4
|
+
defaultExpanded?: string[];
|
|
5
|
+
};
|
|
6
|
+
type UseAccordionValue = {
|
|
7
|
+
type: UseAccordionType;
|
|
8
|
+
expanded: string[];
|
|
9
|
+
expand: (expanded: string | string[]) => void;
|
|
10
|
+
collapse: (expanded: string | string[]) => void;
|
|
11
|
+
accordionProps: {
|
|
12
|
+
type: UseAccordionType;
|
|
13
|
+
expanded: string[];
|
|
14
|
+
onExpandedChange: (expanded: string[]) => void;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export declare function useAccordion(args: UseAccordionArgs): UseAccordionValue;
|
|
18
|
+
export {};
|
|
@@ -8,7 +8,7 @@ export default meta;
|
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
render: (args: {
|
|
10
10
|
ariaLabel: string;
|
|
11
|
-
gap?: 0 | 2 | 1 |
|
|
11
|
+
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
12
12
|
direction?: "horizontal" | "vertical" | undefined;
|
|
13
13
|
items: unknown[];
|
|
14
14
|
getItemKey: (item: unknown) => string;
|
|
@@ -13,7 +13,7 @@ declare const meta: {
|
|
|
13
13
|
export default meta;
|
|
14
14
|
export declare const Default: {
|
|
15
15
|
render: (args: {
|
|
16
|
-
as?: "
|
|
16
|
+
as?: "div" | "form" | "nav" | "ol" | "span" | "ul" | "article" | "header" | undefined;
|
|
17
17
|
children?: import("react").ReactNode;
|
|
18
18
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
19
19
|
top?: string | number | undefined;
|
|
@@ -38,13 +38,13 @@ export declare const Default: {
|
|
|
38
38
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
39
39
|
delay?: string | undefined;
|
|
40
40
|
} | undefined;
|
|
41
|
-
padding?: (0 | 2 | 1 |
|
|
42
|
-
block?: 0 | 2 | 1 |
|
|
43
|
-
inline?: 0 | 2 | 1 |
|
|
44
|
-
top?: 0 | 2 | 1 |
|
|
45
|
-
bottom?: 0 | 2 | 1 |
|
|
46
|
-
left?: 0 | 2 | 1 |
|
|
47
|
-
right?: 0 | 2 | 1 |
|
|
41
|
+
padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
42
|
+
block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
43
|
+
inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
44
|
+
top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
45
|
+
bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
46
|
+
left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
47
|
+
right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
48
48
|
}) | undefined;
|
|
49
49
|
border?: (boolean | {
|
|
50
50
|
top?: boolean | undefined;
|
|
@@ -52,24 +52,24 @@ export declare const Default: {
|
|
|
52
52
|
left?: boolean | undefined;
|
|
53
53
|
right?: boolean | undefined;
|
|
54
54
|
}) | undefined;
|
|
55
|
-
borderRadius?: (0 | 2 | 1 |
|
|
56
|
-
topLeft?: 0 | 2 | 1 |
|
|
57
|
-
topRight?: 0 | 2 | 1 |
|
|
58
|
-
bottomLeft?: 0 | 2 | 1 |
|
|
59
|
-
bottomRight?: 0 | 2 | 1 |
|
|
55
|
+
borderRadius?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | {
|
|
56
|
+
topLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
57
|
+
topRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
58
|
+
bottomLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
59
|
+
bottomRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
60
60
|
}) | undefined;
|
|
61
61
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
62
62
|
borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
63
|
-
boxShadow?: "
|
|
63
|
+
boxShadow?: "none" | "1" | "2" | "4" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
|
|
64
64
|
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
65
65
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
66
66
|
visibility?: "hidden" | "visible" | undefined;
|
|
67
|
-
overflowY?: "
|
|
67
|
+
overflowY?: "hidden" | "auto" | undefined;
|
|
68
68
|
overflow?: "hidden" | undefined;
|
|
69
69
|
gridColumn?: string | undefined;
|
|
70
70
|
gridRow?: string | undefined;
|
|
71
71
|
transform?: import("csstype").Property.Transform | undefined;
|
|
72
|
-
gap?: 0 | 2 | 1 |
|
|
72
|
+
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
73
73
|
alignItems?: "center" | "flex-start" | undefined;
|
|
74
74
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
75
75
|
display: "grid";
|
|
@@ -79,7 +79,7 @@ export declare const Default: {
|
|
|
79
79
|
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
80
80
|
key?: import("react").Key | null | undefined;
|
|
81
81
|
} | {
|
|
82
|
-
as?: "
|
|
82
|
+
as?: "div" | "form" | "nav" | "ol" | "span" | "ul" | "article" | "header" | undefined;
|
|
83
83
|
children?: import("react").ReactNode;
|
|
84
84
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
85
85
|
top?: string | number | undefined;
|
|
@@ -104,13 +104,13 @@ export declare const Default: {
|
|
|
104
104
|
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
105
105
|
delay?: string | undefined;
|
|
106
106
|
} | undefined;
|
|
107
|
-
padding?: (0 | 2 | 1 |
|
|
108
|
-
block?: 0 | 2 | 1 |
|
|
109
|
-
inline?: 0 | 2 | 1 |
|
|
110
|
-
top?: 0 | 2 | 1 |
|
|
111
|
-
bottom?: 0 | 2 | 1 |
|
|
112
|
-
left?: 0 | 2 | 1 |
|
|
113
|
-
right?: 0 | 2 | 1 |
|
|
107
|
+
padding?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | {
|
|
108
|
+
block?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
109
|
+
inline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
110
|
+
top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
111
|
+
bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
112
|
+
left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
113
|
+
right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
114
114
|
}) | undefined;
|
|
115
115
|
border?: (boolean | {
|
|
116
116
|
top?: boolean | undefined;
|
|
@@ -118,28 +118,28 @@ export declare const Default: {
|
|
|
118
118
|
left?: boolean | undefined;
|
|
119
119
|
right?: boolean | undefined;
|
|
120
120
|
}) | undefined;
|
|
121
|
-
borderRadius?: (0 | 2 | 1 |
|
|
122
|
-
topLeft?: 0 | 2 | 1 |
|
|
123
|
-
topRight?: 0 | 2 | 1 |
|
|
124
|
-
bottomLeft?: 0 | 2 | 1 |
|
|
125
|
-
bottomRight?: 0 | 2 | 1 |
|
|
121
|
+
borderRadius?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | {
|
|
122
|
+
topLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
123
|
+
topRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
124
|
+
bottomLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
125
|
+
bottomRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
126
126
|
}) | undefined;
|
|
127
127
|
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
128
128
|
borderColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
129
|
-
boxShadow?: "
|
|
129
|
+
boxShadow?: "none" | "1" | "2" | "4" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "gradient" | "greyFocus" | "cropper" | undefined;
|
|
130
130
|
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
|
|
131
131
|
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
132
132
|
visibility?: "hidden" | "visible" | undefined;
|
|
133
|
-
overflowY?: "
|
|
133
|
+
overflowY?: "hidden" | "auto" | undefined;
|
|
134
134
|
overflow?: "hidden" | undefined;
|
|
135
135
|
gridColumn?: string | undefined;
|
|
136
136
|
gridRow?: string | undefined;
|
|
137
137
|
transform?: import("csstype").Property.Transform | undefined;
|
|
138
|
-
gap?: 0 | 2 | 1 |
|
|
138
|
+
gap?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
139
139
|
alignItems?: "center" | "flex-start" | undefined;
|
|
140
140
|
justifyContent?: "center" | "end" | "space-between" | undefined;
|
|
141
141
|
display?: "flex" | "inline-flex" | undefined;
|
|
142
|
-
flexDirection?: "
|
|
142
|
+
flexDirection?: "row" | "column" | undefined;
|
|
143
143
|
gridTemplateColumns?: undefined;
|
|
144
144
|
gridTemplateRows?: undefined;
|
|
145
145
|
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
@@ -24,8 +24,8 @@ export declare const Default: {
|
|
|
24
24
|
flexContent?: boolean | undefined;
|
|
25
25
|
textWeight?: "bold" | "normal" | undefined;
|
|
26
26
|
sx?: import("../../theme/new").SX | undefined;
|
|
27
|
-
startIcon?: "
|
|
28
|
-
endIcon?: "
|
|
27
|
+
startIcon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
28
|
+
endIcon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
29
29
|
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
30
30
|
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
31
31
|
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
@@ -8,9 +8,9 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
|
|
|
8
8
|
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
9
9
|
tabIndex?: number | undefined;
|
|
10
10
|
}, {
|
|
11
|
-
disabled?: boolean | undefined;
|
|
12
|
-
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
13
11
|
tabIndex?: number | undefined;
|
|
12
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
14
|
checked?: boolean | undefined;
|
|
15
15
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
16
16
|
}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
2
|
+
image?: string | undefined;
|
|
2
3
|
zoom: number;
|
|
3
4
|
crop: import("react-easy-crop").Point;
|
|
4
|
-
image?: string | undefined;
|
|
5
5
|
aspect: number;
|
|
6
6
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
7
7
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
@@ -11,9 +11,9 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
11
11
|
export default _default;
|
|
12
12
|
export declare const Default: {
|
|
13
13
|
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
14
|
+
image?: string | undefined;
|
|
14
15
|
zoom: number;
|
|
15
16
|
crop: import("react-easy-crop").Point;
|
|
16
|
-
image?: string | undefined;
|
|
17
17
|
aspect: number;
|
|
18
18
|
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
19
19
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
|
|
2
|
+
import { type AccordionProps } from "../Accordion";
|
|
3
|
+
export type GroupProps<ITEM> = {
|
|
3
4
|
items: ITEM[];
|
|
4
5
|
title?: string;
|
|
5
6
|
addItemButtonTitle?: string;
|
|
6
7
|
maxItems?: number;
|
|
8
|
+
accordionType: AccordionProps["type"];
|
|
7
9
|
getItemKey: (item: ITEM) => string;
|
|
8
10
|
children: (item: ITEM, index: number) => ReactNode;
|
|
9
11
|
onAddItem?: () => void;
|
|
10
|
-
}
|
|
12
|
+
} & Pick<AccordionProps, "expanded" | "onExpandedChange">;
|
|
11
13
|
export declare function Group<ITEM>(props: GroupProps<ITEM>): JSX.Element;
|
|
@@ -1,6 +1,34 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
2
|
import { Group } from "./Group";
|
|
3
3
|
type Story = StoryObj<typeof meta>;
|
|
4
|
-
declare const meta:
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: typeof Group;
|
|
7
|
+
argTypes: {
|
|
8
|
+
children: {};
|
|
9
|
+
items: {
|
|
10
|
+
control: {
|
|
11
|
+
disable: boolean;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
expanded: {
|
|
15
|
+
control: {
|
|
16
|
+
disable: boolean;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
accordionType: {
|
|
20
|
+
control: {
|
|
21
|
+
type: string;
|
|
22
|
+
};
|
|
23
|
+
options: string[];
|
|
24
|
+
};
|
|
25
|
+
addItemButtonTitle: {
|
|
26
|
+
control: {
|
|
27
|
+
type: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
onAddItem: {};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
5
33
|
export default meta;
|
|
6
34
|
export declare const Default: Story;
|
|
@@ -25,16 +25,16 @@ export declare function Skeleton(props: Props): import("react").DetailedReactHTM
|
|
|
25
25
|
justifySelf?: "center" | "stretch" | undefined;
|
|
26
26
|
visibility?: "hidden" | "visible" | undefined;
|
|
27
27
|
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
28
|
-
marginLeft?: 0 | 2 | 1 |
|
|
29
|
-
marginRight?: 0 | 2 | 1 |
|
|
30
|
-
marginTop?: 0 | 2 | 1 |
|
|
31
|
-
marginBottom?: 0 | 2 | 1 |
|
|
32
|
-
marginInline?: 0 | 2 | 1 |
|
|
33
|
-
marginBlock?: 0 | 2 | 1 |
|
|
34
|
-
top?: 0 | 2 | 1 |
|
|
35
|
-
left?: 0 | 2 | 1 |
|
|
36
|
-
right?: 0 | 2 | 1 |
|
|
37
|
-
bottom?: 0 | 2 | 1 |
|
|
38
|
-
borderRadius?: 0 | 2 | 1 |
|
|
28
|
+
marginLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
29
|
+
marginRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
30
|
+
marginTop?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
31
|
+
marginBottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
32
|
+
marginInline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
33
|
+
marginBlock?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
34
|
+
top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
35
|
+
left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
36
|
+
right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
37
|
+
bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | "auto" | "fieldSetGap" | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
|
|
38
|
+
borderRadius?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | "inherit" | "50%" | "100%" | undefined;
|
|
39
39
|
};
|
|
40
40
|
}, HTMLElement>;
|
|
@@ -37,7 +37,7 @@ export default meta;
|
|
|
37
37
|
export declare const Default: {
|
|
38
38
|
render: (args: {
|
|
39
39
|
component?: "span" | undefined;
|
|
40
|
-
borderRadius?: 0 |
|
|
40
|
+
borderRadius?: 0 | 4 | 6 | 12 | "100%" | undefined;
|
|
41
41
|
color?: "grey1" | "grey5" | undefined;
|
|
42
42
|
width?: string | number | undefined;
|
|
43
43
|
height?: string | number | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "
|
|
1
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "onValueChange" | "step" | "min" | "max">>>;
|
|
2
2
|
export default _default;
|
|
3
3
|
export declare const Default: {
|
|
4
|
-
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "
|
|
4
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Readonly<Pick<import("@radix-ui/react-slider").SliderProps, "value" | "onValueChange" | "step" | "min" | "max">>>;
|
|
5
5
|
args: {
|
|
6
6
|
min: number;
|
|
7
7
|
max: number;
|
|
@@ -3,7 +3,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
3
3
|
anchor: React.ReactNode;
|
|
4
4
|
open: boolean;
|
|
5
5
|
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
6
|
-
icon?: "
|
|
6
|
+
icon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
7
7
|
loadingIndicator?: boolean | undefined;
|
|
8
8
|
title: string;
|
|
9
9
|
seconds?: number | undefined;
|
|
@@ -21,7 +21,7 @@ export declare const Default: {
|
|
|
21
21
|
anchor: React.ReactNode;
|
|
22
22
|
open: boolean;
|
|
23
23
|
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
24
|
-
icon?: "
|
|
24
|
+
icon?: "label" | "code" | "link" | "image" | "search" | "alert" | "visibility" | "description" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "upload" | "viewDay" | "zoomOutMap" | undefined;
|
|
25
25
|
loadingIndicator?: boolean | undefined;
|
|
26
26
|
title: string;
|
|
27
27
|
seconds?: number | undefined;
|
|
@@ -22,7 +22,7 @@ export declare const Default: {
|
|
|
22
22
|
src: string;
|
|
23
23
|
loop?: boolean | undefined;
|
|
24
24
|
autoPlay?: boolean | undefined;
|
|
25
|
-
sizing?: "
|
|
25
|
+
sizing?: "none" | "contain" | "cover" | undefined;
|
|
26
26
|
borderRadius?: 0 | 4 | undefined;
|
|
27
27
|
boxShadow?: "3" | undefined;
|
|
28
28
|
animateOnLoad?: boolean | undefined;
|