@voxel51/voodo 0.0.20 → 0.0.22
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/README.md +12 -0
- package/dist/components/ActivityToast/ActivityToast.d.ts +28 -2
- package/dist/components/ActivityToast/ActivityToast.d.ts.map +1 -1
- package/dist/components/Button/Button.d.ts +24 -4
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Card/Card.d.ts +36 -0
- package/dist/components/Card/Card.d.ts.map +1 -0
- package/dist/components/Card/RichCard.d.ts +45 -0
- package/dist/components/Card/RichCard.d.ts.map +1 -0
- package/dist/components/Card/index.d.ts +3 -0
- package/dist/components/Card/index.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +30 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Clickable/Clickable.d.ts +16 -0
- package/dist/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/components/Datepicker/DatePicker.d.ts +50 -0
- package/dist/components/Datepicker/DatePicker.d.ts.map +1 -1
- package/dist/components/Datepicker/DatepickerIconButton.d.ts +12 -0
- package/dist/components/Datepicker/DatepickerIconButton.d.ts.map +1 -1
- package/dist/components/Datepicker/DatepickerInput.d.ts +15 -0
- package/dist/components/Datepicker/DatepickerInput.d.ts.map +1 -1
- package/dist/components/Divider/Divider.d.ts +19 -0
- package/dist/components/Divider/Divider.d.ts.map +1 -0
- package/dist/components/Divider/index.d.ts +2 -0
- package/dist/components/Divider/index.d.ts.map +1 -0
- package/dist/components/EmptyState/EmptyState.d.ts +20 -0
- package/dist/components/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/components/EmptyState/index.d.ts +2 -0
- package/dist/components/EmptyState/index.d.ts.map +1 -0
- package/dist/components/FormField/FormField.d.ts +45 -0
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormFieldGroup/FormFieldGroup.d.ts +38 -0
- package/dist/components/FormFieldGroup/FormFieldGroup.d.ts.map +1 -1
- package/dist/components/Heading/Heading.d.ts +17 -0
- package/dist/components/Heading/Heading.d.ts.map +1 -1
- package/dist/components/Icons/DragHandle.d.ts +8 -0
- package/dist/components/Icons/DragHandle.d.ts.map +1 -1
- package/dist/components/Icons/Icon.d.ts +17 -1
- package/dist/components/Icons/Icon.d.ts.map +1 -1
- package/dist/components/Icons/IconWrapper.d.ts +19 -0
- package/dist/components/Icons/IconWrapper.d.ts.map +1 -0
- package/dist/components/Icons/RadioDot.d.ts +8 -0
- package/dist/components/Icons/RadioDot.d.ts.map +1 -1
- package/dist/components/Icons/index.d.ts +1 -0
- package/dist/components/Icons/index.d.ts.map +1 -1
- package/dist/components/Input/Input.d.ts +52 -2
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/InputIcon.d.ts +11 -3
- package/dist/components/Input/InputIcon.d.ts.map +1 -1
- package/dist/components/ListItem/ListItem.d.ts +19 -0
- package/dist/components/ListItem/ListItem.d.ts.map +1 -1
- package/dist/components/Pill/Pill.d.ts +23 -2
- package/dist/components/Pill/Pill.d.ts.map +1 -1
- package/dist/components/Radio/Radio.d.ts +16 -0
- package/dist/components/Radio/Radio.d.ts.map +1 -1
- package/dist/components/Radio/RadioGroup.d.ts +48 -0
- package/dist/components/Radio/RadioGroup.d.ts.map +1 -1
- package/dist/components/RichButton/RichButton.d.ts +32 -1
- package/dist/components/RichButton/RichButton.d.ts.map +1 -1
- package/dist/components/RichButtonGroup/RichButtonGroup.d.ts +42 -0
- package/dist/components/RichButtonGroup/RichButtonGroup.d.ts.map +1 -1
- package/dist/components/RichList/RichList.d.ts +66 -0
- package/dist/components/RichList/RichList.d.ts.map +1 -1
- package/dist/components/Select/Option.d.ts +10 -0
- package/dist/components/Select/Option.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts +71 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Slider/Slider.d.ts +111 -0
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/SliderBar.d.ts +18 -0
- package/dist/components/Slider/SliderBar.d.ts.map +1 -1
- package/dist/components/Slider/SliderKnob.d.ts +12 -0
- package/dist/components/Slider/SliderKnob.d.ts.map +1 -1
- package/dist/components/Slider/SliderLabels.d.ts +18 -0
- package/dist/components/Slider/SliderLabels.d.ts.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +14 -0
- package/dist/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/Stack/Stack.d.ts +41 -1
- package/dist/components/Stack/Stack.d.ts.map +1 -1
- package/dist/components/Table/Table.d.ts +8 -0
- package/dist/components/Table/Table.d.ts.map +1 -0
- package/dist/components/Table/index.d.ts +2 -0
- package/dist/components/Table/index.d.ts.map +1 -0
- package/dist/components/Text/Text.d.ts +20 -1
- package/dist/components/Text/Text.d.ts.map +1 -1
- package/dist/components/TextArea/TextArea.d.ts +39 -1
- package/dist/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/TextBadge/TextBadge.d.ts +16 -0
- package/dist/components/TextBadge/TextBadge.d.ts.map +1 -1
- package/dist/components/Toast/Toast.d.ts +39 -2
- package/dist/components/Toast/Toast.d.ts.map +1 -1
- package/dist/components/ToastContainer/ToastContainer.d.ts +8 -0
- package/dist/components/ToastContainer/ToastContainer.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +32 -0
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.d.ts +46 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +18 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/UnsetHint/UnsetHint.d.ts +13 -0
- package/dist/components/UnsetHint/UnsetHint.d.ts.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5448 -5055
- package/dist/index.js.map +1 -1
- package/dist/styles/color-classes.d.ts +1 -1
- package/dist/styles/color-classes.d.ts.map +1 -1
- package/dist/styles/shadow.d.ts.map +1 -1
- package/dist/theme/tokens/colors.d.ts +2 -0
- package/dist/theme/tokens/colors.d.ts.map +1 -1
- package/dist/theme/tokens/index.d.ts +2 -0
- package/dist/theme/tokens/index.d.ts.map +1 -1
- package/dist/types/align.d.ts +7 -0
- package/dist/types/align.d.ts.map +1 -0
- package/dist/types/color.d.ts +1 -0
- package/dist/types/color.d.ts.map +1 -1
- package/dist/types/icons.d.ts +5 -0
- package/dist/types/icons.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/justify.d.ts +9 -0
- package/dist/types/justify.d.ts.map +1 -0
- package/dist/types/shadow.d.ts +1 -0
- package/dist/types/shadow.d.ts.map +1 -1
- package/dist/types/size.d.ts +2 -1
- package/dist/types/size.d.ts.map +1 -1
- package/dist/voodo.css +1 -1
- package/package.json +4 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React, FC } from 'react';
|
|
2
|
+
import { BrandColor, IconColor, TextColor } from '../../types';
|
|
2
3
|
import { IconName } from '../../types/icons';
|
|
3
4
|
import { Size } from '../../types/size';
|
|
4
5
|
type SvgComponent = React.FC<React.SVGProps<SVGSVGElement>>;
|
|
@@ -13,9 +14,24 @@ export interface IconProps {
|
|
|
13
14
|
name: IconName;
|
|
14
15
|
size?: Size;
|
|
15
16
|
className?: string;
|
|
16
|
-
color?:
|
|
17
|
+
color?: TextColor | IconColor | BrandColor;
|
|
17
18
|
style?: React.CSSProperties;
|
|
18
19
|
}
|
|
20
|
+
/**
|
|
21
|
+
* An generic icon component which will take the form of the icon specified by `name`.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <Icon name={IconName.Edit} size={Size.Md} />
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @param name Icon to display. See {@link IconName}.
|
|
29
|
+
* @param size The size of the icon. See {@link Size}.
|
|
30
|
+
* @param className `class` overrides to apply to the component.
|
|
31
|
+
* @param color Color of the icon. By default, the icon inherits the text color of its container.
|
|
32
|
+
* @param style `style` overrides to apply to the icon.
|
|
33
|
+
* @param props Additional HTML properties to apply to the component.
|
|
34
|
+
*/
|
|
19
35
|
export declare const Icon: FC<IconProps>;
|
|
20
36
|
export {};
|
|
21
37
|
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAkEvC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAkB,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE5D;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAC1B,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EACnC,YAAY,CAiEb,CAAC;AAWF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuB9B,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IconName } from '../../types/icons';
|
|
3
|
+
import { Size } from '../../types/size';
|
|
4
|
+
export interface IconWrapperProps {
|
|
5
|
+
content?: FC | IconName;
|
|
6
|
+
size?: Size;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Helper component which resolves {@link FC} | {@link IconName} | ``undefined`` to a rendered icon.
|
|
11
|
+
*
|
|
12
|
+
* Wraps content in a span; use `className` to constrain icon bounds or apply color styling.
|
|
13
|
+
*
|
|
14
|
+
* @param content Icon {@link FC}, icon name, or undefined
|
|
15
|
+
* @param size Size forwarded to {@link Icon} when resolving by name
|
|
16
|
+
* @param className Classes applied to the wrapping span
|
|
17
|
+
*/
|
|
18
|
+
export declare const IconWrapper: FC<IconWrapperProps>;
|
|
19
|
+
//# sourceMappingURL=IconWrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAiB5C,CAAC"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { IconProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* An icon used to display a selected state of a radio control.
|
|
5
|
+
*
|
|
6
|
+
* @param className `class` overrides to apply to the component.
|
|
7
|
+
* @param props Additional HTML properties to apply to the component.
|
|
8
|
+
*
|
|
9
|
+
* @internal For use by the {@link Radio} component.
|
|
10
|
+
*/
|
|
3
11
|
export declare const RadioDotIcon: FC<IconProps>;
|
|
4
12
|
//# sourceMappingURL=RadioDot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioDot.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/RadioDot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CActC,CAAC"}
|
|
1
|
+
{"version":3,"file":"RadioDot.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/RadioDot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CActC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { IconProps } from '../Icons/types';
|
|
3
|
-
import { Radius, Size } from '../../types';
|
|
3
|
+
import { IconName, Radius, Size } from '../../types';
|
|
4
4
|
type ModifiedInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "className">;
|
|
5
5
|
export declare enum InputType {
|
|
6
6
|
Text = "text",
|
|
@@ -17,8 +17,19 @@ export interface InputProps extends ModifiedInputProps {
|
|
|
17
17
|
className?: string;
|
|
18
18
|
type?: InputType;
|
|
19
19
|
error?: boolean;
|
|
20
|
-
icon?: FC<IconProps
|
|
20
|
+
icon?: FC<IconProps> | IconName;
|
|
21
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* A utility function which returns the classes required for styling an input component.
|
|
24
|
+
*
|
|
25
|
+
* @param disabled If `true`, applies styling for a disabled input.
|
|
26
|
+
* @param error If `true`, applies styling for the input error state.
|
|
27
|
+
* @param icon If `true`, prefixes input content with padding to allow space for an icon.
|
|
28
|
+
* @param radius Border radius of the input. See {@link Radius}.
|
|
29
|
+
* @param size Size of the input; this controls the text size and padding. See {@link Size}.
|
|
30
|
+
*
|
|
31
|
+
* @internal For consistent application of input styling of native `input` elements.
|
|
32
|
+
*/
|
|
22
33
|
export declare const inputStyle: ({ disabled, error, icon, radius, size, }: {
|
|
23
34
|
disabled?: boolean;
|
|
24
35
|
error?: boolean;
|
|
@@ -26,6 +37,45 @@ export declare const inputStyle: ({ disabled, error, icon, radius, size, }: {
|
|
|
26
37
|
radius?: Radius;
|
|
27
38
|
size?: Size;
|
|
28
39
|
}) => string;
|
|
40
|
+
/**
|
|
41
|
+
* A basic input component.
|
|
42
|
+
*
|
|
43
|
+
* This component operates exclusively as a controlled component. See `value` and `onChange` for controlled behavior.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* const MyComponent = () => {
|
|
48
|
+
* const [value, setValue] = useState<string>("");
|
|
49
|
+
* const [error, setError] = useState<string | null>(null);
|
|
50
|
+
*
|
|
51
|
+
* const onChange = useCallback((newValue: string) => {
|
|
52
|
+
* setValue(newValue);
|
|
53
|
+
* if (newValue.length < 5) {
|
|
54
|
+
* setError("Value must be at least 5 characters");
|
|
55
|
+
* } else {
|
|
56
|
+
* setError(null);
|
|
57
|
+
* }
|
|
58
|
+
* },
|
|
59
|
+
* [setError, setValue]
|
|
60
|
+
* );
|
|
61
|
+
*
|
|
62
|
+
* return (
|
|
63
|
+
* <Input value={value} onChange={onChange} error={!!error} />
|
|
64
|
+
* );
|
|
65
|
+
* };
|
|
66
|
+
* ```
|
|
67
|
+
*
|
|
68
|
+
* @param size The size of the input. See {@link Size}.
|
|
69
|
+
* @param radius The border radius of the input. See {@link Radius}.
|
|
70
|
+
* @param type The type of the input. This should adhere to the standard HTML `input` types.
|
|
71
|
+
* @param className `class` overrides to apply to the component.
|
|
72
|
+
* @param disabled If `true`, disables the input.
|
|
73
|
+
* @param value The controlled value of the input.
|
|
74
|
+
* @param onChange Callback triggered when the input value changes.
|
|
75
|
+
* @param error If `true`, formats the input to appear in an error state.
|
|
76
|
+
* @param icon Optional reference ({@link FC}) to an icon or an {@link IconName} to prefix the input's value. See {@link Icon}.
|
|
77
|
+
* @param props Additional HTML properties to apply to the component.
|
|
78
|
+
*/
|
|
29
79
|
export declare const Input: FC<InputProps>;
|
|
30
80
|
export {};
|
|
31
81
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAML,MAAM,EACN,IAAI,EAGL,MAAM,SAAS,CAAC;AAMjB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,WAAW,CACrB,CAAC;AAEF,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAML,QAAQ,EACR,MAAM,EACN,IAAI,EAGL,MAAM,SAAS,CAAC;AAMjB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,WAAW,CACrB,CAAC;AAEF,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GAAI,0CAMxB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,KAAG,MAwBD,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAyChC,CAAC"}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { Size } from '../../types';
|
|
2
|
+
import { IconName, Size } from '../../types';
|
|
4
3
|
export interface InputIconProps {
|
|
5
|
-
|
|
4
|
+
icon: FC | IconName;
|
|
6
5
|
size: Size;
|
|
7
6
|
hasText?: boolean;
|
|
8
7
|
}
|
|
8
|
+
/**
|
|
9
|
+
* A wrapper component for properly formatting an icon to display within the {@link Input} component.
|
|
10
|
+
*
|
|
11
|
+
* @param icon Icon reference ({@link FC}) or an {@link IconName} specifying the icon to use.
|
|
12
|
+
* @param size The size of the icon. See {@link Size}.
|
|
13
|
+
* @param hasText If `true`, de-emphasizes the icon in favor of the input text.
|
|
14
|
+
*
|
|
15
|
+
* @internal For use by {@link Input}.
|
|
16
|
+
*/
|
|
9
17
|
export declare const InputIcon: FC<InputIconProps>;
|
|
10
18
|
//# sourceMappingURL=InputIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Input/InputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InputIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Input/InputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAA6B,MAAM,SAAS,CAAC;AAKpE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAcxC,CAAC"}
|
|
@@ -11,5 +11,24 @@ export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
11
11
|
actions?: ReactNode;
|
|
12
12
|
additionalContent?: ReactNode;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* An item to be displayed in a list.
|
|
16
|
+
*
|
|
17
|
+
* @param canSelect If `true`, the component will include a {@link Checkbox} to enable selection.
|
|
18
|
+
* @param selected Controls the selection state of the list item. If `canSelect` is not truthy, this has no effect.
|
|
19
|
+
* @param onSelected Callback triggered when this item is selected.
|
|
20
|
+
* @param canDrag If `true`, displays a {@link DragHandleIcon} to allow dragging this component.
|
|
21
|
+
* @param dragHandleListeners Optional mapping of `listenerId: listener` for drag events.
|
|
22
|
+
* @param primaryContent Primary content to display in the list item.
|
|
23
|
+
* @param secondaryContent Secondary content to display in the list item.
|
|
24
|
+
* @param actions Content to display as "actions" for the list item.
|
|
25
|
+
* This content will be pushed to the trailing edge of the list item.
|
|
26
|
+
* @param additionalContent Additional content to display in the list item.
|
|
27
|
+
* This content will be placed between the `secondaryContent` and the `actions.
|
|
28
|
+
* @param className `class` overrides to apply to the component.
|
|
29
|
+
* @param props Additional HTML properties to apply to the component.
|
|
30
|
+
*
|
|
31
|
+
* @internal For use by the {@link RichList} component.
|
|
32
|
+
*/
|
|
14
33
|
export declare const ListItem: FC<ListItemProps>;
|
|
15
34
|
//# sourceMappingURL=ListItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE/E,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAe3D,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAwEtC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE/E,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAe3D,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAwEtC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, HTMLAttributes } from 'react';
|
|
2
|
-
import { BackgroundColor, Radius, SemanticColor, Shadow, Size, StatusColor, TextColor } from '../../types';
|
|
3
|
-
export type PillSize = Exclude<Size, Size.Lg>;
|
|
2
|
+
import { BackgroundColor, IconName, Radius, SemanticColor, Shadow, Size, StatusColor, TextColor } from '../../types';
|
|
3
|
+
export type PillSize = Exclude<Size, Size.Lg | Size.Xl>;
|
|
4
4
|
export type PillColor = BackgroundColor | SemanticColor | StatusColor;
|
|
5
5
|
export interface PillProps extends HTMLAttributes<HTMLSpanElement> {
|
|
6
6
|
size?: PillSize;
|
|
@@ -9,6 +9,27 @@ export interface PillProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
9
9
|
color?: TextColor;
|
|
10
10
|
isStatus?: boolean;
|
|
11
11
|
backgroundColor?: PillColor;
|
|
12
|
+
icon?: IconName;
|
|
12
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* A basic pill component.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <Pill isStatus={true}>
|
|
20
|
+
* Success
|
|
21
|
+
* </Pill>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @param size The size of the pill. See {@link Size}.
|
|
25
|
+
* @param radius The border radius of the pill. See {@link Radius}.
|
|
26
|
+
* @param shadow Optional drop shadow to apply to the pill. See {@link Shadow}.
|
|
27
|
+
* @param color Text color of the pill. See {@link TextColor}.
|
|
28
|
+
* @param backgroundColor Background color of the pill. See {@link BackgroundColor}.
|
|
29
|
+
* @param isStatus If `true`, prefixes the content with a bullet-like icon.
|
|
30
|
+
* @param className `class` overrides to apply to the component.
|
|
31
|
+
* @param children Content of the pill.
|
|
32
|
+
* @param props Additional HTML properties to apply to the component.
|
|
33
|
+
*/
|
|
13
34
|
export declare const Pill: FC<PillProps>;
|
|
14
35
|
//# sourceMappingURL=Pill.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/Pill.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/Pill.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMhD,OAAO,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,aAAa,EACb,MAAM,EACN,IAAI,EAEJ,WAAW,EACX,SAAS,EACV,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,aAAa,GAAG,WAAW,CAAC;AAEtE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IAChE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAQD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAyC9B,CAAC"}
|
|
@@ -9,6 +9,22 @@ export interface RadioProps extends ModifiedRadioProps {
|
|
|
9
9
|
className?: string;
|
|
10
10
|
labelClassName?: string;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* A basic radio component.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Radio value="car" label="Car" />
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @param value The value of the radio element.
|
|
21
|
+
* @param size The size of the radio element. See {@link Size}.
|
|
22
|
+
* @param className `class` overrides to apply to the radio.
|
|
23
|
+
* @param labelClassName `class` overrides to apply to the radio's label.
|
|
24
|
+
* @param label Label to display for the radio element.
|
|
25
|
+
* @param disabled If `true`, disables the radio element.
|
|
26
|
+
* @param props Additional HTML properties to apply to the radio.
|
|
27
|
+
*/
|
|
12
28
|
export declare const Radio: FC<RadioProps>;
|
|
13
29
|
export {};
|
|
14
30
|
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,IAAI,EAA0C,MAAM,SAAS,CAAC;AAKvE,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CACpE,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoBD,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiFhC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,IAAI,EAA0C,MAAM,SAAS,CAAC;AAKvE,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CACpE,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoBD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiFhC,CAAC"}
|
|
@@ -18,5 +18,53 @@ export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "o
|
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
radioProps?: RadioProps;
|
|
20
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* A group of radio controls; supports selection via one-of semantics.
|
|
23
|
+
*
|
|
24
|
+
* This component operates exclusively as a controlled component. See `value` and `onChange` for controlled behavior.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* const MyComponent = () => {
|
|
29
|
+
* const [value, setValue] = useState<string | null>(null);
|
|
30
|
+
*
|
|
31
|
+
* const onChange = useCallback((selectedValue: string) => {
|
|
32
|
+
* setValue(selectedValue);
|
|
33
|
+
* },
|
|
34
|
+
* [setValue]
|
|
35
|
+
* );
|
|
36
|
+
*
|
|
37
|
+
* const options: RadioOption[] = useMemo(() => {
|
|
38
|
+
* return [
|
|
39
|
+
* {value: "car", label: "Car"},
|
|
40
|
+
* {value: "truck", label: "Truck"},
|
|
41
|
+
* {value: "bus", label: "Bus"},
|
|
42
|
+
* ];
|
|
43
|
+
* },
|
|
44
|
+
* []
|
|
45
|
+
* );
|
|
46
|
+
*
|
|
47
|
+
* return (
|
|
48
|
+
* <RadioGroup
|
|
49
|
+
* value={value}
|
|
50
|
+
* onChange={onChange}
|
|
51
|
+
* options={options}
|
|
52
|
+
* />
|
|
53
|
+
* );
|
|
54
|
+
* };
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* @param options List of {@link RadioOption}s to display. Each option will correspond to a {@link Radio} component.
|
|
58
|
+
* @param value The value of the group.
|
|
59
|
+
* @param defaultValue The default value to use when no selection has been made.
|
|
60
|
+
* @param onChange Callback triggered when the selection value changes.
|
|
61
|
+
* @param name Optional name of the radio group.
|
|
62
|
+
* @param size The size of the radio group; this property will be forwarded to the wrapped {@link Radio} components.
|
|
63
|
+
* See {@link Size}.
|
|
64
|
+
* @param disabled If `true`, disables the radio group.
|
|
65
|
+
* @param className `class` overrides to apply to the radio group.
|
|
66
|
+
* @param radioProps Additional HTML properties to apply to each of the wrapped {@link Radio} components.
|
|
67
|
+
* @param props Additional HTML properties to apply to the component.
|
|
68
|
+
*/
|
|
21
69
|
export declare const RadioGroup: FC<RadioGroupProps>;
|
|
22
70
|
//# sourceMappingURL=RadioGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAuC1C,CAAC"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAuC1C,CAAC"}
|
|
@@ -1,10 +1,41 @@
|
|
|
1
1
|
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { IconName } from '../../types';
|
|
2
3
|
export interface RichButtonProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
4
|
active?: boolean;
|
|
4
5
|
description?: ReactNode;
|
|
5
|
-
icon?: FC;
|
|
6
|
+
icon?: FC | IconName;
|
|
6
7
|
label?: ReactNode;
|
|
7
8
|
onClick?: () => void;
|
|
8
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* A component which supports a toggled "active" state with rich content.
|
|
12
|
+
*
|
|
13
|
+
* This component operates exclusively as a controlled component. See `active` and `onClick` for controlled behavior.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* const MyComponent = () => {
|
|
18
|
+
* const [active, setActive] = useState<boolean>(false);
|
|
19
|
+
*
|
|
20
|
+
* const onClick = useCallback(() => setActive(prev => !prev), [setActive]);
|
|
21
|
+
*
|
|
22
|
+
* return (
|
|
23
|
+
* <RichButton
|
|
24
|
+
* label="Detection"
|
|
25
|
+
* description="Create a new detection"
|
|
26
|
+
* onClick={onClick}
|
|
27
|
+
* />
|
|
28
|
+
* );
|
|
29
|
+
* };
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @param active If `true`, renders the component in its active state.
|
|
33
|
+
* @param description Content to display as the description of the component. This is the component's secondary content.
|
|
34
|
+
* @param icon Icon reference ({@link FC}) or an {@link IconName} to display in the component. See {@link Icon}.
|
|
35
|
+
* @param label Content to display as the label of the component. This is the component's primary content.
|
|
36
|
+
* @param onClick Callback triggered when the component is clicked.
|
|
37
|
+
* @param className `class` overrides to apply to the component.
|
|
38
|
+
* @param props Additional HTML properties to apply to the component.
|
|
39
|
+
*/
|
|
9
40
|
export declare const RichButton: FC<RichButtonProps>;
|
|
10
41
|
//# sourceMappingURL=RichButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichButton.d.ts","sourceRoot":"","sources":["../../../src/components/RichButton/RichButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"RichButton.d.ts","sourceRoot":"","sources":["../../../src/components/RichButton/RichButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,EAKL,QAAQ,EAIT,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkD1C,CAAC"}
|
|
@@ -6,5 +6,47 @@ export interface RichButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement
|
|
|
6
6
|
exclusive?: boolean;
|
|
7
7
|
onChange?: (active: string[]) => void;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* A grouping of {@link RichButton} components with linked selection state.
|
|
11
|
+
*
|
|
12
|
+
* This component operates exclusively as an uncontrolled component.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* const MyComponent = () => {
|
|
17
|
+
* const [activeButtons, setActiveButtons] = useState<string[]>(() => []);
|
|
18
|
+
*
|
|
19
|
+
* const onChange = useCallback((active: string[]) => {
|
|
20
|
+
* setActiveButtons(active);
|
|
21
|
+
* },
|
|
22
|
+
* [setActiveButtons]
|
|
23
|
+
* );
|
|
24
|
+
*
|
|
25
|
+
* const buttons: Descriptor<RichButtonProps>[] = useMemo(() => {
|
|
26
|
+
* return [
|
|
27
|
+
* {id: "cls", data: {label: "Classification", description: "Create new classification"}},
|
|
28
|
+
* {id: "det", data: {label: "Detection", description: "Create new detection"}},
|
|
29
|
+
* {id: "seg", data: {label: "Segmentation", description: "Create new segmentation mask"}},
|
|
30
|
+
* ];
|
|
31
|
+
* },
|
|
32
|
+
* []
|
|
33
|
+
* );
|
|
34
|
+
*
|
|
35
|
+
* return (
|
|
36
|
+
* <RichButtonGroup
|
|
37
|
+
* buttons={buttons}
|
|
38
|
+
* exclusive={true}
|
|
39
|
+
* onChange={onChange}
|
|
40
|
+
* />
|
|
41
|
+
* );
|
|
42
|
+
* };
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* @param buttons List of component descriptors which will be used to create {@link RichButton} child components.
|
|
46
|
+
* @param className `class` overrides to apply to the group's container.
|
|
47
|
+
* @param exclusive If `true`, enforces mutual exclusion in child selection state.
|
|
48
|
+
* @param onChange Callback triggered when child selection state changes.
|
|
49
|
+
* @param props Additional HTML properties to apply to the component.
|
|
50
|
+
*/
|
|
9
51
|
export declare const RichButtonGroup: FC<RichButtonGroupProps>;
|
|
10
52
|
//# sourceMappingURL=RichButtonGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RichButtonGroup/RichButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAElE,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkDpD,CAAC"}
|
|
1
|
+
{"version":3,"file":"RichButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RichButtonGroup/RichButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAElE,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkDpD,CAAC"}
|
|
@@ -8,5 +8,71 @@ export interface RichListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
onOrderChange?: (newItems: Descriptor<ListItemProps>[]) => void;
|
|
9
9
|
selected?: string[];
|
|
10
10
|
}
|
|
11
|
+
/**
|
|
12
|
+
* A list-like component which renders a group of {@link ListItem} children.
|
|
13
|
+
*
|
|
14
|
+
* This component operates as both a controlled and uncontrolled component.
|
|
15
|
+
* See `selected`/`onSelected` and `listItems`/`onOrderChange` for controlled behavior.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* const MyComponent = ({openSettings}: {openSettings: (id: string) => void}) => {
|
|
20
|
+
* const items: Descriptor<ListItemProps>[] = useMemo(() => [
|
|
21
|
+
* {
|
|
22
|
+
* id: "1",
|
|
23
|
+
* data: {
|
|
24
|
+
* primaryContent: "First Item",
|
|
25
|
+
* secondaryContent: "First item description"
|
|
26
|
+
* actions: (
|
|
27
|
+
* <Clickable onClick={() => openSettings("1")}>
|
|
28
|
+
* <Icon name={IconName.Settings} />
|
|
29
|
+
* </Clickable>
|
|
30
|
+
* )
|
|
31
|
+
* },
|
|
32
|
+
* },
|
|
33
|
+
* {
|
|
34
|
+
* id: "2",
|
|
35
|
+
* data: {
|
|
36
|
+
* primaryContent: "Second Item",
|
|
37
|
+
* secondaryContent: "Second item description"
|
|
38
|
+
* actions: (
|
|
39
|
+
* <Clickable onClick={() => openSettings("2")}>
|
|
40
|
+
* <Icon name={IconName.Settings} />
|
|
41
|
+
* </Clickable>
|
|
42
|
+
* )
|
|
43
|
+
* },
|
|
44
|
+
* {
|
|
45
|
+
* id: "3",
|
|
46
|
+
* data: {
|
|
47
|
+
* primaryContent: "Third Item",
|
|
48
|
+
* secondaryContent: "Third item description"
|
|
49
|
+
* actions: (
|
|
50
|
+
* <Clickable onClick={() => openSettings("3")}>
|
|
51
|
+
* <Icon name={IconName.Settings} />
|
|
52
|
+
* </Clickable>
|
|
53
|
+
* )
|
|
54
|
+
* },
|
|
55
|
+
* },
|
|
56
|
+
* ],
|
|
57
|
+
* []
|
|
58
|
+
* );
|
|
59
|
+
*
|
|
60
|
+
* return (
|
|
61
|
+
* <RichList listItems={items} />
|
|
62
|
+
* );
|
|
63
|
+
* };
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* @param className `class` overrides to apply to the list's container.
|
|
67
|
+
* @param listItems List of component descriptors which will be used to create {@link ListItem} child components.
|
|
68
|
+
* The order of this list dictates the order of the children from top to bottom.
|
|
69
|
+
* @param draggable If `true`, allows reordering of children via dragging {@link ListItem} components.
|
|
70
|
+
* @param onSelected Callback triggered when selection state changes.
|
|
71
|
+
* This callback includes a list of currently-selected descriptor IDs.
|
|
72
|
+
* @param onOrderChange Callback triggered when {@link ListItem} ordering changes.
|
|
73
|
+
* This callback includes the descriptors in order from top to bottom.
|
|
74
|
+
* @param selected List of descriptor IDs which should be selected; this allows for controlled selection behavior.
|
|
75
|
+
* @param props Additional HTML properties to apply to the component.
|
|
76
|
+
*/
|
|
11
77
|
export declare const RichList: FC<RichListProps>;
|
|
12
78
|
//# sourceMappingURL=RichList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichList.d.ts","sourceRoot":"","sources":["../../../src/components/RichList/RichList.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,EAAE,EACF,cAAc,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmGtC,CAAC"}
|
|
1
|
+
{"version":3,"file":"RichList.d.ts","sourceRoot":"","sources":["../../../src/components/RichList/RichList.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,EAAE,EACF,cAAc,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmGtC,CAAC"}
|
|
@@ -3,5 +3,15 @@ export interface OptionProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
3
3
|
value?: unknown;
|
|
4
4
|
selected?: boolean;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* A selectable option.
|
|
8
|
+
*
|
|
9
|
+
* @param children The content to render in the list option.
|
|
10
|
+
* @param selected If `true`, the list option is rendered with a selected state.
|
|
11
|
+
* @param value The value of the list option.
|
|
12
|
+
* @param props Additional HTML properties to apply to the component.
|
|
13
|
+
*
|
|
14
|
+
* @internal For use by {@link Select}.
|
|
15
|
+
*/
|
|
6
16
|
export declare const Option: FC<OptionProps>;
|
|
7
17
|
//# sourceMappingURL=Option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAehD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8BlC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAehD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8BlC,CAAC"}
|