ui-lab-registry 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/examples/01-variants.d.ts.map +1 -1
- package/dist/components/Button/examples/01-variants.js.map +1 -1
- package/dist/components/Button/examples/02-multi-actions.d.ts +6 -0
- package/dist/components/Button/examples/02-multi-actions.d.ts.map +1 -0
- package/dist/components/Button/examples/02-multi-actions.js +12 -0
- package/dist/components/Button/examples/02-multi-actions.js.map +1 -0
- package/dist/components/Button/examples/03-joined-toggle.d.ts +6 -0
- package/dist/components/Button/examples/03-joined-toggle.d.ts.map +1 -0
- package/dist/components/Button/examples/03-joined-toggle.js +15 -0
- package/dist/components/Button/examples/03-joined-toggle.js.map +1 -0
- package/dist/components/Button/examples/04-sub-stack-actions.d.ts +6 -0
- package/dist/components/Button/examples/04-sub-stack-actions.d.ts.map +1 -0
- package/dist/components/Button/examples/04-sub-stack-actions.js +15 -0
- package/dist/components/Button/examples/04-sub-stack-actions.js.map +1 -0
- package/dist/components/Button/examples/05-split-action-button.d.ts +6 -0
- package/dist/components/Button/examples/05-split-action-button.d.ts.map +1 -0
- package/dist/components/Button/examples/05-split-action-button.js +42 -0
- package/dist/components/Button/examples/05-split-action-button.js.map +1 -0
- package/dist/components/Button/examples/index.d.ts +8 -0
- package/dist/components/Button/examples/index.d.ts.map +1 -1
- package/dist/components/Button/examples/index.js +8 -0
- package/dist/components/Button/examples/index.js.map +1 -1
- package/dist/components/Button/examples.json +27 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +8 -0
- package/dist/components/Button/index.js.map +1 -1
- package/dist/generated-data.d.ts.map +1 -1
- package/dist/generated-data.js +101 -140
- package/dist/generated-data.js.map +1 -1
- package/dist/generated-styles.d.ts.map +1 -1
- package/dist/generated-styles.js +142 -76
- package/dist/generated-styles.js.map +1 -1
- package/dist/generated-styles.json +142 -76
- package/dist/patterns/layout/media-object/metadata.json +1 -1
- package/dist/patterns/layout/media-object/variations/lg/index.js +1 -1
- package/dist/patterns/layout/media-object/variations/lg/index.js.map +1 -1
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +38 -12
- package/dist/registry.js.map +1 -1
- package/dist/sections/CTA/index.js +1 -1
- package/dist/sections/CTA/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Anchor/metadata.json +1 -1
- package/src/components/Button/examples/01-variants.tsx +1 -1
- package/src/components/Button/examples/02-multi-actions.tsx +20 -0
- package/src/components/Button/examples/03-joined-toggle.tsx +32 -0
- package/src/components/Button/examples/04-sub-stack-actions.tsx +29 -0
- package/src/components/Button/examples/05-split-action-button.tsx +108 -0
- package/src/components/Button/examples/index.ts +8 -0
- package/src/components/Button/examples.json +27 -1
- package/src/components/Button/index.tsx +8 -0
- package/src/components/Color/metadata.json +1 -1
- package/src/components/Date/metadata.json +1 -1
- package/src/components/Expand/metadata.json +1 -1
- package/src/components/Frame/metadata.json +1 -1
- package/src/components/Gallery/metadata.json +1 -1
- package/src/components/Grid/metadata.json +1 -1
- package/src/components/Mask/metadata.json +1 -1
- package/src/components/Page/metadata.json +1 -1
- package/src/components/Path/metadata.json +1 -1
- package/src/components/Scroll/metadata.json +1 -1
- package/src/generated-data.ts +101 -140
- package/src/generated-styles.ts +142 -76
- package/src/patterns/layout/media-object/metadata.json +1 -1
- package/src/patterns/layout/media-object/variations/lg/index.tsx +1 -1
- package/src/registry.ts +38 -12
- package/src/sections/CTA/index.tsx +1 -1
package/dist/generated-styles.js
CHANGED
|
@@ -25,7 +25,7 @@ export const generatedStyles = {
|
|
|
25
25
|
"cssVariables": []
|
|
26
26
|
},
|
|
27
27
|
"tooltip": {
|
|
28
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--tooltip-fill);\n --frame-stroke-color: var(--tooltip-border-color);\n opacity: 0;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n pointer-events: auto;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1
|
|
28
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--tooltip-fill);\n --frame-stroke-color: var(--tooltip-border-color);\n opacity: 0;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n pointer-events: auto;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1 whitespace-nowrap;;\n color: var(--foreground);\n }\n\n .frame[data-hint] {\n @apply pr-1;\n }\n}\n",
|
|
29
29
|
"styleableParts": [
|
|
30
30
|
{
|
|
31
31
|
"name": "root"
|
|
@@ -148,7 +148,7 @@ export const generatedStyles = {
|
|
|
148
148
|
]
|
|
149
149
|
},
|
|
150
150
|
"tabs": {
|
|
151
|
-
"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;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--list-border-color);\n align-items: stretch;\n }\n }\n\n .indicator {\n
|
|
151
|
+
"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;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--list-border-color);\n align-items: stretch;\n }\n }\n\n .indicator {\n @apply absolute;\n background-color: var(--indicator-background);\n box-sizing: border-box;\n border-radius: var(--radius-xs);\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 background-color: transparent;\n border: none;\n font-weight: var(--font-weight-medium);\n color: var(--trigger-color);\n outline: none;\n transition: color 0.15s ease, background-color 0.15s ease;\n\n\n &:not([data-disabled]) {\n &:hover {\n color: var(--trigger-hover-color);\n }\n\n &:active {\n color: var(--trigger-active-color);\n }\n }\n\n &[data-selected=\"true\"] {\n color: var(--trigger-selected-color);\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list & {\n background-color: var(--trigger-selected-background);\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: transparent;\n border-bottom-color: var(--trigger-underline-color);\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom-color: transparent;\n border-left-color: var(--trigger-underline-color);\n }\n }\n\n &[data-focus-visible] {\n background: var(--trigger-focus-background);\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: transparent;\n border-radius: 0;\n border-bottom: 2px solid transparent;\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(--trigger-underline-color);\n border-bottom: none;\n }\n }\n\n .trigger-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(--content-outline-color);\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;\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",
|
|
152
152
|
"styleableParts": [
|
|
153
153
|
{
|
|
154
154
|
"name": "root"
|
|
@@ -161,13 +161,6 @@ export const generatedStyles = {
|
|
|
161
161
|
}
|
|
162
162
|
],
|
|
163
163
|
"cssVariables": [
|
|
164
|
-
{
|
|
165
|
-
"name": "--indicator-padding",
|
|
166
|
-
"value": "2px",
|
|
167
|
-
"defaultValue": null,
|
|
168
|
-
"referencedVars": [],
|
|
169
|
-
"variant": ".indicator"
|
|
170
|
-
},
|
|
171
164
|
{
|
|
172
165
|
"name": "--disabled-opacity",
|
|
173
166
|
"value": "0.5",
|
|
@@ -274,7 +267,7 @@ export const generatedStyles = {
|
|
|
274
267
|
]
|
|
275
268
|
},
|
|
276
269
|
"slider": {
|
|
277
|
-
"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(--slider-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(--slider-range-background-default);\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(--slider-range-background-disabled); }\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(--slider-thumb-background-default);\n border-radius: 9999px;\n
|
|
270
|
+
"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(--slider-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(--slider-range-background-default);\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(--slider-range-background-disabled); }\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(--slider-thumb-background-default);\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(--slider-thumb-background-disabled);\n cursor: not-allowed;\n }\n\n .thumb[data-focus-visible] {\n background-color: var(--slider-thumb-background-focus);\n box-shadow: 0 0 0 3px var(--slider-thumb-ring);\n }\n\n .thumb[data-dragging] {\n cursor: grabbing;\n transform: translate(-50%, -50%) scale(1.1);\n }\n}\n",
|
|
278
271
|
"styleableParts": [
|
|
279
272
|
{
|
|
280
273
|
"name": "root"
|
|
@@ -342,7 +335,7 @@ export const generatedStyles = {
|
|
|
342
335
|
]
|
|
343
336
|
},
|
|
344
337
|
"select": {
|
|
345
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n
|
|
338
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n --padding-x: calc(var(--spacing) * 2.00);\n --padding-y: calc(var(--spacing) * 1.75);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n font-size: var(--font-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(--border-color);\n border-radius: var(--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]:not([data-disabled]) {\n background-color: var(--pressed-background);\n }\n\n &[aria-expanded=\"true\"] {\n background-color: var(--hover-background);\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(:disabled):hover .icon-section,\n &:not(:disabled):hover .value-section:not(:empty) {\n background-color: var(--hover-background);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--focus-ring-background), 0 0 0 4px var(--ring-color);\n @apply outline-none;\n }\n\n :global(.group) &:focus-visible {\n @apply outline-none;\n }\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(--padding-y) var(--padding-x);\n border-radius: var(--inner-radius) 0 0 var(--inner-radius);\n font-size: var(--font-size);\n\n &:only-child {\n border-radius: var(--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(--padding-y) var(--padding-x);\n border-radius: 0 var(--inner-radius) var(--inner-radius) 0;\n }\n\n .icon {\n @apply flex items-center justify-center w-4 h-4 opacity-70;\n }\n\n .trigger[aria-expanded=\"true\"] .icon,\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 p-0;\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 --padding-x: calc(var(--spacing) * 1.5);\n --padding-y: var(--spacing);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n overflow: hidden;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--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 --item-padding-x: var(--padding-x);\n --item-padding-y: calc(var(--padding-y) * 1.15);\n\n @apply flex items-center gap-2 outline-none cursor-default select-none;\n padding: var(--item-padding-y) var(--item-padding-x);\n\n border-radius: var(--inner-radius);\n font-size: var(--font-size);\n font-weight: var(--font-weight-medium);\n color: var(--item-foreground);\n\n &[data-selected=\"true\"] {\n color: var(--item-foreground);\n }\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n &[data-highlighted=\"true\"] {\n background-color: var(--item-background-hover);\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(--font-size);\n font-weight: var(--font-weight-medium);\n color: var(--item-description-color);\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(--item-icon-color); }\n .item-indicator { color: var(--item-indicator-color); 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(--content-border); /* Reuses content border var */\n }\n\n .placeholder {\n color: var(--placeholder-color);\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(--inner-radius);\n transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n\n &:focus-within {\n @apply outline-none;\n box-shadow: 0 0 0 1px var(--search-focus-ring);\n z-index: 1;\n }\n }\n\n .search-value-section {\n @apply p-0;\n border-radius: var(--inner-radius) 0 0 var(--inner-radius);\n }\n\n .input {\n padding: var(--padding-y) calc(var(--padding-x) * 1.50);\n padding-right: calc(var(--padding-x) * 2 + 1rem);\n @apply border-none rounded-none shadow-none bg-transparent;\n\n &[data-active], &[data-focus-visible] {\n @apply border-none shadow-none;\n }\n }\n\n .search-content-input {\n padding-inline: calc(var(--padding-x) * 1.50);\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(--padding-x);\n }\n\n\n .search-wrapper {\n @apply overflow-hidden;\n border-bottom: var(--border-width-base, 1px) solid var(--content-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(--content-border);\n }\n\n .sub-trigger {\n --subtrigger-padding-x: var(--padding-x);\n --subtrigger-padding-y: var(--padding-y);\n\n @apply flex items-center gap-2 cursor-default select-none outline-none;\n padding: var(--subtrigger-padding-y) var(--subtrigger-padding-x);\n border-radius: var(--inner-radius);\n font-size: var(--font-size);\n font-weight: var(--font-weight-medium);\n color: var(--subtrigger-foreground);\n\n &[data-highlighted=\"true\"],\n &[data-state=\"open\"]:not([data-highlighted=\"true\"]) {\n background-color: var(--subtrigger-background-hover);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n pointer-events: none;\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",
|
|
346
339
|
"styleableParts": [
|
|
347
340
|
{
|
|
348
341
|
"name": "root"
|
|
@@ -522,7 +515,7 @@ export const generatedStyles = {
|
|
|
522
515
|
]
|
|
523
516
|
},
|
|
524
517
|
"scroll": {
|
|
525
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply relative;\n }\n\n .vertical {\n --scrollbar-width: 12px;\n min-height: 0;\n }\n\n .horizontal { --scrollbar-height: 12px; }\n\n .content {\n @apply h-full w-full;\n overflow: auto;\n }\n\n .vertical .content {\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n .vertical[data-
|
|
518
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply relative;\n }\n\n .vertical {\n --scrollbar-width: 12px;\n min-height: 0;\n }\n\n .horizontal { --scrollbar-height: 12px; }\n\n .content {\n @apply h-full w-full;\n overflow: auto;\n }\n\n .vertical .content {\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n .vertical[data-inline=\"true\"] .content {\n padding-right: 16px;\n }\n\n .horizontal .content {\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n .horizontal[data-inline=\"true\"] .content {\n padding-bottom: 16px;\n }\n\n .vertical .content::-webkit-scrollbar,\n .horizontal .content::-webkit-scrollbar { display: none; }\n\n .track {\n @apply absolute;\n z-index: 10;\n }\n\n .track[data-hide=\"true\"] {\n transition-property: opacity;\n transition-duration: 200ms;\n }\n\n .vertical .track {\n right: 4px;\n top: var(--scroll-padding-y, 0);\n width: 12px;\n height: calc(100% - 2 * var(--scroll-padding-y, 0));\n background-color: var(--track-background);\n box-sizing: border-box;\n }\n\n .horizontal .track {\n bottom: 2px;\n left: 0;\n height: 12px;\n width: 100%;\n background-color: var(--track-background);\n }\n\n .thumb {\n position: absolute;\n border-radius: calc(var(--radius-xs) * 0.80);\n background-color: var(--thumb-background);\n transition-property: background-color, width, height;\n transition-duration: 150ms;\n }\n\n .thumb:hover { background-color: var(--thumb-hover-background); }\n\n .root[data-dragging=\"true\"] .thumb {\n background-color: var(--thumb-dragging-background);\n }\n\n .vertical .thumb {\n width: 6px;\n margin-left: 6px;\n transition-property: background-color, width, margin-left;\n transition-duration: 150ms;\n }\n\n .vertical .thumb:hover,\n .vertical[data-dragging=\"true\"] .thumb {\n width: 8px;\n margin-left: 4px;\n }\n\n .horizontal .thumb {\n height: 6px;\n margin-top: 6px;\n transition-property: background-color, height, margin-top;\n transition-duration: 150ms;\n }\n\n .horizontal .thumb:hover,\n .horizontal[data-dragging=\"true\"] .thumb {\n height: 8px;\n margin-top: 4px;\n }\n}\n",
|
|
526
519
|
"styleableParts": [
|
|
527
520
|
{
|
|
528
521
|
"name": "root"
|
|
@@ -836,7 +829,7 @@ export const generatedStyles = {
|
|
|
836
829
|
]
|
|
837
830
|
},
|
|
838
831
|
"menu": {
|
|
839
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .content,\n .sub-content {\n --padding: calc(var(--spacing) * 1.5);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n --menu-animation: none;\n --disabled-opacity: 0.5;\n }\n\n .trigger {\n &[data-type=\"pop-over\"][data-active] {\n opacity: 1;\n background-color: var(--trigger-active-background);\n border-radius: var(--radius-sm, 0.375rem);\n }\n }\n\n .content {\n @apply absolute min-w-40 max-w-80 overflow-hidden;\n z-index: 50000;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n\n &[data-state=\"open\"] {\n animation: var(--menu-animation, slide-in-from-top 0.15s var(--ease-snappy-pop));\n }\n\n &[data-state=\"closed\"] {\n animation: var(--menu-animation, slide-out-to-top 0.15s var(--ease-snappy-pop));\n }\n }\n\n .list {\n @apply space-y-1;\n max-height: 24rem;\n overflow-y: auto;\n }\n\n .item,\n .checkbox-item,\n .radio-item {\n @apply flex min-w-0 items-center gap-2;\n padding: var(--padding);\n border-radius: var(--inner-radius);\n
|
|
832
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .content,\n .sub-content {\n --padding: calc(var(--spacing) * 1.5);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n --menu-animation: none;\n --disabled-opacity: 0.5;\n }\n\n .trigger {\n &[data-type=\"pop-over\"][data-active] {\n opacity: 1;\n background-color: var(--trigger-active-background);\n border-radius: var(--radius-sm, 0.375rem);\n }\n }\n\n .content {\n @apply absolute min-w-40 max-w-80 overflow-hidden;\n z-index: 50000;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n\n &[data-state=\"open\"] {\n animation: var(--menu-animation, slide-in-from-top 0.15s var(--ease-snappy-pop));\n }\n\n &[data-state=\"closed\"] {\n animation: var(--menu-animation, slide-out-to-top 0.15s var(--ease-snappy-pop));\n }\n }\n\n .list {\n @apply space-y-1;\n max-height: 24rem;\n overflow-y: auto;\n }\n\n .item,\n .checkbox-item,\n .radio-item {\n @apply flex min-w-0 items-center gap-2;\n padding: var(--padding);\n border-radius: var(--inner-radius);\n cursor: default;\n user-select: none;\n outline: none;\n color: var(--item-foreground);\n &[data-highlighted] {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n }\n\n .item,\n .sub-trigger {\n &[data-inset] {\n padding-left: calc(var(--padding) * 2.67);\n }\n }\n\n .item-indicator {\n @apply ml-auto flex h-4 w-4 shrink-0 items-center justify-center;\n color: var(--item-indicator-color);\n }\n\n .sub-trigger {\n @apply flex min-w-0 items-center gap-2;\n padding: var(--padding);\n border-radius: var(--inner-radius);\n color: var(--item-foreground);\n cursor: default;\n user-select: none;\n outline: none;\n &[data-highlighted] {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-state=\"open\"]:not([data-highlighted]) {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n }\n\n .sub-trigger-chevron {\n @apply ml-auto h-4 w-4 shrink-0;\n }\n\n .sub-content {\n @apply absolute min-w-40 max-w-80 overflow-hidden;\n z-index: 50000;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n\n &[data-state=\"open\"] {\n animation: var(--menu-animation, slide-in-from-top 0.15s var(--ease-snappy-pop));\n }\n\n &[data-state=\"closed\"] {\n animation: var(--menu-animation, slide-out-to-top 0.15s var(--ease-snappy-pop));\n }\n }\n\n .label {\n padding: var(--padding);\n color: var(--label-foreground);\n\n &[data-inset] {\n padding-left: calc(var(--padding) * 2.67);\n }\n }\n\n .separator {\n @apply -mx-1 my-1 h-px;\n background-color: var(--separator-background);\n }\n\n .shortcut {\n margin-left: auto;\n color: var(--shortcut-foreground);\n }\n\n @keyframes slide-in-from-top { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-out-to-top { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -2px; } }\n}\n",
|
|
840
833
|
"styleableParts": [
|
|
841
834
|
{
|
|
842
835
|
"name": "root"
|
|
@@ -898,15 +891,6 @@ export const generatedStyles = {
|
|
|
898
891
|
"styleableParts": [],
|
|
899
892
|
"cssVariables": []
|
|
900
893
|
},
|
|
901
|
-
"list": {
|
|
902
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n @apply mx-auto;\n max-width: 28rem;\n font-family: var(--font-sans, system-ui, -apple-system, sans-serif);\n color: var(--foreground);\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .header.sticky { position: sticky; top: 0; }\n\n .container[data-spacing=\"sm\"] .header {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-color);\n }\n\n .header > :last-child { color: var(--header-subtitle-color); }\n\n .item {\n @apply flex flex-row items-center gap-3 px-2 py-1 cursor-pointer;\n }\n\n .container .item:hover {\n background-color: var(--background-hover);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n background-color: var(--background-highlighted);\n }\n\n .container[data-spacing=\"sm\"] .item {\n padding: 0.5rem 0.75rem;\n gap: 0.375rem;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control { margin-left: auto; }\n\n .media {\n @apply h-8 w-8;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-color);\n @apply truncate;\n }\n\n .action-group {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .action-group[data-justify=\"space-between\"] { justify-content: space-between; }\n .action-group[data-justify=\"flex-start\"] { justify-content: flex-start; }\n .action-group[data-justify=\"flex-end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply p-1.5 hidden group-hover:flex;\n }\n\n .action {\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n color: var(--action-color);\n @apply p-2;\n }\n\n .action:hover {\n background-color: var(--background-hover);\n color: var(--action-hover-color);\n }\n\n .footer {\n @apply flex p-6 pb-12;\n }\n\n .footer[data-align=\"center\"] { justify-content: center; }\n .footer[data-align=\"flex-start\"] { justify-content: flex-start; }\n .footer[data-align=\"flex-end\"] { justify-content: flex-end; }\n\n .container[data-spacing=\"sm\"] .footer {\n padding: 0.375rem 0.75rem;\n padding-bottom: 0.375rem;\n }\n}\n",
|
|
903
|
-
"styleableParts": [
|
|
904
|
-
{
|
|
905
|
-
"name": "root"
|
|
906
|
-
}
|
|
907
|
-
],
|
|
908
|
-
"cssVariables": []
|
|
909
|
-
},
|
|
910
894
|
"label": {
|
|
911
895
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n display: block;\n font-family: inherit;\n font-size: var(--text-sm);\n color: var(--foreground);\n transition: color 150ms ease;\n\n &[data-size=\"sm\"] { font-size: var(--text-sm); }\n &[data-size=\"lg\"] { font-size: var(--text-md); }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--error-foreground);\n }\n }\n\n .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .helper-text {\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-color);\n\n &[data-error] {\n color: var(--helper-error-color);\n }\n }\n}\n",
|
|
912
896
|
"styleableParts": [
|
|
@@ -922,8 +906,17 @@ export const generatedStyles = {
|
|
|
922
906
|
],
|
|
923
907
|
"cssVariables": []
|
|
924
908
|
},
|
|
909
|
+
"list": {
|
|
910
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n @apply mx-auto;\n max-width: 28rem;\n font-family: var(--font-sans, system-ui, -apple-system, sans-serif);\n color: var(--foreground);\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .header.sticky { position: sticky; top: 0; }\n\n .container[data-spacing=\"sm\"] .header {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-color);\n }\n\n .header > :last-child { color: var(--header-subtitle-color); }\n\n .item {\n @apply flex flex-row items-center gap-3 px-2 py-1 cursor-pointer;\n }\n\n .container .item:hover {\n background-color: var(--background-hover);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n background-color: var(--background-highlighted);\n }\n\n .container[data-spacing=\"sm\"] .item {\n padding: 0.5rem 0.75rem;\n gap: 0.375rem;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control { margin-left: auto; }\n\n .media {\n @apply h-8 w-8;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-color);\n @apply truncate;\n }\n\n .action-group {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .action-group[data-justify=\"space-between\"] { justify-content: space-between; }\n .action-group[data-justify=\"flex-start\"] { justify-content: flex-start; }\n .action-group[data-justify=\"flex-end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply p-1.5 hidden group-hover:flex;\n }\n\n .action {\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n color: var(--action-color);\n @apply p-2;\n }\n\n .action:hover {\n background-color: var(--background-hover);\n color: var(--action-hover-color);\n }\n\n .footer {\n @apply flex p-6 pb-12;\n }\n\n .footer[data-align=\"center\"] { justify-content: center; }\n .footer[data-align=\"flex-start\"] { justify-content: flex-start; }\n .footer[data-align=\"flex-end\"] { justify-content: flex-end; }\n\n .container[data-spacing=\"sm\"] .footer {\n padding: 0.375rem 0.75rem;\n padding-bottom: 0.375rem;\n }\n}\n",
|
|
911
|
+
"styleableParts": [
|
|
912
|
+
{
|
|
913
|
+
"name": "root"
|
|
914
|
+
}
|
|
915
|
+
],
|
|
916
|
+
"cssVariables": []
|
|
917
|
+
},
|
|
925
918
|
"input": {
|
|
926
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n --disabled-opacity: 0.5;\n
|
|
919
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n --disabled-opacity: 0.5;\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 &::-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 color: var(--icon-color);\n pointer-events: none;\n }\n\n .prefix-icon {\n @apply relative;\n }\n\n .suffix-icon {\n @apply relative;\n }\n\n .container {\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--input-border-color, var(--border));\n border-radius: var(--input-border-radius, var(--radius-sm));\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-active] {\n border-color: var(--input-active-border-color, var(--ring-color));\n box-shadow: var(--input-active-box-shadow, 0 0 0 1px mix(var(--ring-color) 20%, transparent));\n }\n\n &[data-focus-visible] {\n @apply ring-0;\n border-color: var(--input-active-border-color, var(--ring-color));\n }\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n &[data-error] {\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-focus-visible] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n &[data-active], &[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 flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2.5;\n }\n\n .end-adornments {\n @apply pr-1.5;\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-color);\n }\n\n .action:hover {\n background-color: var(--background-hover);\n color: var(--action-hover-color);\n }\n\n .number-controls {\n @apply flex w-6 flex-col;\n pointer-events: auto;\n }\n\n .number-controls.disabled {\n opacity: var(--disabled-opacity);\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(--spin-color);\n transition: color 150ms ease-out, background-color 150ms ease-out;\n\n &:hover:not(:disabled) {\n background-color: var(--spin-hover-background);\n color: var(--spin-hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--spin-active-background);\n color: var(--spin-active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n }\n}\n",
|
|
927
920
|
"styleableParts": [
|
|
928
921
|
{
|
|
929
922
|
"name": "root"
|
|
@@ -940,7 +933,7 @@ export const generatedStyles = {
|
|
|
940
933
|
]
|
|
941
934
|
},
|
|
942
935
|
"group": {
|
|
943
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --radius-basis: calc(var(--spacing) * 1.5);\n --padding: var(--radius-basis);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-
|
|
936
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --radius-basis: calc(var(--spacing) * 1.5);\n --padding: var(--radius-basis);\n --radius: var(--radius-sm, 0.375rem);\n --group-border-width: var(--border-width-base, 1px);\n --inner-radius: calc(var(--radius) - var(--group-border-width));\n \n --control-height: calc((0.80em * var(--leading-tight, 1.25)) + (var(--spacing) * 4) + (var(--group-border-width) * 2));\n --item-height: max(calc(var(--control-height) - (var(--padding) * 2) - (var(--group-border-width) * 2)), 0px);\n \n --button-padding-x: max(calc(var(--spacing) * 2.5 - var(--padding)), 0px);\n --button-padding-y: max(calc(var(--spacing) * 2 - var(--padding)), 0px);\n --input-padding-x: max(calc(var(--spacing) * 3 - var(--padding)), 0px);\n --input-padding-y: max(calc(var(--spacing) * 1.5 - var(--padding)), 0px);\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground);\n background-color: var(--background);\n border: var(--group-border-width) solid var(--border);\n border-radius: var(--radius);\n padding: var(--padding);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--control-height);\n\n /* Fixed: Use margin-block (top/bottom) for horizontal layouts */\n .item.divider { margin-block: calc(var(--padding) * -1); }\n .item.divider > [role=\"separator\"] { height: 100%; }\n }\n\n &.vertical {\n @apply flex-col;\n \n .item .group-item { @apply w-full; }\n /* Fixed: Use margin-inline (left/right) for vertical layouts */\n .item.divider { margin-inline: calc(var(--padding) * -1); }\n .item.divider > [role=\"separator\"] { width: 100%; }\n }\n\n &.none {\n --padding: 0;\n @apply gap-0;\n }\n \n &.xs {\n --radius-basis: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n \n &.sm {\n --radius-basis: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n /* --- Ghost Variant --- */\n &.ghost {\n @apply gap-1 border-none overflow-visible;\n \n &.none { @apply gap-0; }\n }\n }\n\n .item {\n @apply flex items-stretch;\n\n &.grow { flex: 1; }\n &.divider { \n @apply p-0 shrink-0 flex-none; \n > [role=\"separator\"] { flex: 0 0 auto; }\n }\n }\n\n /* Shared Height Logic */\n :is(.group-item, .group-input-wrapper, .group-select-wrapper) {\n height: 100%;\n min-height: var(--item-height);\n }\n\n .group-item {\n @apply flex box-border;\n padding: var(--button-padding-y) var(--button-padding-x);\n\n &.active {\n @apply relative;\n background-color: var(--active-background);\n color: var(--active-foreground);\n }\n }\n\n .group-input-wrapper {\n @apply flex flex-1 items-stretch overflow-visible;\n input { \n @apply h-full; \n padding: var(--input-padding-y) var(--input-padding-x); \n }\n }\n\n .group-select-wrapper {\n @apply flex items-stretch p-0 bg-transparent border-none;\n .select { @apply h-full w-full; }\n }\n\n .trigger { border: none; }\n\n .group:not(.ghost) {\n .item :is(.group-item, .group-select-wrapper) { border: none; }\n \n .group-item.active { font-weight: 500; }\n \n .group-input-wrapper {\n --input-border-color: transparent;\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n }\n\n &.none {\n :is(.group-item, .trigger, .group-select-wrapper) { border-radius: 0; --radius: 0; --inner-radius: 0; }\n .group-input-wrapper { --input-border-radius: 0; }\n\n &.horizontal {\n .item:first-child :is(.group-item, .trigger, .group-input-wrapper > *, .group-select-wrapper > *) {\n border-top-left-radius: var(--inner-radius);\n border-bottom-left-radius: var(--inner-radius);\n }\n .item:last-child :is(.group-item, .trigger, .group-input-wrapper > *, .group-select-wrapper > *) {\n border-top-right-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n }\n &.vertical {\n .item:first-child :is(.group-item, .trigger, .group-input-wrapper > *, .group-select-wrapper > *) {\n border-top-left-radius: var(--inner-radius);\n border-top-right-radius: var(--inner-radius);\n }\n .item:last-child :is(.group-item, .trigger, .group-input-wrapper > *, .group-select-wrapper > *) {\n border-bottom-left-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n :is(.group-item, .trigger, .group-select-wrapper > *) { border-radius: var(--inner-radius); }\n .group-input-wrapper { --input-border-radius: var(--inner-radius); }\n }\n }\n\n /* Ghost overrides */\n .group.ghost {\n .group-item.active { border-radius: var(--inner-radius); }\n \n &:not(.none) .item .group-item:not(.active) {\n border-radius: var(--inner-radius);\n border: var(--border-width-base) solid transparent;\n }\n\n &.none {\n :is(.group-item, .group-select-wrapper) { border: none; border-radius: 0; --radius: 0; --inner-radius: 0; }\n .group-input-wrapper { --input-border-color: transparent; --input-border-radius: 0; }\n }\n }\n\n :is(.group-item, .trigger, .group-input-wrapper > [data-focus-visible]):focus-visible {\n @apply relative outline-none z-10;\n }\n\n .group:not(.ghost) :is(.group-item, .trigger, .group-input-wrapper > [data-focus-visible]):focus-visible {\n box-shadow: inset 0 0 0 1px var(--focus-ring-color);\n }\n\n .group.ghost :is(.group-item, .trigger, .group-input-wrapper > [data-focus-visible]):focus-visible {\n box-shadow: 0 0 0 1px var(--focus-ring-color);\n }\n}\n",
|
|
944
937
|
"styleableParts": [],
|
|
945
938
|
"cssVariables": [
|
|
946
939
|
{
|
|
@@ -971,55 +964,108 @@ export const generatedStyles = {
|
|
|
971
964
|
"variant": ".group"
|
|
972
965
|
},
|
|
973
966
|
{
|
|
974
|
-
"name": "--
|
|
975
|
-
"value": "
|
|
967
|
+
"name": "--group-border-width",
|
|
968
|
+
"value": "var(--border-width-base, 1px)",
|
|
976
969
|
"defaultValue": "1px",
|
|
977
970
|
"referencedVars": [
|
|
978
|
-
"--radius",
|
|
979
971
|
"--border-width-base"
|
|
980
972
|
],
|
|
981
973
|
"variant": ".group"
|
|
982
974
|
},
|
|
983
975
|
{
|
|
984
|
-
"name": "--
|
|
985
|
-
"value": "
|
|
976
|
+
"name": "--inner-radius",
|
|
977
|
+
"value": "calc(var(--radius) - var(--group-border-width))",
|
|
986
978
|
"defaultValue": null,
|
|
987
|
-
"referencedVars": [
|
|
988
|
-
|
|
979
|
+
"referencedVars": [
|
|
980
|
+
"--radius",
|
|
981
|
+
"--group-border-width"
|
|
982
|
+
],
|
|
983
|
+
"variant": ".group"
|
|
989
984
|
},
|
|
990
985
|
{
|
|
991
|
-
"name": "--
|
|
992
|
-
"value": "calc(var(--spacing) *
|
|
986
|
+
"name": "--control-height",
|
|
987
|
+
"value": "calc((0.80em * var(--leading-tight, 1.25)) + (var(--spacing) * 4) + (var(--group-border-width) * 2))",
|
|
988
|
+
"defaultValue": "1.25",
|
|
989
|
+
"referencedVars": [
|
|
990
|
+
"--leading-tight",
|
|
991
|
+
"--spacing",
|
|
992
|
+
"--group-border-width"
|
|
993
|
+
],
|
|
994
|
+
"variant": ".group"
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
"name": "--item-height",
|
|
998
|
+
"value": "max(calc(var(--control-height) - (var(--padding) * 2) - (var(--group-border-width) * 2)), 0px)",
|
|
993
999
|
"defaultValue": null,
|
|
994
1000
|
"referencedVars": [
|
|
995
|
-
"--
|
|
1001
|
+
"--control-height",
|
|
1002
|
+
"--padding",
|
|
1003
|
+
"--group-border-width"
|
|
996
1004
|
],
|
|
997
|
-
"variant": ".group
|
|
1005
|
+
"variant": ".group"
|
|
998
1006
|
},
|
|
999
1007
|
{
|
|
1000
|
-
"name": "--padding",
|
|
1001
|
-
"value": "var(--
|
|
1008
|
+
"name": "--button-padding-x",
|
|
1009
|
+
"value": "max(calc(var(--spacing) * 2.5 - var(--padding)), 0px)",
|
|
1002
1010
|
"defaultValue": null,
|
|
1003
1011
|
"referencedVars": [
|
|
1004
|
-
"--
|
|
1012
|
+
"--spacing",
|
|
1013
|
+
"--padding"
|
|
1005
1014
|
],
|
|
1006
|
-
"variant": ".group
|
|
1015
|
+
"variant": ".group"
|
|
1016
|
+
},
|
|
1017
|
+
{
|
|
1018
|
+
"name": "--button-padding-y",
|
|
1019
|
+
"value": "max(calc(var(--spacing) * 2 - var(--padding)), 0px)",
|
|
1020
|
+
"defaultValue": null,
|
|
1021
|
+
"referencedVars": [
|
|
1022
|
+
"--spacing",
|
|
1023
|
+
"--padding"
|
|
1024
|
+
],
|
|
1025
|
+
"variant": ".group"
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
"name": "--input-padding-x",
|
|
1029
|
+
"value": "max(calc(var(--spacing) * 3 - var(--padding)), 0px)",
|
|
1030
|
+
"defaultValue": null,
|
|
1031
|
+
"referencedVars": [
|
|
1032
|
+
"--spacing",
|
|
1033
|
+
"--padding"
|
|
1034
|
+
],
|
|
1035
|
+
"variant": ".group"
|
|
1036
|
+
},
|
|
1037
|
+
{
|
|
1038
|
+
"name": "--input-padding-y",
|
|
1039
|
+
"value": "max(calc(var(--spacing) * 1.5 - var(--padding)), 0px)",
|
|
1040
|
+
"defaultValue": null,
|
|
1041
|
+
"referencedVars": [
|
|
1042
|
+
"--spacing",
|
|
1043
|
+
"--padding"
|
|
1044
|
+
],
|
|
1045
|
+
"variant": ".group"
|
|
1046
|
+
},
|
|
1047
|
+
{
|
|
1048
|
+
"name": "--padding",
|
|
1049
|
+
"value": "0",
|
|
1050
|
+
"defaultValue": null,
|
|
1051
|
+
"referencedVars": [],
|
|
1052
|
+
"variant": ".group.none"
|
|
1007
1053
|
},
|
|
1008
1054
|
{
|
|
1009
1055
|
"name": "--radius-basis",
|
|
1010
|
-
"value": "calc(var(--spacing) *
|
|
1056
|
+
"value": "calc(var(--spacing) * 0.875)",
|
|
1011
1057
|
"defaultValue": null,
|
|
1012
1058
|
"referencedVars": [
|
|
1013
1059
|
"--spacing"
|
|
1014
1060
|
],
|
|
1015
|
-
"variant": ".group.
|
|
1061
|
+
"variant": ".group.xs"
|
|
1016
1062
|
},
|
|
1017
1063
|
{
|
|
1018
|
-
"name": "--
|
|
1019
|
-
"value": "var(--
|
|
1064
|
+
"name": "--radius-basis",
|
|
1065
|
+
"value": "calc(var(--spacing) * 1.25)",
|
|
1020
1066
|
"defaultValue": null,
|
|
1021
1067
|
"referencedVars": [
|
|
1022
|
-
"--
|
|
1068
|
+
"--spacing"
|
|
1023
1069
|
],
|
|
1024
1070
|
"variant": ".group.sm"
|
|
1025
1071
|
},
|
|
@@ -1045,25 +1091,25 @@ export const generatedStyles = {
|
|
|
1045
1091
|
"variant": ".group:not(.ghost) .group-input-wrapper"
|
|
1046
1092
|
},
|
|
1047
1093
|
{
|
|
1048
|
-
"name": "--
|
|
1094
|
+
"name": "--radius",
|
|
1049
1095
|
"value": "0",
|
|
1050
1096
|
"defaultValue": null,
|
|
1051
1097
|
"referencedVars": [],
|
|
1052
|
-
"variant": ".group
|
|
1098
|
+
"variant": ".group:not(.ghost).none :is(.group-item, .trigger, .group-select-wrapper)"
|
|
1053
1099
|
},
|
|
1054
1100
|
{
|
|
1055
|
-
"name": "--radius",
|
|
1101
|
+
"name": "--inner-radius",
|
|
1056
1102
|
"value": "0",
|
|
1057
1103
|
"defaultValue": null,
|
|
1058
1104
|
"referencedVars": [],
|
|
1059
|
-
"variant": ".group
|
|
1105
|
+
"variant": ".group:not(.ghost).none :is(.group-item, .trigger, .group-select-wrapper)"
|
|
1060
1106
|
},
|
|
1061
1107
|
{
|
|
1062
|
-
"name": "--
|
|
1108
|
+
"name": "--input-border-radius",
|
|
1063
1109
|
"value": "0",
|
|
1064
1110
|
"defaultValue": null,
|
|
1065
1111
|
"referencedVars": [],
|
|
1066
|
-
"variant": ".group
|
|
1112
|
+
"variant": ".group:not(.ghost).none .group-input-wrapper"
|
|
1067
1113
|
},
|
|
1068
1114
|
{
|
|
1069
1115
|
"name": "--input-border-radius",
|
|
@@ -1072,35 +1118,35 @@ export const generatedStyles = {
|
|
|
1072
1118
|
"referencedVars": [
|
|
1073
1119
|
"--inner-radius"
|
|
1074
1120
|
],
|
|
1075
|
-
"variant": ".group
|
|
1121
|
+
"variant": ".group:not(.ghost):is(.xs, .sm) .group-input-wrapper"
|
|
1076
1122
|
},
|
|
1077
1123
|
{
|
|
1078
|
-
"name": "--
|
|
1079
|
-
"value": "
|
|
1124
|
+
"name": "--radius",
|
|
1125
|
+
"value": "0",
|
|
1080
1126
|
"defaultValue": null,
|
|
1081
1127
|
"referencedVars": [],
|
|
1082
|
-
"variant": ".group.ghost.none .group-
|
|
1128
|
+
"variant": ".group.ghost.none :is(.group-item, .group-select-wrapper)"
|
|
1083
1129
|
},
|
|
1084
1130
|
{
|
|
1085
|
-
"name": "--
|
|
1131
|
+
"name": "--inner-radius",
|
|
1086
1132
|
"value": "0",
|
|
1087
1133
|
"defaultValue": null,
|
|
1088
1134
|
"referencedVars": [],
|
|
1089
|
-
"variant": ".group.ghost.none .group-
|
|
1135
|
+
"variant": ".group.ghost.none :is(.group-item, .group-select-wrapper)"
|
|
1090
1136
|
},
|
|
1091
1137
|
{
|
|
1092
|
-
"name": "--
|
|
1093
|
-
"value": "
|
|
1138
|
+
"name": "--input-border-color",
|
|
1139
|
+
"value": "transparent",
|
|
1094
1140
|
"defaultValue": null,
|
|
1095
1141
|
"referencedVars": [],
|
|
1096
|
-
"variant": ".group.ghost.none .group-
|
|
1142
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1097
1143
|
},
|
|
1098
1144
|
{
|
|
1099
|
-
"name": "--
|
|
1145
|
+
"name": "--input-border-radius",
|
|
1100
1146
|
"value": "0",
|
|
1101
1147
|
"defaultValue": null,
|
|
1102
1148
|
"referencedVars": [],
|
|
1103
|
-
"variant": ".group.ghost.none .group-
|
|
1149
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1104
1150
|
}
|
|
1105
1151
|
]
|
|
1106
1152
|
},
|
|
@@ -1235,7 +1281,14 @@ export const generatedStyles = {
|
|
|
1235
1281
|
},
|
|
1236
1282
|
"command": {
|
|
1237
1283
|
"rawCss": "@reference \"tailwindcss\";\n\n:global(.command) :global(.input) {\n --background: var(--background-input);\n}\n\n@layer components {\n /* Overlay Container */\n .overlay {\n @apply fixed inset-0 flex items-start justify-center overflow-hidden;\n z-index: 999;\n padding-top: 20vh;\n /* Apply backdrop styles directly to avoid creating a containing block that disrupts sticky elements */\n background-color: var(--overlay);\n backdrop-filter: var(--overlay-backdrop);\n }\n\n /* Content */\n .content {\n @apply relative m-2 w-full max-w-[28rem];\n border-radius: var(--radius-sm);\n background: var(--background-default);\n margin-inline: 1rem;\n box-shadow: var(--shadow);\n animation: fade-in-zoom-in 0.2s ease-out;\n }\n\n .inner {\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n border-top: var(--border-width-base) solid var(--border-default);\n @apply overflow-hidden;\n }\n\n /* Search Section */\n .search {\n @apply border-none flex p-1.5;\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n }\n\n .input {\n border-color: transparent;\n background: transparent;\n box-shadow: none;\n\n &[data-active],\n &[data-focus-visible] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n\n /* List Section */\n .list {\n @apply py-0.5 px-2 space-y-2;\n background-color: var(--list-background);\n }\n\n .list :global([role=\"listbox\"]) {\n @apply flex w-full flex-col;\n }\n\n .item {\n @apply flex items-center justify-between rounded-sm px-2 py-0.5 cursor-pointer;\n border-radius: 0.375rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .item:hover {\n background-color: var(--background-hover);\n }\n\n .item[data-highlighted=\"true\"] {\n background-color: var(--background-selected);\n }\n\n .item-content {\n @apply flex min-w-0 flex-1 items-center gap-2.5;\n flex: 1;\n }\n\n .item-icon {\n @apply flex h-6 w-6 shrink-0 items-center justify-center;\n color: var(--color-icon);\n }\n\n .item-labels {\n flex: 1;\n @apply min-w-0;\n }\n\n .item-label {\n font-size: var(--text-sm);\n color: var(--color-default);\n font-weight: var(--font-weight-medium);\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n color: var(--color-muted);\n font-size: 0.875rem;\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .hint-wrapper {\n @apply flex items-center;\n }\n\n .category-header {\n @apply px-2 py-1.5 mt-2 first:mt-0;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-muted);\n }\n\n /* Empty State */\n .empty {\n padding: 1.5rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--color-muted);\n }\n\n /* Footer */\n .footer {\n @apply flex w-full items-center gap-2 px-1.5 py-2;\n background-color: var(--footer-background);\n border-top: 1px solid var(--border-default);\n justify-content: flex-between;\n }\n\n /* Animations */\n @keyframes fade-in-zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n}\n",
|
|
1238
|
-
"styleableParts": [
|
|
1284
|
+
"styleableParts": [
|
|
1285
|
+
{
|
|
1286
|
+
"name": "root"
|
|
1287
|
+
},
|
|
1288
|
+
{
|
|
1289
|
+
"name": "overlay"
|
|
1290
|
+
}
|
|
1291
|
+
],
|
|
1239
1292
|
"cssVariables": [
|
|
1240
1293
|
{
|
|
1241
1294
|
"name": "--background",
|
|
@@ -1263,21 +1316,34 @@ export const generatedStyles = {
|
|
|
1263
1316
|
]
|
|
1264
1317
|
},
|
|
1265
1318
|
"color": {
|
|
1266
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --
|
|
1267
|
-
"styleableParts": [
|
|
1319
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --background: color-mix(in srgb, var(--background-800) 30%, transparent);;\n --border: var(--background-700);\n --ring-color: var(--accent-500);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n width: 260px;\n }\n\n .color[data-disabled=\"true\"] {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .colorControls {\n @apply pb-3 px-3 space-y-3;\n }\n\n /* Input styles */\n .inputGroup {\n width: 100%;\n }\n\n .inputGroup > div:first-child {\n flex: 1;\n min-width: 0;\n }\n\n .colorInput {\n width: 100%;\n }\n\n .formatSelect {\n flex-shrink: 0;\n width: 85px;\n }\n\n .color[data-size=\"sm\"] .formatSelect {\n width: 75px;\n }\n\n /* Canvas Styles */\n .canvasContainer {\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 }\n\n .canvasContainer[data-focus-visible=\"true\"] {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .canvas {\n position: relative;\n width: 100%;\n flex: 1;\n border-radius: none;\n /* clip-path: inset(0 round var(--radius-sm)); */\n overflow: hidden;\n }\n\n .canvasGradientHue {\n position: absolute;\n inset: 0;\n overflow: hidden;\n /* border-radius: var(--radius-sm); */\n }\n\n .canvasGradientSaturation {\n position: absolute;\n inset: 0;\n background: linear-gradient(to right, rgb(255, 255, 255), transparent);\n border-radius: none;\n }\n\n .canvasGradientLightness {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgb(0, 0, 0), transparent);\n border-radius: none\n }\n\n .canvasPointer {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid color-mix(in srgb, var(--foreground-200) 50%, transparent);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n\n /* Hue Slider Styles */\n .hueSlider {\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 .hueTrack {\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) solid var(--border);\n }\n\n .hueThumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n background: white;\n pointer-events: none;\n }\n\n .hueSlider[data-focus-visible=\"true\"] .hueThumb {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .hueThumb:hover {\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n }\n\n .hueThumb:active {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n /* Opacity Slider Styles */\n .opacitySlider {\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 .opacityTrack {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n background-image: repeating-linear-gradient(\n 45deg,\n var(--background-800),\n var(--background-800) 10px,\n var(--background-700) 10px,\n var(--background-700) 20px\n );\n border: var(--border-width-base) solid var(--border);\n overflow: hidden;\n }\n\n .opacityThumb {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: var(--radius-full);\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n background: white;\n pointer-events: none;\n }\n\n .opacitySlider[data-focus-visible=\"true\"] .opacityThumb {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .opacityThumb:hover {\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n }\n\n .opacityThumb:active {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n /* Recent Colors Styles */\n .recentColors {\n display: flex;\n gap: 0.5rem;\n overflow-x: auto;\n padding-bottom: 0.25rem;\n }\n\n .recentColorSwatch {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n cursor: pointer;\n background: none;\n padding: 0;\n outline: none;\n }\n\n .recentColorSwatch:hover {\n transform: scale(1.1);\n box-shadow: 0 0 0 2px var(--ring-color);\n }\n\n .recentColorSwatch:active {\n transform: scale(0.95);\n }\n\n .recentColorSwatch:focus-visible {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n\n /* Preview Container - deprecated, use previewSwatch instead */\n .previewContainer {\n display: flex;\n justify-content: center;\n padding: 0.5rem 0;\n }\n\n /* Preview Swatch - inline with input */\n .previewSwatch {\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .previewSwatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--background-700),\n var(--background-700) 6px,\n var(--background-800) 6px,\n var(--background-800) 12px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .previewSwatch::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 position: relative;\n width: 64px;\n height: 64px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n box-shadow: 0 2px 8px rgba(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(--background-700),\n var(--background-700) 10px,\n var(--background-800) 10px,\n var(--background-800) 20px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .canvasContainer {\n min-height: 160px;\n }\n}\n",
|
|
1320
|
+
"styleableParts": [],
|
|
1321
|
+
"cssVariables": [
|
|
1268
1322
|
{
|
|
1269
|
-
"name": "
|
|
1323
|
+
"name": "--background",
|
|
1324
|
+
"value": "color-mix(in srgb, var(--background-800) 30%, transparent)",
|
|
1325
|
+
"defaultValue": null,
|
|
1326
|
+
"referencedVars": [
|
|
1327
|
+
"--background-800"
|
|
1328
|
+
],
|
|
1329
|
+
"variant": ".color"
|
|
1270
1330
|
},
|
|
1271
1331
|
{
|
|
1272
|
-
"name": "
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1332
|
+
"name": "--border",
|
|
1333
|
+
"value": "var(--background-700)",
|
|
1334
|
+
"defaultValue": null,
|
|
1335
|
+
"referencedVars": [
|
|
1336
|
+
"--background-700"
|
|
1337
|
+
],
|
|
1338
|
+
"variant": ".color"
|
|
1339
|
+
},
|
|
1276
1340
|
{
|
|
1277
|
-
"name": "--
|
|
1278
|
-
"value": "
|
|
1341
|
+
"name": "--ring-color",
|
|
1342
|
+
"value": "var(--accent-500)",
|
|
1279
1343
|
"defaultValue": null,
|
|
1280
|
-
"referencedVars": [
|
|
1344
|
+
"referencedVars": [
|
|
1345
|
+
"--accent-500"
|
|
1346
|
+
],
|
|
1281
1347
|
"variant": ".color"
|
|
1282
1348
|
}
|
|
1283
1349
|
]
|
|
@@ -1316,7 +1382,7 @@ export const generatedStyles = {
|
|
|
1316
1382
|
]
|
|
1317
1383
|
},
|
|
1318
1384
|
"checkbox": {
|
|
1319
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n /* Hidden input element positioned behind visual checkbox */\n .checkbox-input {\n @apply absolute inset-0 h-full w-full cursor-pointer;\n opacity: 0;\n }\n\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .checkbox-container {\n @apply relative inline-flex items-center justify-center;\n }\n\n /* Visual checkbox */\n .checkbox {\n --disabled-opacity: 0.6;\n\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-xs);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n /* Interactive States */\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:focus-visible {\n outline: 2px solid transparent;\n box-shadow: 0 0 0 3px var(--ring-color);\n }\n\n &[data-
|
|
1385
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n /* Hidden input element positioned behind visual checkbox */\n .checkbox-input {\n @apply absolute inset-0 h-full w-full cursor-pointer;\n opacity: 0;\n }\n\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .checkbox-container {\n @apply relative inline-flex items-center justify-center;\n }\n\n /* Visual checkbox */\n .checkbox {\n --disabled-opacity: 0.6;\n\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-xs);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n /* Interactive States */\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:focus-visible {\n outline: 2px solid transparent;\n box-shadow: 0 0 0 3px var(--ring-color);\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-indeterminate=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\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 and Indeterminate styles - combined */\n .checkbox-checkmark,\n .checkbox-indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--checkmark-color);\n pointer-events: none;\n }\n\n\n .label {\n @apply cursor-pointer select-none;\n transition: color 200ms var(--ease-snappy-pop);\n }\n\n .label-sm {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-md {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-lg {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-disabled {\n @apply opacity-60 cursor-not-allowed;\n }\n\n .helper-text {\n @apply text-sm ml-8;\n transition: color 200ms var(--ease-snappy-pop);\n }\n\n .helper-text-normal { color: inherit; }\n\n .helper-text-error { color: var(--error-color); }\n}\n",
|
|
1320
1386
|
"styleableParts": [
|
|
1321
1387
|
{
|
|
1322
1388
|
"name": "root"
|
|
@@ -1357,7 +1423,7 @@ export const generatedStyles = {
|
|
|
1357
1423
|
"cssVariables": []
|
|
1358
1424
|
},
|
|
1359
1425
|
"button": {
|
|
1360
|
-
"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
|
|
1426
|
+
"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 /* height: fit-content; */\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(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:active:not(:disabled) {\n filter: brightness(0.8);\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",
|
|
1361
1427
|
"styleableParts": [
|
|
1362
1428
|
{
|
|
1363
1429
|
"name": "root"
|
|
@@ -1372,7 +1438,7 @@ export const generatedStyles = {
|
|
|
1372
1438
|
"cssVariables": []
|
|
1373
1439
|
},
|
|
1374
1440
|
"banner": {
|
|
1375
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-4;\n font-family: inherit;\n font-
|
|
1441
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-4;\n font-family: inherit;\n font-weight: var(--font-weight-medium);\n line-height: var(--leading-normal);\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease-out, border-color 0.15s ease-out;\n }\n\n .content {\n @apply flex flex-col gap-2;\n }\n\n .icon-container {\n @apply flex shrink-0 items-center justify-center self-start;\n }\n\n .icon {\n @apply mr-4 h-5 w-5;\n color: var(--icon-color, currentColor);\n }\n\n .dismiss {\n @apply flex h-8 w-8 shrink-0 items-center justify-center p-0 cursor-pointer;\n background-color: transparent;\n color: currentColor;\n border: none;\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease-out;\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n }\n\n .title {\n font-weight: var(--font-weight-semibold);\n font-size: inherit;\n line-height: var(--leading-tight);\n @apply my-0;\n }\n\n .body {\n font-weight: var(--font-weight-medium);\n font-size: inherit;\n line-height: var(--leading-normal);\n @apply my-0;\n }\n}\n\n\n.banner.sm {\n @apply px-3 py-2;\n}\n\n.banner.md {\n @apply px-4 py-3;\n}\n\n.banner.lg {\n @apply px-6 py-4;\n}\n",
|
|
1376
1442
|
"styleableParts": [
|
|
1377
1443
|
{
|
|
1378
1444
|
"name": "root"
|
|
@@ -1390,7 +1456,7 @@ export const generatedStyles = {
|
|
|
1390
1456
|
"cssVariables": []
|
|
1391
1457
|
},
|
|
1392
1458
|
"badge": {
|
|
1393
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 px-3 py-0.5;\n
|
|
1459
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 px-3 py-0.5;\n height: fit-content;\n width: fit-content;\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--background-border);\n border-radius: var(--radius-sm);\n }\n\n .badge.sm {\n @apply px-1.5 py-px;\n gap: 0.25rem;\n font-size: var(--text-sm);\n }\n\n .badge.dismissible {\n @apply pr-0.5;\n }\n\n .badge.md {\n @apply px-3.5 py-1;\n font-size: var(--text-sm);\n }\n\n .badge.lg {\n @apply px-4 py-2.5;\n font-size: var(--text-sm);\n }\n\n .pill { border-radius: 9999px; }\n\n .icon {\n @apply flex items-center shrink-0;\n }\n\n .dismiss {\n @apply ml-1 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-xs);\n background: transparent;\n border: none;\n color: var(--dismiss-color);\n transition: opacity 150ms var(--ease-snappy-pop), transform 150ms var(--ease-snappy-pop);\n outline: none;\n }\n\n .dismiss-button[data-hovered=\"true\"] {\n background: var(--dismiss-hover-background);\n }\n\n .dismiss-button[data-pressed=\"true\"] {\n background: var(--dismiss-pressed-background);\n transform: scale(0.95);\n }\n\n .dismiss-button[data-focus-visible=\"true\"] {\n outline: 2px solid currentColor;\n outline-offset: 1px;\n }\n}\n",
|
|
1394
1460
|
"styleableParts": [
|
|
1395
1461
|
{
|
|
1396
1462
|
"name": "root"
|