sigma-ui 1.1.2 → 1.3.0

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

@@ -13,7 +13,7 @@
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-menubar-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 12rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  opacity: 0;\n  pointer-events: none;\n  transform: scale(0.96) translateY(-2px);\n  transform-origin: var(--reka-menubar-content-transform-origin);\n  transition: transform 150ms ease-out, opacity 150ms ease-out;\n}\n\n.sigma-ui-menubar-content[data-state=\"open\"] {\n  animation: content-show 150ms ease-out;\n  opacity: 1;\n  pointer-events: auto;\n  transform: scale(1) translateY(0);\n}\n\n.sigma-ui-menubar-content[data-state=\"closed\"] {\n  opacity: 0;\n  pointer-events: none;\n  transform: scale(0.96) translateY(-2px);\n  transition: transform 100ms ease-in, opacity 100ms ease-in;\n}\n\n@keyframes content-show {\n  0% {\n    opacity: 0;\n    transform: scale(0.96) translateY(-2px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-menubar-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 12rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  opacity: 0;\n  pointer-events: none;\n  transform: scale(0.96) translateY(-2px);\n  transform-origin: var(--reka-menubar-content-transform-origin);\n  transition: transform 150ms ease-out, opacity 150ms ease-out;\n}\n\n.sigma-ui-menubar-content[data-state=\"open\"] {\n  animation: sigma-ui-menubar-show 150ms ease-out;\n  opacity: 1;\n  pointer-events: auto;\n  transform: scale(1) translateY(0);\n}\n\n.sigma-ui-menubar-content[data-state=\"closed\"] {\n  opacity: 0;\n  pointer-events: none;\n  transform: scale(0.96) translateY(-2px);\n  transition: transform 100ms ease-in, opacity 100ms ease-in;\n}\n\n@keyframes sigma-ui-menubar-show {\n  0% {\n    opacity: 0;\n    transform: scale(0.96) translateY(-2px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n</style>\n"
     },
     {
       "name": "MenubarGroup.vue",
@@ -53,7 +53,7 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarSubContentProps>();\nconst emits = defineEmits<MenubarSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-menubar-subcontent\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-subcontent {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: fadeOut 100ms ease-in forwards;\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-menubar-content-transform-origin);\n}\n\n.sigma-ui-menubar-subcontent[data-state=\"open\"] {\n  animation: 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  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarSubContentProps>();\nconst emits = defineEmits<MenubarSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-menubar-subcontent\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n\n<style>\n.sigma-ui-menubar-subcontent {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: sigma-ui-fade-out-scale 100ms ease-in forwards;\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-menubar-content-transform-origin);\n}\n\n.sigma-ui-menubar-subcontent[data-state=\"open\"] {\n  animation: sigma-ui-fade-in-scale 200ms ease-out;\n}\n</style>\n"
     },
     {
       "name": "MenubarSubTrigger.vue",

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

@@ -9,11 +9,11 @@
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuContentProps>();\nconst emits = defineEmits<NavigationMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu-content\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-content {\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"open\"] {\n  animation: fade-in 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"closed\"] {\n  animation: fade-out 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"] {\n  animation: slide-in-from-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"] {\n  animation: slide-in-from-left 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"] {\n  animation: slide-out-to-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"] {\n  animation: slide-out-to-left 200ms ease-in-out;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n  }\n\n  to {\n    filter: blur(0);\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 slide-in-from-right {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-right {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n}\n\n@keyframes slide-out-to-left {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuContentProps>();\nconst emits = defineEmits<NavigationMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu-content\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-content {\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"open\"] {\n  animation: sigma-ui-nav-fade-in 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"closed\"] {\n  animation: sigma-ui-nav-fade-out 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"] {\n  animation: sigma-ui-nav-slide-in-from-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"] {\n  animation: sigma-ui-nav-slide-in-from-left 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"] {\n  animation: sigma-ui-nav-slide-out-to-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"] {\n  animation: sigma-ui-nav-slide-out-to-left 200ms ease-in-out;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes sigma-ui-nav-fade-in {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n  }\n}\n\n@keyframes sigma-ui-nav-fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes sigma-ui-nav-slide-in-from-right {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-in-from-left {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-out-to-right {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-out-to-left {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n}\n</style>\n"
     },
     {
       "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<NavigationMenuIndicatorProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-indicator\"\n  >\n    <div class=\"sigma-ui-navigation-menu-indicator__pointer\" />\n  </NavigationMenuIndicator>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-indicator {\n  position: relative;\n  z-index: 1;\n  top: 100%;\n  display: flex;\n  overflow: hidden;\n  height: 0.375rem;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"visible\"] {\n  animation: navigation-menu-indicator-in 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"hidden\"] {\n  animation: navigation-menu-indicator-out 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator__pointer {\n  position: relative;\n  top: 60%;\n  width: 0.5rem;\n  height: 0.5rem;\n  background-color: hsl(var(--border));\n  border-top-left-radius: 0.125rem;\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);\n  transform: rotate(45deg);\n}\n\n@keyframes navigation-menu-indicator-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes navigation-menu-indicator-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<NavigationMenuIndicatorProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-indicator\"\n  >\n    <div class=\"sigma-ui-navigation-menu-indicator__pointer\" />\n  </NavigationMenuIndicator>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-indicator {\n  position: relative;\n  z-index: 1;\n  top: 100%;\n  display: flex;\n  overflow: hidden;\n  height: 0.375rem;\n  align-items: flex-end;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"visible\"] {\n  animation: sigma-ui-nav-indicator-in 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"hidden\"] {\n  animation: sigma-ui-nav-indicator-out 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator__pointer {\n  position: relative;\n  top: 60%;\n  width: 0.5rem;\n  height: 0.5rem;\n  background-color: hsl(var(--border));\n  border-top-left-radius: 0.125rem;\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);\n  transform: rotate(45deg);\n}\n\n@keyframes sigma-ui-nav-indicator-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes sigma-ui-nav-indicator-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
     },
     {
       "name": "NavigationMenuItem.vue",
@@ -33,7 +33,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuViewportProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div class=\"sigma-ui-navigation-menu-viewport-wrapper\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-navigation-menu-viewport\"\n      :class=\"$attrs.class\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-viewport-wrapper {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: flex;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-viewport {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: var(--reka-navigation-menu-viewport-height);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  margin-top: 0.375rem;\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: top center;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-viewport {\n    width: var(--reka-navigation-menu-viewport-width);\n  }\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"open\"] {\n  animation: navigation-menu-viewport-in 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"closed\"] {\n  animation: navigation-menu-viewport-out 0.2s ease;\n}\n\n@keyframes navigation-menu-viewport-in {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes navigation-menu-viewport-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  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuViewportProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div class=\"sigma-ui-navigation-menu-viewport-wrapper\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-navigation-menu-viewport\"\n      :class=\"$attrs.class\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-viewport-wrapper {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: flex;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-viewport {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: var(--reka-navigation-menu-viewport-height);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  margin-top: 0.375rem;\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: top center;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-viewport {\n    width: var(--reka-navigation-menu-viewport-width);\n  }\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"open\"] {\n  animation: sigma-ui-nav-viewport-in 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"closed\"] {\n  animation: sigma-ui-nav-viewport-out 0.2s ease;\n}\n\n@keyframes sigma-ui-nav-viewport-in {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes sigma-ui-nav-viewport-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"
     },
     {
       "name": "index.ts",

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

@@ -9,7 +9,7 @@
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<PopoverContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-popover-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n\n<style>\n.sigma-ui-popover-content {\n  z-index: 50;\n  width: 18rem;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  outline: none;\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slide-from-left 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"closed\"] {\n  animation: popover-out 150ms ease-in;\n}\n\n@keyframes popover-out {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scaleY(0.98);\n  }\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-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-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-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</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<PopoverContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-popover-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n\n<style>\n.sigma-ui-popover-content {\n  z-index: 50;\n  width: 18rem;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  outline: none;\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: sigma-ui-popover-slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: sigma-ui-popover-slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: sigma-ui-popover-slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: sigma-ui-popover-slide-from-left 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"closed\"] {\n  animation: sigma-ui-popover-out 150ms ease-in;\n}\n\n@keyframes sigma-ui-popover-out {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  to {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scaleY(0.98);\n  }\n}\n\n@keyframes sigma-ui-popover-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-popover-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-popover-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-popover-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</style>\n"
     },
     {
       "name": "PopoverTrigger.vue",

package/__generated/registry-schemes/style-system/css/radio-group.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<RadioGroupItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-radio-group-item\"\n  >\n    <RadioGroupIndicator\n      class=\"sigma-ui-radio-group-item__indicator\"\n    >\n      <CircleIcon class=\"sigma-ui-radio-group-item__icon\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n\n<style>\n.sigma-ui-radio-group-item {\n  width: 1rem;\n  height: 1rem;\n  border: 1px solid hsl(var(--primary));\n  border-radius: var(--radius-full);\n  aspect-ratio: 1;\n  background-color: transparent;\n  color: hsl(var(--primary));\n  transition: all 150ms ease-out;\n}\n\n.sigma-ui-radio-group-item:focus {\n  outline: none;\n}\n\n.sigma-ui-radio-group-item:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--background)),\n              0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-radio-group-item:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-radio-group-item__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-radio-group-item__icon {\n  width: 0.625rem;\n  height: 0.625rem;\n  color: currentcolor;\n  fill: currentcolor;\n}\n\n.sigma-ui-radio-group-item[data-state=\"checked\"] .sigma-ui-radio-group-item__icon {\n  animation: radio-check 150ms ease-out;\n}\n\n.sigma-ui-radio-group-item[data-state=\"unchecked\"] .sigma-ui-radio-group-item__icon {\n  animation: radio-uncheck 150ms ease-in;\n}\n\n@keyframes radio-check {\n  from {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes radio-uncheck {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<RadioGroupItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-radio-group-item\"\n  >\n    <RadioGroupIndicator\n      class=\"sigma-ui-radio-group-item__indicator\"\n    >\n      <CircleIcon class=\"sigma-ui-radio-group-item__icon\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n\n<style>\n.sigma-ui-radio-group-item {\n  width: 1rem;\n  height: 1rem;\n  border: 1px solid hsl(var(--primary));\n  border-radius: var(--radius-full);\n  aspect-ratio: 1;\n  background-color: transparent;\n  color: hsl(var(--primary));\n  transition: all 150ms ease-out;\n}\n\n.sigma-ui-radio-group-item:focus {\n  outline: none;\n}\n\n.sigma-ui-radio-group-item:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--background)),\n              0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-radio-group-item:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-radio-group-item__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-radio-group-item__icon {\n  width: 0.625rem;\n  height: 0.625rem;\n  color: currentcolor;\n  fill: currentcolor;\n}\n\n.sigma-ui-radio-group-item[data-state=\"checked\"] .sigma-ui-radio-group-item__icon {\n  animation: sigma-ui-radio-check 150ms ease-out;\n}\n\n.sigma-ui-radio-group-item[data-state=\"unchecked\"] .sigma-ui-radio-group-item__icon {\n  animation: sigma-ui-radio-uncheck 150ms ease-in;\n}\n\n@keyframes sigma-ui-radio-check {\n  from {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes sigma-ui-radio-uncheck {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    filter: blur(4px);\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -9,7 +9,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<SelectContentProps>(),\n  {\n    position: 'popper',\n  },\n);\nconst emits = defineEmits<SelectContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-select-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport\n        class=\"sigma-ui-select-content__viewport\"\n        :class=\"{ 'sigma-ui-select-content__viewport--popper': position === 'popper' }\"\n      >\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n\n<style>\n.sigma-ui-select-content {\n  position: relative;\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  max-height: 24rem;\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: 0 2px 10px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slide-from-left 150ms ease-out;\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-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-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-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.sigma-ui-select-content__viewport {\n  padding: 0.25rem;\n}\n\n.sigma-ui-select-content__viewport--popper {\n  width: 100%;\n  min-width: var(--reka-select-trigger-width);\n  height: var(--reka-select-trigger-height);\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<SelectContentProps>(),\n  {\n    position: 'popper',\n  },\n);\nconst emits = defineEmits<SelectContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-select-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport\n        class=\"sigma-ui-select-content__viewport\"\n        :class=\"{ 'sigma-ui-select-content__viewport--popper': position === 'popper' }\"\n      >\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n\n<style>\n.sigma-ui-select-content {\n  position: relative;\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  max-height: 24rem;\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: 0 2px 10px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: sigma-ui-select-slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: sigma-ui-select-slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: sigma-ui-select-slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: sigma-ui-select-slide-from-left 150ms ease-out;\n}\n\n@keyframes sigma-ui-select-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-select-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-select-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-select-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.sigma-ui-select-content__viewport {\n  padding: 0.25rem;\n}\n\n.sigma-ui-select-content__viewport--popper {\n  width: 100%;\n  min-width: var(--reka-select-trigger-width);\n  height: var(--reka-select-trigger-height);\n}\n</style>\n"
     },
     {
       "name": "SelectGroup.vue",

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

@@ -13,7 +13,7 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\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';\nimport { type SheetVariants, sheetVariants } from '.';\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: SheetVariants['side'];\n}\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<SheetContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, side: undefined }));\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-sheet-overlay\" />\n    <DialogContent\n      :class=\"[sheetVariants({ side }), $attrs.class]\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-sheet-close\">\n        <XIcon class=\"sigma-ui-sheet-close__icon\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-sheet-overlay {\n  position: fixed;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"open\"] {\n  animation: overlay-show 150ms ease-out;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"closed\"] {\n  animation: overlay-hide 150ms ease-in forwards;\n}\n\n.sigma-ui-sheet-content__base {\n  position: fixed;\n  z-index: 50;\n  padding: 1.5rem;\n  background-color: hsl(var(--background));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  transition: all 0.3s ease-in-out;\n}\n\n.sigma-ui-sheet-content__base[data-state=\"open\"] {\n  animation-duration: 500ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content__base[data-state=\"closed\"] {\n  animation-duration: 300ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content--top {\n  top: 0;\n  border-bottom: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"closed\"] {\n  animation-name: slide-out-to-top;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"open\"] {\n  animation-name: slide-in-from-top;\n}\n\n.sigma-ui-sheet-content--bottom {\n  bottom: 0;\n  border-top: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"closed\"] {\n  animation-name: slide-out-to-bottom;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"open\"] {\n  animation-name: slide-in-from-bottom;\n}\n\n.sigma-ui-sheet-content--left {\n  left: 0;\n  width: 75%;\n  height: 100%;\n  border-right: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"closed\"] {\n  animation-name: slide-out-to-left;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"open\"] {\n  animation-name: slide-in-from-left;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--left {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-content--right {\n  right: 0;\n  width: 75%;\n  height: 100%;\n  border-left: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"closed\"] {\n  animation-name: slide-out-to-right;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"open\"] {\n  animation-name: slide-in-from-right;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--right {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.sigma-ui-sheet-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-sheet-close:focus {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-sheet-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-sheet-close[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-sheet-close__icon {\n  width: 1rem;\n  height: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n\n@keyframes overlay-show {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlay-hide {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-top {\n  from {\n    transform: translateY(-100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slide-out-to-top {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slide-in-from-bottom {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slide-out-to-bottom {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-left {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slide-in-from-right {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-right {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(100%);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\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';\nimport { type SheetVariants, sheetVariants } from '.';\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: SheetVariants['side'];\n}\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<SheetContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, side: undefined }));\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay class=\"sigma-ui-sheet-overlay\" />\n    <DialogContent\n      :class=\"[sheetVariants({ side }), $attrs.class]\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose class=\"sigma-ui-sheet-close\">\n        <XIcon class=\"sigma-ui-sheet-close__icon\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<style>\n.sigma-ui-sheet-overlay {\n  position: fixed;\n  z-index: 50;\n  background-color: rgb(0 0 0 / 80%);\n  inset: 0;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"open\"] {\n  animation: sigma-ui-fade-in 150ms ease-out;\n}\n\n.sigma-ui-sheet-overlay[data-state=\"closed\"] {\n  animation: sigma-ui-fade-out 150ms ease-in forwards;\n}\n\n.sigma-ui-sheet-content__base {\n  position: fixed;\n  z-index: 50;\n  padding: 1.5rem;\n  background-color: hsl(var(--background));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  transition: all 0.3s ease-in-out;\n}\n\n.sigma-ui-sheet-content__base[data-state=\"open\"] {\n  animation-duration: 500ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content__base[data-state=\"closed\"] {\n  animation-duration: 300ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-sheet-content--top {\n  top: 0;\n  border-bottom: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"closed\"] {\n  animation-name: sigma-ui-slide-out-to-top;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"open\"] {\n  animation-name: sigma-ui-slide-in-from-top;\n}\n\n.sigma-ui-sheet-content--bottom {\n  bottom: 0;\n  border-top: 1px solid hsl(var(--border));\n  inset-inline: 0;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"closed\"] {\n  animation-name: sigma-ui-slide-out-to-bottom;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"open\"] {\n  animation-name: sigma-ui-slide-in-from-bottom;\n}\n\n.sigma-ui-sheet-content--left {\n  left: 0;\n  width: 75%;\n  height: 100%;\n  border-right: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"closed\"] {\n  animation-name: sigma-ui-slide-out-to-left;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"open\"] {\n  animation-name: sigma-ui-slide-in-from-left;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--left {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-content--right {\n  right: 0;\n  width: 75%;\n  height: 100%;\n  border-left: 1px solid hsl(var(--border));\n  inset-block: 0;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"closed\"] {\n  animation-name: sigma-ui-slide-out-to-right;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"open\"] {\n  animation-name: sigma-ui-slide-in-from-right;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-content--right {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  border-radius: var(--radius-sm);\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.sigma-ui-sheet-close:hover {\n  opacity: 1;\n}\n\n.sigma-ui-sheet-close:focus {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-sheet-close:disabled {\n  pointer-events: none;\n}\n\n.sigma-ui-sheet-close[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-sheet-close__icon {\n  width: 1rem;\n  height: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n\n@keyframes sigma-ui-slide-in-from-top {\n  from {\n    transform: translateY(-100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sigma-ui-slide-out-to-top {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes sigma-ui-slide-in-from-bottom {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sigma-ui-slide-out-to-bottom {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes sigma-ui-slide-in-from-left {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-slide-out-to-left {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes sigma-ui-slide-in-from-right {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-slide-out-to-right {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(100%);\n  }\n}\n</style>\n"
     },
     {
       "name": "SheetDescription.vue",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-skeleton\"\n    :class=\"[$attrs.class]\"\n  />\n</template>\n\n<style>\n.sigma-ui-skeleton {\n  border-radius: var(--radius-md);\n  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background-color: hsl(var(--muted));\n}\n\n@keyframes skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-skeleton\"\n    :class=\"[$attrs.class]\"\n  />\n</template>\n\n<style>\n.sigma-ui-skeleton {\n  border-radius: var(--radius-md);\n  animation: sigma-ui-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background-color: hsl(var(--muted));\n}\n\n@keyframes sigma-ui-skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n\n} from 'reka-ui';\n\nconst props = defineProps<SwitchRootProps>();\n\nconst emits = defineEmits<SwitchRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-switch\"\n  >\n    <SwitchThumb class=\"sigma-ui-switch__thumb\" />\n  </SwitchRoot>\n</template>\n\n<style>\n.sigma-ui-switch {\n  display: inline-flex;\n  width: 2.75rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition-duration: 150ms;\n  transition-property: color, background-color, border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-switch:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-switch:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-switch[data-state=\"checked\"] {\n  background-color: hsl(var(--primary));\n}\n\n.sigma-ui-switch[data-state=\"unchecked\"] {\n  background-color: hsl(218deg 14% 84% / 70%);\n}\n\n.sigma-ui-switch__thumb {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: var(--radius-full);\n  animation: none;\n  background-color: hsl(var(--background));\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n  pointer-events: none;\n  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-switch__thumb[data-state=\"checked\"] {\n  animation: thumb-motion-blur-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateX(1.25rem);\n}\n\n.sigma-ui-switch__thumb[data-state=\"unchecked\"] {\n  animation: thumb-motion-blur-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateX(0);\n}\n\n@keyframes thumb-motion-blur-in {\n  0% {\n    filter: blur(0);\n  }\n\n  50% {\n    filter: blur(2px);\n  }\n\n  100% {\n    filter: blur(0);\n  }\n}\n\n@keyframes thumb-motion-blur-out {\n  0% {\n    filter: blur(0);\n  }\n\n  50% {\n    filter: blur(2px);\n  }\n\n  100% {\n    filter: blur(0);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n\n} from 'reka-ui';\n\nconst props = defineProps<SwitchRootProps>();\n\nconst emits = defineEmits<SwitchRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-switch\"\n  >\n    <SwitchThumb class=\"sigma-ui-switch__thumb\" />\n  </SwitchRoot>\n</template>\n\n<style>\n.sigma-ui-switch {\n  display: inline-flex;\n  width: 2.75rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition-duration: 150ms;\n  transition-property: color, background-color, border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-switch:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-switch:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-switch[data-state=\"checked\"] {\n  background-color: hsl(var(--primary));\n}\n\n.sigma-ui-switch[data-state=\"unchecked\"] {\n  background-color: hsl(218deg 14% 84% / 70%);\n}\n\n.sigma-ui-switch__thumb {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: var(--radius-full);\n  animation: none;\n  background-color: hsl(var(--background));\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n  pointer-events: none;\n  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-switch__thumb[data-state=\"checked\"] {\n  animation: sigma-ui-switch-thumb-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateX(1.25rem);\n}\n\n.sigma-ui-switch__thumb[data-state=\"unchecked\"] {\n  animation: sigma-ui-switch-thumb-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateX(0);\n}\n\n@keyframes sigma-ui-switch-thumb-in {\n  0% {\n    filter: blur(0);\n  }\n\n  50% {\n    filter: blur(2px);\n  }\n\n  100% {\n    filter: blur(0);\n  }\n}\n\n@keyframes sigma-ui-switch-thumb-out {\n  0% {\n    filter: blur(0);\n  }\n\n  50% {\n    filter: blur(2px);\n  }\n\n  100% {\n    filter: blur(0);\n  }\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -9,7 +9,7 @@
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n});\n\nconst emits = defineEmits<TooltipContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-tooltip-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n\n<style>\n.sigma-ui-tooltip-content {\n  z-index: 50;\n  overflow: hidden;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: tooltip-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-tooltip-content[data-side=\"bottom\"] {\n  animation: tooltip-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"top\"] {\n  animation: tooltip-in-top 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"left\"] {\n  animation: tooltip-in-left 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"right\"] {\n  animation: tooltip-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-state=\"closed\"] {\n  animation: tooltip-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes tooltip-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 tooltip-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\n@keyframes tooltip-in-bottom {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltip-in-top {\n  from {\n    opacity: 0;\n    transform: translateY(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltip-in-left {\n  from {\n    opacity: 0;\n    transform: translateX(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes tooltip-in-right {\n  from {\n    opacity: 0;\n    transform: translateX(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n});\n\nconst emits = defineEmits<TooltipContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-tooltip-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n\n<style>\n.sigma-ui-tooltip-content {\n  z-index: 50;\n  overflow: hidden;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: sigma-ui-tooltip-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-tooltip-content[data-side=\"bottom\"] {\n  animation: sigma-ui-tooltip-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"top\"] {\n  animation: sigma-ui-tooltip-in-top 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"left\"] {\n  animation: sigma-ui-tooltip-in-left 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"right\"] {\n  animation: sigma-ui-tooltip-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-state=\"closed\"] {\n  animation: sigma-ui-tooltip-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes sigma-ui-tooltip-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 sigma-ui-tooltip-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\n@keyframes sigma-ui-tooltip-in-bottom {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes sigma-ui-tooltip-in-top {\n  from {\n    opacity: 0;\n    transform: translateY(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes sigma-ui-tooltip-in-left {\n  from {\n    opacity: 0;\n    transform: translateX(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-tooltip-in-right {\n  from {\n    opacity: 0;\n    transform: translateX(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</style>\n"
     },
     {
       "name": "TooltipProvider.vue",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\n;\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\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=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n    :disabled=\"isLoading || $attrs.disabled\"\n  >\n    <Loader2Icon\n      v-if=\"isLoading\"\n      class=\"w-4 h-4 mr-2 animate-spin\"\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"
+      "content": "<script setup lang=\"ts\">\n;\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\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=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n    :disabled=\"isLoading || $attrs.disabled\"\n  >\n    <Loader2Icon\n      v-if=\"isLoading\"\n      class=\"w-4 h-4 mr-2 animate-spin\"\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"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/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 { cn } from '@ui/utils';\nimport { Button } from '@ui/registry/tailwind/ui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@ui/registry/tailwind/ui/popover';\nimport { Separator } from '@ui/registry/tailwind/ui/separator';\nimport {\n  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator,\n} from '@ui/registry/tailwind/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=\"gap-2 border-dashed\"\n      >\n        <CirclePlusIcon class=\"size-3.5\" />\n        {{ props.title }}\n        <template v-if=\"selectedValues.size > 0\">\n          <Separator\n            orientation=\"vertical\"\n            class=\"mx-1.5 h-3.5\"\n          />\n          <span class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground lg:hidden\">\n            {{ selectedValues.size }}\n          </span>\n          <div class=\"hidden gap-1.5 lg:flex\">\n            <span\n              v-for=\"badge in selectedBadges\"\n              :key=\"badge\"\n              class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground\"\n            >\n              {{ badge }}\n            </span>\n            <span\n              v-if=\"selectedValues.size > props.maxBadges\"\n              class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground\"\n            >\n              +{{ selectedValues.size - props.maxBadges }}\n            </span>\n          </div>\n        </template>\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverContent\n      class=\"w-80 p-0\"\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=\"p-2.5\"\n          >\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"w-full justify-start gap-2\"\n              @click=\"createFromSearchQuery\"\n            >\n              <CirclePlusIcon class=\"size-4\" />\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=\"cn(\n                  'mr-2.5 flex size-4 shrink-0 items-center justify-center rounded border border-border opacity-60',\n                  selectedValues.has(option) && 'border-primary/60 bg-primary/15 opacity-100',\n                )\"\n              >\n                <CheckIcon\n                  :class=\"cn(\n                    'size-3.5 text-primary',\n                    !selectedValues.has(option) && 'invisible',\n                  )\"\n                />\n              </div>\n              <span class=\"truncate select-text\">{{ option }}</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator v-if=\"$slots.footer\" />\n          <div\n            v-if=\"$slots.footer\"\n            class=\"px-2.5 pb-3 pt-2.5\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as FacetedFilter } from './FacetedFilter.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/navigation-menu.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuContentProps>();\nconst emits = defineEmits<NavigationMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu-content\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-content {\n  top: 0;\n  left: 0;\n  width: 100%;\n  animation: fade-out 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"][data-state=\"open\"] {\n  animation: slide-in-from-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"][data-state=\"open\"] {\n  animation: slide-in-from-left 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"][data-state=\"closed\"] {\n  animation: slide-out-to-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"][data-state=\"closed\"] {\n  animation: slide-out-to-left 200ms ease-in-out;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n  }\n\n  to {\n    filter: blur(0);\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 slide-in-from-right {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out-to-right {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n}\n\n@keyframes slide-out-to-left {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuContentProps>();\nconst emits = defineEmits<NavigationMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu-content\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-content {\n  top: 0;\n  left: 0;\n  width: 100%;\n  animation: sigma-ui-nav-fade-out 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state=\"open\"] {\n  animation: sigma-ui-nav-fade-in 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"][data-state=\"open\"] {\n  animation: sigma-ui-nav-slide-in-from-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"][data-state=\"open\"] {\n  animation: sigma-ui-nav-slide-in-from-left 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"][data-state=\"closed\"] {\n  animation: sigma-ui-nav-slide-out-to-right 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"][data-state=\"closed\"] {\n  animation: sigma-ui-nav-slide-out-to-left 200ms ease-in-out;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes sigma-ui-nav-fade-in {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n  }\n}\n\n@keyframes sigma-ui-nav-fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes sigma-ui-nav-slide-in-from-right {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-in-from-left {\n  from {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n\n  to {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-out-to-right {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(13rem);\n  }\n}\n\n@keyframes sigma-ui-nav-slide-out-to-left {\n  from {\n    filter: blur(0);\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    filter: blur(12px);\n    opacity: 0;\n    transform: translateX(-13rem);\n  }\n}\n</style>\n"
     },
     {
       "name": "NavigationMenuIndicator.vue",