@clicoh/orion-library 1.1.0 → 1.2.0-beta.1
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 +4 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +32 -4
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- 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 +10 -5
- 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 +31 -0
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts.map +1 -0
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx +36 -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/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/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/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/index.d.ts +2 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +2 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.d.ts +65 -0
- package/dist/components/03-organisms/MapView/MapView.d.ts.map +1 -0
- package/dist/components/03-organisms/MapView/MapView.jsx +199 -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/package.json +3 -1
- package/tailwind.config.ts +10 -0
package/assets/css/base.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import 'react-toastify/dist/ReactToastify.min.css' layer(base);
|
|
2
|
+
@import 'leaflet/dist/leaflet.css' layer(base);
|
|
2
3
|
|
|
3
4
|
@import 'tailwindcss';
|
|
4
5
|
|
|
@@ -96,6 +97,18 @@
|
|
|
96
97
|
--background-image-clicoh: linear-gradient(135deg, #6a5df9, #c854e4);
|
|
97
98
|
--background-image-brand-shipping: linear-gradient(135deg, #5683dd, #8ee3c6);
|
|
98
99
|
--background-image-brand-full: linear-gradient(135deg, #cfbdb2, #cf86f4);
|
|
100
|
+
|
|
101
|
+
--animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out
|
|
102
|
+
infinite;
|
|
103
|
+
|
|
104
|
+
@keyframes progress-indeterminate {
|
|
105
|
+
from {
|
|
106
|
+
transform: translateX(-100%);
|
|
107
|
+
}
|
|
108
|
+
to {
|
|
109
|
+
transform: translateX(250%);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
99
112
|
}
|
|
100
113
|
|
|
101
114
|
/*
|
|
@@ -125,7 +138,7 @@
|
|
|
125
138
|
|
|
126
139
|
.dark {
|
|
127
140
|
--body-text-color: var(--color-white);
|
|
128
|
-
--body-bg-color: var(--color-black);
|
|
141
|
+
--body-bg-color: var(--color-black-1);
|
|
129
142
|
color-scheme: dark;
|
|
130
143
|
}
|
|
131
144
|
|
|
@@ -179,3 +192,13 @@ body {
|
|
|
179
192
|
.dark .Toastify__close-button {
|
|
180
193
|
color: var(--color-white);
|
|
181
194
|
}
|
|
195
|
+
|
|
196
|
+
.orion-map-pin {
|
|
197
|
+
background: transparent;
|
|
198
|
+
border: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.leaflet-container {
|
|
202
|
+
font: inherit;
|
|
203
|
+
z-index: 0;
|
|
204
|
+
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
type BadgeProps = {
|
|
3
|
-
modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber';
|
|
3
|
+
modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral';
|
|
4
4
|
accentLabel?: boolean;
|
|
5
|
+
icon?: ReactNode;
|
|
5
6
|
} & HTMLAttributes<HTMLSpanElement>;
|
|
6
7
|
/**
|
|
7
8
|
* Badge component used for indicating different statuses.
|
|
@@ -10,6 +11,10 @@ type BadgeProps = {
|
|
|
10
11
|
* label takes that same color, for outline pills meant to be told apart by hue
|
|
11
12
|
* alone; without it the label keeps the default text color.
|
|
12
13
|
*
|
|
14
|
+
* `neutral` is the one filled variant: a gray chip without the status dot, for
|
|
15
|
+
* informative attributes (a time window, a count) that carry no status. It is
|
|
16
|
+
* the only modifier meant to be paired with `icon`.
|
|
17
|
+
*
|
|
13
18
|
* @component
|
|
14
19
|
* @example
|
|
15
20
|
* // Default label color
|
|
@@ -19,13 +24,18 @@ type BadgeProps = {
|
|
|
19
24
|
* // Label in the modifier color
|
|
20
25
|
* <Badge modifier="info" accentLabel>Reviewing</Badge>
|
|
21
26
|
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Filled informative chip with an icon
|
|
29
|
+
* <Badge modifier="neutral" icon={<FiClock />}>08:00–12:00</Badge>
|
|
30
|
+
*
|
|
22
31
|
* @param {Object} props - The properties of the Badge component.
|
|
23
|
-
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
|
|
32
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral'} props.modifier - The modifier to determine the badge style.
|
|
24
33
|
* @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
|
|
34
|
+
* @param {ReactNode} [props.icon] - Small icon rendered before the label. Sized by the badge; pass the bare icon element.
|
|
25
35
|
* @param {ReactNode} props.children - The content to be displayed inside the badge.
|
|
26
36
|
*
|
|
27
37
|
* @returns {ReactNode} The rendered Badge component.
|
|
28
38
|
*/
|
|
29
|
-
export declare function Badge({ modifier, accentLabel, children, ...restProps }: BadgeProps): ReactNode;
|
|
39
|
+
export declare function Badge({ modifier, accentLabel, icon, children, ...restProps }: BadgeProps): ReactNode;
|
|
30
40
|
export {};
|
|
31
41
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EACJ,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EACJ,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,SAAS,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAyDpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CA+BxB"}
|
|
@@ -11,6 +11,7 @@ const styleMap = {
|
|
|
11
11
|
cyan: clsx('border-cyan before:bg-cyan dark:border-cyan-dark dark:before:bg-cyan-dark'),
|
|
12
12
|
olive: clsx('border-olive before:bg-olive dark:border-olive-dark dark:before:bg-olive-dark'),
|
|
13
13
|
amber: clsx('border-amber before:bg-amber dark:border-amber-dark dark:before:bg-amber-dark'),
|
|
14
|
+
neutral: clsx('border-gray-6 bg-gray-6 dark:border-gray-dark-1 dark:bg-gray-dark-1'),
|
|
14
15
|
};
|
|
15
16
|
/**
|
|
16
17
|
* `warning` es la unica que no usa su propio token para la etiqueta: #FFC34C
|
|
@@ -28,6 +29,7 @@ const accentLabelMap = {
|
|
|
28
29
|
cyan: clsx('text-cyan dark:text-cyan-dark'),
|
|
29
30
|
olive: clsx('text-olive dark:text-olive-dark'),
|
|
30
31
|
amber: clsx('text-amber dark:text-amber-dark'),
|
|
32
|
+
neutral: clsx('text-gray-1 dark:text-gray-2'),
|
|
31
33
|
};
|
|
32
34
|
/**
|
|
33
35
|
* Badge component used for indicating different statuses.
|
|
@@ -36,6 +38,10 @@ const accentLabelMap = {
|
|
|
36
38
|
* label takes that same color, for outline pills meant to be told apart by hue
|
|
37
39
|
* alone; without it the label keeps the default text color.
|
|
38
40
|
*
|
|
41
|
+
* `neutral` is the one filled variant: a gray chip without the status dot, for
|
|
42
|
+
* informative attributes (a time window, a count) that carry no status. It is
|
|
43
|
+
* the only modifier meant to be paired with `icon`.
|
|
44
|
+
*
|
|
39
45
|
* @component
|
|
40
46
|
* @example
|
|
41
47
|
* // Default label color
|
|
@@ -45,17 +51,28 @@ const accentLabelMap = {
|
|
|
45
51
|
* // Label in the modifier color
|
|
46
52
|
* <Badge modifier="info" accentLabel>Reviewing</Badge>
|
|
47
53
|
*
|
|
54
|
+
* @example
|
|
55
|
+
* // Filled informative chip with an icon
|
|
56
|
+
* <Badge modifier="neutral" icon={<FiClock />}>08:00–12:00</Badge>
|
|
57
|
+
*
|
|
48
58
|
* @param {Object} props - The properties of the Badge component.
|
|
49
|
-
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
|
|
59
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral'} props.modifier - The modifier to determine the badge style.
|
|
50
60
|
* @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
|
|
61
|
+
* @param {ReactNode} [props.icon] - Small icon rendered before the label. Sized by the badge; pass the bare icon element.
|
|
51
62
|
* @param {ReactNode} props.children - The content to be displayed inside the badge.
|
|
52
63
|
*
|
|
53
64
|
* @returns {ReactNode} The rendered Badge component.
|
|
54
65
|
*/
|
|
55
|
-
export function Badge({ modifier, accentLabel, children, ...restProps }) {
|
|
56
|
-
const
|
|
66
|
+
export function Badge({ modifier, accentLabel, icon, children, ...restProps }) {
|
|
67
|
+
const hasDot = modifier !== 'neutral';
|
|
68
|
+
const className = clsx('relative inline-block rounded-full border py-1 pr-2', hasDot
|
|
69
|
+
? 'pl-6 before:absolute before:start-3 before:top-[50%] before:-mt-1 before:block before:h-[6px] before:w-[6px] before:rounded-full'
|
|
70
|
+
: 'pl-2.5', styleMap[modifier], restProps.className);
|
|
57
71
|
return (<span {...restProps} className={className}>
|
|
58
|
-
<Paragraph size="chips" className={clsx('text-nowrap', accentLabel ? accentLabelMap[modifier] : 'dark:text-white')}>
|
|
72
|
+
<Paragraph size="chips" className={clsx('text-nowrap', !!icon && 'flex items-center gap-1', accentLabel ? accentLabelMap[modifier] : 'dark:text-white')}>
|
|
73
|
+
{!!icon && (<span aria-hidden="true" className="inline-flex text-[11px]">
|
|
74
|
+
{icon}
|
|
75
|
+
</span>)}
|
|
59
76
|
{children}
|
|
60
77
|
</Paragraph>
|
|
61
78
|
</span>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAmBzC,MAAM,QAAQ,GAA2C;IACvD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,QAAQ,EAAE,IAAI,CACZ,2FAA2F,CAC5F;IACD,QAAQ,EAAE,IAAI,CACZ,yEAAyE,CAC1E;IACD,MAAM,EAAE,IAAI,CACV,mFAAmF,CACpF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,OAAO,EAAE,IAAI,CACX,qEAAqE,CACtE;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,cAAc,GAA2C;IAC7D,OAAO,EAAE,IAAI,CAAC,qCAAqC,CAAC;IACpD,OAAO,EAAE,IAAI,CAAC,mCAAmC,CAAC;IAClD,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC,+BAA+B,CAAC;IAC3C,QAAQ,EAAE,IAAI,CAAC,uCAAuC,CAAC;IACvD,QAAQ,EAAE,IAAI,CAAC,8BAA8B,CAAC;IAC9C,MAAM,EAAE,IAAI,CAAC,mCAAmC,CAAC;IACjD,IAAI,EAAE,IAAI,CAAC,+BAA+B,CAAC;IAC3C,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;IAC9C,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;IAC9C,OAAO,EAAE,IAAI,CAAC,8BAA8B,CAAC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,MAAM,GAAG,QAAQ,KAAK,SAAS,CAAC;IAEtC,MAAM,SAAS,GAAG,IAAI,CACpB,qDAAqD,EACrD,MAAM;QACJ,CAAC,CAAC,kIAAkI;QACpI,CAAC,CAAC,QAAQ,EACZ,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CACxC;MAAA,CAAC,SAAS,CACR,IAAI,CAAC,OAAO,CACZ,SAAS,CAAC,CAAC,IAAI,CACb,aAAa,EACb,CAAC,CAAC,IAAI,IAAI,yBAAyB,EACnC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAC3D,CAAC,CAEF;QAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,yBAAyB,CAC1D;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export type ButtonProps = {
|
|
3
3
|
modifier?: ButtonsVariants;
|
|
4
|
+
size?: ButtonSize;
|
|
4
5
|
iconL?: ReactNode;
|
|
5
6
|
iconR?: ReactNode;
|
|
6
7
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
7
8
|
export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
|
|
9
|
+
export type ButtonSize = 'md' | 'field' | 'sm';
|
|
8
10
|
/**
|
|
9
11
|
* Represents a button component with different modifiers.
|
|
10
12
|
*
|
|
@@ -15,6 +17,7 @@ export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
|
|
|
15
17
|
*
|
|
16
18
|
* @param {Object} props - The properties of the Button component.
|
|
17
19
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
20
|
+
* @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.
|
|
18
21
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
19
22
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
20
23
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -22,5 +25,5 @@ export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
|
|
|
22
25
|
*
|
|
23
26
|
* @returns {ReactNode} The rendered Button component.
|
|
24
27
|
*/
|
|
25
|
-
export declare function Button({ modifier, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
28
|
+
export declare function Button({ modifier, size, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
26
29
|
//# 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,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;
|
|
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;AA6E/C;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAsB,EACtB,IAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAsBzB"}
|
|
@@ -1,4 +1,30 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
+
const sizeMap = {
|
|
3
|
+
md: {
|
|
4
|
+
base: 'py-[10px] text-sm',
|
|
5
|
+
padL: 'pl-6',
|
|
6
|
+
padR: 'pr-6',
|
|
7
|
+
iconPadL: 'pl-4',
|
|
8
|
+
iconPadR: 'pr-4',
|
|
9
|
+
icon: 'text-base',
|
|
10
|
+
},
|
|
11
|
+
field: {
|
|
12
|
+
base: 'py-1.5 text-sm',
|
|
13
|
+
padL: 'pl-5',
|
|
14
|
+
padR: 'pr-5',
|
|
15
|
+
iconPadL: 'pl-4',
|
|
16
|
+
iconPadR: 'pr-4',
|
|
17
|
+
icon: 'text-base',
|
|
18
|
+
},
|
|
19
|
+
sm: {
|
|
20
|
+
base: 'py-1 text-xs',
|
|
21
|
+
padL: 'pl-4',
|
|
22
|
+
padR: 'pr-4',
|
|
23
|
+
iconPadL: 'pl-3',
|
|
24
|
+
iconPadR: 'pr-3',
|
|
25
|
+
icon: 'text-sm',
|
|
26
|
+
},
|
|
27
|
+
};
|
|
2
28
|
const styleMap = {
|
|
3
29
|
principal: clsx('text-white not-disabled:hover:text-black not-disabled:active:text-black disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'disabled:before:bg-gray-3 not-disabled:active:before:bg-gray-6 before:bg-black not-disabled:hover:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-black', 'disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh not-disabled:hover:after:bg-clicoh not-disabled:active:after:bg-clicoh after:bg-black', 'dark:not-disabled:active:text-gray-6 dark:text-black dark:not-disabled:hover:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-black', 'dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 dark:before:bg-white dark:not-disabled:hover:before:bg-black dark:not-disabled:active:before:bg-black', 'dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:hover:after:bg-clicoh dark:not-disabled:active:after:bg-clicoh dark:after:bg-white'),
|
|
4
30
|
second: clsx('text-gray-1 disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-gray-1 not-disabled:active:text-gray-5 not-disabled:hover:text-white', 'disable:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-gray-6 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black', 'after:bg-gray-1 disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-gray-1 not-disabled:hover:after:bg-black not-disabled:active:after:bg-black', '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-6 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-white dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:disabled:after:bg-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:active:after:bg-gray-6 dark:after:bg-white dark:not-disabled:hover:after:bg-white'),
|
|
@@ -15,6 +41,7 @@ const styleMap = {
|
|
|
15
41
|
*
|
|
16
42
|
* @param {Object} props - The properties of the Button component.
|
|
17
43
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
44
|
+
* @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.
|
|
18
45
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
19
46
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
20
47
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -22,12 +49,13 @@ const styleMap = {
|
|
|
22
49
|
*
|
|
23
50
|
* @returns {ReactNode} The rendered Button component.
|
|
24
51
|
*/
|
|
25
|
-
export function Button({ modifier = 'principal', iconL, iconR, children, ...restProps }) {
|
|
26
|
-
const
|
|
52
|
+
export function Button({ modifier = 'principal', size = 'md', iconL, iconR, children, ...restProps }) {
|
|
53
|
+
const sizing = sizeMap[size];
|
|
54
|
+
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, styleMap[modifier], restProps.className);
|
|
27
55
|
return (<button {...restProps} className={className}>
|
|
28
|
-
{!!iconL && <span className=
|
|
56
|
+
{!!iconL && <span className={clsx('pr-2', sizing.icon)}>{iconL}</span>}
|
|
29
57
|
<span>{children}</span>
|
|
30
|
-
{!!iconR && <span className=
|
|
58
|
+
{!!iconR && <span className={clsx('pl-2', sizing.icon)}>{iconR}</span>}
|
|
31
59
|
</button>);
|
|
32
60
|
}
|
|
33
61
|
//# sourceMappingURL=Button.jsx.map
|
|
@@ -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":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAaxB,MAAM,OAAO,GAUT;IACF,EAAE,EAAE;QACF,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,IAAI,EAAE,WAAW;KAClB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,IAAI,EAAE,WAAW;KAClB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,IAAI,EAAE,SAAS;KAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAoC;IAChD,SAAS,EAAE,IAAI,CACb,6IAA6I,EAC7I,wKAAwK,EACxK,qKAAqK,EACrK,uKAAuK,EACvK,iMAAiM,EACjM,8LAA8L,CAC/L;IACD,MAAM,EAAE,IAAI,CACV,iJAAiJ,EACjJ,sKAAsK,EACtK,oKAAoK,EACpK,wKAAwK,EACxK,gMAAgM,EAChM,6LAA6L,CAC9L;IACD,IAAI,EAAE,IAAI,CACR,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,qCAAqC,EACrC,oCAAoC,EACpC,mEAAmE,EACnE,0CAA0C,EAC1C,yCAAyC,CAC1C;IACD,MAAM,EAAE,IAAI,CACV,+IAA+I,EAC/I,uKAAuK,EACvK,yMAAyM,EACzM,wKAAwK,EACxK,gMAAgM,EAChM,6OAA6O,CAC9O;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,WAAW,EACtB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACA;IACZ,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,IAAI,CACpB,6EAA6E,EAC7E,2DAA2D,EAC3D,sGAAsG,EACtG,qGAAqG,EACrG,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACrC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACrC,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAC1C;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CACtE;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CACxE;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -9,6 +9,8 @@ type InputProps = {
|
|
|
9
9
|
iconL?: ReactNode;
|
|
10
10
|
iconR?: ReactNode;
|
|
11
11
|
isMutedWhenEmpty?: boolean;
|
|
12
|
+
hideLabel?: boolean;
|
|
13
|
+
placeholder?: string;
|
|
12
14
|
showPasswordAriaLabel?: string;
|
|
13
15
|
hidePasswordAriaLabel?: string;
|
|
14
16
|
};
|
|
@@ -35,9 +37,11 @@ type InputProps = {
|
|
|
35
37
|
* @param {ReactNode} [props.iconL] - Optional icon to be displayed to the left of the input field.
|
|
36
38
|
* @param {ReactNode} [props.iconR] - Optional icon to be displayed to the right of the input field.
|
|
37
39
|
* @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
|
|
40
|
+
* @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.
|
|
41
|
+
* @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`; otherwise the floating label takes that place.
|
|
38
42
|
*
|
|
39
43
|
* @returns {ReactNode} The rendered Input component.
|
|
40
44
|
*/
|
|
41
|
-
export declare function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
|
|
45
|
+
export declare function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, hideLabel, placeholder, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
|
|
42
46
|
export {};
|
|
43
47
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -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,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF
|
|
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,CAyGxB"}
|
|
@@ -27,10 +27,12 @@ import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
|
|
|
27
27
|
* @param {ReactNode} [props.iconL] - Optional icon to be displayed to the left of the input field.
|
|
28
28
|
* @param {ReactNode} [props.iconR] - Optional icon to be displayed to the right of the input field.
|
|
29
29
|
* @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
|
|
30
|
+
* @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.
|
|
31
|
+
* @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`; otherwise the floating label takes that place.
|
|
30
32
|
*
|
|
31
33
|
* @returns {ReactNode} The rendered Input component.
|
|
32
34
|
*/
|
|
33
|
-
export function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
|
|
35
|
+
export function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, hideLabel = false, placeholder, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
|
|
34
36
|
const generatedId = useId();
|
|
35
37
|
const [showPassword, setShowPassword] = useState(false);
|
|
36
38
|
const id = input.id ?? generatedId;
|
|
@@ -39,9 +41,10 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
|
|
|
39
41
|
undefined;
|
|
40
42
|
const isPassword = input.type === 'password';
|
|
41
43
|
const effectiveType = isPassword && showPassword ? 'text' : input.type;
|
|
42
|
-
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black dark:text-white dark:focus:text-white', input.className);
|
|
44
|
+
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black dark:bg-black dark:text-white dark:focus:text-white', hideLabel && 'placeholder:text-gray-2 dark:placeholder:text-gray-2', input.className);
|
|
43
45
|
const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
|
|
44
46
|
isMutedWhenEmpty,
|
|
47
|
+
hideLabel,
|
|
45
48
|
});
|
|
46
49
|
labelProps.htmlFor = id;
|
|
47
50
|
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
|
|
@@ -51,10 +54,12 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
|
|
|
51
54
|
</button>) : (iconR);
|
|
52
55
|
return (<div className="w-full max-w-full">
|
|
53
56
|
<div className="relative h-9">
|
|
54
|
-
<input {...input} id={id} type={effectiveType} className={inputClasses} placeholder=
|
|
55
|
-
<label {
|
|
57
|
+
<input {...input} id={id} type={effectiveType} className={inputClasses} placeholder={hideLabel ? placeholder || ' ' : ' '} aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
|
|
58
|
+
{hideLabel ? (<label htmlFor={id} className="sr-only">
|
|
59
|
+
{label}
|
|
60
|
+
</label>) : (<label {...labelProps}>{label}</label>)}
|
|
56
61
|
<fieldset aria-hidden="true" className={fieldsetClasses}>
|
|
57
|
-
<legend className={legendClasses}>{label}</legend>
|
|
62
|
+
{!hideLabel && <legend className={legendClasses}>{label}</legend>}
|
|
58
63
|
</fieldset>
|
|
59
64
|
{!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-3 left-1', error
|
|
60
65
|
? 'text-error dark:text-error-dark'
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
type BorderOptions = {
|
|
2
2
|
isMuted?: boolean;
|
|
3
3
|
isMutedWhenEmpty?: boolean;
|
|
4
|
+
hideLabel?: boolean;
|
|
4
5
|
};
|
|
5
|
-
export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty }?: BorderOptions) => {
|
|
6
|
+
export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty, hideLabel }?: BorderOptions) => {
|
|
6
7
|
labelProps: {
|
|
7
8
|
htmlFor?: string;
|
|
8
9
|
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;
|
|
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;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,MAAM,6CAC4B,aAAa;;kBAEzB,MAAM;mBAAa,MAAM;;;;CAsCxD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
-
export const generateBorder = (error, { isMuted, isMutedWhenEmpty } = {}) => {
|
|
2
|
+
export const generateBorder = (error, { isMuted, isMutedWhenEmpty, hideLabel } = {}) => {
|
|
3
3
|
const labelProps = {
|
|
4
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
|
|
5
5
|
? 'text-error dark:text-error-dark'
|
|
@@ -9,7 +9,7 @@ export const generateBorder = (error, { isMuted, isMutedWhenEmpty } = {}) => {
|
|
|
9
9
|
isMutedWhenEmpty &&
|
|
10
10
|
'peer-placeholder-shown:text-gray-2 dark:peer-placeholder-shown:text-gray-2'),
|
|
11
11
|
};
|
|
12
|
-
const fieldsetClasses = clsx('pointer-events-none absolute
|
|
12
|
+
const fieldsetClasses = clsx('pointer-events-none absolute left-0 w-full rounded-full border px-4', hideLabel ? 'top-0 h-full' : '-top-2 h-[calc(100%+.5rem)]', 'peer-disabled:border-gray-3 dark:peer-disabled:border-gray-2 peer-not-empty:*:max-w-full peer-not-empty:*:px-1 peer-placeholder-shown:*:max-w-0 peer-placeholder-shown:*:px-0 peer-autofill:max-w-full peer-autofill:*:px-1 peer-focus:*:max-w-full peer-focus:*:px-1', error
|
|
13
13
|
? 'border-error dark:border-error-dark'
|
|
14
14
|
: isMuted
|
|
15
15
|
? 'border-gray-3 dark:border-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;AAQxB,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAc,EACd,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,KAAoB,EAAE,EAC5D,EAAE;IACF,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,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"}
|
|
@@ -56,7 +56,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
|
|
|
56
56
|
const optionRefs = useRef([]);
|
|
57
57
|
const listboxId = `${id}-listbox`;
|
|
58
58
|
const feedbackId = `${id}-feedback`;
|
|
59
|
-
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 pointer-events-none h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all select-none focus:text-black dark:text-white dark:focus:text-white');
|
|
59
|
+
const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 pointer-events-none h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all select-none focus:text-black dark:bg-black dark:text-white dark:focus:text-white');
|
|
60
60
|
const isMuted = Boolean(isMutedWhenEmpty) && !selectedOptions.length;
|
|
61
61
|
const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
|
|
62
62
|
isMuted,
|
|
@@ -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,31 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ProgressBarProps = {
|
|
3
|
+
/** Progress between 0 and 100. Omit it for an indeterminate bar. */
|
|
4
|
+
value?: number;
|
|
5
|
+
/** Accessible name of the operation being tracked. */
|
|
6
|
+
ariaLabel: string;
|
|
7
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
|
|
8
|
+
/**
|
|
9
|
+
* Thin linear progress bar. With `value` it fills from the left up to that
|
|
10
|
+
* percentage; without it, a short segment sweeps the track to signal work
|
|
11
|
+
* whose duration is unknown. Companion of `RadialProgressBar` for layouts
|
|
12
|
+
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
13
|
+
* deserve a headline and copy under them.
|
|
14
|
+
*
|
|
15
|
+
* @component
|
|
16
|
+
* @example
|
|
17
|
+
* // Indeterminate
|
|
18
|
+
* <ProgressBar ariaLabel="Calculating route" className="w-52" />
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // Determinate
|
|
22
|
+
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
23
|
+
*
|
|
24
|
+
* @param {Object} props - The properties of the ProgressBar component.
|
|
25
|
+
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
26
|
+
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
27
|
+
*
|
|
28
|
+
* @returns {ReactNode} The rendered ProgressBar component.
|
|
29
|
+
*/
|
|
30
|
+
export declare function ProgressBar({ value, ariaLabel, ...restProps }: ProgressBarProps): ReactNode;
|
|
31
|
+
//# 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,gBAAgB,GAAG;IAC7B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAM9D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CA4B9B"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
function clamp(value) {
|
|
3
|
+
return Math.min(100, Math.max(0, value));
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Thin linear progress bar. With `value` it fills from the left up to that
|
|
7
|
+
* percentage; without it, a short segment sweeps the track to signal work
|
|
8
|
+
* whose duration is unknown. Companion of `RadialProgressBar` for layouts
|
|
9
|
+
* where a line reads better than a ring, and of `Spinner` for waits that
|
|
10
|
+
* deserve a headline and copy under them.
|
|
11
|
+
*
|
|
12
|
+
* @component
|
|
13
|
+
* @example
|
|
14
|
+
* // Indeterminate
|
|
15
|
+
* <ProgressBar ariaLabel="Calculating route" className="w-52" />
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Determinate
|
|
19
|
+
* <ProgressBar value={64} ariaLabel="Upload" />
|
|
20
|
+
*
|
|
21
|
+
* @param {Object} props - The properties of the ProgressBar component.
|
|
22
|
+
* @param {number} [props.value] - Progress between 0 and 100. Omit for indeterminate.
|
|
23
|
+
* @param {string} props.ariaLabel - Accessible name for the progress bar.
|
|
24
|
+
*
|
|
25
|
+
* @returns {ReactNode} The rendered ProgressBar component.
|
|
26
|
+
*/
|
|
27
|
+
export function ProgressBar({ value, ariaLabel, ...restProps }) {
|
|
28
|
+
const isDeterminate = typeof value === 'number';
|
|
29
|
+
const percent = isDeterminate ? clamp(value) : undefined;
|
|
30
|
+
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('bg-lavender dark:bg-lavender-dark h-full rounded-full', isDeterminate
|
|
32
|
+
? 'transition-[width] duration-300 ease-out'
|
|
33
|
+
: 'animate-progress-indeterminate w-2/5 motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-60')} style={isDeterminate ? { width: `${percent}%` } : undefined}/>
|
|
34
|
+
</div>);
|
|
35
|
+
}
|
|
36
|
+
//# 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;AAUxB,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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,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,uDAAuD,EACvD,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"}
|