sigma-ui 0.1.0 → 1.0.11

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

@@ -0,0 +1,20 @@
+{
+  "name": "resizable",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';\nexport { default as ResizableHandle } from './ResizableHandle.vue';\nexport { SplitterPanel as ResizablePanel } from 'reka-ui';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "scroll-area",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ScrollArea } from './ScrollArea.vue';\nexport { default as ScrollBar } from './ScrollBar.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "select",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Select.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui';\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SelectRootProps>();\nconst emits = defineEmits<SelectRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "SelectItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui';\n\nconst props = defineProps<SelectItemTextProps>();\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
+    },
+    {
+      "name": "SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui';\n\nconst props = defineProps<SelectLabelProps>();\n</script>\n\n<template>\n  <SelectLabel\n    class=\"sigma-ui-select-label\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </SelectLabel>\n</template>\n\n<style>\n.sigma-ui-select-label {\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n</style>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "SelectValue.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui';\n\nconst props = defineProps<SelectValueProps>();\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Select } from './Select.vue';\nexport { default as SelectValue } from './SelectValue.vue';\nexport { default as SelectTrigger } from './SelectTrigger.vue';\nexport { default as SelectContent } from './SelectContent.vue';\nexport { default as SelectGroup } from './SelectGroup.vue';\nexport { default as SelectItem } from './SelectItem.vue';\nexport { default as SelectItemText } from './SelectItemText.vue';\nexport { default as SelectLabel } from './SelectLabel.vue';\nexport { default as SelectSeparator } from './SelectSeparator.vue';\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "separator",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Separator } from './Separator.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,44 @@
+{
+  "name": "sheet",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Sheet.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<DialogRootProps>();\nconst emits = defineEmits<DialogRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
+    },
+    {
+      "name": "SheetClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui';\n\nconst props = defineProps<DialogCloseProps>();\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "SheetTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui';\n\nconst props = defineProps<DialogTriggerProps>();\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Sheet } from './Sheet.vue';\nexport { default as SheetTrigger } from './SheetTrigger.vue';\nexport { default as SheetClose } from './SheetClose.vue';\nexport { default as SheetContent } from './SheetContent.vue';\nexport { default as SheetHeader } from './SheetHeader.vue';\nexport { default as SheetTitle } from './SheetTitle.vue';\nexport { default as SheetDescription } from './SheetDescription.vue';\nexport { default as SheetFooter } from './SheetFooter.vue';\n\nexport const sheetVariants = cva(\n  'sigma-ui-sheet-content__base',\n  {\n    variants: {\n      side: {\n        top: 'sigma-ui-sheet-content--top',\n        bottom: 'sigma-ui-sheet-content--bottom',\n        left: 'sigma-ui-sheet-content--left',\n        right: 'sigma-ui-sheet-content--right',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n);\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "skeleton",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Skeleton } from './Skeleton.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "slider",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Slider } from './Slider.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "switch",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Switch } from './Switch.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,48 @@
+{
+  "name": "table",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "TableBody.vue",
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <tbody\n    class=\"sigma-ui-table-body\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </tbody>\n</template>\n\n<style>\n.sigma-ui-table-body tr:last-child {\n  border: 0;\n}\n</style>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <thead\n    class=\"sigma-ui-table-header\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </thead>\n</template>\n\n<style>\n.sigma-ui-table-header tr {\n  border-bottom: 1px solid hsl(var(--border));\n}\n</style>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Table } from './Table.vue';\nexport { default as TableBody } from './TableBody.vue';\nexport { default as TableCell } from './TableCell.vue';\nexport { default as TableHead } from './TableHead.vue';\nexport { default as TableHeader } from './TableHeader.vue';\nexport { default as TableFooter } from './TableFooter.vue';\nexport { default as TableRow } from './TableRow.vue';\nexport { default as TableCaption } from './TableCaption.vue';\nexport { default as TableEmpty } from './TableEmpty.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,28 @@
+{
+  "name": "tabs",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Tabs.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui';\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui';\n\nconst props = defineProps<TabsRootProps>();\nconst emits = defineEmits<TabsRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Tabs } from './Tabs.vue';\nexport { default as TabsTrigger } from './TabsTrigger.vue';\nexport { default as TabsList } from './TabsList.vue';\nexport { default as TabsContent } from './TabsContent.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,34 @@
+{
+  "name": "tags-input",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<TagsInputItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-tags-input-item\"\n  >\n    <slot />\n  </TagsInputItem>\n</template>\n\n<style>\n.sigma-ui-tags-input-item {\n  display: flex;\n  height: 1.5rem;\n  align-items: center;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--secondary));\n}\n\n.sigma-ui-tags-input-item[data-state=\"active\"] {\n  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));\n}\n</style>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue';\nexport { default as TagsInputInput } from './TagsInputInput.vue';\nexport { default as TagsInputItem } from './TagsInputItem.vue';\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';\nexport { default as TagsInputItemText } from './TagsInputItemText.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "textarea",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Textarea } from './Textarea.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,26 @@
+{
+  "name": "toaster",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { toast } from 'vue-sonner';\nexport { default as Toaster } from './Toaster.vue';\nexport { default as CustomSimple } from './CustomSimple.vue';\nexport { default as CustomProgress } from './CustomProgress.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "toggle-group",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority';\nimport { provide } from 'vue';\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui';\nimport type { toggleVariants } from '@ui/registry/css/ui/toggle';\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>;\n\nconst props = defineProps<ToggleGroupRootProps & {\n\n  variant?: ToggleGroupVariants['variant'];\n  size?: ToggleGroupVariants['size'];\n}>();\nconst emits = defineEmits<ToggleGroupRootEmits>();\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n});\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ToggleGroupRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-toggle-group\"\n  >\n    <slot />\n  </ToggleGroupRoot>\n</template>\n\n<style>\n.sigma-ui-toggle-group {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n}\n</style>\n"
+    },
+    {
+      "name": "ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority';\nimport { computed, inject } from 'vue';\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui';\nimport { toggleVariants } from '@ui/registry/css/ui/toggle';\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>;\n\nconst props = defineProps<ToggleGroupItemProps & {\n  variant?: ToggleGroupVariants['variant'];\n  size?: ToggleGroupVariants['size'];\n}>();\n\nconst context = inject<ToggleGroupVariants>('toggleGroup');\n\nconst delegatedProps = computed(() => ({ ...props, variant: undefined, size: undefined }));\n\nconst forwardedProps = useForwardProps(delegatedProps);\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"[\n      toggleVariants({\n        variant: context?.variant || variant,\n        size: context?.size || size,\n      }),\n    ]\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue';\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "toggle",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Toggle } from './Toggle.vue';\n\nexport const toggleVariants = cva(\n  'sigma-ui-toggle',\n  {\n    variants: {\n      variant: {\n        default: 'sigma-ui-toggle--default',\n        outline: 'sigma-ui-toggle--outline',\n      },\n      size: {\n        default: 'sigma-ui-toggle--size-default',\n        sm: 'sigma-ui-toggle--size-sm',\n        lg: 'sigma-ui-toggle--size-lg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,28 @@
+{
+  "name": "tooltip",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<TooltipRootProps>();\nconst emits = defineEmits<TooltipRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
+    },
+    {
+      "name": "TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n});\n\nconst emits = defineEmits<TooltipContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-tooltip-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n\n<style>\n.sigma-ui-tooltip-content {\n  z-index: 50;\n  overflow: hidden;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  padding: 0.375rem 0.75rem;\n  font-size: 0.875rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.sigma-ui-tooltip-content {\n  animation: tooltipIn 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"bottom\"] {\n  animation: tooltipInBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"top\"] {\n  animation: tooltipInTop 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"left\"] {\n  animation: tooltipInLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"right\"] {\n  animation: tooltipInRight 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-state=\"closed\"] {\n  animation: tooltipOut 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes tooltipIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes tooltipOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@keyframes tooltipInBottom {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltipInTop {\n  from {\n    opacity: 0;\n    transform: translateY(0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltipInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes tooltipInRight {\n  from {\n    opacity: 0;\n    transform: translateX(-0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</style>\n"
+    },
+    {
+      "name": "TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui';\n\nconst props = defineProps<TooltipProviderProps>();\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
+    },
+    {
+      "name": "TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui';\n\nconst props = defineProps<TooltipTriggerProps>();\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Tooltip } from './Tooltip.vue';\nexport { default as TooltipContent } from './TooltipContent.vue';\nexport { default as TooltipTrigger } from './TooltipTrigger.vue';\nexport { default as TooltipProvider } from './TooltipProvider.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/index.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "tailwind",
+    "label": "Tailwind"
+  },
+  {
+    "name": "css",
+    "label": "CSS"
+  }
+]

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

@@ -0,0 +1,28 @@
+{
+  "name": "accordion",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Accordion.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<AccordionRootProps>();\nconst emits = defineEmits<AccordionRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+    },
+    {
+      "name": "AccordionContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"forwarded\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', $attrs.class ?? '')\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+    },
+    {
+      "name": "AccordionItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AccordionItemProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwarded\"\n    :class=\"cn('border-b', $attrs.class ?? '')\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+    },
+    {
+      "name": "AccordionTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AccordionTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"forwarded\"\n      :class=\"cn('flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180', $attrs.class ?? '')\"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Accordion } from './Accordion.vue';\nexport { default as AccordionContent } from './AccordionContent.vue';\nexport { default as AccordionItem } from './AccordionItem.vue';\nexport { default as AccordionTrigger } from './AccordionTrigger.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}