@worldresources/wri-design-systems 1.0.1 → 1.2.0
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/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 +185 -147
- 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;
|
@@ -265,4 +251,56 @@ type LegendPanelProps = {
|
|
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 };
|