sigma-ui 1.0.13 → 1.0.15

package/__generated/registry-schemes/style-system/css/range-calendar.json

@@ -5,19 +5,19 @@
   "files": [
     {
       "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui';\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.';\n\nconst props = defineProps<RangeCalendarRootProps>();\nconst emits = defineEmits<RangeCalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    class=\"sigma-ui-range-calendar\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"sigma-ui-range-calendar__grid-container\">\n      <RangeCalendarGrid\n        v-for=\"month in grid\"\n        :key=\"month.value.toString()\"\n      >\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\"\n              :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow\n            v-for=\"(weekDates, index) in month.rows\"\n            :key=\"`weekDate-${index}`\"\n            class=\"sigma-ui-range-calendar__week-row\"\n          >\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n\n<style>\n.sigma-ui-range-calendar {\n  padding: 0.75rem;\n}\n\n.sigma-ui-range-calendar__grid-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.sigma-ui-range-calendar__week-row {\n  margin-top: 0.5rem;\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-range-calendar__grid-container {\n    flex-direction: row;\n    gap: 1rem;\n  }\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui';\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.';\n\nconst props = defineProps<RangeCalendarRootProps>();\nconst emits = defineEmits<RangeCalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    class=\"sigma-ui-range-calendar\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"sigma-ui-range-calendar__grid-container\">\n      <RangeCalendarGrid\n        v-for=\"month in grid\"\n        :key=\"month.value.toString()\"\n      >\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\"\n              :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow\n            v-for=\"(weekDates, index) in month.rows\"\n            :key=\"`weekDate-${index}`\"\n            class=\"sigma-ui-range-calendar__week-row\"\n          >\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n\n<style>\n.sigma-ui-range-calendar {\n  padding: 0.75rem;\n}\n\n.sigma-ui-range-calendar__grid-container {\n  display: flex;\n  flex-direction: column;\n  margin-top: 1rem;\n  gap: 1rem;\n}\n\n.sigma-ui-range-calendar__week-row {\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-range-calendar__grid-container {\n    flex-direction: row;\n    gap: 1rem;\n  }\n}\n</style>\n"
     },
     {
       "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  height: 2.25rem;\n  width: 2.25rem;\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem;\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-top-left-radius: var(--radius-md);\n  border-bottom-left-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:last-child:has([data-selected]) {\n  border-top-right-radius: var(--radius-md);\n  border-bottom-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) / 0.5);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-end]) {\n  border-top-right-radius: var(--radius-md);\n  border-bottom-right-radius: var(--radius-md);\n}\n\n.sigma-ui-range-calendar-cell:has([data-selected][data-selection-start]) {\n  border-top-left-radius: var(--radius-md);\n  border-bottom-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(--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"
     },
     {
       "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  height: 2.25rem;\n  width: 2.25rem;\n  padding: 0;\n  font-weight: normal;\n  background-color: transparent;\n  border-radius: var(--radius-sm);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\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  pointer-events: none;\n  color: hsl(var(--muted-foreground));\n  opacity: 0.5;\n}\n\n.sigma-ui-range-calendar-cell-trigger[data-outside-month][data-selected] {\n  background-color: hsl(var(--accent) / 0.5);\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(--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"
     },
     {
       "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGrid\n    class=\"sigma-ui-range-calendar-grid\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid {\n  width: 100%;\n  border-collapse: collapse;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGrid\n    class=\"sigma-ui-range-calendar-grid\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  border-collapse: collapse;\n  gap: 0.25rem;\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarGridBody.vue",
@@ -29,11 +29,11 @@
     },
     {
       "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridRowProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGridRow\n    class=\"sigma-ui-range-calendar-grid-row\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid-row {\n  display: flex;\n  margin-top: 0.5rem;\n  width: 100%;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridRowProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarGridRow\n    class=\"sigma-ui-range-calendar-grid-row\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n\n<style>\n.sigma-ui-range-calendar-grid-row {\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    class=\"sigma-ui-range-calendar-head-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-head-cell {\n  width: 2rem;\n  border-radius: var(--radius-md);\n  font-size: 0.8rem;\n  font-weight: normal;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    class=\"sigma-ui-range-calendar-head-cell\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n\n<style>\n.sigma-ui-range-calendar-head-cell {\n  width: 2rem;\n  border-radius: var(--radius-md);\n  color: hsl(var(--muted-foreground));\n  font-size: 0.8rem;\n  font-weight: normal;\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarHeader.vue",
@@ -45,11 +45,11 @@
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarNext\n    class=\"sigma-ui-range-calendar-next\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"sigma-ui-range-calendar-next__icon\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n\n<style>\n.sigma-ui-range-calendar-next {\n  height: 1.75rem;\n  width: 1.75rem;\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.5;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-range-calendar-next:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-next__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarNext\n    class=\"sigma-ui-range-calendar-next\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"sigma-ui-range-calendar-next__icon\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n\n<style>\n.sigma-ui-range-calendar-next {\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: transparent;\n  opacity: 0.5;\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-next:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-next__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarPrev\n    class=\"sigma-ui-range-calendar-prev\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"sigma-ui-range-calendar-prev__icon\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n\n<style>\n.sigma-ui-range-calendar-prev {\n  height: 1.75rem;\n  width: 1.75rem;\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.5;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-range-calendar-prev:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-prev__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<RangeCalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarPrev\n    class=\"sigma-ui-range-calendar-prev\"\n    :class=\"[buttonVariants({ variant: 'outline' })]\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"sigma-ui-range-calendar-prev__icon\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n\n<style>\n.sigma-ui-range-calendar-prev {\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background-color: transparent;\n  opacity: 0.5;\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-prev:hover {\n  opacity: 1;\n}\n\n.sigma-ui-range-calendar-prev__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -5,11 +5,11 @@
   "files": [
     {
       "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui';\nimport { GripVerticalIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SplitterResizeHandleProps & { withHandle?: boolean }>();\nconst emits = defineEmits<SplitterResizeHandleEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SplitterResizeHandle\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-resizable-handle\"\n  >\n    <template v-if=\"props.withHandle\">\n      <div class=\"sigma-ui-resizable-handle__grip\">\n        <GripVerticalIcon class=\"sigma-ui-resizable-handle__grip-icon\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n\n<style>\n.sigma-ui-resizable-handle {\n  position: relative;\n  display: flex;\n  width: 1px;\n  align-items: center;\n  justify-content: center;\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-resizable-handle::after {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  left: 50%;\n  width: 4px;\n  transform: translateX(-50%);\n}\n\n.sigma-ui-resizable-handle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 1px hsl(var(--ring)), 0 0 0 2px hsl(var(--background));\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"] {\n  height: 1px;\n  width: 100%;\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"]::after {\n  left: 0;\n  height: 4px;\n  width: 100%;\n  transform: translateY(-50%);\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"] > div {\n  transform: rotate(90deg);\n}\n\n.sigma-ui-resizable-handle__grip {\n  z-index: 10;\n  display: flex;\n  height: 1rem;\n  width: 0.75rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-sm);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-resizable-handle__grip-icon {\n  height: 0.625rem;\n  width: 0.625rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui';\nimport { GripVerticalIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SplitterResizeHandleProps & { withHandle?: boolean }>();\nconst emits = defineEmits<SplitterResizeHandleEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SplitterResizeHandle\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-resizable-handle\"\n  >\n    <template v-if=\"props.withHandle\">\n      <div class=\"sigma-ui-resizable-handle__grip\">\n        <GripVerticalIcon class=\"sigma-ui-resizable-handle__grip-icon\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n\n<style>\n.sigma-ui-resizable-handle {\n  position: relative;\n  display: flex;\n  width: 1px;\n  align-items: center;\n  justify-content: center;\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-resizable-handle::after {\n  position: absolute;\n  left: 50%;\n  width: 4px;\n  content: '';\n  inset-block: 0;\n  transform: translateX(-50%);\n}\n\n.sigma-ui-resizable-handle:focus-visible {\n  box-shadow: 0 0 0 1px hsl(var(--ring)), 0 0 0 2px hsl(var(--background));\n  outline: none;\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"] {\n  width: 100%;\n  height: 1px;\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"]::after {\n  left: 0;\n  width: 100%;\n  height: 4px;\n  transform: translateY(-50%);\n}\n\n.sigma-ui-resizable-handle[data-orientation=\"vertical\"] > div {\n  transform: rotate(90deg);\n}\n\n.sigma-ui-resizable-handle__grip {\n  z-index: 10;\n  display: flex;\n  width: 0.75rem;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-resizable-handle__grip-icon {\n  width: 0.625rem;\n  height: 0.625rem;\n}\n</style>\n"
     },
     {
       "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SplitterGroupProps>();\nconst emits = defineEmits<SplitterGroupEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n\n</script>\n\n<template>\n  <SplitterGroup\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-resizable-panel-group\"\n  >\n    <slot />\n  </SplitterGroup>\n</template>\n\n<style>\n.sigma-ui-resizable-panel-group {\n  display: flex;\n  height: 100%;\n  width: 100%;\n}\n\n.sigma-ui-resizable-panel-group[data-panel-group-direction=\"vertical\"] {\n  flex-direction: column;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SplitterGroupProps>();\nconst emits = defineEmits<SplitterGroupEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n\n</script>\n\n<template>\n  <SplitterGroup\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-resizable-panel-group\"\n  >\n    <slot />\n  </SplitterGroup>\n</template>\n\n<style>\n.sigma-ui-resizable-panel-group {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.sigma-ui-resizable-panel-group[data-panel-group-direction=\"vertical\"] {\n  flex-direction: column;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/css/scroll-area.json

@@ -5,11 +5,11 @@
   "files": [
     {
       "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui';\n\nimport ScrollBar from './ScrollBar.vue';\n\nconst props = defineProps<ScrollAreaRootProps>();\n</script>\n\n<template>\n  <ScrollAreaRoot\n    v-bind=\"props\"\n    class=\"sigma-ui-scroll-area\"\n  >\n    <ScrollAreaViewport class=\"sigma-ui-scroll-area__viewport\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n\n<style>\n.sigma-ui-scroll-area {\n  position: relative;\n  overflow: hidden;\n}\n\n.sigma-ui-scroll-area__viewport {\n  height: 100%;\n  width: 100%;\n  border-radius: inherit;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui';\n\nimport ScrollBar from './ScrollBar.vue';\n\nconst props = defineProps<ScrollAreaRootProps>();\n</script>\n\n<template>\n  <ScrollAreaRoot\n    v-bind=\"props\"\n    class=\"sigma-ui-scroll-area\"\n  >\n    <ScrollAreaViewport class=\"sigma-ui-scroll-area__viewport\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n\n<style>\n.sigma-ui-scroll-area {\n  position: relative;\n  overflow: hidden;\n}\n\n.sigma-ui-scroll-area__viewport {\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n</style>\n"
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n});\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\n    class=\"sigma-ui-scroll-area-scrollbar\"\n  >\n    <ScrollAreaThumb class=\"sigma-ui-scroll-area-scrollbar__thumb\" />\n  </ScrollAreaScrollbar>\n</template>\n\n<style>\n.sigma-ui-scroll-area-scrollbar {\n  display: flex;\n  touch-action: none;\n  user-select: none;\n  transition-property: color, background-color, border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-scroll-area-scrollbar[data-orientation=\"vertical\"] {\n  height: 100%;\n  width: 0.625rem;\n  border-left: 1px solid transparent;\n  padding: 1px;\n}\n\n.sigma-ui-scroll-area-scrollbar[data-orientation=\"horizontal\"] {\n  height: 0.625rem;\n  flex-direction: column;\n  border-top: 1px solid transparent;\n  padding: 1px;\n}\n\n.sigma-ui-scroll-area-scrollbar__thumb {\n  position: relative;\n  flex: 1;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--border));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n});\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\n    class=\"sigma-ui-scroll-area-scrollbar\"\n  >\n    <ScrollAreaThumb class=\"sigma-ui-scroll-area-scrollbar__thumb\" />\n  </ScrollAreaScrollbar>\n</template>\n\n<style>\n.sigma-ui-scroll-area-scrollbar {\n  display: flex;\n  touch-action: none;\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  user-select: none;\n}\n\n.sigma-ui-scroll-area-scrollbar[data-orientation=\"vertical\"] {\n  width: 0.625rem;\n  height: 100%;\n  padding: 1px;\n  border-left: 1px solid transparent;\n}\n\n.sigma-ui-scroll-area-scrollbar[data-orientation=\"horizontal\"] {\n  height: 0.625rem;\n  flex-direction: column;\n  padding: 1px;\n  border-top: 1px solid transparent;\n}\n\n.sigma-ui-scroll-area-scrollbar__thumb {\n  position: relative;\n  flex: 1;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--border));\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -9,15 +9,15 @@
     },
     {
       "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  max-height: 24rem;\n  min-width: 8rem;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slideFromTop 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slideFromBottom 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slideFromRight 150ms ease-out;\n}\n\n.sigma-ui-select-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slideFromLeft 150ms ease-out;\n}\n\n@keyframes slideFromTop {\n  from {\n    transform: translateY(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromBottom {\n  from {\n    transform: translateY(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromLeft {\n  from {\n    transform: translateX(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromRight {\n  from {\n    transform: translateX(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n.sigma-ui-select-content__viewport {\n  padding: 0.25rem;\n}\n\n.sigma-ui-select-content__viewport--popper {\n  height: var(--reka-select-trigger-height);\n  width: 100%;\n  min-width: var(--reka-select-trigger-width);\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  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",
-      "content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui';\n\nconst props = defineProps<SelectGroupProps>();\n</script>\n\n<template>\n  <SelectGroup\n    class=\"sigma-ui-select-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectGroup>\n</template>\n\n<style>\n.sigma-ui-select-group {\n  padding: 0.25rem;\n  width: 100%;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui';\n\nconst props = defineProps<SelectGroupProps>();\n</script>\n\n<template>\n  <SelectGroup\n    class=\"sigma-ui-select-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectGroup>\n</template>\n\n<style>\n.sigma-ui-select-group {\n  width: 100%;\n  padding: 0.25rem;\n}\n</style>\n"
     },
     {
       "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  cursor: default;\n  user-select: none;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  outline: none;\n}\n\n.sigma-ui-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  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-select-item__indicator-wrapper {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  height: 0.875rem;\n  width: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-select-item__check-icon {\n  height: 1rem;\n  width: 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(--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"
     },
     {
       "name": "SelectItemText.vue",
@@ -29,19 +29,19 @@
     },
     {
       "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectScrollDownButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n\n</script>\n\n<template>\n  <SelectScrollDownButton\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-scroll-down\"\n  >\n    <slot>\n      <ChevronDownIcon class=\"sigma-ui-select-scroll-down__icon\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n\n<style>\n.sigma-ui-select-scroll-down {\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem 0;\n}\n\n.sigma-ui-select-scroll-down__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectScrollDownButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n\n</script>\n\n<template>\n  <SelectScrollDownButton\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-scroll-down\"\n  >\n    <slot>\n      <ChevronDownIcon class=\"sigma-ui-select-scroll-down__icon\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n\n<style>\n.sigma-ui-select-scroll-down {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem 0;\n  cursor: default;\n}\n\n.sigma-ui-select-scroll-down__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronUpIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectScrollUpButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectScrollUpButton\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-scroll-up\"\n  >\n    <slot>\n      <ChevronUpIcon class=\"sigma-ui-select-scroll-up__icon\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n\n<style>\n.sigma-ui-select-scroll-up {\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem 0;\n}\n\n.sigma-ui-select-scroll-up__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronUpIcon } from 'lucide-vue-next';\n\nconst props = defineProps<SelectScrollUpButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectScrollUpButton\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-select-scroll-up\"\n  >\n    <slot>\n      <ChevronUpIcon class=\"sigma-ui-select-scroll-up__icon\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n\n<style>\n.sigma-ui-select-scroll-up {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem 0;\n  cursor: default;\n}\n\n.sigma-ui-select-scroll-up__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui';\n\nconst props = defineProps<SelectSeparatorProps>();\n</script>\n\n<template>\n  <SelectSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-select-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-select-separator {\n  margin: 0.25rem -0.25rem;\n  height: 1px;\n  background-color: hsl(var(--muted));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui';\n\nconst props = defineProps<SelectSeparatorProps>();\n</script>\n\n<template>\n  <SelectSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-select-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-select-separator {\n  height: 1px;\n  margin: 0.25rem -0.25rem;\n  background-color: hsl(var(--muted));\n}\n</style>\n"
     },
     {
       "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  height: 2.5rem;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.sigma-ui-select-trigger:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\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  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\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(--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"
     },
     {
       "name": "SelectValue.vue",

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'reka-ui';\n\nconst props = defineProps<\n  SeparatorProps & { label?: string }\n>();\n</script>\n\n<template>\n  <Separator\n    v-bind=\"props\"\n    class=\"sigma-ui-separator\"\n  >\n    <span\n      v-if=\"props.label\"\n\n      class=\"sigma-ui-separator__label\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n\n<style>\n.sigma-ui-separator {\n  flex-shrink: 0;\n  background-color: hsl(var(--border));\n  position: relative;\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] {\n  width: 1px;\n  height: 100%;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] {\n  height: 1px;\n  width: 100%;\n}\n\n.sigma-ui-separator__label {\n  font-size: 0.75rem;\n  color: hsl(var(--muted-foreground));\n  background-color: hsl(var(--background));\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] .sigma-ui-separator__label {\n  width: 1px;\n  padding: 0 0.25rem;\n  padding-block: 0.5rem;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] .sigma-ui-separator__label {\n  height: 1px;\n  padding: 0.25rem 0;\n  padding-inline: 0.5rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'reka-ui';\n\nconst props = defineProps<\n  SeparatorProps & { label?: string }\n>();\n</script>\n\n<template>\n  <Separator\n    v-bind=\"props\"\n    class=\"sigma-ui-separator\"\n  >\n    <span\n      v-if=\"props.label\"\n\n      class=\"sigma-ui-separator__label\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n\n<style>\n.sigma-ui-separator {\n  position: relative;\n  flex-shrink: 0;\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] {\n  width: 1px;\n  height: 100%;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] {\n  width: 100%;\n  height: 1px;\n}\n\n.sigma-ui-separator__label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsl(var(--background));\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  transform: translate(-50%, -50%);\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] .sigma-ui-separator__label {\n  width: 1px;\n  padding: 0 0.25rem;\n  padding-block: 0.5rem;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] .sigma-ui-separator__label {\n  height: 1px;\n  padding: 0.25rem 0;\n  padding-inline: 0.5rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -13,23 +13,23 @@
     },
     {
       "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  inset: 0;\n  z-index: 50;\n  background-color: rgba(0, 0, 0, 0.8);\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 rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease-in-out;\n}\n\n.sigma-ui-sheet-content__base[data-state=\"open\"] {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  animation-duration: 500ms;\n}\n\n.sigma-ui-sheet-content__base[data-state=\"closed\"] {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  animation-duration: 300ms;\n}\n\n.sigma-ui-sheet-content--top {\n  inset-inline: 0;\n  top: 0;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-sheet-content--top[data-state=\"closed\"] {\n  animation-name: slideOutToTop;\n}\n\n.sigma-ui-sheet-content--top[data-state=\"open\"] {\n  animation-name: slideInFromTop;\n}\n\n.sigma-ui-sheet-content--bottom {\n  inset-inline: 0;\n  bottom: 0;\n  border-top: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"closed\"] {\n  animation-name: slideOutToBottom;\n}\n\n.sigma-ui-sheet-content--bottom[data-state=\"open\"] {\n  animation-name: slideInFromBottom;\n}\n\n.sigma-ui-sheet-content--left {\n  inset-block: 0;\n  left: 0;\n  height: 100%;\n  width: 75%;\n  border-right: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-sheet-content--left[data-state=\"closed\"] {\n  animation-name: slideOutToLeft;\n}\n\n.sigma-ui-sheet-content--left[data-state=\"open\"] {\n  animation-name: slideInFromLeft;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-sheet-content--left {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-content--right {\n  inset-block: 0;\n  right: 0;\n  height: 100%;\n  width: 75%;\n  border-left: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-sheet-content--right[data-state=\"closed\"] {\n  animation-name: slideOutToRight;\n}\n\n.sigma-ui-sheet-content--right[data-state=\"open\"] {\n  animation-name: slideInFromRight;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-sheet-content--right {\n    max-width: 24rem;\n  }\n}\n\n.sigma-ui-sheet-close {\n  position: absolute;\n  right: 1rem;\n  top: 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  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\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 overlayShow {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlayHide {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slideInFromTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOutToTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideInFromBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOutToBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes slideInFromLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutToLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideInFromRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutToRight {\n  from {\n    transform: translateX(0);\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: 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"
     },
     {
       "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n</script>\n\n<template>\n  <DialogDescription\n    class=\"sigma-ui-sheet-description\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-sheet-description {\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui';\n\nconst props = defineProps<DialogDescriptionProps>();\n</script>\n\n<template>\n  <DialogDescription\n    class=\"sigma-ui-sheet-description\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<style>\n.sigma-ui-sheet-description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-sheet-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-footer {\n  display: flex;\n  flex-direction: column-reverse;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-footer {\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n}\n</style>\n"
     },
     {
       "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .sigma-ui-sheet-header {\n    text-align: left;\n  }\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-sheet-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-sheet-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  text-align: center;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-sheet-header {\n    text-align: left;\n  }\n}\n</style>\n"
     },
     {
       "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n</script>\n\n<template>\n  <DialogTitle\n    class=\"sigma-ui-sheet-title\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-sheet-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: hsl(var(--foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui';\n\nconst props = defineProps<DialogTitleProps>();\n</script>\n\n<template>\n  <DialogTitle\n    class=\"sigma-ui-sheet-title\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<style>\n.sigma-ui-sheet-title {\n  color: hsl(var(--foreground));\n  font-size: 1.125rem;\n  font-weight: 600;\n}\n</style>\n"
     },
     {
       "name": "SheetTrigger.vue",

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

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

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui';\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SliderRootProps>();\nconst emits = defineEmits<SliderRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SliderRoot\n    class=\"sigma-ui-slider\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"sigma-ui-slider__track\">\n      <SliderRange class=\"sigma-ui-slider__range\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"sigma-ui-slider__thumb\"\n    />\n  </SliderRoot>\n</template>\n\n<style>\n.sigma-ui-slider {\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 50px;\n  touch-action: none;\n  user-select: none;\n  align-items: center;\n}\n\n.sigma-ui-slider__track {\n  position: relative;\n  height: 0.5rem;\n  width: 100%;\n  flex-grow: 1;\n  overflow: hidden;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-slider__range {\n  position: absolute;\n  height: 100%;\n  background-color: hsl(var(--primary));\n}\n\n.sigma-ui-slider__thumb {\n  display: block;\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: var(--radius-full);\n  border: 2px solid hsl(var(--primary));\n  background-color: hsl(var(--background));\n  transition-property: color, background-color, border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-slider__thumb:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n}\n\n.sigma-ui-slider__thumb:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui';\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SliderRootProps>();\nconst emits = defineEmits<SliderRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SliderRoot\n    class=\"sigma-ui-slider\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"sigma-ui-slider__track\">\n      <SliderRange class=\"sigma-ui-slider__range\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"sigma-ui-slider__thumb\"\n    />\n  </SliderRoot>\n</template>\n\n<style>\n.sigma-ui-slider {\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 50px;\n  align-items: center;\n  touch-action: none;\n  user-select: none;\n}\n\n.sigma-ui-slider__track {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 0.5rem;\n  flex-grow: 1;\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-slider__range {\n  position: absolute;\n  height: 100%;\n  background-color: hsl(var(--primary));\n}\n\n.sigma-ui-slider__thumb {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid hsl(var(--primary));\n  border-radius: var(--radius-full);\n  background-color: hsl(var(--background));\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-slider__thumb: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-slider__thumb:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

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

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

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div class=\"sigma-ui-table-wrapper\">\n    <table\n      class=\"sigma-ui-table\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </table>\n  </div>\n</template>\n\n<style>\n.sigma-ui-table-wrapper {\n  position: relative;\n  width: 100%;\n  overflow: auto;\n}\n\n.sigma-ui-table {\n  width: 100%;\n  caption-side: bottom;\n  font-size: 0.875rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div class=\"sigma-ui-table-wrapper\">\n    <table\n      class=\"sigma-ui-table\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </table>\n  </div>\n</template>\n\n<style>\n.sigma-ui-table-wrapper {\n  position: relative;\n  overflow: auto;\n  width: 100%;\n}\n\n.sigma-ui-table {\n  width: 100%;\n  caption-side: bottom;\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "TableBody.vue",
@@ -13,23 +13,23 @@
     },
     {
       "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <caption\n    class=\"sigma-ui-table-caption\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </caption>\n</template>\n\n<style>\n.sigma-ui-table-caption {\n  margin-top: 1rem;\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <caption\n    class=\"sigma-ui-table-caption\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </caption>\n</template>\n\n<style>\n.sigma-ui-table-caption {\n  margin-top: 1rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <td\n    class=\"sigma-ui-table-cell\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </td>\n</template>\n\n<style>\n.sigma-ui-table-cell {\n  padding: 1rem;\n  vertical-align: middle;\n}\n\n.sigma-ui-table-cell:has([role=checkbox]) {\n  padding-right: 0;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <td\n    class=\"sigma-ui-table-cell\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </td>\n</template>\n\n<style>\n.sigma-ui-table-cell {\n  padding: 1rem;\n  vertical-align: middle;\n}\n\n.sigma-ui-table-cell:has([role=\"checkbox\"]) {\n  padding-right: 0;\n}\n</style>\n"
     },
     {
       "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue';\nimport TableCell from './TableCell.vue';\n\nconst props = withDefaults(defineProps<{\n  colspan?: number;\n}>(), {\n  colspan: 1,\n});\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      class=\"sigma-ui-table-empty\"\n      :class=\"[$attrs.class]\"\n      v-bind=\"props\"\n    >\n      <div class=\"sigma-ui-table-empty__content\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n\n<style>\n.sigma-ui-table-empty {\n  padding: 1rem;\n  white-space: nowrap;\n  vertical-align: middle;\n  font-size: 0.875rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-table-empty__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue';\nimport TableCell from './TableCell.vue';\n\nconst props = withDefaults(defineProps<{\n  colspan?: number;\n}>(), {\n  colspan: 1,\n});\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      class=\"sigma-ui-table-empty\"\n      :class=\"[$attrs.class]\"\n      v-bind=\"props\"\n    >\n      <div class=\"sigma-ui-table-empty__content\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n\n<style>\n.sigma-ui-table-empty {\n  padding: 1rem;\n  color: hsl(var(--foreground));\n  font-size: 0.875rem;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.sigma-ui-table-empty__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n</style>\n"
     },
     {
       "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <tfoot\n    class=\"sigma-ui-table-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </tfoot>\n</template>\n\n<style>\n.sigma-ui-table-footer {\n  border-top: 1px solid hsl(var(--border));\n  background-color: hsl(var(--muted) / 0.5);\n  font-weight: 500;\n}\n\n.sigma-ui-table-footer > tr:last-child {\n  border-bottom: 0;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <tfoot\n    class=\"sigma-ui-table-footer\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </tfoot>\n</template>\n\n<style>\n.sigma-ui-table-footer {\n  border-top: 1px solid hsl(var(--border));\n  background-color: hsl(var(--muted) / 50%);\n  font-weight: 500;\n}\n\n.sigma-ui-table-footer > tr:last-child {\n  border-bottom: 0;\n}\n</style>\n"
     },
     {
       "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <th\n    class=\"sigma-ui-table-head\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </th>\n</template>\n\n<style>\n.sigma-ui-table-head {\n  height: 3rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  text-align: left;\n  vertical-align: middle;\n  font-weight: 500;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-table-head:has([role=checkbox]) {\n  padding-right: 0;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <th\n    class=\"sigma-ui-table-head\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </th>\n</template>\n\n<style>\n.sigma-ui-table-head {\n  height: 3rem;\n  padding-right: 1rem;\n  padding-left: 1rem;\n  color: hsl(var(--muted-foreground));\n  font-weight: 500;\n  text-align: left;\n  vertical-align: middle;\n}\n\n.sigma-ui-table-head:has([role=\"checkbox\"]) {\n  padding-right: 0;\n}\n</style>\n"
     },
     {
       "name": "TableHeader.vue",
@@ -37,7 +37,7 @@
     },
     {
       "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <tr\n    class=\"sigma-ui-table-row\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </tr>\n</template>\n\n<style>\n.sigma-ui-table-row {\n  border-bottom: 1px solid hsl(var(--border));\n  transition-property: color, background-color, border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-table-row:hover {\n  background-color: hsl(var(--muted) / 0.5);\n}\n\n.sigma-ui-table-row[data-state=\"selected\"] {\n  background-color: hsl(var(--muted));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <tr\n    class=\"sigma-ui-table-row\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </tr>\n</template>\n\n<style>\n.sigma-ui-table-row {\n  border-bottom: 1px solid hsl(var(--border));\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-table-row:hover {\n  background-color: hsl(var(--muted) / 50%);\n}\n\n.sigma-ui-table-row[data-state=\"selected\"] {\n  background-color: hsl(var(--muted));\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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

@@ -9,15 +9,15 @@
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'reka-ui';\n\nconst props = defineProps<TabsContentProps>();\n</script>\n\n<template>\n  <TabsContent\n    v-bind=\"props\"\n    class=\"sigma-ui-tabs-content\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n\n<style>\n.sigma-ui-tabs-content {\n  margin-top: 0.5rem;\n}\n\n.sigma-ui-tabs-content:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'reka-ui';\n\nconst props = defineProps<TabsContentProps>();\n</script>\n\n<template>\n  <TabsContent\n    v-bind=\"props\"\n    class=\"sigma-ui-tabs-content\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n\n<style>\n.sigma-ui-tabs-content {\n  margin-top: 0.5rem;\n}\n\n.sigma-ui-tabs-content:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n  outline: none;\n}\n</style>\n"
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'reka-ui';\n\nconst props = defineProps<TabsListProps>();\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    class=\"sigma-ui-tabs-list\"\n  >\n    <slot />\n  </TabsList>\n</template>\n\n<style>\n.sigma-ui-tabs-list {\n  display: inline-flex;\n  height: 2.5rem;\n  padding: 2px;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'reka-ui';\n\nconst props = defineProps<TabsListProps>();\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    class=\"sigma-ui-tabs-list\"\n  >\n    <slot />\n  </TabsList>\n</template>\n\n<style>\n.sigma-ui-tabs-list {\n  display: inline-flex;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
     },
     {
       "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  flex: 1;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  border-radius: var(--radius-sm);\n  padding-inline: 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-tabs-trigger:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n}\n\n.sigma-ui-tabs-trigger:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-tabs-trigger[data-state=\"active\"] {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\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(--background));\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,11 +7,11 @@
   "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  gap: 0.5rem;\n  align-items: center;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\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(--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"
     },
     {
       "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TagsInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-tags-input-input {\n  flex: 1;\n  min-height: 1.5rem;\n  padding-inline: 0.25rem;\n  font-size: 0.875rem;\n  background-color: transparent;\n}\n\n.sigma-ui-tags-input-input:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TagsInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-tags-input-input {\n  min-height: 1.5rem;\n  flex: 1;\n  background-color: transparent;\n  font-size: 0.875rem;\n  padding-inline: 0.25rem;\n}\n\n.sigma-ui-tags-input-input:focus-visible {\n  box-shadow: none;\n  outline: none;\n}\n</style>\n"
     },
     {
       "name": "TagsInputItem.vue",
@@ -19,11 +19,11 @@
     },
     {
       "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<TagsInputItemDeleteProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItemDelete\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-item-delete\"\n  >\n    <slot>\n      <XIcon class=\"sigma-ui-tags-input-item-delete__icon\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n\n<style>\n.sigma-ui-tags-input-item-delete {\n  display: flex;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  margin-right: 0.25rem;\n  cursor: pointer;\n}\n\n.sigma-ui-tags-input-item-delete:hover {\n  background-color: hsl(var(--muted));\n}\n\n.sigma-ui-tags-input-item-delete__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\n\nconst props = defineProps<TagsInputItemDeleteProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItemDelete\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-item-delete\"\n  >\n    <slot>\n      <XIcon class=\"sigma-ui-tags-input-item-delete__icon\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n\n<style>\n.sigma-ui-tags-input-item-delete {\n  display: flex;\n  border-radius: var(--radius-sm);\n  margin-right: 0.25rem;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.sigma-ui-tags-input-item-delete:hover {\n  background-color: hsl(var(--muted));\n}\n\n.sigma-ui-tags-input-item-delete__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
     },
     {
       "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TagsInputItemTextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItemText\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-item-text\"\n  />\n</template>\n\n<style>\n.sigma-ui-tags-input-item-text {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TagsInputItemTextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItemText\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-item-text\"\n  />\n</template>\n\n<style>\n.sigma-ui-tags-input-item-text {\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "index.ts",

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  min-height: 5rem;\n  width: 100%;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem 0.75rem;\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  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\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(--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"
     },
     {
       "name": "index.ts",

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

@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "CustomProgress.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@ui/registry/css/ui/button';\n\nexport type ToastItem = {\n  data: {\n    id: number | string;\n    title: string;\n    description: string;\n    progress: number;\n    timer: number;\n    actionText: string;\n    cleanup: () => void;\n  };\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<ToastItem>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-progress\">\n    <div class=\"sigma-ui-toaster-progress__content\">\n      <div class=\"sigma-ui-toaster-progress__header\">\n        {{ props.data.title }}\n        <div\n          v-if=\"props.data.progress && props.data.progress < 100\"\n          class=\"sigma-ui-toaster-progress__percentage\"\n        >\n          {{ props.data.progress }}%\n        </div>\n      </div>\n      <div class=\"sigma-ui-toaster-progress__description\">\n        {{ props.data.description }}\n      </div>\n      <div class=\"sigma-ui-toaster-progress__bar\">\n        <div\n          class=\"sigma-ui-toaster-progress__bar-fill\"\n          :style=\"{ width: `${props.data.progress}%` }\"\n        />\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.data.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-progress {\n  display: flex;\n  width: 100%;\n  gap: 1.5rem;\n  align-items: flex-end;\n  justify-content: space-between;\n  background-color: hsl(var(--background));\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--border));\n  padding: 1rem;\n  box-shadow: var(--shadow-md);\n}\n\n.sigma-ui-toaster-progress__content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.sigma-ui-toaster-progress__header {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n.sigma-ui-toaster-progress__percentage {\n  font-size: 0.75rem;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toaster-progress__description {\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toaster-progress__bar {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  background-color: hsl(var(--primary) / 0.1);\n  border-radius: var(--rounded-full);\n  height: 2px;\n  width: 100%;\n}\n\n.sigma-ui-toaster-progress__bar-fill {\n  background-color: hsl(var(--primary));\n  height: 2px;\n  border-radius: var(--rounded-full);\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@ui/registry/css/ui/button';\n\nexport type ToastItem = {\n  data: {\n    id: number | string;\n    title: string;\n    description: string;\n    progress: number;\n    timer: number;\n    actionText: string;\n    cleanup: () => void;\n  };\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<ToastItem>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-progress\">\n    <div class=\"sigma-ui-toaster-progress__content\">\n      <div class=\"sigma-ui-toaster-progress__header\">\n        {{ props.data.title }}\n        <div\n          v-if=\"props.data.progress && props.data.progress < 100\"\n          class=\"sigma-ui-toaster-progress__percentage\"\n        >\n          {{ props.data.progress }}%\n        </div>\n      </div>\n      <div class=\"sigma-ui-toaster-progress__description\">\n        {{ props.data.description }}\n      </div>\n      <div class=\"sigma-ui-toaster-progress__bar\">\n        <div\n          class=\"sigma-ui-toaster-progress__bar-fill\"\n          :style=\"{ width: `${props.data.progress}%` }\"\n        />\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.data.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-progress {\n  display: flex;\n  width: 100%;\n  align-items: flex-end;\n  justify-content: space-between;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-md);\n  gap: 1.5rem;\n}\n\n.sigma-ui-toaster-progress__content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n}\n\n.sigma-ui-toaster-progress__header {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.5rem;\n}\n\n.sigma-ui-toaster-progress__percentage {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n}\n\n.sigma-ui-toaster-progress__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-toaster-progress__bar {\n  width: 100%;\n  height: 2px;\n  border-radius: var(--rounded-full);\n  margin-top: 0.5rem;\n  background-color: hsl(var(--primary) / 10%);\n  font-size: 0.875rem;\n}\n\n.sigma-ui-toaster-progress__bar-fill {\n  height: 2px;\n  border-radius: var(--rounded-full);\n  background-color: hsl(var(--primary));\n}\n</style>\n"
     },
     {
       "name": "CustomSimple.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@ui/registry/css/ui/button';\n\ntype Props = {\n  title: string;\n  description: string;\n  actionText: string;\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-default\">\n    <div class=\"sigma-ui-toaster-default__content\">\n      <div class=\"sigma-ui-toaster-default__title\">\n        {{ props.title }}\n      </div>\n      <div class=\"sigma-ui-toaster-default__description\">\n        {{ props.description }}\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-default {\n  display: flex;\n  width: 100%;\n  align-items: flex-end;\n  justify-content: space-between;\n  background-color: hsl(var(--background));\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--border));\n  padding: 1rem;\n  box-shadow: var(--shadow-md);\n}\n\n.sigma-ui-toaster-default__title {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n.sigma-ui-toaster-default__description {\n  font-size: 0.875rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@ui/registry/css/ui/button';\n\ntype Props = {\n  title: string;\n  description: string;\n  actionText: string;\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-default\">\n    <div class=\"sigma-ui-toaster-default__content\">\n      <div class=\"sigma-ui-toaster-default__title\">\n        {{ props.title }}\n      </div>\n      <div class=\"sigma-ui-toaster-default__description\">\n        {{ props.description }}\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-default {\n  display: flex;\n  width: 100%;\n  align-items: flex-end;\n  justify-content: space-between;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-md);\n}\n\n.sigma-ui-toaster-default__title {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n.sigma-ui-toaster-default__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
     },
     {
       "name": "Toaster.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Toaster, type ToasterProps } from 'vue-sonner';\n\nconst props = defineProps<ToasterProps>();\n</script>\n\n<template>\n  <Toaster\n    class=\"sigma-ui-toaster\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      ...props.toastOptions,\n      unstyled: true,\n      classes: {\n        toast: 'sigma-ui-toast',\n        description: 'sigma-ui-toast__description',\n        actionButton: 'sigma-ui-toast__action-button',\n        cancelButton: 'sigma-ui-toast__cancel-button',\n      },\n    }\"\n  />\n</template>\n\n<style>\n.sigma-ui-toaster {\n  z-index: 60;\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-width: 420px;\n  pointer-events: auto;\n}\n\n.sigma-ui-toast {\n  width: 100%;\n  cursor: default;\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n  border-radius: var(--radius);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.sigma-ui-toast[data-type=\"default\"] {\n  padding: 0.75rem 1rem;\n  border: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-toast[data-type=\"default\"] [data-content] {\n  display: flex;\n  flex: 1;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__description {\n  width: 100%;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button:hover {\n  opacity: 0.9;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button:hover {\n  opacity: 0.9;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { Toaster, type ToasterProps } from 'vue-sonner';\n\nconst props = defineProps<ToasterProps>();\n</script>\n\n<template>\n  <Toaster\n    class=\"sigma-ui-toaster\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      ...props.toastOptions,\n      unstyled: true,\n      classes: {\n        toast: 'sigma-ui-toast',\n        description: 'sigma-ui-toast__description',\n        actionButton: 'sigma-ui-toast__action-button',\n        cancelButton: 'sigma-ui-toast__cancel-button',\n      },\n    }\"\n  />\n</template>\n\n<style>\n.sigma-ui-toaster {\n  position: fixed;\n  z-index: 60;\n  display: flex;\n  max-width: 420px;\n  flex-direction: column;\n  gap: 10px;\n  pointer-events: auto;\n}\n\n.sigma-ui-toast {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);\n  color: hsl(var(--foreground));\n  cursor: default;\n  gap: 0.5rem;\n}\n\n.sigma-ui-toast[data-type=\"default\"] {\n  padding: 0.75rem 1rem;\n  border: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-toast[data-type=\"default\"] [data-content] {\n  display: flex;\n  flex: 1;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__description {\n  width: 100%;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button:hover {\n  opacity: 0.9;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button:hover {\n  opacity: 0.9;\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-property: color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-toggle:hover {\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-toggle:disabled {\n  pointer-events: none;\n  opacity: 0.5;\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(--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"
     },
     {
       "name": "index.ts",