sigma-ui 1.1.2 → 1.2.0
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/README.md +1 -1
- package/__generated/registry-schemes/colors/blue.json +1 -1
- package/__generated/registry-schemes/colors/frosted-glass.json +1 -1
- package/__generated/registry-schemes/colors/grayscale.json +1 -1
- package/__generated/registry-schemes/colors/green.json +1 -1
- package/__generated/registry-schemes/colors/orange.json +1 -1
- package/__generated/registry-schemes/colors/red.json +1 -1
- package/__generated/registry-schemes/colors/rose.json +1 -1
- package/__generated/registry-schemes/colors/yellow.json +1 -1
- package/__generated/registry-schemes/style-system/css/accordion.json +1 -1
- package/__generated/registry-schemes/style-system/css/alert-dialog.json +1 -1
- package/__generated/registry-schemes/style-system/css/button.json +1 -1
- package/__generated/registry-schemes/style-system/css/collapsible.json +1 -1
- package/__generated/registry-schemes/style-system/css/combobox.json +1 -1
- package/__generated/registry-schemes/style-system/css/context-menu.json +2 -2
- package/__generated/registry-schemes/style-system/css/dialog.json +2 -2
- package/__generated/registry-schemes/style-system/css/dropdown-menu.json +2 -2
- package/__generated/registry-schemes/style-system/css/hover-card.json +1 -1
- package/__generated/registry-schemes/style-system/css/image.json +1 -1
- package/__generated/registry-schemes/style-system/css/menubar.json +2 -2
- package/__generated/registry-schemes/style-system/css/navigation-menu.json +3 -3
- package/__generated/registry-schemes/style-system/css/popover.json +1 -1
- package/__generated/registry-schemes/style-system/css/radio-group.json +1 -1
- package/__generated/registry-schemes/style-system/css/select.json +1 -1
- package/__generated/registry-schemes/style-system/css/sheet.json +1 -1
- package/__generated/registry-schemes/style-system/css/skeleton.json +1 -1
- package/__generated/registry-schemes/style-system/css/switch.json +1 -1
- package/__generated/registry-schemes/style-system/css/tooltip.json +1 -1
- package/__generated/registry-schemes/style-system/tailwind/button.json +1 -1
- package/__generated/registry-schemes/style-system/tailwind/navigation-menu.json +1 -1
- package/dist/index.js +417 -183
- package/dist/index.js.map +1 -1
- package/package.json +19 -19
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ It takes away the burden of recreating the same components from scratch for ever
|
|
|
27
27
|
- **Supported style systems**: CSS, Tailwind 4.
|
|
28
28
|
- **Is open-source**: Yes, MIT licensed.
|
|
29
29
|
- **Accessibility**: Supported.
|
|
30
|
-
- **Based upon**: Radix
|
|
30
|
+
- **Based upon**: Reka (formerly Radix-Vue) primitives.
|
|
31
31
|
- **Installation method**: The components are distributed via the method I call GOAT (Git Obtained As Template) - run `npx` commands to clone the components from git registry directly to your project components directory. Unlike NPM modules, these components are copied from git registry directly into your project and give you full control over customization, instead of using just props and css overrides.
|
|
32
32
|
|
|
33
33
|
## Usage
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --border: 214.3 31.8% 91.4%;\n --input: 0 0% 100%;\n --primary: 221.2 83.2% 53.3%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --ring: 221.2 83.2% 53.3%;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 222.2 84% 4.9%;\n --primary: 217.2 91.2% 59.8%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --ring: 224.3 76.3% 48%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --border: 214.3 31.8% 91.4%;\n --input: 0 0% 100%;\n --primary: 221.2 83.2% 53.3%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --ring: 221.2 83.2% 53.3%;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 222.2 84% 4.9%;\n --primary: 217.2 91.2% 59.8%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --ring: 224.3 76.3% 48%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --border: 214.3 31.8% 91.4%;\n --input: 0 0% 100%;\n --primary: 221.2 83.2% 53.3%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --ring: 221.2 83.2% 53.3%;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 222.2 84% 4.9%;\n --primary: 217.2 91.2% 59.8%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --ring: 224.3 76.3% 48%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --popover: 0 0% 100% / 10%;\n --popover-foreground: 224 71.4% 4.1%;\n --card: 0 0% 100% / 10%;\n --card-foreground: 224 71.4% 4.1%;\n --border: 220 13% 91%;\n --input: 0 0% 100%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --ring: 224 71.4% 4.1%;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --popover: 224 71.4% 4.1% / 20%;\n --popover-foreground: 210 20% 98%;\n --card: 215 27.9% 16.9% / 30%;\n --card-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 224 71.4% 4.1% / 50%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9% / 50%;\n --secondary-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --ring: 216 12.2% 83.9%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --popover: 0 0% 100% / 10%;\n --popover-foreground: 224 71.4% 4.1%;\n --card: 0 0% 100% / 10%;\n --card-foreground: 224 71.4% 4.1%;\n --border: 220 13% 91%;\n --input: 0 0% 100%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --ring: 224 71.4% 4.1%;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --popover: 224 71.4% 4.1% / 20%;\n --popover-foreground: 210 20% 98%;\n --card: 215 27.9% 16.9% / 30%;\n --card-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 224 71.4% 4.1% / 50%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9% / 50%;\n --secondary-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --ring: 216 12.2% 83.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --popover: 0 0% 100% / 10%;\n --popover-foreground: 224 71.4% 4.1%;\n --card: 0 0% 100% / 10%;\n --card-foreground: 224 71.4% 4.1%;\n --border: 220 13% 91%;\n --input: 0 0% 100%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --ring: 224 71.4% 4.1%;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --popover: 224 71.4% 4.1% / 20%;\n --popover-foreground: 210 20% 98%;\n --card: 215 27.9% 16.9% / 30%;\n --card-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 224 71.4% 4.1% / 50%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9% / 50%;\n --secondary-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --ring: 216 12.2% 83.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 5.9% 10%;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 10% 3.9%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 4.9% 83.9%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 5.9% 10%;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 10% 3.9%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 4.9% 83.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 5.9% 10%;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 10% 3.9%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 240 4.9% 83.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 142.1 76.2% 36.3%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 142.1 76.2% 36.3%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 142.1 70.6% 45.3%;\n --primary-foreground: 144.9 80.4% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 142.4 71.8% 29.2%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 142.1 76.2% 36.3%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 142.1 76.2% 36.3%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 142.1 70.6% 45.3%;\n --primary-foreground: 144.9 80.4% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 142.4 71.8% 29.2%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 142.1 76.2% 36.3%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 142.1 76.2% 36.3%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 142.1 70.6% 45.3%;\n --primary-foreground: 144.9 80.4% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 142.4 71.8% 29.2%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 24.6 95% 53.1%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 24.6 95% 53.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 20.5 90.2% 48.2%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 72.2% 50.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20.5 90.2% 48.2%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 24.6 95% 53.1%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 24.6 95% 53.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 20.5 90.2% 48.2%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 72.2% 50.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20.5 90.2% 48.2%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 24.6 95% 53.1%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 24.6 95% 53.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 20.5 90.2% 48.2%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 72.2% 50.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20.5 90.2% 48.2%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --border: 0 0% 89.8%;\n --input: 0 0% 100%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 3.9%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --border: 0 0% 89.8%;\n --input: 0 0% 100%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 3.9%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --border: 0 0% 89.8%;\n --input: 0 0% 100%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 3.9%;\n --primary: 0 72.2% 50.6%;\n --primary-foreground: 0 85.7% 97.3%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --ring: 0 72.2% 50.6%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 346.8 77.2% 49.8%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 346.8 77.2% 49.8%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 346.8 77.2% 49.8%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 346.8 77.2% 49.8%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --border: 240 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --ring: 346.8 77.2% 49.8%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 0 0% 95%;\n --muted: 0 0% 15%;\n --muted-foreground: 240 5% 64.9%;\n --popover: 0 0% 9%;\n --popover-foreground: 0 0% 95%;\n --card: 24 9.8% 10%;\n --card-foreground: 0 0% 95%;\n --border: 240 3.7% 15.9%;\n --input: 20 14.3% 4.1%;\n --primary: 346.8 77.2% 49.8%;\n --primary-foreground: 355.7 100% 97.3%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --ring: 346.8 77.2% 49.8%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"withVariables": "@import \"tailwindcss\";\n@config \"../../tailwind.config.js\";\n\n@layer base {\n /* Override Tailwind 4 default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n\n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20 14.3% 4.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 35.5 91.7% 32.9%;\n }\n\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
49
49
|
},
|
|
50
50
|
"css": {
|
|
51
|
-
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20 14.3% 4.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 35.5 91.7% 32.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n .animate-fade-in {\n animation: fade-in 0.5s ease;\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
51
|
+
"withVariables": "@layer base {\n /* Override preflight default hover cursor for buttons and button-like elements */\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n \n :root {\n --backdrop-filter-blur: 32px;\n --radius: 0.5rem;\n --radius-full: 9999px;\n --radius-xl: calc(var(--radius) + 4px);\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-xs: min(calc(var(--radius) / 2.5), 6px);\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --shadow-md: \n 0 4px 6px -1px rgba(0, 0, 0, 0.02), \n 0 2px 4px -1px rgba(0, 0, 0, 0.02),\n 0 12px 24px rgba(0, 0, 0, 0.05);\n \n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --border: 20 5.9% 90%;\n --input: 0 0% 100%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 20 14.3% 4.1%;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 20 14.3% 4.1%;\n --primary: 47.9 95.8% 53.1%;\n --primary-foreground: 26 83.3% 14.1%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --ring: 35.5 91.7% 32.9%;\n }\n\n * {\n border-color: hsl(var(--border));\n }\n \n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n \n /* Shared keyframes */\n @keyframes sigma-ui-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes sigma-ui-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes sigma-ui-fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes sigma-ui-fade-out-scale {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @keyframes sigma-ui-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes sigma-ui-collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-collapsible-content-height);\n }\n }\n\n @keyframes sigma-ui-collapsible-up {\n from {\n height: var(--reka-collapsible-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n\n @keyframes sigma-ui-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--reka-accordion-content-height);\n }\n }\n \n /* CSS animations */\n .animate-fade-in {\n animation: sigma-ui-fade-in 0.5s ease;\n }\n\n .animate-sigma-ui-spin {\n animation: sigma-ui-spin 1s linear infinite;\n }\n\n /* Vue transitions */\n .fade-slide-top-enter-active,\n .fade-slide-top-leave-active {\n transition: all 0.3s ease;\n }\n\n .fade-slide-top-enter-from,\n .fade-slide-top-leave-to {\n opacity: 0;\n filter: blur(4px);\n transform: translateY(8px);\n }\n}"
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "AccordionContent.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-content\"\n >\n <div\n class=\"sigma-ui-accordion-content-inner\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n </AccordionContent>\n</template>\n\n<style>\n.sigma-ui-accordion-content {\n overflow: hidden;\n font-size: 0.875rem;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-content[data-state='closed'] {\n animation: accordion-up 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content[data-state='open'] {\n animation: accordion-down 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content-inner {\n padding: 0 0 1rem;\n}\n
|
|
12
|
+
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-content\"\n >\n <div\n class=\"sigma-ui-accordion-content-inner\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n </AccordionContent>\n</template>\n\n<style>\n.sigma-ui-accordion-content {\n overflow: hidden;\n font-size: 0.875rem;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-content[data-state='closed'] {\n animation: sigma-ui-accordion-up 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content[data-state='open'] {\n animation: sigma-ui-accordion-down 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content-inner {\n padding: 0 0 1rem;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "AccordionItem.vue",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "AlertDialogContent.vue",
|
|
20
|
-
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogContentProps>();\nconst emits = defineEmits<AlertDialogContentEmits>();\nconst attrs = useAttrs();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay class=\"sigma-ui-alert-dialog-overlay\" />\n <AlertDialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-alert-dialog-content\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-overlay {\n position: fixed;\n z-index: 50;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='open'] {\n animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='closed'] {\n animation: fade-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content {\n position: fixed;\n z-index: 50;\n top: 50%;\n left: 50%;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transform: translate(-50%, -50%);\n transition-duration: 200ms;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-content {\n border-radius: var(--radius);\n }\n}\n\n.sigma-ui-alert-dialog-content[data-state='open'] {\n animation:
|
|
20
|
+
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogContentProps>();\nconst emits = defineEmits<AlertDialogContentEmits>();\nconst attrs = useAttrs();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay class=\"sigma-ui-alert-dialog-overlay\" />\n <AlertDialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-alert-dialog-content\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-overlay {\n position: fixed;\n z-index: 50;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='open'] {\n animation: sigma-ui-fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='closed'] {\n animation: sigma-ui-fade-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content {\n position: fixed;\n z-index: 50;\n top: 50%;\n left: 50%;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transform: translate(-50%, -50%);\n transition-duration: 200ms;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-content {\n border-radius: var(--radius);\n }\n}\n\n.sigma-ui-alert-dialog-content[data-state='open'] {\n animation: sigma-ui-alert-dialog-show 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content[data-state='closed'] {\n animation: sigma-ui-alert-dialog-hide 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes sigma-ui-alert-dialog-show {\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes sigma-ui-alert-dialog-hide {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n}\n</style>\n"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "AlertDialogDescription.vue",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Button.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant'];\n size?: ButtonVariants['size'];\n isLoading?: boolean;\n loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n isLoading: false,\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"[buttonVariants({ variant, size }), $attrs.class]\"\n :disabled=\"isLoading || $attrs.disabled\"\n >\n <Loader2Icon\n v-if=\"isLoading\"\n class=\"sigma-ui-button__loader\"\n />\n <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n <slot />\n </template>\n <template v-else>\n {{ loadingText }}\n </template>\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-button {\n display: inline-flex;\n width: fit-content;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius);\n font-size: 0.875rem;\n font-weight: 500;\n outline: none;\n transition: background-color 0.1s ease, colors 0.2s;\n user-select: none;\n white-space: nowrap;\n}\n\n.sigma-ui-button:focus-visible {\n box-shadow:\n 0 0 0 2px hsl(var(--background)),\n 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.sigma-ui-button:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.sigma-ui-button--default {\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-button--default:hover {\n background-color: hsl(var(--primary) / 90%);\n}\n\n.sigma-ui-button--destructive {\n background-color: hsl(var(--destructive));\n color: hsl(var(--destructive-foreground));\n}\n\n.sigma-ui-button--destructive:hover {\n background-color: hsl(var(--destructive) / 90%);\n}\n\n.sigma-ui-button--outline {\n border: 1px solid hsl(var(--border));\n background-color: transparent;\n}\n\n.sigma-ui-button--outline:hover {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary:hover {\n background-color: hsl(var(--secondary) / 80%);\n}\n\n.sigma-ui-button--ghost:hover {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--link {\n color: hsl(var(--primary));\n text-underline-offset: 4px;\n}\n\n.sigma-ui-button--link:hover {\n text-decoration: underline;\n}\n\n.sigma-ui-button--size-default {\n height: 2.5rem;\n padding: 0.5rem 1rem;\n}\n\n.sigma-ui-button--size-xs {\n height: 1.75rem;\n padding: 0 0.5rem;\n border-radius: 0.25rem;\n}\n\n.sigma-ui-button--size-sm {\n height: 2.25rem;\n padding: 0 0.75rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-lg {\n height: 2.75rem;\n padding: 0 2rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-icon {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.sigma-ui-button__loader {\n width: 1rem;\n height: 1rem;\n margin-right: 0.5rem;\n animation: spin 1s linear infinite;\n}\n
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant'];\n size?: ButtonVariants['size'];\n isLoading?: boolean;\n loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n variant: 'default',\n size: 'default',\n isLoading: false,\n loadingText: '',\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"[buttonVariants({ variant, size }), $attrs.class]\"\n :disabled=\"isLoading || $attrs.disabled\"\n >\n <Loader2Icon\n v-if=\"isLoading\"\n class=\"sigma-ui-button__loader\"\n />\n <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n <slot />\n </template>\n <template v-else>\n {{ loadingText }}\n </template>\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-button {\n display: inline-flex;\n width: fit-content;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius);\n font-size: 0.875rem;\n font-weight: 500;\n outline: none;\n transition: background-color 0.1s ease, colors 0.2s;\n user-select: none;\n white-space: nowrap;\n}\n\n.sigma-ui-button:focus-visible {\n box-shadow:\n 0 0 0 2px hsl(var(--background)),\n 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.sigma-ui-button:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.sigma-ui-button--default {\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-button--default:hover {\n background-color: hsl(var(--primary) / 90%);\n}\n\n.sigma-ui-button--destructive {\n background-color: hsl(var(--destructive));\n color: hsl(var(--destructive-foreground));\n}\n\n.sigma-ui-button--destructive:hover {\n background-color: hsl(var(--destructive) / 90%);\n}\n\n.sigma-ui-button--outline {\n border: 1px solid hsl(var(--border));\n background-color: transparent;\n}\n\n.sigma-ui-button--outline:hover {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary:hover {\n background-color: hsl(var(--secondary) / 80%);\n}\n\n.sigma-ui-button--ghost:hover {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--link {\n color: hsl(var(--primary));\n text-underline-offset: 4px;\n}\n\n.sigma-ui-button--link:hover {\n text-decoration: underline;\n}\n\n.sigma-ui-button--size-default {\n height: 2.5rem;\n padding: 0.5rem 1rem;\n}\n\n.sigma-ui-button--size-xs {\n height: 1.75rem;\n padding: 0 0.5rem;\n border-radius: 0.25rem;\n}\n\n.sigma-ui-button--size-sm {\n height: 2.25rem;\n padding: 0 0.75rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-lg {\n height: 2.75rem;\n padding: 0 2rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-icon {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.sigma-ui-button__loader {\n width: 1rem;\n height: 1rem;\n margin-right: 0.5rem;\n animation: sigma-ui-spin 1s linear infinite;\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "index.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "CollapsibleContent.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui';\n\nconst props = defineProps<CollapsibleContentProps>();\n</script>\n\n<template>\n <CollapsibleContent\n v-bind=\"props\"\n class=\"sigma-ui-collapsible__content\"\n >\n <slot />\n </CollapsibleContent>\n</template>\n\n<style>\n.sigma-ui-collapsible__content {\n overflow: hidden;\n}\n\n.sigma-ui-collapsible__content[data-state=\"open\"] {\n animation: collapsible-down 0.2s ease-out;\n}\n\n.sigma-ui-collapsible__content[data-state=\"closed\"] {\n animation: collapsible-up 0.2s ease-out;\n}\n</style>\n"
|
|
12
|
+
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui';\n\nconst props = defineProps<CollapsibleContentProps>();\n</script>\n\n<template>\n <CollapsibleContent\n v-bind=\"props\"\n class=\"sigma-ui-collapsible__content\"\n >\n <slot />\n </CollapsibleContent>\n</template>\n\n<style>\n.sigma-ui-collapsible__content {\n overflow: hidden;\n}\n\n.sigma-ui-collapsible__content[data-state=\"open\"] {\n animation: sigma-ui-collapsible-down 0.2s ease-out;\n}\n\n.sigma-ui-collapsible__content[data-state=\"closed\"] {\n animation: sigma-ui-collapsible-up 0.2s ease-out;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "CollapsibleTrigger.vue",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
"name": "ComboboxList.vue",
|
|
34
|
-
"content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxContentProps>(), {\n position: 'popper',\n align: 'center',\n sideOffset: 4,\n});\nconst emits = defineEmits<ComboboxContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ComboboxPortal>\n <ComboboxContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"['sigma-ui-combobox-list', $attrs.class]\"\n >\n <ComboboxViewport>\n <slot />\n </ComboboxViewport>\n </ComboboxContent>\n </ComboboxPortal>\n</template>\n\n<style>\n.sigma-ui-combobox-list {\n position: relative;\n z-index: 50;\n width: 200px;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"bottom\"] {\n animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"bottom\"] {\n animation: slide-to-top 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"top\"] {\n animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"top\"] {\n animation: slide-to-bottom 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"left\"] {\n animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"left\"] {\n animation: slide-to-right 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"right\"] {\n animation: slide-from-left 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"right\"] {\n animation: slide-to-left 150ms ease-in;\n}\n\n@keyframes slide-from-top {\n from {\n filter: blur(4px);\n transform: translateY(-1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes slide-to-top {\n from {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateY(-1rem) scaleY(0.98);\n }\n}\n\n@keyframes slide-from-bottom {\n from {\n filter: blur(4px);\n transform: translateY(1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes slide-to-bottom {\n from {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateY(1rem) scaleY(0.98);\n }\n}\n\n@keyframes slide-from-left {\n from {\n filter: blur(4px);\n transform: translateX(-1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n}\n\n@keyframes slide-to-left {\n from {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateX(-1rem) scaleY(0.98);\n }\n}\n\n@keyframes slide-from-right {\n from {\n filter: blur(4px);\n transform: translateX(1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n}\n\n@keyframes slide-to-right {\n from {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateX(1rem) scaleY(0.98);\n }\n}\n</style>\n"
|
|
34
|
+
"content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxContentProps>(), {\n position: 'popper',\n align: 'center',\n sideOffset: 4,\n});\nconst emits = defineEmits<ComboboxContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ComboboxPortal>\n <ComboboxContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"['sigma-ui-combobox-list', $attrs.class]\"\n >\n <ComboboxViewport>\n <slot />\n </ComboboxViewport>\n </ComboboxContent>\n </ComboboxPortal>\n</template>\n\n<style>\n.sigma-ui-combobox-list {\n position: relative;\n z-index: 50;\n width: 200px;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"bottom\"] {\n animation: sigma-ui-combobox-slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"bottom\"] {\n animation: sigma-ui-combobox-slide-to-top 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"top\"] {\n animation: sigma-ui-combobox-slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"top\"] {\n animation: sigma-ui-combobox-slide-to-bottom 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"left\"] {\n animation: sigma-ui-combobox-slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"left\"] {\n animation: sigma-ui-combobox-slide-to-right 150ms ease-in;\n}\n\n.sigma-ui-combobox-list[data-state=\"open\"][data-side=\"right\"] {\n animation: sigma-ui-combobox-slide-from-left 150ms ease-out;\n}\n\n.sigma-ui-combobox-list[data-state=\"closed\"][data-side=\"right\"] {\n animation: sigma-ui-combobox-slide-to-left 150ms ease-in;\n}\n\n@keyframes sigma-ui-combobox-slide-from-top {\n from {\n filter: blur(4px);\n transform: translateY(-1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-to-top {\n from {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateY(-1rem) scaleY(0.98);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-from-bottom {\n from {\n filter: blur(4px);\n transform: translateY(1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-to-bottom {\n from {\n filter: blur(0);\n transform: translateY(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateY(1rem) scaleY(0.98);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-from-left {\n from {\n filter: blur(4px);\n transform: translateX(-1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-to-left {\n from {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateX(-1rem) scaleY(0.98);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-from-right {\n from {\n filter: blur(4px);\n transform: translateX(1rem) scaleY(0.98);\n }\n\n to {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n}\n\n@keyframes sigma-ui-combobox-slide-to-right {\n from {\n filter: blur(0);\n transform: translateX(0) scaleY(1);\n }\n\n to {\n filter: blur(4px);\n transform: translateX(1rem) scaleY(0.98);\n }\n}\n</style>\n"
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": "ComboboxSeparator.vue",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "ContextMenuContent.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuContentProps>();\nconst emits = defineEmits<ContextMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-context-menu-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n\n<style>\n.sigma-ui-context-menu-content {\n z-index: 50;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-content[data-state=\"open\"] {\n animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-context-menu-content[data-state=\"closed\"] {\n animation: fade-out 100ms ease-in forwards;\n}\n
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuContentProps>();\nconst emits = defineEmits<ContextMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-context-menu-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n\n<style>\n.sigma-ui-context-menu-content {\n z-index: 50;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-content[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n\n.sigma-ui-context-menu-content[data-state=\"closed\"] {\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "ContextMenuGroup.vue",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
"name": "ContextMenuSubContent.vue",
|
|
56
|
-
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubContent,\n type ContextMenuSubContentEmits,\n type ContextMenuSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuSubContentProps>();\nconst emits = defineEmits<ContextMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-context-menu-sub-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"open\"] {\n animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"closed\"] {\n animation: fade-out 100ms ease-in forwards;\n}\n
|
|
56
|
+
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubContent,\n type ContextMenuSubContentEmits,\n type ContextMenuSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuSubContentProps>();\nconst emits = defineEmits<ContextMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-context-menu-sub-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-context-menu-sub-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"closed\"] {\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n}\n</style>\n"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"name": "ContextMenuSubTrigger.vue",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "DialogContent.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay class=\"sigma-ui-dialog-overlay\" />\n <DialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-dialog-content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n\n <DialogClose class=\"sigma-ui-dialog-close\">\n <XIcon class=\"sigma-ui-dialog-close__icon\" />\n <span class=\"sigma-ui-dialog-close__label\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-overlay {\n position: fixed;\n z-index: 50;\n animation: fade-in 0.2s ease-out;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"open\"] {\n animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"closed\"] {\n animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-content {\n position: fixed;\n z-index: 50;\n top: 50%;\n left: 50%;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transform: translate(-50%, -50%);\n transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-content[data-state=\"open\"] {\n animation: dialog-show 0.2s ease-out;\n}\n\n.sigma-ui-dialog-content[data-state=\"closed\"] {\n animation: dialog-hide 0.2s ease-in;\n}\n\n.sigma-ui-dialog-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n border-radius: var(--radius-sm);\n opacity: 0.7;\n transition-duration: 150ms;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-close:hover {\n opacity: 1;\n}\n\n.sigma-ui-dialog-close:focus {\n box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.sigma-ui-dialog-close[data-state=\"open\"] {\n background-color: hsl(var(--secondary));\n color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-dialog-close:disabled {\n pointer-events: none;\n}\n\n.sigma-ui-dialog-close__icon {\n width: 1rem;\n height: 1rem;\n}\n\n.sigma-ui-dialog-close__label {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border-width: 0;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n@keyframes
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay class=\"sigma-ui-dialog-overlay\" />\n <DialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-dialog-content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n\n <DialogClose class=\"sigma-ui-dialog-close\">\n <XIcon class=\"sigma-ui-dialog-close__icon\" />\n <span class=\"sigma-ui-dialog-close__label\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-overlay {\n position: fixed;\n z-index: 50;\n animation: sigma-ui-fade-in 0.2s ease-out;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"open\"] {\n animation: sigma-ui-fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-overlay[data-state=\"closed\"] {\n animation: sigma-ui-fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-content {\n position: fixed;\n z-index: 50;\n top: 50%;\n left: 50%;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transform: translate(-50%, -50%);\n transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-content[data-state=\"open\"] {\n animation: sigma-ui-dialog-show 0.2s ease-out;\n}\n\n.sigma-ui-dialog-content[data-state=\"closed\"] {\n animation: sigma-ui-dialog-hide 0.2s ease-in;\n}\n\n.sigma-ui-dialog-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n border-radius: var(--radius-sm);\n opacity: 0.7;\n transition-duration: 150ms;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-close:hover {\n opacity: 1;\n}\n\n.sigma-ui-dialog-close:focus {\n box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.sigma-ui-dialog-close[data-state=\"open\"] {\n background-color: hsl(var(--secondary));\n color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-dialog-close:disabled {\n pointer-events: none;\n}\n\n.sigma-ui-dialog-close__icon {\n width: 1rem;\n height: 1rem;\n}\n\n.sigma-ui-dialog-close__label {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border-width: 0;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n@keyframes sigma-ui-dialog-show {\n from {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes sigma-ui-dialog-hide {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.95);\n }\n}\n\n@media (width >= 640px) {\n .sigma-ui-dialog-content {\n border-radius: var(--radius-lg);\n }\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "DialogDescription.vue",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "DialogScrollContent.vue",
|
|
32
|
-
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"sigma-ui-dialog-scroll-overlay\"\n >\n <DialogContent\n class=\"sigma-ui-dialog-scroll-content\"\n :class=\"[$attrs.class]\"\n v-bind=\"forwarded\"\n @pointer-down-outside=\"(event) => {\n const originalEvent = event.detail.originalEvent;\n const target = originalEvent.target as HTMLElement;\n if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n event.preventDefault();\n }\n }\"\n >\n <slot />\n\n <DialogClose class=\"sigma-ui-dialog-scroll-close\">\n <XIcon class=\"sigma-ui-dialog-scroll-close__icon\" />\n <span class=\"sigma-ui-dialog-scroll-close__label\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogOverlay>\n </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-scroll-overlay {\n position: fixed;\n z-index: 50;\n display: grid;\n animation: fade-in 0.2s ease-out;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n overflow-y: auto;\n place-items: center;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"open\"] {\n animation: fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"closed\"] {\n animation: fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-scroll-content {\n position: relative;\n z-index: 50;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n margin: 2rem 0;\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-scroll-close {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n padding: 0.125rem;\n border-radius: var(--radius-md);\n transition-duration: 150ms;\n transition-property: background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-scroll-close:hover {\n background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-dialog-scroll-close__icon {\n width: 1rem;\n height: 1rem;\n}\n\n.sigma-ui-dialog-scroll-close__label {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border-width: 0;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n@media (width >= 640px) {\n .sigma-ui-dialog-scroll-content {\n border-radius: var(--radius-lg);\n }\n}\n\n@media (width >= 768px) {\n .sigma-ui-dialog-scroll-content {\n width: 100%;\n }\n}\n\n
|
|
32
|
+
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"sigma-ui-dialog-scroll-overlay\"\n >\n <DialogContent\n class=\"sigma-ui-dialog-scroll-content\"\n :class=\"[$attrs.class]\"\n v-bind=\"forwarded\"\n @pointer-down-outside=\"(event) => {\n const originalEvent = event.detail.originalEvent;\n const target = originalEvent.target as HTMLElement;\n if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n event.preventDefault();\n }\n }\"\n >\n <slot />\n\n <DialogClose class=\"sigma-ui-dialog-scroll-close\">\n <XIcon class=\"sigma-ui-dialog-scroll-close__icon\" />\n <span class=\"sigma-ui-dialog-scroll-close__label\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogOverlay>\n </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-dialog-scroll-overlay {\n position: fixed;\n z-index: 50;\n display: grid;\n animation: sigma-ui-fade-in 0.2s ease-out;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n overflow-y: auto;\n place-items: center;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"open\"] {\n animation: sigma-ui-fade-in 0.2s ease-out;\n}\n\n.sigma-ui-dialog-scroll-overlay[data-state=\"closed\"] {\n animation: sigma-ui-fade-out 0.2s ease-in;\n}\n\n.sigma-ui-dialog-scroll-content {\n position: relative;\n z-index: 50;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n margin: 2rem 0;\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transition-duration: 200ms;\n}\n\n.sigma-ui-dialog-scroll-close {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n padding: 0.125rem;\n border-radius: var(--radius-md);\n transition-duration: 150ms;\n transition-property: background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-dialog-scroll-close:hover {\n background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-dialog-scroll-close__icon {\n width: 1rem;\n height: 1rem;\n}\n\n.sigma-ui-dialog-scroll-close__label {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border-width: 0;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n\n@media (width >= 640px) {\n .sigma-ui-dialog-scroll-content {\n border-radius: var(--radius-lg);\n }\n}\n\n@media (width >= 768px) {\n .sigma-ui-dialog-scroll-content {\n width: 100%;\n }\n}\n\n</style>\n"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "DialogTitle.vue",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "DropdownMenuContent.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps>(),\n {\n sideOffset: 4,\n },\n);\nconst emits = defineEmits<DropdownMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-dropdown-menu-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"open\"] {\n animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"closed\"] {\n animation: fade-out 100ms ease-in forwards;\n}\n
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps>(),\n {\n sideOffset: 4,\n },\n);\nconst emits = defineEmits<DropdownMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-dropdown-menu-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"closed\"] {\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "DropdownMenuGroup.vue",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "DropdownMenuSubContent.vue",
|
|
52
|
-
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = withDefaults(\n defineProps<DropdownMenuSubContentProps>(),\n {\n sideOffset: 4,\n },\n);\nconst emits = defineEmits<DropdownMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-dropdown-menu-sub-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"open\"] {\n animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"closed\"] {\n animation: fade-out 100ms ease-in forwards;\n}\n
|
|
52
|
+
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = withDefaults(\n defineProps<DropdownMenuSubContentProps>(),\n {\n sideOffset: 4,\n },\n);\nconst emits = defineEmits<DropdownMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n class=\"sigma-ui-dropdown-menu-sub-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-content {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"closed\"] {\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n}\n</style>\n"
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
"name": "DropdownMenuSubTrigger.vue",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "HoverCardContent.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\">\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps>(),\n {\n sideOffset: 4,\n },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwardedProps\"\n class=\"sigma-ui-hover-card-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n\n<style>\n.sigma-ui-hover-card-content {\n z-index: 50;\n padding: 1rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n animation:
|
|
12
|
+
"content": "<script setup lang=\"ts\">\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps>(),\n {\n sideOffset: 4,\n },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwardedProps\"\n class=\"sigma-ui-hover-card-content\"\n :class=\"$attrs.class\"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n\n<style>\n.sigma-ui-hover-card-content {\n z-index: 50;\n padding: 1rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n outline: none;\n transform-origin: var(--reka-popper-transform-origin);\n}\n\n.sigma-ui-hover-card-content[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "HoverCardTrigger.vue",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Image.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from 'vue';\nimport { useForwardProps } from 'reka-ui';\nimport { ImageIcon, LoaderCircleIcon } from 'lucide-vue-next';\nimport { type ImageVariants, imageVariants } from '.';\n\ntype Emits = {\n load: [];\n error: [];\n};\n\nconst props = withDefaults(defineProps<{\n src?: string;\n alt?: string;\n glow?: boolean;\n\n shape?: ImageVariants['shape'];\n}>(), {\n alt: 'image',\n shape: 'rounded',\n});\n\nconst emit = defineEmits<Emits>();\n\ndefineSlots<{\n fallback: () => any;\n}>();\n\nconst forwardedProps = useForwardProps(props);\n\nconst isError = ref(false);\nconst isLoading = ref(true);\n\nwatch(() => props.src, (value) => {\n if (!value) {\n nextTick(() => {\n isError.value = true;\n isLoading.value = false;\n });\n } else {\n isError.value = false;\n isLoading.value = true;\n }\n}, { immediate: true });\n\nfunction onError() {\n emit('error');\n isError.value = true;\n}\n\nfunction onLoad() {\n emit('load');\n isError.value = false;\n isLoading.value = false;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n $attrs.class ?? '',\n imageVariants({ shape }),\n {\n 'sigma-ui-image--no-overflow': !glow,\n },\n ]\"\n class=\"sigma-ui-image__container\"\n >\n <div\n v-if=\"isError\"\n class=\"sigma-ui-image__error animate-fade-in\"\n >\n <slot name=\"fallback\">\n <div\n class=\"sigma-ui-image__fallback-container\"\n >\n <ImageIcon class=\"sigma-ui-image__fallback-icon\" />\n no photo\n </div>\n </slot>\n </div>\n <div\n v-else\n class=\"sigma-ui-image__loader\"\n >\n <div class=\"animate-fade-in\">\n <LoaderCircleIcon\n v-if=\"isLoading\"\n class=\"sigma-ui-image__spinner\"\n />\n </div>\n <img\n v-show=\"!isLoading\"\n v-if=\"glow && !isError && props.src\"\n class=\"sigma-ui-image__img-glow animate-fade-in\"\n v-bind=\"forwardedProps\"\n @error=\"onError\"\n @load=\"onLoad\"\n >\n\n <img\n v-show=\"!isLoading\"\n v-if=\"!isError && props.src\"\n class=\"sigma-ui-image__img animate-fade-in\"\n v-bind=\"forwardedProps\"\n @error=\"onError\"\n @load=\"onLoad\"\n >\n </div>\n </div>\n</template>\n\n<style>\n.sigma-ui-image__container {\n position: relative;\n}\n\n.sigma-ui-image {\n display: flex;\n width: 100%;\n height: 100%;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n background-color: hsl(var(--secondary) / 90%);\n color: hsl(var(--foreground));\n font-weight: normal;\n user-select: none;\n}\n\n.dark .sigma-ui-image {\n background-color: hsl(var(--secondary) / 30%);\n}\n\n.sigma-ui-image--no-overflow {\n overflow: hidden;\n}\n\n.sigma-ui-image__error,\n.sigma-ui-image__loader {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.sigma-ui-image__fallback-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: hsl(var(--foreground) / 50%);\n gap: 0.25rem;\n}\n\n.sigma-ui-image__fallback-icon {\n width: 50%;\n max-width: 50px;\n height: 50%;\n max-height: 50px;\n}\n\n.sigma-ui-image__spinner {\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n}\n\n.sigma-ui-image__img-glow {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 110%;\n height: 110%;\n filter: blur(16px) brightness(200%) saturate(200%);\n object-fit: cover;\n}\n\n.sigma-ui-image__img {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (prefers-color-scheme: dark) {\n .sigma-ui-image__img-glow {\n filter: blur(16px) brightness(100%) saturate(200%);\n }\n}\n\n.sigma-ui-image-rounded,\n.sigma-ui-image-rounded .sigma-ui-image__img,\n.sigma-ui-image-rounded .sigma-ui-image__img-glow {\n border-radius: var(--radius);\n}\n\n.sigma-ui-image-circle,\n.sigma-ui-image-circle .sigma-ui-image__img,\n.sigma-ui-image-circle .sigma-ui-image__img-glow {\n border-radius: 50%;\n}\n</style>\n"
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from 'vue';\nimport { useForwardProps } from 'reka-ui';\nimport { ImageIcon, LoaderCircleIcon } from 'lucide-vue-next';\nimport { type ImageVariants, imageVariants } from '.';\n\ntype Emits = {\n load: [];\n error: [];\n};\n\nconst props = withDefaults(defineProps<{\n src?: string;\n alt?: string;\n glow?: boolean;\n\n shape?: ImageVariants['shape'];\n}>(), {\n alt: 'image',\n shape: 'rounded',\n});\n\nconst emit = defineEmits<Emits>();\n\ndefineSlots<{\n fallback: () => any;\n}>();\n\nconst forwardedProps = useForwardProps(props);\n\nconst isError = ref(false);\nconst isLoading = ref(true);\n\nwatch(() => props.src, (value) => {\n if (!value) {\n nextTick(() => {\n isError.value = true;\n isLoading.value = false;\n });\n } else {\n isError.value = false;\n isLoading.value = true;\n }\n}, { immediate: true });\n\nfunction onError() {\n emit('error');\n isError.value = true;\n}\n\nfunction onLoad() {\n emit('load');\n isError.value = false;\n isLoading.value = false;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n $attrs.class ?? '',\n imageVariants({ shape }),\n {\n 'sigma-ui-image--no-overflow': !glow,\n },\n ]\"\n class=\"sigma-ui-image__container\"\n >\n <div\n v-if=\"isError\"\n class=\"sigma-ui-image__error animate-fade-in\"\n >\n <slot name=\"fallback\">\n <div\n class=\"sigma-ui-image__fallback-container\"\n >\n <ImageIcon class=\"sigma-ui-image__fallback-icon\" />\n no photo\n </div>\n </slot>\n </div>\n <div\n v-else\n class=\"sigma-ui-image__loader\"\n >\n <div class=\"animate-fade-in\">\n <LoaderCircleIcon\n v-if=\"isLoading\"\n class=\"sigma-ui-image__spinner\"\n />\n </div>\n <img\n v-show=\"!isLoading\"\n v-if=\"glow && !isError && props.src\"\n class=\"sigma-ui-image__img-glow animate-fade-in\"\n v-bind=\"forwardedProps\"\n @error=\"onError\"\n @load=\"onLoad\"\n >\n\n <img\n v-show=\"!isLoading\"\n v-if=\"!isError && props.src\"\n class=\"sigma-ui-image__img animate-fade-in\"\n v-bind=\"forwardedProps\"\n @error=\"onError\"\n @load=\"onLoad\"\n >\n </div>\n </div>\n</template>\n\n<style>\n.sigma-ui-image__container {\n position: relative;\n}\n\n.sigma-ui-image {\n display: flex;\n width: 100%;\n height: 100%;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n background-color: hsl(var(--secondary) / 90%);\n color: hsl(var(--foreground));\n font-weight: normal;\n user-select: none;\n}\n\n.dark .sigma-ui-image {\n background-color: hsl(var(--secondary) / 30%);\n}\n\n.sigma-ui-image--no-overflow {\n overflow: hidden;\n}\n\n.sigma-ui-image__error,\n.sigma-ui-image__loader {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.sigma-ui-image__fallback-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: hsl(var(--foreground) / 50%);\n gap: 0.25rem;\n}\n\n.sigma-ui-image__fallback-icon {\n width: 50%;\n max-width: 50px;\n height: 50%;\n max-height: 50px;\n}\n\n.sigma-ui-image__spinner {\n width: 20px;\n height: 20px;\n animation: sigma-ui-spin 1s linear infinite;\n}\n\n.sigma-ui-image__img-glow {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 110%;\n height: 110%;\n filter: blur(16px) brightness(200%) saturate(200%);\n object-fit: cover;\n}\n\n.sigma-ui-image__img {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (prefers-color-scheme: dark) {\n .sigma-ui-image__img-glow {\n filter: blur(16px) brightness(100%) saturate(200%);\n }\n}\n\n.sigma-ui-image-rounded,\n.sigma-ui-image-rounded .sigma-ui-image__img,\n.sigma-ui-image-rounded .sigma-ui-image__img-glow {\n border-radius: var(--radius);\n}\n\n.sigma-ui-image-circle,\n.sigma-ui-image-circle .sigma-ui-image__img,\n.sigma-ui-image-circle .sigma-ui-image__img-glow {\n border-radius: 50%;\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "index.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "MenubarContent.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n defineProps<MenubarContentProps>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwardedProps\"\n class=\"sigma-ui-menubar-content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-content {\n z-index: 50;\n overflow: hidden;\n min-width: 12rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n opacity: 0;\n pointer-events: none;\n transform: scale(0.96) translateY(-2px);\n transform-origin: var(--reka-menubar-content-transform-origin);\n transition: transform 150ms ease-out, opacity 150ms ease-out;\n}\n\n.sigma-ui-menubar-content[data-state=\"open\"] {\n animation:
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n defineProps<MenubarContentProps>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwardedProps\"\n class=\"sigma-ui-menubar-content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-content {\n z-index: 50;\n overflow: hidden;\n min-width: 12rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n opacity: 0;\n pointer-events: none;\n transform: scale(0.96) translateY(-2px);\n transform-origin: var(--reka-menubar-content-transform-origin);\n transition: transform 150ms ease-out, opacity 150ms ease-out;\n}\n\n.sigma-ui-menubar-content[data-state=\"open\"] {\n animation: sigma-ui-menubar-show 150ms ease-out;\n opacity: 1;\n pointer-events: auto;\n transform: scale(1) translateY(0);\n}\n\n.sigma-ui-menubar-content[data-state=\"closed\"] {\n opacity: 0;\n pointer-events: none;\n transform: scale(0.96) translateY(-2px);\n transition: transform 100ms ease-in, opacity 100ms ease-in;\n}\n\n@keyframes sigma-ui-menubar-show {\n 0% {\n opacity: 0;\n transform: scale(0.96) translateY(-2px);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "MenubarGroup.vue",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
"name": "MenubarSubContent.vue",
|
|
56
|
-
"content": "<script setup lang=\"ts\">\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarSubContentProps>();\nconst emits = defineEmits<MenubarSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-menubar-subcontent\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-subcontent {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n animation:
|
|
56
|
+
"content": "<script setup lang=\"ts\">\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarSubContentProps>();\nconst emits = defineEmits<MenubarSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-menubar-subcontent\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-subcontent {\n z-index: 50;\n overflow: hidden;\n min-width: 8rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n backdrop-filter: blur(var(--backdrop-filter-blur));\n background-color: hsl(var(--popover));\n box-shadow: var(--shadow-md);\n color: hsl(var(--popover-foreground));\n transform-origin: var(--reka-menubar-content-transform-origin);\n}\n\n.sigma-ui-menubar-subcontent[data-state=\"open\"] {\n animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n</style>\n"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"name": "MenubarSubTrigger.vue",
|