ui-lab-registry 0.3.46 → 0.3.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/generated-data.js +8 -8
- package/dist/generated-data.js.map +1 -1
- package/dist/generated-styles.d.ts.map +1 -1
- package/dist/generated-styles.js +95 -105
- package/dist/generated-styles.js.map +1 -1
- package/dist/generated-styles.json +95 -105
- package/package.json +2 -2
- package/src/generated-data.ts +8 -8
- package/src/generated-styles.ts +95 -105
package/dist/generated-data.js
CHANGED
|
@@ -4849,7 +4849,7 @@ export const generatedStyles = {
|
|
|
4849
4849
|
"banner": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-3 px-4 py-3;\n font-family: inherit;\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n background-color: var(--background, var(--background-900));\n color: var(--foreground, var(--foreground-200));\n border: var(--border-width-base, 1px) solid var(--border, var(--background-700));\n border-radius: var(--radius-sm, 0.375rem);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .banner:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover, var(--background));\n border-color: var(--border-hover, var(--border));\n }\n\n .banner[data-pressed=\"true\"] {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n border-color: var(--border-pressed, var(--border-hover, var(--border)));\n }\n\n .content {\n @apply min-w-0 flex flex-col gap-1;\n }\n\n .iconContainer {\n @apply flex shrink-0 items-start justify-center pt-0.5;\n }\n\n .icon {\n @apply 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, 0.375rem);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--dismiss-hover-background, transparent);\n }\n\n &[data-pressed=\"true\"] {\n background-color: var(--dismiss-pressed-background, transparent);\n }\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, 600);\n font-size: inherit;\n line-height: var(--leading-tight, 1.25);\n @apply my-0;\n }\n\n .body {\n font-weight: var(--font-weight-medium, 500);\n font-size: inherit;\n line-height: var(--leading-normal, 1.5);\n @apply my-0;\n }\n}\n",
|
|
4850
4850
|
"button": "@reference \"tailwindcss\";\n\n@layer components {\n .button {\n @apply inline-flex items-center justify-center gap-2 select-none cursor-pointer whitespace-nowrap;\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-hovered=\"true\"]:not([data-disabled=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n filter: grayscale(0.5);\n }\n }\n}\n",
|
|
4851
4851
|
"card": "@reference \"tailwindcss\";\n\n@layer components {\n .card {\n @apply overflow-hidden;\n background-color: var(--background, var(--background-800));\n color: var(--foreground, inherit);\n border: var(--border-width-base, 1px) solid var(--background-border, var(--border));\n border-radius: var(--radius-sm, 0.375rem);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .header {\n @apply p-4;\n color: var(--foreground, inherit);\n border-bottom: var(--border-width-base, 1px) solid var(--background-border, var(--border));\n }\n\n .body {\n @apply px-4 py-2;\n color: var(--foreground, inherit);\n }\n\n .footer {\n @apply px-2 py-2;\n color: var(--foreground, inherit);\n background-color: var(--background, var(--background-800));\n border-top: var(--border-width-base, 1px) solid var(--background-border, var(--border));\n }\n}\n",
|
|
4852
|
-
"checkbox": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox {\n @apply inline-grid gap-x-3;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .box {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n
|
|
4852
|
+
"checkbox": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox {\n @apply inline-grid gap-x-3;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .box {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n\n &[data-invalid=\"true\"] {\n border-color: var(--background-error-border, var(--danger-600));\n }\n\n &[data-invalid=\"true\"][data-selected=\"true\"],\n &[data-invalid=\"true\"][data-indeterminate=\"true\"] {\n border-color: var(--background-border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n }\n\n .checkmark,\n .indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--foreground);\n pointer-events: none;\n }\n\n .label {\n @apply cursor-pointer select-none;\n\n &[data-disabled=\"true\"] {\n @apply opacity-60 cursor-not-allowed;\n }\n }\n\n .label-md {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .helper-text {\n @apply text-xs;\n grid-column: 2;\n color: var(--helper-foreground);\n\n &[data-error=\"true\"] {\n color: var(--helper-error-foreground, var(--foreground-error, var(--danger-600)));\n }\n }\n}\n",
|
|
4853
4853
|
"code": "@reference \"tailwindcss\";\n\n@layer components {\n .code {\n --border-color: var(--background-700);\n --header-bg: mix(var(--background-900) 90%, transparent);\n --scroll-track-bg: mix(var(--background-950) 50%, transparent);\n\n max-height: 52.5rem;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border-color);\n @apply flex w-full min-w-0 flex-col overflow-hidden;\n }\n\n .header {\n flex: none;\n background-color: var(--header-bg);\n @apply flex items-center justify-between px-3 py-1.5;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n border-bottom: 1px solid var(--border-color);\n color: var(--foreground-400);\n }\n\n\n .body {\n @apply relative flex min-h-0 flex-1 flex-col;\n flex: 1;\n }\n\n .viewport { @apply overflow-hidden; }\n\n .viewport :global(pre) {\n background: transparent;\n @apply m-0 p-0;\n width: fit-content;\n }\n\n .viewport :global(code) {\n color: var(--foreground-300);\n white-space: pre;\n }\n\n .viewport::-webkit-scrollbar {\n width: 0.5rem;\n }\n\n .viewport::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .viewport::-webkit-scrollbar-thumb {\n background-color: var(--background-700);\n border-radius: 9999px;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .viewport::-webkit-scrollbar-thumb:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-600);\n }\n\n .scroll-track {\n flex: none;\n @apply w-full;\n overflow-x: auto;\n background-color: var(--scroll-track-bg);\n backdrop-filter: blur(4px);\n }\n\n .expand-button {\n @apply flex w-full items-center gap-3 px-4 py-2 cursor-pointer;\n color: var(--foreground-300);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n border-top: 1px solid var(--border-color);\n background: transparent;\n border-left: none;\n border-right: none;\n border-bottom: none;\n font-family: inherit;\n }\n\n .expand-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n }\n\n .expand-icon { @apply shrink-0; color: var(--foreground-400); }\n\n .copy-button {\n @apply absolute right-2 top-2 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-sm);\n color: var(--foreground-400);\n opacity: 0;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n background: transparent;\n border: none;\n z-index: 1;\n }\n\n .copy-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n color: var(--foreground-300);\n }\n\n .copy-button:focus,\n .body:hover .copy-button {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n}\n",
|
|
4854
4854
|
"color": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --background: color-mix(in srgb, var(--background-800) 30%, transparent);\n --background-border: var(--background-700);\n --focus-visible: var(--accent-500);\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n width: 260px;\n }\n\n .color[data-disabled=\"true\"] {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .color[data-variant=\"popover\"] {\n background: transparent;\n border-color: transparent;\n border-radius: 0;\n }\n\n .color-provider {\n display: inline-flex;\n width: fit-content;\n }\n\n .color-provider .color-trigger {\n --trigger-background: color-mix(in srgb, var(--background-800) 35%, transparent);\n --trigger-background-hover: color-mix(in srgb, var(--background-700) 45%, transparent);\n --trigger-border: var(--background-700);\n --trigger-text: var(--foreground-200);\n --background-border: var(--background-700);\n --focus-visible: var(--accent-500);\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-width: 170px;\n height: 40px;\n padding: 0 0.75rem;\n border: var(--border-width-base, 1px) solid var(--trigger-border);\n border-radius: var(--radius-sm, 0.375rem);\n background: var(--trigger-background);\n color: var(--trigger-text);\n cursor: pointer;\n font: inherit;\n font-size: 0.875rem;\n line-height: 1;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .color-provider .color-trigger:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background: var(--trigger-background-hover);\n }\n\n .color-provider .color-trigger:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .color-provider .color-trigger[data-disabled=\"true\"] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .color-provider .color-trigger[data-size=\"sm\"] {\n min-width: 150px;\n height: 34px;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n }\n\n .color-provider .color-trigger[data-size=\"lg\"] {\n min-width: 190px;\n height: 46px;\n padding: 0 0.875rem;\n font-size: 0.9375rem;\n }\n\n .color-provider .color-trigger-swatch {\n position: relative;\n width: 20px;\n height: 20px;\n flex: 0 0 auto;\n border-radius: var(--radius-xs, 0.25rem);\n border: var(--border-width-base, 1px) solid var(--background-border);\n overflow: hidden;\n }\n\n .color-provider .color-trigger-swatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 4px,\n var(--checkerboard-light) 4px,\n var(--checkerboard-light) 8px\n );\n }\n\n .color-provider .color-trigger-swatch::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: var(--preview-color, transparent);\n }\n\n .color-provider .color-trigger-value {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .color .controls {\n @apply pb-3 px-3 space-y-3;\n }\n\n .input-group {\n width: 100%;\n }\n\n .input-group > div:first-child {\n flex: 1;\n min-width: 0;\n }\n\n .input-group .input {\n width: 100%;\n }\n\n .input-group .format {\n flex-shrink: 0;\n width: 85px;\n }\n\n .color[data-size=\"sm\"] .format {\n width: 75px;\n }\n\n .canvas {\n position: relative;\n width: 96%;\n @apply mx-auto mt-2;\n cursor: crosshair;\n touch-action: none;\n display: flex;\n flex-direction: column;\n min-height: 160px;\n }\n\n .canvas[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .canvas .canvas-inner {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n }\n\n .canvas .canvas-gradient-hue {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n\n .canvas .canvas-gradient-saturation {\n position: absolute;\n inset: 0;\n background: linear-gradient(to right, rgb(255, 255, 255), transparent);\n }\n\n .canvas .canvas-gradient-brightness {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgb(0, 0, 0), transparent);\n }\n\n .canvas .canvas-pointer {\n --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);\n\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid var(--pointer-border);\n box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.3);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n\n .hue-slider {\n --slider-track-size: 16px;\n --slider-thumb-size: 12px;\n --slider-hit-size: 16px;\n --slider-track-radius: var(--radius-full);\n --slider-track-border: var(--border-width-base, 1px) solid var(--background-border);\n --slider-track-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 --slider-range-display: none;\n --slider-thumb-scale-active: 1;\n\n width: 100%;\n min-height: 16px;\n border-radius: var(--radius-full);\n }\n\n .hue-slider .hue-track {\n position: relative;\n width: 100%;\n }\n\n .hue-slider .hue-thumb {\n --thumb-border: white;\n --thumb-background: white;\n --slider-thumb-background: var(--thumb-background);\n --slider-thumb-border: 2px solid var(--thumb-border);\n --slider-thumb-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n --slider-thumb-shadow-hover: 0 2px 6px rgb(0 0 0 / 0.4);\n --slider-thumb-shadow-active: 0 1px 3px rgb(0 0 0 / 0.3);\n\n border-radius: var(--radius-full);\n }\n\n .hue-slider .hue-thumb[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .hue-slider .hue-thumb[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n box-shadow: var(--slider-thumb-shadow-hover);\n }\n\n .hue-slider .hue-thumb[data-pressed=\"true\"] {\n box-shadow: var(--slider-thumb-shadow-active);\n }\n\n .opacity-slider {\n --slider-track-size: 12px;\n --slider-thumb-size: 10px;\n --slider-hit-size: 12px;\n --slider-track-radius: var(--radius-full);\n --slider-track-border: var(--border-width-base, 1px) solid var(--background-border);\n --slider-range-display: none;\n --slider-thumb-scale-active: 1;\n --checkerboard-dark: var(--background-800);\n --checkerboard-light: var(--background-700);\n --slider-track-background:\n linear-gradient(to right, transparent, var(--color-slider-opacity-color, rgb(0, 0, 0))),\n repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 10px,\n var(--checkerboard-light) 10px,\n var(--checkerboard-light) 20px\n );\n\n width: 100%;\n min-height: 12px;\n border-radius: var(--radius-full);\n }\n\n .opacity-slider .opacity-track {\n position: relative;\n width: 100%;\n overflow: hidden;\n }\n\n .opacity-slider .opacity-thumb {\n --thumb-border: white;\n --thumb-background: white;\n --slider-thumb-background: var(--thumb-background);\n --slider-thumb-border: 2px solid var(--thumb-border);\n --slider-thumb-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n --slider-thumb-shadow-hover: 0 2px 6px rgb(0 0 0 / 0.4);\n --slider-thumb-shadow-active: 0 1px 3px rgb(0 0 0 / 0.3);\n\n border-radius: var(--radius-full);\n }\n\n .opacity-slider .opacity-thumb[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .opacity-slider .opacity-thumb[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n box-shadow: var(--slider-thumb-shadow-hover);\n }\n\n .opacity-slider .opacity-thumb[data-pressed=\"true\"] {\n box-shadow: var(--slider-thumb-shadow-active);\n }\n\n .recent-colors {\n display: flex;\n gap: 0.5rem;\n overflow-x: auto;\n padding-bottom: 0.25rem;\n }\n\n .recent-colors .recent-color-swatch {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n cursor: pointer;\n background: none;\n padding: 0;\n outline: none;\n transition:\n box-shadow var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n transform var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .recent-colors .recent-color-swatch:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n transform: scale(1.1);\n box-shadow: 0 0 0 2px var(--focus-visible);\n }\n\n .recent-colors .recent-color-swatch:active {\n transform: scale(0.95);\n }\n\n .recent-colors .recent-color-swatch:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .preview-swatch {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .preview-swatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 6px,\n var(--checkerboard-light) 6px,\n var(--checkerboard-light) 12px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .preview-swatch::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: var(--preview-color, transparent);\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 2;\n }\n\n .preview {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 64px;\n height: 64px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);\n overflow: hidden;\n }\n\n .preview::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 10px,\n var(--checkerboard-light) 10px,\n var(--checkerboard-light) 20px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n}\n",
|
|
4855
4855
|
"command": "@reference \"tailwindcss\";\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);\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);\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(--background-list);\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:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n background-color: var(--background);\n color: var(--foreground);\n }\n\n .item:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\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(--foreground);\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(--foreground);\n font-weight: var(--font-weight-medium);\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n color: var(--foreground-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(--foreground-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(--foreground-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(--background-footer);\n border-top: 1px solid var(--border);\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",
|
|
@@ -4861,7 +4861,7 @@ export const generatedStyles = {
|
|
|
4861
4861
|
"frame": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n --frame-radius: var(--radius-sm, 24px);\n --frame-stroke-width: var(--border-width-base, 1px);\n }\n\n .shape {\n rx: var(--frame-radius);\n }\n\n .stroke {\n stroke-width: var(--frame-stroke-width);\n vector-effect: non-scaling-stroke;\n }\n\n}\n",
|
|
4862
4862
|
"gallery": "@reference \"tailwindcss\";\n\n@layer components {\n .item-scope {\n @apply block min-w-0 h-full;\n }\n\n .item {\n --border-width: var(--border-width-base, 1px);\n --radius: var(--radius-sm, 0.375rem);\n --transition: var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n --view-width: 200px;\n\n @apply flex flex-col overflow-hidden no-underline cursor-pointer w-full h-full;\n\n color: inherit;\n background: var(--background);\n border: var(--border-width) solid var(--background-border);\n border-radius: var(--radius);\n transition:\n border-color var(--transition),\n transform var(--transition),\n background-color var(--transition),\n box-shadow var(--transition);\n }\n\n .item:focus {\n outline: none;\n }\n\n .item[data-disabled=\"true\"] {\n @apply cursor-not-allowed;\n }\n\n .item[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n border-color: var(--background-hover-border);\n }\n\n .item[data-pressed=\"true\"] {\n border-color: var(--background-pressed-border, var(--background-hover-border));\n }\n\n .item[data-orientation=\"horizontal\"] {\n @apply flex-row;\n }\n\n .item[data-orientation=\"horizontal\"] .view {\n width: var(--view-width);\n }\n\n .view {\n --aspect-ratio: 16/9;\n --background: transparent;\n\n @apply relative overflow-hidden;\n\n aspect-ratio: var(--aspect-ratio);\n background: var(--background);\n }\n\n .view > img,\n .view > video {\n @apply w-full h-full object-cover;\n }\n\n .body {\n --gap: calc(var(--spacing, 0.25rem) * 1);\n --padding: calc(var(--spacing, 0.25rem) * 3);\n --title-color: var(--foreground);\n --description-color: var(--foreground-muted, var(--foreground));\n\n @apply flex flex-col self-start min-w-0;\n\n gap: var(--gap);\n padding: var(--padding);\n }\n\n .item[data-orientation=\"horizontal\"] .body {\n flex: 1;\n align-self: stretch;\n }\n\n .body > :first-child {\n color: var(--title-color);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .body > :not(:first-child) {\n color: var(--description-color);\n font-size: var(--text-sm, 0.875rem);\n }\n}\n",
|
|
4863
4863
|
"grid": "@reference \"tailwindcss\";\n\n@layer components {\n .grid {\n --gap-scale: 1;\n\n --background: transparent;\n --foreground: inherit;\n\n @apply grid w-full;\n background-color: var(--background);\n color: var(--foreground);\n grid-template-columns: var(--grid-tpl, repeat(3, 1fr));\n grid-template-rows: var(--grid-rows, auto);\n gap: calc(var(--spacing, 0.25rem) * var(--grid-gap-step, 4) * var(--gap-scale, 1));\n row-gap: calc(var(--spacing, 0.25rem) * var(--grid-row-gap-step, var(--grid-gap-step, 4)) * var(--gap-scale, 1));\n column-gap: calc(var(--spacing, 0.25rem) * var(--grid-col-gap-step, var(--grid-gap-step, 4)) * var(--gap-scale, 1));\n justify-items: var(--grid-ji, stretch);\n align-items: var(--grid-ai, stretch);\n justify-content: var(--grid-jc, start);\n align-content: var(--grid-ac, start);\n grid-auto-flow: var(--grid-flow, row);\n }\n\n .container {\n container-type: inline-size;\n container-name: grid-ctx;\n @apply w-full;\n }\n\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-sm, 1fr);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-md, var(--grid-tpl-sm, 1fr));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-xl, var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr))));\n }\n }\n\n .grid.responsive-gap {\n --grid-gap-step: var(--grid-gap-step-sm, 2);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-gap {\n --grid-gap-step: var(--grid-gap-step-md, var(--grid-gap-step-sm, 4));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-gap {\n --grid-gap-step: var(--grid-gap-step-lg, var(--grid-gap-step-md, var(--grid-gap-step-sm, 4)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-gap {\n --grid-gap-step: var(--grid-gap-step-xl, var(--grid-gap-step-lg, var(--grid-gap-step-md, var(--grid-gap-step-sm, 4))));\n }\n }\n\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-sm, auto);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-md, var(--grid-rows-sm, auto));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-xl, var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto))));\n }\n }\n\n .grid.has-row-gap {\n row-gap: calc(var(--spacing, 0.25rem) * var(--grid-row-gap-step, var(--grid-gap-step, 4)) * var(--gap-scale, 1));\n }\n\n .grid.has-col-gap {\n column-gap: calc(var(--spacing, 0.25rem) * var(--grid-col-gap-step, var(--grid-gap-step, 4)) * var(--gap-scale, 1));\n }\n\n @container grid-ctx (width < 400px) {\n .container .grid {\n grid-template-columns: 1fr;\n --grid-gap-step: 2;\n }\n }\n}\n",
|
|
4864
|
-
"group": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item .button {\n @apply w-full;\n }\n\n .item.divider {\n margin-inline: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n width: 100%;\n }\n }\n\n &.none {\n --layout-padding-size: 0px;\n @apply gap-0;\n }\n\n &.xs {\n --layout-radius-size: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n\n &.sm {\n --layout-radius-size: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n }\n\n .item {\n @apply flex items-stretch;\n position: relative;\n isolation: isolate;\n border-radius: var(--group-item-radius, 0);\n overflow: visible;\n\n &.grow {\n flex: 1;\n }\n\n &.divider {\n @apply p-0 shrink-0 flex-none;\n\n > [role=\"separator\"] {\n flex: 0 0 auto;\n }\n }\n }\n\n :is(.button, .input, .select, .expand) {\n height: 100%;\n min-height: var(--item-height);\n position: relative;\n isolation: isolate;\n overflow: visible;\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-pressed, var(--background-hover, var(--background))));\n color: var(--button-selected-foreground, var(--foreground));\n }\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n > [data-ring=\"true\"] {\n border-radius: inherit;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand {\n @apply flex items-stretch;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand :global(.expand-scope),\n .expand :global(.expand) {\n @apply flex w-full h-full;\n }\n\n .expand :global(.expand) {\n @apply flex-col;\n border-radius: inherit;\n }\n\n .expand :global(.trigger) {\n @apply min-h-0;\n border-radius: inherit;\n }\n\n .trigger {}\n\n .group {\n .item :is(.button, .select) {\n border: none;\n }\n\n .input > [data-input-focus-surface=\"true\"] {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .item.divider > [role=\"separator\"] {\n --divider-background: var(--background);\n }\n\n &.none {\n .item:not(.divider) {\n overflow: hidden;\n }\n\n :is(.button, .trigger, .select) {\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --radius-sm: 0;\n }\n\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .item:last-child {\n --group-item-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n &.horizontal {\n .item:first-child :is( .button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-bottom-left-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is( .button, .trigger, .input > *, .select) {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child .trigger .icon-section {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n\n &.vertical {\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) var(--background-inner-radius) 0 0;\n }\n\n .item:last-child {\n --group-item-radius: 0 0 var(--background-inner-radius) var(--background-inner-radius);\n }\n\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-top-left-radius: var(--background-inner-radius);\n border-top-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-bottom-left-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n .item {\n --group-item-radius: var(--background-inner-radius);\n }\n\n :is(.button, .trigger, .select) {\n border-radius: var(--background-inner-radius);\n }\n\n .input {\n --radius-sm: var(--background-inner-radius);\n }\n }\n }\n\n .group [data-ring=\"true\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n }\n\n .group :global(.focus-indicator) {\n display: none;\n }\n\n .group [data-focus-indicator=\"local\"] {\n display: none;\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"]) {\n @apply outline-none;\n box-shadow: none;\n }\n}\n",
|
|
4864
|
+
"group": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item .button {\n @apply w-full;\n }\n\n .item.divider {\n margin-inline: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n width: 100%;\n }\n }\n\n &.none {\n --layout-padding-size: 0px;\n @apply gap-0;\n }\n\n &.xs {\n --layout-radius-size: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n\n &.sm {\n --layout-radius-size: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n }\n\n .item {\n @apply flex items-stretch;\n position: relative;\n isolation: isolate;\n border-radius: var(--group-item-radius, 0);\n overflow: visible;\n\n &.grow {\n flex: 1;\n }\n\n &.divider {\n @apply p-0 shrink-0 flex-none;\n\n > [role=\"separator\"] {\n flex: 0 0 auto;\n }\n }\n }\n\n :is(.button, .input, .select, .expand) {\n height: 100%;\n min-height: var(--item-height);\n position: relative;\n isolation: isolate;\n overflow: visible;\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-pressed, var(--background-hover, var(--background))));\n color: var(--button-selected-foreground, var(--foreground));\n }\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n > [data-ring=\"true\"] {\n border-radius: inherit;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand {\n @apply flex items-stretch;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand :global(.expand-scope),\n .expand :global(.expand) {\n @apply flex w-full h-full;\n }\n\n .expand :global(.expand) {\n @apply flex-col;\n border-radius: inherit;\n }\n\n .expand :global(.trigger) {\n @apply min-h-0;\n border-radius: inherit;\n }\n\n .trigger {}\n\n .group {\n .item :is(.button, .select) {\n border: none;\n }\n\n .input > [data-input-focus-surface=\"true\"] {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .item.divider > [role=\"separator\"] {\n --divider-background: var(--background);\n }\n\n &.none {\n .item:not(.divider) {\n overflow: hidden;\n }\n\n :is(.button, .trigger, .select) {\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --radius-sm: 0;\n }\n\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .item:last-child {\n --group-item-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n .item:only-child {\n --group-item-radius: var(--background-inner-radius);\n }\n\n &.horizontal {\n .item:first-child :is( .button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-bottom-left-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is( .button, .trigger, .input > *, .select) {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child .trigger .icon-section {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n\n &.vertical {\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) var(--background-inner-radius) 0 0;\n }\n\n .item:last-child {\n --group-item-radius: 0 0 var(--background-inner-radius) var(--background-inner-radius);\n }\n\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-top-left-radius: var(--background-inner-radius);\n border-top-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-bottom-left-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n .item {\n --group-item-radius: var(--background-inner-radius);\n }\n\n :is(.button, .trigger, .select) {\n border-radius: var(--background-inner-radius);\n }\n\n .input {\n --radius-sm: var(--background-inner-radius);\n }\n }\n }\n\n .group [data-ring=\"true\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n }\n\n .group :global(.focus-indicator) {\n display: none;\n }\n\n .group [data-focus-indicator=\"local\"] {\n display: none;\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"]) {\n @apply outline-none;\n box-shadow: none;\n }\n}\n",
|
|
4865
4865
|
"input": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .input {\n height: fit-content;\n flex: 1;\n min-width: 0;\n @apply py-1.5 px-3;\n font-family: inherit;\n font-size: var(--text-xs);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: transparent;\n border: none;\n outline: none;\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n cursor: not-allowed;\n }\n\n /* Hide default browser spinners for number inputs */\n &[type=\"number\"] {\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n display: none;\n }\n\n /* Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n }\n }\n\n .icon-wrapper {\n @apply z-10 flex items-center;\n pointer-events: none;\n }\n\n .icon {\n @apply flex items-center shrink-0;\n color: var(--foreground, currentColor);\n }\n\n .icon-left {\n @apply relative;\n }\n\n .icon-right {\n @apply relative;\n }\n\n .container {\n --adornment-offset: calc(var(--spacing, 0.25rem) * 1.5);\n\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &[data-variant=\"ghost\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .start-adornments,\n .end-adornments {\n @apply flex items-center gap-1;\n align-self: stretch;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2.5;\n }\n\n .end-adornments {\n padding-right: var(--adornment-offset);\n\n &:has(.controls) {\n padding-right: 0;\n }\n\n &:has([data-hint]) {\n padding-right: 0;\n }\n }\n\n .actions {\n @apply flex items-center gap-1;\n pointer-events: auto;\n }\n\n .action {\n @apply flex items-center justify-center p-2;\n border-radius: 0.25rem;\n color: var(--action-foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .action:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--action-background-hover);\n color: var(--action-foreground-hover);\n }\n\n .hint {\n @apply inline-flex items-center justify-center whitespace-nowrap;\n flex-shrink: 0;\n margin-inline-start: calc(var(--spacing, 0.25rem) * 0.5);\n margin-inline-end: var(--adornment-offset);\n font-size: var(--text-sm);\n line-height: 1;\n color: var(--foreground);\n background-color: var(--background);\n pointer-events: auto;\n }\n\n .controls {\n @apply flex w-7.5 flex-col;\n align-self: stretch;\n min-height: 100%;\n border-left: var(--border-width-base, 1px) solid var(--background-border);\n pointer-events: auto;\n }\n\n .controls[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .stepper {\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(--foreground);\n --active-background: var(--background-700);\n --active-color: var(--foreground-100);\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &+.stepper {\n border-top: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n &:hover:not(:disabled) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--hover-background);\n color: var(--hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background);\n color: var(--active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n}\n",
|
|
4866
4866
|
"label": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n --background: transparent;\n --foreground: var(--foreground-primary);\n --foreground-disabled: var(--foreground-secondary);\n --foreground-error: var(--danger-600);\n }\n\n .label > 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(--foreground-disabled);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--foreground-error);\n }\n }\n\n .label > .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .label > .helper-text {\n --helper-foreground: var(--foreground-secondary);\n --helper-foreground-error: var(--danger-600);\n\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-foreground);\n\n &[data-error] {\n color: var(--helper-foreground-error);\n }\n }\n}\n",
|
|
4867
4867
|
"list": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n --gap-scale: 0.75;\n\n color: var(--foreground);\n @apply flex flex-col;\n gap: calc(var(--spacing, 0.25rem) * var(--list-gap-step, 0) * var(--gap-scale, 1));\n }\n\n .container[data-orientation=\"horizontal\"] {\n @apply flex-row flex-wrap;\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .sticky {\n position: sticky;\n top: 0;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-foreground);\n }\n\n .header > :last-child {\n color: var(--header-subtitle-foreground);\n }\n\n .item {\n --background: transparent;\n\n @apply flex gap-3 px-2 py-1 cursor-pointer;\n background-color: var(--background);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .item[data-focus-visible=\"true\"] {\n box-shadow:\n inset 0 0 0 1px var(--item-focus-visible-background, var(--focus-visible-background)),\n 0 0 0 2px var(--item-focus-visible, var(--focus-visible));\n border-radius: var(--item-radius, var(--radius-sm, 0.375rem));\n outline: none;\n }\n\n .item:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .item[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control {\n margin-left: auto;\n }\n\n .control[data-placement=\"start\"] {\n margin-left: 0;\n }\n\n .media {\n @apply h-8 w-8;\n }\n\n .title {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n @apply truncate;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-foreground);\n @apply truncate;\n }\n\n .actionGroup {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .actionGroup[data-justify=\"between\"] { justify-content: space-between; }\n .actionGroup[data-justify=\"start\"] { justify-content: flex-start; }\n .actionGroup[data-justify=\"end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply flex p-1.5 opacity-70 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100;\n }\n\n .action {\n --background: transparent;\n\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n background-color: var(--background);\n color: var(--foreground);\n @apply p-2;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .action:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .footer {\n @apply flex p-6 pb-12;\n }\n\n .footer[data-align=\"center\"] { justify-content: center; }\n .footer[data-align=\"start\"] { justify-content: flex-start; }\n .footer[data-align=\"end\"] { justify-content: flex-end; }\n\n .container[data-spacing=\"sm\"] .footer {\n padding: 0.375rem 0.75rem;\n padding-bottom: 0.375rem;\n }\n}\n",
|
|
@@ -4873,7 +4873,7 @@ export const generatedStyles = {
|
|
|
4873
4873
|
"path": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n @apply block;\n }\n\n .list {\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n list-style: none;\n }\n\n .list[data-separator=\"custom\"] .item:not(:last-child)::after {\n content: none;\n }\n\n .item {\n @apply m-0 flex items-center gap-2 p-0;\n border-radius: var(--radius-sm, 0.375rem);\n }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .separator {\n @apply m-0 flex items-center p-0;\n list-style: none;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .link {\n @apply relative cursor-pointer px-2 py-1;\n border: 0;\n /* Inherit the item radius so the focus ring matches rounded breadcrumbs. */\n border-radius: inherit;\n background-color: var(--background);\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n text-decoration: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n button.link {\n font: inherit;\n }\n\n .link:focus,\n .link:focus-visible {\n outline: none;\n }\n\n .link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .link[data-selected=\"true\"] {\n cursor: default;\n }\n\n .link[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n}\n",
|
|
4874
4874
|
"popover": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--background);\n --frame-stroke-color: var(--background-border);\n --frame-radius: 8px;\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n pointer-events: none;\n min-width: 200px;\n max-width: 400px;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n }\n\n .content[data-instant] {\n transition: none;\n }\n\n .frame {\n @apply flex items-center gap-1.5 p-2.5;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n }\n}\n",
|
|
4875
4875
|
"progress": "@reference \"tailwindcss\";\n\n@layer components {\n .bar {\n @apply relative w-full overflow-hidden;\n border-radius: var(--radius-full, 9999px);\n background-color: var(--background);\n }\n\n .bar { height: 0.5rem; }\n\n .fill {\n @apply h-full;\n border-radius: var(--radius-full, 9999px);\n background-color: var(--background);\n transition: width 300ms var(--ease-snappy-pop);\n }\n\n .fill[data-animated=\"true\"] {\n animation: pulse 2s var(--ease-gentle-ease) infinite;\n }\n\n .fill[data-indeterminate=\"true\"] {\n width: 33.333%;\n animation: progress-indeterminate 1.5s var(--ease-gentle-ease) infinite;\n }\n\n .wrapper {\n @apply w-full;\n }\n\n .wrapper[data-has-label=\"true\"] {\n @apply space-y-1;\n }\n\n .label-row {\n @apply flex items-center justify-between;\n font-size: var(--text-sm);\n color: var(--foreground);\n }\n\n .label {\n user-select: none;\n }\n\n .value {\n font-variant-numeric: tabular-nums;\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n }\n\n @keyframes progress-indeterminate {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(400%); }\n }\n}\n",
|
|
4876
|
-
"radio": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-items {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n position: relative;\n overflow: visible;\n }\n\n .radio-surface {\n @apply inline-flex shrink-0;\n border-radius: 9999px;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n
|
|
4876
|
+
"radio": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-items {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n position: relative;\n overflow: visible;\n }\n\n .radio-surface {\n @apply inline-flex shrink-0;\n border-radius: 9999px;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n background-color: var(--background);\n color: var(--foreground);\n\n &[data-focus-visible=\"true\"] {\n outline: none;\n }\n }\n\n .radio-item:active .radio {\n transform: scale(0.92);\n }\n\n .dot {\n border-radius: 9999px;\n background-color: var(--background);\n transform: scale(0);\n }\n\n .radio[data-selected=\"true\"] .dot {\n transform: scale(1);\n }\n\n @media (hover: hover) {\n .radio-item:not([data-disabled=\"true\"]):hover .radio {\n opacity: 0.9;\n }\n }\n\n .radio-item[data-disabled=\"true\"] .radio {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .radio-label {\n @apply cursor-pointer;\n color: var(--foreground);\n font-size: inherit;\n font-weight: var(--font-weight-medium, 500);\n line-height: inherit;\n user-select: none;\n\n &[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n }\n\n .radio-description {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.125rem;\n }\n\n .helper-text {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.5rem;\n margin-left: 2rem;\n }\n\n .radio.sm {\n @apply h-4 w-4;\n }\n\n .radio.sm .dot {\n width: 0.375rem;\n height: 0.375rem;\n }\n\n .radio.md {\n @apply h-5 w-5;\n }\n\n .radio.md .dot {\n width: 0.5rem;\n height: 0.5rem;\n }\n\n .radio.lg {\n @apply h-6 w-6;\n }\n\n .radio.lg .dot {\n width: 0.625rem;\n height: 0.625rem;\n }\n}\n",
|
|
4877
4877
|
"scroll": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply relative;\n min-height: 0;\n }\n\n .vertical {\n --scrollbar-width: 12px;\n }\n\n .horizontal {\n --scrollbar-height: 12px;\n }\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 background-color: var(--background);\n }\n\n .track[data-hide=\"true\"] {\n transition-property: opacity;\n transition-duration: var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms));\n transition-timing-function: var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\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 box-sizing: border-box;\n }\n\n .horizontal .track {\n bottom: 2px;\n left: 0;\n height: 12px;\n width: 100%;\n }\n\n .thumb {\n position: absolute;\n border-radius: calc(var(--radius-xs, 0.25rem) * 0.80);\n background-color: var(--background);\n transition-property: background-color, width, height;\n transition-duration: var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms));\n transition-timing-function: var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .thumb:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .vertical .thumb {\n width: 6px;\n margin-left: 6px;\n transition-property: background-color, width, margin-left;\n transition-duration: var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms));\n transition-timing-function: var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .vertical .thumb:hover,\n .vertical[data-pressed] .thumb {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\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: var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms));\n transition-timing-function: var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .horizontal .thumb:hover,\n .horizontal[data-pressed] .thumb {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n height: 8px;\n margin-top: 4px;\n }\n}\n",
|
|
4878
4878
|
"select": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .select {\n --disabled-opacity: 0.5;\n --trigger-padding-inline: calc(var(--spacing) * 1.60);\n --trigger-padding-block: calc(var(--spacing) * 1.30);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n font-size: var(--foreground-size);\n height: fit-content;\n align-self: center;\n\n @apply p-0 gap-0 w-full flex-row items-center;\n position: relative;\n overflow: visible;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-radius);\n\n @apply select-none cursor-pointer;\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n &[data-pressed=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n }\n\n &[data-open=\"true\"] {\n background-color: var(--background-hover);\n }\n\n &:global(.group) {\n height: 100%;\n align-self: stretch;\n }\n }\n\n .trigger {\n @apply flex items-stretch flex-1 gap-0 w-full h-full min-h-0;\n\n background: transparent;\n\n @apply border-none cursor-pointer select-none;\n\n @media (hover: hover) {\n &:not([data-disabled]):hover .icon-section,\n &:not([data-disabled]):hover .value-section:not(:empty) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover);\n }\n }\n\n &[data-focus-visible=\"true\"] {\n @apply outline-none;\n }\n }\n\n .trigger-compact {\n @apply flex-none w-auto;\n }\n\n .select button.trigger { @apply p-0; }\n\n .value-section {\n @apply flex items-center flex-1 min-w-0 gap-0.5;\n\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n font-size: var(--foreground-size);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &:only-child {\n border-radius: var(--background-inner-radius);\n justify-content: center;\n }\n &:empty {\n flex: 0;\n padding: 0;\n min-width: auto;\n }\n }\n\n .icon-section {\n @apply flex items-center justify-center shrink-0;\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .icon {\n @apply flex items-center justify-center w-4 h-4 opacity-70;\n }\n\n .select .trigger[data-open=\"true\"] .icon {\n transform: rotate(180deg);\n }\n\n .value {\n @apply flex items-center flex-1 min-w-0 gap-2 bg-transparent border-none;\n cursor: inherit;\n }\n\n .value-icon {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n color: var(--foreground);\n }\n\n .value-text {\n font-weight: var(--font-weight-medium);\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .content,\n .sub-content {\n --item-padding-inline: calc(var(--spacing) * 1.5);\n --item-padding-block: var(--spacing);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n overflow: hidden;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-radius);\n }\n\n .content-root,\n .sub-content-root {\n position: absolute;\n }\n\n .content {\n &[data-state=\"open\"][data-placement=\"bottom\"] { animation: slide-in-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"open\"][data-placement=\"top\"] { animation: slide-in-from-bottom 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"bottom\"] { animation: slide-out-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"top\"] { animation: slide-out-from-bottom 0.15s var(--ease-snappy-pop); }\n }\n\n .list {\n @apply space-y-1;\n }\n\n .item,\n .sub-trigger {\n @apply flex items-center gap-2 outline-none cursor-default select-none;\n background-color: var(--background);\n border-radius: var(--background-inner-radius);\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n .item {\n --item-padding-inline: var(--trigger-padding-inline);\n --item-padding-block: calc(var(--trigger-padding-block) * 1.15);\n\n padding: var(--item-padding-block) var(--item-padding-inline);\n\n &[data-selected=\"true\"] {\n color: var(--foreground);\n }\n\n &[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .item-content {\n @apply flex flex-col flex-1 min-w-0;\n }\n\n .item-text {\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground-muted);\n @apply min-w-0 whitespace-normal break-words;\n }\n\n .item-icon, .item-indicator {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n }\n\n .item-icon { color: var(--icon-foreground); }\n .item-indicator { color: var(--indicator-foreground); margin-left: auto; }\n\n .item-with-description { @apply items-start py-2; }\n .item-icon-with-description, .item-indicator-with-description { @apply mt-0.5; }\n\n .separator {\n @apply my-1 -mx-1 h-px;\n background-color: var(--background-border);\n }\n\n .placeholder {\n color: var(--foreground-muted);\n }\n\n .icon-prefix {\n @apply inline-flex items-center shrink-0;\n }\n\n .select[data-mode=\"multiple\"] .item { gap: 0.5rem; }\n\n .search-trigger {\n @apply flex items-stretch relative bg-transparent cursor-text overflow-hidden;\n border-radius: var(--background-inner-radius);\n transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\n &:focus-within {\n @apply outline-none;\n z-index: 1;\n }\n }\n\n .search-trigger :global(.focus-indicator) {\n display: none;\n }\n\n .search-value-section {\n @apply p-0;\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .input {\n padding-right: calc(var(--trigger-padding-inline) * 2 + 1rem);\n @apply border-none rounded-none shadow-none bg-transparent;\n\n &[data-focused], &[data-focus-visible] {\n @apply border-none shadow-none;\n }\n }\n\n .search-content-input {\n @apply border-none rounded-none bg-transparent;\n }\n\n .search-icon-section {\n @apply absolute right-0 top-0 bottom-0 flex items-center justify-center bg-transparent pointer-events-none;\n padding-inline: var(--trigger-padding-inline);\n }\n\n\n .search-wrapper {\n @apply overflow-hidden;\n border-bottom: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .empty-state {\n @apply px-3 py-2;\n color: var(--foreground-muted);\n }\n\n .content[data-placement=\"top\"] .search-wrapper {\n border-radius: 0;\n border-bottom: none;\n border-top: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .sub-trigger {\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n\n &[data-highlighted=\"true\"],\n &[data-open=\"true\"]:not([data-highlighted=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .sub-trigger-chevron {\n @apply shrink-0 ml-auto w-4 h-4 opacity-60;\n }\n\n .sub-content {\n min-width: 160px;\n max-width: 320px;\n }\n\n @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",
|
|
4879
4879
|
"slider": "@reference \"tailwindcss\";\n\n@layer components {\n .slider {\n --disabled-opacity: 0.6;\n --slider-track-size: 0.375rem;\n --slider-thumb-size: 1rem;\n\n @apply relative flex w-full items-center;\n min-inline-size: var(--slider-min-inline-size, 12rem);\n min-height: var(--slider-hit-size, 2rem);\n touch-action: none;\n user-select: none;\n }\n\n .track {\n @apply relative flex grow items-center;\n flex-grow: 1;\n height: var(--slider-track-size);\n overflow: visible;\n border-radius: var(--slider-track-radius, var(--radius-xs, 0.25rem));\n border: var(--slider-track-border, 0);\n background: var(\n --slider-track-background,\n var(--background, var(--background-800, transparent))\n );\n }\n\n .range {\n @apply absolute;\n display: var(--slider-range-display, block);\n pointer-events: none;\n border-radius: var(--slider-track-radius, var(--radius-xs, 0.25rem));\n background: var(--slider-range-background, var(--background));\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .thumb {\n @apply absolute block;\n top: 50%;\n width: var(--slider-thumb-size);\n height: var(--slider-thumb-size);\n transform: var(--slider-thumb-transform, translate(-50%, -50%));\n border-radius: var(--radius-full, 9999px);\n outline: none;\n background: var(--slider-thumb-background, var(--background));\n border: var(--slider-thumb-border, 1px solid var(--background-border));\n box-shadow: var(--slider-thumb-shadow, none);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n box-shadow var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n transform var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .slider[data-orientation=\"horizontal\"] .range {\n top: 0;\n height: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] {\n justify-content: center;\n min-inline-size: auto;\n width: fit-content;\n }\n\n .slider[data-orientation=\"vertical\"] .track {\n width: var(--slider-track-size);\n height: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] .range {\n left: 0;\n width: 100%;\n }\n\n .slider[data-orientation=\"vertical\"] .thumb {\n left: 50%;\n top: auto;\n --slider-thumb-transform: translate(-50%, 50%);\n }\n\n .slider[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .slider[data-disabled=\"true\"] .range {\n background: var(--slider-range-background-disabled, var(--background-disabled, var(--slider-range-background, var(--background))));\n }\n\n .thumb[data-disabled=\"true\"] {\n cursor: not-allowed;\n background: var(--slider-thumb-background-disabled, var(--background-disabled, var(--slider-thumb-background, var(--background))));\n }\n\n .thumb[data-pressed=\"true\"] {\n transform: var(--slider-thumb-transform, translate(-50%, -50%)) scale(var(--slider-thumb-scale-active, 1.08));\n }\n\n .slider[data-orientation=\"vertical\"] .thumb[data-pressed=\"true\"] {\n transform: var(--slider-thumb-transform, translate(-50%, 50%)) scale(var(--slider-thumb-scale-active, 1.08));\n }\n}\n",
|
|
@@ -4911,8 +4911,8 @@ export const generatedSourceCode = {
|
|
|
4911
4911
|
"cssTypes": "declare const styles: {\n card: string;\n header: string;\n body: string;\n footer: string;\n};\n\nexport default styles;\n"
|
|
4912
4912
|
},
|
|
4913
4913
|
"checkbox": {
|
|
4914
|
-
"tsx": "\"use client\";\n\nimport React, { forwardRef, useId, useState } from \"react\";\nimport { useFocusRing } from \"@react-aria/focus\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { cn, type StyleValue } from \"./utils\";\nimport { type StylesProp, createStylesResolver } from \"@/lib/styles\";\nimport { useFocus } from \"@/hooks/useFocus\";\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\";\nimport css from \"./Checkbox.module.css\";\n\ninterface CheckboxIconStyles {\n checkmark?: StyleValue;\n indeterminate?: StyleValue;\n}\n\nexport interface CheckboxStyleSlots {\n root?: StyleValue;\n checkbox?: StyleValue;\n \"icon-checkmark\"?: StyleValue;\n \"icon-indeterminate\"?: StyleValue;\n icon?: StyleValue | CheckboxIconStyles;\n label?: StyleValue;\n \"helper-text\"?: StyleValue;\n}\n\nexport type CheckboxStylesProp = StylesProp<CheckboxStyleSlots>;\n\nconst resolveCheckboxBaseStyles = createStylesResolver([\n \"root\",\n \"checkbox\",\n \"icon-checkmark\",\n \"icon-indeterminate\",\n \"label\",\n \"helper-text\",\n] as const);\n\nfunction resolveCheckboxStyles(styles: CheckboxStylesProp | undefined) {\n if (!styles || typeof styles === \"string\" || Array.isArray(styles)) return resolveCheckboxBaseStyles(styles);\n const { root, checkbox, icon, label } = styles;\n\n let iconCheckmark: StyleValue | undefined = styles[\"icon-checkmark\"];\n let iconIndeterminate: StyleValue | undefined = styles[\"icon-indeterminate\"];\n\n if (icon) {\n if (typeof icon === \"string\" || Array.isArray(icon)) {\n iconCheckmark = cn(icon, iconCheckmark);\n iconIndeterminate = cn(icon, iconIndeterminate);\n } else {\n iconCheckmark = cn(icon.checkmark, iconCheckmark);\n iconIndeterminate = cn(icon.indeterminate, iconIndeterminate);\n }\n }\n\n return resolveCheckboxBaseStyles({\n root,\n checkbox,\n \"icon-checkmark\": iconCheckmark,\n \"icon-indeterminate\": iconIndeterminate,\n label,\n \"helper-text\": styles[\"helper-text\"],\n });\n}\n\nexport interface CheckboxProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n /** Label text or element displayed next to the checkbox */\n label?: React.ReactNode;\n /** Helper text shown below the checkbox. Prefer `helper`; `helperText` is kept as a compatibility alias. */\n helper?: React.ReactNode;\n /** Compatibility alias for `helper`. */\n helperText?: React.ReactNode;\n /** Whether to style the helper text as an error and mark the checkbox invalid. */\n helperTextError?: boolean;\n /** Whether the checkbox is invalid. Prefer `error`; `isInvalid` is an alias for form libraries. */\n error?: boolean;\n /** Alias for `error`. */\n isInvalid?: boolean;\n /** Whether to show an indeterminate (partial selection) state. Prefer `indeterminate`; `isIndeterminate` is kept as an alias. */\n isIndeterminate?: boolean;\n /** Whether to show an indeterminate (partial selection) state. */\n indeterminate?: boolean;\n /** Ref for the underlying input. The forwarded ref remains attached to the wrapper element. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Classes applied to the root or named slots. Accepts a string, cn()-compatible array, slot object, or array of any of those. */\n styles?: CheckboxStylesProp;\n}\n\nexport const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(\n (\n {\n className,\n label,\n helper,\n helperText,\n helperTextError = false,\n error = false,\n isInvalid = false,\n id,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n isIndeterminate = false,\n indeterminate = false,\n inputRef: forwardedInputRef,\n styles,\n ...props\n },\n ref\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLDivElement>(null);\n const generatedId = useId();\n const inputId = id ?? `checkbox-${generatedId}`;\n const helperId = `${inputId}-helper`;\n const resolvedHelper = helper ?? helperText;\n const resolvedIndeterminate = indeterminate || isIndeterminate;\n // Track pressed state for tactile feedback animation (data-pressed attribute)\n const [isPressed, setIsPressed] = useState(false);\n const [internalChecked, setInternalChecked] = useState(() =>\n checked !== undefined ? checked : (defaultChecked ?? false)\n );\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { scopeProps, indicatorProps } = useFocus({\n scopeRef: rootRef,\n containerRef: rootRef,\n surfaceSelector: '[data-checkbox-focus-surface=\"true\"]',\n radiusSource: \"surface\",\n });\n\n // React Aria press state handlers for tactile scale animation (mouse)\n const handleMouseDown = React.useCallback((e: React.MouseEvent<HTMLInputElement>) => {\n if (!disabled) {\n setIsPressed(true);\n }\n props.onMouseDown?.(e);\n }, [disabled, props]);\n\n const handleMouseUp = React.useCallback((e: React.MouseEvent<HTMLInputElement>) => {\n setIsPressed(false);\n props.onMouseUp?.(e);\n }, [props]);\n\n const handleMouseLeave = React.useCallback((e: React.MouseEvent<HTMLInputElement>) => {\n setIsPressed(false);\n props.onMouseLeave?.(e);\n }, [props]);\n\n // React Aria press state handlers for keyboard interactions (Space/Enter)\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n if (!disabled && (e.key === \" \" || e.key === \"Enter\")) {\n setIsPressed(true);\n }\n props.onKeyDown?.(e);\n }, [disabled, props]);\n\n const handleKeyUp = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \" \" || e.key === \"Enter\") {\n setIsPressed(false);\n }\n props.onKeyUp?.(e);\n }, [props]);\n\n React.useEffect(() => {\n if (checked !== undefined) {\n setInternalChecked(checked);\n }\n }, [checked]);\n\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = resolvedIndeterminate;\n }\n }, [resolvedIndeterminate]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n // Update internal state (needed for uncontrolled mode)\n setInternalChecked(e.target.checked);\n // Call parent handler if provided\n onChange?.(e);\n };\n\n const inputProps = mergeProps(props, focusProps, {\n onChange: handleChange,\n onMouseDown: handleMouseDown,\n onMouseUp: handleMouseUp,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n }) as React.InputHTMLAttributes<HTMLInputElement>;\n\n // Determine if this is a controlled component\n const isControlled = checked !== undefined;\n const displayChecked = isControlled ? checked : internalChecked;\n const propAriaInvalid = props[\"aria-invalid\"];\n const resolvedInvalid =\n error ||\n isInvalid ||\n helperTextError ||\n propAriaInvalid === true ||\n propAriaInvalid === \"true\";\n const describedBy = [props[\"aria-describedby\"], resolvedHelper ? helperId : undefined]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n const resolved = resolveCheckboxStyles(styles);\n const mergedRootRef = useMergeRefs(rootRef, ref);\n const mergedInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n return (\n <div\n ref={mergedRootRef}\n className={cn(\"checkbox\", scopeProps.className, css.checkbox, resolved.root)}\n data-disabled={disabled ? \"true\" : undefined}\n data-invalid={resolvedInvalid ? \"true\" : undefined}\n data-indeterminate={resolvedIndeterminate ? \"true\" : undefined}\n data-selected={displayChecked ? \"true\" : undefined}\n >\n <div {...indicatorProps} data-focus-indicator=\"local\" />\n <div className={cn(css.container)}>\n <input\n {...inputProps}\n ref={mergedInputRef}\n type=\"checkbox\"\n id={inputId}\n disabled={disabled}\n {...(isControlled ? { checked } : { defaultChecked: internalChecked })}\n className={cn(\n css.box,\n className,\n resolved.checkbox\n )}\n data-selected={displayChecked ? \"true\" : undefined}\n data-disabled={disabled ? \"true\" : undefined}\n data-invalid={resolvedInvalid ? \"true\" : undefined}\n data-error={resolvedInvalid ? \"true\" : undefined}\n data-indeterminate={resolvedIndeterminate ? \"true\" : undefined}\n data-focused={isFocused ? \"true\" : undefined}\n data-focus-visible={isFocusVisible ? \"true\" : undefined}\n data-pressed={isPressed ? \"true\" : undefined}\n data-checkbox-focus-surface=\"true\"\n aria-invalid={resolvedInvalid || undefined}\n aria-checked={resolvedIndeterminate ? \"mixed\" : props[\"aria-checked\"]}\n aria-describedby={describedBy}\n />\n {displayChecked && !resolvedIndeterminate && (\n <svg\n className={cn('checkmark', css.checkmark, resolved[\"icon-checkmark\"])}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n )}\n {resolvedIndeterminate && (\n <svg\n className={cn('indeterminate', css.indeterminate, resolved[\"icon-indeterminate\"])}\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n >\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n </svg>\n )}\n </div>\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n css.label,\n css[\"label-md\"],\n resolved.label\n )}\n data-disabled={disabled ? \"true\" : undefined}\n >\n {label}\n </label>\n )}\n {resolvedHelper && (\n <p\n id={helperId}\n className={cn(\n css[\"helper-text\"],\n resolved[\"helper-text\"]\n )}\n data-error={resolvedInvalid ? \"true\" : undefined}\n >\n {resolvedHelper}\n </p>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n",
|
|
4915
|
-
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox {\n @apply inline-grid gap-x-3;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .box {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n
|
|
4914
|
+
"tsx": "\"use client\";\n\nimport React, { forwardRef, useId, useState } from \"react\";\nimport { useFocusRing } from \"@react-aria/focus\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { cn, type StyleValue } from \"./utils\";\nimport { type StylesProp, createStylesResolver } from \"@/lib/styles\";\nimport { useFocus } from \"@/hooks/useFocus\";\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\";\nimport css from \"./Checkbox.module.css\";\n\ninterface CheckboxIconStyles {\n checkmark?: StyleValue;\n indeterminate?: StyleValue;\n}\n\nexport interface CheckboxStyleSlots {\n root?: StyleValue;\n checkbox?: StyleValue;\n \"icon-checkmark\"?: StyleValue;\n \"icon-indeterminate\"?: StyleValue;\n icon?: StyleValue | CheckboxIconStyles;\n label?: StyleValue;\n \"helper-text\"?: StyleValue;\n}\n\nexport type CheckboxStylesProp = StylesProp<CheckboxStyleSlots>;\n\nconst resolveCheckboxBaseStyles = createStylesResolver([\n \"root\",\n \"checkbox\",\n \"icon-checkmark\",\n \"icon-indeterminate\",\n \"label\",\n \"helper-text\",\n] as const);\n\nfunction resolveCheckboxStyles(styles: CheckboxStylesProp | undefined) {\n if (!styles || typeof styles === \"string\" || Array.isArray(styles)) return resolveCheckboxBaseStyles(styles);\n const { root, checkbox, icon, label } = styles;\n\n let iconCheckmark: StyleValue | undefined = styles[\"icon-checkmark\"];\n let iconIndeterminate: StyleValue | undefined = styles[\"icon-indeterminate\"];\n\n if (icon) {\n if (typeof icon === \"string\" || Array.isArray(icon)) {\n iconCheckmark = cn(icon, iconCheckmark);\n iconIndeterminate = cn(icon, iconIndeterminate);\n } else {\n iconCheckmark = cn(icon.checkmark, iconCheckmark);\n iconIndeterminate = cn(icon.indeterminate, iconIndeterminate);\n }\n }\n\n return resolveCheckboxBaseStyles({\n root,\n checkbox,\n \"icon-checkmark\": iconCheckmark,\n \"icon-indeterminate\": iconIndeterminate,\n label,\n \"helper-text\": styles[\"helper-text\"],\n });\n}\n\nexport interface CheckboxProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n /** Label text or element displayed next to the checkbox */\n label?: React.ReactNode;\n /** Helper text shown below the checkbox. Prefer `helper`; `helperText` is kept as a compatibility alias. */\n helper?: React.ReactNode;\n /** Compatibility alias for `helper`. */\n helperText?: React.ReactNode;\n /** Whether to style the helper text as an error and mark the checkbox invalid. */\n helperTextError?: boolean;\n /** Whether the checkbox is invalid. Prefer `error`; `isInvalid` is an alias for form libraries. */\n error?: boolean;\n /** Alias for `error`. */\n isInvalid?: boolean;\n /** Whether to show an indeterminate (partial selection) state. Prefer `indeterminate`; `isIndeterminate` is kept as an alias. */\n isIndeterminate?: boolean;\n /** Whether to show an indeterminate (partial selection) state. */\n indeterminate?: boolean;\n /** Ref for the underlying input. The forwarded ref remains attached to the wrapper element. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Classes applied to the root or named slots. Accepts a string, cn()-compatible array, slot object, or array of any of those. */\n styles?: CheckboxStylesProp;\n}\n\nexport const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(\n (\n {\n className,\n label,\n helper,\n helperText,\n helperTextError = false,\n error = false,\n isInvalid = false,\n id,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n isIndeterminate = false,\n indeterminate = false,\n inputRef: forwardedInputRef,\n styles,\n ...props\n },\n ref\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLDivElement>(null);\n const generatedId = useId();\n const inputId = id ?? `checkbox-${generatedId}`;\n const helperId = `${inputId}-helper`;\n const resolvedHelper = helper ?? helperText;\n const resolvedIndeterminate = indeterminate || isIndeterminate;\n const [internalChecked, setInternalChecked] = useState(() =>\n checked !== undefined ? checked : (defaultChecked ?? false)\n );\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { scopeProps, indicatorProps } = useFocus({\n scopeRef: rootRef,\n containerRef: rootRef,\n surfaceSelector: '[data-checkbox-focus-surface=\"true\"]',\n radiusSource: \"surface\",\n });\n\n React.useEffect(() => {\n if (checked !== undefined) {\n setInternalChecked(checked);\n }\n }, [checked]);\n\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = resolvedIndeterminate;\n }\n }, [resolvedIndeterminate]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n // Update internal state (needed for uncontrolled mode)\n setInternalChecked(e.target.checked);\n // Call parent handler if provided\n onChange?.(e);\n };\n\n const inputProps = mergeProps(props, focusProps, {\n onChange: handleChange,\n }) as React.InputHTMLAttributes<HTMLInputElement>;\n\n // Determine if this is a controlled component\n const isControlled = checked !== undefined;\n const displayChecked = isControlled ? checked : internalChecked;\n const propAriaInvalid = props[\"aria-invalid\"];\n const resolvedInvalid =\n error ||\n isInvalid ||\n helperTextError ||\n propAriaInvalid === true ||\n propAriaInvalid === \"true\";\n const describedBy = [props[\"aria-describedby\"], resolvedHelper ? helperId : undefined]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n const resolved = resolveCheckboxStyles(styles);\n const mergedRootRef = useMergeRefs(rootRef, ref);\n const mergedInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n return (\n <div\n ref={mergedRootRef}\n className={cn(\"checkbox\", scopeProps.className, css.checkbox, resolved.root)}\n data-disabled={disabled ? \"true\" : undefined}\n data-invalid={resolvedInvalid ? \"true\" : undefined}\n data-indeterminate={resolvedIndeterminate ? \"true\" : undefined}\n data-selected={displayChecked ? \"true\" : undefined}\n >\n <div {...indicatorProps} data-focus-indicator=\"local\" />\n <div className={cn(css.container)}>\n <input\n {...inputProps}\n ref={mergedInputRef}\n type=\"checkbox\"\n id={inputId}\n disabled={disabled}\n {...(isControlled ? { checked } : { defaultChecked: internalChecked })}\n className={cn(\n css.box,\n className,\n resolved.checkbox\n )}\n data-selected={displayChecked ? \"true\" : undefined}\n data-disabled={disabled ? \"true\" : undefined}\n data-invalid={resolvedInvalid ? \"true\" : undefined}\n data-error={resolvedInvalid ? \"true\" : undefined}\n data-indeterminate={resolvedIndeterminate ? \"true\" : undefined}\n data-focused={isFocused ? \"true\" : undefined}\n data-focus-visible={isFocusVisible ? \"true\" : undefined}\n data-checkbox-focus-surface=\"true\"\n aria-invalid={resolvedInvalid || undefined}\n aria-checked={resolvedIndeterminate ? \"mixed\" : props[\"aria-checked\"]}\n aria-describedby={describedBy}\n />\n {displayChecked && !resolvedIndeterminate && (\n <svg\n className={cn('checkmark', css.checkmark, resolved[\"icon-checkmark\"])}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n )}\n {resolvedIndeterminate && (\n <svg\n className={cn('indeterminate', css.indeterminate, resolved[\"icon-indeterminate\"])}\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n >\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n </svg>\n )}\n </div>\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n css.label,\n css[\"label-md\"],\n resolved.label\n )}\n data-disabled={disabled ? \"true\" : undefined}\n >\n {label}\n </label>\n )}\n {resolvedHelper && (\n <p\n id={helperId}\n className={cn(\n css[\"helper-text\"],\n resolved[\"helper-text\"]\n )}\n data-error={resolvedInvalid ? \"true\" : undefined}\n >\n {resolvedHelper}\n </p>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n",
|
|
4915
|
+
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox {\n @apply inline-grid gap-x-3;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .box {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n\n &[data-invalid=\"true\"] {\n border-color: var(--background-error-border, var(--danger-600));\n }\n\n &[data-invalid=\"true\"][data-selected=\"true\"],\n &[data-invalid=\"true\"][data-indeterminate=\"true\"] {\n border-color: var(--background-border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n }\n\n .checkmark,\n .indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--foreground);\n pointer-events: none;\n }\n\n .label {\n @apply cursor-pointer select-none;\n\n &[data-disabled=\"true\"] {\n @apply opacity-60 cursor-not-allowed;\n }\n }\n\n .label-md {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .helper-text {\n @apply text-xs;\n grid-column: 2;\n color: var(--helper-foreground);\n\n &[data-error=\"true\"] {\n color: var(--helper-error-foreground, var(--foreground-error, var(--danger-600)));\n }\n }\n}\n",
|
|
4916
4916
|
"cssTypes": "declare const styles: {\n \"checkbox-root\": string;\n container: string;\n checkbox: string;\n box: string;\n checkmark: string;\n indeterminate: string;\n label: string;\n \"label-md\": string;\n \"helper-text\": string;\n};\n\nexport default styles;\n"
|
|
4917
4917
|
},
|
|
4918
4918
|
"code": {
|
|
@@ -4972,7 +4972,7 @@ export const generatedSourceCode = {
|
|
|
4972
4972
|
},
|
|
4973
4973
|
"group": {
|
|
4974
4974
|
"tsx": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn, type StyleValue } from \"./utils\"\nimport { type StylesProp, createStylesResolver } from \"@/lib/styles\"\nimport { useFocus } from \"@/hooks/useFocus\"\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\"\nimport { Button, type ButtonProps } from \"../Button\"\nimport { Expand, type ExpandProps } from \"../Expand\"\nimport { Input, type InputProps } from \"../Input\"\nimport { Select, type SelectProps } from \"../Select\"\nimport css from \"./Group.module.css\"\n\ntype Orientation = \"horizontal\" | \"vertical\"\ntype Spacing = \"none\" | \"xs\" | \"sm\"\n\ntype GroupItemStyles = {\n first?: StyleValue\n last?: StyleValue\n divider?: StyleValue\n grow?: StyleValue\n}\n\nexport interface GroupStyleSlots {\n root?: StyleValue;\n item?: StyleValue | GroupItemStyles;\n button?: StyleValue;\n input?: StyleValue;\n select?: StyleValue;\n expand?: StyleValue;\n}\n\nexport type GroupStylesProp = StylesProp<GroupStyleSlots>;\n\nexport interface GroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n /** Variant class appended to the root and grouped slots. Accepts any string. */\n variant?: string\n /** Controls the axis that children are arranged along */\n orientation?: Orientation\n /** Controls the gap between group items */\n spacing?: Spacing\n /** Whether all items in the group are non-interactive */\n isDisabled?: boolean\n /** The currently active button value for toggle group behavior */\n value?: string\n /** Called when a button with a value prop is pressed */\n onChange?: (value: string) => void\n /** Classes applied to the root or named slots. Accepts a string, cn()-compatible array, slot object, or array of any of those. */\n styles?: GroupStylesProp\n}\n\ninterface GroupContextValue {\n isInGroup: boolean\n groupOrientation: Orientation\n groupSpacing: Spacing\n groupIsDisabled: boolean\n groupValue?: string\n groupOnChange?: (value: string) => void\n groupVariant?: string\n groupStyles: ReturnType<typeof resolveGroupStyles>\n registerInput?: (containerRef: React.RefObject<HTMLDivElement | null>, inputRef: React.RefObject<HTMLInputElement | null>) => void\n unregisterInput?: (containerRef: React.RefObject<HTMLDivElement | null>) => void\n activateInput?: () => boolean\n registerFocusableSurface?: (ref: React.RefObject<HTMLElement | null>) => void\n unregisterFocusableSurface?: (ref: React.RefObject<HTMLElement | null>) => void\n}\n\n// Context\nconst GroupContext = React.createContext<GroupContextValue | null>(null)\n\nfunction useGroupContext() {\n const context = React.useContext(GroupContext)\n if (!context) {\n throw new Error(\"Group sub-components must be used within Group\")\n }\n return context\n}\n\nconst resolveGroupBaseStyles = createStylesResolver([\n \"root\",\n \"item\",\n \"itemFirst\",\n \"itemLast\",\n \"itemDivider\",\n \"itemGrow\",\n \"button\",\n \"input\",\n \"select\",\n \"expand\",\n] as const)\n\nfunction resolveGroupStyles(styles: GroupStylesProp | undefined) {\n if (!styles || typeof styles === \"string\" || Array.isArray(styles)) return resolveGroupBaseStyles(styles)\n const { root, item, button, input, select, expand } = styles\n\n let itemResolved: StyleValue | undefined\n let itemFirst: StyleValue | undefined\n let itemLast: StyleValue | undefined\n let itemDivider: StyleValue | undefined\n let itemGrow: StyleValue | undefined\n\n if (item) {\n if (typeof item === \"string\" || Array.isArray(item)) {\n itemResolved = item\n itemFirst = item\n itemLast = item\n itemDivider = item\n itemGrow = item\n } else {\n itemFirst = item.first\n itemLast = item.last\n itemDivider = item.divider\n itemGrow = item.grow\n }\n }\n\n return resolveGroupBaseStyles({\n root,\n item: itemResolved,\n itemFirst,\n itemLast,\n itemDivider,\n itemGrow,\n button,\n input,\n select,\n expand,\n })\n}\n\n// Orientation and spacing maps\nconst orientationMap: Record<Orientation, string> = {\n horizontal: css.horizontal,\n vertical: css.vertical,\n}\n\nconst spacingMap: Record<Spacing, string> = {\n none: css.none,\n xs: css.xs,\n sm: css.sm,\n}\n\n// Detect Divider elements by checking for separator role, orientation prop, or displayName\nfunction isDivider(child: React.ReactNode): boolean {\n if (!React.isValidElement(child)) return false\n const props = (child.props || {}) as Record<string, unknown>\n const type = child.type as any\n return props.role === \"separator\" || \"orientation\" in props || type?.displayName === \"Divider\"\n}\n\nfunction isHTMLElement(value: Element | null): value is HTMLElement {\n return value instanceof HTMLElement\n}\n\n// Root component\n/** Button group that groups related buttons together */\nconst GroupRoot = React.forwardRef<HTMLDivElement, GroupProps>(\n (\n {\n className,\n variant,\n orientation = \"horizontal\",\n spacing = \"none\",\n children,\n isDisabled = false,\n value,\n onChange,\n styles: stylesProp,\n ...props\n },\n ref\n ) => {\n const scopeRef = React.useRef<HTMLDivElement>(null)\n const groupRef = React.useRef<HTMLDivElement>(null)\n const inputsRef = React.useRef<Map<React.RefObject<HTMLDivElement | null>, React.RefObject<HTMLInputElement | null>>>(new Map())\n const focusableSurfacesRef = React.useRef<React.RefObject<HTMLElement | null>[]>([])\n\n const childrenArray = React.Children.toArray(children).filter(\n (child) => child !== null && child !== undefined\n )\n\n const resolved = resolveGroupStyles(stylesProp)\n const mergedRef = useMergeRefs<HTMLDivElement>(ref, groupRef)\n\n const { scopeProps, indicatorProps } = useFocus({\n scopeRef,\n containerRef: groupRef,\n surfaceSelector: '[data-focus-surface=\"true\"]',\n radiusSource: \"item\",\n dependencies: [childrenArray.length, orientation, spacing],\n })\n\n const registerInput = React.useCallback((containerRef: React.RefObject<HTMLDivElement | null>, inputRef: React.RefObject<HTMLInputElement | null>) => {\n inputsRef.current.set(containerRef, inputRef)\n }, [])\n\n const unregisterInput = React.useCallback((containerRef: React.RefObject<HTMLDivElement | null>) => {\n inputsRef.current.delete(containerRef)\n }, [])\n\n const activateInput = React.useCallback(() => {\n const firstEntry = Array.from(inputsRef.current.entries())[0]\n if (firstEntry) {\n const [containerRef, inputRef] = firstEntry\n if (containerRef.current && inputRef.current) {\n // Focus the actual input for keyboard interaction\n inputRef.current.focus()\n\n // Force focus-visible state by finding the input container inside the wrapper\n // The Input component renders a container div with data-input-focus-surface\n const inputContainer = containerRef.current.querySelector('[data-input-focus-surface=\"true\"]') as HTMLElement\n if (inputContainer) {\n inputContainer.setAttribute('data-focus-visible', 'true')\n inputContainer.setAttribute('data-focused', 'true')\n }\n return true\n }\n }\n return false\n }, [])\n\n const registerFocusableSurface = React.useCallback((ref: React.RefObject<HTMLElement | null>) => {\n focusableSurfacesRef.current.push(ref)\n }, [])\n\n const unregisterFocusableSurface = React.useCallback((ref: React.RefObject<HTMLElement | null>) => {\n focusableSurfacesRef.current = focusableSurfacesRef.current.filter(r => r !== ref)\n }, [])\n\n\n const handleGroupKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key !== \"ArrowRight\" && e.key !== \"ArrowLeft\" && e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") {\n return\n }\n\n const focusedElement = document.activeElement\n if (!focusedElement || !groupRef.current?.contains(focusedElement as Node)) {\n return\n }\n\n const focusableElements = focusableSurfacesRef.current\n .map(ref => ref.current)\n .filter((el): el is HTMLElement => el !== null && !!groupRef.current?.contains(el))\n\n if (focusableElements.length === 0) {\n return\n }\n\n const currentIndex = focusableElements.findIndex(el => el.contains(focusedElement as Node))\n if (currentIndex === -1) {\n return\n }\n\n const isHorizontal = orientation === \"horizontal\"\n const isNavigatingInline = (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") && isHorizontal\n const isNavigatingBlock = (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") && !isHorizontal\n\n if (!isNavigatingInline && !isNavigatingBlock) {\n return\n }\n\n e.preventDefault()\n\n let nextIndex = currentIndex\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n nextIndex = (currentIndex + 1) % focusableElements.length\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n nextIndex = currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1\n }\n\n const nextElement = focusableElements[nextIndex]\n if (nextElement) {\n // Try to focus an interactive element within the surface\n const focusableChild = nextElement.querySelector('button, input, [role=\"button\"]') as HTMLElement | null\n if (focusableChild) {\n focusableChild.focus()\n } else {\n nextElement.focus()\n }\n }\n }, [orientation])\n\n const contextValue: GroupContextValue = {\n isInGroup: true,\n groupOrientation: orientation,\n groupSpacing: spacing,\n groupIsDisabled: isDisabled,\n groupValue: value,\n groupOnChange: onChange,\n groupVariant: variant,\n groupStyles: resolved,\n registerInput,\n unregisterInput,\n activateInput,\n registerFocusableSurface,\n unregisterFocusableSurface,\n }\n\n return (\n <GroupContext.Provider value={contextValue}>\n <div ref={scopeRef} className={cn(\"group-scope\", scopeProps.className)}>\n <div {...indicatorProps} />\n <div\n ref={mergedRef}\n className={cn(\n 'group',\n variant,\n orientation,\n css.group,\n orientationMap[orientation],\n spacingMap[spacing],\n resolved.root,\n className\n )}\n role=\"group\"\n aria-disabled={isDisabled || undefined}\n data-disabled={isDisabled ? \"true\" : undefined}\n onKeyDown={handleGroupKeyDown}\n {...props}\n >\n {childrenArray.map((child, index) => {\n const isFirst = index === 0\n const isLast = index === childrenArray.length - 1\n const isDividerChild = isDivider(child)\n\n // Extract layout-related classes from child to apply to the item wrapper\n const childProps = React.isValidElement(child) ? (child.props as any) : {}\n const childClassName = childProps.className || \"\"\n const shouldGrow = childClassName.includes('w-full') || childClassName.includes('flex-1')\n return (\n <div\n key={`item-${index}`}\n className={cn(\n 'item',\n variant,\n css.item,\n isFirst && resolved.itemFirst,\n isLast && resolved.itemLast,\n isDividerChild && css.divider,\n isDividerChild && resolved.itemDivider,\n shouldGrow && css.grow,\n shouldGrow && resolved.itemGrow,\n resolved.item,\n )}\n >\n {child}\n </div>\n )\n })}\n </div>\n </div>\n </GroupContext.Provider>\n )\n }\n)\nGroupRoot.displayName = \"Group\"\n\n// Group.Button component\ninterface GroupButtonProps extends ButtonProps {\n /** Whether this button is in an active/pressed state */\n active?: boolean\n /** Identifier used for toggle group behavior when Group has value/onChange */\n value?: string\n}\n\n/** Button styled to merge seamlessly with adjacent group items */\nconst GroupButton = React.forwardRef<HTMLButtonElement, GroupButtonProps>(\n ({ active, value, variant, className, onPress, onPointerDown, onMouseDown, ...restProps }, ref) => {\n const context = useGroupContext()\n const buttonRef = React.useRef<HTMLButtonElement>(null)\n const mergedRef = useMergeRefs(buttonRef, ref)\n\n // Merge disabled state from group context\n const isDisabled = restProps.isDisabled ?? context.groupIsDisabled\n\n // Derive active and onPress from toggle group context when value is provided\n const isActive = value !== undefined && context.groupValue !== undefined ? value === context.groupValue : active\n const baseHandlePress = value !== undefined && context.groupOnChange !== undefined ? () => context.groupOnChange!(value) : onPress\n\n const handlePress = React.useCallback((e: { target: EventTarget | null }) => {\n baseHandlePress?.(e)\n }, [baseHandlePress])\n\n // Activate input on pointer down to avoid focus ring flicker\n const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLButtonElement>) => {\n if (!isDisabled && e.pointerType !== \"mouse\") {\n // Pre-activate the input before button loses focus\n context.activateInput?.()\n }\n onPointerDown?.(e)\n }, [context, isDisabled, onPointerDown])\n\n const handleMouseDown = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {\n if (!isDisabled && context.activateInput?.()) {\n e.preventDefault()\n }\n onMouseDown?.(e)\n }, [context, isDisabled, onMouseDown])\n\n React.useEffect(() => {\n context.registerFocusableSurface?.(buttonRef)\n return () => {\n context.unregisterFocusableSurface?.(buttonRef)\n }\n }, [context])\n\n const buttonVariant = variant ?? context.groupVariant ?? \"ghost\"\n\n const buttonProps = {\n ...restProps,\n onPress: handlePress,\n onPointerDown: handlePointerDown,\n onMouseDown: handleMouseDown,\n variant: buttonVariant,\n isDisabled,\n \"data-focus-surface\": \"true\",\n \"data-selected\": isActive ? \"true\" : \"false\",\n className: cn(\n \"button\",\n buttonVariant,\n css.button,\n context.groupStyles.button,\n className\n ),\n }\n\n return <Button ref={mergedRef} {...buttonProps} />\n }\n)\nGroupButton.displayName = \"Group.Button\"\n\n// Group.Input component\ninterface GroupInputProps extends InputProps { }\n\n/** Input field integrated into the button group */\nconst GroupInput = React.forwardRef<HTMLInputElement, GroupInputProps>(\n ({ className, disabled, ...props }, ref) => {\n const context = useGroupContext()\n const inputRef = React.useRef<HTMLInputElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const mergedRef = useMergeRefs(ref, inputRef)\n\n // Register and unregister the input ref with the group context\n React.useEffect(() => {\n context.registerInput?.(containerRef, inputRef)\n return () => {\n context.unregisterInput?.(containerRef)\n }\n }, [context])\n\n React.useEffect(() => {\n context.registerFocusableSurface?.(containerRef)\n return () => {\n context.unregisterFocusableSurface?.(containerRef)\n }\n }, [context])\n\n // Merge disabled state from group context\n const inputDisabled = disabled ?? context.groupIsDisabled\n\n return (\n <div\n ref={containerRef}\n className={cn(\"input\", context.groupVariant, css.input, context.groupStyles.input, className)}\n data-focus-surface=\"true\"\n >\n <Input\n ref={mergedRef}\n {...props}\n disabled={inputDisabled}\n className=\"h-full w-full px-2\"\n />\n </div>\n )\n }\n)\nGroupInput.displayName = \"Group.Input\"\n\n// Group.InputWrapper component - preserves Input styling (for use with ghost variant)\ninterface GroupInputWrapperProps extends InputProps { }\n\n/** Input variant that preserves Input styling within the group */\nconst GroupInputWrapper = React.forwardRef<HTMLInputElement, GroupInputWrapperProps>(\n ({ className, disabled, ...props }, ref) => {\n const context = useGroupContext()\n const inputRef = React.useRef<HTMLInputElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const mergedRef = useMergeRefs(ref, inputRef)\n\n // Register and unregister the input ref with the group context\n React.useEffect(() => {\n context.registerInput?.(containerRef, inputRef)\n return () => {\n context.unregisterInput?.(containerRef)\n }\n }, [context])\n\n React.useEffect(() => {\n context.registerFocusableSurface?.(containerRef)\n return () => {\n context.unregisterFocusableSurface?.(containerRef)\n }\n }, [context])\n\n // Merge disabled state from group context\n const inputDisabled = disabled ?? context.groupIsDisabled\n\n return (\n <div\n ref={containerRef}\n className={cn(\"input\", context.groupVariant, css.input, context.groupStyles.input, className)}\n data-focus-surface=\"true\"\n >\n <Input\n ref={mergedRef}\n {...props}\n disabled={inputDisabled}\n className=\"h-full w-full px-2\"\n />\n </div>\n )\n }\n)\nGroupInputWrapper.displayName = \"Group.InputWrapper\"\n\n// Group.Select component\ninterface GroupSelectProps extends SelectProps<any> { }\n\n/** Select dropdown integrated into the button group */\nconst GroupSelect = React.forwardRef<HTMLDivElement, GroupSelectProps>(\n ({ className, isDisabled, ...props }, ref) => {\n const context = useGroupContext()\n const selectRef = React.useRef<HTMLDivElement>(null)\n const mergedRef = useMergeRefs(selectRef, ref)\n\n // Merge disabled state from group context\n const disabled = isDisabled ?? context.groupIsDisabled\n\n React.useEffect(() => {\n context.registerFocusableSurface?.(selectRef)\n return () => {\n context.unregisterFocusableSurface?.(selectRef)\n }\n }, [context])\n\n return (\n <Select\n ref={mergedRef}\n {...props}\n isDisabled={disabled}\n data-focus-surface=\"true\"\n className={cn(\"select\", context.groupVariant, css.select, context.groupStyles.select, className)}\n />\n )\n }\n)\nGroupSelect.displayName = \"Group.Select\"\n\n// Group.Expand component\ninterface GroupExpandProps extends ExpandProps { }\n\n/** Expand primitive integrated into the group */\nconst GroupExpand = React.forwardRef<HTMLDivElement, GroupExpandProps>(\n ({ className, isDisabled, styles: stylesProp, ...props }, ref) => {\n const context = useGroupContext()\n const surfaceRef = React.useRef<HTMLDivElement>(null)\n const disabled = isDisabled ?? context.groupIsDisabled\n const surfaceStyles = typeof stylesProp === \"string\" || Array.isArray(stylesProp) ? stylesProp : undefined\n const expandStyles = surfaceStyles ? undefined : stylesProp\n\n React.useEffect(() => {\n context.registerFocusableSurface?.(surfaceRef)\n return () => {\n context.unregisterFocusableSurface?.(surfaceRef)\n }\n }, [context])\n\n return (\n <div\n ref={surfaceRef}\n data-focus-surface=\"true\"\n className={cn(\"expand\", context.groupVariant, css.expand, context.groupStyles.expand, surfaceStyles)}\n >\n <Expand\n ref={ref}\n {...props}\n className={className}\n styles={expandStyles}\n isDisabled={disabled}\n />\n </div>\n )\n }\n)\nGroupExpand.displayName = \"Group.Expand\"\n\n// Assemble compound component\nconst Group = Object.assign(GroupRoot, {\n Button: GroupButton,\n Input: GroupInput,\n InputWrapper: GroupInputWrapper,\n Select: GroupSelect,\n Expand: GroupExpand,\n})\n\nexport { Group, GroupContext }\n",
|
|
4975
|
-
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item .button {\n @apply w-full;\n }\n\n .item.divider {\n margin-inline: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n width: 100%;\n }\n }\n\n &.none {\n --layout-padding-size: 0px;\n @apply gap-0;\n }\n\n &.xs {\n --layout-radius-size: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n\n &.sm {\n --layout-radius-size: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n }\n\n .item {\n @apply flex items-stretch;\n position: relative;\n isolation: isolate;\n border-radius: var(--group-item-radius, 0);\n overflow: visible;\n\n &.grow {\n flex: 1;\n }\n\n &.divider {\n @apply p-0 shrink-0 flex-none;\n\n > [role=\"separator\"] {\n flex: 0 0 auto;\n }\n }\n }\n\n :is(.button, .input, .select, .expand) {\n height: 100%;\n min-height: var(--item-height);\n position: relative;\n isolation: isolate;\n overflow: visible;\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-pressed, var(--background-hover, var(--background))));\n color: var(--button-selected-foreground, var(--foreground));\n }\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n > [data-ring=\"true\"] {\n border-radius: inherit;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand {\n @apply flex items-stretch;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand :global(.expand-scope),\n .expand :global(.expand) {\n @apply flex w-full h-full;\n }\n\n .expand :global(.expand) {\n @apply flex-col;\n border-radius: inherit;\n }\n\n .expand :global(.trigger) {\n @apply min-h-0;\n border-radius: inherit;\n }\n\n .trigger {}\n\n .group {\n .item :is(.button, .select) {\n border: none;\n }\n\n .input > [data-input-focus-surface=\"true\"] {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .item.divider > [role=\"separator\"] {\n --divider-background: var(--background);\n }\n\n &.none {\n .item:not(.divider) {\n overflow: hidden;\n }\n\n :is(.button, .trigger, .select) {\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --radius-sm: 0;\n }\n\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .item:last-child {\n --group-item-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n &.horizontal {\n .item:first-child :is( .button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-bottom-left-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is( .button, .trigger, .input > *, .select) {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child .trigger .icon-section {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n\n &.vertical {\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) var(--background-inner-radius) 0 0;\n }\n\n .item:last-child {\n --group-item-radius: 0 0 var(--background-inner-radius) var(--background-inner-radius);\n }\n\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-top-left-radius: var(--background-inner-radius);\n border-top-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-bottom-left-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n .item {\n --group-item-radius: var(--background-inner-radius);\n }\n\n :is(.button, .trigger, .select) {\n border-radius: var(--background-inner-radius);\n }\n\n .input {\n --radius-sm: var(--background-inner-radius);\n }\n }\n }\n\n .group [data-ring=\"true\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n }\n\n .group :global(.focus-indicator) {\n display: none;\n }\n\n .group [data-focus-indicator=\"local\"] {\n display: none;\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"]) {\n @apply outline-none;\n box-shadow: none;\n }\n}\n",
|
|
4975
|
+
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --layout-radius-size: calc(var(--spacing) * 1.5);\n --layout-padding-size: var(--layout-radius-size);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-border-width: var(--border-width-base, 1px);\n --background-inner-radius: calc(var(--background-radius) - var(--background-border-width));\n --layout-text-height: calc(0.8em * var(--leading-tight, 1.25));\n --layout-vertical-spacing: calc(var(--spacing) * 4);\n --layout-border-height: calc(var(--background-border-width) * 2);\n --layout-padding-height: calc(var(--layout-padding-size) * 2);\n --layout-control-height: calc(\n var(--layout-text-height) +\n var(--layout-vertical-spacing) +\n var(--layout-border-height)\n );\n --item-height: max(\n calc(\n var(--layout-control-height) -\n var(--layout-padding-height) -\n var(--layout-border-height)\n ),\n 0px\n );\n\n @apply flex overflow-hidden shrink-0 box-border;\n color: var(--foreground, currentColor);\n background-color: var(--background, transparent);\n border: var(--background-border-width) solid var(--background-border, transparent);\n border-radius: var(--background-radius);\n padding: var(--layout-padding-size);\n\n &.horizontal {\n @apply flex-row items-stretch;\n height: var(--layout-control-height);\n\n .item.divider {\n margin-block: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n height: 100%;\n }\n }\n\n &.vertical {\n @apply flex-col;\n\n .item .button {\n @apply w-full;\n }\n\n .item.divider {\n margin-inline: calc(var(--layout-padding-size) * -1);\n }\n .item.divider > [role=\"separator\"] {\n width: 100%;\n }\n }\n\n &.none {\n --layout-padding-size: 0px;\n @apply gap-0;\n }\n\n &.xs {\n --layout-radius-size: calc(var(--spacing) * 0.875);\n @apply space-x-0.5;\n }\n\n &.sm {\n --layout-radius-size: calc(var(--spacing) * 1.25);\n @apply space-x-1;\n }\n\n }\n\n .item {\n @apply flex items-stretch;\n position: relative;\n isolation: isolate;\n border-radius: var(--group-item-radius, 0);\n overflow: visible;\n\n &.grow {\n flex: 1;\n }\n\n &.divider {\n @apply p-0 shrink-0 flex-none;\n\n > [role=\"separator\"] {\n flex: 0 0 auto;\n }\n }\n }\n\n :is(.button, .input, .select, .expand) {\n height: 100%;\n min-height: var(--item-height);\n position: relative;\n isolation: isolate;\n overflow: visible;\n }\n\n .button {\n @apply flex box-border;\n width: auto;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n &[data-selected=\"true\"] {\n @apply relative;\n background-color: var(--button-selected-background, var(--background-pressed, var(--background-hover, var(--background))));\n color: var(--button-selected-foreground, var(--foreground));\n }\n }\n\n .input {\n @apply flex flex-1 items-stretch overflow-visible;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n\n > [data-ring=\"true\"] {\n border-radius: inherit;\n }\n }\n\n .select {\n @apply flex items-stretch p-0 bg-transparent border-none;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand {\n @apply flex items-stretch;\n border-radius: var(--group-item-radius, var(--background-inner-radius));\n }\n\n .expand :global(.expand-scope),\n .expand :global(.expand) {\n @apply flex w-full h-full;\n }\n\n .expand :global(.expand) {\n @apply flex-col;\n border-radius: inherit;\n }\n\n .expand :global(.trigger) {\n @apply min-h-0;\n border-radius: inherit;\n }\n\n .trigger {}\n\n .group {\n .item :is(.button, .select) {\n border: none;\n }\n\n .input > [data-input-focus-surface=\"true\"] {\n border: none;\n }\n\n .button[data-selected=\"true\"] {\n font-weight: 500;\n }\n\n .item.divider > [role=\"separator\"] {\n --divider-background: var(--background);\n }\n\n &.none {\n .item:not(.divider) {\n overflow: hidden;\n }\n\n :is(.button, .trigger, .select) {\n border-radius: 0;\n --background-radius: 0;\n --background-inner-radius: 0;\n }\n\n .input {\n --radius-sm: 0;\n }\n\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .item:last-child {\n --group-item-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n }\n\n .item:only-child {\n --group-item-radius: var(--background-inner-radius);\n }\n\n &.horizontal {\n .item:first-child :is( .button, .trigger, .input > *, .select) {\n border-top-left-radius: var(--background-inner-radius);\n border-bottom-left-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is( .button, .trigger, .input > *, .select) {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child .trigger .icon-section {\n border-top-right-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n\n &.vertical {\n .item:first-child {\n --group-item-radius: var(--background-inner-radius) var(--background-inner-radius) 0 0;\n }\n\n .item:last-child {\n --group-item-radius: 0 0 var(--background-inner-radius) var(--background-inner-radius);\n }\n\n .item:first-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-top-left-radius: var(--background-inner-radius);\n border-top-right-radius: var(--background-inner-radius);\n }\n\n .item:last-child :is(\n .button,\n .trigger,\n .input > *,\n .select\n ) {\n border-bottom-left-radius: var(--background-inner-radius);\n border-bottom-right-radius: var(--background-inner-radius);\n }\n }\n }\n\n &:is(.xs, .sm) {\n .item {\n --group-item-radius: var(--background-inner-radius);\n }\n\n :is(.button, .trigger, .select) {\n border-radius: var(--background-inner-radius);\n }\n\n .input {\n --radius-sm: var(--background-inner-radius);\n }\n }\n }\n\n .group [data-ring=\"true\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n }\n\n .group :global(.focus-indicator) {\n display: none;\n }\n\n .group [data-focus-indicator=\"local\"] {\n display: none;\n }\n\n :is(.button[data-focus-visible=\"true\"], .trigger[data-focus-visible=\"true\"]) {\n @apply outline-none;\n box-shadow: none;\n }\n}\n",
|
|
4976
4976
|
"cssTypes": "declare const styles: {\n \"focus-scope\": string;\n \"focus-indicator\": string;\n group: string;\n horizontal: string;\n vertical: string;\n none: string;\n xs: string;\n sm: string;\n item: string;\n grow: string;\n divider: string;\n button: string;\n input: string;\n select: string;\n expand: string;\n trigger: string;\n};\n\nexport default styles;\n"
|
|
4977
4977
|
},
|
|
4978
4978
|
"input": {
|
|
@@ -5032,7 +5032,7 @@ export const generatedSourceCode = {
|
|
|
5032
5032
|
},
|
|
5033
5033
|
"radio": {
|
|
5034
5034
|
"tsx": "\"use client\";\n\nimport React, { useId, createContext, useContext } from \"react\";\nimport { useRadioGroupState } from \"react-stately\";\n\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useHover } from \"@react-aria/interactions\";\nimport { useFocusRing } from \"@react-aria/focus\";\nimport { useRadioGroup, useRadio } from \"@react-aria/radio\";\n\nimport { cn, type StyleValue } from \"./utils\";\nimport { type StylesProp, createStylesResolver } from \"@/lib/styles\";\nimport { asElementProps } from \"@/lib/react-aria\";\nimport { useFocus } from \"@/hooks/useFocus\";\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\";\nimport css from \"./Radio.module.css\";\n\ntype Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface RadioStyleSlots {\n root?: StyleValue;\n item?: StyleValue;\n input?: StyleValue;\n dot?: StyleValue;\n label?: StyleValue;\n description?: StyleValue;\n helperText?: StyleValue;\n}\n\nexport type RadioStylesProp = StylesProp<RadioStyleSlots>;\n\nconst resolveRadioBaseStyles = createStylesResolver([\n \"root\",\n \"item\",\n \"input\",\n \"dot\",\n \"label\",\n \"description\",\n \"helperText\",\n] as const);\n\nfunction resolveRadioStyles(styles: RadioStylesProp | undefined) {\n if (!styles || typeof styles === \"string\" || Array.isArray(styles)) {\n return resolveRadioBaseStyles(styles);\n }\n\n const { root, item, input, dot, label, description, helperText } = styles;\n return resolveRadioBaseStyles({ root, item, input, dot, label, description, helperText });\n}\n\ninterface RadioGroupContextType {\n state?: ReturnType<typeof useRadioGroupState>;\n disabled?: boolean;\n size?: Size;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextType | undefined>(undefined);\n\nconst useRadioGroupContext = () => {\n const context = useContext(RadioGroupContext);\n return context;\n};\n\nexport interface RadioGroupStyleSlots {\n root?: StyleValue;\n label?: StyleValue;\n description?: StyleValue;\n group?: StyleValue;\n}\n\nexport type RadioGroupStylesProp = StylesProp<RadioGroupStyleSlots>;\n\nconst resolveRadioGroupBaseStyles = createStylesResolver([\n \"root\",\n \"label\",\n \"description\",\n \"group\",\n] as const);\n\nfunction resolveRadioGroupStyles(styles: RadioGroupStylesProp | undefined) {\n if (!styles || typeof styles === \"string\" || Array.isArray(styles)) {\n return resolveRadioGroupBaseStyles(styles);\n }\n\n const { root, label, description, group } = styles;\n return resolveRadioGroupBaseStyles({ root, label, description, group });\n}\n\nexport interface RadioGroupProps {\n /** Controlled selected radio value */\n value?: string;\n /** Initial selected value for uncontrolled usage */\n defaultValue?: string;\n /** Called when the selected value changes */\n onValueChange?: (value: string) => void;\n /** Whether all radios in the group are disabled */\n disabled?: boolean;\n /** Size of all radio buttons in the group */\n size?: Size;\n children: React.ReactNode;\n /** Additional CSS class names */\n className?: string;\n /** Accessible label for the radio group */\n label?: string;\n /** Descriptive text shown below the group label */\n description?: string;\n /** Classes applied to the root or named slots */\n styles?: RadioGroupStylesProp;\n}\n\nconst RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n value: controlledValue,\n defaultValue,\n onValueChange,\n disabled = false,\n size = \"md\",\n children,\n className,\n label,\n description,\n styles: stylesProp,\n },\n ref\n ) => {\n const state = useRadioGroupState({\n value: controlledValue,\n defaultValue,\n onChange: onValueChange,\n isDisabled: disabled,\n });\n\n useRadioGroup(\n {\n isDisabled: disabled,\n label,\n description,\n },\n state\n );\n\n const resolved = resolveRadioGroupStyles(stylesProp);\n\n return (\n <RadioGroupContext.Provider value={{ state, disabled, size }}>\n <div ref={ref} className={cn(\"radio-group\", className, resolved.root)} role=\"group\">\n {label && (\n <label\n className={cn(\"radio-label\", css[\"radio-label\"], resolved.label)}\n data-disabled={disabled ? \"true\" : undefined}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={cn(\"radio-description\", css[\"radio-description\"], resolved.description)}>\n {description}\n </p>\n )}\n <div className={cn(css[\"radio-items\"], resolved.group)}>{children}</div>\n </div>\n </RadioGroupContext.Provider>\n );\n }\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioItemProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n /** Size of the radio button */\n size?: Size;\n /** Label text or element displayed next to the radio */\n label?: React.ReactNode;\n /** Secondary description shown below the label */\n description?: React.ReactNode;\n /** Helper text shown below the radio item */\n helperText?: React.ReactNode;\n /** Whether to style the helper text as an error */\n helperTextError?: boolean;\n /** Whether to apply error styling */\n error?: boolean;\n /** Value submitted when this radio is selected */\n value: string;\n /** Classes applied to named slots */\n styles?: RadioStylesProp;\n}\n\nconst RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(\n (\n {\n className,\n size: sizeProp,\n disabled: disabledProp = false,\n error = false,\n label,\n description,\n helperText,\n helperTextError = false,\n value,\n id,\n styles: stylesProp,\n ...props\n },\n ref\n ) => {\n const radioGroupContext = useRadioGroupContext();\n const generatedId = useId();\n const radioId = id || `radio-${generatedId}`;\n\n if (!radioGroupContext?.state) {\n throw new Error(\"RadioItem must be used within a Radio.Group\");\n }\n\n const { state } = radioGroupContext;\n const size = sizeProp || radioGroupContext?.size || \"md\";\n const disabled = disabledProp ?? radioGroupContext?.disabled ?? false;\n const isSelected = state.selectedValue === value;\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(ref, inputRef);\n\n const ariaLabelFromProps = props[\"aria-label\"];\n const ariaLabelValue = ariaLabelFromProps || (typeof label === \"string\" ? label : undefined);\n\n const { inputProps } = useRadio(\n {\n value,\n isDisabled: disabled,\n ...(ariaLabelValue && { \"aria-label\": ariaLabelValue }),\n },\n state,\n inputRef\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n const { scopeProps, indicatorProps } = useFocus({\n scopeRef: rootRef,\n containerRef: rootRef,\n surfaceSelector: '[data-radio-focus-surface=\"true\"]',\n radiusSource: \"surface\",\n });\n const resolved = resolveRadioStyles(stylesProp);\n\n return (\n <div\n ref={rootRef}\n className={cn(\"w-full\", css[\"radio-item\"], scopeProps.className, resolved.item)}\n data-disabled={disabled ? \"true\" : undefined}\n >\n <div {...indicatorProps} data-focus-indicator=\"local\" />\n <div\n className={cn(\"relative\", css[\"radio-surface\"])}\n data-focused={isFocused ? \"true\" : \"false\"}\n data-focus-visible={isFocusVisible ? \"true\" : \"false\"}\n data-radio-focus-surface=\"true\"\n >\n <div\n className={cn(\"radio\", css.radio, css[size], className, resolved.root)}\n data-selected={isSelected ? \"true\" : \"false\"}\n data-disabled={disabled ? \"true\" : undefined}\n data-error={error ? \"true\" : undefined}\n data-hovered={isHovered ? \"true\" : \"false\"}\n role=\"presentation\"\n >\n <div className={cn(\"dot\", css.dot, resolved.dot)} />\n </div>\n <input\n {...asElementProps<\"input\">(mergeProps(inputProps, focusProps, hoverProps))}\n ref={mergedRef}\n type=\"radio\"\n id={radioId}\n className={cn(css[\"radio-input\"], resolved.input)}\n suppressHydrationWarning\n {...props}\n />\n </div>\n {(label || description) && (\n <div className=\"flex flex-col gap-1\">\n {label && (\n <label\n htmlFor={radioId}\n className={cn(\"radio-label\", css[\"radio-label\"], resolved.label)}\n data-disabled={disabled ? \"true\" : undefined}\n suppressHydrationWarning\n >\n {label}\n </label>\n )}\n {description && (\n <p\n className={cn(\"radio-description\", css[\"radio-description\"], resolved.description)}\n data-error={error ? \"true\" : undefined}\n >\n {description}\n </p>\n )}\n </div>\n )}\n {helperText && (\n <p\n className={cn(\"helper-text\", css[\"helper-text\"], resolved.helperText)}\n data-error={helperTextError ? \"true\" : undefined}\n >\n {helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nRadioItem.displayName = \"RadioItem\";\n\nexport interface RadioProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n /** Size of the radio button */\n size?: Size;\n /** Label text or element displayed next to the radio */\n label?: React.ReactNode;\n /** Secondary description shown below the label */\n description?: React.ReactNode;\n /** Helper text shown below the radio item */\n helperText?: React.ReactNode;\n /** Whether to style the helper text as an error */\n helperTextError?: boolean;\n /** Whether to apply error styling */\n error?: boolean;\n /** Classes applied to named slots */\n styles?: RadioStylesProp;\n}\n\nconst RadioBase = React.forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className,\n size = \"md\",\n disabled = false,\n error = false,\n label,\n description,\n helperText,\n helperTextError = false,\n checked: checkedProp,\n defaultChecked,\n onChange,\n id,\n styles: stylesProp,\n ...props\n },\n ref\n ) => {\n const [internalChecked, setInternalChecked] = React.useState(checkedProp ?? defaultChecked ?? false);\n const generatedId = useId();\n\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalChecked(e.target.checked);\n }\n onChange?.(e);\n };\n\n const radioId = id || `radio-${generatedId}`;\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(ref, inputRef);\n const { scopeProps, indicatorProps } = useFocus({\n scopeRef: rootRef,\n containerRef: rootRef,\n surfaceSelector: '[data-radio-focus-surface=\"true\"]',\n radiusSource: \"surface\",\n });\n const resolved = resolveRadioStyles(stylesProp);\n\n return (\n <div\n ref={rootRef}\n className={cn(\"w-full\", css[\"radio-item\"], scopeProps.className, resolved.item)}\n data-disabled={disabled ? \"true\" : undefined}\n >\n <div {...indicatorProps} data-focus-indicator=\"local\" />\n <div\n className={cn(\"relative\", css[\"radio-surface\"])}\n data-focused={isFocused ? \"true\" : \"false\"}\n data-focus-visible={isFocusVisible ? \"true\" : \"false\"}\n data-radio-focus-surface=\"true\"\n >\n <div\n className={cn(\"radio\", css.radio, css[size], className, resolved.root)}\n data-selected={checked ? \"true\" : \"false\"}\n data-disabled={disabled ? \"true\" : undefined}\n data-error={error ? \"true\" : undefined}\n data-hovered={isHovered ? \"true\" : \"false\"}\n role=\"presentation\"\n >\n <div className={cn(\"dot\", css.dot, resolved.dot)} />\n </div>\n <input\n {...asElementProps<\"input\">(mergeProps(focusProps, hoverProps))}\n ref={mergedRef}\n type=\"radio\"\n id={radioId}\n checked={checked}\n onChange={handleChange}\n disabled={disabled ?? false}\n className={cn(css[\"radio-input\"], resolved.input)}\n aria-label={typeof label === \"string\" ? label : undefined}\n suppressHydrationWarning\n {...props}\n />\n </div>\n {(label || description) && (\n <div className=\"flex flex-col gap-1\">\n {label && (\n <label\n htmlFor={radioId}\n className={cn(\"radio-label\", css[\"radio-label\"], resolved.label)}\n data-disabled={disabled ? \"true\" : undefined}\n suppressHydrationWarning\n >\n {label}\n </label>\n )}\n {description && (\n <p\n className={cn(\"radio-description\", css[\"radio-description\"], resolved.description)}\n data-error={error ? \"true\" : undefined}\n >\n {description}\n </p>\n )}\n </div>\n )}\n {helperText && (\n <p\n className={cn(\"helper-text\", css[\"helper-text\"], resolved.helperText)}\n data-error={helperTextError ? \"true\" : undefined}\n >\n {helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nRadioBase.displayName = \"Radio\";\n\nconst Radio = Object.assign(RadioBase, {\n Group: RadioGroup,\n Item: RadioItem,\n});\n\nexport { Radio };\n",
|
|
5035
|
-
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-items {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n position: relative;\n overflow: visible;\n }\n\n .radio-surface {\n @apply inline-flex shrink-0;\n border-radius: 9999px;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n
|
|
5035
|
+
"css": "@reference \"tailwindcss\";\n\n@layer components {\n .radio-items {\n @apply flex flex-col gap-3;\n }\n\n .radio-item {\n @apply flex items-start gap-3 cursor-pointer select-none;\n position: relative;\n overflow: visible;\n }\n\n .radio-surface {\n @apply inline-flex shrink-0;\n border-radius: 9999px;\n }\n\n .radio-input {\n @apply absolute inset-0 h-full w-full cursor-pointer opacity-0;\n }\n\n .radio {\n --disabled-opacity: 0.6;\n @apply relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: 9999px;\n background-color: var(--background);\n color: var(--foreground);\n\n &[data-focus-visible=\"true\"] {\n outline: none;\n }\n }\n\n .radio-item:active .radio {\n transform: scale(0.92);\n }\n\n .dot {\n border-radius: 9999px;\n background-color: var(--background);\n transform: scale(0);\n }\n\n .radio[data-selected=\"true\"] .dot {\n transform: scale(1);\n }\n\n @media (hover: hover) {\n .radio-item:not([data-disabled=\"true\"]):hover .radio {\n opacity: 0.9;\n }\n }\n\n .radio-item[data-disabled=\"true\"] .radio {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .radio-label {\n @apply cursor-pointer;\n color: var(--foreground);\n font-size: inherit;\n font-weight: var(--font-weight-medium, 500);\n line-height: inherit;\n user-select: none;\n\n &[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n }\n\n .radio-description {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.125rem;\n }\n\n .helper-text {\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n margin-top: 0.5rem;\n margin-left: 2rem;\n }\n\n .radio.sm {\n @apply h-4 w-4;\n }\n\n .radio.sm .dot {\n width: 0.375rem;\n height: 0.375rem;\n }\n\n .radio.md {\n @apply h-5 w-5;\n }\n\n .radio.md .dot {\n width: 0.5rem;\n height: 0.5rem;\n }\n\n .radio.lg {\n @apply h-6 w-6;\n }\n\n .radio.lg .dot {\n width: 0.625rem;\n height: 0.625rem;\n }\n}\n",
|
|
5036
5036
|
"cssTypes": "declare const styles: {\n \"radio-items\": string;\n \"radio-item\": string;\n \"radio-surface\": string;\n \"radio-input\": string;\n radio: string;\n dot: string;\n \"radio-label\": string;\n \"radio-description\": string;\n \"helper-text\": string;\n sm: string;\n md: string;\n lg: string;\n};\n\nexport default styles;\n"
|
|
5037
5037
|
},
|
|
5038
5038
|
"scroll": {
|
|
@@ -5313,6 +5313,6 @@ export const generatedCorePeerDependencies = [
|
|
|
5313
5313
|
"react-dom"
|
|
5314
5314
|
];
|
|
5315
5315
|
export const packageMetadata = {
|
|
5316
|
-
"version": "0.3.
|
|
5316
|
+
"version": "0.3.48"
|
|
5317
5317
|
};
|
|
5318
5318
|
//# sourceMappingURL=generated-data.js.map
|