@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.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.
Files changed (98) hide show
  1. package/README.md +78 -5
  2. package/dist/audit.json +271915 -0
  3. package/dist/components.d.ts +75 -18
  4. package/dist/components.js +15 -3
  5. package/dist/css/breakpoints.css +7 -0
  6. package/dist/css/components/avatar.css +12 -0
  7. package/dist/css/components/badge.css +130 -1
  8. package/dist/css/components/box.css +58 -0
  9. package/dist/css/components/button.css +17 -17
  10. package/dist/css/components/center.css +17 -0
  11. package/dist/css/components/checkbox.css +1 -1
  12. package/dist/css/components/combobox.css +57 -6
  13. package/dist/css/components/container.css +16 -0
  14. package/dist/css/components/countdown.css +5 -0
  15. package/dist/css/components/dialog.css +3 -2
  16. package/dist/css/components/drawer.css +102 -6
  17. package/dist/css/components/empty-state.css +164 -0
  18. package/dist/css/components/grid.css +32 -0
  19. package/dist/css/components/kbd.css +1 -1
  20. package/dist/css/components/menu.css +4 -4
  21. package/dist/css/components/nav-list.css +165 -0
  22. package/dist/css/components/radio-group.css +2 -2
  23. package/dist/css/components/select.css +1 -1
  24. package/dist/css/components/spacer.css +13 -0
  25. package/dist/css/components/stack.css +39 -0
  26. package/dist/css/components/steps.css +109 -28
  27. package/dist/css/components/table.css +276 -2
  28. package/dist/css/components/timeline.css +64 -1
  29. package/dist/css/components/tree-view.css +2 -2
  30. package/dist/css/index.css +2220 -279
  31. package/dist/css/index.d.ts +2 -0
  32. package/dist/css/tokens.css +9 -0
  33. package/dist/design-system.d.ts.map +1 -1
  34. package/dist/design-system.js +15 -8
  35. package/dist/design-system.js.map +1 -1
  36. package/dist/lynx/components/avatar.css +12 -0
  37. package/dist/lynx/components/badge.css +56 -1
  38. package/dist/lynx/components/box.css +54 -0
  39. package/dist/lynx/components/breadcrumbs.css +10 -10
  40. package/dist/lynx/components/button.css +19 -6
  41. package/dist/lynx/components/card.css +5 -5
  42. package/dist/lynx/components/carousel.css +4 -4
  43. package/dist/lynx/components/center.css +13 -0
  44. package/dist/lynx/components/chat.css +12 -11
  45. package/dist/lynx/components/checkbox.css +4 -5
  46. package/dist/lynx/components/combobox.css +49 -6
  47. package/dist/lynx/components/container.css +11 -0
  48. package/dist/lynx/components/countdown.css +5 -0
  49. package/dist/lynx/components/dialog.css +22 -14
  50. package/dist/lynx/components/diff.css +6 -4
  51. package/dist/lynx/components/drawer.css +30 -6
  52. package/dist/lynx/components/empty-state.css +342 -0
  53. package/dist/lynx/components/file-upload.css +10 -10
  54. package/dist/lynx/components/grid.css +28 -0
  55. package/dist/lynx/components/indicator.css +24 -24
  56. package/dist/lynx/components/kbd.css +1 -1
  57. package/dist/lynx/components/menu.css +14 -9
  58. package/dist/lynx/components/nav-list.css +302 -0
  59. package/dist/lynx/components/number-input.css +4 -2
  60. package/dist/lynx/components/pagination.css +7 -6
  61. package/dist/lynx/components/popover.css +12 -6
  62. package/dist/lynx/components/progress.css +1 -1
  63. package/dist/lynx/components/radial-progress.css +5 -5
  64. package/dist/lynx/components/radio-group.css +2 -2
  65. package/dist/lynx/components/rating-group.css +5 -5
  66. package/dist/lynx/components/select.css +18 -12
  67. package/dist/lynx/components/slider.css +6 -5
  68. package/dist/lynx/components/spacer.css +11 -0
  69. package/dist/lynx/components/stack.css +35 -0
  70. package/dist/lynx/components/stats.css +10 -10
  71. package/dist/lynx/components/steps.css +117 -77
  72. package/dist/lynx/components/switch.css +5 -5
  73. package/dist/lynx/components/table.css +18 -12
  74. package/dist/lynx/components/tabs.css +5 -5
  75. package/dist/lynx/components/timeline.css +14 -5
  76. package/dist/lynx/components/toast.css +4 -4
  77. package/dist/lynx/components/tooltip.css +10 -5
  78. package/dist/lynx/components/tree-view.css +3 -3
  79. package/dist/lynx/index.css +1402 -450
  80. package/dist/lynx/manifest.json +354 -37
  81. package/dist/lynx/tokens.css +36 -0
  82. package/dist/manifest.json +351 -34
  83. package/dist/recipes.d.ts +17 -10
  84. package/dist/recipes.d.ts.map +1 -1
  85. package/dist/recipes.js +866 -153
  86. package/dist/recipes.js.map +1 -1
  87. package/dist/register.d.ts +89 -14
  88. package/dist/report.json +2815 -408
  89. package/dist/tokens.d.ts +22 -11
  90. package/dist/tokens.d.ts.map +1 -1
  91. package/dist/tokens.js +57 -7
  92. package/dist/tokens.js.map +1 -1
  93. package/package.json +28 -10
  94. package/src/design-system.ts +15 -8
  95. package/src/recipes.ts +880 -157
  96. package/src/tokens.ts +54 -7
  97. package/dist/css/components/native-select.css +0 -128
  98. package/dist/lynx/components/native-select.css +0 -130
@@ -3,23 +3,23 @@
3
3
  }
4
4
 
5
5
  .zx-root .zx-switch__root {
6
- --switch-ink: #07070899;
6
+ --switch-ink: #18181b99;
7
7
  }
8
8
 
9
9
  .zx-root.zx-theme-dark .zx-switch__root {
10
- --switch-ink: #767d8099;
10
+ --switch-ink: #ecf9ff99;
11
11
  }
12
12
 
13
13
  .zx-root.zx-theme-dim .zx-switch__root {
14
- --switch-ink: #57656a99;
14
+ --switch-ink: #b2ccd699;
15
15
  }
16
16
 
17
17
  .zx-root.zx-theme-nord .zx-switch__root {
18
- --switch-ink: #12151b99;
18
+ --switch-ink: #2e344099;
19
19
  }
20
20
 
21
21
  .zx-root.zx-theme-sunset .zx-switch__root {
22
- --switch-ink: #4d5b6799;
22
+ --switch-ink: #9fb9d099;
23
23
  }
24
24
 
25
25
  .zx-switch__root {
@@ -1,4 +1,5 @@
1
1
  .zx-table__root {
2
+ --table-cell-align: start;
2
3
  --table-accent: var(--color-base-content);
3
4
  --table-pad-inline: var(--space-md);
4
5
  --table-font: var(--text-sm);
@@ -42,23 +43,23 @@
42
43
  }
43
44
 
44
45
  .zx-root .zx-table__caption {
45
- color: #07070899;
46
+ color: #18181b99;
46
47
  }
47
48
 
48
49
  .zx-root.zx-theme-dark .zx-table__caption {
49
- color: #767d8099;
50
+ color: #ecf9ff99;
50
51
  }
51
52
 
52
53
  .zx-root.zx-theme-dim .zx-table__caption {
53
- color: #57656a99;
54
+ color: #b2ccd699;
54
55
  }
55
56
 
56
57
  .zx-root.zx-theme-nord .zx-table__caption {
57
- color: #12151b99;
58
+ color: #2e344099;
58
59
  }
59
60
 
60
61
  .zx-root.zx-theme-sunset .zx-table__caption {
61
- color: #4d5b6799;
62
+ color: #9fb9d099;
62
63
  }
63
64
 
64
65
  .zx-table__foot {
@@ -66,23 +67,23 @@
66
67
  }
67
68
 
68
69
  .zx-root .zx-table__foot {
69
- color: #07070899;
70
+ color: #18181b99;
70
71
  }
71
72
 
72
73
  .zx-root.zx-theme-dark .zx-table__foot {
73
- color: #767d8099;
74
+ color: #ecf9ff99;
74
75
  }
75
76
 
76
77
  .zx-root.zx-theme-dim .zx-table__foot {
77
- color: #57656a99;
78
+ color: #b2ccd699;
78
79
  }
79
80
 
80
81
  .zx-root.zx-theme-nord .zx-table__foot {
81
- color: #12151b99;
82
+ color: #2e344099;
82
83
  }
83
84
 
84
85
  .zx-root.zx-theme-sunset .zx-table__foot {
85
- color: #4d5b6799;
86
+ color: #9fb9d099;
86
87
  }
87
88
 
88
89
  .zx-table__row {
@@ -95,7 +96,7 @@
95
96
 
96
97
  .zx-table__header-cell {
97
98
  padding: var(--space-sm) var(--table-pad-inline);
98
- text-align: start;
99
+ text-align: var(--table-cell-align);
99
100
  font-weight: var(--weight-semibold);
100
101
  font-size: var(--text-xs);
101
102
  }
@@ -118,7 +119,7 @@
118
119
 
119
120
  .zx-table__cell {
120
121
  padding: var(--space-sm) var(--table-pad-inline);
121
- text-align: start;
122
+ text-align: var(--table-cell-align);
122
123
  }
123
124
 
124
125
  .zx-table__cell.zx-a-size-xs {
@@ -137,6 +138,11 @@
137
138
  padding: var(--space-lg) var(--table-pad-inline);
138
139
  }
139
140
 
141
+ .zx-table__cell-label {
142
+ font-weight: var(--weight-semibold);
143
+ font-size: var(--text-xs);
144
+ }
145
+
140
146
  .zx-root .zx-table__root.zx-a-color-primary {
141
147
  --table-accent: #3f2bcb;
142
148
  }
@@ -25,23 +25,23 @@
25
25
  }
26
26
 
27
27
  .zx-root .zx-tabs__tab {
28
- color: #07070899;
28
+ color: #18181b99;
29
29
  }
30
30
 
31
31
  .zx-root.zx-theme-dark .zx-tabs__tab {
32
- color: #767d8099;
32
+ color: #ecf9ff99;
33
33
  }
34
34
 
35
35
  .zx-root.zx-theme-dim .zx-tabs__tab {
36
- color: #57656a99;
36
+ color: #b2ccd699;
37
37
  }
38
38
 
39
39
  .zx-root.zx-theme-nord .zx-tabs__tab {
40
- color: #12151b99;
40
+ color: #2e344099;
41
41
  }
42
42
 
43
43
  .zx-root.zx-theme-sunset .zx-tabs__tab {
44
- color: #4d5b6799;
44
+ color: #9fb9d099;
45
45
  }
46
46
 
47
47
  .zx-tabs__tab.zx-s-active {
@@ -1,5 +1,6 @@
1
1
  .zx-timeline__root {
2
2
  --timeline-accent: var(--color-base-content);
3
+ --timeline-ring: var(--timeline-accent);
3
4
  }
4
5
 
5
6
  .zx-timeline__root {
@@ -36,7 +37,7 @@
36
37
  box-sizing: border-box;
37
38
  border-radius: 9999px;
38
39
  background: var(--timeline-accent);
39
- border: calc((var(--size-selector) * 3) / 2) solid var(--timeline-accent);
40
+ border: calc((var(--size-selector) * 3) / 6) solid var(--timeline-ring);
40
41
  display: flex;
41
42
  align-items: center;
42
43
  justify-content: center;
@@ -46,25 +47,25 @@
46
47
  .zx-timeline__marker.zx-a-size-xs {
47
48
  inline-size: calc(var(--size-selector) * 2);
48
49
  block-size: calc(var(--size-selector) * 2);
49
- border: calc((var(--size-selector) * 2) / 2) solid var(--timeline-accent);
50
+ border: calc((var(--size-selector) * 2) / 6) solid var(--timeline-ring);
50
51
  }
51
52
 
52
53
  .zx-timeline__marker.zx-a-size-sm {
53
54
  inline-size: calc(var(--size-selector) * 2.5);
54
55
  block-size: calc(var(--size-selector) * 2.5);
55
- border: calc((var(--size-selector) * 2.5) / 2) solid var(--timeline-accent);
56
+ border: calc((var(--size-selector) * 2.5) / 6) solid var(--timeline-ring);
56
57
  }
57
58
 
58
59
  .zx-timeline__marker.zx-a-size-lg {
59
60
  inline-size: calc(var(--size-selector) * 3.5);
60
61
  block-size: calc(var(--size-selector) * 3.5);
61
- border: calc((var(--size-selector) * 3.5) / 2) solid var(--timeline-accent);
62
+ border: calc((var(--size-selector) * 3.5) / 6) solid var(--timeline-ring);
62
63
  }
63
64
 
64
65
  .zx-timeline__marker.zx-a-size-xl {
65
66
  inline-size: calc(var(--size-selector) * 4);
66
67
  block-size: calc(var(--size-selector) * 4);
67
- border: calc((var(--size-selector) * 4) / 2) solid var(--timeline-accent);
68
+ border: calc((var(--size-selector) * 4) / 6) solid var(--timeline-ring);
68
69
  }
69
70
 
70
71
  .zx-timeline__connector {
@@ -101,34 +102,42 @@
101
102
 
102
103
  .zx-timeline__marker.zx-a-color-primary {
103
104
  --timeline-accent: var(--color-primary);
105
+ --timeline-ring: var(--color-primary-content);
104
106
  }
105
107
 
106
108
  .zx-timeline__marker.zx-a-color-secondary {
107
109
  --timeline-accent: var(--color-secondary);
110
+ --timeline-ring: var(--color-secondary-content);
108
111
  }
109
112
 
110
113
  .zx-timeline__marker.zx-a-color-accent {
111
114
  --timeline-accent: var(--color-accent);
115
+ --timeline-ring: var(--color-accent-content);
112
116
  }
113
117
 
114
118
  .zx-timeline__marker.zx-a-color-neutral {
115
119
  --timeline-accent: var(--color-neutral);
120
+ --timeline-ring: var(--color-neutral-content);
116
121
  }
117
122
 
118
123
  .zx-timeline__marker.zx-a-color-info {
119
124
  --timeline-accent: var(--color-info);
125
+ --timeline-ring: var(--color-info-content);
120
126
  }
121
127
 
122
128
  .zx-timeline__marker.zx-a-color-success {
123
129
  --timeline-accent: var(--color-success);
130
+ --timeline-ring: var(--color-success-content);
124
131
  }
125
132
 
126
133
  .zx-timeline__marker.zx-a-color-warning {
127
134
  --timeline-accent: var(--color-warning);
135
+ --timeline-ring: var(--color-warning-content);
128
136
  }
129
137
 
130
138
  .zx-timeline__marker.zx-a-color-error {
131
139
  --timeline-accent: var(--color-error);
140
+ --timeline-ring: var(--color-error-content);
132
141
  }
133
142
 
134
143
  .zx-timeline__content.zx-a-size-xs {
@@ -20,7 +20,7 @@
20
20
 
21
21
  .zx-toast__viewport.zx-p-top-start {
22
22
  top: 0;
23
- inset-inline-start: 0;
23
+ left: 0;
24
24
  }
25
25
 
26
26
  .zx-toast__viewport.zx-p-top {
@@ -31,13 +31,13 @@
31
31
 
32
32
  .zx-toast__viewport.zx-p-top-end {
33
33
  top: 0;
34
- inset-inline-end: 0;
34
+ right: 0;
35
35
  }
36
36
 
37
37
  .zx-toast__viewport.zx-p-bottom-start {
38
38
  bottom: 0;
39
- inset-inline-start: 0;
40
39
  flex-direction: column-reverse;
40
+ left: 0;
41
41
  }
42
42
 
43
43
  .zx-toast__viewport.zx-p-bottom {
@@ -49,8 +49,8 @@
49
49
 
50
50
  .zx-toast__viewport.zx-p-bottom-end {
51
51
  bottom: 0;
52
- inset-inline-end: 0;
53
52
  flex-direction: column-reverse;
53
+ right: 0;
54
54
  }
55
55
 
56
56
  .zx-toast__root {
@@ -5,7 +5,6 @@
5
5
  justify-content: center;
6
6
  gap: 0.5em;
7
7
  height: calc(var(--size-field) * 12);
8
- padding-inline: calc(var(--size-field) * 4);
9
8
  font-size: var(--text-sm);
10
9
  font-weight: var(--weight-semibold);
11
10
  color: var(--color-base-content);
@@ -15,6 +14,8 @@
15
14
  box-shadow: var(--shadow-xs);
16
15
  cursor: help;
17
16
  transition: background var(--duration-normal) var(--ease-standard);
17
+ padding-left: calc(var(--size-field) * 4);
18
+ padding-right: calc(var(--size-field) * 4);
18
19
  }
19
20
 
20
21
  .zx-tooltip__trigger.zx-f-disabled {
@@ -140,24 +141,28 @@
140
141
 
141
142
  .zx-tooltip__trigger.zx-a-size-xs {
142
143
  height: calc(var(--size-field) * 8);
143
- padding-inline: calc(var(--size-field) * 2);
144
144
  font-size: var(--text-xs);
145
+ padding-left: calc(var(--size-field) * 2);
146
+ padding-right: calc(var(--size-field) * 2);
145
147
  }
146
148
 
147
149
  .zx-tooltip__trigger.zx-a-size-sm {
148
150
  height: calc(var(--size-field) * 10);
149
- padding-inline: calc(var(--size-field) * 3);
150
151
  font-size: var(--text-sm);
152
+ padding-left: calc(var(--size-field) * 3);
153
+ padding-right: calc(var(--size-field) * 3);
151
154
  }
152
155
 
153
156
  .zx-tooltip__trigger.zx-a-size-lg {
154
157
  height: calc(var(--size-field) * 14);
155
- padding-inline: calc(var(--size-field) * 5);
156
158
  font-size: var(--text-md);
159
+ padding-left: calc(var(--size-field) * 5);
160
+ padding-right: calc(var(--size-field) * 5);
157
161
  }
158
162
 
159
163
  .zx-tooltip__trigger.zx-a-size-xl {
160
164
  height: calc(var(--size-field) * 16);
161
- padding-inline: calc(var(--size-field) * 6);
162
165
  font-size: var(--text-lg);
166
+ padding-left: calc(var(--size-field) * 6);
167
+ padding-right: calc(var(--size-field) * 6);
163
168
  }
@@ -28,7 +28,7 @@
28
28
  .zx-tree-view__item {
29
29
  display: flex;
30
30
  align-items: center;
31
- gap: 0.625rem;
31
+ gap: var(--space-md);
32
32
  padding: var(--space-sm) var(--space-md);
33
33
  font-size: var(--tree-text);
34
34
  font-weight: var(--weight-medium);
@@ -62,7 +62,7 @@
62
62
  .zx-tree-view__branch-trigger {
63
63
  display: flex;
64
64
  align-items: center;
65
- gap: 0.625rem;
65
+ gap: var(--space-md);
66
66
  padding: var(--space-sm) var(--space-md);
67
67
  font-size: var(--tree-text);
68
68
  font-weight: var(--weight-medium);
@@ -101,7 +101,7 @@
101
101
  .zx-tree-view__branch-content {
102
102
  display: flex;
103
103
  flex-direction: column;
104
- padding-inline-start: var(--space-lg);
104
+ padding-left: var(--space-lg);
105
105
  }
106
106
 
107
107
  .zx-tree-view__root.zx-a-color-primary {