sigma-ui 1.0.15 → 1.0.17

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  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"
+      "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(--secondary));\n  color: hsl(var(--secondary-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  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"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps>(),\n  {\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<DropdownMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-dropdown-menu-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"closed\"] {\n  animation: fade-out 100ms ease-in forwards;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -21,7 +21,7 @@
     },
     {
       "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  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"
+      "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(--secondary));\n  color: hsl(var(--secondary-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",
@@ -33,7 +33,7 @@
     },
     {
       "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  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"
+      "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(--secondary));\n  color: hsl(var(--secondary-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",
@@ -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  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"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<DropdownMenuSubContentProps>(),\n  {\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<DropdownMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"{ ...forwarded, ...$attrs }\"\n    class=\"sigma-ui-dropdown-menu-sub-content\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"closed\"] {\n  animation: fade-out 100ms ease-in forwards;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
     },
     {
       "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  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"
+      "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(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-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/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  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"
+      "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(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--input));\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

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

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

@@ -29,11 +29,11 @@
     },
     {
       "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  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"
+      "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(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-navigation-menu-trigger__base:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-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(--secondary) / 50%);\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-state=\"open\"] {\n  background-color: hsl(var(--secondary) / 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  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"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = defineProps<NavigationMenuViewportProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div class=\"sigma-ui-navigation-menu-viewport-wrapper\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-navigation-menu-viewport\"\n      :class=\"$attrs.class\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-viewport-wrapper {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: flex;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-viewport {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: var(--reka-navigation-menu-viewport-height);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  margin-top: 0.375rem;\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: top center;\n}\n\n@media (width >= 768px) {\n  .sigma-ui-navigation-menu-viewport {\n    width: var(--reka-navigation-menu-viewport-width);\n  }\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"open\"] {\n  animation: navigation-menu-viewport-in 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"closed\"] {\n  animation: navigation-menu-viewport-out 0.2s ease;\n}\n\n@keyframes navigation-menu-viewport-in {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes navigation-menu-viewport-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -21,7 +21,7 @@
     },
     {
       "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  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"
+      "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(--border));\n  border-radius: var(--radius);\n  background-color: transparent;\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/popover.json

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

@@ -9,11 +9,11 @@
     },
     {
       "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCell\n    class=\"sigma-ui-range-calendar-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell {\n  position: relative;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n.sigma-ui-range-calendar-cell:focus-within {\n  position: relative;\n  z-index: 20;\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected]) {\n  background-color: hsl(var(--accent));\n}\n\n.sigma-ui-range-calendar-cell:first-child:has([data-selected]) {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:last-child:has([data-selected]) {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-outside-month]) {\n  background-color: hsl(var(--accent) / 50%);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-end]) {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-start]) {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCell\n    class=\"sigma-ui-range-calendar-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell {\n  position: relative;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n.sigma-ui-range-calendar-cell:focus-within {\n  position: relative;\n  z-index: 20;\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected]) {\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-range-calendar-cell:first-child:has([data-selected]) {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:last-child:has([data-selected]) {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-outside-month]) {\n  background-color: hsl(var(--secondary) / 50%);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-end]) {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-start]) {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    class=\"sigma-ui-range-calendar-cell-trigger\"\n    :class=\"[buttonVariants({ variant: 'ghost' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell-trigger {\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  font-weight: normal;\n  transition-duration: 150ms;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selected] {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-today]:not([data-selected]) {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start],\n.sigma-ui-range-calendar-cell-trigger[data-selection-end] {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:focus,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:focus {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month] {\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month][data-selected] {\n  background-color: hsl(var(--accent) / 50%);\n  color: hsl(var(--muted-foreground));\n  opacity: 0.3;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-disabled] {\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-unavailable] {\n  color: hsl(var(--destructive-foreground));\n  text-decoration: line-through;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    class=\"sigma-ui-range-calendar-cell-trigger\"\n    :class=\"[buttonVariants({ variant: 'ghost' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n\n<style>\n.sigma-ui-range-calendar-cell-trigger {\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  font-weight: normal;\n  transition-duration: 150ms;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selected] {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-today]:not([data-selected]) {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start],\n.sigma-ui-range-calendar-cell-trigger[data-selection-end] {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-start]:focus,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:hover,\n.sigma-ui-range-calendar-cell-trigger[data-selection-end]:focus {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month] {\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month][data-selected] {\n  background-color: hsl(var(--secondary) / 50%);\n  color: hsl(var(--muted-foreground));\n  opacity: 0.3;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-disabled] {\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-unavailable] {\n  color: hsl(var(--destructive-foreground));\n  text-decoration: line-through;\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarGrid.vue",

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

@@ -9,7 +9,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<SelectContentProps>(),\n  {\n    position: 'popper',\n  },\n);\nconst emits = defineEmits<SelectContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-select-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport\n        class=\"sigma-ui-select-content__viewport\"\n        :class=\"{ 'sigma-ui-select-content__viewport--popper': position === 'popper' }\"\n      >\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n\n<style>\n.sigma-ui-select-content {\n  position: relative;\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  max-height: 24rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slide-from-left 150ms ease-out;\n}\n\n@keyframes slide-from-top {\n  from {\n    filter: blur(4px);\n    transform: translateY(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-bottom {\n  from {\n    filter: blur(4px);\n    transform: translateY(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-left {\n  from {\n    filter: blur(4px);\n    transform: translateX(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-right {\n  from {\n    filter: blur(4px);\n    transform: translateX(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n.sigma-ui-select-content__viewport {\n  padding: 0.25rem;\n}\n\n.sigma-ui-select-content__viewport--popper {\n  width: 100%;\n  min-width: var(--reka-select-trigger-width);\n  height: var(--reka-select-trigger-height);\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<SelectContentProps>(),\n  {\n    position: 'popper',\n  },\n);\nconst emits = defineEmits<SelectContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-select-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport\n        class=\"sigma-ui-select-content__viewport\"\n        :class=\"{ 'sigma-ui-select-content__viewport--popper': position === 'popper' }\"\n      >\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n\n<style>\n.sigma-ui-select-content {\n  position: relative;\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  max-height: 24rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slide-from-top 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slide-from-bottom 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slide-from-right 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slide-from-left 150ms ease-out;\n}\n\n@keyframes slide-from-top {\n  from {\n    filter: blur(4px);\n    transform: translateY(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-bottom {\n  from {\n    filter: blur(4px);\n    transform: translateY(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-left {\n  from {\n    filter: blur(4px);\n    transform: translateX(-1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n@keyframes slide-from-right {\n  from {\n    filter: blur(4px);\n    transform: translateX(1rem) scaleY(0.98);\n  }\n\n  to {\n    filter: blur(0);\n    transform: translateX(0) scaleY(1);\n  }\n}\n\n.sigma-ui-select-content__viewport {\n  padding: 0.25rem;\n}\n\n.sigma-ui-select-content__viewport--popper {\n  width: 100%;\n  min-width: var(--reka-select-trigger-width);\n  height: var(--reka-select-trigger-height);\n}\n</style>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -17,7 +17,7 @@
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-item\"\n  >\n    <span class=\"sigma-ui-select-item__indicator-wrapper\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"sigma-ui-select-item__check-icon\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n\n<style>\n.sigma-ui-select-item {\n  position: relative;\n  display: flex;\n  width: 100%;\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-select-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-select-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-select-item__indicator-wrapper {\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-select-item__check-icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-item\"\n  >\n    <span class=\"sigma-ui-select-item__indicator-wrapper\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"sigma-ui-select-item__check-icon\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n\n<style>\n.sigma-ui-select-item {\n  position: relative;\n  display: flex;\n  width: 100%;\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-select-item:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-select-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-select-item__indicator-wrapper {\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-select-item__check-icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "SelectItemText.vue",
@@ -41,7 +41,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-trigger\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"sigma-ui-select-trigger__icon\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n\n<style>\n.sigma-ui-select-trigger {\n  display: flex;\n  width: 100%;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0.75rem;\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  line-height: 1.25rem;\n}\n\n.sigma-ui-select-trigger:focus {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-select-trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-select-trigger > span {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.sigma-ui-select-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-trigger\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"sigma-ui-select-trigger__icon\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n\n<style>\n.sigma-ui-select-trigger {\n  display: flex;\n  width: 100%;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--input));\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.sigma-ui-select-trigger:focus {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-select-trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.sigma-ui-select-trigger > span {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.sigma-ui-select-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  opacity: 0.5;\n}\n</style>\n"
     },
     {
       "name": "SelectValue.vue",

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

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

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

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

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

@@ -17,7 +17,7 @@
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TabsTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tabs-trigger\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n\n<style>\n.sigma-ui-tabs-trigger {\n  display: inline-flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-sm);\n  font-size: 0.875rem;\n  font-weight: 500;\n  padding-inline: 0.75rem;\n  transition-duration: 150ms;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n}\n\n.sigma-ui-tabs-trigger:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-tabs-trigger:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-tabs-trigger[data-state=\"active\"] {\n  background-color: hsl(var(--background));\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  color: hsl(var(--foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TabsTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tabs-trigger\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n\n<style>\n.sigma-ui-tabs-trigger {\n  display: inline-flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-sm);\n  font-size: 0.875rem;\n  font-weight: 500;\n  padding-inline: 0.75rem;\n  transition-duration: 150ms;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n}\n\n.sigma-ui-tabs-trigger:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-tabs-trigger:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-tabs-trigger[data-state=\"active\"] {\n  background-color: hsl(var(--input));\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  color: hsl(var(--foreground));\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<TagsInputRootProps>();\nconst emits = defineEmits<TagsInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TagsInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-tags-input\"\n  >\n    <slot />\n  </TagsInputRoot>\n</template>\n\n<style>\n.sigma-ui-tags-input {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\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  gap: 0.5rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<TagsInputRootProps>();\nconst emits = defineEmits<TagsInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TagsInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-tags-input\"\n  >\n    <slot />\n  </TagsInputRoot>\n</template>\n\n<style>\n.sigma-ui-tags-input {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--input));\n  font-size: 0.875rem;\n  gap: 0.5rem;\n}\n</style>\n"
     },
     {
       "name": "TagsInputInput.vue",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\n\nconst props = defineProps<{\n  modelValue?: string | number;\n}>();\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <textarea\n    v-model=\"model\"\n    class=\"sigma-ui-textarea\"\n    :class=\"[$attrs.class]\"\n    autocomplete=\"off\"\n  />\n</template>\n\n<style>\n.sigma-ui-textarea {\n  display: flex;\n  width: 100%;\n  min-height: 5rem;\n  padding: 0.5rem 0.75rem;\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}\n\n.sigma-ui-textarea::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-textarea: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-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\nconst props = defineProps<{\n  modelValue?: string | number;\n}>();\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <textarea\n    v-model=\"model\"\n    class=\"sigma-ui-textarea\"\n    :class=\"[$attrs.class]\"\n    autocomplete=\"off\"\n  />\n</template>\n\n<style>\n.sigma-ui-textarea {\n  display: flex;\n  width: 100%;\n  min-height: 5rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--input));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-textarea::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-textarea: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-textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui';\nimport { type ToggleVariants, toggleVariants } from '.';\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  variant?: ToggleVariants['variant'];\n  size?: ToggleVariants['size'];\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n});\n\nconst emits = defineEmits<ToggleEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, size: undefined, variant: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"[toggleVariants({ variant, size })]\"\n  >\n    <slot />\n  </Toggle>\n</template>\n\n<style>\n.sigma-ui-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\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-toggle:hover {\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toggle: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-toggle:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-toggle[data-state=\"on\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-toggle--default {\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline {\n  border: 1px solid hsl(var(--input));\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-toggle--size-default {\n  height: 2.5rem;\n  padding-inline: 0.75rem;\n}\n\n.sigma-ui-toggle--size-sm {\n  height: 2.25rem;\n  padding-inline: 0.625rem;\n}\n\n.sigma-ui-toggle--size-lg {\n  height: 2.75rem;\n  padding-inline: 1.25rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui';\nimport { type ToggleVariants, toggleVariants } from '.';\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  variant?: ToggleVariants['variant'];\n  size?: ToggleVariants['size'];\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n});\n\nconst emits = defineEmits<ToggleEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, size: undefined, variant: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"[toggleVariants({ variant, size })]\"\n  >\n    <slot />\n  </Toggle>\n</template>\n\n<style>\n.sigma-ui-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\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-toggle:hover {\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toggle: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-toggle:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-toggle[data-state=\"on\"] {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-toggle--default {\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline {\n  border: 1px solid hsl(var(--input));\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline:hover {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-toggle--size-default {\n  height: 2.5rem;\n  padding-inline: 0.75rem;\n}\n\n.sigma-ui-toggle--size-sm {\n  height: 2.25rem;\n  padding-inline: 0.625rem;\n}\n\n.sigma-ui-toggle--size-lg {\n  height: 2.75rem;\n  padding-inline: 1.25rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -9,7 +9,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Button } from './Button.vue';\n\nexport const buttonVariants = cva(\n  'w-[fit-content] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        xs: 'h-7 px-2',\n        sm: 'h-9 px-3',\n        lg: 'h-11 px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Button } from './Button.vue';\n\nexport const buttonVariants = cva(\n  'w-[fit-content] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-border bg-transparent hover:bg-secondary hover:text-secondary-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-secondary hover:text-secondary-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        xs: 'h-7 px-2',\n        sm: 'h-9 px-3',\n        lg: 'h-11 px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n"
     }
   ],
   "type": "components:ui"

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

@@ -9,11 +9,11 @@
     },
     {
       "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-secondary [&:has([data-selected][data-outside-month])]:bg-secondary/50', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-secondary [&[data-today]:not([data-selected])]:text-secondary-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-secondary/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "CalendarGrid.vue",

package/__generated/registry-schemes/style-system/tailwind/card-lightbox.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "CardLightbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue';\nimport { AnimatePresence, motion } from 'motion-v';\nimport type { Item } from './types';\nimport { XIcon } from 'lucide-vue-next';\n\ntype Props = {\n  items: Item[];\n};\n\nconst props = defineProps<Props>();\n\nconst openId = ref<string | null>(null);\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscKeydown);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', handleEscKeydown);\n});\n\nfunction open(id: string) {\n  openId.value = id;\n}\n\nfunction close() {\n  openId.value = null;\n}\n\nfunction handleEscKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    close();\n  }\n}\n</script>\n\n<template>\n  <div class=\"mx-auto w-full max-w-[990px] flex flex-col @container/card-lightbox\">\n    <ul class=\"grid grid-cols-1 gap-2.5 p-0 m-0 list-none @lg/card-lightbox:grid-cols-10 @lg/card-lightbox:gap-5\">\n      <motion.button\n        v-for=\"card in props.items\"\n        :key=\"card.id\"\n        :data-open=\"openId === card.id\"\n        :class=\"[\n          'relative p-0 overflow-hidden focus-visible:rounded-[20px] focus-visible:shadow-[0_0_0_2px_hsl(var(--background)),_0_0_0_4px_hsl(var(--ring))] focus-visible:outline-none',\n          'h-[280px] w-full col-span-1',\n          '@lg/card-lightbox:h-[420px]',\n          card.theme === 'dark' ? 'group theme-dark' : '',\n          (props.items.findIndex(item => item.id === card.id) + 1) % 4 === 1 || (props.items.findIndex(item => item.id === card.id) + 1) % 4 === 0\n            ? '@lg/card-lightbox:col-span-6'\n            : '@lg/card-lightbox:col-span-4',\n        ]\"\n        @click=\"() => open(card.id)\"\n      >\n        <motion.div\n          class=\"relative pointer-events-auto select-none rounded-[20px] bg-card overflow-hidden w-full h-full m-auto animate-fade-in\"\n          :layout-id=\"`card-container-${card.id}`\"\n        >\n          <motion.div\n            class=\"relative overflow-hidden h-full w-full\"\n            :layout-id=\"`card-image-container-${card.id}`\"\n          >\n            <motion.img\n              class=\"absolute inset-0 z-10 w-full h-full object-cover pointer-events-none\"\n              :src=\"card.image\"\n              alt=\"\"\n            />\n            <div\n              :class=\"[\n                'absolute inset-0 z-10 pointer-events-none',\n                card.theme === 'dark'\n                  ? 'bg-linear-[160deg,rgba(255,255,255,0.95)_-8%,rgba(255,255,255,0)_30%]'\n                  : 'bg-linear-[160deg,rgba(0,0,0,0.95)_-8%,rgba(0,0,0,0)_30%]'\n              ]\"\n            />\n          </motion.div>\n          <motion.div\n            class=\"absolute top-0 left-0 z-20 max-w-[300px] p-5 text-left\"\n            :layout-id=\"`title-container-${card.id}`\"\n            layout=\"position\"\n          >\n            <span\n              :class=\"[\n                'px-2 py-1 rounded-[12px] text-[12px] uppercase backdrop-blur-[8px]',\n                'text-white bg-white/10 group-[.theme-dark]:text-black/90 group-[.theme-dark]:bg-black/10'\n              ]\"\n            >\n              {{ card.category }}\n            </span>\n            <h2\n              :class=\"[\n                'my-2 text-[20px] font-semibold',\n                'text-white group-[.theme-dark]:text-black/90'\n              ]\"\n            >\n              {{ card.title }}\n            </h2>\n          </motion.div>\n        </motion.div>\n      </motion.button>\n    </ul>\n    <AnimatePresence>\n      <motion.div\n        v-if=\"openId\"\n        :initial=\"{ opacity: 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :exit=\"{ opacity: 0 }\"\n        :transition=\"{ duration: 0.2 }\"\n        style=\"pointer-events: auto\"\n        class=\"fixed inset-0 z-50 backdrop-blur-[12px] bg-black/20 [will-change:opacity]\"\n        @click=\"close\"\n      />\n    </AnimatePresence>\n    <AnimatePresence>\n      <div\n        v-if=\"openId\"\n        :class=\"[\n          'fixed inset-0 z-[51] w-full h-full pointer-events-none flex flex-col justify-center items-center p-0 lg:p-[40px_0]',\n          props.items.find(item => item.id === openId)?.theme === 'dark' ? 'group theme-dark' : '',\n        ]\"\n      >\n        <motion.div\n          class=\"relative pointer-events-auto select-none bg-card overflow-hidden m-auto overflow-y-auto w-screen max-w-full h-screen rounded-none lg:w-auto lg:max-w-[700px] lg:h-[70dvh] lg:rounded-[20px]\"\n          :layout-id=\"`card-container-${openId}`\"\n        >\n          <motion.div\n            class=\"relative overflow-hidden w-full h-[280px] lg:h-[420px]\"\n            :layout-id=\"`card-image-container-${openId}`\"\n          >\n            <motion.img\n              class=\"absolute inset-0 z-10 w-full h-full object-cover pointer-events-none\"\n              :src=\"props.items.find(item => item.id === openId)?.image\"\n              alt=\"\"\n              :layout-id=\"`card-image-${openId}`\"\n              :initial=\"{ opacity: 0, filter: 'blur(12px)' }\"\n              :animate=\"{ opacity: 1, filter: 'blur(0px)' }\"\n              :exit=\"{ opacity: 0, filter: 'blur(12px)' }\"\n              :transition=\"{ duration: 0.5 }\"\n            />\n            <div\n              :class=\"[\n                'absolute inset-0 z-10 pointer-events-none',\n                props.items.find(item => item.id === openId)?.theme === 'dark'\n                  ? 'bg-linear-[160deg,rgba(255,255,255,0.95)_-8%,rgba(255,255,255,0)_30%]'\n                  : 'bg-linear-[160deg,rgba(0,0,0,0.95)_-8%,rgba(0,0,0,0)_30%]'\n              ]\"\n            />\n            <motion.div\n              class=\"absolute top-0 left-0 z-20 p-5\"\n              :layout-id=\"`title-container-${openId}`\"\n              layout=\"position\"\n            >\n              <span\n                :class=\"[\n                  'px-2 py-1 rounded-[12px] text-[12px] uppercase backdrop-blur-[8px]',\n                  'text-white bg-white/10 group-[.theme-dark]:text-black/90 group-[.theme-dark]:bg-black/10'\n                ]\"\n              >\n                {{ props.items.find(item => item.id === openId)?.category }}\n              </span>\n              <h2\n                :class=\"[\n                  'my-2 text-[20px] font-semibold',\n                  'text-white group-[.theme-dark]:text-black/90'\n                ]\"\n              >\n                {{ props.items.find(item => item.id === openId)?.title }}\n              </h2>\n            </motion.div>\n            <motion.div\n              class=\"absolute top-0 right-0 z-20 p-5 cursor-pointer\"\n              @click=\"close\"\n            >\n              <XIcon class=\"stroke-white group-[.theme-dark]:stroke-black/90\" />\n            </motion.div>\n          </motion.div>\n          <motion.div\n            class=\"p-[35px] max-w-[700px] w-screen text-primary\"\n          >\n            <div v-html=\"props.items.find(item => item.id === openId)?.content\" />\n          </motion.div>\n        </motion.div>\n      </div>\n    </AnimatePresence>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue';\nimport { AnimatePresence, motion } from 'motion-v';\nimport type { Item } from './types';\nimport { XIcon } from 'lucide-vue-next';\n\ntype Props = {\n  items: Item[];\n};\n\nconst props = defineProps<Props>();\n\nconst openId = ref<string | null>(null);\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscKeydown);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', handleEscKeydown);\n});\n\nfunction open(id: string) {\n  openId.value = id;\n}\n\nfunction close() {\n  openId.value = null;\n}\n\nfunction handleEscKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    close();\n  }\n}\n</script>\n\n<template>\n  <div class=\"mx-auto w-full max-w-[990px] flex flex-col @container/card-lightbox\">\n    <ul class=\"grid grid-cols-1 gap-2.5 p-0 m-0 list-none @lg/card-lightbox:grid-cols-10 @lg/card-lightbox:gap-5\">\n      <motion.button\n        v-for=\"card in props.items\"\n        :key=\"card.id\"\n        :data-open=\"openId === card.id\"\n        :class=\"[\n          'relative p-0 overflow-hidden focus-visible:rounded-[20px] focus-visible:shadow-[0_0_0_2px_hsl(var(--background)),_0_0_0_4px_hsl(var(--ring))] focus-visible:outline-none',\n          'h-[280px] w-full col-span-1',\n          '@lg/card-lightbox:h-[420px]',\n          card.theme === 'dark' ? 'group theme-dark' : '',\n          (props.items.findIndex(item => item.id === card.id) + 1) % 4 === 1 || (props.items.findIndex(item => item.id === card.id) + 1) % 4 === 0\n            ? '@lg/card-lightbox:col-span-6'\n            : '@lg/card-lightbox:col-span-4',\n        ]\"\n        @click=\"() => open(card.id)\"\n      >\n        <motion.div\n          class=\"relative pointer-events-auto select-none rounded-[20px] bg-card overflow-hidden w-full h-full m-auto animate-fade-in\"\n          :layout-id=\"`card-container-${card.id}`\"\n        >\n          <motion.div\n            class=\"relative overflow-hidden h-full w-full\"\n            :layout-id=\"`card-image-container-${card.id}`\"\n          >\n            <motion.img\n              class=\"absolute inset-0 z-10 w-full h-full object-cover pointer-events-none\"\n              :src=\"card.image\"\n              alt=\"\"\n            />\n            <div\n              :class=\"[\n                'absolute inset-0 z-10 pointer-events-none',\n                card.theme === 'dark'\n                  ? 'bg-linear-[160deg,rgba(255,255,255,0.95)_-8%,rgba(255,255,255,0)_30%]'\n                  : 'bg-linear-[160deg,rgba(0,0,0,0.95)_-8%,rgba(0,0,0,0)_30%]'\n              ]\"\n            />\n          </motion.div>\n          <motion.div\n            class=\"absolute top-0 left-0 z-20 max-w-[300px] p-5 text-left\"\n            :layout-id=\"`title-container-${card.id}`\"\n            layout=\"position\"\n          >\n            <span\n              :class=\"[\n                'px-2 py-1 rounded-[12px] text-[12px] uppercase backdrop-blur-[8px]',\n                'text-white bg-white/10 group-[.theme-dark]:text-black/90 group-[.theme-dark]:bg-black/10'\n              ]\"\n            >\n              {{ card.category }}\n            </span>\n            <h2\n              :class=\"[\n                'my-2 text-[20px] font-semibold',\n                'text-white group-[.theme-dark]:text-black/90'\n              ]\"\n            >\n              {{ card.title }}\n            </h2>\n          </motion.div>\n        </motion.div>\n      </motion.button>\n    </ul>\n    <AnimatePresence>\n      <motion.div\n        v-if=\"openId\"\n        :initial=\"{ opacity: 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :exit=\"{ opacity: 0 }\"\n        :transition=\"{ duration: 0.2 }\"\n        style=\"pointer-events: auto\"\n        class=\"fixed inset-0 z-50 backdrop-blur-[12px] bg-black/20 [will-change:opacity]\"\n        @click=\"close\"\n      />\n    </AnimatePresence>\n    <AnimatePresence>\n      <div\n        v-if=\"openId\"\n        :class=\"[\n          'fixed inset-0 z-[51] w-full h-full pointer-events-none flex flex-col justify-center items-center p-0 lg:p-[40px_0]',\n          props.items.find(item => item.id === openId)?.theme === 'dark' ? 'group theme-dark' : '',\n        ]\"\n      >\n        <motion.div\n          class=\"relative pointer-events-auto select-none bg-background overflow-hidden m-auto overflow-y-auto w-screen max-w-full h-screen rounded-none lg:w-auto lg:max-w-[700px] lg:h-[70dvh] lg:rounded-[20px]\"\n          :layout-id=\"`card-container-${openId}`\"\n        >\n          <motion.div\n            class=\"relative overflow-hidden w-full h-[280px] lg:h-[420px]\"\n            :layout-id=\"`card-image-container-${openId}`\"\n          >\n            <motion.img\n              class=\"absolute inset-0 z-10 w-full h-full object-cover pointer-events-none\"\n              :src=\"props.items.find(item => item.id === openId)?.image\"\n              alt=\"\"\n              :layout-id=\"`card-image-${openId}`\"\n              :initial=\"{ opacity: 0, filter: 'blur(12px)' }\"\n              :animate=\"{ opacity: 1, filter: 'blur(0px)' }\"\n              :exit=\"{ opacity: 0, filter: 'blur(12px)' }\"\n              :transition=\"{ duration: 0.5 }\"\n            />\n            <div\n              :class=\"[\n                'absolute inset-0 z-10 pointer-events-none',\n                props.items.find(item => item.id === openId)?.theme === 'dark'\n                  ? 'bg-linear-[160deg,rgba(255,255,255,0.95)_-8%,rgba(255,255,255,0)_30%]'\n                  : 'bg-linear-[160deg,rgba(0,0,0,0.95)_-8%,rgba(0,0,0,0)_30%]'\n              ]\"\n            />\n            <motion.div\n              class=\"absolute top-0 left-0 z-20 p-5\"\n              :layout-id=\"`title-container-${openId}`\"\n              layout=\"position\"\n            >\n              <span\n                :class=\"[\n                  'px-2 py-1 rounded-[12px] text-[12px] uppercase backdrop-blur-[8px]',\n                  'text-white bg-white/10 group-[.theme-dark]:text-black/90 group-[.theme-dark]:bg-black/10'\n                ]\"\n              >\n                {{ props.items.find(item => item.id === openId)?.category }}\n              </span>\n              <h2\n                :class=\"[\n                  'my-2 text-[20px] font-semibold',\n                  'text-white group-[.theme-dark]:text-black/90'\n                ]\"\n              >\n                {{ props.items.find(item => item.id === openId)?.title }}\n              </h2>\n            </motion.div>\n            <motion.div\n              class=\"absolute top-0 right-0 z-20 p-5 cursor-pointer\"\n              @click=\"close\"\n            >\n              <XIcon class=\"stroke-white group-[.theme-dark]:stroke-black/90\" />\n            </motion.div>\n          </motion.div>\n          <motion.div\n            class=\"p-[35px] max-w-[700px] w-screen text-primary\"\n          >\n            <div v-html=\"props.items.find(item => item.id === openId)?.content\" />\n          </motion.div>\n        </motion.div>\n      </div>\n    </AnimatePresence>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",