ui-lab-registry 0.3.43 → 0.3.44

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 (18) hide show
  1. package/dist/components/Slider/index.d.ts.map +1 -1
  2. package/dist/components/Slider/index.js +2 -13
  3. package/dist/components/Slider/index.js.map +1 -1
  4. package/dist/generated-data.d.ts.map +1 -1
  5. package/dist/generated-data.js +259 -134
  6. package/dist/generated-data.js.map +1 -1
  7. package/dist/generated-styles.d.ts.map +1 -1
  8. package/dist/generated-styles.js +364 -472
  9. package/dist/generated-styles.js.map +1 -1
  10. package/dist/generated-styles.json +364 -472
  11. package/dist/registry.js +2 -2
  12. package/dist/registry.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/Group/metadata.json +3 -2
  15. package/src/components/Slider/index.tsx +1 -13
  16. package/src/generated-data.ts +259 -134
  17. package/src/generated-styles.ts +364 -472
  18. package/src/registry.ts +2 -2
package/dist/generated-styles.js CHANGED
@@ -40,383 +40,219 @@ export const generatedStyles = {
40
40
  }
41
41
  ]
42
42
  },
43
- "textarea": {
44
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n --background: var(--background-950);\n --background-border: var(--background-700);\n --background-hover: var(--background-900);\n --background-focused: var(--background-900);\n --background-focused-border: var(--accent-500);\n --background-disabled: var(--background-900);\n --foreground: var(--foreground-50);\n --foreground-disabled: var(--foreground-400);\n --placeholder: var(--foreground-400);\n --focus-visible: var(--accent-500);\n --disabled-opacity: 0.6;\n\n @apply block w-full px-3 py-2;\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-sizing: border-box;\n resize: none;\n outline: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &:hover:not([data-disabled]) {\n background-color: var(--background-hover);\n }\n\n &[data-focused=\"true\"] {\n border-color: var(--background-focused-border);\n background-color: var(--background-focused);\n }\n\n &[data-focus-visible=\"true\"] {\n outline: none;\n border-color: var(--background-focused-border);\n box-shadow: 0 0 0 1px var(--focus-visible);\n background-color: var(--background-focused);\n }\n\n &[data-disabled] {\n background-color: var(--background-disabled);\n color: var(--foreground-disabled);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-error] {\n border-color: var(--background-error-border, var(--background-border));\n\n &[data-focused=\"true\"],\n &[data-focus-visible=\"true\"] {\n border-color: var(--background-error-focused-border, var(--background-focused-border));\n }\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 overflow: hidden;\n resize: none;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n\n &[data-focused=\"true\"],\n &[data-focus-visible=\"true\"] {\n border-color: transparent;\n box-shadow: none;\n }\n\n &[data-disabled] {\n background-color: transparent;\n opacity: 1;\n }\n\n &[data-error] {\n border-color: transparent;\n\n &[data-focused=\"true\"],\n &[data-focus-visible=\"true\"] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n }\n }\n\n .surface {\n @apply relative w-full;\n }\n\n .resize-handle {\n --handle-background: color-mix(in srgb, var(--foreground-400) 72%, transparent);\n --handle-hover-background: color-mix(in srgb, var(--foreground-200) 90%, transparent);\n\n position: absolute;\n z-index: 1;\n touch-action: none;\n user-select: none;\n\n &::before {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--handle-background);\n transition: background-color 150ms;\n }\n\n &::after {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--handle-background);\n transition: background-color 150ms;\n }\n\n &:hover::before,\n &:hover::after {\n background-color: var(--handle-hover-background);\n }\n\n &[data-axis=\"both\"] {\n right: 3px;\n bottom: 3px;\n width: 1.5rem;\n height: 1.5rem;\n cursor: nwse-resize;\n\n &::before {\n bottom: 0.35rem;\n right: 0.15rem;\n width: 0.5rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n\n &::after {\n bottom: 0.6rem;\n right: 0.2rem;\n width: 1rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n }\n\n &[data-axis=\"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\n &[data-axis=\"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 }\n\n .scroll-wrapper {\n --background: var(--background-950);\n --background-border: var(--background-700);\n --background-hover: var(--background-900);\n --background-focused: var(--background-900);\n --background-focused-border: var(--accent-500);\n --background-disabled: var(--background-900);\n --focus-visible: var(--accent-500);\n --disabled-opacity: 0.6;\n\n @apply w-full overflow-hidden;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n\n &:hover:not([data-disabled]) {\n background-color: var(--background-hover);\n }\n\n &[data-focused=\"true\"] {\n border-color: var(--background-focused-border);\n background-color: var(--background-focused);\n }\n\n &[data-focus-visible=\"true\"] {\n outline: none;\n border-color: var(--background-focused-border);\n box-shadow: 0 0 0 1px var(--focus-visible);\n background-color: var(--background-focused);\n }\n\n &[data-disabled] {\n background-color: var(--background-disabled);\n opacity: var(--disabled-opacity);\n }\n\n &[data-error] {\n border-color: var(--background-error-border, var(--background-border));\n\n &[data-focused=\"true\"],\n &[data-focus-visible=\"true\"] {\n border-color: var(--background-error-focused-border, var(--background-focused-border));\n }\n }\n }\n\n .textarea[data-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 .textarea[data-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 .textarea[data-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 @apply w-full;\n }\n\n .character-count {\n --count-foreground: var(--foreground-400);\n --count-over-limit-foreground: var(--danger-600);\n\n font-size: var(--text-sm);\n color: var(--count-foreground);\n @apply mt-1;\n transition: color 0.15s var(--ease-snappy-pop);\n }\n\n .character-count[data-over-limit] {\n color: var(--count-over-limit-foreground);\n }\n}\n",
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-hover: transparent;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm, 0.375rem);\n color: var(--foreground);\n opacity: 0.6;\n transition: opacity 0.15s var(--ease-settle-in);\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 opacity: 1;\n background: var(--background-hover);\n }\n }\n\n .close-icon {\n @apply h-4 w-4;\n }\n}\n",
45
45
  "styleableParts": [
46
46
  {
47
47
  "name": "root"
48
48
  },
49
49
  {
50
- "name": "container"
50
+ "name": "iconWrap"
51
51
  },
52
52
  {
53
- "name": "surface"
53
+ "name": "icon"
54
54
  },
55
55
  {
56
- "name": "scrollWrapper"
56
+ "name": "content"
57
57
  },
58
58
  {
59
- "name": "resizeHandle.both"
59
+ "name": "title"
60
60
  },
61
61
  {
62
- "name": "resizeHandle.x"
62
+ "name": "description"
63
63
  },
64
64
  {
65
- "name": "resizeHandle.y"
65
+ "name": "close"
66
66
  },
67
67
  {
68
- "name": "characterCount"
68
+ "name": "closeIcon"
69
69
  }
70
70
  ],
71
71
  "cssVariables": [
72
72
  {
73
- "name": "--padding-inline",
74
- "value": "0.75rem",
73
+ "name": "--foreground",
74
+ "value": "inherit",
75
75
  "defaultValue": null,
76
76
  "referencedVars": [],
77
- "variant": ".textarea"
77
+ "variant": ".title"
78
78
  },
79
79
  {
80
- "name": "--padding-block",
81
- "value": "0.5rem",
80
+ "name": "--foreground",
81
+ "value": "inherit",
82
82
  "defaultValue": null,
83
83
  "referencedVars": [],
84
- "variant": ".textarea"
85
- },
86
- {
87
- "name": "--background",
88
- "value": "var(--background-950)",
89
- "defaultValue": null,
90
- "referencedVars": [
91
- "--background-950"
92
- ],
93
- "variant": ".textarea"
84
+ "variant": ".description"
94
85
  },
95
86
  {
96
- "name": "--background-border",
97
- "value": "var(--background-700)",
87
+ "name": "--foreground",
88
+ "value": "currentColor",
98
89
  "defaultValue": null,
99
- "referencedVars": [
100
- "--background-700"
101
- ],
102
- "variant": ".textarea"
90
+ "referencedVars": [],
91
+ "variant": ".close"
103
92
  },
104
93
  {
105
94
  "name": "--background-hover",
106
- "value": "var(--background-900)",
107
- "defaultValue": null,
108
- "referencedVars": [
109
- "--background-900"
110
- ],
111
- "variant": ".textarea"
112
- },
113
- {
114
- "name": "--background-focused",
115
- "value": "var(--background-900)",
116
- "defaultValue": null,
117
- "referencedVars": [
118
- "--background-900"
119
- ],
120
- "variant": ".textarea"
121
- },
122
- {
123
- "name": "--background-focused-border",
124
- "value": "var(--accent-500)",
125
- "defaultValue": null,
126
- "referencedVars": [
127
- "--accent-500"
128
- ],
129
- "variant": ".textarea"
130
- },
131
- {
132
- "name": "--background-disabled",
133
- "value": "var(--background-900)",
95
+ "value": "transparent",
134
96
  "defaultValue": null,
135
- "referencedVars": [
136
- "--background-900"
137
- ],
138
- "variant": ".textarea"
139
- },
97
+ "referencedVars": [],
98
+ "variant": ".close"
99
+ }
100
+ ]
101
+ },
102
+ "tabs": {
103
+ "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: auto;\n min-width: 120px;\n height: 100%;\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-color);\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: 100%;\n background-color: var(--background);\n border: none;\n color: var(--foreground);\n outline: none;\n box-shadow: none;\n transition: color 0.15s ease, background-color 0.15s ease;\n\n\n &:not([data-disabled]):not([data-selected=\"true\"]) {\n &:hover {\n background-color: var(--background-hover);\n color: var(--foreground-hover);\n }\n\n &:active {\n background-color: var(--background-pressed);\n color: var(--foreground-pressed);\n }\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n color: var(--foreground-selected);\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list & {\n background-color: var(--background-selected);\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: transparent;\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\"] &:not([data-disabled]):not([data-selected=\"true\"]):hover {\n background-color: var(--background-hover);\n }\n\n .list[data-variant=\"underline\"] &:not([data-disabled]):not([data-selected=\"true\"]):active {\n background-color: var(--background-pressed);\n }\n\n .list[data-variant=\"underline\"] &[data-selected=\"true\"] {\n background-color: var(--background-selected);\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",
104
+ "styleableParts": [
140
105
  {
141
- "name": "--foreground",
142
- "value": "var(--foreground-50)",
143
- "defaultValue": null,
144
- "referencedVars": [
145
- "--foreground-50"
146
- ],
147
- "variant": ".textarea"
106
+ "name": "root"
148
107
  },
149
108
  {
150
- "name": "--foreground-disabled",
151
- "value": "var(--foreground-400)",
152
- "defaultValue": null,
153
- "referencedVars": [
154
- "--foreground-400"
155
- ],
156
- "variant": ".textarea"
109
+ "name": "indicator"
157
110
  },
158
111
  {
159
- "name": "--placeholder",
160
- "value": "var(--foreground-400)",
161
- "defaultValue": null,
162
- "referencedVars": [
163
- "--foreground-400"
164
- ],
165
- "variant": ".textarea"
112
+ "name": "icon.left"
166
113
  },
167
114
  {
168
- "name": "--focus-visible",
169
- "value": "var(--accent-500)",
170
- "defaultValue": null,
171
- "referencedVars": [
172
- "--accent-500"
173
- ],
174
- "variant": ".textarea"
175
- },
115
+ "name": "icon.right"
116
+ }
117
+ ],
118
+ "cssVariables": [
176
119
  {
177
120
  "name": "--disabled-opacity",
178
- "value": "0.6",
121
+ "value": "0.5",
179
122
  "defaultValue": null,
180
123
  "referencedVars": [],
181
- "variant": ".textarea"
182
- },
183
- {
184
- "name": "--handle-background",
185
- "value": "color-mix(in srgb, var(--foreground-400) 72%, transparent)",
186
- "defaultValue": null,
187
- "referencedVars": [
188
- "--foreground-400"
189
- ],
190
- "variant": ".resize-handle"
191
- },
192
- {
193
- "name": "--handle-hover-background",
194
- "value": "color-mix(in srgb, var(--foreground-200) 90%, transparent)",
195
- "defaultValue": null,
196
- "referencedVars": [
197
- "--foreground-200"
198
- ],
199
- "variant": ".resize-handle"
200
- },
201
- {
202
- "name": "--background",
203
- "value": "var(--background-950)",
204
- "defaultValue": null,
205
- "referencedVars": [
206
- "--background-950"
207
- ],
208
- "variant": ".scroll-wrapper"
209
- },
210
- {
211
- "name": "--background-border",
212
- "value": "var(--background-700)",
213
- "defaultValue": null,
214
- "referencedVars": [
215
- "--background-700"
216
- ],
217
- "variant": ".scroll-wrapper"
218
- },
219
- {
220
- "name": "--background-hover",
221
- "value": "var(--background-900)",
222
- "defaultValue": null,
223
- "referencedVars": [
224
- "--background-900"
225
- ],
226
- "variant": ".scroll-wrapper"
227
- },
228
- {
229
- "name": "--background-focused",
230
- "value": "var(--background-900)",
231
- "defaultValue": null,
232
- "referencedVars": [
233
- "--background-900"
234
- ],
235
- "variant": ".scroll-wrapper"
236
- },
237
- {
238
- "name": "--background-focused-border",
239
- "value": "var(--accent-500)",
240
- "defaultValue": null,
241
- "referencedVars": [
242
- "--accent-500"
243
- ],
244
- "variant": ".scroll-wrapper"
245
- },
124
+ "variant": ".trigger[data-disabled=\"true\"]"
125
+ }
126
+ ]
127
+ },
128
+ "table": {
129
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply overflow-x-auto rounded-md;\n border: 1px solid var(--table-border, var(--background-800));\n }\n\n .table {\n @apply w-full text-sm;\n background-color: var(--table-background, transparent);\n color: var(--table-foreground, currentColor);\n }\n\n .thead {\n @apply contents;\n }\n\n .headerRow {\n @apply contents;\n }\n\n .headerCell {\n @apply px-4 py-3 text-left font-semibold;\n background-color: var(--table-header-background, var(--background-900));\n color: var(--table-header-foreground, var(--foreground-200));\n border-bottom: 1px solid var(--table-border, var(--background-800));\n }\n\n .tbody {\n @apply contents;\n }\n\n .bodyRow {\n @apply contents;\n\n &[data-interactive=\"true\"] {\n @apply cursor-pointer;\n\n & td {\n @apply transition-colors;\n }\n\n &:hover td {\n background-color: var(--table-body-background-hover, var(--background-900));\n }\n }\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3;\n background-color: var(--table-cell-background, transparent);\n color: var(--table-cell-foreground, var(--foreground-300));\n border-bottom: 1px solid var(--table-border, var(--background-800));\n\n &:last-child {\n border-bottom: none;\n }\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n color: var(--table-empty-foreground, var(--foreground-400));\n display: table-cell !important;\n }\n\n .filterBar {\n @apply mb-4 rounded-sm border p-4;\n background-color: var(--table-filter-background, var(--background-900));\n border-color: var(--table-filter-border, var(--background-800));\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n }\n\n .filterLabel {\n @apply mb-2 block text-sm font-medium;\n color: var(--table-filter-label-color, var(--foreground-300));\n }\n\n .filterInput {\n @apply w-full rounded-md border px-3 py-2 transition-all;\n background-color: var(--table-filter-input-background, var(--background-950));\n border-color: var(--table-filter-input-border, var(--background-700));\n color: var(--table-filter-input-foreground, var(--foreground-50));\n\n &::placeholder {\n color: var(--table-filter-input-placeholder, var(--foreground-400));\n }\n\n &:hover {\n border-color: var(--table-filter-input-border-hover, var(--background-600));\n }\n\n &:focus {\n outline: none;\n border-color: var(--table-filter-input-border-focus, var(--accent-500));\n box-shadow: 0 0 0 2px var(--table-filter-input-ring, rgba(99, 102, 241, 0.2));\n }\n }\n}\n",
130
+ "styleableParts": [
246
131
  {
247
- "name": "--background-disabled",
248
- "value": "var(--background-900)",
249
- "defaultValue": null,
250
- "referencedVars": [
251
- "--background-900"
252
- ],
253
- "variant": ".scroll-wrapper"
132
+ "name": "root"
254
133
  },
255
134
  {
256
- "name": "--focus-visible",
257
- "value": "var(--accent-500)",
258
- "defaultValue": null,
259
- "referencedVars": [
260
- "--accent-500"
261
- ],
262
- "variant": ".scroll-wrapper"
135
+ "name": "container"
263
136
  },
264
137
  {
265
- "name": "--disabled-opacity",
266
- "value": "0.6",
267
- "defaultValue": null,
268
- "referencedVars": [],
269
- "variant": ".scroll-wrapper"
138
+ "name": "filterBar"
270
139
  },
271
140
  {
272
- "name": "--padding-inline",
273
- "value": "0.5rem",
274
- "defaultValue": null,
275
- "referencedVars": [],
276
- "variant": ".textarea[data-size=\"sm\"]"
141
+ "name": "table"
277
142
  },
278
143
  {
279
- "name": "--padding-block",
280
- "value": "0.25rem",
281
- "defaultValue": null,
282
- "referencedVars": [],
283
- "variant": ".textarea[data-size=\"sm\"]"
144
+ "name": "thead"
284
145
  },
285
146
  {
286
- "name": "--padding-inline",
287
- "value": "0.75rem",
288
- "defaultValue": null,
289
- "referencedVars": [],
290
- "variant": ".textarea[data-size=\"md\"]"
147
+ "name": "tbody"
291
148
  },
292
149
  {
293
- "name": "--padding-block",
294
- "value": "0.5rem",
295
- "defaultValue": null,
296
- "referencedVars": [],
297
- "variant": ".textarea[data-size=\"md\"]"
150
+ "name": "headerRow"
298
151
  },
299
152
  {
300
- "name": "--padding-inline",
301
- "value": "1rem",
302
- "defaultValue": null,
303
- "referencedVars": [],
304
- "variant": ".textarea[data-size=\"lg\"]"
153
+ "name": "headerCell"
305
154
  },
306
155
  {
307
- "name": "--padding-block",
308
- "value": "0.75rem",
309
- "defaultValue": null,
310
- "referencedVars": [],
311
- "variant": ".textarea[data-size=\"lg\"]"
156
+ "name": "bodyRow"
312
157
  },
313
158
  {
314
- "name": "--count-foreground",
315
- "value": "var(--foreground-400)",
316
- "defaultValue": null,
317
- "referencedVars": [
318
- "--foreground-400"
319
- ],
320
- "variant": ".character-count"
159
+ "name": "cell"
321
160
  },
322
161
  {
323
- "name": "--count-over-limit-foreground",
324
- "value": "var(--danger-600)",
325
- "defaultValue": null,
326
- "referencedVars": [
327
- "--danger-600"
328
- ],
329
- "variant": ".character-count"
162
+ "name": "emptyState"
330
163
  }
331
- ]
164
+ ],
165
+ "cssVariables": []
332
166
  },
333
- "toast": {
334
- "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-hover: transparent;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm, 0.375rem);\n color: var(--foreground);\n opacity: 0.6;\n transition: opacity 0.15s var(--ease-settle-in);\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 opacity: 1;\n background: var(--background-hover);\n }\n }\n\n .close-icon {\n @apply h-4 w-4;\n }\n}\n",
167
+ "textarea": {
168
+ "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-sm);\n line-height: var(--leading-snug);\n outline: none;\n transition:\n background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &:hover:not([data-disabled]),\n &[data-hovered=\"true\"]:not([data-disabled]) {\n background-color: var(--background-hover);\n }\n\n &[data-disabled=\"true\"] {\n background-color: var(--background-disabled);\n color: var(--foreground-disabled);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-error=\"true\"] {\n border-color: var(--background-error-border);\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 background-color: transparent;\n opacity: 1;\n }\n\n &[data-error=\"true\"] {\n border-color: transparent;\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 @apply w-full;\n }\n\n .surface {\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\n &:hover:not([data-disabled=\"true\"]),\n &[data-hovered=\"true\"]:not([data-disabled=\"true\"]) {\n background-color: var(--background-hover);\n }\n\n &[data-disabled=\"true\"] {\n background-color: var(--background-disabled);\n opacity: var(--disabled-opacity);\n }\n\n &[data-error=\"true\"] {\n border-color: var(--background-error-border);\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(--handle-background);\n transition: background-color 150ms;\n }\n\n &:hover::before,\n &:hover::after {\n background-color: var(--handle-hover-background);\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(--count-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(--count-over-limit-foreground);\n }\n}\n",
335
169
  "styleableParts": [
336
170
  {
337
171
  "name": "root"
338
172
  },
339
173
  {
340
- "name": "iconWrap"
174
+ "name": "container"
341
175
  },
342
176
  {
343
- "name": "icon"
177
+ "name": "surface"
344
178
  },
345
179
  {
346
- "name": "content"
180
+ "name": "scrollWrapper"
347
181
  },
348
182
  {
349
- "name": "title"
183
+ "name": "resizeHandle.both"
350
184
  },
351
185
  {
352
- "name": "description"
186
+ "name": "resizeHandle.x"
353
187
  },
354
188
  {
355
- "name": "close"
189
+ "name": "resizeHandle.y"
356
190
  },
357
191
  {
358
- "name": "closeIcon"
192
+ "name": "characterCount"
359
193
  }
360
194
  ],
361
195
  "cssVariables": [
362
196
  {
363
- "name": "--foreground",
364
- "value": "inherit",
197
+ "name": "--padding-inline",
198
+ "value": "0.75rem",
365
199
  "defaultValue": null,
366
200
  "referencedVars": [],
367
- "variant": ".title"
201
+ "variant": ".textarea"
368
202
  },
369
203
  {
370
- "name": "--foreground",
371
- "value": "inherit",
204
+ "name": "--padding-block",
205
+ "value": "0.5rem",
372
206
  "defaultValue": null,
373
207
  "referencedVars": [],
374
- "variant": ".description"
208
+ "variant": ".textarea"
375
209
  },
376
210
  {
377
- "name": "--foreground",
378
- "value": "currentColor",
211
+ "name": "--padding-inline",
212
+ "value": "0.5rem",
379
213
  "defaultValue": null,
380
214
  "referencedVars": [],
381
- "variant": ".close"
215
+ "variant": ".size-sm"
382
216
  },
383
217
  {
384
- "name": "--background-hover",
385
- "value": "transparent",
218
+ "name": "--padding-block",
219
+ "value": "0.25rem",
386
220
  "defaultValue": null,
387
221
  "referencedVars": [],
388
- "variant": ".close"
389
- }
390
- ]
391
- },
392
- "tabs": {
393
- "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: auto;\n min-width: 120px;\n height: 100%;\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-color);\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 rounded-sm px-2 py-1.5 cursor-pointer select-none;\n height: 100%;\n background-color: var(--background);\n border: none;\n color: var(--foreground);\n outline: none;\n transition: color 0.15s ease, background-color 0.15s ease;\n\n\n &:not([data-disabled]):not([data-selected=\"true\"]) {\n &:hover {\n background-color: var(--background-hover);\n color: var(--foreground-hover);\n }\n\n &:active {\n background-color: var(--background-pressed);\n color: var(--foreground-pressed);\n }\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n color: var(--foreground-selected);\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list & {\n background-color: var(--background-selected);\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: transparent;\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 &[data-focus-visible] {\n background-color: var(--background-focused);\n outline: none;\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-xs);\n border-bottom: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"] &:not([data-disabled]):not([data-selected=\"true\"]):hover {\n background-color: var(--background-hover);\n }\n\n .list[data-variant=\"underline\"] &:not([data-disabled]):not([data-selected=\"true\"]):active {\n background-color: var(--background-pressed);\n }\n\n .list[data-variant=\"underline\"] &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n }\n\n .list[data-variant=\"underline\"] &[data-focus-visible] {\n background-color: var(--background-focused);\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",
394
- "styleableParts": [
395
- {
396
- "name": "root"
222
+ "variant": ".size-sm"
397
223
  },
398
224
  {
399
- "name": "indicator"
225
+ "name": "--padding-inline",
226
+ "value": "0.75rem",
227
+ "defaultValue": null,
228
+ "referencedVars": [],
229
+ "variant": ".size-md"
400
230
  },
401
231
  {
402
- "name": "icon.left"
232
+ "name": "--padding-block",
233
+ "value": "0.5rem",
234
+ "defaultValue": null,
235
+ "referencedVars": [],
236
+ "variant": ".size-md"
403
237
  },
404
238
  {
405
- "name": "icon.right"
406
- }
407
- ],
408
- "cssVariables": [
239
+ "name": "--padding-inline",
240
+ "value": "1rem",
241
+ "defaultValue": null,
242
+ "referencedVars": [],
243
+ "variant": ".size-lg"
244
+ },
409
245
  {
410
- "name": "--disabled-opacity",
411
- "value": "0.5",
246
+ "name": "--padding-block",
247
+ "value": "0.75rem",
412
248
  "defaultValue": null,
413
249
  "referencedVars": [],
414
- "variant": ".trigger[data-disabled=\"true\"]"
250
+ "variant": ".size-lg"
415
251
  }
416
252
  ]
417
253
  },
418
254
  "switch": {
419
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .switch {\n --radius: 9999px;\n --inner-radius: calc(var(--radius) - var(--border-width-base));\n\n --width: 2.75rem;\n --height: 1.5rem;\n --thumb-size: 1rem;\n --thumb-offset: 0.25rem;\n\n --disabled-opacity: 0.6;\n\n @apply relative inline-flex cursor-pointer items-center;\n user-select: none;\n width: var(--width);\n height: var(--height);\n }\n\n .switch-track {\n @apply absolute inset-0;\n transition: background-color 180ms var(--ease-snappy-pop), border-color 180ms var(--ease-snappy-pop), transform 180ms var(--ease-snappy-pop);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border-color);\n border-radius: var(--radius);\n }\n\n .switch:active:not([data-disabled]) .switch-track {\n transform: scale(0.98);\n }\n\n .switch-thumb {\n @apply absolute top-0 bottom-0 my-auto;\n left: var(--thumb-offset);\n width: var(--thumb-size);\n height: var(--thumb-size);\n transition: left 180ms var(--ease-snappy-pop), background-color 180ms var(--ease-snappy-pop);\n background-color: var(--foreground);\n border-radius: var(--inner-radius);\n z-index: 1;\n pointer-events: none;\n }\n\n .switch[data-selected] .switch-track {\n background-color: var(--background-active);\n border-color: var(--border-color-active);\n }\n\n .switch[data-selected] .switch-thumb {\n background-color: var(--foreground-active);\n left: calc(var(--width) - var(--thumb-size) - var(--thumb-offset));\n }\n\n @media (hover: hover) {\n .switch[data-selected]:not([data-disabled]):hover .switch-track {\n border-color: var(--border-color-hover);\n }\n }\n\n .switch[data-selected]:not([data-disabled]):active .switch-track {\n border-color: var(--border-color-pressed);\n }\n\n .switch[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .switch[data-focus-visible] {\n box-shadow: var(--focus-visible);\n }\n\n .switch-sm {\n --width: 1.75rem;\n --height: 1rem;\n --thumb-size: 0.625rem;\n --thumb-offset: 0.1875rem;\n }\n}\n",
255
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .switch {\n --radius: 9999px;\n --inner-radius: calc(var(--radius) - var(--border-width-base));\n\n --width: 2.75rem;\n --height: 1.5rem;\n --thumb-size: 1rem;\n --thumb-offset: 0.25rem;\n\n --disabled-opacity: 0.6;\n\n @apply relative inline-flex cursor-pointer items-center;\n user-select: none;\n border-radius: var(--radius);\n width: var(--width);\n height: var(--height);\n }\n\n .switch-track {\n @apply absolute inset-0;\n transition: background-color 180ms var(--ease-snappy-pop), border-color 180ms var(--ease-snappy-pop), transform 180ms var(--ease-snappy-pop);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border-color);\n border-radius: var(--radius);\n }\n\n .switch:active:not([data-disabled]) .switch-track {\n transform: scale(0.98);\n }\n\n .switch-thumb {\n @apply absolute top-0 bottom-0 my-auto;\n left: var(--thumb-offset);\n width: var(--thumb-size);\n height: var(--thumb-size);\n transition: left 180ms var(--ease-snappy-pop), background-color 180ms var(--ease-snappy-pop);\n background-color: var(--foreground);\n border-radius: var(--inner-radius);\n z-index: 1;\n pointer-events: none;\n }\n\n .switch[data-selected] .switch-track {\n background-color: var(--background-active);\n border-color: var(--border-color-active);\n }\n\n .switch[data-selected] .switch-thumb {\n background-color: var(--foreground-active);\n left: calc(var(--width) - var(--thumb-size) - var(--thumb-offset));\n }\n\n @media (hover: hover) {\n .switch[data-selected]:not([data-disabled]):hover .switch-track {\n border-color: var(--border-color-hover);\n }\n }\n\n .switch[data-selected]:not([data-disabled]):active .switch-track {\n border-color: var(--border-color-pressed);\n }\n\n .switch[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n\n .switch-sm {\n --width: 1.75rem;\n --height: 1rem;\n --thumb-size: 0.625rem;\n --thumb-offset: 0.1875rem;\n }\n}\n",
420
256
  "styleableParts": [
421
257
  {
422
258
  "name": "root"
@@ -511,47 +347,8 @@ export const generatedStyles = {
511
347
  }
512
348
  ]
513
349
  },
514
- "table": {
515
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply overflow-x-auto rounded-md;\n border: 1px solid var(--table-border, var(--background-800));\n }\n\n .table {\n @apply w-full text-sm;\n background-color: var(--table-background, transparent);\n color: var(--table-foreground, currentColor);\n }\n\n .thead {\n @apply contents;\n }\n\n .headerRow {\n @apply contents;\n }\n\n .headerCell {\n @apply px-4 py-3 text-left font-semibold;\n background-color: var(--table-header-background, var(--background-900));\n color: var(--table-header-foreground, var(--foreground-200));\n border-bottom: 1px solid var(--table-border, var(--background-800));\n }\n\n .tbody {\n @apply contents;\n }\n\n .bodyRow {\n @apply contents;\n\n &[data-interactive=\"true\"] {\n @apply cursor-pointer;\n\n & td {\n @apply transition-colors;\n }\n\n &:hover td {\n background-color: var(--table-body-background-hover, var(--background-900));\n }\n }\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3;\n background-color: var(--table-cell-background, transparent);\n color: var(--table-cell-foreground, var(--foreground-300));\n border-bottom: 1px solid var(--table-border, var(--background-800));\n\n &:last-child {\n border-bottom: none;\n }\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n color: var(--table-empty-foreground, var(--foreground-400));\n display: table-cell !important;\n }\n\n .filterBar {\n @apply mb-4 rounded-sm border p-4;\n background-color: var(--table-filter-background, var(--background-900));\n border-color: var(--table-filter-border, var(--background-800));\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n }\n\n .filterLabel {\n @apply mb-2 block text-sm font-medium;\n color: var(--table-filter-label-color, var(--foreground-300));\n }\n\n .filterInput {\n @apply w-full rounded-md border px-3 py-2 transition-all;\n background-color: var(--table-filter-input-background, var(--background-950));\n border-color: var(--table-filter-input-border, var(--background-700));\n color: var(--table-filter-input-foreground, var(--foreground-50));\n\n &::placeholder {\n color: var(--table-filter-input-placeholder, var(--foreground-400));\n }\n\n &:hover {\n border-color: var(--table-filter-input-border-hover, var(--background-600));\n }\n\n &:focus {\n outline: none;\n border-color: var(--table-filter-input-border-focus, var(--accent-500));\n box-shadow: 0 0 0 2px var(--table-filter-input-ring, rgba(99, 102, 241, 0.2));\n }\n }\n}\n",
516
- "styleableParts": [
517
- {
518
- "name": "root"
519
- },
520
- {
521
- "name": "container"
522
- },
523
- {
524
- "name": "filterBar"
525
- },
526
- {
527
- "name": "table"
528
- },
529
- {
530
- "name": "thead"
531
- },
532
- {
533
- "name": "tbody"
534
- },
535
- {
536
- "name": "headerRow"
537
- },
538
- {
539
- "name": "headerCell"
540
- },
541
- {
542
- "name": "bodyRow"
543
- },
544
- {
545
- "name": "cell"
546
- },
547
- {
548
- "name": "emptyState"
549
- }
550
- ],
551
- "cssVariables": []
552
- },
553
350
  "slider": {
554
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .slider {\n --disabled-opacity: 0.6;\n\n @apply relative flex w-full items-center;\n touch-action: none;\n user-select: none;\n }\n\n .slider[data-size=\"sm\"] { @apply h-6; }\n .slider[data-size=\"md\"] { @apply h-8; }\n .slider[data-size=\"lg\"] { @apply h-10; }\n\n .slider[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .track {\n --track-height-sm: 0.25rem;\n --track-height-md: 0.375rem;\n --track-height-lg: 0.5rem;\n\n @apply relative flex grow items-center;\n flex-grow: 1;\n overflow: visible;\n border-radius: var(--radius-xs);\n background-color: var(--track-background);\n }\n\n .slider[data-size=\"sm\"] .track { height: var(--track-height-sm); }\n .slider[data-size=\"md\"] .track { height: var(--track-height-md); }\n .slider[data-size=\"lg\"] .track { height: var(--track-height-lg); }\n\n .range {\n @apply absolute h-full;\n background-color: var(--range-background);\n transition: background-color 200ms var(--ease-snappy-pop);\n border-radius: var(--radius-xs);\n }\n\n .slider[data-disabled] .range { background-color: var(--range-disabled-background); }\n\n .thumb {\n --thumb-size-sm: 0.75rem;\n --thumb-size-md: 1rem;\n --thumb-size-lg: 1.25rem;\n\n @apply absolute block;\n background-color: var(--thumb-background);\n border-radius: 9999px;\n outline: none;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n .slider[data-size=\"sm\"] .thumb {\n width: var(--thumb-size-sm);\n height: var(--thumb-size-sm);\n }\n\n .slider[data-size=\"md\"] .thumb {\n width: var(--thumb-size-md);\n height: var(--thumb-size-md);\n }\n\n .slider[data-size=\"lg\"] .thumb {\n width: var(--thumb-size-lg);\n height: var(--thumb-size-lg);\n }\n\n .slider[data-disabled] .thumb {\n background-color: var(--thumb-disabled-background);\n cursor: not-allowed;\n }\n\n .thumb[data-focus-visible=\"true\"] {\n background-color: var(--thumb-focused-background);\n box-shadow: 0 0 0 3px var(--focus-visible);\n }\n\n .thumb[data-dragging] {\n cursor: grabbing;\n transform: translate(-50%, -50%) scale(1.1);\n }\n}\n",
351
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .slider {\n --disabled-opacity: 0.6;\n --slider-track-size: 0.375rem;\n --slider-thumb-size: 1rem;\n\n @apply relative flex w-full items-center;\n min-inline-size: 12rem;\n min-height: 2rem;\n touch-action: none;\n user-select: none;\n }\n\n .track {\n @apply relative flex grow items-center;\n flex-grow: 1;\n height: var(--slider-track-size);\n overflow: visible;\n border-radius: var(--radius-xs, 0.25rem);\n background-color: var(--background);\n }\n\n .range {\n @apply absolute;\n border-radius: var(--radius-xs, 0.25rem);\n background-color: var(--background);\n transition: background-color 200ms var(--ease-snappy-pop);\n }\n\n .thumb {\n @apply absolute block;\n top: 50%;\n width: var(--slider-thumb-size);\n height: var(--slider-thumb-size);\n transform: translate(-50%, -50%);\n border-radius: var(--radius-full, 9999px);\n outline: none;\n background-color: var(--background);\n transition:\n background-color 200ms var(--ease-snappy-pop),\n transform 200ms var(--ease-snappy-pop);\n }\n\n .slider[data-orientation=\"horizontal\"] .range {\n top: 0;\n height: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] {\n justify-content: center;\n min-height: 10rem;\n min-inline-size: auto;\n width: fit-content;\n }\n\n .slider[data-orientation=\"vertical\"] .track {\n width: var(--slider-track-size);\n height: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] .range {\n left: 0;\n width: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] .thumb {\n left: 50%;\n top: auto;\n transform: translate(-50%, 50%);\n }\n\n .slider[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .slider[data-disabled=\"true\"] .range {\n background-color: var(--background-disabled, var(--background));\n }\n\n .thumb[data-disabled=\"true\"] {\n cursor: not-allowed;\n background-color: var(--background-disabled, var(--background));\n }\n\n .thumb[data-pressed=\"true\"] {\n transform: translate(-50%, -50%) scale(1.08);\n }\n\n .slider[data-orientation=\"vertical\"] .thumb[data-pressed=\"true\"] {\n transform: translate(-50%, 50%) scale(1.08);\n }\n}\n",
555
352
  "styleableParts": [
556
353
  {
557
354
  "name": "root"
@@ -575,51 +372,23 @@ export const generatedStyles = {
575
372
  "variant": ".slider"
576
373
  },
577
374
  {
578
- "name": "--track-height-sm",
579
- "value": "0.25rem",
580
- "defaultValue": null,
581
- "referencedVars": [],
582
- "variant": ".track"
583
- },
584
- {
585
- "name": "--track-height-md",
375
+ "name": "--slider-track-size",
586
376
  "value": "0.375rem",
587
377
  "defaultValue": null,
588
378
  "referencedVars": [],
589
- "variant": ".track"
590
- },
591
- {
592
- "name": "--track-height-lg",
593
- "value": "0.5rem",
594
- "defaultValue": null,
595
- "referencedVars": [],
596
- "variant": ".track"
597
- },
598
- {
599
- "name": "--thumb-size-sm",
600
- "value": "0.75rem",
601
- "defaultValue": null,
602
- "referencedVars": [],
603
- "variant": ".thumb"
379
+ "variant": ".slider"
604
380
  },
605
381
  {
606
- "name": "--thumb-size-md",
382
+ "name": "--slider-thumb-size",
607
383
  "value": "1rem",
608
384
  "defaultValue": null,
609
385
  "referencedVars": [],
610
- "variant": ".thumb"
611
- },
612
- {
613
- "name": "--thumb-size-lg",
614
- "value": "1.25rem",
615
- "defaultValue": null,
616
- "referencedVars": [],
617
- "variant": ".thumb"
386
+ "variant": ".slider"
618
387
  }
619
388
  ]
620
389
  },
621
390
  "select": {
622
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n --trigger-padding-inline: calc(var(--spacing) * 2);\n --trigger-padding-block: calc(var(--spacing) * 1.75);\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\n @apply p-0 gap-0 w-full flex-row items-center;\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\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 background-color: var(--background-hover);\n }\n }\n\n &[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 2px var(--focus-visible-background), 0 0 0 4px var(--focus-visible);\n @apply outline-none;\n }\n\n :global(.group) &[data-focus-visible=\"true\"] {\n @apply outline-none;\n }\n }\n\n .trigger-compact {\n @apply flex-none w-auto;\n }\n\n 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\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 .trigger[data-open=\"true\"] .icon {\n transform: rotate(180deg);\n }\n\n .value {\n @apply px-2 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 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 &[data-state=\"open\"][data-placement=\"bottom\"] { animation: slide-in-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"open\"][data-placement=\"top\"] { animation: slide-in-from-bottom 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"bottom\"] { animation: slide-out-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"top\"] { animation: slide-out-from-bottom 0.15s var(--ease-snappy-pop); }\n }\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 border-radius: var(--background-inner-radius);\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n\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 background-color: var(--background-highlighted);\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 transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\n &:focus-within {\n @apply outline-none;\n box-shadow: 0 0 0 1px var(--focus-visible);\n z-index: 1;\n }\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: var(--trigger-padding-block) calc(var(--trigger-padding-inline) * 1.5);\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 padding-inline: calc(var(--trigger-padding-inline) * 1.5);\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 .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 background-color: var(--background-highlighted);\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 @keyframes slide-in-from-top { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-in-from-bottom { from { opacity: 0; translate: 0 2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-out-from-top { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -2px; } }\n @keyframes slide-out-from-bottom { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 2px; } }\n}\n",
391
+ "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) * 2);\n --trigger-padding-block: calc(var(--spacing) * 1.75);\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\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\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 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 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\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 .trigger[data-open=\"true\"] .icon {\n transform: rotate(180deg);\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 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 &[data-state=\"open\"][data-placement=\"bottom\"] { animation: slide-in-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"open\"][data-placement=\"top\"] { animation: slide-in-from-bottom 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"bottom\"] { animation: slide-out-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"top\"] { animation: slide-out-from-bottom 0.15s var(--ease-snappy-pop); }\n }\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 border-radius: var(--background-inner-radius);\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n\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 background-color: var(--background-highlighted);\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 transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\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: var(--trigger-padding-block) calc(var(--trigger-padding-inline) * 1.5);\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 padding-inline: calc(var(--trigger-padding-inline) * 1.5);\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 .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 background-color: var(--background-highlighted);\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 @keyframes slide-in-from-top { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-in-from-bottom { from { opacity: 0; translate: 0 2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-out-from-top { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -2px; } }\n @keyframes slide-out-from-bottom { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 2px; } }\n}\n",
623
392
  "styleableParts": [
624
393
  {
625
394
  "name": "root"
@@ -809,7 +578,7 @@ export const generatedStyles = {
809
578
  ]
810
579
  },
811
580
  "radio": {
812
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-group {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n background-color: var(--background);\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n border-color: var(--background-selected-border);\n }\n\n &[data-error=\"true\"] {\n border-color: var(--background-error-border);\n }\n\n &[data-error=\"true\"][data-selected=\"true\"] {\n border-color: var(--background-selected-border);\n }\n\n &[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n outline: none;\n }\n }\n\n .radio-item:active .radio {\n transform: scale(0.92);\n }\n\n .radio-dot {\n border-radius: 9999px;\n background-color: var(--dot-color);\n transform: scale(0);\n transform-origin: center;\n transition: transform 200ms var(--ease-snappy-pop), background-color 200ms var(--ease-snappy-pop);\n }\n\n .radio[data-selected=\"true\"] .radio-dot {\n background-color: var(--dot-selected-color);\n transform: scale(1);\n }\n\n @media (hover: hover) {\n .radio-item:not([data-disabled=\"true\"]):hover .radio {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n opacity: 0.9;\n }\n }\n\n .radio-item[data-disabled=\"true\"] .radio {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .radio-label {\n @apply cursor-pointer;\n color: var(--foreground);\n font-size: inherit;\n font-weight: var(--font-weight-medium, 500);\n line-height: inherit;\n transition: color 200ms var(--ease-snappy-pop);\n user-select: none;\n\n &[data-disabled=\"true\"] {\n color: var(--foreground-disabled, var(--foreground));\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n }\n\n .radio-description {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.125rem;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-error=\"true\"] {\n color: var(--foreground-error, var(--foreground));\n }\n }\n\n .helper-text {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.5rem;\n margin-left: 2rem;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-error=\"true\"] {\n color: var(--foreground-error, var(--foreground));\n }\n }\n\n .radio.sm {\n @apply h-4 w-4;\n }\n\n .radio.sm .radio-dot {\n width: 0.375rem;\n height: 0.375rem;\n }\n\n .radio.md {\n @apply h-5 w-5;\n }\n\n .radio.md .radio-dot {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n .radio.lg {\n @apply h-6 w-6;\n }\n\n .radio.lg .radio-dot {\n width: 0.75rem;\n height: 0.75rem;\n }\n}\n",
581
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-group {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n position: relative;\n overflow: visible;\n }\n\n .radio-surface {\n @apply inline-flex shrink-0;\n border-radius: 9999px;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n background-color: var(--background);\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n border-color: var(--background-selected-border);\n }\n\n &[data-error=\"true\"] {\n border-color: var(--background-error-border);\n }\n\n &[data-error=\"true\"][data-selected=\"true\"] {\n border-color: var(--background-selected-border);\n }\n\n &[data-focus-visible=\"true\"] {\n outline: none;\n }\n }\n\n .radio-item:active .radio {\n transform: scale(0.92);\n }\n\n .radio-dot {\n border-radius: 9999px;\n background-color: var(--dot-color);\n transform: scale(0);\n transform-origin: center;\n transition: transform 200ms var(--ease-snappy-pop), background-color 200ms var(--ease-snappy-pop);\n }\n\n .radio[data-selected=\"true\"] .radio-dot {\n background-color: var(--dot-selected-color);\n transform: scale(1);\n }\n\n @media (hover: hover) {\n .radio-item:not([data-disabled=\"true\"]):hover .radio {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n opacity: 0.9;\n }\n }\n\n .radio-item[data-disabled=\"true\"] .radio {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .radio-label {\n @apply cursor-pointer;\n color: var(--foreground);\n font-size: inherit;\n font-weight: var(--font-weight-medium, 500);\n line-height: inherit;\n transition: color 200ms var(--ease-snappy-pop);\n user-select: none;\n\n &[data-disabled=\"true\"] {\n color: var(--foreground-disabled, var(--foreground));\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n }\n\n .radio-description {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.125rem;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-error=\"true\"] {\n color: var(--foreground-error, var(--foreground));\n }\n }\n\n .helper-text {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.5rem;\n margin-left: 2rem;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-error=\"true\"] {\n color: var(--foreground-error, var(--foreground));\n }\n }\n\n .radio.sm {\n @apply h-4 w-4;\n }\n\n .radio.sm .radio-dot {\n width: 0.375rem;\n height: 0.375rem;\n }\n\n .radio.md {\n @apply h-5 w-5;\n }\n\n .radio.md .radio-dot {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n .radio.lg {\n @apply h-6 w-6;\n }\n\n .radio.lg .radio-dot {\n width: 0.75rem;\n height: 0.75rem;\n }\n}\n",
813
582
  "styleableParts": [
814
583
  {
815
584
  "name": "root"
@@ -915,63 +684,22 @@ export const generatedStyles = {
915
684
  ]
916
685
  },
917
686
  "path": {
918
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n --foreground: var(--foreground-primary);\n --foreground-muted: var(--foreground-secondary);\n --separator-color: var(--border-secondary);\n --focus-ring-color: var(--accent-500);\n --disabled-opacity: 0.6;\n\n @apply block;\n }\n\n .path-list {\n list-style: none;\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n flex-wrap: wrap;\n }\n\n .path-list.with-custom-separator .path-item:not(:last-child)::after {\n content: none;\n }\n\n .path-item {\n @apply m-0 flex items-center gap-2 p-0;\n }\n\n /* Separator after each item except the last */\n .path-item:not(:last-child)::after {\n content: '/';\n color: var(--separator-color);\n margin-left: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n\n /* Custom separator element */\n .separator {\n list-style: none;\n @apply m-0 flex items-center p-0;\n color: var(--separator-color);\n user-select: none;\n pointer-events: none;\n }\n\n .path-item-link {\n @apply relative cursor-pointer rounded-sm px-2 py-1;\n color: var(--foreground);\n text-decoration: none;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n line-height: 1.5;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover:not([data-disabled='true']) {\n background-color: var(--background-hover, rgba(0, 0, 0, 0.04));\n color: var(--accent-600);\n }\n\n &:active:not([data-disabled='true']) {\n background-color: var(--background-active, rgba(0, 0, 0, 0.08));\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-current='true'] {\n color: var(--foreground-muted);\n cursor: default;\n font-weight: var(--font-weight-medium);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &[data-disabled='true'] {\n color: var(--foreground-muted);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n\n &:hover {\n background-color: transparent;\n }\n }\n }\n}\n",
687
+ "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 }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--separator-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(--separator-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 background-color: transparent;\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 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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 background-color: var(--background-hover);\n color: var(--foreground-hover);\n }\n\n .link[data-pressed=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n background-color: var(--background-pressed);\n }\n\n .link[data-selected=\"true\"] {\n color: var(--foreground-selected);\n cursor: default;\n }\n\n .link[data-selected=\"true\"][data-hovered=\"true\"] {\n background-color: transparent;\n }\n\n .link[data-disabled=\"true\"] {\n color: var(--foreground-disabled);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n .link[data-disabled=\"true\"][data-hovered=\"true\"] {\n background-color: transparent;\n }\n}\n",
919
688
  "styleableParts": [
920
689
  {
921
690
  "name": "root"
922
691
  },
923
692
  {
924
- "name": "list"
925
- },
926
- {
927
- "name": "separator"
928
- }
929
- ],
930
- "cssVariables": [
931
- {
932
- "name": "--foreground",
933
- "value": "var(--foreground-primary)",
934
- "defaultValue": null,
935
- "referencedVars": [
936
- "--foreground-primary"
937
- ],
938
- "variant": ".path"
939
- },
940
- {
941
- "name": "--foreground-muted",
942
- "value": "var(--foreground-secondary)",
943
- "defaultValue": null,
944
- "referencedVars": [
945
- "--foreground-secondary"
946
- ],
947
- "variant": ".path"
948
- },
949
- {
950
- "name": "--separator-color",
951
- "value": "var(--border-secondary)",
952
- "defaultValue": null,
953
- "referencedVars": [
954
- "--border-secondary"
955
- ],
956
- "variant": ".path"
957
- },
958
- {
959
- "name": "--focus-ring-color",
960
- "value": "var(--accent-500)",
961
- "defaultValue": null,
962
- "referencedVars": [
963
- "--accent-500"
964
- ],
965
- "variant": ".path"
966
- },
967
- {
968
- "name": "--disabled-opacity",
969
- "value": "0.6",
970
- "defaultValue": null,
971
- "referencedVars": [],
972
- "variant": ".path"
693
+ "name": "link"
694
+ },
695
+ {
696
+ "name": "list"
697
+ },
698
+ {
699
+ "name": "separator"
973
700
  }
974
- ]
701
+ ],
702
+ "cssVariables": []
975
703
  },
976
704
  "panel": {
977
705
  "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: width 0.15s ease;\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 { width: 2px; }\n\n .resize[data-direction=\"vertical\"]:hover::before,\n .resize[data-direction=\"vertical\"][data-resizing=\"true\"]::before {\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",
@@ -1280,7 +1008,7 @@ export const generatedStyles = {
1280
1008
  ]
1281
1009
  },
1282
1010
  "input": {
1283
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n height: fit-content;\n flex: 1;\n min-width: 0;\n @apply py-1.5 px-3;\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: transparent;\n border: none;\n outline: none;\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n cursor: not-allowed;\n }\n\n /* Hide default browser spinners for number inputs */\n &[type=\"number\"] {\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n display: none;\n }\n\n /* Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n }\n }\n\n .icon-wrapper {\n @apply z-10 flex items-center;\n pointer-events: none;\n }\n\n .icon-left {\n @apply relative;\n }\n\n .icon-right {\n @apply relative;\n }\n\n .container {\n --adornment-offset: calc(var(--spacing, 0.25rem) * 1.5);\n\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-focused] {\n border-color: var(--background-focused-border);\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n }\n\n &[data-focus-visible] {\n @apply ring-0;\n border-color: var(--background-focused-border);\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n }\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &[data-error] {\n &[data-focused],\n &[data-focus-visible] {\n border-color: var(--focus-visible);\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n\n &[data-focused],\n &[data-focus-visible] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n }\n\n .start-adornments,\n .end-adornments {\n @apply flex items-center gap-1;\n align-self: stretch;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2.5;\n }\n\n .end-adornments {\n padding-right: var(--adornment-offset);\n\n &:has(.controls) {\n padding-right: 0;\n }\n\n &:has([data-hint]) {\n padding-right: 0;\n }\n }\n\n .actions {\n @apply flex items-center gap-1;\n pointer-events: auto;\n }\n\n .action {\n @apply flex items-center justify-center p-2;\n border-radius: 0.25rem;\n color: var(--action-foreground);\n }\n\n .action:hover {\n background-color: var(--action-background-hover);\n color: var(--action-foreground-hover);\n }\n\n .hint {\n @apply inline-flex items-center justify-center whitespace-nowrap;\n flex-shrink: 0;\n margin-inline-start: calc(var(--spacing, 0.25rem) * 0.5);\n margin-inline-end: var(--adornment-offset);\n font-size: var(--text-sm);\n line-height: 1;\n color: var(--foreground);\n background-color: var(--background);\n pointer-events: auto;\n }\n\n .controls {\n @apply flex w-7.5 flex-col;\n align-self: stretch;\n border-left: 1px solid var(--background-border);\n pointer-events: auto;\n }\n\n .controls[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .spin-button {\n @apply flex w-full flex-1 items-center justify-center p-0 cursor-pointer;\n flex: 1;\n background-color: transparent;\n border: none;\n color: var(--controls-color);\n transition: color 150ms ease-out, background-color 150ms ease-out;\n\n &+.spin-button {\n border-top: 1px solid var(--background-border);\n }\n\n &:hover:not(:disabled) {\n background-color: var(--controls-hover-background);\n color: var(--controls-hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--controls-active-background);\n color: var(--controls-active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n}\n",
1011
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .input {\n height: fit-content;\n flex: 1;\n min-width: 0;\n @apply py-1.5 px-3;\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: transparent;\n border: none;\n outline: none;\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n cursor: not-allowed;\n }\n\n /* Hide default browser spinners for number inputs */\n &[type=\"number\"] {\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n display: none;\n }\n\n /* Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n }\n }\n\n .icon-wrapper {\n @apply z-10 flex items-center;\n pointer-events: none;\n }\n\n .icon-left {\n @apply relative;\n }\n\n .icon-right {\n @apply relative;\n }\n\n .container {\n --adornment-offset: calc(var(--spacing, 0.25rem) * 1.5);\n\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &[data-variant=\"ghost\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .start-adornments,\n .end-adornments {\n @apply flex items-center gap-1;\n align-self: stretch;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2.5;\n }\n\n .end-adornments {\n padding-right: var(--adornment-offset);\n\n &:has(.controls) {\n padding-right: 0;\n }\n\n &:has([data-hint]) {\n padding-right: 0;\n }\n }\n\n .actions {\n @apply flex items-center gap-1;\n pointer-events: auto;\n }\n\n .action {\n @apply flex items-center justify-center p-2;\n border-radius: 0.25rem;\n color: var(--action-foreground);\n }\n\n .action:hover {\n background-color: var(--action-background-hover);\n color: var(--action-foreground-hover);\n }\n\n .hint {\n @apply inline-flex items-center justify-center whitespace-nowrap;\n flex-shrink: 0;\n margin-inline-start: calc(var(--spacing, 0.25rem) * 0.5);\n margin-inline-end: var(--adornment-offset);\n font-size: var(--text-sm);\n line-height: 1;\n color: var(--foreground);\n background-color: var(--background);\n pointer-events: auto;\n }\n\n .controls {\n @apply flex w-7.5 flex-col;\n align-self: stretch;\n border-left: 1px solid var(--background-border);\n pointer-events: auto;\n }\n\n .controls[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .spin-button {\n @apply flex w-full flex-1 items-center justify-center p-0 cursor-pointer;\n flex: 1;\n background-color: transparent;\n border: none;\n color: var(--controls-color);\n transition: color 150ms ease-out, background-color 150ms ease-out;\n\n &+.spin-button {\n border-top: 1px solid var(--background-border);\n }\n\n &:hover:not(:disabled) {\n background-color: var(--controls-hover-background);\n color: var(--controls-hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--controls-active-background);\n color: var(--controls-active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n}\n",
1284
1012
  "styleableParts": [
1285
1013
  {
1286
1014
  "name": "root"
@@ -1307,11 +1035,32 @@ export const generatedStyles = {
1307
1035
  "--spacing"
1308
1036
  ],
1309
1037
  "variant": ".container"
1038
+ },
1039
+ {
1040
+ "name": "--ring-shadow",
1041
+ "value": "none",
1042
+ "defaultValue": null,
1043
+ "referencedVars": [],
1044
+ "variant": ".container[data-variant=\"ghost\"]"
1045
+ },
1046
+ {
1047
+ "name": "--ring-border",
1048
+ "value": "transparent",
1049
+ "defaultValue": null,
1050
+ "referencedVars": [],
1051
+ "variant": ".container[data-variant=\"ghost\"]"
1052
+ },
1053
+ {
1054
+ "name": "--ring-border-visible",
1055
+ "value": "transparent",
1056
+ "defaultValue": null,
1057
+ "referencedVars": [],
1058
+ "variant": ".container[data-variant=\"ghost\"]"
1310
1059
  }
1311
1060
  ]
1312
1061
  },
1313
1062
  "group": {
1314
- "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 .button {\n @apply w-full;\n }\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 &.ghost {\n @apply gap-1 border-none overflow-visible;\n\n &.none {\n @apply gap-0;\n }\n }\n }\n\n .item {\n @apply flex items-stretch;\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) {\n height: 100%;\n min-height: var(--item-height);\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-800));\n color: var(--button-selected-foreground, var(--foreground-100));\n }\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n\n input {\n @apply h-full px-2;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n }\n\n .group:not(.ghost) {\n .item :is(.button, .select) {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .input {\n --border-width-base: 0px;\n --background-border: transparent;\n --background-focused-border: transparent;\n --focus-visible: transparent;\n }\n\n &.none {\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 &.horizontal {\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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 :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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 :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.ghost {\n .button[data-selected=\"true\"] {\n border-radius: var(--background-inner-radius);\n }\n\n &:not(.none) .item .button[data-selected=\"false\"] {\n border-radius: var(--background-inner-radius);\n border: var(--border-width-base) solid transparent;\n }\n\n &.none {\n :is(.button, .select) {\n border: none;\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --background-border: transparent;\n --radius-sm: 0;\n }\n }\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"], .input > [data-focus-visible=\"true\"]) {\n @apply relative outline-none z-10;\n }\n\n .group:not(.ghost) :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"], .input > [data-focus-visible=\"true\"]) {\n box-shadow: inset 0 0 0 1px var(--focus-visible, var(--accent-500));\n }\n\n .group.ghost :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"], .input > [data-focus-visible=\"true\"]) {\n box-shadow: 0 0 0 1px var(--focus-visible, var(--accent-500));\n }\n}\n",
1063
+ "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 .button {\n @apply w-full;\n }\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-800));\n color: var(--button-selected-foreground, var(--foreground-100));\n }\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 input {\n @apply h-full px-2;\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 .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .input {\n --border-width-base: 0px;\n --background-border: transparent;\n --background-focused-border: transparent;\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 &.horizontal {\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\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",
1315
1064
  "styleableParts": [
1316
1065
  {
1317
1066
  "name": "root"
@@ -1336,6 +1085,9 @@ export const generatedStyles = {
1336
1085
  },
1337
1086
  {
1338
1087
  "name": "select"
1088
+ },
1089
+ {
1090
+ "name": "expand"
1339
1091
  }
1340
1092
  ],
1341
1093
  "cssVariables": [
@@ -1473,86 +1225,117 @@ export const generatedStyles = {
1473
1225
  "value": "0px",
1474
1226
  "defaultValue": null,
1475
1227
  "referencedVars": [],
1476
- "variant": ".group:not(.ghost) .input"
1228
+ "variant": ".group .input"
1477
1229
  },
1478
1230
  {
1479
1231
  "name": "--background-border",
1480
1232
  "value": "transparent",
1481
1233
  "defaultValue": null,
1482
1234
  "referencedVars": [],
1483
- "variant": ".group:not(.ghost) .input"
1235
+ "variant": ".group .input"
1484
1236
  },
1485
1237
  {
1486
1238
  "name": "--background-focused-border",
1487
1239
  "value": "transparent",
1488
1240
  "defaultValue": null,
1489
1241
  "referencedVars": [],
1490
- "variant": ".group:not(.ghost) .input"
1491
- },
1492
- {
1493
- "name": "--focus-visible",
1494
- "value": "transparent",
1495
- "defaultValue": null,
1496
- "referencedVars": [],
1497
- "variant": ".group:not(.ghost) .input"
1242
+ "variant": ".group .input"
1498
1243
  },
1499
1244
  {
1500
1245
  "name": "--background-radius",
1501
1246
  "value": "0",
1502
1247
  "defaultValue": null,
1503
1248
  "referencedVars": [],
1504
- "variant": ".group:not(.ghost).none :is(.button, .trigger, .select)"
1249
+ "variant": ".group.none :is(.button, .trigger, .select)"
1505
1250
  },
1506
1251
  {
1507
1252
  "name": "--background-inner-radius",
1508
1253
  "value": "0",
1509
1254
  "defaultValue": null,
1510
1255
  "referencedVars": [],
1511
- "variant": ".group:not(.ghost).none :is(.button, .trigger, .select)"
1256
+ "variant": ".group.none :is(.button, .trigger, .select)"
1512
1257
  },
1513
1258
  {
1514
1259
  "name": "--radius-sm",
1515
1260
  "value": "0",
1516
1261
  "defaultValue": null,
1517
1262
  "referencedVars": [],
1518
- "variant": ".group:not(.ghost).none .input"
1263
+ "variant": ".group.none .input"
1519
1264
  },
1520
1265
  {
1521
- "name": "--radius-sm",
1266
+ "name": "--group-item-radius",
1267
+ "value": "var(--background-inner-radius) 0 0 var(--background-inner-radius)",
1268
+ "defaultValue": null,
1269
+ "referencedVars": [
1270
+ "--background-inner-radius"
1271
+ ],
1272
+ "variant": ".group.none .item:first-child"
1273
+ },
1274
+ {
1275
+ "name": "--group-item-radius",
1276
+ "value": "0 var(--background-inner-radius) var(--background-inner-radius) 0",
1277
+ "defaultValue": null,
1278
+ "referencedVars": [
1279
+ "--background-inner-radius"
1280
+ ],
1281
+ "variant": ".group.none .item:last-child"
1282
+ },
1283
+ {
1284
+ "name": "--group-item-radius",
1285
+ "value": "var(--background-inner-radius) var(--background-inner-radius) 0 0",
1286
+ "defaultValue": null,
1287
+ "referencedVars": [
1288
+ "--background-inner-radius"
1289
+ ],
1290
+ "variant": ".group.none.vertical .item:first-child"
1291
+ },
1292
+ {
1293
+ "name": "--group-item-radius",
1294
+ "value": "0 0 var(--background-inner-radius) var(--background-inner-radius)",
1295
+ "defaultValue": null,
1296
+ "referencedVars": [
1297
+ "--background-inner-radius"
1298
+ ],
1299
+ "variant": ".group.none.vertical .item:last-child"
1300
+ },
1301
+ {
1302
+ "name": "--group-item-radius",
1522
1303
  "value": "var(--background-inner-radius)",
1523
1304
  "defaultValue": null,
1524
1305
  "referencedVars": [
1525
1306
  "--background-inner-radius"
1526
1307
  ],
1527
- "variant": ".group:not(.ghost):is(.xs, .sm) .input"
1308
+ "variant": ".group:is(.xs, .sm) .item"
1528
1309
  },
1529
1310
  {
1530
- "name": "--background-radius",
1531
- "value": "0",
1311
+ "name": "--radius-sm",
1312
+ "value": "var(--background-inner-radius)",
1532
1313
  "defaultValue": null,
1533
- "referencedVars": [],
1534
- "variant": ".group.ghost.none :is(.button, .select)"
1314
+ "referencedVars": [
1315
+ "--background-inner-radius"
1316
+ ],
1317
+ "variant": ".group:is(.xs, .sm) .input"
1535
1318
  },
1536
1319
  {
1537
- "name": "--background-inner-radius",
1538
- "value": "0",
1320
+ "name": "--ring-shadow",
1321
+ "value": "none",
1539
1322
  "defaultValue": null,
1540
1323
  "referencedVars": [],
1541
- "variant": ".group.ghost.none :is(.button, .select)"
1324
+ "variant": ".group [data-ring=\"true\"]"
1542
1325
  },
1543
1326
  {
1544
- "name": "--background-border",
1327
+ "name": "--ring-border",
1545
1328
  "value": "transparent",
1546
1329
  "defaultValue": null,
1547
1330
  "referencedVars": [],
1548
- "variant": ".group.ghost.none .input"
1331
+ "variant": ".group [data-ring=\"true\"]"
1549
1332
  },
1550
1333
  {
1551
- "name": "--radius-sm",
1552
- "value": "0",
1334
+ "name": "--ring-border-visible",
1335
+ "value": "transparent",
1553
1336
  "defaultValue": null,
1554
1337
  "referencedVars": [],
1555
- "variant": ".group.ghost.none .input"
1338
+ "variant": ".group [data-ring=\"true\"]"
1556
1339
  }
1557
1340
  ]
1558
1341
  },
@@ -1581,7 +1364,7 @@ export const generatedStyles = {
1581
1364
  ]
1582
1365
  },
1583
1366
  "gallery": {
1584
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .item {\n @apply flex flex-col border overflow-hidden no-underline cursor-pointer;\n\n background: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: inherit;\n }\n\n .item:focus {\n outline: none;\n }\n\n .item[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n outline: none;\n }\n\n .item[data-hovered=\"true\"] {\n border-color: var(--background-hover-border);\n }\n\n .item[data-pressed=\"true\"] {\n border-color: var(--background-pressed-border, var(--background-hover-border, var(--background-border)));\n }\n\n .item[data-orientation=\"horizontal\"] {\n @apply flex-row;\n }\n\n .item[data-orientation=\"horizontal\"] .view {\n width: var(--gallery-horizontal-view-width, 200px);\n }\n\n .view {\n --aspect-ratio: var(--gallery-aspect-ratio, 16/9);\n\n @apply relative overflow-hidden;\n aspect-ratio: var(--aspect-ratio);\n background: var(--background, transparent);\n }\n\n .view > img,\n .view > video {\n @apply w-full h-full object-cover;\n }\n\n .body {\n @apply flex flex-col gap-1 p-3 self-start min-w-0;\n }\n\n .item[data-orientation=\"horizontal\"] .body {\n flex: 1;\n align-self: stretch;\n }\n\n .body > :first-child {\n font-weight: var(--font-weight-medium, 500);\n color: var(--foreground);\n }\n\n .body > :not(:first-child) {\n font-size: var(--text-sm, 0.875rem);\n color: var(--foreground-muted, var(--foreground));\n }\n}\n",
1367
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .item-scope {\n @apply block min-w-0;\n }\n\n .item {\n --border-width: var(--border-width-base, 1px);\n --radius: var(--radius-sm, 0.375rem);\n --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n --view-width: 200px;\n\n @apply flex flex-col overflow-hidden no-underline cursor-pointer w-full;\n\n color: inherit;\n background: var(--background);\n border: var(--border-width) solid var(--background-border);\n border-radius: var(--radius);\n transition:\n border-color var(--transition),\n transform var(--transition),\n background-color var(--transition),\n box-shadow var(--transition);\n }\n\n .item:focus {\n outline: none;\n }\n\n .item[data-disabled=\"true\"] {\n @apply cursor-not-allowed;\n }\n\n .item[data-hovered=\"true\"] {\n border-color: var(--background-hover-border);\n }\n\n .item[data-pressed=\"true\"] {\n border-color: var(--background-pressed-border, var(--background-hover-border));\n }\n\n .item[data-orientation=\"horizontal\"] {\n @apply flex-row;\n }\n\n .item[data-orientation=\"horizontal\"] .view {\n width: var(--view-width);\n }\n\n .view {\n --aspect-ratio: 16/9;\n --background: transparent;\n\n @apply relative overflow-hidden;\n\n aspect-ratio: var(--aspect-ratio);\n background: var(--background);\n }\n\n .view > img,\n .view > video {\n @apply w-full h-full object-cover;\n }\n\n .body {\n --gap: calc(var(--spacing, 0.25rem) * 1);\n --padding: calc(var(--spacing, 0.25rem) * 3);\n --title-color: var(--foreground);\n --description-color: var(--foreground-muted, var(--foreground));\n\n @apply flex flex-col self-start min-w-0;\n\n gap: var(--gap);\n padding: var(--padding);\n }\n\n .item[data-orientation=\"horizontal\"] .body {\n flex: 1;\n align-self: stretch;\n }\n\n .body > :first-child {\n color: var(--title-color);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .body > :not(:first-child) {\n color: var(--description-color);\n font-size: var(--text-sm, 0.875rem);\n }\n}\n",
1585
1368
  "styleableParts": [
1586
1369
  {
1587
1370
  "name": "root"
@@ -1598,13 +1381,86 @@ export const generatedStyles = {
1598
1381
  ],
1599
1382
  "cssVariables": [
1600
1383
  {
1601
- "name": "--aspect-ratio",
1602
- "value": "var(--gallery-aspect-ratio, 16/9)",
1603
- "defaultValue": "16/9",
1384
+ "name": "--border-width",
1385
+ "value": "var(--border-width-base, 1px)",
1386
+ "defaultValue": "1px",
1387
+ "referencedVars": [
1388
+ "--border-width-base"
1389
+ ],
1390
+ "variant": ".item"
1391
+ },
1392
+ {
1393
+ "name": "--radius",
1394
+ "value": "var(--radius-sm, 0.375rem)",
1395
+ "defaultValue": "0.375rem",
1604
1396
  "referencedVars": [
1605
- "--gallery-aspect-ratio"
1397
+ "--radius-sm"
1606
1398
  ],
1399
+ "variant": ".item"
1400
+ },
1401
+ {
1402
+ "name": "--transition",
1403
+ "value": "0.2s cubic-bezier(0.4, 0, 0.2, 1)",
1404
+ "defaultValue": null,
1405
+ "referencedVars": [],
1406
+ "variant": ".item"
1407
+ },
1408
+ {
1409
+ "name": "--view-width",
1410
+ "value": "200px",
1411
+ "defaultValue": null,
1412
+ "referencedVars": [],
1413
+ "variant": ".item"
1414
+ },
1415
+ {
1416
+ "name": "--aspect-ratio",
1417
+ "value": "16/9",
1418
+ "defaultValue": null,
1419
+ "referencedVars": [],
1420
+ "variant": ".view"
1421
+ },
1422
+ {
1423
+ "name": "--background",
1424
+ "value": "transparent",
1425
+ "defaultValue": null,
1426
+ "referencedVars": [],
1607
1427
  "variant": ".view"
1428
+ },
1429
+ {
1430
+ "name": "--gap",
1431
+ "value": "calc(var(--spacing, 0.25rem) * 1)",
1432
+ "defaultValue": "0.25rem",
1433
+ "referencedVars": [
1434
+ "--spacing"
1435
+ ],
1436
+ "variant": ".body"
1437
+ },
1438
+ {
1439
+ "name": "--padding",
1440
+ "value": "calc(var(--spacing, 0.25rem) * 3)",
1441
+ "defaultValue": "0.25rem",
1442
+ "referencedVars": [
1443
+ "--spacing"
1444
+ ],
1445
+ "variant": ".body"
1446
+ },
1447
+ {
1448
+ "name": "--title-color",
1449
+ "value": "var(--foreground)",
1450
+ "defaultValue": null,
1451
+ "referencedVars": [
1452
+ "--foreground"
1453
+ ],
1454
+ "variant": ".body"
1455
+ },
1456
+ {
1457
+ "name": "--description-color",
1458
+ "value": "var(--foreground-muted, var(--foreground))",
1459
+ "defaultValue": "var(--foreground",
1460
+ "referencedVars": [
1461
+ "--foreground-muted"
1462
+ ],
1463
+ "variant": ".body"
1608
1464
  }
1609
1465
  ]
1610
1466
  },
@@ -1637,7 +1493,7 @@ export const generatedStyles = {
1637
1493
  ]
1638
1494
  },
1639
1495
  "flex": {
1640
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .flex {\n @apply flex w-full flex-row;\n flex-wrap: nowrap;\n gap: var(--spacing-md);\n justify-content: flex-start;\n align-items: stretch;\n }\n\n /* Direction variants */\n .flex.row { flex-direction: row; }\n .flex.column { flex-direction: column; }\n\n /* Wrap variants */\n .flex.wrap { flex-wrap: wrap; }\n .flex.nowrap { flex-wrap: nowrap; }\n\n /* Gap variants */\n .flex.gap-xs { gap: var(--spacing-xs); }\n .flex.gap-sm { gap: var(--spacing-sm); }\n .flex.gap-md { gap: var(--spacing-md); }\n .flex.gap-lg { gap: var(--spacing-lg); }\n .flex.gap-xl { gap: var(--spacing-xl); }\n\n /* Justify-content variants */\n .flex.justify-flex-start { justify-content: flex-start; }\n .flex.justify-flex-end { justify-content: flex-end; }\n .flex.justify-center { justify-content: center; }\n .flex.justify-space-between { justify-content: space-between; }\n .flex.justify-space-around { justify-content: space-around; }\n .flex.justify-space-evenly { justify-content: space-evenly; }\n\n /* Align-items variants */\n .flex.align-flex-start { align-items: flex-start; }\n .flex.align-flex-end { align-items: flex-end; }\n .flex.align-center { align-items: center; }\n .flex.align-stretch { align-items: stretch; }\n .flex.align-baseline { align-items: baseline; }\n\n /* Container query parent - establishes containment context */\n .container-query-parent {\n container-type: inline-size;\n container-name: flex-parent;\n @apply w-full;\n }\n\n /* Container query responsive behavior - use .flex.container-responsive for specificity parity with base variants */\n @container flex-parent (width < 400px) {\n .flex.container-responsive {\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (400px <= width < 500px) {\n .flex.container-responsive {\n flex-wrap: wrap;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (500px <= width < 900px) {\n .flex.container-responsive {\n gap: var(--spacing-md);\n }\n }\n\n @container flex-parent (width >= 900px) {\n .flex.container-responsive {\n gap: var(--spacing-lg);\n }\n }\n}\n",
1496
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .flex {\n @apply flex w-full;\n }\n\n /* Direction variants */\n .flex.row { flex-direction: row; }\n .flex.column { flex-direction: column; }\n\n /* Wrap variants */\n .flex.wrap { flex-wrap: wrap; }\n .flex.nowrap { flex-wrap: nowrap; }\n\n /* Gap variants */\n .flex.gap-xs { gap: var(--spacing-xs); }\n .flex.gap-sm { gap: var(--spacing-sm); }\n .flex.gap-md { gap: var(--spacing-md); }\n .flex.gap-lg { gap: var(--spacing-lg); }\n .flex.gap-xl { gap: var(--spacing-xl); }\n\n /* Justify-content variants */\n .flex.justify-flex-start { justify-content: flex-start; }\n .flex.justify-flex-end { justify-content: flex-end; }\n .flex.justify-center { justify-content: center; }\n .flex.justify-space-between { justify-content: space-between; }\n .flex.justify-space-around { justify-content: space-around; }\n .flex.justify-space-evenly { justify-content: space-evenly; }\n\n /* Align-items variants */\n .flex.align-flex-start { align-items: flex-start; }\n .flex.align-flex-end { align-items: flex-end; }\n .flex.align-center { align-items: center; }\n .flex.align-stretch { align-items: stretch; }\n .flex.align-baseline { align-items: baseline; }\n\n /* Container query parent - establishes containment context */\n .container-query-parent {\n container-type: inline-size;\n container-name: flex-parent;\n @apply w-full;\n }\n\n /* Container query responsive behavior - use .flex.container-responsive for specificity parity with base variants */\n @container flex-parent (width < 400px) {\n .flex.container-responsive {\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (400px <= width < 500px) {\n .flex.container-responsive {\n flex-wrap: wrap;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (500px <= width < 900px) {\n .flex.container-responsive {\n gap: var(--spacing-md);\n }\n }\n\n @container flex-parent (width >= 900px) {\n .flex.container-responsive {\n gap: var(--spacing-lg);\n }\n }\n}\n",
1641
1497
  "styleableParts": [
1642
1498
  {
1643
1499
  "name": "root"
@@ -1646,7 +1502,7 @@ export const generatedStyles = {
1646
1502
  "cssVariables": []
1647
1503
  },
1648
1504
  "expand": {
1649
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .expand {\n --disabled-opacity: 0.6;\n\n @apply flex flex-col;\n }\n\n .expand[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .trigger {\n @apply flex w-full items-stretch justify-between p-0 text-left cursor-pointer;\n\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: var(--background);\n\n border: none;\n border-radius: var(--radius-sm);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n }\n\n .icon {\n @apply flex shrink-0 items-center justify-center px-3 py-2;\n color: inherit;\n border-radius: var(--radius-sm);\n\n @media (hover: hover) {\n .trigger:not([data-disabled]):hover & {\n background-color: var(--background-hover);\n border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n }\n\n /* When the icon itself is hovered, it should be isolated and fully rounded */\n .trigger:not([data-disabled]) &:hover {\n border-radius: var(--radius-sm);\n }\n }\n }\n\n .icon > * {\n transition: transform 250ms var(--ease-smooth-settle);\n }\n\n .expand:has(.trigger[data-expanded=\"true\"]) .icon > *,\n .icon[data-expanded=\"true\"] > * {\n transform: rotate(180deg);\n }\n\n /* from=\"above\": content expands upward above the trigger */\n .expand:has(.content[data-from=\"above\"]) {\n flex-direction: column-reverse;\n\n .icon > * {\n transform: rotate(180deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(0deg);\n }\n }\n\n /* from=\"left\": content appears left of trigger */\n .expand:has(.content[data-from=\"left\"]) {\n @apply flex-row-reverse items-start;\n\n .trigger {\n @apply w-auto flex-col;\n }\n\n .icon > * {\n transform: rotate(-90deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(90deg);\n }\n }\n\n /* from=\"right\": content appears right of trigger */\n .expand:has(.content[data-from=\"right\"]) {\n @apply flex-row items-start;\n\n .trigger {\n @apply w-auto flex-col;\n }\n\n .icon > * {\n transform: rotate(90deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(-90deg);\n }\n }\n\n /* Horizontal content animation */\n .content[data-from=\"left\"],\n .content[data-from=\"right\"] {\n grid-template-rows: 1fr;\n grid-template-columns: 0fr;\n transition: grid-template-columns 300ms var(--ease-smooth-settle);\n\n &[data-expanded=\"true\"] {\n grid-template-columns: 1fr;\n }\n\n .content-inner {\n min-height: unset;\n min-width: 0;\n }\n }\n\n .title {\n @apply flex flex-1 min-w-0 items-center overflow-hidden py-2 pl-3;\n\n font-weight: var(--font-weight-medium);\n border-radius: var(--radius-sm) 0 0 var(--radius-sm);\n color: inherit;\n\n @media (hover: hover) {\n .trigger:not([data-disabled]):hover & {\n background-color: var(--background-hover);\n }\n\n /* When icon is hovered, remove background from title */\n .trigger:not([data-disabled]):has(.icon:hover) & {\n background-color: transparent;\n }\n }\n\n .trigger:not([data-disabled]) {\n background-color: transparent;\n }\n }\n\n .content {\n @apply grid overflow-hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 300ms var(--ease-smooth-settle);\n\n &[data-expanded=\"true\"] {\n grid-template-rows: 1fr;\n }\n }\n\n .content-inner {\n @apply min-h-0 overflow-hidden;\n color: var(--foreground-content);\n background-color: var(--background-content);\n }\n\n .expand:has(.trigger[data-disabled]) {\n pointer-events: none;\n }\n}\n",
1505
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n position: relative;\n display: block;\n width: 100%;\n }\n\n .expand {\n --expand-disabled-opacity: 0.6;\n --expand-trigger-padding-x: 0.75rem;\n --expand-trigger-padding-y: 0.5rem;\n --expand-divider-spacing: 0.5rem;\n\n @apply flex w-full flex-col;\n }\n\n .expand[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--expand-disabled-opacity);\n }\n\n .trigger {\n @apply flex w-full items-stretch justify-between border-0 p-0 text-left;\n\n appearance: none;\n color: var(--foreground);\n background-color: var(--background);\n cursor: pointer;\n border-radius: 0;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n outline: none;\n box-shadow: none;\n transition:\n background-color 200ms var(--ease-smooth-settle),\n opacity 200ms var(--ease-smooth-settle)\n }\n\n .trigger:focus,\n .trigger:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .trigger[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--expand-disabled-opacity);\n }\n\n .title {\n @apply flex min-w-0 flex-1 items-center overflow-hidden;\n\n padding: var(--expand-trigger-padding-y) 0 var(--expand-trigger-padding-y)\n var(--expand-trigger-padding-x);\n font-weight: var(--font-weight-medium);\n border-radius: 0;\n color: inherit;\n background-color: transparent;\n }\n\n .trigger:not([data-disabled=\"true\"]):has(.icon:hover) .title {\n background-color: transparent;\n }\n\n .icon {\n @apply flex shrink-0 items-center justify-center;\n\n padding: var(--expand-trigger-padding-y) var(--expand-trigger-padding-x);\n color: inherit;\n border-radius: 0;\n }\n\n @media (hover: hover) {\n .trigger:not([data-disabled=\"true\"]):hover .title,\n .trigger:not([data-disabled=\"true\"]):hover .icon {\n background-color: var(--background-hover);\n }\n\n .trigger:not([data-disabled=\"true\"]):has(.icon:hover) .title {\n background-color: transparent;\n }\n\n .trigger:not([data-disabled=\"true\"]) .icon:hover {\n border-radius: 0;\n }\n }\n\n .icon > * {\n transition: transform 250ms var(--ease-smooth-settle);\n }\n\n .icon[data-selected=\"true\"] > * {\n transform: rotate(180deg);\n }\n\n .expand:has(.content[data-from=\"above\"]) {\n flex-direction: column-reverse;\n }\n\n .expand:has(.content[data-from=\"above\"]) .icon > * {\n transform: rotate(180deg);\n }\n\n .expand:has(.content[data-from=\"above\"]) .icon[data-selected=\"true\"] > * {\n transform: rotate(0deg);\n }\n\n .expand:has(.content[data-from=\"left\"]) {\n @apply flex-row-reverse items-start;\n }\n\n .expand:has(.content[data-from=\"left\"]) .trigger {\n @apply w-auto flex-col;\n }\n\n .expand:has(.content[data-from=\"left\"]) .icon > * {\n transform: rotate(-90deg);\n }\n\n .expand:has(.content[data-from=\"left\"]) .icon[data-selected=\"true\"] > * {\n transform: rotate(90deg);\n }\n\n .expand:has(.content[data-from=\"right\"]) {\n @apply flex-row items-start;\n }\n\n .expand:has(.content[data-from=\"right\"]) .trigger {\n @apply w-auto flex-col;\n }\n\n .expand:has(.content[data-from=\"right\"]) .icon > * {\n transform: rotate(90deg);\n }\n\n .expand:has(.content[data-from=\"right\"]) .icon[data-selected=\"true\"] > * {\n transform: rotate(-90deg);\n }\n\n .content {\n display: grid;\n overflow: hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 300ms var(--ease-smooth-settle);\n }\n\n .content[data-selected=\"true\"] {\n grid-template-rows: 1fr;\n }\n\n .content[data-from=\"left\"],\n .content[data-from=\"right\"] {\n grid-template-rows: 1fr;\n grid-template-columns: 0fr;\n transition: grid-template-columns 300ms var(--ease-smooth-settle);\n }\n\n .content[data-from=\"left\"][data-selected=\"true\"],\n .content[data-from=\"right\"][data-selected=\"true\"] {\n grid-template-columns: 1fr;\n }\n\n .content-inner {\n @apply min-h-0 overflow-hidden;\n\n min-width: 0;\n color: var(--foreground-content);\n background-color: var(--background-content);\n }\n\n .divider {\n margin-top: var(--expand-divider-spacing);\n }\n}\n",
1650
1506
  "styleableParts": [
1651
1507
  {
1652
1508
  "name": "root"
@@ -1654,17 +1510,53 @@ export const generatedStyles = {
1654
1510
  {
1655
1511
  "name": "trigger"
1656
1512
  },
1513
+ {
1514
+ "name": "icon.collapsed"
1515
+ },
1516
+ {
1517
+ "name": "icon.expanded"
1518
+ },
1519
+ {
1520
+ "name": "title"
1521
+ },
1657
1522
  {
1658
1523
  "name": "content"
1524
+ },
1525
+ {
1526
+ "name": "contentInner"
1527
+ },
1528
+ {
1529
+ "name": "divider"
1659
1530
  }
1660
1531
  ],
1661
1532
  "cssVariables": [
1662
1533
  {
1663
- "name": "--disabled-opacity",
1534
+ "name": "--expand-disabled-opacity",
1664
1535
  "value": "0.6",
1665
1536
  "defaultValue": null,
1666
1537
  "referencedVars": [],
1667
1538
  "variant": ".expand"
1539
+ },
1540
+ {
1541
+ "name": "--expand-trigger-padding-x",
1542
+ "value": "0.75rem",
1543
+ "defaultValue": null,
1544
+ "referencedVars": [],
1545
+ "variant": ".expand"
1546
+ },
1547
+ {
1548
+ "name": "--expand-trigger-padding-y",
1549
+ "value": "0.5rem",
1550
+ "defaultValue": null,
1551
+ "referencedVars": [],
1552
+ "variant": ".expand"
1553
+ },
1554
+ {
1555
+ "name": "--expand-divider-spacing",
1556
+ "value": "0.5rem",
1557
+ "defaultValue": null,
1558
+ "referencedVars": [],
1559
+ "variant": ".expand"
1668
1560
  }
1669
1561
  ]
1670
1562
  },
@@ -2000,6 +1892,52 @@ export const generatedStyles = {
2000
1892
  }
2001
1893
  ]
2002
1894
  },
1895
+ "code": {
1896
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .code {\n --border-color: var(--background-700);\n --header-bg: mix(var(--background-900) 90%, transparent);\n --scroll-track-bg: mix(var(--background-950) 50%, transparent);\n\n max-height: 52.5rem;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border-color);\n @apply flex w-full min-w-0 flex-col overflow-hidden;\n }\n\n .header {\n flex: none;\n background-color: var(--header-bg);\n @apply flex items-center justify-between px-3 py-1.5;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n border-bottom: 1px solid var(--border-color);\n color: var(--foreground-400);\n }\n\n\n .body {\n @apply relative flex min-h-0 flex-1 flex-col;\n flex: 1;\n }\n\n .viewport { @apply overflow-hidden; }\n\n .viewport :global(pre) {\n background: transparent;\n @apply m-0 p-0;\n width: fit-content;\n }\n\n .viewport :global(code) {\n color: var(--foreground-300);\n white-space: pre;\n }\n\n .viewport::-webkit-scrollbar {\n width: 0.5rem;\n }\n\n .viewport::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .viewport::-webkit-scrollbar-thumb {\n background: var(--background-700);\n border-radius: 9999px;\n }\n\n .viewport::-webkit-scrollbar-thumb:hover {\n background: var(--background-600);\n }\n\n .scroll-track {\n flex: none;\n @apply w-full;\n overflow-x: auto;\n background-color: var(--scroll-track-bg);\n backdrop-filter: blur(4px);\n }\n\n .expand-button {\n @apply flex w-full items-center gap-3 px-4 py-2 cursor-pointer;\n color: var(--foreground-300);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n transition: background-color 0.15s ease-out;\n border-top: 1px solid var(--border-color);\n background: transparent;\n border-left: none;\n border-right: none;\n border-bottom: none;\n font-family: inherit;\n }\n\n .expand-button:hover { background-color: var(--background-800); }\n\n .expand-icon { @apply shrink-0; color: var(--foreground-400); }\n\n .copy-button {\n @apply absolute right-2 top-2 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-sm);\n color: var(--foreground-400);\n opacity: 0;\n transition: opacity 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;\n background: transparent;\n border: none;\n z-index: 1;\n }\n\n .copy-button:hover { background-color: var(--background-800); color: var(--foreground-300); }\n\n .copy-button:focus, .body:hover .copy-button { opacity: 1; }\n}\n",
1897
+ "styleableParts": [
1898
+ {
1899
+ "name": "root"
1900
+ },
1901
+ {
1902
+ "name": "header"
1903
+ },
1904
+ {
1905
+ "name": "body"
1906
+ },
1907
+ {
1908
+ "name": "viewport"
1909
+ }
1910
+ ],
1911
+ "cssVariables": [
1912
+ {
1913
+ "name": "--border-color",
1914
+ "value": "var(--background-700)",
1915
+ "defaultValue": null,
1916
+ "referencedVars": [
1917
+ "--background-700"
1918
+ ],
1919
+ "variant": ".code"
1920
+ },
1921
+ {
1922
+ "name": "--header-bg",
1923
+ "value": "mix(var(--background-900) 90%, transparent)",
1924
+ "defaultValue": null,
1925
+ "referencedVars": [
1926
+ "--background-900"
1927
+ ],
1928
+ "variant": ".code"
1929
+ },
1930
+ {
1931
+ "name": "--scroll-track-bg",
1932
+ "value": "mix(var(--background-950) 50%, transparent)",
1933
+ "defaultValue": null,
1934
+ "referencedVars": [
1935
+ "--background-950"
1936
+ ],
1937
+ "variant": ".code"
1938
+ }
1939
+ ]
1940
+ },
2003
1941
  "color": {
2004
1942
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --background: color-mix(in srgb, var(--background-800) 30%, transparent);\n --background-border: var(--background-700);\n --focus-visible: var(--accent-500);\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n width: 260px;\n }\n\n .color[data-disabled=\"true\"] {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .controls {\n @apply pb-3 px-3 space-y-3;\n }\n\n .input-group {\n width: 100%;\n }\n\n .input-group > div:first-child {\n flex: 1;\n min-width: 0;\n }\n\n .input {\n width: 100%;\n }\n\n .format {\n flex-shrink: 0;\n width: 85px;\n }\n\n .color[data-size=\"sm\"] .format {\n width: 75px;\n }\n\n .canvas {\n position: relative;\n width: 96%;\n @apply mx-auto mt-2;\n cursor: crosshair;\n touch-action: none;\n display: flex;\n flex-direction: column;\n min-height: 160px;\n }\n\n .canvas[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .canvas-inner {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n }\n\n .canvas-gradient-hue {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n\n .canvas-gradient-saturation {\n position: absolute;\n inset: 0;\n background: linear-gradient(to right, rgb(255, 255, 255), transparent);\n }\n\n .canvas-gradient-brightness {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgb(0, 0, 0), transparent);\n }\n\n .canvas-pointer {\n --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);\n\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid var(--pointer-border);\n box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.3);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n\n .hue-slider {\n display: flex;\n align-items: center;\n height: 16px;\n border-radius: var(--radius-full);\n position: relative;\n cursor: pointer;\n touch-action: none;\n overflow: hidden;\n }\n\n .hue-track {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n border: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .hue-thumb {\n --thumb-border: white;\n --thumb-background: white;\n\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid var(--thumb-border);\n box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n background: var(--thumb-background);\n pointer-events: none;\n }\n\n .hue-slider[data-focus-visible=\"true\"] .hue-thumb {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .hue-thumb:hover {\n box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);\n }\n\n .hue-thumb:active {\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);\n }\n\n .opacity-slider {\n display: flex;\n align-items: center;\n height: 12px;\n border-radius: var(--radius-full);\n position: relative;\n cursor: pointer;\n touch-action: none;\n overflow: hidden;\n }\n\n .opacity-track {\n --checkerboard-dark: var(--background-800);\n --checkerboard-light: var(--background-700);\n\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n border: var(--border-width-base, 1px) solid var(--background-border);\n overflow: hidden;\n }\n\n .opacity-thumb {\n --thumb-border: white;\n --thumb-background: white;\n\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: var(--radius-full);\n border: 2px solid var(--thumb-border);\n box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n background: var(--thumb-background);\n pointer-events: none;\n }\n\n .opacity-slider[data-focus-visible=\"true\"] .opacity-thumb {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .opacity-thumb:hover {\n box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);\n }\n\n .opacity-thumb:active {\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);\n }\n\n .recent-colors {\n display: flex;\n gap: 0.5rem;\n overflow-x: auto;\n padding-bottom: 0.25rem;\n }\n\n .recent-color-swatch {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n cursor: pointer;\n background: none;\n padding: 0;\n outline: none;\n }\n\n .recent-color-swatch:hover {\n transform: scale(1.1);\n box-shadow: 0 0 0 2px var(--focus-visible);\n }\n\n .recent-color-swatch:active {\n transform: scale(0.95);\n }\n\n .recent-color-swatch:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .preview-swatch {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .preview-swatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 6px,\n var(--checkerboard-light) 6px,\n var(--checkerboard-light) 12px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .preview-swatch::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: var(--preview-color, transparent);\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 2;\n }\n\n .preview {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 64px;\n height: 64px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);\n overflow: hidden;\n }\n\n .preview::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 10px,\n var(--checkerboard-light) 10px,\n var(--checkerboard-light) 20px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n}\n",
2005
1943
  "styleableParts": [
@@ -2185,54 +2123,8 @@ export const generatedStyles = {
2185
2123
  }
2186
2124
  ]
2187
2125
  },
2188
- "code": {
2189
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .code {\n --border-color: var(--background-700);\n --header-bg: mix(var(--background-900) 90%, transparent);\n --scroll-track-bg: mix(var(--background-950) 50%, transparent);\n\n max-height: 52.5rem;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border-color);\n @apply flex w-full min-w-0 flex-col overflow-hidden;\n }\n\n .header {\n flex: none;\n background-color: var(--header-bg);\n @apply flex items-center justify-between px-3 py-1.5;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n border-bottom: 1px solid var(--border-color);\n color: var(--foreground-400);\n }\n\n\n .body {\n @apply relative flex min-h-0 flex-1 flex-col;\n flex: 1;\n }\n\n .viewport { @apply overflow-hidden; }\n\n .viewport :global(pre) {\n background: transparent;\n @apply m-0 p-0;\n width: fit-content;\n }\n\n .viewport :global(code) {\n color: var(--foreground-300);\n white-space: pre;\n }\n\n .viewport::-webkit-scrollbar {\n width: 0.5rem;\n }\n\n .viewport::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .viewport::-webkit-scrollbar-thumb {\n background: var(--background-700);\n border-radius: 9999px;\n }\n\n .viewport::-webkit-scrollbar-thumb:hover {\n background: var(--background-600);\n }\n\n .scroll-track {\n flex: none;\n @apply w-full;\n overflow-x: auto;\n background-color: var(--scroll-track-bg);\n backdrop-filter: blur(4px);\n }\n\n .expand-button {\n @apply flex w-full items-center gap-3 px-4 py-2 cursor-pointer;\n color: var(--foreground-300);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n transition: background-color 0.15s ease-out;\n border-top: 1px solid var(--border-color);\n background: transparent;\n border-left: none;\n border-right: none;\n border-bottom: none;\n font-family: inherit;\n }\n\n .expand-button:hover { background-color: var(--background-800); }\n\n .expand-icon { @apply shrink-0; color: var(--foreground-400); }\n\n .copy-button {\n @apply absolute right-2 top-2 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-sm);\n color: var(--foreground-400);\n opacity: 0;\n transition: opacity 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;\n background: transparent;\n border: none;\n z-index: 1;\n }\n\n .copy-button:hover { background-color: var(--background-800); color: var(--foreground-300); }\n\n .copy-button:focus, .body:hover .copy-button { opacity: 1; }\n}\n",
2190
- "styleableParts": [
2191
- {
2192
- "name": "root"
2193
- },
2194
- {
2195
- "name": "header"
2196
- },
2197
- {
2198
- "name": "body"
2199
- },
2200
- {
2201
- "name": "viewport"
2202
- }
2203
- ],
2204
- "cssVariables": [
2205
- {
2206
- "name": "--border-color",
2207
- "value": "var(--background-700)",
2208
- "defaultValue": null,
2209
- "referencedVars": [
2210
- "--background-700"
2211
- ],
2212
- "variant": ".code"
2213
- },
2214
- {
2215
- "name": "--header-bg",
2216
- "value": "mix(var(--background-900) 90%, transparent)",
2217
- "defaultValue": null,
2218
- "referencedVars": [
2219
- "--background-900"
2220
- ],
2221
- "variant": ".code"
2222
- },
2223
- {
2224
- "name": "--scroll-track-bg",
2225
- "value": "mix(var(--background-950) 50%, transparent)",
2226
- "defaultValue": null,
2227
- "referencedVars": [
2228
- "--background-950"
2229
- ],
2230
- "variant": ".code"
2231
- }
2232
- ]
2233
- },
2234
2126
  "checkbox": {
2235
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .checkbox {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n }\n\n &[data-focus-visible=\"true\"] {\n outline: 2px solid transparent;\n box-shadow: 0 0 0 3px var(--focus-visible);\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n border-color: var(--background-selected-border);\n }\n\n &[data-indeterminate=\"true\"] {\n background-color: var(--background-indeterminate);\n border-color: var(--background-indeterminate-border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n /* Sizes */\n &.size-sm {\n @apply h-4 w-4;\n }\n\n &.size-md {\n @apply h-5 w-5;\n }\n\n &.size-lg {\n @apply h-6 w-6;\n }\n }\n\n .checkmark,\n .indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--icon-foreground);\n pointer-events: none;\n }\n\n .label {\n @apply cursor-pointer select-none;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-disabled=\"true\"] {\n @apply opacity-60 cursor-not-allowed;\n }\n }\n\n .label-sm {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .label-md {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .label-lg {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .helper-text {\n @apply text-sm ml-8;\n transition: color 200ms var(--ease-snappy-pop);\n color: var(--helper-text-foreground);\n\n &[data-error=\"true\"] {\n color: var(--helper-text-error-foreground);\n }\n }\n}\n",
2127
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .checkbox {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background-selected);\n border-color: var(--background-selected-border);\n }\n\n &[data-indeterminate=\"true\"] {\n background-color: var(--background-indeterminate);\n border-color: var(--background-indeterminate-border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n /* Sizes */\n &.size-sm {\n @apply h-4 w-4;\n }\n\n &.size-md {\n @apply h-5 w-5;\n }\n\n &.size-lg {\n @apply h-6 w-6;\n }\n }\n\n .checkmark,\n .indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--icon-foreground);\n pointer-events: none;\n }\n\n .label {\n @apply cursor-pointer select-none;\n transition: color 200ms var(--ease-snappy-pop);\n\n &[data-disabled=\"true\"] {\n @apply opacity-60 cursor-not-allowed;\n }\n }\n\n .label-sm {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .label-md {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .label-lg {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .helper-text {\n @apply text-sm ml-8;\n transition: color 200ms var(--ease-snappy-pop);\n color: var(--helper-text-foreground);\n\n &[data-error=\"true\"] {\n color: var(--helper-text-error-foreground);\n }\n }\n}\n",
2236
2128
  "styleableParts": [
2237
2129
  {
2238
2130
  "name": "root"
@@ -2280,7 +2172,7 @@ export const generatedStyles = {
2280
2172
  "cssVariables": []
2281
2173
  },
2282
2174
  "button": {
2283
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .button {\n @apply inline-flex items-center justify-center gap-2 select-none cursor-pointer whitespace-nowrap;\n background-color: 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\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n\n &:hover:not(:disabled) {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n }\n\n &[data-pressed=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n border-color: var(--background-pressed-border, var(--background-hover-border, var(--background-border)));\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n outline: none;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n filter: grayscale(0.5);\n }\n }\n}\n",
2175
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .button {\n @apply inline-flex items-center justify-center gap-2 select-none cursor-pointer whitespace-nowrap;\n background-color: 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\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n\n &:hover:not(:disabled) {\n background-color: var(--background-hover);\n border-color: var(--background-hover-border);\n }\n\n &[data-pressed=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n border-color: var(--background-pressed-border, var(--background-hover-border, var(--background-border)));\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n filter: grayscale(0.5);\n }\n }\n}\n",
2284
2176
  "styleableParts": [
2285
2177
  {
2286
2178
  "name": "root"
@@ -2328,7 +2220,7 @@ export const generatedStyles = {
2328
2220
  "cssVariables": []
2329
2221
  },
2330
2222
  "anchor": {
2331
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .preview, .anchor {\n display: inline\n }\n\n .root {\n @apply inline-block relative cursor-pointer;\n color: var(--foreground, currentColor);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover .underline {\n background: var(--underline-background-hover, var(--foreground-400));\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-visible, var(--focus-ring));\n outline-offset: 2px;\n border-radius: 2px;\n }\n }\n\n .underline {\n @apply absolute left-0 right-0 bottom-0 h-px;\n background: var(--underline-background, var(--background-600));\n transform-origin: right;\n transform: scaleX(1);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n\n .preview {\n }\n}\n",
2223
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .preview, .anchor {\n display: inline\n }\n\n .root {\n @apply inline-block relative cursor-pointer;\n display: inline-block;\n color: var(--foreground, currentColor);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover .underline {\n background: var(--underline-background-hover, var(--foreground-400));\n }\n\n &[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible, var(--focus-ring));\n outline-offset: 2px;\n border-radius: 2px;\n }\n }\n\n .underline {\n @apply absolute left-0 right-0 bottom-0 h-px;\n background: var(--underline-background, var(--background-600));\n transform-origin: right;\n transform: scaleX(1);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n\n .preview {\n }\n}\n",
2332
2224
  "styleableParts": [
2333
2225
  {
2334
2226
  "name": "root"