@devslab/dds-react 0.26.0 → 0.27.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.
- package/package.json +4 -4
- package/styles.css +1 -56
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devslab/dds-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0",
|
|
4
4
|
"description": "Accessible React primitives for the DevsLab Design System",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -99,9 +99,9 @@
|
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
101
|
"@ark-ui/react": "5.39.3",
|
|
102
|
-
"@devslab/dds-css": "0.
|
|
103
|
-
"@devslab/dds-icons": "0.
|
|
104
|
-
"@devslab/dds-tokens": "0.
|
|
102
|
+
"@devslab/dds-css": "0.27.0",
|
|
103
|
+
"@devslab/dds-icons": "0.27.0",
|
|
104
|
+
"@devslab/dds-tokens": "0.27.0",
|
|
105
105
|
"@tanstack/react-virtual": "3.14.21"
|
|
106
106
|
},
|
|
107
107
|
"peerDependencies": {
|
package/styles.css
CHANGED
|
@@ -19,59 +19,4 @@
|
|
|
19
19
|
opacity: var(--opacity);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
/*
|
|
23
|
-
.dds-date-picker-control {display:flex;align-items:stretch;gap:8px;}
|
|
24
|
-
.dds-date-picker-control input {min-width:0;}
|
|
25
|
-
.dds-date-picker-control .dds-btn {flex-shrink:0;min-width:44px;padding-inline:10px;}
|
|
26
|
-
.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
|
|
27
|
-
.dds-date-picker-content {width:320px;max-width:calc(100vw - 32px);max-height:min(calc(100dvh - 32px),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:16px;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
|
|
28
|
-
.dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;margin-bottom:12px;}
|
|
29
|
-
.dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
|
|
30
|
-
.dds-date-picker-table th {font-size:12px;font-weight:500;color:var(--dds-color-text-secondary);height:32px;}
|
|
31
|
-
.dds-date-picker-table td {padding:0;text-align:center;}
|
|
32
|
-
.dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:40px;border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
|
|
33
|
-
.dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
|
|
34
|
-
.dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
|
|
35
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
|
|
36
|
-
.dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:4px;}
|
|
37
|
-
.dds-date-picker-content :focus-visible {outline:2px solid var(--dds-color-text-brand);outline-offset:2px;}
|
|
38
|
-
.dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dds-color-border-default);}
|
|
39
|
-
|
|
40
|
-
/* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same 40px DDS input look. */
|
|
41
|
-
.dds-date-picker-control > input,.dds-date-range-box {box-sizing:border-box;flex:1;min-inline-size:0;block-size:var(--dds-space-40);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);font-family:inherit;font-size:var(--dds-typo-body-2-font-size);font-variant-numeric:tabular-nums;}
|
|
42
|
-
.dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
|
|
43
|
-
.dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
|
|
44
|
-
.dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
|
|
45
|
-
.dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
|
|
46
|
-
.dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
|
|
47
|
-
.dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
|
|
48
|
-
.dds-date-range-box[hidden] {display:none;}
|
|
49
|
-
.dds-date-range-input {flex:1;inline-size:100%;min-inline-size:0;block-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;outline:none;}
|
|
50
|
-
.dds-date-range-input:disabled {cursor:not-allowed;}
|
|
51
|
-
.dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
|
|
52
|
-
.dds-field__error {font-size:var(--dds-typo-caption-font-size);line-height:var(--dds-typo-caption-line-height);color:var(--dds-color-status-danger);}
|
|
53
|
-
@media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:44px;}}
|
|
54
|
-
|
|
55
|
-
/* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
|
|
56
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-in-range] {background:var(--dds-color-bg-brand-subtle);color:var(--dds-color-text-primary);border-radius:0;}
|
|
57
|
-
.dds-date-picker-table [data-part="table-cell-trigger"]:is([data-range-start],[data-range-end]) {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);border-radius:var(--dds-radius-sm);}
|
|
58
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 2px var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
|
|
59
|
-
.dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
|
|
60
|
-
.dds-date-picker-presets[hidden] {display:none;}
|
|
61
|
-
.dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
|
|
62
|
-
/* Days and months outside min/max read as unavailable, not as ordinary choices. */
|
|
63
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
|
|
64
|
-
|
|
65
|
-
/* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
|
|
66
|
-
.dds-date-picker-year {font-variant-numeric:tabular-nums;}
|
|
67
|
-
.dds-date-picker-table--months td {padding:var(--dds-space-4);}
|
|
68
|
-
.dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
|
|
69
|
-
|
|
70
|
-
/* Standalone Calendar shares the DatePicker view without popup positioning. */
|
|
71
|
-
.dds-calendar {display:block;}
|
|
72
|
-
.dds-date-picker--hidden > .dds-field__label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
|
|
73
|
-
.dds-date-picker--inside {position:relative;}
|
|
74
|
-
.dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:12px;inset-block-start:18px;z-index:1;pointer-events:none;}
|
|
75
|
-
.dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:2px;font-size:var(--dds-typo-caption-font-size);}
|
|
76
|
-
.dds-date-picker--inside .dds-date-picker-control input {height:56px;padding-block:20px 4px;}
|
|
77
|
-
.dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
|
|
22
|
+
/* Calendar visuals are shared by dds-css/date-picker.css (React, Solid and Vue). */
|