sigma-ui 1.0.13 → 1.0.15

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

@@ -9,11 +9,11 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuCheckboxItemProps>();\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-checkbox-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CheckIcon class=\"sigma-ui-dropdown-menu-checkbox-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-checkbox-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-checkbox-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuCheckboxItemProps>();\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-checkbox-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CheckIcon class=\"sigma-ui-dropdown-menu-checkbox-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-checkbox-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-checkbox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "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\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\"\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  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 0.25rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\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 fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\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\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\"\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  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  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@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"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -21,11 +21,11 @@
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-item\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n\n.sigma-ui-dropdown-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-item\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuLabelProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-label\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-label {\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-dropdown-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuLabelProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-label\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-label {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--foreground));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n}\n\n.sigma-ui-dropdown-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuRadioGroup.vue",
@@ -33,15 +33,15 @@
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuRadioItemProps>();\nconst emits = defineEmits<DropdownMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-radio-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CircleIcon class=\"sigma-ui-dropdown-menu-radio-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-radio-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n\n.sigma-ui-dropdown-menu-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-radio-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-dropdown-menu-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-radio-item__icon {\n  height: 0.5rem;\n  width: 0.5rem;\n  fill: currentColor;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuRadioItemProps>();\nconst emits = defineEmits<DropdownMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-radio-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CircleIcon class=\"sigma-ui-dropdown-menu-radio-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-radio-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-radio-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-dropdown-menu-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentcolor;\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<DropdownMenuSeparatorProps>();\n</script>\n\n<template>\n  <DropdownMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-dropdown-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-separator {\n  margin: 0.25rem -0.25rem;\n  height: 1px;\n  background-color: hsl(var(--border));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<DropdownMenuSeparatorProps>();\n</script>\n\n<template>\n  <DropdownMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-dropdown-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-separator {\n  height: 1px;\n  margin: 0.25rem -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-dropdown-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-shortcut {\n  margin-left: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  letter-spacing: 0.1em;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-dropdown-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  line-height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuSub.vue",
@@ -49,11 +49,11 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\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\"\n    class=\"sigma-ui-dropdown-menu-sub-content\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-content {\n  z-index: 50;\n  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 0.25rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\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 fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\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\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\"\n    class=\"sigma-ui-dropdown-menu-sub-content\"\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  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  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@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"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-dropdown-menu-sub-trigger__icon\" />\n  </DropdownMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-trigger {\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger__icon {\n  margin-left: auto;\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-dropdown-menu-sub-trigger__icon\" />\n  </DropdownMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-trigger {\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuTrigger.vue",

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

@@ -13,7 +13,7 @@
     },
     {
       "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { useFormField } from './useFormField';\n\nconst { formDescriptionId } = useFormField();\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    class=\"sigma-ui-form-description\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </p>\n</template>\n\n<style>\n.sigma-ui-form-description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { useFormField } from './useFormField';\n\nconst { formDescriptionId } = useFormField();\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    class=\"sigma-ui-form-description\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </p>\n</template>\n\n<style>\n.sigma-ui-form-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n</style>\n"
     },
     {
       "name": "FormItem.vue",
@@ -25,7 +25,7 @@
     },
     {
       "name": "FormMessage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate';\nimport { toValue } from 'vue';\nimport { useFormField } from './useFormField';\n\nconst { name, formMessageId } = useFormField();\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"sigma-ui-form-message\"\n  />\n</template>\n\n<style>\n.sigma-ui-form-message {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  color: hsl(var(--destructive));\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate';\nimport { toValue } from 'vue';\nimport { useFormField } from './useFormField';\n\nconst { name, formMessageId } = useFormField();\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"sigma-ui-form-message\"\n  />\n</template>\n\n<style>\n.sigma-ui-form-message {\n  color: hsl(var(--destructive));\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.25rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 1rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  outline: none;\n  transform-origin: var(--reka-popper-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-hover-card-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\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 fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\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: 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"
     },
     {
       "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  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: normal;\n  color: hsl(var(--foreground));\n  user-select: none;\n  flex-shrink: 0;\n  background-color: hsl(var(--secondary) / 90%);\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  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.sigma-ui-image__fallback-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--foreground) / 50%);\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  animation: spin 1s linear infinite;\n  width: 20px;\n  height: 20px;\n}\n\n.sigma-ui-image__img-glow {\n  width: 110%;\n  height: 110%;\n  object-fit: cover;\n  position: absolute;\n  left: 0;\n  top: 0;\n  filter: blur(16px) brightness(200%) saturate(200%);\n  z-index: 1;\n}\n\n.sigma-ui-image__img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: relative;\n  z-index: 2;\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: 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",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <input\n    v-model=\"model\"\n    class=\"sigma-ui-input\"\n    :class=\"[$attrs.class]\"\n    autocomplete=\"off\"\n  >\n</template>\n\n<style>\n.sigma-ui-input {\n  display: flex;\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding-inline: 0.75rem;\n  padding-block: 0.5rem;\n  font-size: 0.875rem;\n}\n\n.sigma-ui-input::file-selector-button {\n  border: 0;\n  background-color: transparent;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.sigma-ui-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)),\n              0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <input\n    v-model=\"model\"\n    class=\"sigma-ui-input\"\n    :class=\"[$attrs.class]\"\n    autocomplete=\"off\"\n  >\n</template>\n\n<style>\n.sigma-ui-input {\n  display: flex;\n  width: 100%;\n  height: 2.5rem;\n  border: 1px solid hsl(var(--input));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--background));\n  font-size: 0.875rem;\n  padding-block: 0.5rem;\n  padding-inline: 0.75rem;\n}\n\n.sigma-ui-input::file-selector-button {\n  border: 0;\n  background-color: transparent;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.sigma-ui-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-input:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--background)),\n              0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -5,15 +5,15 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarRootProps>();\nconst emits = defineEmits<MenubarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n\n<style>\n.sigma-ui-menubar {\n  display: flex;\n  height: 2.5rem;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--background));\n  padding: 0.25rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarRootProps>();\nconst emits = defineEmits<MenubarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n\n<style>\n.sigma-ui-menubar {\n  display: flex;\n  height: 2.5rem;\n  align-items: center;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--background));\n  gap: 0.25rem;\n}\n</style>\n"
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarCheckboxItemProps>();\nconst emits = defineEmits<MenubarCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-checkbox-item\"\n  >\n    <span class=\"sigma-ui-menubar-checkbox-item__indicator\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"sigma-ui-menubar-checkbox-item__icon\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-menubar-checkbox-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  outline: none;\n}\n\n.sigma-ui-menubar-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-checkbox-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-menubar-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-menubar-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarCheckboxItemProps>();\nconst emits = defineEmits<MenubarCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-checkbox-item\"\n  >\n    <span class=\"sigma-ui-menubar-checkbox-item__indicator\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"sigma-ui-menubar-checkbox-item__icon\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-menubar-checkbox-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-menubar-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-checkbox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-menubar-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-menubar-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "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  min-width: 12rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  padding: 0.25rem;\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-menubar-content-transform-origin);\n  opacity: 0;\n  transform: scale(0.96) translateY(-2px);\n  transition: transform 150ms ease-out, opacity 150ms ease-out;\n  pointer-events: none;\n}\n\n.sigma-ui-menubar-content[data-state=\"open\"] {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  pointer-events: auto;\n  animation: contentShow 150ms ease-out;\n}\n\n.sigma-ui-menubar-content[data-state=\"closed\"] {\n  opacity: 0;\n  transform: scale(0.96) translateY(-2px);\n  transition: transform 100ms ease-in, opacity 100ms ease-in;\n  pointer-events: none;\n}\n\n@keyframes contentShow {\n  0% {\n    opacity: 0;\n    transform: scale(0.96) translateY(-2px);\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  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"
     },
     {
       "name": "MenubarGroup.vue",
@@ -21,7 +21,7 @@
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean }>();\nconst emits = defineEmits<MenubarItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-item\"\n    :class=\"[{ 'sigma-ui-menubar-item--inset': inset }]\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n\n<style>\n.sigma-ui-menubar-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  outline: none;\n}\n\n.sigma-ui-menubar-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-menubar-item--inset {\n  padding-left: 2rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean }>();\nconst emits = defineEmits<MenubarItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-item\"\n    :class=\"[{ 'sigma-ui-menubar-item--inset': inset }]\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n\n<style>\n.sigma-ui-menubar-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-menubar-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-menubar-item--inset {\n  padding-left: 2rem;\n}\n</style>\n"
     },
     {
       "name": "MenubarLabel.vue",
@@ -37,15 +37,15 @@
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarRadioItemProps>();\nconst emits = defineEmits<MenubarRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-radio-item\"\n  >\n    <span class=\"sigma-ui-menubar-radio-item__indicator\">\n      <MenubarItemIndicator>\n        <CircleIcon class=\"sigma-ui-menubar-radio-item__icon\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n\n<style>\n.sigma-ui-menubar-radio-item {\n  position: relative;\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  outline: none;\n}\n\n.sigma-ui-menubar-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-radio-item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-menubar-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-menubar-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentColor;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarRadioItemProps>();\nconst emits = defineEmits<MenubarRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-menubar-radio-item\"\n  >\n    <span class=\"sigma-ui-menubar-radio-item__indicator\">\n      <MenubarItemIndicator>\n        <CircleIcon class=\"sigma-ui-menubar-radio-item__icon\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n\n<style>\n.sigma-ui-menubar-radio-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-menubar-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-radio-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-menubar-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-menubar-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentcolor;\n}\n</style>\n"
     },
     {
       "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<MenubarSeparatorProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarSeparator\n    class=\"sigma-ui-menubar-separator\"\n    v-bind=\"forwardedProps\"\n  />\n</template>\n\n<style>\n.sigma-ui-menubar-separator {\n  margin-inline: -0.25rem;\n  margin-block: 0.25rem;\n  height: 1px;\n  background-color: hsl(var(--muted));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<MenubarSeparatorProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarSeparator\n    class=\"sigma-ui-menubar-separator\"\n    v-bind=\"forwardedProps\"\n  />\n</template>\n\n<style>\n.sigma-ui-menubar-separator {\n  height: 1px;\n  background-color: hsl(var(--muted));\n  margin-block: 0.25rem;\n  margin-inline: -0.25rem;\n}\n</style>\n"
     },
     {
       "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-menubar-shortcut\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-menubar-shortcut {\n  margin-left: auto;\n  font-size: 0.75rem;\n  letter-spacing: 0.05em;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-menubar-shortcut\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-menubar-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.05em;\n}\n</style>\n"
     },
     {
       "name": "MenubarSub.vue",
@@ -53,15 +53,15 @@
     },
     {
       "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  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  padding: 0.25rem;\n  box-shadow: var(--shadow-md);\n  transform-origin: var(--reka-menubar-content-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-menubar-subcontent[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\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 fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\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: fadeOut 100ms ease-in forwards;\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"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-menubar-subtrigger\"\n    :class=\"[{ 'sigma-ui-menubar-subtrigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-menubar-subtrigger__icon\" />\n  </MenubarSubTrigger>\n</template>\n\n<style>\n.sigma-ui-menubar-subtrigger {\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  outline: none;\n}\n\n.sigma-ui-menubar-subtrigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-subtrigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-subtrigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-menubar-subtrigger__icon {\n  margin-left: auto;\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-menubar-subtrigger\"\n    :class=\"[{ 'sigma-ui-menubar-subtrigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-menubar-subtrigger__icon\" />\n  </MenubarSubTrigger>\n</template>\n\n<style>\n.sigma-ui-menubar-subtrigger {\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-menubar-subtrigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-subtrigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-subtrigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-menubar-subtrigger__icon {\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n}\n</style>\n"
     },
     {
       "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<MenubarTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-menubar-trigger\"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n\n<style>\n.sigma-ui-menubar-trigger {\n  display: flex;\n  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  outline: none;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n\n.sigma-ui-menubar-trigger:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<MenubarTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-menubar-trigger\"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n\n<style>\n.sigma-ui-menubar-trigger {\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  font-weight: 500;\n  outline: none;\n  transition: background-color 0.2s ease, color 0.2s ease;\n  user-select: none;\n}\n\n.sigma-ui-menubar-trigger:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-menubar-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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  left: 0;\n  top: 0;\n  width: 100%;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"open\"] {\n  animation: fadeIn 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"closed\"] {\n  animation: fadeOut 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"] {\n  animation: slideInFromRight 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"] {\n  animation: slideInFromLeft 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"] {\n  animation: slideOutToRight 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"] {\n  animation: slideOutToLeft 200ms ease-in-out;\n}\n\n@media (min-width: 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    filter: blur(0);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slideInFromRight {\n  from {\n    opacity: 0;\n    transform: translateX(13rem);\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slideInFromLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-13rem);\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slideOutToRight {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n  to {\n    transform: translateX(13rem);\n    filter: blur(12px);\n    opacity: 0;\n  }\n}\n\n@keyframes slideOutToLeft {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-13rem);\n    filter: blur(12px);\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: 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"
     },
     {
       "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  top: 100%;\n  z-index: 1;\n  display: flex;\n  height: 0.375rem;\n  align-items: flex-end;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"visible\"] {\n  animation: navigationMenuIndicatorIn 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"hidden\"] {\n  animation: navigationMenuIndicatorOut 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator__pointer {\n  position: relative;\n  top: 60%;\n  height: 0.5rem;\n  width: 0.5rem;\n  transform: rotate(45deg);\n  border-top-left-radius: 0.125rem;\n  background-color: hsl(var(--border));\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n\n@keyframes navigationMenuIndicatorIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenuIndicatorOut {\n  from {\n    opacity: 1;\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: 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"
     },
     {
       "name": "NavigationMenuItem.vue",
@@ -25,15 +25,15 @@
     },
     {
       "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<NavigationMenuListProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-list\"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-list {\n  display: flex;\n  flex: 1;\n  list-style: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<NavigationMenuListProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-list\"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-list {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  list-style: none;\n}\n</style>\n"
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { navigationMenuTriggerStyle } from '.';\n\nconst props = defineProps<NavigationMenuTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-trigger\"\n    :class=\"[navigationMenuTriggerStyle()]\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"sigma-ui-navigation-menu-trigger__icon\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-trigger {\n  position: relative;\n}\n\n.sigma-ui-navigation-menu-trigger__base {\n  display: inline-flex;\n  height: 2.5rem;\n  width: max-content;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition-property: color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-navigation-menu-trigger__base:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-navigation-menu-trigger__base:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n  outline: none;\n}\n\n.sigma-ui-navigation-menu-trigger__base:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-active] {\n  background-color: hsl(var(--accent) / 0.5);\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-state=\"open\"] {\n  background-color: hsl(var(--accent) / 0.5);\n}\n\n.sigma-ui-navigation-menu-trigger__icon {\n  position: relative;\n  top: 1px;\n  margin-left: 0.25rem;\n  height: 0.75rem;\n  width: 0.75rem;\n  transition: transform 0.2s;\n}\n\n.sigma-ui-navigation-menu-trigger__icon[data-state=\"open\"] {\n  transform: rotate(180deg);\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { navigationMenuTriggerStyle } from '.';\n\nconst props = defineProps<NavigationMenuTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-trigger\"\n    :class=\"[navigationMenuTriggerStyle()]\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"sigma-ui-navigation-menu-trigger__icon\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-trigger {\n  position: relative;\n}\n\n.sigma-ui-navigation-menu-trigger__base {\n  display: inline-flex;\n  width: max-content;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition-duration: 150ms;\n  transition-property: color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-navigation-menu-trigger__base:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-navigation-menu-trigger__base:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n  outline: none;\n}\n\n.sigma-ui-navigation-menu-trigger__base:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-active] {\n  background-color: hsl(var(--accent) / 50%);\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-state=\"open\"] {\n  background-color: hsl(var(--accent) / 50%);\n}\n\n.sigma-ui-navigation-menu-trigger__icon {\n  position: relative;\n  top: 1px;\n  width: 0.75rem;\n  height: 0.75rem;\n  margin-left: 0.25rem;\n  transition: transform 0.2s;\n}\n\n.sigma-ui-navigation-menu-trigger__icon[data-state=\"open\"] {\n  transform: rotate(180deg);\n}\n</style>\n"
     },
     {
       "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  left: 0;\n  top: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-viewport {\n  position: relative;\n  margin-top: 0.375rem;\n  height: var(--reka-navigation-menu-viewport-height);\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  transform-origin: top center;\n}\n\n@media (min-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: navigationMenuViewportIn 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"closed\"] {\n  animation: navigationMenuViewportOut 0.2s ease;\n}\n\n@keyframes navigationMenuViewportIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes navigationMenuViewportOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\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  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"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/number-field.json

@@ -13,15 +13,15 @@
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui';\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui';\nimport { MinusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldDecrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldDecrement\n    data-slot=\"decrement\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-decrement\"\n  >\n    <slot>\n      <MinusIcon class=\"sigma-ui-number-field-decrement__icon\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n\n<style>\n.sigma-ui-number-field-decrement {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-decrement:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-decrement__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui';\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui';\nimport { MinusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldDecrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldDecrement\n    data-slot=\"decrement\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-decrement\"\n  >\n    <slot>\n      <MinusIcon class=\"sigma-ui-number-field-decrement__icon\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n\n<style>\n.sigma-ui-number-field-decrement {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  padding: 0.75rem;\n  transform: translateY(-50%);\n}\n\n.sigma-ui-number-field-decrement:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-decrement__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui';\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui';\nimport { PlusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldIncrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldIncrement\n    data-slot=\"increment\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-increment\"\n  >\n    <slot>\n      <PlusIcon class=\"sigma-ui-number-field-increment__icon\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n\n<style>\n.sigma-ui-number-field-increment {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-increment:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-increment__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui';\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui';\nimport { PlusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldIncrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldIncrement\n    data-slot=\"increment\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-increment\"\n  >\n    <slot>\n      <PlusIcon class=\"sigma-ui-number-field-increment__icon\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n\n<style>\n.sigma-ui-number-field-increment {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  padding: 0.75rem;\n  transform: translateY(-50%);\n}\n\n.sigma-ui-number-field-increment:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-increment__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'reka-ui';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    class=\"sigma-ui-number-field-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-number-field-input {\n  display: flex;\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n.sigma-ui-number-field-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-number-field-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-number-field-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'reka-ui';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    class=\"sigma-ui-number-field-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-number-field-input {\n  display: flex;\n  width: 100%;\n  height: 2.5rem;\n  padding: 0.5rem;\n  border: 1px solid hsl(var(--input));\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n.sigma-ui-number-field-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-number-field-input:focus-visible {\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-number-field-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -5,23 +5,23 @@
   "files": [
     {
       "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui';\nimport { MoreHorizontalIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PaginationEllipsisProps>();\n</script>\n\n<template>\n  <PaginationEllipsis\n    v-bind=\"props\"\n    class=\"sigma-ui-pagination-ellipsis\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"sigma-ui-pagination-ellipsis__icon\" />\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<style>\n.sigma-ui-pagination-ellipsis {\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pagination-ellipsis__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui';\nimport { MoreHorizontalIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PaginationEllipsisProps>();\n</script>\n\n<template>\n  <PaginationEllipsis\n    v-bind=\"props\"\n    class=\"sigma-ui-pagination-ellipsis\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"sigma-ui-pagination-ellipsis__icon\" />\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<style>\n.sigma-ui-pagination-ellipsis {\n  display: flex;\n  width: 2.25rem;\n  height: 2.25rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pagination-ellipsis__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui';\nimport { ChevronsLeftIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-first\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronsLeftIcon class=\"sigma-ui-pagination-first__icon\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n\n<style>\n.sigma-ui-pagination-first {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-first__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui';\nimport { ChevronsLeftIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-first\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronsLeftIcon class=\"sigma-ui-pagination-first__icon\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n\n<style>\n.sigma-ui-pagination-first {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-first__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui';\nimport { ChevronsRightIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationLast v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-last\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronsRightIcon class=\"sigma-ui-pagination-last__icon\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n\n<style>\n.sigma-ui-pagination-last {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-last__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui';\nimport { ChevronsRightIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationLast v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-last\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronsRightIcon class=\"sigma-ui-pagination-last__icon\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n\n<style>\n.sigma-ui-pagination-last {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-last__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationNext v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-next\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronRightIcon class=\"sigma-ui-pagination-next__icon\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n\n<style>\n.sigma-ui-pagination-next {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-next__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationNext v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-next\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronRightIcon class=\"sigma-ui-pagination-next__icon\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n\n<style>\n.sigma-ui-pagination-next {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-next__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-prev\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronLeftIcon class=\"sigma-ui-pagination-prev__icon\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n\n<style>\n.sigma-ui-pagination-prev {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-prev__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n});\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"props\">\n    <Button\n      class=\"sigma-ui-pagination-prev\"\n      :class=\"$attrs.class\"\n      variant=\"outline\"\n    >\n      <slot>\n        <ChevronLeftIcon class=\"sigma-ui-pagination-prev__icon\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n\n<style>\n.sigma-ui-pagination-prev {\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.sigma-ui-pagination-prev__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/pin-input.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PinInputRootProps>(), {\n  modelValue: () => [],\n});\nconst emits = defineEmits<PinInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-pin-input\"\n  >\n    <slot />\n  </PinInputRoot>\n</template>\n\n<style>\n.sigma-ui-pin-input {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PinInputRootProps>(), {\n  modelValue: () => [],\n});\nconst emits = defineEmits<PinInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-pin-input\"\n  >\n    <slot />\n  </PinInputRoot>\n</template>\n\n<style>\n.sigma-ui-pin-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n</style>\n"
     },
     {
       "name": "PinInputGroup.vue",
@@ -13,11 +13,11 @@
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-pin-input-input {\n  position: relative;\n  display: flex;\n  height: 2.5rem;\n  width: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--input));\n  border-left: none;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: all 150ms;\n}\n\n.sigma-ui-pin-input-input:first-child {\n  border-left: 1px solid hsl(var(--input));\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:last-child {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:focus {\n  outline: none;\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 2px hsl(var(--ring));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-pin-input-input {\n  position: relative;\n  display: flex;\n  width: 2.5rem;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--input));\n  border-left: none;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: all 150ms;\n}\n\n.sigma-ui-pin-input-input:first-child {\n  border-left: 1px solid hsl(var(--input));\n  border-bottom-left-radius: 0.375rem;\n  border-top-left-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:last-child {\n  border-bottom-right-radius: 0.375rem;\n  border-top-right-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:focus {\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 2px hsl(var(--ring));\n  outline: none;\n}\n</style>\n"
     },
     {
       "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\nimport { DotIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-separator\"\n  >\n    <slot>\n      <DotIcon class=\"sigma-ui-pin-input-separator__icon\" />\n    </slot>\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-separator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pin-input-separator__icon {\n  height: 1rem;\n  width: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\nimport { DotIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-separator\"\n  >\n    <slot>\n      <DotIcon class=\"sigma-ui-pin-input-separator__icon\" />\n    </slot>\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-separator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pin-input-separator__icon {\n  width: 1rem;\n  height: 1rem;\n  color: hsl(var(--muted-foreground));\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  border-radius: var(--radius);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\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: slideFromTop 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slideFromBottom 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slideFromRight 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slideFromLeft 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"closed\"] {\n  animation: popoverOut 150ms ease-in;\n}\n\n@keyframes popoverOut {\n  from {\n    opacity: 1;\n    transform: scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    transform: scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n\n@keyframes slideFromTop {\n  from {\n    transform: translateY(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromBottom {\n  from {\n    transform: translateY(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromLeft {\n  from {\n    transform: translateX(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromRight {\n  from {\n    transform: translateX(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\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  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"
     },
     {
       "name": "PopoverTrigger.vue",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps>(),\n  {\n    modelValue: 0,\n  },\n);\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"props\"\n    class=\"sigma-ui-progress\"\n  >\n    <ProgressIndicator\n\n      class=\"sigma-ui-progress__indicator\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n\n<style>\n.sigma-ui-progress {\n  position: relative;\n  height: 1rem;\n  width: 100%;\n  min-width: 50px;\n  overflow: hidden;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-progress__indicator {\n  height: 100%;\n  width: 100%;\n  flex: 1;\n  background-color: hsl(var(--primary));\n  transition: all 0.2s ease;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps>(),\n  {\n    modelValue: 0,\n  },\n);\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"props\"\n    class=\"sigma-ui-progress\"\n  >\n    <ProgressIndicator\n\n      class=\"sigma-ui-progress__indicator\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n\n<style>\n.sigma-ui-progress {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-width: 50px;\n  height: 1rem;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-progress__indicator {\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  background-color: hsl(var(--primary));\n  transition: all 0.2s ease;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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  aspect-ratio: 1;\n  height: 1rem;\n  width: 1rem;\n  border-radius: var(--radius-full);\n  border: 1px solid hsl(var(--primary));\n  color: hsl(var(--primary));\n  background-color: transparent;\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  height: 0.625rem;\n  width: 0.625rem;\n  fill: currentColor;\n  color: currentColor;\n}\n\n.sigma-ui-radio-group-item[data-state=\"checked\"] .sigma-ui-radio-group-item__icon {\n  animation: radioCheck 150ms ease-out;\n}\n\n.sigma-ui-radio-group-item[data-state=\"unchecked\"] .sigma-ui-radio-group-item__icon {\n  animation: radioUncheck 150ms ease-in;\n}\n\n@keyframes radioCheck {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n    filter: blur(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n    filter: blur(0);\n  }\n}\n\n@keyframes radioUncheck {\n  from {\n    opacity: 1;\n    transform: scale(1);\n    filter: blur(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n    filter: blur(4px);\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: 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"
     },
     {
       "name": "index.ts",