@worldresources/wri-design-systems 1.0.1 → 2.0.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.
Files changed (8) hide show
  1. package/LICENSE.txt +20 -0
  2. package/README.md +44 -27
  3. package/dist/cjs/index.js +1258 -814
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/index.js +1258 -814
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/index.d.ts +274 -140
  8. 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 { Switch as Switch$1, ButtonProps as ButtonProps$1, Tabs, RadioGroup as RadioGroup$1, Checkbox as Checkbox$1, Accordion, Tag as Tag$1, InputProps, TextareaProps as TextareaProps$1, Slider as Slider$1 } from '@chakra-ui/react';
2
+ import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioCardRootProps, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, SliderRootProps, 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,21 +14,67 @@ 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 NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
17
+ type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
18
+ disabled?: boolean;
19
+ };
20
+
21
+ declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
22
+
23
+ type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
24
+ icon: React$1.ReactNode;
25
+ disabled?: boolean;
26
+ };
27
+
28
+ declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
29
+
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
+ }[];
40
+ disabled?: boolean;
41
+ };
42
+
43
+ declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => react_jsx_runtime.JSX.Element;
44
+
45
+ type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'icon' | 'iconColor' | 'iconSize' | 'spacing' | 'invalid'> & {
46
+ name?: string;
47
+ value?: string;
48
+ defaultChecked?: boolean;
49
+ checked?: boolean;
50
+ disabled?: boolean;
51
+ indeterminate?: boolean;
52
+ onCheckedChange?: ({ checked }: {
53
+ checked: boolean;
54
+ }) => void;
55
+ };
56
+
57
+ declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
58
+
59
+ type OptionCardProps = {
28
60
  label: string;
29
- value: string;
61
+ caption?: string;
30
62
  icon?: React.ReactNode;
63
+ variant?: 'default' | 'centered' | 'expanded';
31
64
  disabled?: boolean;
65
+ children?: React.ReactNode;
66
+ value: string;
32
67
  };
33
- type NavigationRailProps = {
34
- tabs: NavigationRailTabProps[];
68
+ type OptionCardGroupProps = Omit<RadioCardRootProps, 'colorPalette' | 'size' | 'variant' | 'as' | 'asChild' | 'unstyled' | 'defaultChecked'> & {
35
69
  defaultValue?: string;
36
- onTabClick?: (selectedValue: string) => void;
37
- children?: React.ReactNode;
38
- onOpenChange?: (open: boolean) => void;
70
+ onValueChange?: ({ value }: {
71
+ value: string;
72
+ }) => void;
39
73
  };
40
74
 
41
- declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
75
+ declare const OptionCard: ({ label, caption, icon, variant, disabled, children, value, }: OptionCardProps) => react_jsx_runtime.JSX.Element;
76
+
77
+ declare const OptionCardGroup: ({ children, ...rest }: OptionCardGroupProps) => react_jsx_runtime.JSX.Element;
42
78
 
43
79
  type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'name' | 'defaultChecked' | 'onChange'> & {
44
80
  value: string;
@@ -47,113 +83,127 @@ type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalett
47
83
  type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange'> & {
48
84
  name: string;
49
85
  defaultValue?: string;
50
- isRow?: boolean;
86
+ horizontal?: boolean;
51
87
  onChange?: (name: string, selectedValue: string) => void;
52
88
  customGap?: string;
53
89
  };
54
90
 
55
91
  declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
56
92
 
57
- declare const RadioGroup: ({ children, isRow, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
93
+ declare const RadioGroup: ({ children, horizontal, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
58
94
 
59
- type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
60
- label: string;
61
- value: string;
62
- icon?: React.ReactNode;
95
+ declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "defaultValue" | "origin" | "thumbAlignment" | "thumbSize"> & {
96
+ width?: string;
97
+ min?: number;
98
+ max?: number;
99
+ value?: number[];
100
+ marks?: Array<number | {
101
+ value: number;
102
+ label: React$1.ReactNode;
103
+ }>;
104
+ step?: number;
63
105
  disabled?: boolean;
64
- };
65
- type TabBarProps = {
66
- variant?: 'panel' | 'view';
67
- defaultValue?: string;
68
- tabs: TabBarItemProps[];
69
- onTabClick?: (tabLabel: string) => void;
70
- };
71
-
72
- declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
106
+ onValueChange?: (details: {
107
+ value: number[];
108
+ }) => void;
109
+ onValueChangeEnd?: (details: {
110
+ value: number[];
111
+ }) => void;
112
+ isCentred?: boolean;
113
+ } & React$1.RefAttributes<HTMLDivElement>>;
73
114
 
74
- type LayerItemProps = {
115
+ type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'invalid' | 'onCheckedChange' | 'onChange'> & {
75
116
  name: string;
76
- label: string;
77
- caption?: string;
78
- showInfoButton?: boolean;
79
- infoButtonLabel?: string;
80
- variant?: 'switch' | 'radio';
81
- disabled?: boolean;
82
- onInfoClick?: () => void;
83
- isDefaultSelected?: boolean;
84
- onChange?: (name: string, checked: boolean, selectedValue?: string) => void;
85
- };
86
-
87
- declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
88
-
89
- type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'icon' | 'iconColor' | 'iconSize' | 'spacing' | 'invalid'> & {
90
- name?: string;
91
- value?: string;
117
+ onChange?: (name: string, checked: boolean) => void;
92
118
  defaultChecked?: boolean;
93
- checked?: boolean;
94
119
  disabled?: boolean;
95
- indeterminate?: boolean;
96
- onCheckedChange?: ({ checked }: {
97
- checked: boolean;
98
- }) => void;
120
+ isLabelOnLeft?: boolean;
99
121
  };
100
122
 
101
- declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
123
+ declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
102
124
 
103
- type LayerGroupContainerProps = Omit<Accordion.RootProps, 'onChange' | 'colorPalette' | 'variant' | 'size' | 'multiple' | 'collapsible'> & {
104
- defaultValue?: string[];
105
- };
106
- type LayerGroupProps = {
125
+ type CheckboxListProps = {
107
126
  label: string;
108
- caption: string;
109
- value: string;
110
- layerItems: LayerItemProps[];
111
- onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
127
+ caption?: string;
128
+ checkboxes: CheckboxProps[];
129
+ defaultValue?: string;
130
+ onCheckedChange?: (checkedValues: {
131
+ [name: string]: boolean;
132
+ }) => void;
133
+ errorMessage?: string;
134
+ horizontal?: boolean;
135
+ required?: boolean;
112
136
  };
113
137
 
114
- declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
115
-
116
- declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
138
+ declare const CheckboxList: ({ label, caption, checkboxes, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: CheckboxListProps) => react_jsx_runtime.JSX.Element;
117
139
 
118
- type LayerPanelProps = {
119
- title: string;
120
- description: string;
121
- tabBarVariant?: 'panel' | 'view';
122
- buttonTabs?: TabBarItemProps[];
140
+ type RadioListProps = {
141
+ label: string;
142
+ caption?: string;
143
+ name: string;
144
+ radios: RadioProps[];
123
145
  defaultValue?: string;
124
- onTabClick?: (tabLabel: string) => void;
125
- children: React.ReactNode;
146
+ onCheckedChange?: (name: string, selectedValue: string) => void;
147
+ errorMessage?: string;
148
+ horizontal?: boolean;
149
+ required?: boolean;
126
150
  };
127
151
 
128
- declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
152
+ declare const RadioList: ({ label, caption, name, radios, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: RadioListProps) => react_jsx_runtime.JSX.Element;
129
153
 
130
- type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
154
+ type SelectItemProps = {
131
155
  label: string;
132
- variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
133
- size?: 'small' | 'default' | 'large';
156
+ caption?: string;
157
+ value: string;
158
+ };
159
+ type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette' | 'variant' | 'onValueChange' | 'onChange' | 'defaultChecked' | 'invalid'> & {
160
+ label?: string;
161
+ caption?: string;
162
+ placeholder: string;
163
+ defaultValue?: string[];
164
+ items: SelectItemProps[];
165
+ size?: 'default' | 'small';
166
+ required?: boolean;
134
167
  disabled?: boolean;
135
- icon?: React.ReactNode;
136
- onClose?: VoidFunction;
137
- closable?: boolean;
168
+ onChange?: (value: string[]) => void;
169
+ errorMessage?: string;
170
+ multiple?: boolean;
138
171
  };
139
172
 
140
- declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
173
+ declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => react_jsx_runtime.JSX.Element;
141
174
 
142
- type InlineMessageProps = {
175
+ type ValueChangeDetails = {
176
+ value: number[];
177
+ };
178
+ type SliderProps = Omit<SliderRootProps, 'size' | 'variant' | 'colorPalette' | 'thumbAlignment' | 'thumbSize' | 'label' | 'defaultChecked' | 'origin' | 'defaultValue'> & {
179
+ width?: string;
180
+ min?: number;
181
+ max?: number;
182
+ value?: number[];
183
+ marks?: Array<number | {
184
+ value: number;
185
+ label: React.ReactNode;
186
+ }>;
187
+ step?: number;
188
+ disabled?: boolean;
189
+ onValueChange?: (details: ValueChangeDetails) => void;
190
+ onValueChangeEnd?: (details: ValueChangeDetails) => void;
191
+ isCentred?: boolean;
192
+ };
193
+
194
+ type SliderInputProps = {
143
195
  label: string;
144
196
  caption?: string;
145
- variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
146
- size?: 'small' | 'large';
147
- icon?: React.ReactNode;
148
- onActionClick?: VoidFunction;
149
- actionLabel?: string;
150
- isButtonRight?: boolean;
197
+ size?: 'default' | 'small';
198
+ sliderItem: SliderProps;
199
+ required?: boolean;
200
+ onChange?: (value: number[]) => void;
151
201
  };
152
202
 
153
- declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
203
+ declare const SliderInput: ({ label, caption, size, sliderItem, required, onChange, }: SliderInputProps) => react_jsx_runtime.JSX.Element;
154
204
 
155
- type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
156
- label?: string;
205
+ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
206
+ label: string;
157
207
  caption?: string;
158
208
  placeholder?: string;
159
209
  errorMessage?: string;
@@ -162,12 +212,14 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
162
212
  size?: 'small' | 'default';
163
213
  defaultValue?: string;
164
214
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
215
+ minLength?: number;
216
+ maxLength?: number;
165
217
  };
166
218
 
167
- declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
219
+ declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
168
220
 
169
- type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
170
- label: string;
221
+ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
222
+ label?: string;
171
223
  caption?: string;
172
224
  placeholder?: string;
173
225
  errorMessage?: string;
@@ -178,53 +230,74 @@ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' |
178
230
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
179
231
  };
180
232
 
181
- declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
233
+ declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
182
234
 
183
- type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
235
+ type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
236
+ label: string;
237
+ variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
238
+ size?: 'small' | 'default' | 'large';
184
239
  disabled?: boolean;
240
+ icon?: React.ReactNode;
241
+ onClose?: VoidFunction;
242
+ closable?: boolean;
185
243
  };
186
244
 
187
- declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
245
+ declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
188
246
 
189
- type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
190
- icon: React$1.ReactNode;
247
+ type LayerItemProps = {
248
+ name: string;
249
+ label: string;
250
+ caption?: string;
251
+ showInfoButton?: boolean;
252
+ infoButtonLabel?: string;
253
+ variant?: 'switch' | 'radio';
191
254
  disabled?: boolean;
255
+ onInfoClick?: () => void;
256
+ isDefaultSelected?: boolean;
257
+ onChange?: (name: string, checked: boolean, selectedValue?: string) => void;
192
258
  };
193
259
 
194
- declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
260
+ type LayerGroupContainerProps = Omit<Accordion.RootProps, 'onChange' | 'colorPalette' | 'variant' | 'size' | 'multiple' | 'collapsible'> & {
261
+ defaultValue?: string[];
262
+ };
263
+ type LayerGroupProps = {
264
+ label: string;
265
+ caption: string;
266
+ value: string;
267
+ layerItems: LayerItemProps[];
268
+ onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
269
+ };
195
270
 
196
- declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "origin" | "thumbAlignment" | "thumbSize"> & {
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>>;
271
+ declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
216
272
 
217
- type QualitativeLegendProps = {
218
- type: 'raster' | 'line' | 'point';
273
+ declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
274
+
275
+ declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
276
+
277
+ type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
219
278
  label: string;
220
- caption?: string;
221
- color: string;
222
- showActionButton?: boolean;
223
- onActionClick?: () => void;
224
- pointIcon?: React.ReactNode;
279
+ value: string;
280
+ icon?: React.ReactNode;
281
+ disabled?: boolean;
282
+ };
283
+ type TabBarProps = {
284
+ variant?: 'panel' | 'view';
285
+ defaultValue?: string;
286
+ tabs: TabBarItemProps[];
287
+ onTabClick?: (tabLabel: string) => void;
288
+ };
289
+
290
+ type LayerPanelProps = {
291
+ title: string;
292
+ description: string;
293
+ tabBarVariant?: 'panel' | 'view';
294
+ buttonTabs?: TabBarItemProps[];
295
+ defaultValue?: string;
296
+ onTabClick?: (tabLabel: string) => void;
297
+ children: React.ReactNode;
225
298
  };
226
299
 
227
- declare const QualitativeLegend: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeLegendProps) => react_jsx_runtime.JSX.Element;
300
+ declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
228
301
 
229
302
  type LayerParametersProps = {
230
303
  label: string;
@@ -234,15 +307,6 @@ type LayerParametersProps = {
234
307
 
235
308
  declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => react_jsx_runtime.JSX.Element;
236
309
 
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
310
  type LegendItemProps = {
247
311
  layerName: string;
248
312
  dataUnit: string;
@@ -265,4 +329,74 @@ type LegendPanelProps = {
265
329
 
266
330
  declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => react_jsx_runtime.JSX.Element;
267
331
 
268
- export { Button, Checkbox, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, NavigationRail, QualitativeLegend, Radio, RadioGroup, ScaleLegend, Slider, Switch, TabBar, Tag, TextInput, Textarea };
332
+ type QualitativeAttributeProps = {
333
+ type: 'raster' | 'line' | 'point';
334
+ label: string;
335
+ caption?: string;
336
+ color: string;
337
+ showActionButton?: boolean;
338
+ onActionClick?: () => void;
339
+ pointIcon?: React.ReactNode;
340
+ };
341
+
342
+ declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => react_jsx_runtime.JSX.Element;
343
+
344
+ type ScaleBarProps = {
345
+ colors: string[];
346
+ values: string[];
347
+ subLabels?: string[];
348
+ isGradient?: boolean;
349
+ };
350
+
351
+ declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => react_jsx_runtime.JSX.Element;
352
+
353
+ type NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
354
+ label: string;
355
+ value: string;
356
+ icon?: React.ReactNode;
357
+ disabled?: boolean;
358
+ };
359
+ type NavigationRailProps = {
360
+ tabs: NavigationRailTabProps[];
361
+ defaultValue?: string;
362
+ onTabClick?: (selectedValue: string) => void;
363
+ children?: React.ReactNode;
364
+ onOpenChange?: (open: boolean) => void;
365
+ };
366
+
367
+ declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
368
+
369
+ declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
370
+
371
+ type InlineMessageProps = {
372
+ label: string;
373
+ caption?: string;
374
+ variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
375
+ size?: 'small' | 'large';
376
+ icon?: React.ReactNode;
377
+ onActionClick?: VoidFunction;
378
+ actionLabel?: string;
379
+ isButtonRight?: boolean;
380
+ };
381
+
382
+ declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
383
+
384
+ type ToastProps = {
385
+ label: string;
386
+ caption?: React.ReactNode;
387
+ type: 'success' | 'warning' | 'error' | 'info' | 'loading';
388
+ placement: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
389
+ duration?: number;
390
+ icon?: React.ReactNode;
391
+ action?: {
392
+ label: string;
393
+ onClick: () => void;
394
+ };
395
+ closable?: boolean;
396
+ closableLabel?: string;
397
+ };
398
+
399
+ declare const showToast: (props: ToastProps) => void;
400
+ declare const Toast: () => react_jsx_runtime.JSX.Element[];
401
+
402
+ export { Button, Checkbox, CheckboxList, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, OptionCard, OptionCardGroup, QualitativeAttribute, Radio, RadioGroup, RadioList, ScaleBar, Select, Slider, SliderInput, Switch, TabBar, Tag, TextInput, Textarea, Toast, showToast };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "1.0.1",
3
+ "version": "2.0.0",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",