sigma-ui 1.1.2 → 1.3.0

package/README.md

@@ -27,7 +27,7 @@ It takes away the burden of recreating the same components from scratch for ever
 - **Supported style systems**: CSS, Tailwind 4.
 - **Is open-source**: Yes, MIT licensed.
 - **Accessibility**: Supported.
-- **Based upon**: Radix Vue primitives.
+- **Based upon**: Reka (formerly Radix-Vue) primitives.
 - **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.
 
 ## Usage

package/__generated/registry-schemes/colors/blue.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/frosted-glass.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/grayscale.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/green.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/orange.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/red.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/rose.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/colors/yellow.json

@@ -48,7 +48,7 @@
       "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}"
     },
     "css": {
-      "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}"
+      "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}"
     }
   }
 }

package/__generated/registry-schemes/index.json

@@ -373,6 +373,16 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "faceted-filter",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "faceted-filter/FacetedFilter.vue",
+      "faceted-filter/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "form",
     "dependencies": [

package/__generated/registry-schemes/style-system/css/accordion.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "AccordionContent.vue",
-      "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\n@keyframes accordion-up {\n  from {\n    height: var(--reka-accordion-content-height);\n  }\n\n  to {\n    height: 0;\n  }\n}\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n\n  to {\n    height: var(--reka-accordion-content-height);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "AccordionItem.vue",

package/__generated/registry-schemes/style-system/css/alert-dialog.json

@@ -17,7 +17,7 @@
     },
     {
       "name": "AlertDialogContent.vue",
-      "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: content-show 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content[data-state='closed'] {\n  animation: content-hide 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fade-in {\n  from { opacity: 0; }\n\n  to { opacity: 1; }\n}\n\n@keyframes fade-out {\n  from { opacity: 1; }\n\n  to { opacity: 0; }\n}\n\n@keyframes content-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 content-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"
+      "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"
     },
     {
       "name": "AlertDialogDescription.vue",

package/__generated/registry-schemes/style-system/css/button.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Button.vue",
-      "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\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/collapsible.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "CollapsibleContent.vue",
-      "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"
+      "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"
     },
     {
       "name": "CollapsibleTrigger.vue",

package/__generated/registry-schemes/style-system/css/combobox.json

@@ -31,7 +31,7 @@
     },
     {
       "name": "ComboboxList.vue",
-      "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"
+      "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"
     },
     {
       "name": "ComboboxSeparator.vue",

package/__generated/registry-schemes/style-system/css/context-menu.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "ContextMenuContent.vue",
-      "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\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -53,7 +53,7 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "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\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "ContextMenuSubTrigger.vue",

package/__generated/registry-schemes/style-system/css/dialog.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "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 fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes 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 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"
+      "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"
     },
     {
       "name": "DialogDescription.vue",
@@ -29,7 +29,7 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "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@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "DialogTitle.vue",

package/__generated/registry-schemes/style-system/css/dropdown-menu.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "DropdownMenuContent.vue",
-      "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\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -49,7 +49,7 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "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\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",

package/__generated/registry-schemes/style-system/css/faceted-filter.json

@@ -0,0 +1,16 @@
+{
+  "name": "faceted-filter",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "FacetedFilter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { CheckIcon, CirclePlusIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@ui/registry/css/ui/popover';\nimport { Separator } from '@ui/registry/css/ui/separator';\nimport {\n  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator,\n} from '@ui/registry/css/ui/command';\n\nconst props = withDefaults(defineProps<{\n  title: string;\n  options: string[];\n  modelValue: string[];\n  maxBadges?: number;\n  allowCreate?: boolean;\n  minWidth?: number;\n}>(), {\n  maxBadges: 2,\n  allowCreate: false,\n  minWidth: 200,\n});\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]];\n  'create': [value: string];\n}>();\n\nconst searchQuery = ref('');\nconst commandKey = ref(0);\n\nconst trimmedSearchQuery = computed(() => searchQuery.value.trim());\nconst selectedValues = computed(() => new Set(props.modelValue));\nconst filteredOptions = computed(() => {\n  const normalizedSearch = searchQuery.value.trim().toLowerCase();\n  if (!normalizedSearch) return props.options;\n  return props.options.filter(option => option.toLowerCase().includes(normalizedSearch));\n});\n\nconst canCreate = computed(() => {\n  if (!props.allowCreate) return false;\n  const value = trimmedSearchQuery.value;\n  if (value.length === 0) return false;\n  const normalizedValue = value.toLowerCase();\n  return !props.options.some(option => option.toLowerCase() === normalizedValue);\n});\n\nconst selectedBadges = computed(() => {\n  return props.options.filter(option => selectedValues.value.has(option)).slice(0, props.maxBadges);\n});\n\nconst contentStyle = computed(() => props.minWidth ? ({ minWidth: `${props.minWidth}px` }) : undefined);\n\nfunction toggleValue(value: string) {\n  const next = new Set(props.modelValue);\n  if (next.has(value)) next.delete(value);\n  else next.add(value);\n  emit('update:modelValue', Array.from(next));\n}\n\nfunction createFromSearchQuery() {\n  const value = trimmedSearchQuery.value;\n  if (!value) return;\n  emit('create', value);\n  clearSearch();\n  commandKey.value += 1;\n}\n\nfunction clearSearch() {\n  searchQuery.value = '';\n}\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        size=\"xs\"\n        class=\"sigma-ui-faceted-filter__trigger\"\n      >\n        <CirclePlusIcon class=\"sigma-ui-faceted-filter__trigger-icon\" />\n        {{ props.title }}\n        <template v-if=\"selectedValues.size > 0\">\n          <Separator\n            orientation=\"vertical\"\n            class=\"sigma-ui-faceted-filter__separator\"\n          />\n          <span class=\"sigma-ui-faceted-filter__count\">\n            {{ selectedValues.size }}\n          </span>\n          <div class=\"sigma-ui-faceted-filter__badges\">\n            <span\n              v-for=\"badge in selectedBadges\"\n              :key=\"badge\"\n              class=\"sigma-ui-faceted-filter__badge\"\n            >\n              {{ badge }}\n            </span>\n            <span\n              v-if=\"selectedValues.size > props.maxBadges\"\n              class=\"sigma-ui-faceted-filter__badge\"\n            >\n              +{{ selectedValues.size - props.maxBadges }}\n            </span>\n          </div>\n        </template>\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverContent\n      class=\"sigma-ui-faceted-filter__content\"\n      align=\"start\"\n      :style=\"contentStyle\"\n    >\n      <Command :key=\"commandKey\">\n        <CommandInput\n          v-model=\"searchQuery\"\n          :placeholder=\"props.title\"\n          @keydown.esc=\"clearSearch\"\n        />\n        <CommandList>\n          <CommandEmpty v-if=\"filteredOptions.length === 0 && !canCreate\">\n            No results found.\n          </CommandEmpty>\n          <div\n            v-if=\"canCreate\"\n            class=\"sigma-ui-faceted-filter__empty-create\"\n          >\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"sigma-ui-faceted-filter__empty-create-button\"\n              @click=\"createFromSearchQuery\"\n            >\n              <CirclePlusIcon class=\"sigma-ui-faceted-filter__empty-create-icon\" />\n              Add {{ trimmedSearchQuery }}\n            </Button>\n          </div>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"option in filteredOptions\"\n              :key=\"option\"\n              :value=\"option\"\n              @select=\"() => toggleValue(option)\"\n            >\n              <div\n                class=\"sigma-ui-faceted-filter__checkbox\"\n                :data-selected=\"selectedValues.has(option) || undefined\"\n              >\n                <CheckIcon class=\"sigma-ui-faceted-filter__check\" />\n              </div>\n              <span class=\"sigma-ui-faceted-filter__option-text\">{{ option }}</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator v-if=\"$slots.footer\" />\n          <div\n            v-if=\"$slots.footer\"\n            class=\"sigma-ui-faceted-filter__footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n\n<style>\n.sigma-ui-faceted-filter__trigger {\n  gap: 0.5rem;\n  border-style: dashed;\n}\n\n.sigma-ui-faceted-filter__trigger-icon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n.sigma-ui-faceted-filter__separator {\n  height: 0.875rem;\n  margin: 0 0.375rem;\n}\n\n.sigma-ui-faceted-filter__count {\n  display: inline-flex;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.375rem;\n  border-radius: 0.375rem;\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n  font-size: 0.6875rem;\n}\n\n.sigma-ui-faceted-filter__badges {\n  display: none;\n  gap: 0.375rem;\n}\n\n.sigma-ui-faceted-filter__badge {\n  display: inline-flex;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.375rem;\n  border-radius: 0.375rem;\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n  font-size: 0.6875rem;\n}\n\n.sigma-ui-faceted-filter__content {\n  width: 20rem;\n  padding: 0;\n}\n\n.sigma-ui-faceted-filter__empty-create {\n  padding: 0.625rem;\n}\n\n.sigma-ui-faceted-filter__empty-create-button {\n  width: 100%;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n\n.sigma-ui-faceted-filter__empty-create-icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n.sigma-ui-faceted-filter__checkbox {\n  display: flex;\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.25rem;\n  margin-right: 0.625rem;\n  opacity: 0.6;\n}\n\n.sigma-ui-faceted-filter__checkbox:not([data-selected]) .sigma-ui-faceted-filter__check {\n  visibility: hidden;\n}\n\n.sigma-ui-faceted-filter__checkbox[data-selected] {\n  border-color: hsl(var(--primary) / 60%);\n  background: hsl(var(--primary) / 15%);\n  opacity: 1;\n}\n\n.sigma-ui-faceted-filter__check {\n  width: 0.875rem;\n  height: 0.875rem;\n  color: hsl(var(--primary));\n}\n\n.sigma-ui-faceted-filter__option-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: text;\n  white-space: nowrap;\n}\n\n.sigma-ui-faceted-filter__footer {\n  padding: 0.625rem 0.625rem 0.75rem;\n}\n\n@media (width >= 1024px) {\n  .sigma-ui-faceted-filter__badges {\n    display: flex;\n  }\n\n  .sigma-ui-faceted-filter__count {\n    display: none;\n  }\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as FacetedFilter } from './FacetedFilter.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/css/hover-card.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "HoverCardContent.vue",
-      "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: fadeOut 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: fade-in 200ms ease-out;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+      "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"
     },
     {
       "name": "HoverCardTrigger.vue",

package/__generated/registry-schemes/style-system/css/image.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Image.vue",
-      "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"
+      "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"
     },
     {
       "name": "index.ts",