shared-design-system 1.113.0 → 1.115.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -374,11 +374,11 @@ export const DatePicker = React.forwardRef(({ value, onChange, placeholder, labe
|
|
|
374
374
|
boxShadow: tokens.shadow.xl,
|
|
375
375
|
border: `1px solid ${tokens.color.slate100}`,
|
|
376
376
|
animation: 'fadeIn 0.2s ease-out',
|
|
377
|
-
}, children: _jsx(Calendar, { value: dateValue, minDate: minDate, maxDate: maxDate, onChange: handleDateChange, onClose: () => setIsOpen(false) }) }) })), _jsx("style", { children: `
|
|
378
|
-
@keyframes fadeIn {
|
|
379
|
-
from { opacity: 0; transform: translateY(-10px); }
|
|
380
|
-
to { opacity: 1; transform: translateY(0); }
|
|
381
|
-
}
|
|
377
|
+
}, children: _jsx(Calendar, { value: dateValue, minDate: minDate, maxDate: maxDate, onChange: handleDateChange, onClose: () => setIsOpen(false) }) }) })), _jsx("style", { children: `
|
|
378
|
+
@keyframes fadeIn {
|
|
379
|
+
from { opacity: 0; transform: translateY(-10px); }
|
|
380
|
+
to { opacity: 1; transform: translateY(0); }
|
|
381
|
+
}
|
|
382
382
|
` }), error && (_jsx("p", { style: {
|
|
383
383
|
fontSize: '11px',
|
|
384
384
|
color: tokens.color.danger,
|
|
@@ -366,11 +366,11 @@ export const DateRangePicker = React.forwardRef(({ value, onChange, placeholder,
|
|
|
366
366
|
boxShadow: tokens.shadow.xl,
|
|
367
367
|
border: `1px solid ${tokens.color.slate100}`,
|
|
368
368
|
animation: 'fadeIn 0.2s ease-out',
|
|
369
|
-
}, children: _jsx(RangeCalendar, { value: rangeValue, minDate: minDate, maxDate: maxDate, onChange: handleRangeChange, onClose: () => { setIsOpen(false); setFocusSide(null); } }) }) })), _jsx("style", { children: `
|
|
370
|
-
@keyframes fadeIn {
|
|
371
|
-
from { opacity: 0; transform: translateY(-10px); }
|
|
372
|
-
to { opacity: 1; transform: translateY(0); }
|
|
373
|
-
}
|
|
369
|
+
}, children: _jsx(RangeCalendar, { value: rangeValue, minDate: minDate, maxDate: maxDate, onChange: handleRangeChange, onClose: () => { setIsOpen(false); setFocusSide(null); } }) }) })), _jsx("style", { children: `
|
|
370
|
+
@keyframes fadeIn {
|
|
371
|
+
from { opacity: 0; transform: translateY(-10px); }
|
|
372
|
+
to { opacity: 1; transform: translateY(0); }
|
|
373
|
+
}
|
|
374
374
|
` }), error && (_jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error }))] }));
|
|
375
375
|
});
|
|
376
376
|
DateRangePicker.displayName = 'DateRangePicker';
|
|
@@ -1,97 +1,97 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
3
|
const STYLE_ID = 'ds-global-styles';
|
|
4
|
-
const css = `
|
|
5
|
-
/* ─── Focus visible ring ─────────────────────────────────────────── */
|
|
6
|
-
.ds-button:focus-visible,
|
|
7
|
-
.ds-tab:focus-visible,
|
|
8
|
-
[role="tab"]:focus-visible {
|
|
9
|
-
outline: 2px solid ${tokens.color.primary};
|
|
10
|
-
outline-offset: 2px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/* ─── Input focus ring ───────────────────────────────────────────── */
|
|
14
|
-
.ds-input-field:focus-visible,
|
|
15
|
-
.ds-textarea-field:focus-visible,
|
|
16
|
-
.ds-native-select:focus-visible {
|
|
17
|
-
outline: 2px solid ${tokens.color.primary};
|
|
18
|
-
outline-offset: 1px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/* ─── Checkbox / Radio focus ─────────────────────────────────────── */
|
|
22
|
-
input[type="checkbox"]:focus-visible,
|
|
23
|
-
input[type="radio"]:focus-visible {
|
|
24
|
-
outline: 2px solid ${tokens.color.primary};
|
|
25
|
-
outline-offset: 2px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* ─── Shared animations ──────────────────────────────────────────── */
|
|
29
|
-
@keyframes ds-spin {
|
|
30
|
-
to { transform: rotate(360deg); }
|
|
31
|
-
}
|
|
32
|
-
@keyframes ds-fade-in {
|
|
33
|
-
from { opacity: 0; }
|
|
34
|
-
to { opacity: 1; }
|
|
35
|
-
}
|
|
36
|
-
@keyframes ds-reveal {
|
|
37
|
-
from { opacity: 0; transform: translateY(-8px); }
|
|
38
|
-
to { opacity: 1; transform: translateY(0); }
|
|
39
|
-
}
|
|
40
|
-
@keyframes ds-modal-scale {
|
|
41
|
-
from { transform: scale(0.9) translateY(20px); opacity: 0; }
|
|
42
|
-
to { transform: scale(1) translateY(0); opacity: 1; }
|
|
43
|
-
}
|
|
44
|
-
@keyframes ds-slide-down {
|
|
45
|
-
from { opacity: 0; transform: translateY(-6px) scaleY(0.97); }
|
|
46
|
-
to { opacity: 1; transform: translateY(0) scaleY(1); }
|
|
47
|
-
}
|
|
48
|
-
@keyframes ds-popover-in {
|
|
49
|
-
from { opacity: 0; transform: scale(0.9) translateY(4px); }
|
|
50
|
-
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
51
|
-
}
|
|
52
|
-
@keyframes ds-dropdown-in {
|
|
53
|
-
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
|
|
54
|
-
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
55
|
-
}
|
|
56
|
-
@keyframes ds-drawer-slide-right {
|
|
57
|
-
from { transform: translateX(100%); }
|
|
58
|
-
to { transform: translateX(0); }
|
|
59
|
-
}
|
|
60
|
-
@keyframes ds-drawer-slide-left {
|
|
61
|
-
from { transform: translateX(-100%); }
|
|
62
|
-
to { transform: translateX(0); }
|
|
63
|
-
}
|
|
64
|
-
@keyframes ds-overlay-in {
|
|
65
|
-
from { opacity: 0; }
|
|
66
|
-
to { opacity: 1; }
|
|
67
|
-
}
|
|
68
|
-
@keyframes ds-modal-in {
|
|
69
|
-
from { opacity: 0; transform: scale(0.94) translateY(8px); }
|
|
70
|
-
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
71
|
-
}
|
|
72
|
-
@keyframes ds-progress-indeterminate {
|
|
73
|
-
0% { left: -35%; right: 100%; }
|
|
74
|
-
60% { left: 100%; right: -90%; }
|
|
75
|
-
100% { left: 100%; right: -90%; }
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* ─── Smooth scroll for all DS scroll containers ─────────────────── */
|
|
79
|
-
.ds-scroll {
|
|
80
|
-
scroll-behavior: smooth;
|
|
81
|
-
scrollbar-width: thin;
|
|
82
|
-
scrollbar-color: ${tokens.color.slate200} transparent;
|
|
83
|
-
}
|
|
84
|
-
.ds-scroll::-webkit-scrollbar {
|
|
85
|
-
width: 6px;
|
|
86
|
-
height: 6px;
|
|
87
|
-
}
|
|
88
|
-
.ds-scroll::-webkit-scrollbar-track {
|
|
89
|
-
background: transparent;
|
|
90
|
-
}
|
|
91
|
-
.ds-scroll::-webkit-scrollbar-thumb {
|
|
92
|
-
background-color: ${tokens.color.slate200};
|
|
93
|
-
border-radius: 3px;
|
|
94
|
-
}
|
|
4
|
+
const css = `
|
|
5
|
+
/* ─── Focus visible ring ─────────────────────────────────────────── */
|
|
6
|
+
.ds-button:focus-visible,
|
|
7
|
+
.ds-tab:focus-visible,
|
|
8
|
+
[role="tab"]:focus-visible {
|
|
9
|
+
outline: 2px solid ${tokens.color.primary};
|
|
10
|
+
outline-offset: 2px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* ─── Input focus ring ───────────────────────────────────────────── */
|
|
14
|
+
.ds-input-field:focus-visible,
|
|
15
|
+
.ds-textarea-field:focus-visible,
|
|
16
|
+
.ds-native-select:focus-visible {
|
|
17
|
+
outline: 2px solid ${tokens.color.primary};
|
|
18
|
+
outline-offset: 1px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* ─── Checkbox / Radio focus ─────────────────────────────────────── */
|
|
22
|
+
input[type="checkbox"]:focus-visible,
|
|
23
|
+
input[type="radio"]:focus-visible {
|
|
24
|
+
outline: 2px solid ${tokens.color.primary};
|
|
25
|
+
outline-offset: 2px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* ─── Shared animations ──────────────────────────────────────────── */
|
|
29
|
+
@keyframes ds-spin {
|
|
30
|
+
to { transform: rotate(360deg); }
|
|
31
|
+
}
|
|
32
|
+
@keyframes ds-fade-in {
|
|
33
|
+
from { opacity: 0; }
|
|
34
|
+
to { opacity: 1; }
|
|
35
|
+
}
|
|
36
|
+
@keyframes ds-reveal {
|
|
37
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
38
|
+
to { opacity: 1; transform: translateY(0); }
|
|
39
|
+
}
|
|
40
|
+
@keyframes ds-modal-scale {
|
|
41
|
+
from { transform: scale(0.9) translateY(20px); opacity: 0; }
|
|
42
|
+
to { transform: scale(1) translateY(0); opacity: 1; }
|
|
43
|
+
}
|
|
44
|
+
@keyframes ds-slide-down {
|
|
45
|
+
from { opacity: 0; transform: translateY(-6px) scaleY(0.97); }
|
|
46
|
+
to { opacity: 1; transform: translateY(0) scaleY(1); }
|
|
47
|
+
}
|
|
48
|
+
@keyframes ds-popover-in {
|
|
49
|
+
from { opacity: 0; transform: scale(0.9) translateY(4px); }
|
|
50
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
51
|
+
}
|
|
52
|
+
@keyframes ds-dropdown-in {
|
|
53
|
+
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
|
|
54
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
55
|
+
}
|
|
56
|
+
@keyframes ds-drawer-slide-right {
|
|
57
|
+
from { transform: translateX(100%); }
|
|
58
|
+
to { transform: translateX(0); }
|
|
59
|
+
}
|
|
60
|
+
@keyframes ds-drawer-slide-left {
|
|
61
|
+
from { transform: translateX(-100%); }
|
|
62
|
+
to { transform: translateX(0); }
|
|
63
|
+
}
|
|
64
|
+
@keyframes ds-overlay-in {
|
|
65
|
+
from { opacity: 0; }
|
|
66
|
+
to { opacity: 1; }
|
|
67
|
+
}
|
|
68
|
+
@keyframes ds-modal-in {
|
|
69
|
+
from { opacity: 0; transform: scale(0.94) translateY(8px); }
|
|
70
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
71
|
+
}
|
|
72
|
+
@keyframes ds-progress-indeterminate {
|
|
73
|
+
0% { left: -35%; right: 100%; }
|
|
74
|
+
60% { left: 100%; right: -90%; }
|
|
75
|
+
100% { left: 100%; right: -90%; }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ─── Smooth scroll for all DS scroll containers ─────────────────── */
|
|
79
|
+
.ds-scroll {
|
|
80
|
+
scroll-behavior: smooth;
|
|
81
|
+
scrollbar-width: thin;
|
|
82
|
+
scrollbar-color: ${tokens.color.slate200} transparent;
|
|
83
|
+
}
|
|
84
|
+
.ds-scroll::-webkit-scrollbar {
|
|
85
|
+
width: 6px;
|
|
86
|
+
height: 6px;
|
|
87
|
+
}
|
|
88
|
+
.ds-scroll::-webkit-scrollbar-track {
|
|
89
|
+
background: transparent;
|
|
90
|
+
}
|
|
91
|
+
.ds-scroll::-webkit-scrollbar-thumb {
|
|
92
|
+
background-color: ${tokens.color.slate200};
|
|
93
|
+
border-radius: 3px;
|
|
94
|
+
}
|
|
95
95
|
`;
|
|
96
96
|
let injected = false;
|
|
97
97
|
function injectStyles() {
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Portal } from './Portal';
|
|
3
3
|
import { tokens } from '../tokens';
|
|
4
|
-
const OVERLAY_RESET_STYLES = `
|
|
5
|
-
.ds-overlay-root,
|
|
6
|
-
.ds-overlay-root *,
|
|
7
|
-
.ds-overlay-root *::before,
|
|
8
|
-
.ds-overlay-root *::after {
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ds-overlay-root button {
|
|
13
|
-
font: inherit;
|
|
14
|
-
letter-spacing: inherit;
|
|
15
|
-
color: inherit;
|
|
16
|
-
text-transform: none;
|
|
17
|
-
margin: 0;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ds-overlay-root p,
|
|
21
|
-
.ds-overlay-root h1,
|
|
22
|
-
.ds-overlay-root h2,
|
|
23
|
-
.ds-overlay-root h3,
|
|
24
|
-
.ds-overlay-root h4,
|
|
25
|
-
.ds-overlay-root h5,
|
|
26
|
-
.ds-overlay-root h6 {
|
|
27
|
-
margin: 0;
|
|
28
|
-
font: inherit;
|
|
29
|
-
color: inherit;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.ds-overlay-root svg {
|
|
33
|
-
display: block;
|
|
34
|
-
flex-shrink: 0;
|
|
35
|
-
}
|
|
4
|
+
const OVERLAY_RESET_STYLES = `
|
|
5
|
+
.ds-overlay-root,
|
|
6
|
+
.ds-overlay-root *,
|
|
7
|
+
.ds-overlay-root *::before,
|
|
8
|
+
.ds-overlay-root *::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ds-overlay-root button {
|
|
13
|
+
font: inherit;
|
|
14
|
+
letter-spacing: inherit;
|
|
15
|
+
color: inherit;
|
|
16
|
+
text-transform: none;
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ds-overlay-root p,
|
|
21
|
+
.ds-overlay-root h1,
|
|
22
|
+
.ds-overlay-root h2,
|
|
23
|
+
.ds-overlay-root h3,
|
|
24
|
+
.ds-overlay-root h4,
|
|
25
|
+
.ds-overlay-root h5,
|
|
26
|
+
.ds-overlay-root h6 {
|
|
27
|
+
margin: 0;
|
|
28
|
+
font: inherit;
|
|
29
|
+
color: inherit;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ds-overlay-root svg {
|
|
33
|
+
display: block;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
}
|
|
36
36
|
`;
|
|
37
37
|
export const OverlayLayer = ({ children, className = '', zIndex = 10000, pointerEvents = 'none', containerId = 'ds-portal-root', }) => {
|
|
38
38
|
return (_jsx(Portal, { containerId: containerId, children: _jsxs("div", { className: `ds-overlay-root ${className}`.trim(), style: {
|
package/package.json
CHANGED
package/src/theme.css
CHANGED
|
@@ -6,6 +6,18 @@
|
|
|
6
6
|
* @import "shared-design-system/theme.css";
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
/*
|
|
10
|
+
* Tailwind v4 no longer applies a gray default border color.
|
|
11
|
+
* Reset to neutral-2 so border/border-* classes don't render black.
|
|
12
|
+
*/
|
|
13
|
+
@layer base {
|
|
14
|
+
*,
|
|
15
|
+
::before,
|
|
16
|
+
::after {
|
|
17
|
+
border-color: transparent;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
9
21
|
@theme {
|
|
10
22
|
/* ─── Brand Colors ──────────────────────────────────────── */
|
|
11
23
|
--color-brand-50: #FFF9E5;
|