@worldresources/wri-design-systems 1.0.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE.txt +20 -0
- package/README.md +39 -27
- package/dist/cjs/index.js +1001 -845
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1001 -845
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +186 -148
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
@@ -1,17 +1,7 @@
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import {
|
2
|
+
import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Tabs } from '@chakra-ui/react';
|
3
3
|
import React$1 from 'react';
|
4
4
|
|
5
|
-
type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'invalid' | 'onCheckedChange' | 'onChange'> & {
|
6
|
-
name: string;
|
7
|
-
onChange?: (name: string, checked: boolean) => void;
|
8
|
-
defaultChecked?: boolean;
|
9
|
-
disabled?: boolean;
|
10
|
-
isLabelOnLeft?: boolean;
|
11
|
-
};
|
12
|
-
|
13
|
-
declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
|
14
|
-
|
15
5
|
type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
|
16
6
|
label?: string;
|
17
7
|
loading?: boolean;
|
@@ -24,67 +14,33 @@ type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'ch
|
|
24
14
|
|
25
15
|
declare const Button: ({ label, loading, variant, size, disabled, leftIcon, rightIcon, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
26
16
|
|
27
|
-
type
|
28
|
-
label: string;
|
29
|
-
value: string;
|
30
|
-
icon?: React.ReactNode;
|
31
|
-
disabled?: boolean;
|
32
|
-
};
|
33
|
-
type NavigationRailProps = {
|
34
|
-
tabs: NavigationRailTabProps[];
|
35
|
-
defaultValue?: string;
|
36
|
-
onTabClick?: (selectedValue: string) => void;
|
37
|
-
children?: React.ReactNode;
|
38
|
-
onOpenChange?: (open: boolean) => void;
|
39
|
-
};
|
40
|
-
|
41
|
-
declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
|
42
|
-
|
43
|
-
type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'name' | 'defaultChecked' | 'onChange'> & {
|
44
|
-
value: string;
|
17
|
+
type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
|
45
18
|
disabled?: boolean;
|
46
19
|
};
|
47
|
-
type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange'> & {
|
48
|
-
name: string;
|
49
|
-
defaultValue?: string;
|
50
|
-
isRow?: boolean;
|
51
|
-
onChange?: (name: string, selectedValue: string) => void;
|
52
|
-
customGap?: string;
|
53
|
-
};
|
54
|
-
|
55
|
-
declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
|
56
20
|
|
57
|
-
declare const
|
21
|
+
declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
|
58
22
|
|
59
|
-
type
|
60
|
-
|
61
|
-
value: string;
|
62
|
-
icon?: React.ReactNode;
|
23
|
+
type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
|
24
|
+
icon: React$1.ReactNode;
|
63
25
|
disabled?: boolean;
|
64
26
|
};
|
65
|
-
type TabBarProps = {
|
66
|
-
variant?: 'panel' | 'view';
|
67
|
-
defaultValue?: string;
|
68
|
-
tabs: TabBarItemProps[];
|
69
|
-
onTabClick?: (tabLabel: string) => void;
|
70
|
-
};
|
71
27
|
|
72
|
-
declare const
|
28
|
+
declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
|
73
29
|
|
74
|
-
type
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
30
|
+
type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
|
31
|
+
variant?: 'primary' | 'secondary';
|
32
|
+
size?: 'default' | 'small';
|
33
|
+
mainActionLabel: string;
|
34
|
+
mainActionOnClick: VoidFunction;
|
35
|
+
otherActions: {
|
36
|
+
label: React$1.ReactNode;
|
37
|
+
value: string;
|
38
|
+
onClick: VoidFunction;
|
39
|
+
}[];
|
81
40
|
disabled?: boolean;
|
82
|
-
onInfoClick?: () => void;
|
83
|
-
isDefaultSelected?: boolean;
|
84
|
-
onChange?: (name: string, checked: boolean, selectedValue?: string) => void;
|
85
41
|
};
|
86
42
|
|
87
|
-
declare const
|
43
|
+
declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => react_jsx_runtime.JSX.Element;
|
88
44
|
|
89
45
|
type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'icon' | 'iconColor' | 'iconSize' | 'spacing' | 'invalid'> & {
|
90
46
|
name?: string;
|
@@ -100,60 +56,76 @@ type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalet
|
|
100
56
|
|
101
57
|
declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
102
58
|
|
103
|
-
type
|
104
|
-
defaultValue?: string[];
|
105
|
-
};
|
106
|
-
type LayerGroupProps = {
|
107
|
-
label: string;
|
108
|
-
caption: string;
|
59
|
+
type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'name' | 'defaultChecked' | 'onChange'> & {
|
109
60
|
value: string;
|
110
|
-
|
111
|
-
onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
|
61
|
+
disabled?: boolean;
|
112
62
|
};
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
|
117
|
-
|
118
|
-
type LayerPanelProps = {
|
119
|
-
title: string;
|
120
|
-
description: string;
|
121
|
-
tabBarVariant?: 'panel' | 'view';
|
122
|
-
buttonTabs?: TabBarItemProps[];
|
63
|
+
type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange'> & {
|
64
|
+
name: string;
|
123
65
|
defaultValue?: string;
|
124
|
-
|
125
|
-
|
66
|
+
isRow?: boolean;
|
67
|
+
onChange?: (name: string, selectedValue: string) => void;
|
68
|
+
customGap?: string;
|
126
69
|
};
|
127
70
|
|
128
|
-
declare const
|
71
|
+
declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
|
129
72
|
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
73
|
+
declare const RadioGroup: ({ children, isRow, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
74
|
+
|
75
|
+
declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "origin" | "thumbAlignment" | "thumbSize"> & {
|
76
|
+
width?: string;
|
77
|
+
min?: number;
|
78
|
+
max?: number;
|
79
|
+
defaultValue?: number[];
|
80
|
+
value?: number[];
|
81
|
+
marks?: Array<number | {
|
82
|
+
value: number;
|
83
|
+
label: React$1.ReactNode;
|
84
|
+
}>;
|
85
|
+
step?: number;
|
134
86
|
disabled?: boolean;
|
135
|
-
|
136
|
-
|
137
|
-
|
87
|
+
onValueChange?: (details: {
|
88
|
+
value: number[];
|
89
|
+
}) => void;
|
90
|
+
onValueChangeEnd?: (details: {
|
91
|
+
value: number[];
|
92
|
+
}) => void;
|
93
|
+
isCentred?: boolean;
|
94
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
95
|
+
|
96
|
+
type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'invalid' | 'onCheckedChange' | 'onChange'> & {
|
97
|
+
name: string;
|
98
|
+
onChange?: (name: string, checked: boolean) => void;
|
99
|
+
defaultChecked?: boolean;
|
100
|
+
disabled?: boolean;
|
101
|
+
isLabelOnLeft?: boolean;
|
138
102
|
};
|
139
103
|
|
140
|
-
declare const
|
104
|
+
declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
|
141
105
|
|
142
|
-
type
|
106
|
+
type SelectItemProps = {
|
143
107
|
label: string;
|
144
108
|
caption?: string;
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
109
|
+
value: string;
|
110
|
+
};
|
111
|
+
type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette' | 'variant' | 'onValueChange' | 'onChange' | 'defaultChecked' | 'invalid'> & {
|
112
|
+
label: string;
|
113
|
+
caption?: string;
|
114
|
+
placeholder: string;
|
115
|
+
defaultValue?: string[];
|
116
|
+
items: SelectItemProps[];
|
117
|
+
size?: 'default' | 'small';
|
118
|
+
required?: boolean;
|
119
|
+
disabled?: boolean;
|
120
|
+
onChange?: (value: string[]) => void;
|
121
|
+
errorMessage?: string;
|
122
|
+
multiple?: boolean;
|
151
123
|
};
|
152
124
|
|
153
|
-
declare const
|
125
|
+
declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => react_jsx_runtime.JSX.Element;
|
154
126
|
|
155
|
-
type
|
156
|
-
label
|
127
|
+
type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
|
128
|
+
label: string;
|
157
129
|
caption?: string;
|
158
130
|
placeholder?: string;
|
159
131
|
errorMessage?: string;
|
@@ -162,12 +134,14 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
|
|
162
134
|
size?: 'small' | 'default';
|
163
135
|
defaultValue?: string;
|
164
136
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
137
|
+
minLength?: number;
|
138
|
+
maxLength?: number;
|
165
139
|
};
|
166
140
|
|
167
|
-
declare const
|
141
|
+
declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
|
168
142
|
|
169
|
-
type
|
170
|
-
label
|
143
|
+
type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
|
144
|
+
label?: string;
|
171
145
|
caption?: string;
|
172
146
|
placeholder?: string;
|
173
147
|
errorMessage?: string;
|
@@ -178,53 +152,74 @@ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' |
|
|
178
152
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
179
153
|
};
|
180
154
|
|
181
|
-
declare const
|
155
|
+
declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
|
182
156
|
|
183
|
-
type
|
157
|
+
type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
|
158
|
+
label: string;
|
159
|
+
variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
|
160
|
+
size?: 'small' | 'default' | 'large';
|
184
161
|
disabled?: boolean;
|
162
|
+
icon?: React.ReactNode;
|
163
|
+
onClose?: VoidFunction;
|
164
|
+
closable?: boolean;
|
185
165
|
};
|
186
166
|
|
187
|
-
declare const
|
167
|
+
declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
|
188
168
|
|
189
|
-
type
|
190
|
-
|
169
|
+
type LayerItemProps = {
|
170
|
+
name: string;
|
171
|
+
label: string;
|
172
|
+
caption?: string;
|
173
|
+
showInfoButton?: boolean;
|
174
|
+
infoButtonLabel?: string;
|
175
|
+
variant?: 'switch' | 'radio';
|
191
176
|
disabled?: boolean;
|
177
|
+
onInfoClick?: () => void;
|
178
|
+
isDefaultSelected?: boolean;
|
179
|
+
onChange?: (name: string, checked: boolean, selectedValue?: string) => void;
|
192
180
|
};
|
193
181
|
|
194
|
-
|
182
|
+
type LayerGroupContainerProps = Omit<Accordion.RootProps, 'onChange' | 'colorPalette' | 'variant' | 'size' | 'multiple' | 'collapsible'> & {
|
183
|
+
defaultValue?: string[];
|
184
|
+
};
|
185
|
+
type LayerGroupProps = {
|
186
|
+
label: string;
|
187
|
+
caption: string;
|
188
|
+
value: string;
|
189
|
+
layerItems: LayerItemProps[];
|
190
|
+
onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
|
191
|
+
};
|
195
192
|
|
196
|
-
declare const
|
197
|
-
min?: number;
|
198
|
-
max?: number;
|
199
|
-
defaultValue?: number[];
|
200
|
-
value?: number[];
|
201
|
-
marks?: Array<number | {
|
202
|
-
value: number;
|
203
|
-
label: React$1.ReactNode;
|
204
|
-
}>;
|
205
|
-
step?: number;
|
206
|
-
disabled?: boolean;
|
207
|
-
width?: string;
|
208
|
-
onValueChange?: (details: {
|
209
|
-
value: number[];
|
210
|
-
}) => void;
|
211
|
-
onValueChangeEnd?: (details: {
|
212
|
-
value: number[];
|
213
|
-
}) => void;
|
214
|
-
isCentred?: boolean;
|
215
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
193
|
+
declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
|
216
194
|
|
217
|
-
|
218
|
-
|
195
|
+
declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
|
196
|
+
|
197
|
+
declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
|
198
|
+
|
199
|
+
type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
|
219
200
|
label: string;
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
201
|
+
value: string;
|
202
|
+
icon?: React.ReactNode;
|
203
|
+
disabled?: boolean;
|
204
|
+
};
|
205
|
+
type TabBarProps = {
|
206
|
+
variant?: 'panel' | 'view';
|
207
|
+
defaultValue?: string;
|
208
|
+
tabs: TabBarItemProps[];
|
209
|
+
onTabClick?: (tabLabel: string) => void;
|
210
|
+
};
|
211
|
+
|
212
|
+
type LayerPanelProps = {
|
213
|
+
title: string;
|
214
|
+
description: string;
|
215
|
+
tabBarVariant?: 'panel' | 'view';
|
216
|
+
buttonTabs?: TabBarItemProps[];
|
217
|
+
defaultValue?: string;
|
218
|
+
onTabClick?: (tabLabel: string) => void;
|
219
|
+
children: React.ReactNode;
|
225
220
|
};
|
226
221
|
|
227
|
-
declare const
|
222
|
+
declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
|
228
223
|
|
229
224
|
type LayerParametersProps = {
|
230
225
|
label: string;
|
@@ -234,15 +229,6 @@ type LayerParametersProps = {
|
|
234
229
|
|
235
230
|
declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => react_jsx_runtime.JSX.Element;
|
236
231
|
|
237
|
-
type ScaleLegendProps = {
|
238
|
-
colors: string[];
|
239
|
-
values: string[];
|
240
|
-
subLabels?: string[];
|
241
|
-
isGradient?: boolean;
|
242
|
-
};
|
243
|
-
|
244
|
-
declare const ScaleLegend: ({ colors, values, subLabels, isGradient, }: ScaleLegendProps) => react_jsx_runtime.JSX.Element;
|
245
|
-
|
246
232
|
type LegendItemProps = {
|
247
233
|
layerName: string;
|
248
234
|
dataUnit: string;
|
@@ -258,11 +244,63 @@ type LegendItemProps = {
|
|
258
244
|
declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick, onRemoveClick, children, onInfoClick, onOpacityChanged, }: LegendItemProps) => react_jsx_runtime.JSX.Element;
|
259
245
|
|
260
246
|
type LegendPanelProps = {
|
261
|
-
legendContent: React$1.
|
247
|
+
legendContent: React$1.ReactElement[];
|
262
248
|
analysisContent: React$1.ReactNode;
|
263
249
|
onTabClick?: (tabValue: string) => void;
|
264
250
|
};
|
265
251
|
|
266
252
|
declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => react_jsx_runtime.JSX.Element;
|
267
253
|
|
268
|
-
|
254
|
+
type QualitativeAttributeProps = {
|
255
|
+
type: 'raster' | 'line' | 'point';
|
256
|
+
label: string;
|
257
|
+
caption?: string;
|
258
|
+
color: string;
|
259
|
+
showActionButton?: boolean;
|
260
|
+
onActionClick?: () => void;
|
261
|
+
pointIcon?: React.ReactNode;
|
262
|
+
};
|
263
|
+
|
264
|
+
declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => react_jsx_runtime.JSX.Element;
|
265
|
+
|
266
|
+
type ScaleBarProps = {
|
267
|
+
colors: string[];
|
268
|
+
values: string[];
|
269
|
+
subLabels?: string[];
|
270
|
+
isGradient?: boolean;
|
271
|
+
};
|
272
|
+
|
273
|
+
declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => react_jsx_runtime.JSX.Element;
|
274
|
+
|
275
|
+
type NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
|
276
|
+
label: string;
|
277
|
+
value: string;
|
278
|
+
icon?: React.ReactNode;
|
279
|
+
disabled?: boolean;
|
280
|
+
};
|
281
|
+
type NavigationRailProps = {
|
282
|
+
tabs: NavigationRailTabProps[];
|
283
|
+
defaultValue?: string;
|
284
|
+
onTabClick?: (selectedValue: string) => void;
|
285
|
+
children?: React.ReactNode;
|
286
|
+
onOpenChange?: (open: boolean) => void;
|
287
|
+
};
|
288
|
+
|
289
|
+
declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
|
290
|
+
|
291
|
+
declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
|
292
|
+
|
293
|
+
type InlineMessageProps = {
|
294
|
+
label: string;
|
295
|
+
caption?: string;
|
296
|
+
variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
|
297
|
+
size?: 'small' | 'large';
|
298
|
+
icon?: React.ReactNode;
|
299
|
+
onActionClick?: VoidFunction;
|
300
|
+
actionLabel?: string;
|
301
|
+
isButtonRight?: boolean;
|
302
|
+
};
|
303
|
+
|
304
|
+
declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
|
305
|
+
|
306
|
+
export { Button, Checkbox, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, QualitativeAttribute, Radio, RadioGroup, ScaleBar, Select, Slider, Switch, TabBar, Tag, TextInput, Textarea };
|