ui-lab-registry 0.3.47 → 0.3.49
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/dist/generated-data.d.ts.map +1 -1
- package/dist/generated-data.js +27 -28
- package/dist/generated-data.js.map +1 -1
- package/dist/generated-styles.d.ts.map +1 -1
- package/dist/generated-styles.js +165 -153
- package/dist/generated-styles.js.map +1 -1
- package/dist/generated-styles.json +165 -153
- package/dist/guides/setup-ui-lab-in-project.d.ts.map +1 -1
- package/dist/guides/setup-ui-lab-in-project.js +22 -10
- package/dist/guides/setup-ui-lab-in-project.js.map +1 -1
- package/package.json +2 -2
- package/src/generated-data.ts +27 -28
- package/src/generated-styles.ts +165 -153
- package/src/guides/setup-ui-lab-in-project.ts +22 -10
package/src/generated-styles.ts
CHANGED
|
@@ -40,6 +40,67 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
|
+
"toast": {
|
|
44
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply flex w-full max-w-[28rem] items-start gap-3 px-4 py-2.5 select-none;\n background: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-shadow: var(--background-shadow);\n font-family: inherit;\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n touch-action: pan-y;\n }\n\n .icon-wrap {\n @apply mr-4 mt-2 h-5 w-5 shrink-0;\n }\n\n .icon {\n @apply h-5 w-5;\n color: var(--foreground);\n }\n\n .content {\n @apply min-w-0 flex-1;\n }\n\n .title {\n @apply m-0;\n --foreground: inherit;\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n color: var(--foreground);\n }\n\n .description {\n @apply mt-1 mb-0;\n --foreground: inherit;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n color: var(--foreground);\n }\n\n .close {\n @apply flex shrink-0 items-center justify-center p-2 cursor-pointer;\n --foreground: currentColor;\n background-color: var(--background, transparent);\n border: none;\n border-radius: var(--radius-sm, 0.375rem);\n color: var(--foreground);\n opacity: 0.6;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out));\n\n &[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 var(--border-width-base, 1px) var(--focus-visible);\n outline: none;\n }\n\n &[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n }\n\n .close-icon {\n @apply h-4 w-4;\n }\n}\n",
|
|
45
|
+
"styleableParts": [
|
|
46
|
+
{
|
|
47
|
+
"name": "root"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "iconWrap"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "icon"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "content"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "title"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"name": "description"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "close"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "closeIcon"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"cssVariables": [
|
|
72
|
+
{
|
|
73
|
+
"name": "--foreground",
|
|
74
|
+
"value": "inherit",
|
|
75
|
+
"defaultValue": null,
|
|
76
|
+
"referencedVars": [],
|
|
77
|
+
"variant": ".title"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "--foreground",
|
|
81
|
+
"value": "inherit",
|
|
82
|
+
"defaultValue": null,
|
|
83
|
+
"referencedVars": [],
|
|
84
|
+
"variant": ".description"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "--foreground",
|
|
88
|
+
"value": "currentColor",
|
|
89
|
+
"defaultValue": null,
|
|
90
|
+
"referencedVars": [],
|
|
91
|
+
"variant": ".close"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "--hover-transition-duration",
|
|
95
|
+
"value": "var(--hover-transition-enter-duration, 0ms)",
|
|
96
|
+
"defaultValue": "0ms",
|
|
97
|
+
"referencedVars": [
|
|
98
|
+
"--hover-transition-enter-duration"
|
|
99
|
+
],
|
|
100
|
+
"variant": ".close[data-hovered=\"true\"]"
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
},
|
|
43
104
|
"textarea": {
|
|
44
105
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n\n @apply block w-full px-3 py-2;\n box-sizing: border-box;\n resize: none;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n color: var(--foreground);\n font-family: inherit;\n font-size: var(--text-xs);\n line-height: var(--leading-snug);\n outline: none;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-resize-axis=\"x\"],\n &[data-resize-axis=\"both\"] {\n padding-inline-end: calc(var(--padding-inline) + 1rem);\n }\n\n &[data-resize-axis=\"y\"],\n &[data-resize-axis=\"both\"] {\n padding-block-end: calc(var(--padding-block) + 1rem);\n }\n\n &[data-scroll=\"true\"] {\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n overflow: hidden;\n\n &[data-disabled=\"true\"] {\n opacity: 1;\n }\n }\n }\n\n .size-sm {\n min-height: 5rem;\n --padding-inline: 0.5rem;\n --padding-block: 0.25rem;\n font-size: var(--text-sm);\n @apply px-2 py-1;\n }\n\n .size-md {\n min-height: 6rem;\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n font-size: var(--text-sm);\n @apply px-3 py-2;\n }\n\n .size-lg {\n min-height: 8rem;\n --padding-inline: 1rem;\n --padding-block: 0.75rem;\n font-size: var(--text-md);\n @apply px-4 py-3;\n }\n\n .container {\n min-width: 0;\n @apply w-full;\n }\n\n .scope {\n @apply relative flex w-full;\n overflow: visible;\n }\n\n .surface {\n min-width: 0;\n @apply relative w-full;\n }\n\n .scroll-wrapper {\n @apply w-full overflow-hidden;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n }\n }\n\n .resize-handle {\n position: absolute;\n z-index: 1;\n touch-action: none;\n user-select: none;\n\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n &:hover::before,\n &:hover::after {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .resize-handle-both {\n right: 3px;\n bottom: 3px;\n width: 1.5rem;\n height: 1.5rem;\n cursor: nwse-resize;\n\n &::before {\n right: 0.15rem;\n bottom: 0.35rem;\n width: 0.5rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n\n &::after {\n right: 0.2rem;\n bottom: 0.6rem;\n width: 1rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n }\n\n .resize-handle-x {\n top: 50%;\n right: 0;\n width: 0.75rem;\n height: 2rem;\n cursor: ew-resize;\n transform: translateY(-50%);\n\n &::before {\n top: 50%;\n left: 50%;\n width: 0.125rem;\n height: 1.5rem;\n transform: translate(-50%, -50%);\n }\n\n &::after {\n display: none;\n }\n }\n\n .resize-handle-y {\n left: 50%;\n bottom: 0;\n width: 2rem;\n height: 0.75rem;\n cursor: ns-resize;\n transform: translateX(-50%);\n\n &::before {\n top: 50%;\n left: 50%;\n width: 1.5rem;\n height: 0.125rem;\n transform: translate(-50%, -50%);\n }\n\n &::after {\n display: none;\n }\n }\n\n .character-count {\n @apply mt-1;\n color: var(--foreground);\n font-size: var(--text-sm);\n transition: color 0.15s var(--ease-snappy-pop);\n }\n\n .character-count[data-over-limit=\"true\"] {\n color: var(--foreground-error);\n }\n}\n",
|
|
45
106
|
"styleableParts": [
|
|
@@ -136,56 +197,23 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
136
197
|
}
|
|
137
198
|
]
|
|
138
199
|
},
|
|
139
|
-
"
|
|
140
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .
|
|
200
|
+
"tabs": {
|
|
201
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .tabs {\n @apply flex w-full flex-col;\n\n &[data-orientation=\"vertical\"] {\n flex-direction: row;\n }\n }\n\n .list {\n @apply relative flex w-full flex-row items-center gap-3 py-1;\n border-radius: var(--radius-sm);\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n width: fit-content;\n min-width: 0;\n height: auto;\n align-self: flex-start;\n }\n\n &[data-variant=\"underline\"] {\n background-color: transparent;\n border-radius: 0;\n padding: 0 0 4px;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--border);\n align-items: stretch;\n padding: 0 0 0 4px;\n }\n }\n\n .indicator {\n @apply absolute;\n background-color: var(--background);\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n z-index: 0;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n\n .indicator-fallback {\n z-index: -1;\n }\n\n .indicator-underline {\n border-radius: 0;\n }\n\n .trigger {\n @apply relative z-[1] flex shrink-0 items-center justify-center gap-2 px-2 py-1.5 cursor-pointer select-none;\n height: auto;\n background-color: var(--background);\n border: none;\n color: var(--foreground);\n outline: none;\n box-shadow: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n\n &[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n &[data-selected=\"true\"] {\n cursor: pointer;\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list[data-variant=\"underline\"] & {\n border-bottom-color: var(--underline-border);\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom-color: transparent;\n border-left-color: var(--underline-border);\n }\n }\n\n &:focus,\n &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n }\n\n &[data-disabled=\"true\"] {\n --disabled-opacity: 0.5;\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: var(--background);\n background-clip: padding-box;\n border-radius: var(--radius-sm);\n border-bottom: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"] &:focus,\n .list[data-variant=\"underline\"] &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom: none;\n border-left: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n border-left-color: var(--underline-border);\n border-bottom: none;\n }\n }\n\n .icon {\n @apply flex h-4 w-4 shrink-0 items-center justify-center;\n }\n\n .content {\n @apply w-full p-0 outline-none;\n flex: 1;\n padding-top: 1rem;\n\n &[data-orientation=\"vertical\"] {\n flex: 1;\n width: 100%;\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n }\n\n @media (max-width: 640px) {\n .list {\n padding: 0.125rem;\n\n &[data-variant=\"underline\"] {\n padding: 0 0 4px;\n }\n }\n\n .trigger {\n @apply px-1 py-1;\n .list[data-variant=\"underline\"] & {\n margin: 0.5rem 0.75rem;\n }\n }\n }\n}\n",
|
|
141
202
|
"styleableParts": [
|
|
142
203
|
{
|
|
143
204
|
"name": "root"
|
|
144
205
|
},
|
|
145
206
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"name": "icon"
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "content"
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"name": "title"
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"name": "description"
|
|
207
|
+
"name": "indicator"
|
|
159
208
|
},
|
|
160
209
|
{
|
|
161
|
-
"name": "
|
|
210
|
+
"name": "icon.left"
|
|
162
211
|
},
|
|
163
212
|
{
|
|
164
|
-
"name": "
|
|
213
|
+
"name": "icon.right"
|
|
165
214
|
}
|
|
166
215
|
],
|
|
167
216
|
"cssVariables": [
|
|
168
|
-
{
|
|
169
|
-
"name": "--foreground",
|
|
170
|
-
"value": "inherit",
|
|
171
|
-
"defaultValue": null,
|
|
172
|
-
"referencedVars": [],
|
|
173
|
-
"variant": ".title"
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
"name": "--foreground",
|
|
177
|
-
"value": "inherit",
|
|
178
|
-
"defaultValue": null,
|
|
179
|
-
"referencedVars": [],
|
|
180
|
-
"variant": ".description"
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
"name": "--foreground",
|
|
184
|
-
"value": "currentColor",
|
|
185
|
-
"defaultValue": null,
|
|
186
|
-
"referencedVars": [],
|
|
187
|
-
"variant": ".close"
|
|
188
|
-
},
|
|
189
217
|
{
|
|
190
218
|
"name": "--hover-transition-duration",
|
|
191
219
|
"value": "var(--hover-transition-enter-duration, 0ms)",
|
|
@@ -193,24 +221,64 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
193
221
|
"referencedVars": [
|
|
194
222
|
"--hover-transition-enter-duration"
|
|
195
223
|
],
|
|
196
|
-
"variant": ".
|
|
224
|
+
"variant": ".trigger[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "--disabled-opacity",
|
|
228
|
+
"value": "0.5",
|
|
229
|
+
"defaultValue": null,
|
|
230
|
+
"referencedVars": [],
|
|
231
|
+
"variant": ".trigger[data-disabled=\"true\"]"
|
|
197
232
|
}
|
|
198
233
|
]
|
|
199
234
|
},
|
|
200
|
-
"
|
|
201
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .
|
|
235
|
+
"table": {
|
|
236
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply w-full overflow-x-auto rounded-sm;\n border: var(--border-width-base) solid var(--border, var(--background-border));\n background-color: var(--container-background, var(--background));\n }\n\n .container {\n display: block;\n max-width: none;\n }\n\n .table {\n @apply w-full;\n display: table;\n border-collapse: collapse;\n min-width: max-content;\n background-color: var(--background, transparent);\n color: var(--foreground);\n font-size: var(--text-xs);\n }\n\n .header {\n display: table-header-group;\n background-color: var(--background);\n }\n\n .body {\n display: table-row-group;\n background-color: var(--background);\n }\n\n .headerRow {\n display: table-row;\n background-color: var(--background);\n }\n\n .headerCell {\n @apply px-4 py-3 text-left;\n display: table-cell;\n background-color: var(--background);\n color: var(--foreground);\n font-weight: var(--header-font-weight, var(--font-weight-semibold));\n white-space: nowrap;\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n }\n\n .headerCell:first-child {\n border-top-left-radius: var(--radius-xs);\n }\n\n .headerCell:last-child {\n border-top-right-radius: var(--radius-xs);\n }\n\n .row {\n display: table-row;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row[data-interactive=\"true\"] {\n @apply cursor-pointer;\n }\n\n .row:hover:not([data-disabled=\"true\"]) .cell {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .row[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.5);\n }\n\n .row:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: -2px;\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3 align-middle;\n display: table-cell;\n background-color: var(--background, transparent);\n color: var(--foreground);\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row:last-child .cell {\n border-bottom: none;\n }\n\n .row:last-child .cell:first-child {\n border-bottom-left-radius: var(--radius-xs);\n }\n\n .row:last-child .cell:last-child {\n border-bottom-right-radius: var(--radius-xs);\n }\n\n .emptyRow {\n border-bottom: none;\n }\n\n .emptyRow {\n display: table-row;\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n background-color: var(--background);\n color: var(--foreground);\n }\n\n .emptyState {\n display: table-cell;\n }\n\n .filterBar {\n @apply mb-4 rounded-xs border p-4;\n border: var(--border-width-base) solid var(--background-border);\n background-color: var(--background);\n }\n\n .filterBar {\n display: block;\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n background-color: var(--background);\n }\n\n .filterGrid {\n display: grid;\n }\n\n .filterField {\n @apply min-w-0;\n }\n\n .filterLabel {\n @apply mb-2 block;\n color: var(--foreground);\n font-size: var(--filter-label-font-size, var(--text-xs));\n font-weight: var(--filter-label-font-weight, var(--font-weight-medium));\n }\n\n .filterLabel {\n display: block;\n }\n\n .filterInput {\n @apply w-full;\n }\n}\n",
|
|
202
237
|
"styleableParts": [
|
|
203
238
|
{
|
|
204
239
|
"name": "root"
|
|
205
240
|
},
|
|
206
241
|
{
|
|
207
|
-
"name": "
|
|
242
|
+
"name": "container"
|
|
208
243
|
},
|
|
209
244
|
{
|
|
210
|
-
"name": "
|
|
245
|
+
"name": "filterBar"
|
|
211
246
|
},
|
|
212
247
|
{
|
|
213
|
-
"name": "
|
|
248
|
+
"name": "filterGrid"
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "filterLabel"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "filterInput"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"name": "table"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "header"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "body"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "headerRow"
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"name": "headerCell"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "row"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "cell"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "emptyRow"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "emptyState"
|
|
214
282
|
}
|
|
215
283
|
],
|
|
216
284
|
"cssVariables": [
|
|
@@ -221,14 +289,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
221
289
|
"referencedVars": [
|
|
222
290
|
"--hover-transition-enter-duration"
|
|
223
291
|
],
|
|
224
|
-
"variant": ".
|
|
225
|
-
},
|
|
226
|
-
{
|
|
227
|
-
"name": "--disabled-opacity",
|
|
228
|
-
"value": "0.5",
|
|
229
|
-
"defaultValue": null,
|
|
230
|
-
"referencedVars": [],
|
|
231
|
-
"variant": ".trigger[data-disabled=\"true\"]"
|
|
292
|
+
"variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
|
|
232
293
|
}
|
|
233
294
|
]
|
|
234
295
|
},
|
|
@@ -384,69 +445,8 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
384
445
|
}
|
|
385
446
|
]
|
|
386
447
|
},
|
|
387
|
-
"table": {
|
|
388
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply w-full overflow-x-auto rounded-sm;\n border: var(--border-width-base) solid var(--border, var(--background-border));\n background-color: var(--container-background, var(--background));\n }\n\n .container {\n display: block;\n max-width: none;\n }\n\n .table {\n @apply w-full;\n display: table;\n border-collapse: collapse;\n min-width: max-content;\n background-color: var(--background, transparent);\n color: var(--foreground);\n font-size: var(--text-xs);\n }\n\n .header {\n display: table-header-group;\n background-color: var(--background);\n }\n\n .body {\n display: table-row-group;\n background-color: var(--background);\n }\n\n .headerRow {\n display: table-row;\n background-color: var(--background);\n }\n\n .headerCell {\n @apply px-4 py-3 text-left;\n display: table-cell;\n background-color: var(--background);\n color: var(--foreground);\n font-weight: var(--header-font-weight, var(--font-weight-semibold));\n white-space: nowrap;\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n }\n\n .headerCell:first-child {\n border-top-left-radius: var(--radius-xs);\n }\n\n .headerCell:last-child {\n border-top-right-radius: var(--radius-xs);\n }\n\n .row {\n display: table-row;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row[data-interactive=\"true\"] {\n @apply cursor-pointer;\n }\n\n .row:hover:not([data-disabled=\"true\"]) .cell {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .row[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.5);\n }\n\n .row:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: -2px;\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3 align-middle;\n display: table-cell;\n background-color: var(--background, transparent);\n color: var(--foreground);\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row:last-child .cell {\n border-bottom: none;\n }\n\n .row:last-child .cell:first-child {\n border-bottom-left-radius: var(--radius-xs);\n }\n\n .row:last-child .cell:last-child {\n border-bottom-right-radius: var(--radius-xs);\n }\n\n .emptyRow {\n border-bottom: none;\n }\n\n .emptyRow {\n display: table-row;\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n background-color: var(--background);\n color: var(--foreground);\n }\n\n .emptyState {\n display: table-cell;\n }\n\n .filterBar {\n @apply mb-4 rounded-xs border p-4;\n border: var(--border-width-base) solid var(--background-border);\n background-color: var(--background);\n }\n\n .filterBar {\n display: block;\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n background-color: var(--background);\n }\n\n .filterGrid {\n display: grid;\n }\n\n .filterField {\n @apply min-w-0;\n }\n\n .filterLabel {\n @apply mb-2 block;\n color: var(--foreground);\n font-size: var(--filter-label-font-size, var(--text-xs));\n font-weight: var(--filter-label-font-weight, var(--font-weight-medium));\n }\n\n .filterLabel {\n display: block;\n }\n\n .filterInput {\n @apply w-full;\n }\n}\n",
|
|
389
|
-
"styleableParts": [
|
|
390
|
-
{
|
|
391
|
-
"name": "root"
|
|
392
|
-
},
|
|
393
|
-
{
|
|
394
|
-
"name": "container"
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"name": "filterBar"
|
|
398
|
-
},
|
|
399
|
-
{
|
|
400
|
-
"name": "filterGrid"
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"name": "filterLabel"
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
"name": "filterInput"
|
|
407
|
-
},
|
|
408
|
-
{
|
|
409
|
-
"name": "table"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"name": "header"
|
|
413
|
-
},
|
|
414
|
-
{
|
|
415
|
-
"name": "body"
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
"name": "headerRow"
|
|
419
|
-
},
|
|
420
|
-
{
|
|
421
|
-
"name": "headerCell"
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"name": "row"
|
|
425
|
-
},
|
|
426
|
-
{
|
|
427
|
-
"name": "cell"
|
|
428
|
-
},
|
|
429
|
-
{
|
|
430
|
-
"name": "emptyRow"
|
|
431
|
-
},
|
|
432
|
-
{
|
|
433
|
-
"name": "emptyState"
|
|
434
|
-
}
|
|
435
|
-
],
|
|
436
|
-
"cssVariables": [
|
|
437
|
-
{
|
|
438
|
-
"name": "--hover-transition-duration",
|
|
439
|
-
"value": "var(--hover-transition-enter-duration, 0ms)",
|
|
440
|
-
"defaultValue": "0ms",
|
|
441
|
-
"referencedVars": [
|
|
442
|
-
"--hover-transition-enter-duration"
|
|
443
|
-
],
|
|
444
|
-
"variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
|
|
445
|
-
}
|
|
446
|
-
]
|
|
447
|
-
},
|
|
448
448
|
"select": {
|
|
449
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .select {\n --disabled-opacity: 0.5;\n --trigger-padding-inline: calc(var(--spacing) * 1.60);\n --trigger-padding-block: calc(var(--spacing) * 1.30);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n font-size: var(--foreground-size);\n height: fit-content;\n align-self: center;\n\n @apply p-0 gap-0 w-full flex-row items-center;\n position: relative;\n overflow: visible;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-radius);\n\n @apply select-none cursor-pointer;\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n &[data-pressed=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n }\n\n &[data-open=\"true\"] {\n background-color: var(--background-hover);\n }\n\n &:global(.group) {\n height: 100%;\n align-self: stretch;\n }\n }\n\n .trigger {\n @apply flex items-stretch flex-1 gap-0 w-full h-full min-h-0;\n\n background: transparent;\n\n @apply border-none cursor-pointer select-none;\n\n @media (hover: hover) {\n &:not([data-disabled]):hover .icon-section,\n &:not([data-disabled]):hover .value-section:not(:empty) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover);\n }\n }\n\n &[data-focus-visible=\"true\"] {\n @apply outline-none;\n }\n }\n\n .trigger-compact {\n @apply flex-none w-auto;\n }\n\n .select button.trigger { @apply p-0; }\n\n .value-section {\n @apply flex items-center flex-1 min-w-0 gap-0.5;\n\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n font-size: var(--foreground-size);\n
|
|
449
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .select {\n --disabled-opacity: 0.5;\n --trigger-padding-inline: calc(var(--spacing) * 1.60);\n --trigger-padding-block: calc(var(--spacing) * 1.30);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n font-size: var(--foreground-size);\n height: fit-content;\n align-self: center;\n\n @apply p-0 gap-0 w-full flex-row items-center;\n position: relative;\n overflow: visible;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-radius);\n\n @apply select-none cursor-pointer;\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n &[data-pressed=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n }\n\n &[data-open=\"true\"] {\n background-color: var(--background-hover);\n }\n\n &:global(.group) {\n height: 100%;\n align-self: stretch;\n }\n }\n\n .trigger {\n @apply flex items-stretch flex-1 gap-0 w-full h-full min-h-0;\n\n background: transparent;\n\n @apply border-none cursor-pointer select-none;\n\n @media (hover: hover) {\n &:not([data-disabled]):hover .icon-section,\n &:not([data-disabled]):hover .value-section:not(:empty) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover);\n }\n }\n\n &[data-focus-visible=\"true\"] {\n @apply outline-none;\n }\n }\n\n .trigger-compact {\n @apply flex-none w-auto;\n }\n\n .select button.trigger { @apply p-0; }\n\n .value-section {\n @apply flex items-center flex-1 min-w-0 gap-0.5;\n\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n font-size: var(--foreground-size);\n &:only-child {\n border-radius: var(--background-inner-radius);\n justify-content: center;\n }\n &:empty {\n flex: 0;\n padding: 0;\n min-width: auto;\n }\n }\n\n .icon-section {\n @apply flex items-center justify-center shrink-0;\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n .icon {\n @apply flex items-center justify-center w-4 h-4 opacity-70;\n }\n\n.value {\n @apply flex items-center flex-1 min-w-0 gap-2 bg-transparent border-none;\n cursor: inherit;\n }\n\n .value-icon {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n color: var(--foreground);\n }\n\n .value-text {\n font-weight: var(--font-weight-medium);\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .content,\n .sub-content {\n --item-padding-inline: calc(var(--spacing) * 1.5);\n --item-padding-block: var(--spacing);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n overflow: hidden;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-radius);\n }\n\n .content-root,\n .sub-content-root {\n position: absolute;\n }\n\n .content {}\n\n .list {\n @apply space-y-1;\n }\n\n .item,\n .sub-trigger {\n @apply flex items-center gap-2 outline-none cursor-default select-none;\n background-color: var(--background);\n border-radius: var(--background-inner-radius);\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n .item {\n --item-padding-inline: var(--trigger-padding-inline);\n --item-padding-block: calc(var(--trigger-padding-block) * 1.15);\n\n padding: var(--item-padding-block) var(--item-padding-inline);\n\n &[data-selected=\"true\"] {\n color: var(--foreground);\n }\n\n &[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .item-content {\n @apply flex flex-col flex-1 min-w-0;\n }\n\n .item-text {\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground-muted);\n @apply min-w-0 whitespace-normal break-words;\n }\n\n .item-icon, .item-indicator {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n }\n\n .item-icon { color: var(--icon-foreground); }\n .item-indicator { color: var(--indicator-foreground); margin-left: auto; }\n\n .item-with-description { @apply items-start py-2; }\n .item-icon-with-description, .item-indicator-with-description { @apply mt-0.5; }\n\n .separator {\n @apply my-1 -mx-1 h-px;\n background-color: var(--background-border);\n }\n\n .placeholder {\n color: var(--foreground-muted);\n }\n\n .icon-prefix {\n @apply inline-flex items-center shrink-0;\n }\n\n .select[data-mode=\"multiple\"] .item { gap: 0.5rem; }\n\n .search-trigger {\n @apply flex items-stretch relative bg-transparent cursor-text overflow-hidden;\n border-radius: var(--background-inner-radius);\n &:focus-within {\n @apply outline-none;\n z-index: 1;\n }\n }\n\n .search-trigger :global(.focus-indicator) {\n display: none;\n }\n\n .search-value-section {\n @apply p-0;\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .input {\n padding-right: calc(var(--trigger-padding-inline) * 2 + 1rem);\n @apply border-none rounded-none shadow-none bg-transparent;\n\n &[data-focused], &[data-focus-visible] {\n @apply border-none shadow-none;\n }\n }\n\n .search-content-input {\n @apply border-none rounded-none bg-transparent;\n }\n\n .search-icon-section {\n @apply absolute right-0 top-0 bottom-0 flex items-center justify-center bg-transparent pointer-events-none;\n padding-inline: var(--trigger-padding-inline);\n }\n\n\n .search-wrapper {\n @apply overflow-hidden;\n border-bottom: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .empty-state {\n @apply px-3 py-2;\n color: var(--foreground-muted);\n }\n\n .content[data-placement=\"top\"] .search-wrapper {\n border-radius: 0;\n border-bottom: none;\n border-top: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .sub-trigger {\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n\n &[data-highlighted=\"true\"],\n &[data-open=\"true\"]:not([data-highlighted=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .sub-trigger-chevron {\n @apply shrink-0 ml-auto w-4 h-4 opacity-60;\n }\n\n .sub-content {\n min-width: 160px;\n max-width: 320px;\n }\n\n}\n",
|
|
450
450
|
"styleableParts": [
|
|
451
451
|
{
|
|
452
452
|
"name": "root"
|
|
@@ -754,34 +754,6 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
754
754
|
],
|
|
755
755
|
"cssVariables": []
|
|
756
756
|
},
|
|
757
|
-
"path": {
|
|
758
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n @apply block;\n }\n\n .list {\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n list-style: none;\n }\n\n .list[data-separator=\"custom\"] .item:not(:last-child)::after {\n content: none;\n }\n\n .item {\n @apply m-0 flex items-center gap-2 p-0;\n border-radius: var(--radius-sm, 0.375rem);\n }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .separator {\n @apply m-0 flex items-center p-0;\n list-style: none;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .link {\n @apply relative cursor-pointer px-2 py-1;\n border: 0;\n /* Inherit the item radius so the focus ring matches rounded breadcrumbs. */\n border-radius: inherit;\n background-color: var(--background);\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n text-decoration: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n button.link {\n font: inherit;\n }\n\n .link:focus,\n .link:focus-visible {\n outline: none;\n }\n\n .link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .link[data-selected=\"true\"] {\n cursor: default;\n }\n\n .link[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n}\n",
|
|
759
|
-
"styleableParts": [
|
|
760
|
-
{
|
|
761
|
-
"name": "root"
|
|
762
|
-
},
|
|
763
|
-
{
|
|
764
|
-
"name": "link"
|
|
765
|
-
},
|
|
766
|
-
{
|
|
767
|
-
"name": "list"
|
|
768
|
-
},
|
|
769
|
-
{
|
|
770
|
-
"name": "separator"
|
|
771
|
-
}
|
|
772
|
-
],
|
|
773
|
-
"cssVariables": [
|
|
774
|
-
{
|
|
775
|
-
"name": "--hover-transition-duration",
|
|
776
|
-
"value": "var(--hover-transition-enter-duration, 0ms)",
|
|
777
|
-
"defaultValue": "0ms",
|
|
778
|
-
"referencedVars": [
|
|
779
|
-
"--hover-transition-enter-duration"
|
|
780
|
-
],
|
|
781
|
-
"variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
|
|
782
|
-
}
|
|
783
|
-
]
|
|
784
|
-
},
|
|
785
757
|
"popover": {
|
|
786
758
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--background);\n --frame-stroke-color: var(--background-border);\n --frame-radius: 8px;\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n pointer-events: none;\n min-width: 200px;\n max-width: 400px;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n }\n\n .content[data-instant] {\n transition: none;\n }\n\n .frame {\n @apply flex items-center gap-1.5 p-2.5;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n }\n}\n",
|
|
787
759
|
"styleableParts": [
|
|
@@ -826,6 +798,34 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
826
798
|
}
|
|
827
799
|
]
|
|
828
800
|
},
|
|
801
|
+
"path": {
|
|
802
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n @apply block;\n }\n\n .list {\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n list-style: none;\n }\n\n .list[data-separator=\"custom\"] .item:not(:last-child)::after {\n content: none;\n }\n\n .item {\n @apply m-0 flex items-center gap-2 p-0;\n border-radius: var(--radius-sm, 0.375rem);\n }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .separator {\n @apply m-0 flex items-center p-0;\n list-style: none;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .link {\n @apply relative cursor-pointer px-2 py-1;\n border: 0;\n /* Inherit the item radius so the focus ring matches rounded breadcrumbs. */\n border-radius: inherit;\n background-color: var(--background);\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n text-decoration: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n button.link {\n font: inherit;\n }\n\n .link:focus,\n .link:focus-visible {\n outline: none;\n }\n\n .link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .link[data-selected=\"true\"] {\n cursor: default;\n }\n\n .link[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n}\n",
|
|
803
|
+
"styleableParts": [
|
|
804
|
+
{
|
|
805
|
+
"name": "root"
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"name": "link"
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
"name": "list"
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"name": "separator"
|
|
815
|
+
}
|
|
816
|
+
],
|
|
817
|
+
"cssVariables": [
|
|
818
|
+
{
|
|
819
|
+
"name": "--hover-transition-duration",
|
|
820
|
+
"value": "var(--hover-transition-enter-duration, 0ms)",
|
|
821
|
+
"defaultValue": "0ms",
|
|
822
|
+
"referencedVars": [
|
|
823
|
+
"--hover-transition-enter-duration"
|
|
824
|
+
],
|
|
825
|
+
"variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
|
|
826
|
+
}
|
|
827
|
+
]
|
|
828
|
+
},
|
|
829
829
|
"panel": {
|
|
830
830
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .panel {\n @apply flex h-full w-full min-h-0 min-w-0 flex-row;\n background: inherit;\n }\n\n .panel[data-stacked=\"true\"] { flex-direction: column; }\n\n .header,\n .footer {\n @apply shrink-0;\n background: inherit;\n }\n\n .sticky {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n .content {\n @apply flex min-h-0 min-w-0;\n flex: 1;\n overflow: auto;\n }\n\n .fixed {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 5;\n }\n\n /* Sidebar */\n .sidebar {\n @apply shrink-0 overflow-hidden;\n overflow: hidden;\n transition: width 0.2s ease;\n border-right: var(--border-width-base) solid var(--panel-border-color);\n }\n\n .sidebar[data-side=\"right\"] {\n border-right: none;\n border-left: var(--border-width-base) solid var(--panel-border-color);\n }\n\n /* Toggle */\n .toggle {\n @apply flex items-center;\n }\n\n /* Group */\n .group {\n @apply flex w-full h-full;\n background: inherit;\n }\n\n .group[data-direction=\"vertical\"] { flex-direction: column; }\n\n /* Resize handle */\n .resize {\n @apply relative shrink-0;\n cursor: col-resize;\n background: transparent;\n width: 10px;\n }\n\n .resize::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: var(--panel-divider-color, #374151);\n transform: translateX(-50%);\n transition:\n width var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n height var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .resize[data-direction=\"vertical\"] {\n cursor: row-resize;\n height: 10px;\n }\n\n .resize[data-direction=\"vertical\"]::before {\n top: 50%;\n bottom: auto;\n left: 0;\n right: 0;\n width: auto;\n height: 1px;\n transform: translateY(-50%);\n }\n\n .resize:hover::before,\n .resize[data-resizing=\"true\"]::before {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n width: 2px;\n }\n\n .resize[data-direction=\"vertical\"]:hover::before,\n .resize[data-direction=\"vertical\"][data-resizing=\"true\"]::before {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n width: auto;\n height: 2px;\n }\n\n /* Spacing variants */\n .spacingNone,\n .spacing-none { gap: 0; }\n\n .spacingSm,\n .spacing-sm { gap: var(--spacing-sm, 0.5rem); }\n\n .spacingMd,\n .spacing-md { gap: var(--spacing-md, 1rem); }\n\n .spacingLg,\n .spacing-lg { gap: var(--spacing-lg, 1.5rem); }\n\n /* Compact variant */\n .compact {\n gap: calc(var(--spacing-sm, 0.5rem) / 2);\n }\n\n /* Responsive stacking (mobile) */\n @media (max-width: 767px) {\n .stacked { flex-direction: column; }\n }\n}\n",
|
|
831
831
|
"styleableParts": [
|
|
@@ -1056,7 +1056,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1056
1056
|
"cssVariables": []
|
|
1057
1057
|
},
|
|
1058
1058
|
"list": {
|
|
1059
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n --gap-scale: 0.75;\n\n color: var(--foreground);\n @apply flex flex-col;\n gap: calc(var(--spacing, 0.25rem) * var(--list-gap-step, 0) * var(--gap-scale, 1));\n }\n\n .container[data-orientation=\"horizontal\"] {\n @apply flex-row flex-wrap;\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .sticky {\n position: sticky;\n top: 0;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-foreground);\n }\n\n .header > :last-child {\n color: var(--header-subtitle-foreground);\n }\n\n .item {\n --background: transparent;\n\n @apply flex gap-3 px-2 py-1 cursor-pointer;\n background-color: var(--background);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .item[data-focus-visible=\"true\"] {\n box-shadow:\n inset 0 0 0 1px var(--item-focus-visible-background, var(--focus-visible-background)),\n 0 0 0 2px var(--item-focus-visible, var(--focus-visible));\n border-radius: var(--item-radius, var(--radius-sm, 0.375rem));\n outline: none;\n }\n\n .item:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .item[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control {\n margin-left: auto;\n }\n\n .control[data-placement=\"start\"] {\n margin-left: 0;\n }\n\n .media {\n @apply h-8 w-8;\n }\n\n .title {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n @apply truncate;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-foreground);\n @apply truncate;\n }\n\n .actionGroup {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .actionGroup[data-justify=\"between\"] { justify-content: space-between; }\n .actionGroup[data-justify=\"start\"] { justify-content: flex-start; }\n .actionGroup[data-justify=\"end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply flex p-1.5 opacity-70 transition-opacity
|
|
1059
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n --gap-scale: 0.75;\n\n color: var(--foreground);\n @apply flex flex-col;\n gap: calc(var(--spacing, 0.25rem) * var(--list-gap-step, 0) * var(--gap-scale, 1));\n }\n\n .container[data-orientation=\"horizontal\"] {\n @apply flex-row flex-wrap;\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .sticky {\n position: sticky;\n top: 0;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-foreground);\n }\n\n .header > :last-child {\n color: var(--header-subtitle-foreground);\n }\n\n .item {\n --background: transparent;\n\n @apply flex gap-3 px-2 py-1 cursor-pointer;\n background-color: var(--background);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .item[data-focus-visible=\"true\"] {\n box-shadow:\n inset 0 0 0 1px var(--item-focus-visible-background, var(--focus-visible-background)),\n 0 0 0 2px var(--item-focus-visible, var(--focus-visible));\n border-radius: var(--item-radius, var(--radius-sm, 0.375rem));\n outline: none;\n }\n\n .item:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .item[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control {\n margin-left: auto;\n }\n\n .control[data-placement=\"start\"] {\n margin-left: 0;\n }\n\n .media {\n @apply h-8 w-8;\n }\n\n .title {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n @apply truncate;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-foreground);\n @apply truncate;\n }\n\n .actionGroup {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .actionGroup[data-justify=\"between\"] { justify-content: space-between; }\n .actionGroup[data-justify=\"start\"] { justify-content: flex-start; }\n .actionGroup[data-justify=\"end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply flex p-1.5 opacity-70 transition-opacity;\n }\n\n .item:hover .actions,\n .item:focus-within .actions {\n opacity: 1;\n }\n\n .action {\n --background: transparent;\n\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n background-color: var(--background);\n color: var(--foreground);\n @apply p-2;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .action:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .footer {\n @apply flex p-6 pb-12;\n }\n\n .footer[data-align=\"center\"] { justify-content: center; }\n .footer[data-align=\"start\"] { justify-content: flex-start; }\n .footer[data-align=\"end\"] { justify-content: flex-end; }\n\n .container[data-spacing=\"sm\"] .footer {\n padding: 0.375rem 0.75rem;\n padding-bottom: 0.375rem;\n }\n}\n",
|
|
1060
1060
|
"styleableParts": [
|
|
1061
1061
|
{
|
|
1062
1062
|
"name": "root"
|
|
@@ -1144,11 +1144,14 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1144
1144
|
]
|
|
1145
1145
|
},
|
|
1146
1146
|
"label": {
|
|
1147
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n --background: transparent;\n --foreground: var(--foreground-primary);\n --foreground
|
|
1147
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n --background: transparent;\n --foreground: var(--foreground-primary);\n --disabled-foreground: var(--foreground-secondary);\n --error-foreground: var(--danger-600);\n --helper-color: var(--foreground-secondary);\n --helper-error-color: var(--danger-600);\n --required-color: var(--danger-600);\n }\n\n .text {\n display: block;\n font-family: inherit;\n font-size: var(--text-sm);\n color: var(--foreground);\n transition: color 150ms ease;\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--error-foreground);\n }\n }\n\n .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .helper-text {\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-color);\n\n &[data-error] {\n color: var(--helper-error-color);\n }\n }\n}\n",
|
|
1148
1148
|
"styleableParts": [
|
|
1149
1149
|
{
|
|
1150
1150
|
"name": "root"
|
|
1151
1151
|
},
|
|
1152
|
+
{
|
|
1153
|
+
"name": "text"
|
|
1154
|
+
},
|
|
1152
1155
|
{
|
|
1153
1156
|
"name": "requiredIndicator"
|
|
1154
1157
|
},
|
|
@@ -1174,7 +1177,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1174
1177
|
"variant": ".label"
|
|
1175
1178
|
},
|
|
1176
1179
|
{
|
|
1177
|
-
"name": "--foreground
|
|
1180
|
+
"name": "--disabled-foreground",
|
|
1178
1181
|
"value": "var(--foreground-secondary)",
|
|
1179
1182
|
"defaultValue": null,
|
|
1180
1183
|
"referencedVars": [
|
|
@@ -1183,7 +1186,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1183
1186
|
"variant": ".label"
|
|
1184
1187
|
},
|
|
1185
1188
|
{
|
|
1186
|
-
"name": "--foreground
|
|
1189
|
+
"name": "--error-foreground",
|
|
1187
1190
|
"value": "var(--danger-600)",
|
|
1188
1191
|
"defaultValue": null,
|
|
1189
1192
|
"referencedVars": [
|
|
@@ -1192,22 +1195,31 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1192
1195
|
"variant": ".label"
|
|
1193
1196
|
},
|
|
1194
1197
|
{
|
|
1195
|
-
"name": "--helper-
|
|
1198
|
+
"name": "--helper-color",
|
|
1196
1199
|
"value": "var(--foreground-secondary)",
|
|
1197
1200
|
"defaultValue": null,
|
|
1198
1201
|
"referencedVars": [
|
|
1199
1202
|
"--foreground-secondary"
|
|
1200
1203
|
],
|
|
1201
|
-
"variant": ".label
|
|
1204
|
+
"variant": ".label"
|
|
1205
|
+
},
|
|
1206
|
+
{
|
|
1207
|
+
"name": "--helper-error-color",
|
|
1208
|
+
"value": "var(--danger-600)",
|
|
1209
|
+
"defaultValue": null,
|
|
1210
|
+
"referencedVars": [
|
|
1211
|
+
"--danger-600"
|
|
1212
|
+
],
|
|
1213
|
+
"variant": ".label"
|
|
1202
1214
|
},
|
|
1203
1215
|
{
|
|
1204
|
-
"name": "--
|
|
1216
|
+
"name": "--required-color",
|
|
1205
1217
|
"value": "var(--danger-600)",
|
|
1206
1218
|
"defaultValue": null,
|
|
1207
1219
|
"referencedVars": [
|
|
1208
1220
|
"--danger-600"
|
|
1209
1221
|
],
|
|
1210
|
-
"variant": ".label
|
|
1222
|
+
"variant": ".label"
|
|
1211
1223
|
}
|
|
1212
1224
|
]
|
|
1213
1225
|
},
|
|
@@ -1300,7 +1312,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1300
1312
|
]
|
|
1301
1313
|
},
|
|
1302
1314
|
"group": {
|
|
1303
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item
|
|
1315
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item.divider {\n margin-inline: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n width: 100%;\n }\n }\n\n &.none {\n --layout-padding-size: 0px;\n @apply gap-0;\n }\n\n &.xs {\n --layout-radius-size: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n\n &.sm {\n --layout-radius-size: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n }\n\n .item {\n @apply flex items-stretch;\n position: relative;\n isolation: isolate;\n border-radius: var(--group-item-radius, 0);\n overflow: visible;\n\n &.grow {\n flex: 1;\n }\n\n &.divider {\n @apply p-0 shrink-0 flex-none;\n\n > [role=\"separator\"] {\n flex: 0 0 auto;\n }\n }\n }\n\n :is(.button, .input, .select, .expand) {\n height: 100%;\n min-height: var(--item-height);\n position: relative;\n isolation: isolate;\n overflow: visible;\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-pressed, var(--background-hover, var(--background))));\n color: var(--button-selected-foreground, var(--foreground));\n }\n }\n\n .horizontal .item.icon-button-item {\n @apply flex-1;\n }\n\n .item.icon-button-item > .button {\n @apply w-full;\n aspect-ratio: auto;\n }\n\n .item.icon-button-item > .button:global(.icon) {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .item.icon-button-item > .button:global(.icon):global(.sm) {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .item.icon-button-item > .button:global(.icon):global(.lg) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n > [data-ring=\"true\"] {\n border-radius: inherit;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand {\n @apply flex items-stretch;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand :global(.expand-scope),\n .expand :global(.expand) {\n @apply flex w-full h-full;\n }\n\n .expand :global(.expand) {\n @apply flex-col;\n border-radius: inherit;\n }\n\n .expand :global(.trigger) {\n @apply min-h-0;\n border-radius: inherit;\n }\n\n .trigger {}\n\n .group {\n .item :is(.button, .select) {\n border: none;\n }\n\n .input > [data-input-focus-surface=\"true\"] {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .item.divider > [role=\"separator\"] {\n --divider-background: var(--background);\n }\n\n &.none {\n .item:not(.divider) {\n overflow: hidden;\n }\n\n :is(.button, .trigger, .select) {\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --radius-sm: 0;\n }\n\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .item:last-child {\n --group-item-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n .item:only-child {\n --group-item-radius: var(--background-inner-radius);\n }\n\n &.horizontal {\n .item:first-child :is( .button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-bottom-left-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is( .button, .trigger, .input > *, .select) {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child .trigger .icon-section {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n\n &.vertical {\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) var(--background-inner-radius) 0 0;\n }\n\n .item:last-child {\n --group-item-radius: 0 0 var(--background-inner-radius) var(--background-inner-radius);\n }\n\n .item:first-child :is(.button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-top-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is(.button, .trigger, .input > *, .select) {\n border-bottom-left-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n .item {\n --group-item-radius: var(--background-inner-radius);\n }\n\n :is(.button, .trigger, .select) {\n border-radius: var(--background-inner-radius);\n }\n\n .input {\n --radius-sm: var(--background-inner-radius);\n }\n }\n }\n\n .group [data-ring=\"true\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n }\n\n .group :global(.focus-indicator) {\n display: none;\n }\n\n .group [data-focus-indicator=\"local\"] {\n display: none;\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"]) {\n @apply outline-none;\n box-shadow: none;\n }\n}\n",
|
|
1304
1316
|
"styleableParts": [
|
|
1305
1317
|
{
|
|
1306
1318
|
"name": "root"
|
|
@@ -1917,7 +1929,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
1917
1929
|
]
|
|
1918
1930
|
},
|
|
1919
1931
|
"date": {
|
|
1920
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .calendar {\n --disabled-opacity: 0.5;\n\n @apply inline-flex p-1.5 flex-col overflow-hidden gap-0;\n border-radius: var(--radius-
|
|
1932
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .calendar {\n --disabled-opacity: 0.5;\n\n @apply inline-flex p-1.5 flex-col overflow-hidden gap-0;\n border-radius: var(--radius-sm);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n }\n\n .day-headers {\n @apply grid gap-2 px-4 pt-3 pb-1;\n grid-template-columns: repeat(7, 1fr);\n background: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-bottom: none;\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n }\n\n .day-header {\n @apply flex items-center justify-center;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n color: var(--foreground);\n }\n\n .header {\n @apply flex items-center justify-between gap-4 pl-2 pr-1.5 py-1.5;\n color: var(--foreground);\n }\n\n .month-year {\n @apply ml-2;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n text-align: center;\n }\n\n .nav-button {\n @apply inline-flex min-h-8 min-w-8 items-center justify-center cursor-pointer;\n border-radius: var(--radius-sm);\n background-color: var(--background, transparent);\n color: var(--foreground);\n border: 1px solid transparent;\n font-size: var(--text-sm);\n font-weight: 500;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .nav-button:focus-visible {\n outline: none;\n }\n\n .nav-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .grid {\n @apply grid gap-1 px-4 pb-4;\n grid-template-columns: repeat(7, 1fr); /* 7 days only */\n background: var(--background);\n border-radius: 0 0 var(--radius-sm) var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n }\n\n .day-cell {\n @apply flex min-h-8 items-center justify-center px-2.5 py-2 cursor-pointer;\n border-radius: var(--radius-base);\n background-color: var(--background, transparent);\n color: var(--foreground);\n border: 2px solid transparent;\n font-size: var(--text-sm);\n font-weight: 400;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .day-cell:focus-visible {\n outline: none;\n }\n\n .week-header {\n display: none;\n }\n\n .week-number {\n display: none;\n }\n}\n\n/* Variant states - these are outside @layer */\n.day-cell[data-selected=\"true\"] {\n font-weight: 500;\n}\n\n.day-cell[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-out-of-range=\"true\"]),\n.day-cell:hover:not([data-disabled=\"true\"]):not([data-out-of-range=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n}\n\n.day-cell[data-today=\"true\"] {\n border-color: transparent;\n}\n\n.day-cell[data-disabled=\"true\"],\n.day-cell[data-out-of-range=\"true\"] {\n opacity: var(--disabled-opacity);\n}\n\n.day-cell[data-disabled=\"true\"] { cursor: not-allowed; }\n",
|
|
1921
1933
|
"styleableParts": [
|
|
1922
1934
|
{
|
|
1923
1935
|
"name": "root"
|
|
@@ -2951,7 +2963,7 @@ export const generatedStyles: Record<string, { rawCss: string; styleableParts: A
|
|
|
2951
2963
|
]
|
|
2952
2964
|
},
|
|
2953
2965
|
"badge": {
|
|
2954
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 select-none whitespace-nowrap px-1.5;\n height: fit-content;\n width: fit-content;\n background-color: var(--background, var(--background-800));\n color: var(--foreground, var(--foreground-200));\n border: var(--border-width-base, 1px) solid var(--background-border, var(--background-600));\n border-radius: var(--radius-sm, 0.375rem);\n font-weight: var(--font-weight-
|
|
2966
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 select-none whitespace-nowrap px-1.5;\n height: fit-content;\n width: fit-content;\n background-color: var(--background, var(--background-800));\n color: var(--foreground, var(--foreground-200));\n border: var(--border-width-base, 1px) solid var(--background-border, var(--background-600));\n border-radius: var(--radius-sm, 0.375rem);\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-xs, 0.75rem);\n line-height: var(--leading-tight, 1.25);\n }\n\n .badge.dismissible {\n @apply pr-0.5;\n }\n\n .pill {\n border-radius: 9999px;\n }\n\n .icon {\n @apply flex items-center shrink-0;\n }\n\n .dismiss {\n @apply ml-1 flex shrink-0 items-center justify-center p-0 cursor-pointer;\n width: 1em;\n height: 1em;\n line-height: 1;\n border-radius: var(--radius-xs, 0.25rem);\n background-color: var(--dismiss-background, var(--background, transparent));\n color: var(--foreground, var(--foreground-400));\n border: none;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n transform var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n .dismiss svg {\n width: 100%;\n height: 100%;\n }\n\n .dismiss[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover, var(--dismiss-background, transparent));\n }\n\n .dismiss[data-pressed=\"true\"] {\n background-color: var(\n --background-pressed,\n var(--background-hover, var(--dismiss-background, transparent))\n );\n transform: scale(0.95);\n }\n\n .dismiss[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 1.5px var(--focus-visible, var(--foreground));\n }\n}\n",
|
|
2955
2967
|
"styleableParts": [
|
|
2956
2968
|
{
|
|
2957
2969
|
"name": "root"
|