@clicoh/orion-library 1.2.0-beta.1 → 1.2.0-beta.10
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/components/01-atoms/Button/Button.d.ts +4 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +16 -2
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- package/dist/components/01-atoms/IconButton/IconButton.d.ts +28 -0
- package/dist/components/01-atoms/IconButton/IconButton.d.ts.map +1 -0
- package/dist/components/01-atoms/IconButton/IconButton.jsx +32 -0
- package/dist/components/01-atoms/IconButton/IconButton.jsx.map +1 -0
- package/dist/components/01-atoms/IconButton/index.d.ts +2 -0
- package/dist/components/01-atoms/IconButton/index.d.ts.map +1 -0
- package/dist/components/01-atoms/IconButton/index.js +2 -0
- package/dist/components/01-atoms/IconButton/index.js.map +1 -0
- package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/Input.jsx +3 -2
- package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
- package/dist/components/01-atoms/Input/utils/border.d.ts +2 -1
- package/dist/components/01-atoms/Input/utils/border.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/utils/border.js +2 -2
- package/dist/components/01-atoms/Input/utils/border.js.map +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts +12 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx +18 -2
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx.map +1 -1
- package/dist/components/01-atoms/Radio/Radio.jsx +1 -1
- package/dist/components/01-atoms/Radio/Radio.jsx.map +1 -1
- package/dist/components/01-atoms/Switch/Switch.d.ts +5 -2
- package/dist/components/01-atoms/Switch/Switch.d.ts.map +1 -1
- package/dist/components/01-atoms/Switch/Switch.jsx +15 -12
- package/dist/components/01-atoms/Switch/Switch.jsx.map +1 -1
- package/dist/components/01-atoms/Textarea/Textarea.d.ts +38 -0
- package/dist/components/01-atoms/Textarea/Textarea.d.ts.map +1 -0
- package/dist/components/01-atoms/Textarea/Textarea.jsx +50 -0
- package/dist/components/01-atoms/Textarea/Textarea.jsx.map +1 -0
- package/dist/components/01-atoms/Textarea/index.d.ts +2 -0
- package/dist/components/01-atoms/Textarea/index.d.ts.map +1 -0
- package/dist/components/01-atoms/Textarea/index.js +2 -0
- package/dist/components/01-atoms/Textarea/index.js.map +1 -0
- package/dist/components/01-atoms/Toast/Toast.d.ts.map +1 -1
- package/dist/components/01-atoms/Toast/Toast.jsx +3 -1
- package/dist/components/01-atoms/Toast/Toast.jsx.map +1 -1
- package/dist/components/01-atoms/index.d.ts +2 -0
- package/dist/components/01-atoms/index.d.ts.map +1 -1
- package/dist/components/01-atoms/index.js +2 -0
- package/dist/components/01-atoms/index.js.map +1 -1
- package/dist/components/02-molecules/Accordion/Accordion.d.ts +15 -4
- package/dist/components/02-molecules/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/Accordion.jsx +20 -6
- package/dist/components/02-molecules/Accordion/Accordion.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.d.ts +5 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.jsx +4 -3
- package/dist/components/02-molecules/Accordion/AccordionContext.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts +2 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx +35 -8
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/index.d.ts +1 -0
- package/dist/components/02-molecules/Accordion/index.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/index.js.map +1 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts +10 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx +29 -10
- package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/Filter/Filter.d.ts +1 -0
- package/dist/components/02-molecules/Filter/Filter.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/Filter.jsx +25 -4
- package/dist/components/02-molecules/Filter/Filter.jsx.map +1 -1
- package/dist/components/02-molecules/Filter/index.d.ts +1 -0
- package/dist/components/02-molecules/Filter/index.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/index.js +1 -0
- package/dist/components/02-molecules/Filter/index.js.map +1 -1
- package/dist/components/02-molecules/Filter/types.d.ts +24 -5
- package/dist/components/02-molecules/Filter/types.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.d.ts +34 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.d.ts.map +1 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.js +70 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.js.map +1 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts +55 -5
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx +118 -27
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.d.ts +40 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.d.ts.map +1 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.jsx +108 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.jsx.map +1 -0
- package/dist/components/02-molecules/Modal/Modal.d.ts +5 -1
- package/dist/components/02-molecules/Modal/Modal.d.ts.map +1 -1
- package/dist/components/02-molecules/Modal/Modal.jsx +7 -5
- package/dist/components/02-molecules/Modal/Modal.jsx.map +1 -1
- package/dist/components/02-molecules/index.d.ts +1 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +1 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.d.ts +11 -3
- package/dist/components/03-organisms/MapView/MapView.d.ts.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.jsx +33 -4
- package/dist/components/03-organisms/MapView/MapView.jsx.map +1 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx +4 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx.map +1 -1
- package/package.json +3 -2
|
@@ -2,11 +2,13 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
export type ButtonProps = {
|
|
3
3
|
modifier?: ButtonsVariants;
|
|
4
4
|
size?: ButtonSize;
|
|
5
|
+
tone?: ButtonTone;
|
|
5
6
|
iconL?: ReactNode;
|
|
6
7
|
iconR?: ReactNode;
|
|
7
8
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
8
9
|
export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
|
|
9
10
|
export type ButtonSize = 'md' | 'field' | 'sm';
|
|
11
|
+
export type ButtonTone = 'default' | 'critical';
|
|
10
12
|
/**
|
|
11
13
|
* Represents a button component with different modifiers.
|
|
12
14
|
*
|
|
@@ -18,6 +20,7 @@ export type ButtonSize = 'md' | 'field' | 'sm';
|
|
|
18
20
|
* @param {Object} props - The properties of the Button component.
|
|
19
21
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
20
22
|
* @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
|
|
23
|
+
* @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
|
|
21
24
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
22
25
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
23
26
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -25,5 +28,5 @@ export type ButtonSize = 'md' | 'field' | 'sm';
|
|
|
25
28
|
*
|
|
26
29
|
* @returns {ReactNode} The rendered Button component.
|
|
27
30
|
*/
|
|
28
|
-
export declare function Button({ modifier, size, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
31
|
+
export declare function Button({ modifier, size, tone, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
29
32
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAmHhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAsB,EACtB,IAAW,EACX,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAuBzB"}
|
|
@@ -31,6 +31,18 @@ const styleMap = {
|
|
|
31
31
|
text: clsx('underline', 'text-black', 'disabled:text-gray-3', 'active:text-gray-1', 'not-disabled:hover:before:bg-gray-5', 'not-disabled:hover:after:bg-gray-5', 'dark:active:text-gray-7 dark:disabled:text-gray-2 dark:text-white', 'dark:not-disabled:hover:before:bg-gray-1', 'dark:not-disabled:hover:after:bg-gray-1'),
|
|
32
32
|
action: clsx('disabled:text-gray-3 not-disabled:active:text-gray-5 text-black not-disabled:hover:text-white [&:not(:disabled):not(:hover)]:focus:text-black', '[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black disabled:before:bg-white', 'after:bg-clicoh disabled:after:bg-gray-3 not-disabled:hover:after:bg-black not-disabled:hover:after:bg-none not-disabled:active:after:bg-black not-disabled:active:after:bg-none disabled:after:bg-none', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-5 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-black dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:after:bg-clicoh dark:disabled:after:bg-gray-2 dark:not-disabled:active:after:bg-gray-5 dark:not-disabled:hover:after:bg-white dark:not-disabled:hover:after:bg-none dark:not-disabled:active:after:bg-none dark:disabled:after:bg-none'),
|
|
33
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* El texto rojo usa `error-strong`: `error` queda por debajo de 4.5:1 sobre
|
|
36
|
+
* blanco. Los rellenos con texto blanco usan `error-strong` tambien en dark por
|
|
37
|
+
* la misma razon; el texto sobre fondo oscuro sigue la regla de `-dark`.
|
|
38
|
+
*/
|
|
39
|
+
const criticalOutline = clsx('text-error-strong disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-error-strong not-disabled:hover:text-white not-disabled:active:text-white', 'not-disabled:hover:before:bg-error-strong not-disabled:active:before:bg-error-strong [&:not(:disabled):not(:hover)]:focus:before:bg-error-1 before:bg-white disabled:before:bg-white', 'after:bg-error-strong disabled:after:bg-gray-3 not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong [&:not(:disabled):not(:hover)]:focus:after:bg-error-strong', 'dark:text-error-dark dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-error-dark dark:not-disabled:hover:text-white dark:not-disabled:active:text-white', 'dark:not-disabled:hover:before:bg-error-strong dark:not-disabled:active:before:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-dark-1 dark:before:bg-black dark:disabled:before:bg-black', 'dark:after:bg-error-dark dark:disabled:after:bg-gray-2 dark:not-disabled:hover:after:bg-error-strong dark:not-disabled:active:after:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:after:bg-error-dark');
|
|
40
|
+
const criticalStyleMap = {
|
|
41
|
+
principal: clsx('not-disabled:hover:text-error-strong not-disabled:active:text-error-strong text-white disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'before:bg-error-strong not-disabled:active:before:bg-error-1 disabled:before:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:before:bg-error-strong not-disabled:hover:before:bg-white', 'after:bg-error-strong not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh', 'dark:not-disabled:hover:text-error-dark dark:not-disabled:active:text-error-dark dark:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-white', 'dark:before:bg-error-strong dark:not-disabled:active:before:bg-error-dark-1 dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-strong dark:not-disabled:hover:before:bg-black', 'dark:after:bg-error-strong dark:not-disabled:hover:after:bg-error-dark dark:not-disabled:active:after:bg-error-dark dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-clicoh'),
|
|
42
|
+
second: criticalOutline,
|
|
43
|
+
text: clsx('underline', 'text-error-strong', 'disabled:text-gray-3', 'active:text-error', 'not-disabled:hover:before:bg-error-1', 'not-disabled:hover:after:bg-error-1', 'dark:text-error-dark dark:disabled:text-gray-2 dark:active:text-error-dark dark:not-disabled:hover:text-white', 'dark:not-disabled:hover:before:bg-error-dark-1', 'dark:not-disabled:hover:after:bg-error-dark-1'),
|
|
44
|
+
action: criticalOutline,
|
|
45
|
+
};
|
|
34
46
|
/**
|
|
35
47
|
* Represents a button component with different modifiers.
|
|
36
48
|
*
|
|
@@ -42,6 +54,7 @@ const styleMap = {
|
|
|
42
54
|
* @param {Object} props - The properties of the Button component.
|
|
43
55
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
44
56
|
* @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
|
|
57
|
+
* @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
|
|
45
58
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
46
59
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
47
60
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -49,9 +62,10 @@ const styleMap = {
|
|
|
49
62
|
*
|
|
50
63
|
* @returns {ReactNode} The rendered Button component.
|
|
51
64
|
*/
|
|
52
|
-
export function Button({ modifier = 'principal', size = 'md', iconL, iconR, children, ...restProps }) {
|
|
65
|
+
export function Button({ modifier = 'principal', size = 'md', tone = 'default', iconL, iconR, children, ...restProps }) {
|
|
53
66
|
const sizing = sizeMap[size];
|
|
54
|
-
const
|
|
67
|
+
const variantStyles = tone === 'critical' ? criticalStyleMap : styleMap;
|
|
68
|
+
const className = clsx('relative isolate flex items-center justify-center text-center font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', sizing.base, iconL ? sizing.iconPadL : sizing.padL, iconR ? sizing.iconPadR : sizing.padR, variantStyles[modifier], restProps.className);
|
|
55
69
|
return (<button {...restProps} className={className}>
|
|
56
70
|
{!!iconL && <span className={clsx('pr-2', sizing.icon)}>{iconL}</span>}
|
|
57
71
|
<span>{children}</span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from 'react';
|
|
2
|
+
import { Tooltip } from '../Tooltip';
|
|
3
|
+
export type IconButtonProps = {
|
|
4
|
+
icon: ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
tooltipPlacement?: ComponentProps<typeof Tooltip>['placement'];
|
|
7
|
+
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'>;
|
|
8
|
+
/**
|
|
9
|
+
* Button that shows only an icon, for secondary actions in dense rows (lists,
|
|
10
|
+
* timelines, cards). The `label` is required because the icon alone says
|
|
11
|
+
* nothing to a screen reader or to someone who does not recognise it: it
|
|
12
|
+
* becomes the accessible name and the tooltip shown on hover and focus.
|
|
13
|
+
*
|
|
14
|
+
* @component
|
|
15
|
+
* @example
|
|
16
|
+
* // Example usage of IconButton component
|
|
17
|
+
* <IconButton icon={<FiInfo />} label="See details" onClick={openDetails} />
|
|
18
|
+
*
|
|
19
|
+
* @param {Object} props - The properties of the IconButton component.
|
|
20
|
+
* @param {ReactNode} props.icon - The icon to render. Sized by the button's font size (16px).
|
|
21
|
+
* @param {string} props.label - Accessible name of the button and text of its tooltip.
|
|
22
|
+
* @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip relative to the button.
|
|
23
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element. `type` defaults to `button`.
|
|
24
|
+
*
|
|
25
|
+
* @returns {ReactNode} The rendered IconButton component.
|
|
26
|
+
*/
|
|
27
|
+
export declare function IconButton({ icon, label, tooltipPlacement, type, ...restProps }: IconButtonProps): ReactNode;
|
|
28
|
+
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;CAChE,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;AAE7E;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,gBAAwB,EACxB,IAAe,EACf,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAuB7B"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import { Tooltip } from '../Tooltip';
|
|
3
|
+
/**
|
|
4
|
+
* Button that shows only an icon, for secondary actions in dense rows (lists,
|
|
5
|
+
* timelines, cards). The `label` is required because the icon alone says
|
|
6
|
+
* nothing to a screen reader or to someone who does not recognise it: it
|
|
7
|
+
* becomes the accessible name and the tooltip shown on hover and focus.
|
|
8
|
+
*
|
|
9
|
+
* @component
|
|
10
|
+
* @example
|
|
11
|
+
* // Example usage of IconButton component
|
|
12
|
+
* <IconButton icon={<FiInfo />} label="See details" onClick={openDetails} />
|
|
13
|
+
*
|
|
14
|
+
* @param {Object} props - The properties of the IconButton component.
|
|
15
|
+
* @param {ReactNode} props.icon - The icon to render. Sized by the button's font size (16px).
|
|
16
|
+
* @param {string} props.label - Accessible name of the button and text of its tooltip.
|
|
17
|
+
* @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip relative to the button.
|
|
18
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element. `type` defaults to `button`.
|
|
19
|
+
*
|
|
20
|
+
* @returns {ReactNode} The rendered IconButton component.
|
|
21
|
+
*/
|
|
22
|
+
export function IconButton({ icon, label, tooltipPlacement = 'top', type = 'button', ...restProps }) {
|
|
23
|
+
const className = clsx('flex items-center justify-center rounded-sm p-2 text-base transition-colors', 'text-gray-1 disabled:text-gray-3 not-disabled:hover:bg-black not-disabled:hover:text-white disabled:cursor-not-allowed', 'dark:text-gray-5 dark:disabled:text-gray-2 dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black', 'focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark focus-visible:ring-2 focus-visible:outline-none', restProps.className);
|
|
24
|
+
return (<Tooltip message={label} placement={tooltipPlacement}>
|
|
25
|
+
<button {...restProps} type={type} aria-label={label} className={className}>
|
|
26
|
+
<span aria-hidden="true" className="flex">
|
|
27
|
+
{icon}
|
|
28
|
+
</span>
|
|
29
|
+
</button>
|
|
30
|
+
</Tooltip>);
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=IconButton.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAQrC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,IAAI,GAAG,QAAQ,EACf,GAAG,SAAS,EACI;IAChB,MAAM,SAAS,GAAG,IAAI,CACpB,6EAA6E,EAC7E,wHAAwH,EACxH,gHAAgH,EAChH,mHAAmH,EACnH,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,gBAAgB,CAAC,CACnD;MAAA,CAAC,MAAM,CACL,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,SAAS,CAAC,CAErB;QAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CACvC;UAAA,CAAC,IAAI,CACP;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,CA2GxB"}
|
|
@@ -41,10 +41,11 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
|
|
|
41
41
|
undefined;
|
|
42
42
|
const isPassword = input.type === 'password';
|
|
43
43
|
const effectiveType = isPassword && showPassword ? 'text' : input.type;
|
|
44
|
-
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent
|
|
44
|
+
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent text-sm font-normal text-black outline-0 transition-all focus:text-black dark:bg-black dark:text-white dark:focus:text-white', iconL ? 'pr-5 pl-11' : 'px-5', hideLabel && 'placeholder:text-gray-2 dark:placeholder:text-gray-2', input.className);
|
|
45
45
|
const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
|
|
46
46
|
isMutedWhenEmpty,
|
|
47
47
|
hideLabel,
|
|
48
|
+
hasIconL: Boolean(iconL),
|
|
48
49
|
});
|
|
49
50
|
labelProps.htmlFor = id;
|
|
50
51
|
const rightSlot = isPassword ? (<button type="button" onClick={() => setShowPassword((prev) => !prev)} aria-pressed={showPassword} aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel} disabled={input.disabled} className={clsx('disabled:text-gray-3 dark:disabled:text-gray-2 flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:cursor-not-allowed dark:focus-visible:ring-white/30', error
|
|
@@ -61,7 +62,7 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
|
|
|
61
62
|
<fieldset aria-hidden="true" className={fieldsetClasses}>
|
|
62
63
|
{!hideLabel && <legend className={legendClasses}>{label}</legend>}
|
|
63
64
|
</fieldset>
|
|
64
|
-
{!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-
|
|
65
|
+
{!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-1/2 left-4 flex -translate-y-1/2 items-center', error
|
|
65
66
|
? 'text-error dark:text-error-dark'
|
|
66
67
|
: 'text-black dark:text-white')}>
|
|
67
68
|
{iconL}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,KAAK,EACL,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AA2B1E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,GACV;IACX,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,WAAW,CAAC;IACnC,MAAM,aAAa,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,WAAW,GACf,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACpE,SAAS,CAAC;IAEZ,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEvE,MAAM,YAAY,GAAG,IAAI,CACvB,
|
|
1
|
+
{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@ type BorderOptions = {
|
|
|
2
2
|
isMuted?: boolean;
|
|
3
3
|
isMutedWhenEmpty?: boolean;
|
|
4
4
|
hideLabel?: boolean;
|
|
5
|
+
hasIconL?: boolean;
|
|
5
6
|
};
|
|
6
|
-
export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty, hideLabel }?: BorderOptions) => {
|
|
7
|
+
export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty, hideLabel, hasIconL }?: BorderOptions) => {
|
|
7
8
|
labelProps: {
|
|
8
9
|
htmlFor?: string;
|
|
9
10
|
className: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,MAAM,uDACsC,aAAa;;kBAEnC,MAAM;mBAAa,MAAM;;;;CAuCxD,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
-
export const generateBorder = (error, { isMuted, isMutedWhenEmpty, hideLabel } = {}) => {
|
|
2
|
+
export const generateBorder = (error, { isMuted, isMutedWhenEmpty, hideLabel, hasIconL } = {}) => {
|
|
3
3
|
const labelProps = {
|
|
4
|
-
className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', error
|
|
4
|
+
className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', hasIconL && 'peer-[:placeholder-shown:not(:focus)]:left-10', error
|
|
5
5
|
? 'text-error dark:text-error-dark'
|
|
6
6
|
: isMuted
|
|
7
7
|
? 'text-gray-2 dark:text-gray-2'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAc,EACd,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,KAAoB,EAAE,EACtE,EAAE;IACF,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,QAAQ,IAAI,+CAA+C,EAC3D,KAAK;YACH,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,4BAA4B,EAClC,CAAC,KAAK;YACJ,gBAAgB;YAChB,4EAA4E,CAC/E;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,IAAI,CAC1B,qEAAqE,EACrE,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,6BAA6B,EAC1D,uQAAuQ,EACvQ,KAAK;QACH,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,gCAAgC,EACtC,CAAC,KAAK;QACJ,gBAAgB;QAChB,qIAAqI,CACxI,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CACxB,wEAAwE,CACzE,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -177,7 +177,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
|
|
|
177
177
|
: 'dark:text-white')}>
|
|
178
178
|
{label}
|
|
179
179
|
</label>
|
|
180
|
-
<FaSortDown aria-hidden="true" className={clsx('absolute top-2 right-4', isMuted ? 'text-gray-2 dark:text-gray-2' : 'dark:text-white')}/>
|
|
180
|
+
<FaSortDown aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-4', isMuted ? 'text-gray-2 dark:text-gray-2' : 'dark:text-white')}/>
|
|
181
181
|
<fieldset className={clsx(fieldsetClasses, 'dark:peer-disabled:border-gray-2', error
|
|
182
182
|
? 'dark:border-error-dark'
|
|
183
183
|
: isMuted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ProgressBarModifier = 'default' | 'success' | 'warning' | 'error';
|
|
2
3
|
export type ProgressBarProps = {
|
|
3
4
|
/** Progress between 0 and 100. Omit it for an indeterminate bar. */
|
|
4
5
|
value?: number;
|
|
5
6
|
/** Accessible name of the operation being tracked. */
|
|
6
7
|
ariaLabel: string;
|
|
8
|
+
/** Color of the fill. Defaults to the brand accent. */
|
|
9
|
+
modifier?: ProgressBarModifier;
|
|
7
10
|
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
|
|
8
11
|
/**
|
|
9
12
|
* Thin linear progress bar. With `value` it fills from the left up to that
|
|
@@ -12,6 +15,9 @@ export type ProgressBarProps = {
|
|
|
12
15
|
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
13
16
|
* deserve a headline and copy under them.
|
|
14
17
|
*
|
|
18
|
+
* `modifier` colors the fill to grade the value (a score, a quota). Color is
|
|
19
|
+
* never the only signal: pair it with the value or a label in text.
|
|
20
|
+
*
|
|
15
21
|
* @component
|
|
16
22
|
* @example
|
|
17
23
|
* // Indeterminate
|
|
@@ -21,11 +27,16 @@ export type ProgressBarProps = {
|
|
|
21
27
|
* // Determinate
|
|
22
28
|
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
23
29
|
*
|
|
30
|
+
* @example
|
|
31
|
+
* // Graded value
|
|
32
|
+
* <ProgressBar value={72} modifier="warning" ariaLabel="Match score" />
|
|
33
|
+
*
|
|
24
34
|
* @param {Object} props - The properties of the ProgressBar component.
|
|
25
35
|
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
26
36
|
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
37
|
+
* @param {'default' | 'success' | 'warning' | 'error'} [props.modifier='default'] - Color of the fill.
|
|
27
38
|
*
|
|
28
39
|
* @returns {ReactNode} The rendered ProgressBar component.
|
|
29
40
|
*/
|
|
30
|
-
export declare function ProgressBar({ value, ariaLabel, ...restProps }: ProgressBarProps): ReactNode;
|
|
41
|
+
export declare function ProgressBar({ value, ariaLabel, modifier, ...restProps }: ProgressBarProps): ReactNode;
|
|
31
42
|
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAe9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,QAAoB,EACpB,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CA6B9B"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
+
// `warning` uses the amber family: the yellow `warning` token sits near 1.4:1
|
|
3
|
+
// against the track, below the 3:1 a graphic needs to be told apart.
|
|
4
|
+
const styleMap = {
|
|
5
|
+
default: 'bg-lavender dark:bg-lavender-dark',
|
|
6
|
+
success: 'bg-success dark:bg-success-dark',
|
|
7
|
+
warning: 'bg-amber dark:bg-amber-dark',
|
|
8
|
+
error: 'bg-error dark:bg-error-dark',
|
|
9
|
+
};
|
|
2
10
|
function clamp(value) {
|
|
3
11
|
return Math.min(100, Math.max(0, value));
|
|
4
12
|
}
|
|
@@ -9,6 +17,9 @@ function clamp(value) {
|
|
|
9
17
|
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
10
18
|
* deserve a headline and copy under them.
|
|
11
19
|
*
|
|
20
|
+
* `modifier` colors the fill to grade the value (a score, a quota). Color is
|
|
21
|
+
* never the only signal: pair it with the value or a label in text.
|
|
22
|
+
*
|
|
12
23
|
* @component
|
|
13
24
|
* @example
|
|
14
25
|
* // Indeterminate
|
|
@@ -18,17 +29,22 @@ function clamp(value) {
|
|
|
18
29
|
* // Determinate
|
|
19
30
|
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
20
31
|
*
|
|
32
|
+
* @example
|
|
33
|
+
* // Graded value
|
|
34
|
+
* <ProgressBar value={72} modifier="warning" ariaLabel="Match score" />
|
|
35
|
+
*
|
|
21
36
|
* @param {Object} props - The properties of the ProgressBar component.
|
|
22
37
|
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
23
38
|
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
39
|
+
* @param {'default' | 'success' | 'warning' | 'error'} [props.modifier='default'] - Color of the fill.
|
|
24
40
|
*
|
|
25
41
|
* @returns {ReactNode} The rendered ProgressBar component.
|
|
26
42
|
*/
|
|
27
|
-
export function ProgressBar({ value, ariaLabel, ...restProps }) {
|
|
43
|
+
export function ProgressBar({ value, ariaLabel, modifier = 'default', ...restProps }) {
|
|
28
44
|
const isDeterminate = typeof value === 'number';
|
|
29
45
|
const percent = isDeterminate ? clamp(value) : undefined;
|
|
30
46
|
return (<div {...restProps} role="progressbar" aria-label={ariaLabel} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent} className={clsx('bg-gray-6 dark:bg-gray-dark-1 h-1 overflow-hidden rounded-full', restProps.className)}>
|
|
31
|
-
<div className={clsx('
|
|
47
|
+
<div className={clsx('h-full rounded-full', styleMap[modifier], isDeterminate
|
|
32
48
|
? 'transition-[width] duration-300 ease-out'
|
|
33
49
|
: 'animate-progress-indeterminate w-2/5 motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-60')} style={isDeterminate ? { width: `${percent}%` } : undefined}/>
|
|
34
50
|
</div>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,8EAA8E;AAC9E,qEAAqE;AACrE,MAAM,QAAQ,GAAwC;IACpD,OAAO,EAAE,mCAAmC;IAC5C,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF,SAAS,KAAK,CAAC,KAAa;IAC1B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,GAAG,SAAS,EACK;IACjB,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEzD,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,aAAa,CAClB,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,aAAa,CAAC,CAAC,OAAO,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CACb,gEAAgE,EAChE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb,qBAAqB,EACrB,QAAQ,CAAC,QAAQ,CAAC,EAClB,aAAa;YACX,CAAC,CAAC,0CAA0C;YAC5C,CAAC,CAAC,+GAA+G,CACpH,CAAC,CACF,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAEhE;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -72,7 +72,7 @@ export function Radio({ label, options, radio, helperText, error, orientation =
|
|
|
72
72
|
: 'border-gray-3 dark:border-gray-2 border');
|
|
73
73
|
return (<fieldset className="w-full max-w-full border-0 p-0" aria-describedby={descriptionId}>
|
|
74
74
|
<legend className={clsx(isPill
|
|
75
|
-
? 'pb-1.5 text-xs font-semibold
|
|
75
|
+
? 'pb-1.5 text-xs font-semibold'
|
|
76
76
|
: 'pb-1.5 text-sm font-normal', radio.disabled
|
|
77
77
|
? 'text-gray-3 dark:text-gray-2'
|
|
78
78
|
: isPill
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAA4C,KAAK,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAcjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,GAAG,UAAU,EACxB,QAAQ,GAAG,SAAS,GACT;IACX,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,aAAa,GACjB,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,MAAM,WAAW,GACf,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACpE,SAAS,CAAC;IACZ,MAAM,MAAM,GAAG,QAAQ,KAAK,MAAM,CAAC;IAEnC,MAAM,YAAY,GAAG,IAAI,CACvB,wIAAwI,EACxI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ;QACtB,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,gCAAgC,EACpC,CAAC,KAAK,CAAC,QAAQ;QACb,uLAAuL,EACzL,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CACvB,4BAA4B,EAC5B,KAAK,CAAC,QAAQ;QACZ,CAAC,CAAC,iDAAiD;QACnD,CAAC,CAAC,KAAK;YACL,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,4BAA4B,CACnC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE,CAC5C,IAAI,CACF,0HAA0H,EAC1H,+DAA+D,EAC/D,OAAO;QACL,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,6DAA6D,EACjE,CAAC,OAAO;QACN,CAAC,KAAK,CAAC,QAAQ;QACf,8CAA8C,EAChD,KAAK;QACH,CAAC,KAAK,CAAC,QAAQ;QACf,qEAAqE,EACvE,KAAK,CAAC,QAAQ;QACZ,kFAAkF,CACrF,CAAC;IAEJ,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CAC1C,IAAI,CACF,yDAAyD,EACzD,OAAO;QACL,CAAC,CAAC,oDAAoD;QACtD,CAAC,CAAC,yCAAyC,CAC9C,CAAC;IAEJ,OAAO,CACL,CAAC,QAAQ,CACP,SAAS,CAAC,gCAAgC,CAC1C,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAEhC;MAAA,CAAC,MAAM,CACL,SAAS,CAAC,CAAC,IAAI,CACb,MAAM;YACJ,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,8 @@ type SwitchProps = {
|
|
|
5
5
|
onChange?: (checked: boolean) => void;
|
|
6
6
|
onClick?: (rollback: () => void, commit: () => void) => void;
|
|
7
7
|
label?: string;
|
|
8
|
+
/** Accessible name when there is no visible `label` (e.g. a switch inside a table row). */
|
|
9
|
+
ariaLabel?: string;
|
|
8
10
|
};
|
|
9
11
|
/**
|
|
10
12
|
* Switch component for rendering a toggle switch with optional label.
|
|
@@ -29,11 +31,12 @@ type SwitchProps = {
|
|
|
29
31
|
* @param {boolean} isChecked - Initial checked state of the switch.
|
|
30
32
|
* @param {boolean} [isDisabled=false] - Optional boolean to disable the switch.
|
|
31
33
|
* @param {string} [label] - Optional label to be displayed next to the switch.
|
|
34
|
+
* @param {string} [ariaLabel] - Accessible name for the control when no visible `label` is rendered.
|
|
32
35
|
* @param {function} [onChange] - Optional callback function to handle change in checked state.
|
|
33
|
-
* @param {function} [onClick] - Optional callback function to handle click events with rollback and commit actions.
|
|
36
|
+
* @param {function} [onClick] - Optional callback function to handle click events with rollback and commit actions. Invoked exactly once per click.
|
|
34
37
|
*
|
|
35
38
|
* @returns {ReactNode} The rendered Switch component.
|
|
36
39
|
*/
|
|
37
|
-
export declare function Switch({ isChecked, isDisabled, label, onChange, onClick, }: SwitchProps): ReactNode;
|
|
40
|
+
export declare function Switch({ isChecked, isDisabled, label, ariaLabel, onChange, onClick, }: SwitchProps): ReactNode;
|
|
38
41
|
export {};
|
|
39
42
|
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,UAAkB,EAClB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,GAAG,SAAS,CAyEzB"}
|
|
@@ -25,12 +25,13 @@ import { Paragraph } from '../Paragraph';
|
|
|
25
25
|
* @param {boolean} isChecked - Initial checked state of the switch.
|
|
26
26
|
* @param {boolean} [isDisabled=false] - Optional boolean to disable the switch.
|
|
27
27
|
* @param {string} [label] - Optional label to be displayed next to the switch.
|
|
28
|
+
* @param {string} [ariaLabel] - Accessible name for the control when no visible `label` is rendered.
|
|
28
29
|
* @param {function} [onChange] - Optional callback function to handle change in checked state.
|
|
29
|
-
* @param {function} [onClick] - Optional callback function to handle click events with rollback and commit actions.
|
|
30
|
+
* @param {function} [onClick] - Optional callback function to handle click events with rollback and commit actions. Invoked exactly once per click.
|
|
30
31
|
*
|
|
31
32
|
* @returns {ReactNode} The rendered Switch component.
|
|
32
33
|
*/
|
|
33
|
-
export function Switch({ isChecked, isDisabled = false, label, onChange, onClick, }) {
|
|
34
|
+
export function Switch({ isChecked, isDisabled = false, label, ariaLabel, onChange, onClick, }) {
|
|
34
35
|
const [checked, setChecked] = useState(isChecked);
|
|
35
36
|
const [disable, setDisable] = useState(isDisabled);
|
|
36
37
|
const handleChange = (event) => {
|
|
@@ -40,15 +41,17 @@ export function Switch({ isChecked, isDisabled = false, label, onChange, onClick
|
|
|
40
41
|
if (!onClick) {
|
|
41
42
|
return setChecked((prevState) => !prevState);
|
|
42
43
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
44
|
+
// `onClick` runs outside the state updater on purpose: React may invoke an
|
|
45
|
+
// updater more than once (Strict Mode, batching), which would fire the
|
|
46
|
+
// consumer's side effect several times per click.
|
|
47
|
+
const previous = checked;
|
|
48
|
+
setChecked(!previous);
|
|
49
|
+
setDisable(true);
|
|
50
|
+
onClick(() => {
|
|
51
|
+
setChecked(previous);
|
|
52
|
+
setDisable(false);
|
|
53
|
+
}, () => {
|
|
54
|
+
setDisable(false);
|
|
52
55
|
});
|
|
53
56
|
};
|
|
54
57
|
useEffect(() => {
|
|
@@ -58,7 +61,7 @@ export function Switch({ isChecked, isDisabled = false, label, onChange, onClick
|
|
|
58
61
|
setDisable(isDisabled);
|
|
59
62
|
}, [isDisabled]);
|
|
60
63
|
return (<label className={clsx('inline-flex items-center', disable ? 'select-none' : 'cursor-pointer')}>
|
|
61
|
-
<input type="checkbox" role="switch" aria-checked={checked} className="peer sr-only" checked={checked} onChange={handleChange} onClick={handleClick} disabled={disable}/>
|
|
64
|
+
<input type="checkbox" role="switch" aria-checked={checked} aria-label={label ? undefined : ariaLabel} className="peer sr-only" checked={checked} onChange={handleChange} onClick={handleClick} disabled={disable}/>
|
|
62
65
|
<div aria-hidden="true" className="bg-gray-3 after:border-gray-3 dark:bg-gray-1 dark:after:border-gray-2 relative h-5 w-12 rounded-full peer-checked:bg-black peer-focus-visible:ring-2 peer-focus-visible:ring-black/20 peer-disabled:opacity-80 after:absolute after:-top-0.5 after:size-6 after:rounded-full after:border after:bg-white after:shadow-sm after:shadow-[rgba(0,0,0,.5)] after:transition-all peer-checked:after:translate-x-full dark:peer-checked:bg-white dark:peer-focus-visible:ring-white/30 dark:after:bg-white dark:peer-checked:after:bg-black"/>
|
|
63
66
|
<Paragraph size="subtitle-1" className={clsx('ms-2', disable
|
|
64
67
|
? 'text-gray-3 dark:text-gray-2'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,GACK;IACZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,SAAS,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;QACnE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;QAC/C,CAAC;QAED,2EAA2E;QAC3E,uEAAuE;QACvE,kDAAkD;QAClD,MAAM,QAAQ,GAAG,OAAO,CAAC;QACzB,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;QACtB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,CACL,GAAG,EAAE;YACH,UAAU,CAAC,QAAQ,CAAC,CAAC;YACrB,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,GAAG,EAAE;YACH,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,UAAU,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,CAAC,KAAK,CACJ,SAAS,CAAC,CAAC,IAAI,CACb,0BAA0B,EAC1B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAC3C,CAAC,CAEF;MAAA,CAAC,KAAK,CACJ,IAAI,CAAC,UAAU,CACf,IAAI,CAAC,QAAQ,CACb,YAAY,CAAC,CAAC,OAAO,CAAC,CACtB,UAAU,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1C,SAAS,CAAC,cAAc,CACxB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,QAAQ,CAAC,CAAC,OAAO,CAAC,EAEpB;MAAA,CAAC,GAAG,CACF,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,ugBAAugB,EAEnhB;MAAA,CAAC,SAAS,CACR,IAAI,CAAC,YAAY,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,MAAM,EACN,OAAO;YACL,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,4BAA4B,CACjC,CAAC,CAEF;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC"}
|