sigma-ui 0.1.0 → 1.0.10

package/__generated/registry-schemes/style-system/tailwind/alert-dialog.json

@@ -0,0 +1,48 @@
+{
+  "name": "alert-dialog",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "AlertDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<AlertDialogProps>();\nconst emits = defineEmits<AlertDialogEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\n\nconst props = defineProps<AlertDialogActionProps>();\n</script>\n\n<template>\n  <AlertDialogAction\n    v-bind=\"props\"\n    :class=\"cn(buttonVariants(), $attrs.class ?? '')\"\n  >\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogCancel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\n\nconst props = defineProps<AlertDialogCancelProps>();\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"props\"\n    :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AlertDialogContentProps>();\nconst emits = defineEmits<AlertDialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',\n          $attrs.class ?? '',\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AlertDialogDescriptionProps>();\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"props\"\n    :class=\"cn('text-sm text-muted-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', $attrs.class ?? '')\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<AlertDialogTitleProps>();\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"props\"\n    :class=\"cn('text-lg font-semibold', $attrs.class ?? '')\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui';\n\nconst props = defineProps<AlertDialogTriggerProps>();\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AlertDialog } from './AlertDialog.vue';\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';\nexport { default as AlertDialogContent } from './AlertDialogContent.vue';\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue';\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue';\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue';\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue';\nexport { default as AlertDialogAction } from './AlertDialogAction.vue';\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,24 @@
+{
+  "name": "alert",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Alert.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type AlertVariants, alertVariants } from '.';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<{\n  variant?: AlertVariants['variant'];\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"cn(alertVariants({ variant }), $attrs.class ?? '')\"\n    role=\"alert\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n    <slot />\n  </h5>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Alert } from './Alert.vue';\nexport { default as AlertTitle } from './AlertTitle.vue';\nexport { default as AlertDescription } from './AlertDescription.vue';\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive [&>svg]:text-red-500 dark:bg-destructive/20 dark:text-red-500 dark:border-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport type AlertVariants = VariantProps<typeof alertVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "avatar",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Avatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { UserIcon } from 'lucide-vue-next';\nimport { avatarVariants } from '.';\nimport { Image, type ImageVariants } from '@ui/registry/tailwind/ui/image';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<{\n  src?: string;\n  alt?: string;\n  glow?: boolean;\n  size?: 'xs' | 'sm' | 'base' | 'lg';\n  shape?: ImageVariants['shape'];\n}>(), {\n  size: 'base',\n  shape: 'circle',\n});\n</script>\n\n<template>\n  <div :class=\"[cn(avatarVariants({ size }), $attrs.class ?? '')]\">\n    <Image\n      v-bind=\"props\"\n    >\n      <template #fallback>\n        <slot name=\"fallback\">\n          <UserIcon class=\"w-[40%] h-[40%] text-primary/50\" />\n        </slot>\n      </template>\n    </Image>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Avatar } from './Avatar.vue';\n\nexport const avatarVariants = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0',\n  {\n    variants: {\n      size: {\n        xs: 'h-6 w-6 text-xs',\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n    },\n  },\n);\n\nexport type AvatarVariants = VariantProps<typeof avatarVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "badge",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Badge.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type BadgeVariants, badgeVariants } from '.';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant'];\n\n}>();\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Badge } from './Badge.vue';\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,44 @@
+{
+  "name": "breadcrumb",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Breadcrumb.vue",
+      "content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <nav\n    aria-label=\"breadcrumb\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </nav>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbEllipsis.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { MoreHorizontalIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex items-center justify-center', $attrs.class ?? '')\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbGenerator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport {\n  Breadcrumb,\n  BreadcrumbItem as BreadcrumbItemComponent,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '.';\n\nexport interface BreadcrumbItem {\n  label?: string;\n  icon?: string | Component;\n  url?: string;\n  route?: any;\n  target?: string;\n  active?: boolean;\n}\n\ninterface ActionProps {\n\n  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;\n}\n\nconst props = defineProps<{\n  home?: BreadcrumbItem;\n  model?: BreadcrumbItem[];\n}>();\n\nfunction getActionProps(item: BreadcrumbItem, isLast: boolean): ActionProps {\n  const isActive = item.active || isLast;\n  return {\n    'class': `cursor-pointer flex items-center ${isActive ? 'text-foreground font-medium' : 'text-muted-foreground'}`,\n    'aria-current': isActive ? 'page' : undefined,\n  };\n}\n</script>\n\n<template>\n  <Breadcrumb :class=\"$attrs.class\">\n    <BreadcrumbList>\n      <BreadcrumbItemComponent v-if=\"home\">\n        <slot\n          name=\"home\"\n          :item=\"home\"\n          :props=\"{ action: getActionProps(home, false) }\"\n        >\n          <BreadcrumbLink\n            v-if=\"home.route\"\n            :to=\"home.route\"\n            class=\"flex items-center gap-2\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"h-4 w-4\"\n            />\n            <span>{{ home.label }}</span>\n          </BreadcrumbLink>\n          <BreadcrumbLink\n            v-else-if=\"home.url\"\n            :href=\"home.url\"\n            :target=\"home.target\"\n            class=\"flex items-center gap-2\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"h-4 w-4\"\n            />\n            <span v-if=\"home.label\">{{ home.label }}</span>\n          </BreadcrumbLink>\n        </slot>\n      </BreadcrumbItemComponent>\n\n      <BreadcrumbSeparator v-if=\"home && model?.length\">\n        <slot name=\"separator\">\n          <ChevronRightIcon />\n        </slot>\n      </BreadcrumbSeparator>\n\n      <template\n        v-for=\"(item, index) in (model || [])\"\n        :key=\"index\"\n      >\n        <BreadcrumbItemComponent>\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :props=\"{ action: getActionProps(item, index === (model?.length || 0) - 1) }\"\n          >\n            <BreadcrumbLink\n              v-if=\"item.route\"\n              :to=\"item.route\"\n              class=\"flex items-center gap-2\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"h-4 w-4\"\n              />\n              <span>{{ item.label }}</span>\n            </BreadcrumbLink>\n            <BreadcrumbLink\n              v-else-if=\"item.url\"\n              :href=\"item.url\"\n              :target=\"item.target\"\n              class=\"flex items-center gap-2\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"h-4 w-4\"\n              />\n              <span>{{ item.label }}</span>\n            </BreadcrumbLink>\n            <BreadcrumbPage\n              v-else\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <component\n                  :is=\"item.icon\"\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4\"\n                />\n                <span>{{ item.label }}</span>\n              </div>\n            </BreadcrumbPage>\n          </slot>\n        </BreadcrumbItemComponent>\n\n        <BreadcrumbSeparator v-if=\"index < (model?.length || 0) - 1\">\n          <slot name=\"separator\">\n            <ChevronRightIcon />\n          </slot>\n        </BreadcrumbSeparator>\n      </template>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', $attrs.class ?? '')\"\n  >\n    <slot />\n  </li>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbLink.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<PrimitiveProps>(), {\n  as: 'a',\n});\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbList.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ol>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbPage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </span>\n</template>\n"
+    },
+    {
+      "name": "BreadcrumbSeparator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', $attrs.class ?? '')\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Breadcrumb } from './Breadcrumb.vue';\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue';\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue';\nexport { default as BreadcrumbList } from './BreadcrumbList.vue';\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue';\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';\nexport { default as BreadcrumbGenerator } from './BreadcrumbGenerator.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "button",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Button.vue",
+      "content": "<script setup lang=\"ts\">\n;\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant'];\n  size?: ButtonVariants['size'];\n  isLoading?: boolean;\n  loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n  isLoading: false,\n});\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n    :disabled=\"isLoading || $attrs.disabled\"\n  >\n    <Loader2Icon\n      v-if=\"isLoading\"\n      class=\"w-4 h-4 mr-2 animate-spin\"\n    />\n    <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n      <slot />\n    </template>\n    <template v-else>\n      {{ loadingText }}\n    </template>\n  </Primitive>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Button } from './Button.vue';\n\nexport const buttonVariants = cva(\n  'w-[fit-content] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        xs: 'h-7 px-2',\n        sm: 'h-9 px-3',\n        lg: 'h-11 px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,60 @@
+{
+  "name": "calendar",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Calendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui';\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarRootProps>();\nconst emits = defineEmits<CalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', $attrs.class ?? '')\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid\n        v-for=\"month in grid\"\n        :key=\"month.value.toString()\"\n      >\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\"\n              :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow\n            v-for=\"(weekDates, index) in month.rows\"\n            :key=\"`weekDate-${index}`\"\n            class=\"mt-2 w-full\"\n          >\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
+    },
+    {
+      "name": "CalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+    },
+    {
+      "name": "CalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui';\n\nconst props = defineProps<CalendarGridBodyProps>();\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui';\n\nconst props = defineProps<CalendarGridHeadProps>();\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarGridRowProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarGridRow\n    :class=\"cn('flex', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGridRow>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarHeadCell\n    :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarHeaderProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarHeader\n    :class=\"cn('relative flex w-full items-center justify-between pt-1', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeader>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<CalendarHeadingProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', $attrs.class ?? '')\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
+    },
+    {
+      "name": "CalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\n\nconst props = defineProps<CalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+    },
+    {
+      "name": "CalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\nimport { buttonVariants } from '@ui/registry/tailwind/ui/button';\n\nconst props = defineProps<CalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue';\nexport { default as CalendarCell } from './CalendarCell.vue';\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';\nexport { default as CalendarGrid } from './CalendarGrid.vue';\nexport { default as CalendarGridBody } from './CalendarGridBody.vue';\nexport { default as CalendarGridHead } from './CalendarGridHead.vue';\nexport { default as CalendarGridRow } from './CalendarGridRow.vue';\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue';\nexport { default as CalendarHeader } from './CalendarHeader.vue';\nexport { default as CalendarHeading } from './CalendarHeading.vue';\nexport { default as CalendarNextButton } from './CalendarNextButton.vue';\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

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

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

@@ -0,0 +1,36 @@
+{
+  "name": "card",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Card.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </p>\n</template>\n"
+    },
+    {
+      "name": "CardFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', $attrs.class ?? '')\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Card } from './Card.vue';\nexport { default as CardHeader } from './CardHeader.vue';\nexport { default as CardTitle } from './CardTitle.vue';\nexport { default as CardDescription } from './CardDescription.vue';\nexport { default as CardContent } from './CardContent.vue';\nexport { default as CardFooter } from './CardFooter.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,43 @@
+{
+  "name": "carousel",
+  "dependencies": [
+    "embla-carousel-vue",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel';\nimport type { CarouselEmits, CarouselProps } from './interface';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n  orientation: 'horizontal',\n});\n\nconst emits = defineEmits<CarouselEmits>();\n\nconst carouselArgs = useProvideCarousel(props, emits);\n\ndefineExpose(carouselArgs);\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n\n  if (event.key === prevKey) {\n    event.preventDefault();\n    carouselArgs.scrollPrev();\n\n    return;\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault();\n    carouselArgs.scrollNext();\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', $attrs.class ?? '')\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\nimport { cn } from '@ui/utils';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst { carouselRef, orientation } = useCarousel();\n</script>\n\n<template>\n  <div\n    ref=\"carouselRef\"\n    class=\"overflow-hidden\"\n  >\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          $attrs.class ?? '',\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\nimport { cn } from '@ui/utils';\n\nconst { orientation } = useCarousel();\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      $attrs.class ?? '',\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CarouselNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { cn } from '@ui/utils';\nimport { Button } from '@ui/registry/tailwind/ui/button';\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel();\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      $attrs.class ?? '',\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+    },
+    {
+      "name": "CarouselPrevious.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { cn } from '@ui/utils';\nimport { Button } from '@ui/registry/tailwind/ui/button';\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel();\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      $attrs.class ?? '',\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Carousel } from './Carousel.vue';\nexport { default as CarouselContent } from './CarouselContent.vue';\nexport { default as CarouselItem } from './CarouselItem.vue';\nexport { default as CarouselPrevious } from './CarouselPrevious.vue';\nexport { default as CarouselNext } from './CarouselNext.vue';\nexport { useCarousel } from './useCarousel';\n\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface';\n"
+    },
+    {
+      "name": "interface.ts",
+      "content": "import type { UnwrapRef } from 'vue';\nimport type useEmblaCarousel from 'embla-carousel-vue';\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue';\n\ntype CarouselApi = EmblaCarouselVueType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;\n\nexport interface CarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void;\n}\n"
+    },
+    {
+      "name": "useCarousel.ts",
+      "content": "import { createInjectionState } from '@vueuse/core';\nimport emblaCarouselVue from 'embla-carousel-vue';\nimport { onMounted, ref } from 'vue';\nimport type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface';\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins);\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev();\n    }\n\n    function scrollNext() {\n      emblaApi.value?.scrollNext();\n    }\n\n    const canScrollNext = ref(false);\n    const canScrollPrev = ref(false);\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false;\n      canScrollPrev.value = api?.canScrollPrev() || false;\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value) {\n        return;\n      }\n\n      emblaApi.value?.on('init', onSelect);\n      emblaApi.value?.on('reInit', onSelect);\n      emblaApi.value?.on('select', onSelect);\n\n      emits('init-api', emblaApi.value);\n    });\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation };\n  },\n);\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel();\n\n  if (!carouselState) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return carouselState;\n}\n\nexport { useCarousel, useProvideCarousel };\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/chart-area.json

@@ -0,0 +1,20 @@
+{
+  "name": "chart-area",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "AreaChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Area, Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport { useId } from 'reka-ui';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/tailwind/ui/chart';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType;\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean;\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n});\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst chartRef = useId();\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n    >\n      <svg\n        width=\"0\"\n        height=\"0\"\n      >\n        <defs>\n          <linearGradient\n            v-for=\"(color, i) in colors\"\n            :id=\"`${chartRef}-color-${i}`\"\n            :key=\"i\"\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"0\"\n            y2=\"1\"\n          >\n            <template v-if=\"showGradiant\">\n              <stop\n                offset=\"5%\"\n                :stop-color=\"color\"\n                stop-opacity=\"0.4\"\n              />\n              <stop\n                offset=\"95%\"\n                :stop-color=\"color\"\n                stop-opacity=\"0\"\n              />\n            </template>\n            <template v-else>\n              <stop\n                offset=\"0%\"\n                :stop-color=\"color\"\n              />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :index=\"index\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue';\n\nimport type { Spacing } from '@unovis/ts';\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[];\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[];\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>;\n  /**\n   * Change the default colors.\n   */\n  colors?: string[];\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing;\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number;\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean;\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean;\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean;\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean;\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/chart-bar.json

@@ -0,0 +1,20 @@
+{
+  "name": "chart-bar",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "BarChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts';\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue';\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/tailwind/ui/chart';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped';\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number;\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar);\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar);\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :custom-tooltip=\"customTooltip\"\n        :index=\"index\"\n      />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as BarChart } from './BarChart.vue';\n\nimport type { Spacing } from '@unovis/ts';\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[];\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[];\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>;\n  /**\n   * Change the default colors.\n   */\n  colors?: string[];\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing;\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number;\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean;\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean;\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean;\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean;\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/chart-donut.json

@@ -0,0 +1,20 @@
+{
+  "name": "chart-donut",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "DonutChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue';\nimport { Donut } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartSingleTooltip, defaultColors } from '@ui/registry/tailwind/ui/chart';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT;\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie';\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined;\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n});\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst category = computed(() => props.category as KeyOfT);\nconst index = computed(() => props.index as KeyOfT);\n\nconst isMounted = useMounted();\nconst activeSegmentKey = ref<string>();\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length));\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category];\n}, 0));\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n    >\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as DonutChart } from './DonutChart.vue';\n\nimport type { Spacing } from '@unovis/ts';\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[];\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>;\n  /**\n   * Change the default colors.\n   */\n  colors?: string[];\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing;\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number;\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean;\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/chart-line.json

@@ -0,0 +1,20 @@
+{
+  "name": "chart-line",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "LineChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/tailwind/ui/chart';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component;\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType;\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n});\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :index=\"index\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as LineChart } from './LineChart.vue';\n\nimport type { Spacing } from '@unovis/ts';\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[];\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[];\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>;\n  /**\n   * Change the default colors.\n   */\n  colors?: string[];\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing;\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number;\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean;\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean;\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean;\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean;\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}