@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/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, 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 NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
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 RadioGroup: ({ children, isRow, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
21
+ declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
58
22
 
59
- type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
60
- label: string;
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 TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
28
+ declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
73
29
 
74
- type LayerItemProps = {
75
- name: string;
76
- label: string;
77
- caption?: string;
78
- showInfoButton?: boolean;
79
- infoButtonLabel?: string;
80
- variant?: 'switch' | 'radio';
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 LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
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 LayerGroupContainerProps = Omit<Accordion.RootProps, 'onChange' | 'colorPalette' | 'variant' | 'size' | 'multiple' | 'collapsible'> & {
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
- layerItems: LayerItemProps[];
111
- onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
61
+ disabled?: boolean;
112
62
  };
113
-
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;
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
- onTabClick?: (tabLabel: string) => void;
125
- children: React.ReactNode;
66
+ isRow?: boolean;
67
+ onChange?: (name: string, selectedValue: string) => void;
68
+ customGap?: string;
126
69
  };
127
70
 
128
- declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
71
+ declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
129
72
 
130
- type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
131
- label: string;
132
- variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error';
133
- size?: 'small' | 'default' | 'large';
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
- icon?: React.ReactNode;
136
- onClose?: VoidFunction;
137
- closable?: boolean;
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 Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
104
+ declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
141
105
 
142
- type InlineMessageProps = {
106
+ type SelectItemProps = {
143
107
  label: string;
144
108
  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;
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 InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
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 TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
156
- label?: string;
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 TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
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 TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
170
- label: string;
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 Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
155
+ declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
182
156
 
183
- type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
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 CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
167
+ declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
188
168
 
189
- type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
190
- icon: React$1.ReactNode;
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
- declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
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 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>>;
193
+ declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
216
194
 
217
- type QualitativeLegendProps = {
218
- type: 'raster' | 'line' | 'point';
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
- caption?: string;
221
- color: string;
222
- showActionButton?: boolean;
223
- onActionClick?: () => void;
224
- pointIcon?: React.ReactNode;
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 QualitativeLegend: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeLegendProps) => react_jsx_runtime.JSX.Element;
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
- export { Button, Checkbox, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, NavigationRail, QualitativeLegend, Radio, RadioGroup, ScaleLegend, Slider, Switch, TabBar, Tag, TextInput, Textarea };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "1.0.1",
3
+ "version": "1.2.0",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",