@clicoh/orion-library 1.1.0 → 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/assets/css/base.css +24 -1
- package/dist/components/01-atoms/Badge/Badge.d.ts +13 -3
- package/dist/components/01-atoms/Badge/Badge.d.ts.map +1 -1
- package/dist/components/01-atoms/Badge/Badge.jsx +21 -4
- package/dist/components/01-atoms/Badge/Badge.jsx.map +1 -1
- package/dist/components/01-atoms/Button/Button.d.ts +7 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +46 -4
- 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 +5 -1
- package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/Input.jsx +12 -6
- package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
- package/dist/components/01-atoms/Input/utils/border.d.ts +3 -1
- package/dist/components/01-atoms/Input/utils/border.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/utils/border.js +3 -3
- package/dist/components/01-atoms/Input/utils/border.js.map +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +2 -2
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts +42 -0
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts.map +1 -0
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx +52 -0
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx.map +1 -0
- package/dist/components/01-atoms/ProgressBar/index.d.ts +2 -0
- package/dist/components/01-atoms/ProgressBar/index.d.ts.map +1 -0
- package/dist/components/01-atoms/ProgressBar/index.js +2 -0
- package/dist/components/01-atoms/ProgressBar/index.js.map +1 -0
- package/dist/components/01-atoms/Radio/Radio.d.ts +19 -2
- package/dist/components/01-atoms/Radio/Radio.d.ts.map +1 -1
- package/dist/components/01-atoms/Radio/Radio.jsx +51 -6
- package/dist/components/01-atoms/Radio/Radio.jsx.map +1 -1
- package/dist/components/01-atoms/Select/Select.d.ts +3 -1
- package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +8 -4
- package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
- package/dist/components/01-atoms/Skeleton/Skeleton.d.ts +32 -0
- package/dist/components/01-atoms/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/01-atoms/Skeleton/Skeleton.jsx +34 -0
- package/dist/components/01-atoms/Skeleton/Skeleton.jsx.map +1 -0
- package/dist/components/01-atoms/Skeleton/index.d.ts +2 -0
- package/dist/components/01-atoms/Skeleton/index.d.ts.map +1 -0
- package/dist/components/01-atoms/Skeleton/index.js +2 -0
- package/dist/components/01-atoms/Skeleton/index.js.map +1 -0
- package/dist/components/01-atoms/SmallInput/SmallInput.jsx +1 -1
- package/dist/components/01-atoms/SmallInput/SmallInput.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 +4 -0
- package/dist/components/01-atoms/index.d.ts.map +1 -1
- package/dist/components/01-atoms/index.js +4 -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.d.ts +79 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +229 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -0
- package/dist/components/02-molecules/DatePicker/index.d.ts +2 -0
- package/dist/components/02-molecules/DatePicker/index.d.ts.map +1 -0
- package/dist/components/02-molecules/DatePicker/index.js +2 -0
- package/dist/components/02-molecules/DatePicker/index.js.map +1 -0
- 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/InlineMessage/InlineMessage.d.ts +37 -0
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts.map +1 -0
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx +59 -0
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx.map +1 -0
- package/dist/components/02-molecules/InlineMessage/index.d.ts +2 -0
- package/dist/components/02-molecules/InlineMessage/index.d.ts.map +1 -0
- package/dist/components/02-molecules/InlineMessage/index.js +2 -0
- package/dist/components/02-molecules/InlineMessage/index.js.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 +3 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +3 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.d.ts +73 -0
- package/dist/components/03-organisms/MapView/MapView.d.ts.map +1 -0
- package/dist/components/03-organisms/MapView/MapView.jsx +228 -0
- package/dist/components/03-organisms/MapView/MapView.jsx.map +1 -0
- package/dist/components/03-organisms/MapView/index.d.ts +2 -0
- package/dist/components/03-organisms/MapView/index.d.ts.map +1 -0
- package/dist/components/03-organisms/MapView/index.js +2 -0
- package/dist/components/03-organisms/MapView/index.js.map +1 -0
- package/dist/components/03-organisms/index.d.ts +1 -0
- package/dist/components/03-organisms/index.d.ts.map +1 -1
- package/dist/components/03-organisms/index.js +1 -0
- package/dist/components/03-organisms/index.js.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +2 -2
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.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 +5 -2
- package/tailwind.config.ts +10 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAKL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAmBjF,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,GAAG,SAAS,EACK;IACjB,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAClC,MAAM,UAAU,GAAG,GAAG,EAAE,WAAW,CAAC;IAEpC,MAAM,YAAY,GAAG,IAAI,CACvB,
|
|
1
|
+
{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ProgressBarModifier = 'default' | 'success' | 'warning' | 'error';
|
|
3
|
+
export type ProgressBarProps = {
|
|
4
|
+
/** Progress between 0 and 100. Omit it for an indeterminate bar. */
|
|
5
|
+
value?: number;
|
|
6
|
+
/** Accessible name of the operation being tracked. */
|
|
7
|
+
ariaLabel: string;
|
|
8
|
+
/** Color of the fill. Defaults to the brand accent. */
|
|
9
|
+
modifier?: ProgressBarModifier;
|
|
10
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
|
|
11
|
+
/**
|
|
12
|
+
* Thin linear progress bar. With `value` it fills from the left up to that
|
|
13
|
+
* percentage; without it, a short segment sweeps the track to signal work
|
|
14
|
+
* whose duration is unknown. Companion of `RadialProgressBar` for layouts
|
|
15
|
+
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
16
|
+
* deserve a headline and copy under them.
|
|
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
|
+
*
|
|
21
|
+
* @component
|
|
22
|
+
* @example
|
|
23
|
+
* // Indeterminate
|
|
24
|
+
* <ProgressBar ariaLabel="Calculating route" className="w-52" />
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Determinate
|
|
28
|
+
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* // Graded value
|
|
32
|
+
* <ProgressBar value={72} modifier="warning" ariaLabel="Match score" />
|
|
33
|
+
*
|
|
34
|
+
* @param {Object} props - The properties of the ProgressBar component.
|
|
35
|
+
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
36
|
+
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
37
|
+
* @param {'default' | 'success' | 'warning' | 'error'} [props.modifier='default'] - Color of the fill.
|
|
38
|
+
*
|
|
39
|
+
* @returns {ReactNode} The rendered ProgressBar component.
|
|
40
|
+
*/
|
|
41
|
+
export declare function ProgressBar({ value, ariaLabel, modifier, ...restProps }: ProgressBarProps): ReactNode;
|
|
42
|
+
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -0,0 +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,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"}
|
|
@@ -0,0 +1,52 @@
|
|
|
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
|
+
};
|
|
10
|
+
function clamp(value) {
|
|
11
|
+
return Math.min(100, Math.max(0, value));
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Thin linear progress bar. With `value` it fills from the left up to that
|
|
15
|
+
* percentage; without it, a short segment sweeps the track to signal work
|
|
16
|
+
* whose duration is unknown. Companion of `RadialProgressBar` for layouts
|
|
17
|
+
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
18
|
+
* deserve a headline and copy under them.
|
|
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
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* // Indeterminate
|
|
26
|
+
* <ProgressBar ariaLabel="Calculating route" className="w-52" />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // Determinate
|
|
30
|
+
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* // Graded value
|
|
34
|
+
* <ProgressBar value={72} modifier="warning" ariaLabel="Match score" />
|
|
35
|
+
*
|
|
36
|
+
* @param {Object} props - The properties of the ProgressBar component.
|
|
37
|
+
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
38
|
+
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
39
|
+
* @param {'default' | 'success' | 'warning' | 'error'} [props.modifier='default'] - Color of the fill.
|
|
40
|
+
*
|
|
41
|
+
* @returns {ReactNode} The rendered ProgressBar component.
|
|
42
|
+
*/
|
|
43
|
+
export function ProgressBar({ value, ariaLabel, modifier = 'default', ...restProps }) {
|
|
44
|
+
const isDeterminate = typeof value === 'number';
|
|
45
|
+
const percent = isDeterminate ? clamp(value) : undefined;
|
|
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)}>
|
|
47
|
+
<div className={clsx('h-full rounded-full', styleMap[modifier], isDeterminate
|
|
48
|
+
? 'transition-[width] duration-300 ease-out'
|
|
49
|
+
: 'animate-progress-indeterminate w-2/5 motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-60')} style={isDeterminate ? { width: `${percent}%` } : undefined}/>
|
|
50
|
+
</div>);
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=ProgressBar.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type InputHTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
type RadioModifier = 'default' | 'pill';
|
|
2
3
|
type RadioProps = {
|
|
3
4
|
readonly label: string;
|
|
4
5
|
readonly options: Record<string, string>;
|
|
@@ -6,10 +7,16 @@ type RadioProps = {
|
|
|
6
7
|
readonly helperText?: string;
|
|
7
8
|
readonly error?: string;
|
|
8
9
|
readonly orientation?: 'vertical' | 'horizontal';
|
|
10
|
+
readonly modifier?: RadioModifier;
|
|
9
11
|
};
|
|
10
12
|
/**
|
|
11
13
|
* Radio component for rendering a group of radio buttons with labels, helper text, and error message.
|
|
12
14
|
*
|
|
15
|
+
* `pill` turns each option into a selectable chip with its own dot, for short
|
|
16
|
+
* mutually exclusive choices laid out inline (a time window, a size). The
|
|
17
|
+
* native input stays in the DOM for keyboard and assistive technology; only its
|
|
18
|
+
* visual is replaced.
|
|
19
|
+
*
|
|
13
20
|
* @component
|
|
14
21
|
* @example
|
|
15
22
|
* // Example usage of Radio component
|
|
@@ -22,16 +29,26 @@ type RadioProps = {
|
|
|
22
29
|
* orientation="vertical"
|
|
23
30
|
* />
|
|
24
31
|
*
|
|
32
|
+
* @example
|
|
33
|
+
* // Inline pills
|
|
34
|
+
* <Radio
|
|
35
|
+
* modifier="pill"
|
|
36
|
+
* label="Time window"
|
|
37
|
+
* options={{ am: '08:00–12:00', pm: '14:00–18:00' }}
|
|
38
|
+
* radio={{ name: 'window', value: 'am', onChange: handleChange }}
|
|
39
|
+
* />
|
|
40
|
+
*
|
|
25
41
|
* @param {Object} props - The properties of the Radio component.
|
|
26
42
|
* @param {string} props.label - The label text for the radio group.
|
|
27
43
|
* @param {Record<string, string>} props.options - The options for the radio buttons, where the key is the value and the value is the display text.
|
|
28
44
|
* @param {Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>} props.radio - The properties for the radio input elements.
|
|
29
45
|
* @param {string} [props.helperText] - Optional helper text to be displayed below the radio group.
|
|
30
46
|
* @param {string} [props.error] - Optional error message to be displayed below the radio group.
|
|
31
|
-
* @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - The orientation of the radio buttons.
|
|
47
|
+
* @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - The orientation of the radio buttons. Ignored by `pill`, which always wraps inline.
|
|
48
|
+
* @param {'default' | 'pill'} [props.modifier='default'] - `pill` renders each option as a selectable chip.
|
|
32
49
|
*
|
|
33
50
|
* @returns {ReactNode} The rendered Radio component.
|
|
34
51
|
*/
|
|
35
|
-
export declare function Radio({ label, options, radio, helperText, error, orientation, }: RadioProps): ReactNode;
|
|
52
|
+
export declare function Radio({ label, options, radio, helperText, error, orientation, modifier, }: RadioProps): ReactNode;
|
|
36
53
|
export {};
|
|
37
54
|
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAIxE,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAIxE,KAAK,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAExC,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAwB,EACxB,QAAoB,GACrB,EAAE,UAAU,GAAG,SAAS,CA+IxB"}
|
|
@@ -6,6 +6,11 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
|
|
|
6
6
|
/**
|
|
7
7
|
* Radio component for rendering a group of radio buttons with labels, helper text, and error message.
|
|
8
8
|
*
|
|
9
|
+
* `pill` turns each option into a selectable chip with its own dot, for short
|
|
10
|
+
* mutually exclusive choices laid out inline (a time window, a size). The
|
|
11
|
+
* native input stays in the DOM for keyboard and assistive technology; only its
|
|
12
|
+
* visual is replaced.
|
|
13
|
+
*
|
|
9
14
|
* @component
|
|
10
15
|
* @example
|
|
11
16
|
* // Example usage of Radio component
|
|
@@ -18,22 +23,33 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
|
|
|
18
23
|
* orientation="vertical"
|
|
19
24
|
* />
|
|
20
25
|
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Inline pills
|
|
28
|
+
* <Radio
|
|
29
|
+
* modifier="pill"
|
|
30
|
+
* label="Time window"
|
|
31
|
+
* options={{ am: '08:00–12:00', pm: '14:00–18:00' }}
|
|
32
|
+
* radio={{ name: 'window', value: 'am', onChange: handleChange }}
|
|
33
|
+
* />
|
|
34
|
+
*
|
|
21
35
|
* @param {Object} props - The properties of the Radio component.
|
|
22
36
|
* @param {string} props.label - The label text for the radio group.
|
|
23
37
|
* @param {Record<string, string>} props.options - The options for the radio buttons, where the key is the value and the value is the display text.
|
|
24
38
|
* @param {Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>} props.radio - The properties for the radio input elements.
|
|
25
39
|
* @param {string} [props.helperText] - Optional helper text to be displayed below the radio group.
|
|
26
40
|
* @param {string} [props.error] - Optional error message to be displayed below the radio group.
|
|
27
|
-
* @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - The orientation of the radio buttons.
|
|
41
|
+
* @param {'vertical' | 'horizontal'} [props.orientation='vertical'] - The orientation of the radio buttons. Ignored by `pill`, which always wraps inline.
|
|
42
|
+
* @param {'default' | 'pill'} [props.modifier='default'] - `pill` renders each option as a selectable chip.
|
|
28
43
|
*
|
|
29
44
|
* @returns {ReactNode} The rendered Radio component.
|
|
30
45
|
*/
|
|
31
|
-
export function Radio({ label, options, radio, helperText, error, orientation = 'vertical', }) {
|
|
46
|
+
export function Radio({ label, options, radio, helperText, error, orientation = 'vertical', modifier = 'default', }) {
|
|
32
47
|
const optionsArr = Object.entries(options);
|
|
33
48
|
const groupId = useId();
|
|
34
49
|
const descriptionId = error || helperText ? `${groupId}-description` : undefined;
|
|
35
50
|
const describedBy = [radio['aria-describedby'], descriptionId].filter(Boolean).join(' ') ||
|
|
36
51
|
undefined;
|
|
52
|
+
const isPill = modifier === 'pill';
|
|
37
53
|
const radioClasses = clsx('disabled:accent-gray-3 dark:disabled:accent-gray-2 relative h-4 w-4 cursor-pointer border-2 outline-hidden disabled:cursor-not-allowed', error && !radio.disabled
|
|
38
54
|
? 'accent-error dark:accent-error-dark'
|
|
39
55
|
: 'accent-black dark:accent-white', !radio.disabled &&
|
|
@@ -43,17 +59,46 @@ export function Radio({ label, options, radio, helperText, error, orientation =
|
|
|
43
59
|
: error
|
|
44
60
|
? 'text-error dark:text-error-dark'
|
|
45
61
|
: 'text-black dark:text-white');
|
|
62
|
+
const pillLabelClasses = (checked) => clsx('inline-flex cursor-pointer items-center gap-2 rounded-full border py-1 pr-3 pl-2 text-xs font-semibold transition-colors', 'peer-focus-visible:ring-lavender/40 peer-focus-visible:ring-2', checked
|
|
63
|
+
? 'border-lavender bg-lavender-3 text-lavender dark:border-lavender-dark dark:bg-lavender-dark-1 dark:text-lavender-dark'
|
|
64
|
+
: 'border-gray-5 dark:border-gray-1 text-black dark:text-white', !checked &&
|
|
65
|
+
!radio.disabled &&
|
|
66
|
+
'hover:border-gray-2 dark:hover:border-gray-2', error &&
|
|
67
|
+
!radio.disabled &&
|
|
68
|
+
'border-error text-error dark:border-error-dark dark:text-error-dark', radio.disabled &&
|
|
69
|
+
'border-gray-3 text-gray-3 dark:border-gray-2 dark:text-gray-2 cursor-not-allowed');
|
|
70
|
+
const pillDotClasses = (checked) => clsx('box-border h-3 w-3 shrink-0 rounded-full transition-all', checked
|
|
71
|
+
? 'border-lavender dark:border-lavender-dark border-4'
|
|
72
|
+
: 'border-gray-3 dark:border-gray-2 border');
|
|
46
73
|
return (<fieldset className="w-full max-w-full border-0 p-0" aria-describedby={descriptionId}>
|
|
47
|
-
<legend className={clsx(
|
|
74
|
+
<legend className={clsx(isPill
|
|
75
|
+
? 'pb-1.5 text-xs font-semibold'
|
|
76
|
+
: 'pb-1.5 text-sm font-normal', radio.disabled
|
|
48
77
|
? 'text-gray-3 dark:text-gray-2'
|
|
49
|
-
:
|
|
78
|
+
: isPill
|
|
79
|
+
? 'text-gray-1 dark:text-gray-2'
|
|
80
|
+
: 'text-black dark:text-white')}>
|
|
50
81
|
{label}
|
|
51
82
|
</legend>
|
|
52
|
-
<div className={clsx('flex',
|
|
83
|
+
<div className={clsx('flex', isPill
|
|
84
|
+
? 'flex-row flex-wrap gap-2'
|
|
85
|
+
: orientation === 'vertical'
|
|
86
|
+
? 'flex-col'
|
|
87
|
+
: 'flex-row gap-4')}>
|
|
53
88
|
<Each of={optionsArr} render={([value, text], index) => {
|
|
54
89
|
const id = `${groupId}-${index}`;
|
|
90
|
+
const checked = radio.value === value;
|
|
91
|
+
if (isPill) {
|
|
92
|
+
return (<div className="relative" key={value}>
|
|
93
|
+
<input {...radio} id={id} type="radio" className={clsx('peer sr-only', radio.className)} name={radio.name ?? groupId} value={value} checked={checked} aria-invalid={error ? true : radio['aria-invalid']} aria-describedby={describedBy}/>
|
|
94
|
+
<label htmlFor={id} className={pillLabelClasses(checked)}>
|
|
95
|
+
<span aria-hidden="true" className={pillDotClasses(checked)}/>
|
|
96
|
+
{text}
|
|
97
|
+
</label>
|
|
98
|
+
</div>);
|
|
99
|
+
}
|
|
55
100
|
return (<div className="flex items-center" key={value}>
|
|
56
|
-
<input {...radio} id={id} type="radio" className={radioClasses} name={radio.name ?? groupId} value={value} checked={
|
|
101
|
+
<input {...radio} id={id} type="radio" className={radioClasses} name={radio.name ?? groupId} value={value} checked={checked} aria-invalid={error ? true : radio['aria-invalid']} aria-describedby={describedBy}/>
|
|
57
102
|
<label htmlFor={id} className={labelClasses}>
|
|
58
103
|
{text}
|
|
59
104
|
</label>
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ type SelectProps = {
|
|
|
7
7
|
readonly helperText?: string;
|
|
8
8
|
readonly error?: string;
|
|
9
9
|
readonly isMutedWhenEmpty?: boolean;
|
|
10
|
+
readonly hideLabel?: boolean;
|
|
10
11
|
};
|
|
11
12
|
/**
|
|
12
13
|
* Select component for rendering a dropdown with customizable options, labels, helper text, and error messages.
|
|
@@ -31,9 +32,10 @@ type SelectProps = {
|
|
|
31
32
|
* @param {string} [props.helperText] - Optional helper text to be displayed below the select dropdown.
|
|
32
33
|
* @param {string} [props.error] - Optional error message to be displayed below the select dropdown.
|
|
33
34
|
* @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while no option is selected.
|
|
35
|
+
* @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label and its border notch. Use it when a heading outside the field already names it; pair it with `placeholder`.
|
|
34
36
|
*
|
|
35
37
|
* @returns {ReactNode} The rendered Select component.
|
|
36
38
|
*/
|
|
37
|
-
export declare function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, }: SelectProps): ReactNode;
|
|
39
|
+
export declare function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel, }: SelectProps): ReactNode;
|
|
38
40
|
export {};
|
|
39
41
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAE1B,MAAM,OAAO,CAAC;AAMf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAE1B,MAAM,OAAO,CAAC;AAMf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAiB,GAClB,EAAE,WAAW,GAAG,SAAS,CA4FzB"}
|
|
@@ -28,10 +28,11 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
|
|
|
28
28
|
* @param {string} [props.helperText] - Optional helper text to be displayed below the select dropdown.
|
|
29
29
|
* @param {string} [props.error] - Optional error message to be displayed below the select dropdown.
|
|
30
30
|
* @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while no option is selected.
|
|
31
|
+
* @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label and its border notch. Use it when a heading outside the field already names it; pair it with `placeholder`.
|
|
31
32
|
*
|
|
32
33
|
* @returns {ReactNode} The rendered Select component.
|
|
33
34
|
*/
|
|
34
|
-
export function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, }) {
|
|
35
|
+
export function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel = false, }) {
|
|
35
36
|
const generatedId = useId();
|
|
36
37
|
const id = select?.id ?? generatedId;
|
|
37
38
|
const descriptionId = error || helperText ? `${id}-description` : undefined;
|
|
@@ -41,9 +42,10 @@ export function Select({ label, options, select, placeholder, helperText, error,
|
|
|
41
42
|
? { ...select, defaultValue: '' }
|
|
42
43
|
: select;
|
|
43
44
|
const isMuted = Boolean(isMutedWhenEmpty && !selectProps.value && !selectProps.defaultValue);
|
|
44
|
-
const selectClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full appearance-none rounded-full border border-none bg-transparent px-5 text-sm font-normal outline-0 transition-all', isMuted ? 'text-gray-2 dark:text-gray-2' : 'text-black dark:text-white', select?.className);
|
|
45
|
+
const selectClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full appearance-none rounded-full border border-none bg-transparent px-5 text-sm font-normal outline-0 transition-all dark:bg-black', isMuted ? 'text-gray-2 dark:text-gray-2' : 'text-black dark:text-white', select?.className);
|
|
45
46
|
const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
|
|
46
47
|
isMuted,
|
|
48
|
+
hideLabel,
|
|
47
49
|
});
|
|
48
50
|
labelProps.htmlFor = id;
|
|
49
51
|
return (<div className="w-full max-w-full">
|
|
@@ -56,14 +58,16 @@ export function Select({ label, options, select, placeholder, helperText, error,
|
|
|
56
58
|
{text}
|
|
57
59
|
</option>)}/>
|
|
58
60
|
</select>
|
|
59
|
-
<label {
|
|
61
|
+
{hideLabel ? (<label htmlFor={id} className="sr-only">
|
|
62
|
+
{label}
|
|
63
|
+
</label>) : (<label {...labelProps}>{label}</label>)}
|
|
60
64
|
<FaSortDown aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-4', error
|
|
61
65
|
? 'text-error dark:text-error-dark'
|
|
62
66
|
: isMuted
|
|
63
67
|
? 'text-gray-2 dark:text-gray-2'
|
|
64
68
|
: 'text-black dark:text-white')}/>
|
|
65
69
|
<fieldset className={fieldsetClasses}>
|
|
66
|
-
<legend className={legendClasses}>{label}</legend>
|
|
70
|
+
{!hideLabel && <legend className={legendClasses}>{label}</legend>}
|
|
67
71
|
</fieldset>
|
|
68
72
|
</div>
|
|
69
73
|
<RenderErrorOrHelperText id={descriptionId} disabled={select?.disabled} helperText={helperText} error={error} className="pl-6"/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type SkeletonShape = 'text' | 'circle' | 'rect';
|
|
3
|
+
export type SkeletonProps = {
|
|
4
|
+
/** Silhouette of the content being loaded. Defaults to `text`. */
|
|
5
|
+
shape?: SkeletonShape;
|
|
6
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
7
|
+
/**
|
|
8
|
+
* Pulsing placeholder that holds the space of content still loading. Size it
|
|
9
|
+
* with width and height utilities through `className`; `text` already sets a
|
|
10
|
+
* line height, `circle` keeps a 1:1 ratio from the width you give it.
|
|
11
|
+
*
|
|
12
|
+
* Hidden from assistive technology on purpose: announce the loading state
|
|
13
|
+
* once on the container (`aria-busy`, a live region or a `ProgressBar`),
|
|
14
|
+
* not on every bone.
|
|
15
|
+
*
|
|
16
|
+
* @component
|
|
17
|
+
* @example
|
|
18
|
+
* <div className="flex items-center gap-3" aria-busy="true">
|
|
19
|
+
* <Skeleton shape="circle" className="w-7" />
|
|
20
|
+
* <div className="flex-1">
|
|
21
|
+
* <Skeleton className="w-3/5" />
|
|
22
|
+
* <Skeleton className="mt-2 w-2/5" />
|
|
23
|
+
* </div>
|
|
24
|
+
* </div>
|
|
25
|
+
*
|
|
26
|
+
* @param {Object} props - The properties of the Skeleton component.
|
|
27
|
+
* @param {'text' | 'circle' | 'rect'} [props.shape='text'] - Silhouette of the placeholder.
|
|
28
|
+
*
|
|
29
|
+
* @returns {ReactNode} The rendered Skeleton component.
|
|
30
|
+
*/
|
|
31
|
+
export declare function Skeleton({ shape, ...restProps }: SkeletonProps): ReactNode;
|
|
32
|
+
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B,kEAAkE;IAClE,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,GAAG,SAAS,CAY3B"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
const shapeMap = {
|
|
3
|
+
text: 'h-2.5 rounded-full',
|
|
4
|
+
circle: 'aspect-square rounded-full',
|
|
5
|
+
rect: 'rounded-lg',
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Pulsing placeholder that holds the space of content still loading. Size it
|
|
9
|
+
* with width and height utilities through `className`; `text` already sets a
|
|
10
|
+
* line height, `circle` keeps a 1:1 ratio from the width you give it.
|
|
11
|
+
*
|
|
12
|
+
* Hidden from assistive technology on purpose: announce the loading state
|
|
13
|
+
* once on the container (`aria-busy`, a live region or a `ProgressBar`),
|
|
14
|
+
* not on every bone.
|
|
15
|
+
*
|
|
16
|
+
* @component
|
|
17
|
+
* @example
|
|
18
|
+
* <div className="flex items-center gap-3" aria-busy="true">
|
|
19
|
+
* <Skeleton shape="circle" className="w-7" />
|
|
20
|
+
* <div className="flex-1">
|
|
21
|
+
* <Skeleton className="w-3/5" />
|
|
22
|
+
* <Skeleton className="mt-2 w-2/5" />
|
|
23
|
+
* </div>
|
|
24
|
+
* </div>
|
|
25
|
+
*
|
|
26
|
+
* @param {Object} props - The properties of the Skeleton component.
|
|
27
|
+
* @param {'text' | 'circle' | 'rect'} [props.shape='text'] - Silhouette of the placeholder.
|
|
28
|
+
*
|
|
29
|
+
* @returns {ReactNode} The rendered Skeleton component.
|
|
30
|
+
*/
|
|
31
|
+
export function Skeleton({ shape = 'text', ...restProps }) {
|
|
32
|
+
return (<div aria-hidden="true" {...restProps} className={clsx('bg-gray-6 dark:bg-gray-dark-1 animate-pulse', shapeMap[shape], restProps.className)}/>);
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=Skeleton.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,QAAQ,GAAkC;IAC9C,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,4BAA4B;IACpC,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,GAAG,MAAM,EACd,GAAG,SAAS,EACE;IACd,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,MAAM,CAClB,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,6CAA6C,EAC7C,QAAQ,CAAC,KAAK,CAAC,EACf,SAAS,CAAC,SAAS,CACpB,CAAC,EACF,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -12,7 +12,7 @@ export function SmallInput({ input, error, classContainer, }) {
|
|
|
12
12
|
}, [input.id]);
|
|
13
13
|
return (<div className={clsx('max-w-full', classContainer ?? 'w-[40%]')}>
|
|
14
14
|
<div className="relative h-8">
|
|
15
|
-
<input {...input} id={id} aria-invalid={error ? true : input['aria-invalid']} className={clsx('peer h-full w-full [appearance:textfield] rounded-full border border-black bg-transparent px-1 text-center text-sm font-normal text-black outline-0 transition-all', 'disabled:border-gray-3 disabled:text-gray-3 focus:text-black', 'dark:disabled:border-gray-2 dark:disabled:text-gray-2 dark:border-white dark:text-white dark:focus:text-white', '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', input.className)} placeholder=""/>
|
|
15
|
+
<input {...input} id={id} aria-invalid={error ? true : input['aria-invalid']} className={clsx('peer h-full w-full [appearance:textfield] rounded-full border border-black bg-transparent px-1 text-center text-sm font-normal text-black outline-0 transition-all dark:bg-black', 'disabled:border-gray-3 disabled:text-gray-3 focus:text-black', 'dark:disabled:border-gray-2 dark:disabled:text-gray-2 dark:border-white dark:text-white dark:focus:text-white', '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', input.className)} placeholder=""/>
|
|
16
16
|
</div>
|
|
17
17
|
</div>);
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmallInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBlD,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACE;IAChB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YACd,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAC9D;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAC3B;QAAA,CAAC,KAAK,CACJ,IAAI,KAAK,CAAC,CACV,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CACnD,SAAS,CAAC,CAAC,IAAI,CACb,
|
|
1
|
+
{"version":3,"file":"SmallInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBlD,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACE;IAChB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YACd,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAC9D;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAC3B;QAAA,CAAC,KAAK,CACJ,IAAI,KAAK,CAAC,CACV,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CACnD,SAAS,CAAC,CAAC,IAAI,CACb,kLAAkL,EAClL,8DAA8D,EAC9D,+GAA+G,EAC/G,+FAA+F,EAC/F,KAAK,CAAC,SAAS,CAChB,CAAC,CACF,WAAW,CAAC,EAAE,EAElB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -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"}
|