sigma-ui 0.1.0 → 1.0.11

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

@@ -0,0 +1,44 @@
+{
+  "name": "form",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "FormControl.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui';\nimport { useFormField } from './useFormField';\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
+    },
+    {
+      "name": "FormDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { useFormField } from './useFormField';\n\nconst { formDescriptionId } = useFormField();\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    class=\"sigma-ui-form-description\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </p>\n</template>\n\n<style>\n.sigma-ui-form-description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+    },
+    {
+      "name": "FormItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { provide } from 'vue';\nimport { useId } from 'reka-ui';\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys';\n\nconst id = useId();\nprovide(FORM_ITEM_INJECTION_KEY, id);\n</script>\n\n<template>\n  <div :class=\"['form-item', $attrs.class]\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.form-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n</style>\n"
+    },
+    {
+      "name": "FormLabel.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui';\nimport { useFormField } from './useFormField';\nimport { Label } from '@ui/registry/css/ui/label';\n\nconst props = defineProps<LabelProps>();\n\nconst { error, formItemId } = useFormField();\n</script>\n\n<template>\n  <Label\n    class=\"sigma-ui-form-label\"\n    :class=\"[$attrs.class ?? '', { 'sigma-ui-form-label--error': error }]\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n\n<style>\n.sigma-ui-form-label {\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-form-label--error {\n  color: hsl(var(--destructive));\n}\n</style>\n"
+    },
+    {
+      "name": "FormMessage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate';\nimport { toValue } from 'vue';\nimport { useFormField } from './useFormField';\n\nconst { name, formMessageId } = useFormField();\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"sigma-ui-form-message\"\n  />\n</template>\n\n<style>\n.sigma-ui-form-message {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  color: hsl(var(--destructive));\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { Form, Field as FormField } from 'vee-validate';\nexport { default as FormItem } from './FormItem.vue';\nexport { default as FormLabel } from './FormLabel.vue';\nexport { default as FormControl } from './FormControl.vue';\nexport { default as FormMessage } from './FormMessage.vue';\nexport { default as FormDescription } from './FormDescription.vue';\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys';\n"
+    },
+    {
+      "name": "injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue';\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>;\n"
+    },
+    {
+      "name": "useFormField.ts",
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate';\nimport { inject } from 'vue';\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys';\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey);\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { name } = fieldContext;\n  const id = fieldItemContext;\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  };\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/css/hover-card.json

@@ -0,0 +1,24 @@
+{
+  "name": "hover-card",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "HoverCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<HoverCardRootProps>();\nconst emits = defineEmits<HoverCardRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+    },
+    {
+      "name": "HoverCardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps>(),\n  {\n    sideOffset: 4,\n  },\n);\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-hover-card-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n\n<style>\n.sigma-ui-hover-card-content {\n  z-index: 50;\n  border-radius: var(--radius-md);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  padding: 1rem;\n  color: hsl(var(--popover-foreground));\n  box-shadow: var(--shadow-md);\n  outline: none;\n  transform-origin: var(--reka-popper-transform-origin);\n  animation: fadeOut 100ms ease-in forwards;\n}\n\n.sigma-ui-hover-card-content[data-state=\"open\"] {\n  animation: fadeIn 200ms ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
+    },
+    {
+      "name": "HoverCardTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui';\n\nconst props = defineProps<HoverCardTriggerProps>();\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as HoverCard } from './HoverCard.vue';\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue';\nexport { default as HoverCardContent } from './HoverCardContent.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "image",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Image.vue",
+      "content": "<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from 'vue';\nimport { useForwardProps } from 'reka-ui';\nimport { ImageIcon, LoaderCircleIcon } from 'lucide-vue-next';\nimport { type ImageVariants, imageVariants } from '.';\n\ntype Emits = {\n  load: [];\n  error: [];\n};\n\nconst props = withDefaults(defineProps<{\n  src?: string;\n  alt?: string;\n  glow?: boolean;\n\n  shape?: ImageVariants['shape'];\n}>(), {\n  alt: 'image',\n  shape: 'rounded',\n});\n\nconst emit = defineEmits<Emits>();\n\ndefineSlots<{\n  fallback: () => any;\n}>();\n\nconst forwardedProps = useForwardProps(props);\n\nconst isError = ref(false);\nconst isLoading = ref(true);\n\nwatch(() => props.src, (value) => {\n  if (!value) {\n    nextTick(() => {\n      isError.value = true;\n      isLoading.value = false;\n    });\n  } else {\n    isError.value = false;\n    isLoading.value = true;\n  }\n}, { immediate: true });\n\nfunction onError() {\n  emit('error');\n  isError.value = true;\n}\n\nfunction onLoad() {\n  emit('load');\n  isError.value = false;\n  isLoading.value = false;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $attrs.class ?? '',\n      imageVariants({ shape }),\n      {\n        'sigma-ui-image--no-overflow': !glow,\n      },\n    ]\"\n    class=\"sigma-ui-image__container\"\n  >\n    <div\n      v-if=\"isError\"\n      class=\"sigma-ui-image__error animate-fade-in\"\n    >\n      <slot name=\"fallback\">\n        <div\n          class=\"sigma-ui-image__fallback-container\"\n        >\n          <ImageIcon class=\"sigma-ui-image__fallback-icon\" />\n          no photo\n        </div>\n      </slot>\n    </div>\n    <div\n      v-else\n      class=\"sigma-ui-image__loader\"\n    >\n      <div class=\"animate-fade-in\">\n        <LoaderCircleIcon\n          v-if=\"isLoading\"\n          class=\"sigma-ui-image__spinner\"\n        />\n      </div>\n      <img\n        v-show=\"!isLoading\"\n        v-if=\"glow && !isError && props.src\"\n        class=\"sigma-ui-image__img-glow animate-fade-in\"\n        v-bind=\"forwardedProps\"\n        @error=\"onError\"\n        @load=\"onLoad\"\n      >\n\n      <img\n        v-show=\"!isLoading\"\n        v-if=\"!isError && props.src\"\n        class=\"sigma-ui-image__img animate-fade-in\"\n        v-bind=\"forwardedProps\"\n        @error=\"onError\"\n        @load=\"onLoad\"\n      >\n    </div>\n  </div>\n</template>\n\n<style>\n.sigma-ui-image__container {\n  position: relative;\n}\n\n.sigma-ui-image {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: normal;\n  color: hsl(var(--foreground));\n  user-select: none;\n  flex-shrink: 0;\n  background-color: hsl(var(--secondary) / 90%);\n}\n\n.dark .sigma-ui-image {\n  background-color: hsl(var(--secondary) / 30%);\n}\n\n.sigma-ui-image--no-overflow {\n  overflow: hidden;\n}\n\n.sigma-ui-image__error,\n.sigma-ui-image__loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.sigma-ui-image__fallback-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--foreground) / 50%);\n}\n\n.sigma-ui-image__fallback-icon {\n  width: 50%;\n  max-width: 50px;\n  height: 50%;\n  max-height: 50px;\n}\n\n.sigma-ui-image__spinner {\n  animation: spin 1s linear infinite;\n  width: 20px;\n  height: 20px;\n}\n\n.sigma-ui-image__img-glow {\n  width: 110%;\n  height: 110%;\n  object-fit: cover;\n  position: absolute;\n  left: 0;\n  top: 0;\n  filter: blur(16px) brightness(200%) saturate(200%);\n  z-index: 1;\n}\n\n.sigma-ui-image__img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: relative;\n  z-index: 2;\n}\n\n@media (prefers-color-scheme: dark) {\n  .sigma-ui-image__img-glow {\n    filter: blur(16px) brightness(100%) saturate(200%);\n  }\n}\n\n.sigma-ui-image-rounded,\n.sigma-ui-image-rounded .sigma-ui-image__img,\n.sigma-ui-image-rounded .sigma-ui-image__img-glow {\n  border-radius: var(--radius);\n}\n\n.sigma-ui-image-circle,\n.sigma-ui-image-circle .sigma-ui-image__img,\n.sigma-ui-image-circle .sigma-ui-image__img-glow {\n  border-radius: 50%;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Image } from './Image.vue';\n\nexport const imageVariants = cva(\n  'sigma-ui-image',\n  {\n    variants: {\n      shape: {\n        rounded: 'sigma-ui-image-rounded',\n        circle: 'sigma-ui-image-circle',\n      },\n    },\n  },\n);\n\nexport type ImageVariants = VariantProps<typeof imageVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,12 @@
+{
+  "name": "infusion",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Infusion.vue",
+      "content": "<script setup lang=\"ts\">\ninterface Props {\n  src: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  src: '',\n});\n</script>\n\n<template>\n  <img\n    class=\"fixed z-[100] top-0 left-0 w-[100vw] h-[100vh] opacity-20 dark:opacity-30 pointer-events-none object-cover\"\n    :src=\"props.src\"\n  >\n</template>\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

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

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

@@ -0,0 +1,16 @@
+{
+  "name": "label",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Label.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'reka-ui';\n\nconst props = defineProps<LabelProps>();\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    class=\"sigma-ui-label\"\n  >\n    <slot />\n  </Label>\n</template>\n\n<style>\n.sigma-ui-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1;\n}\n\n:where(:disabled) ~ .sigma-ui-label {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Label } from './Label.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+{
+  "name": "number-field",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "NumberField.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<NumberFieldRootProps>();\nconst emits = defineEmits<NumberFieldRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NumberFieldRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field\"\n  >\n    <slot />\n  </NumberFieldRoot>\n</template>\n\n<style>\n.sigma-ui-number-field {\n  display: grid;\n  gap: 0.375rem;\n}\n</style>\n"
+    },
+    {
+      "name": "NumberFieldContent.vue",
+      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-number-field-content\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-number-field-content {\n  position: relative;\n}\n\n.sigma-ui-number-field-content > [data-slot=\"input\"]:has([data-slot=\"increment\"]) {\n  padding-right: 1.25rem;\n}\n\n.sigma-ui-number-field-content > [data-slot=\"input\"]:has([data-slot=\"decrement\"]) {\n  padding-left: 1.25rem;\n}\n</style>\n"
+    },
+    {
+      "name": "NumberFieldDecrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui';\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui';\nimport { MinusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldDecrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldDecrement\n    data-slot=\"decrement\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-decrement\"\n  >\n    <slot>\n      <MinusIcon class=\"sigma-ui-number-field-decrement__icon\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n\n<style>\n.sigma-ui-number-field-decrement {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-decrement:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-decrement__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+    },
+    {
+      "name": "NumberFieldIncrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui';\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui';\nimport { PlusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldIncrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldIncrement\n    data-slot=\"increment\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-increment\"\n  >\n    <slot>\n      <PlusIcon class=\"sigma-ui-number-field-increment__icon\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n\n<style>\n.sigma-ui-number-field-increment {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-increment:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-increment__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
+    },
+    {
+      "name": "NumberFieldInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'reka-ui';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    class=\"sigma-ui-number-field-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-number-field-input {\n  display: flex;\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n.sigma-ui-number-field-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-number-field-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n}\n\n.sigma-ui-number-field-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as NumberField } from './NumberField.vue';\nexport { default as NumberFieldInput } from './NumberFieldInput.vue';\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';\nexport { default as NumberFieldContent } from './NumberFieldContent.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

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

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

@@ -0,0 +1,28 @@
+{
+  "name": "pin-input",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PinInputRootProps>(), {\n  modelValue: () => [],\n});\nconst emits = defineEmits<PinInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-pin-input\"\n  >\n    <slot />\n  </PinInputRoot>\n</template>\n\n<style>\n.sigma-ui-pin-input {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n</style>\n"
+    },
+    {
+      "name": "PinInputGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-group\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-group {\n  display: flex;\n  align-items: center;\n}\n</style>\n"
+    },
+    {
+      "name": "PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-pin-input-input {\n  position: relative;\n  display: flex;\n  height: 2.5rem;\n  width: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--input));\n  border-left: none;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: all 150ms;\n}\n\n.sigma-ui-pin-input-input:first-child {\n  border-left: 1px solid hsl(var(--input));\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:last-child {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:focus {\n  outline: none;\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 2px hsl(var(--ring));\n}\n</style>\n"
+    },
+    {
+      "name": "PinInputSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\nimport { DotIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-separator\"\n  >\n    <slot>\n      <DotIcon class=\"sigma-ui-pin-input-separator__icon\" />\n    </slot>\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-separator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pin-input-separator__icon {\n  height: 1rem;\n  width: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as PinInput } from './PinInput.vue';\nexport { default as PinInputGroup } from './PinInputGroup.vue';\nexport { default as PinInputSeparator } from './PinInputSeparator.vue';\nexport { default as PinInputInput } from './PinInputInput.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,24 @@
+{
+  "name": "popover",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Popover.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui';\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';\n\nconst props = defineProps<PopoverRootProps>();\nconst emits = defineEmits<PopoverRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
+    },
+    {
+      "name": "PopoverContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<PopoverContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-popover-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n\n<style>\n.sigma-ui-popover-content {\n  z-index: 50;\n  width: 18rem;\n  border-radius: var(--radius);\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  outline: none;\n  transform-origin: var(--reka-popover-content-transform-origin);\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"bottom\"] {\n  animation: slideFromTop 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"top\"] {\n  animation: slideFromBottom 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"left\"] {\n  animation: slideFromRight 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"open\"][data-side=\"right\"] {\n  animation: slideFromLeft 150ms ease-out;\n}\n\n.sigma-ui-popover-content[data-state=\"closed\"] {\n  animation: popoverOut 150ms ease-in;\n}\n\n@keyframes popoverOut {\n  from {\n    opacity: 1;\n    transform: scaleY(1);\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    transform: scaleY(0.98);\n    filter: blur(4px);\n  }\n}\n\n@keyframes slideFromTop {\n  from {\n    transform: translateY(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromBottom {\n  from {\n    transform: translateY(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateY(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromLeft {\n  from {\n    transform: translateX(-1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n\n@keyframes slideFromRight {\n  from {\n    transform: translateX(1rem) scaleY(0.98);\n    filter: blur(4px);\n  }\n  to {\n    transform: translateX(0) scaleY(1);\n    filter: blur(0px);\n  }\n}\n</style>\n"
+    },
+    {
+      "name": "PopoverTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui';\n\nconst props = defineProps<PopoverTriggerProps>();\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Popover } from './Popover.vue';\nexport { default as PopoverTrigger } from './PopoverTrigger.vue';\nexport { default as PopoverContent } from './PopoverContent.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

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

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

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

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

@@ -0,0 +1,60 @@
+{
+  "name": "range-calendar",
+  "dependencies": [],
+  "registryDependencies": [],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "RangeCalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridBodyProps>();\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarGridHeadProps>();\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "RangeCalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarHeaderProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeader\n    class=\"sigma-ui-range-calendar-header\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeader>\n</template>\n\n<style>\n.sigma-ui-range-calendar-header {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 0.25rem;\n}\n</style>\n"
+    },
+    {
+      "name": "RangeCalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<RangeCalendarHeadingProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    class=\"sigma-ui-range-calendar-heading\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value=\"headingValue\">\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n\n<style>\n.sigma-ui-range-calendar-heading {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n</style>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as RangeCalendar } from './RangeCalendar.vue';\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue';\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue';\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue';\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue';\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue';\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue';\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue';\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue';\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue';\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue';\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}