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
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"cssVariables": []
|
|
25
25
|
},
|
|
26
26
|
"tooltip": {
|
|
27
|
-
"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
|
|
27
|
+
"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",
|
|
28
28
|
"styleableParts": [
|
|
29
29
|
{
|
|
30
30
|
"name": "root"
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
]
|
|
148
148
|
},
|
|
149
149
|
"tabs": {
|
|
150
|
-
"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
|
|
150
|
+
"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",
|
|
151
151
|
"styleableParts": [
|
|
152
152
|
{
|
|
153
153
|
"name": "root"
|
|
@@ -160,13 +160,6 @@
|
|
|
160
160
|
}
|
|
161
161
|
],
|
|
162
162
|
"cssVariables": [
|
|
163
|
-
{
|
|
164
|
-
"name": "--indicator-padding",
|
|
165
|
-
"value": "2px",
|
|
166
|
-
"defaultValue": null,
|
|
167
|
-
"referencedVars": [],
|
|
168
|
-
"variant": ".indicator"
|
|
169
|
-
},
|
|
170
163
|
{
|
|
171
164
|
"name": "--disabled-opacity",
|
|
172
165
|
"value": "0.5",
|
|
@@ -273,7 +266,7 @@
|
|
|
273
266
|
]
|
|
274
267
|
},
|
|
275
268
|
"slider": {
|
|
276
|
-
"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
|
|
269
|
+
"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",
|
|
277
270
|
"styleableParts": [
|
|
278
271
|
{
|
|
279
272
|
"name": "root"
|
|
@@ -341,7 +334,7 @@
|
|
|
341
334
|
]
|
|
342
335
|
},
|
|
343
336
|
"select": {
|
|
344
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n
|
|
337
|
+
"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",
|
|
345
338
|
"styleableParts": [
|
|
346
339
|
{
|
|
347
340
|
"name": "root"
|
|
@@ -521,7 +514,7 @@
|
|
|
521
514
|
]
|
|
522
515
|
},
|
|
523
516
|
"scroll": {
|
|
524
|
-
"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-
|
|
517
|
+
"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",
|
|
525
518
|
"styleableParts": [
|
|
526
519
|
{
|
|
527
520
|
"name": "root"
|
|
@@ -835,7 +828,7 @@
|
|
|
835
828
|
]
|
|
836
829
|
},
|
|
837
830
|
"menu": {
|
|
838
|
-
"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
|
|
831
|
+
"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",
|
|
839
832
|
"styleableParts": [
|
|
840
833
|
{
|
|
841
834
|
"name": "root"
|
|
@@ -897,15 +890,6 @@
|
|
|
897
890
|
"styleableParts": [],
|
|
898
891
|
"cssVariables": []
|
|
899
892
|
},
|
|
900
|
-
"list": {
|
|
901
|
-
"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",
|
|
902
|
-
"styleableParts": [
|
|
903
|
-
{
|
|
904
|
-
"name": "root"
|
|
905
|
-
}
|
|
906
|
-
],
|
|
907
|
-
"cssVariables": []
|
|
908
|
-
},
|
|
909
893
|
"label": {
|
|
910
894
|
"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",
|
|
911
895
|
"styleableParts": [
|
|
@@ -921,8 +905,17 @@
|
|
|
921
905
|
],
|
|
922
906
|
"cssVariables": []
|
|
923
907
|
},
|
|
908
|
+
"list": {
|
|
909
|
+
"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",
|
|
910
|
+
"styleableParts": [
|
|
911
|
+
{
|
|
912
|
+
"name": "root"
|
|
913
|
+
}
|
|
914
|
+
],
|
|
915
|
+
"cssVariables": []
|
|
916
|
+
},
|
|
924
917
|
"input": {
|
|
925
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n --disabled-opacity: 0.5;\n
|
|
918
|
+
"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",
|
|
926
919
|
"styleableParts": [
|
|
927
920
|
{
|
|
928
921
|
"name": "root"
|
|
@@ -939,7 +932,7 @@
|
|
|
939
932
|
]
|
|
940
933
|
},
|
|
941
934
|
"group": {
|
|
942
|
-
"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-
|
|
935
|
+
"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",
|
|
943
936
|
"styleableParts": [],
|
|
944
937
|
"cssVariables": [
|
|
945
938
|
{
|
|
@@ -970,55 +963,108 @@
|
|
|
970
963
|
"variant": ".group"
|
|
971
964
|
},
|
|
972
965
|
{
|
|
973
|
-
"name": "--
|
|
974
|
-
"value": "
|
|
966
|
+
"name": "--group-border-width",
|
|
967
|
+
"value": "var(--border-width-base, 1px)",
|
|
975
968
|
"defaultValue": "1px",
|
|
976
969
|
"referencedVars": [
|
|
977
|
-
"--radius",
|
|
978
970
|
"--border-width-base"
|
|
979
971
|
],
|
|
980
972
|
"variant": ".group"
|
|
981
973
|
},
|
|
982
974
|
{
|
|
983
|
-
"name": "--
|
|
984
|
-
"value": "
|
|
975
|
+
"name": "--inner-radius",
|
|
976
|
+
"value": "calc(var(--radius) - var(--group-border-width))",
|
|
985
977
|
"defaultValue": null,
|
|
986
|
-
"referencedVars": [
|
|
987
|
-
|
|
978
|
+
"referencedVars": [
|
|
979
|
+
"--radius",
|
|
980
|
+
"--group-border-width"
|
|
981
|
+
],
|
|
982
|
+
"variant": ".group"
|
|
988
983
|
},
|
|
989
984
|
{
|
|
990
|
-
"name": "--
|
|
991
|
-
"value": "calc(var(--spacing) *
|
|
985
|
+
"name": "--control-height",
|
|
986
|
+
"value": "calc((0.80em * var(--leading-tight, 1.25)) + (var(--spacing) * 4) + (var(--group-border-width) * 2))",
|
|
987
|
+
"defaultValue": "1.25",
|
|
988
|
+
"referencedVars": [
|
|
989
|
+
"--leading-tight",
|
|
990
|
+
"--spacing",
|
|
991
|
+
"--group-border-width"
|
|
992
|
+
],
|
|
993
|
+
"variant": ".group"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
"name": "--item-height",
|
|
997
|
+
"value": "max(calc(var(--control-height) - (var(--padding) * 2) - (var(--group-border-width) * 2)), 0px)",
|
|
992
998
|
"defaultValue": null,
|
|
993
999
|
"referencedVars": [
|
|
994
|
-
"--
|
|
1000
|
+
"--control-height",
|
|
1001
|
+
"--padding",
|
|
1002
|
+
"--group-border-width"
|
|
995
1003
|
],
|
|
996
|
-
"variant": ".group
|
|
1004
|
+
"variant": ".group"
|
|
997
1005
|
},
|
|
998
1006
|
{
|
|
999
|
-
"name": "--padding",
|
|
1000
|
-
"value": "var(--
|
|
1007
|
+
"name": "--button-padding-x",
|
|
1008
|
+
"value": "max(calc(var(--spacing) * 2.5 - var(--padding)), 0px)",
|
|
1001
1009
|
"defaultValue": null,
|
|
1002
1010
|
"referencedVars": [
|
|
1003
|
-
"--
|
|
1011
|
+
"--spacing",
|
|
1012
|
+
"--padding"
|
|
1004
1013
|
],
|
|
1005
|
-
"variant": ".group
|
|
1014
|
+
"variant": ".group"
|
|
1015
|
+
},
|
|
1016
|
+
{
|
|
1017
|
+
"name": "--button-padding-y",
|
|
1018
|
+
"value": "max(calc(var(--spacing) * 2 - var(--padding)), 0px)",
|
|
1019
|
+
"defaultValue": null,
|
|
1020
|
+
"referencedVars": [
|
|
1021
|
+
"--spacing",
|
|
1022
|
+
"--padding"
|
|
1023
|
+
],
|
|
1024
|
+
"variant": ".group"
|
|
1025
|
+
},
|
|
1026
|
+
{
|
|
1027
|
+
"name": "--input-padding-x",
|
|
1028
|
+
"value": "max(calc(var(--spacing) * 3 - var(--padding)), 0px)",
|
|
1029
|
+
"defaultValue": null,
|
|
1030
|
+
"referencedVars": [
|
|
1031
|
+
"--spacing",
|
|
1032
|
+
"--padding"
|
|
1033
|
+
],
|
|
1034
|
+
"variant": ".group"
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
"name": "--input-padding-y",
|
|
1038
|
+
"value": "max(calc(var(--spacing) * 1.5 - var(--padding)), 0px)",
|
|
1039
|
+
"defaultValue": null,
|
|
1040
|
+
"referencedVars": [
|
|
1041
|
+
"--spacing",
|
|
1042
|
+
"--padding"
|
|
1043
|
+
],
|
|
1044
|
+
"variant": ".group"
|
|
1045
|
+
},
|
|
1046
|
+
{
|
|
1047
|
+
"name": "--padding",
|
|
1048
|
+
"value": "0",
|
|
1049
|
+
"defaultValue": null,
|
|
1050
|
+
"referencedVars": [],
|
|
1051
|
+
"variant": ".group.none"
|
|
1006
1052
|
},
|
|
1007
1053
|
{
|
|
1008
1054
|
"name": "--radius-basis",
|
|
1009
|
-
"value": "calc(var(--spacing) *
|
|
1055
|
+
"value": "calc(var(--spacing) * 0.875)",
|
|
1010
1056
|
"defaultValue": null,
|
|
1011
1057
|
"referencedVars": [
|
|
1012
1058
|
"--spacing"
|
|
1013
1059
|
],
|
|
1014
|
-
"variant": ".group.
|
|
1060
|
+
"variant": ".group.xs"
|
|
1015
1061
|
},
|
|
1016
1062
|
{
|
|
1017
|
-
"name": "--
|
|
1018
|
-
"value": "var(--
|
|
1063
|
+
"name": "--radius-basis",
|
|
1064
|
+
"value": "calc(var(--spacing) * 1.25)",
|
|
1019
1065
|
"defaultValue": null,
|
|
1020
1066
|
"referencedVars": [
|
|
1021
|
-
"--
|
|
1067
|
+
"--spacing"
|
|
1022
1068
|
],
|
|
1023
1069
|
"variant": ".group.sm"
|
|
1024
1070
|
},
|
|
@@ -1044,25 +1090,25 @@
|
|
|
1044
1090
|
"variant": ".group:not(.ghost) .group-input-wrapper"
|
|
1045
1091
|
},
|
|
1046
1092
|
{
|
|
1047
|
-
"name": "--
|
|
1093
|
+
"name": "--radius",
|
|
1048
1094
|
"value": "0",
|
|
1049
1095
|
"defaultValue": null,
|
|
1050
1096
|
"referencedVars": [],
|
|
1051
|
-
"variant": ".group
|
|
1097
|
+
"variant": ".group:not(.ghost).none :is(.group-item, .trigger, .group-select-wrapper)"
|
|
1052
1098
|
},
|
|
1053
1099
|
{
|
|
1054
|
-
"name": "--radius",
|
|
1100
|
+
"name": "--inner-radius",
|
|
1055
1101
|
"value": "0",
|
|
1056
1102
|
"defaultValue": null,
|
|
1057
1103
|
"referencedVars": [],
|
|
1058
|
-
"variant": ".group
|
|
1104
|
+
"variant": ".group:not(.ghost).none :is(.group-item, .trigger, .group-select-wrapper)"
|
|
1059
1105
|
},
|
|
1060
1106
|
{
|
|
1061
|
-
"name": "--
|
|
1107
|
+
"name": "--input-border-radius",
|
|
1062
1108
|
"value": "0",
|
|
1063
1109
|
"defaultValue": null,
|
|
1064
1110
|
"referencedVars": [],
|
|
1065
|
-
"variant": ".group
|
|
1111
|
+
"variant": ".group:not(.ghost).none .group-input-wrapper"
|
|
1066
1112
|
},
|
|
1067
1113
|
{
|
|
1068
1114
|
"name": "--input-border-radius",
|
|
@@ -1071,35 +1117,35 @@
|
|
|
1071
1117
|
"referencedVars": [
|
|
1072
1118
|
"--inner-radius"
|
|
1073
1119
|
],
|
|
1074
|
-
"variant": ".group
|
|
1120
|
+
"variant": ".group:not(.ghost):is(.xs, .sm) .group-input-wrapper"
|
|
1075
1121
|
},
|
|
1076
1122
|
{
|
|
1077
|
-
"name": "--
|
|
1078
|
-
"value": "
|
|
1123
|
+
"name": "--radius",
|
|
1124
|
+
"value": "0",
|
|
1079
1125
|
"defaultValue": null,
|
|
1080
1126
|
"referencedVars": [],
|
|
1081
|
-
"variant": ".group.ghost.none .group-
|
|
1127
|
+
"variant": ".group.ghost.none :is(.group-item, .group-select-wrapper)"
|
|
1082
1128
|
},
|
|
1083
1129
|
{
|
|
1084
|
-
"name": "--
|
|
1130
|
+
"name": "--inner-radius",
|
|
1085
1131
|
"value": "0",
|
|
1086
1132
|
"defaultValue": null,
|
|
1087
1133
|
"referencedVars": [],
|
|
1088
|
-
"variant": ".group.ghost.none .group-
|
|
1134
|
+
"variant": ".group.ghost.none :is(.group-item, .group-select-wrapper)"
|
|
1089
1135
|
},
|
|
1090
1136
|
{
|
|
1091
|
-
"name": "--
|
|
1092
|
-
"value": "
|
|
1137
|
+
"name": "--input-border-color",
|
|
1138
|
+
"value": "transparent",
|
|
1093
1139
|
"defaultValue": null,
|
|
1094
1140
|
"referencedVars": [],
|
|
1095
|
-
"variant": ".group.ghost.none .group-
|
|
1141
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1096
1142
|
},
|
|
1097
1143
|
{
|
|
1098
|
-
"name": "--
|
|
1144
|
+
"name": "--input-border-radius",
|
|
1099
1145
|
"value": "0",
|
|
1100
1146
|
"defaultValue": null,
|
|
1101
1147
|
"referencedVars": [],
|
|
1102
|
-
"variant": ".group.ghost.none .group-
|
|
1148
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1103
1149
|
}
|
|
1104
1150
|
]
|
|
1105
1151
|
},
|
|
@@ -1234,7 +1280,14 @@
|
|
|
1234
1280
|
},
|
|
1235
1281
|
"command": {
|
|
1236
1282
|
"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",
|
|
1237
|
-
"styleableParts": [
|
|
1283
|
+
"styleableParts": [
|
|
1284
|
+
{
|
|
1285
|
+
"name": "root"
|
|
1286
|
+
},
|
|
1287
|
+
{
|
|
1288
|
+
"name": "overlay"
|
|
1289
|
+
}
|
|
1290
|
+
],
|
|
1238
1291
|
"cssVariables": [
|
|
1239
1292
|
{
|
|
1240
1293
|
"name": "--background",
|
|
@@ -1262,21 +1315,34 @@
|
|
|
1262
1315
|
]
|
|
1263
1316
|
},
|
|
1264
1317
|
"color": {
|
|
1265
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --
|
|
1266
|
-
"styleableParts": [
|
|
1318
|
+
"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",
|
|
1319
|
+
"styleableParts": [],
|
|
1320
|
+
"cssVariables": [
|
|
1267
1321
|
{
|
|
1268
|
-
"name": "
|
|
1322
|
+
"name": "--background",
|
|
1323
|
+
"value": "color-mix(in srgb, var(--background-800) 30%, transparent)",
|
|
1324
|
+
"defaultValue": null,
|
|
1325
|
+
"referencedVars": [
|
|
1326
|
+
"--background-800"
|
|
1327
|
+
],
|
|
1328
|
+
"variant": ".color"
|
|
1269
1329
|
},
|
|
1270
1330
|
{
|
|
1271
|
-
"name": "
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1331
|
+
"name": "--border",
|
|
1332
|
+
"value": "var(--background-700)",
|
|
1333
|
+
"defaultValue": null,
|
|
1334
|
+
"referencedVars": [
|
|
1335
|
+
"--background-700"
|
|
1336
|
+
],
|
|
1337
|
+
"variant": ".color"
|
|
1338
|
+
},
|
|
1275
1339
|
{
|
|
1276
|
-
"name": "--
|
|
1277
|
-
"value": "
|
|
1340
|
+
"name": "--ring-color",
|
|
1341
|
+
"value": "var(--accent-500)",
|
|
1278
1342
|
"defaultValue": null,
|
|
1279
|
-
"referencedVars": [
|
|
1343
|
+
"referencedVars": [
|
|
1344
|
+
"--accent-500"
|
|
1345
|
+
],
|
|
1280
1346
|
"variant": ".color"
|
|
1281
1347
|
}
|
|
1282
1348
|
]
|
|
@@ -1315,7 +1381,7 @@
|
|
|
1315
1381
|
]
|
|
1316
1382
|
},
|
|
1317
1383
|
"checkbox": {
|
|
1318
|
-
"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-
|
|
1384
|
+
"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",
|
|
1319
1385
|
"styleableParts": [
|
|
1320
1386
|
{
|
|
1321
1387
|
"name": "root"
|
|
@@ -1356,7 +1422,7 @@
|
|
|
1356
1422
|
"cssVariables": []
|
|
1357
1423
|
},
|
|
1358
1424
|
"button": {
|
|
1359
|
-
"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
|
|
1425
|
+
"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",
|
|
1360
1426
|
"styleableParts": [
|
|
1361
1427
|
{
|
|
1362
1428
|
"name": "root"
|
|
@@ -1371,7 +1437,7 @@
|
|
|
1371
1437
|
"cssVariables": []
|
|
1372
1438
|
},
|
|
1373
1439
|
"banner": {
|
|
1374
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-4;\n font-family: inherit;\n font-
|
|
1440
|
+
"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",
|
|
1375
1441
|
"styleableParts": [
|
|
1376
1442
|
{
|
|
1377
1443
|
"name": "root"
|
|
@@ -1389,7 +1455,7 @@
|
|
|
1389
1455
|
"cssVariables": []
|
|
1390
1456
|
},
|
|
1391
1457
|
"badge": {
|
|
1392
|
-
"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
|
|
1458
|
+
"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",
|
|
1393
1459
|
"styleableParts": [
|
|
1394
1460
|
{
|
|
1395
1461
|
"name": "root"
|