diff --git a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
index 9873fb8ae..bcb56a323 100644
--- a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
+++ b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
@@ -6,7 +6,6 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
-  BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/lib/registry/new-york/ui/breadcrumb'
 
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index aae8de0b8..6a6a7dd03 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -8,7 +8,6 @@ import Announcement from '../components/Announcement.vue'
 import GitHubIcon from '~icons/radix-icons/github-logo'
 
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { cn } from '@/lib/utils'
 
 import MailExample from '@/examples/mail/Example.vue'
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 73a7dcae2..c6d0916cc 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -5,7 +5,6 @@ import Logo from './Logo.vue'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { Button } from '@/lib/registry/default/ui/button'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
 
 const open = ref(false)
 </script>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index c46b3d11d..d4ad12e01 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -7,7 +7,6 @@ import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
-import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
 const { frontmatter } = useData()
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index 18b0bf787..30db29d69 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -7,7 +7,6 @@ import ExamplesNav from '../components/ExamplesNav.vue'
 import Announcement from '../components/Announcement.vue'
 
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { cn } from '@/lib/utils'
 </script>
 
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index d088d325c..b100cefd3 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -351,8 +351,8 @@
   width: calc(100% + 2 * 24px);
   display: inline-block;
   @apply bg-[hsl(var(--foreground))] dark:bg-[hsl(var(--background)_/_50%)]
-}
-hsl(var(--foreground) / 50%)
+} 
+
 .vp-doc [class*='language-'] code .highlighted.error {
   background-color: var(--vp-code-line-error-color);
 }
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 5597865cc..d523c9a40 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1308,7 +1308,7 @@ export const Index = {
     "ActivityGoal": {
       name: "ActivityGoal",
       type: "components:example",
-      registryDependencies: ["button","card","themes","config"],
+      registryDependencies: ["button","card"],
       component: () => import("../src/lib/registry/default/example/Cards/ActivityGoal.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/Cards/ActivityGoal.vue"],
     },
@@ -1322,7 +1322,7 @@ export const Index = {
     "Metric": {
       name: "Metric",
       type: "components:example",
-      registryDependencies: ["card","config"],
+      registryDependencies: ["card"],
       component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
     },
@@ -2709,7 +2709,7 @@ export const Index = {
     "ActivityGoal": {
       name: "ActivityGoal",
       type: "components:example",
-      registryDependencies: ["button","card","themes","config"],
+      registryDependencies: ["button","card"],
       component: () => import("../src/lib/registry/new-york/example/Cards/ActivityGoal.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/Cards/ActivityGoal.vue"],
     },
@@ -2723,7 +2723,7 @@ export const Index = {
     "Metric": {
       name: "Metric",
       type: "components:example",
-      registryDependencies: ["card","config"],
+      registryDependencies: ["card"],
       component: () => import("../src/lib/registry/new-york/example/Cards/Metric.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/Cards/Metric.vue"],
     },
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
index a68f2a921..bdb52d2c7 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -6,8 +6,6 @@ export const containerClass = 'w-full h-full'
 
 <script setup lang="ts">
 import {
-  ChevronLeft,
-  ChevronRight,
   CircleUser,
   Copy,
   CreditCard,
@@ -42,11 +40,7 @@ import {
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import {
   Pagination,
-  PaginationEllipsis,
-  PaginationFirst,
-  PaginationLast,
   PaginationList,
-  PaginationListItem,
   PaginationNext,
   PaginationPrev,
 } from '@/lib/registry/default/ui/pagination'
diff --git a/apps/www/src/lib/registry/default/example/AutoFormApi.vue b/apps/www/src/lib/registry/default/example/AutoFormApi.vue
index 0e8bd37b1..f24684d18 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormApi.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormApi.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as z from 'zod'
-import { h, onMounted, ref, shallowRef } from 'vue'
+import { h, onMounted, shallowRef } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { toast } from '@/lib/registry/default/ui/toast'
 import { AutoForm } from '@/lib/registry/default/ui/auto-form'
diff --git a/apps/www/src/lib/registry/default/example/AutoFormBasic.vue b/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
index 0b7d763ac..b48b90217 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import * as z from 'zod'
-import { h, reactive, ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { DependencyType } from '../ui/auto-form/interface'
+import { h } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { toast } from '@/lib/registry/default/ui/toast'
-import type { Config } from '@/lib/registry/default/ui/auto-form'
 import { AutoForm, AutoFormField } from '@/lib/registry/default/ui/auto-form'
 
 enum Sports {
diff --git a/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue b/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
index 4c6a5a11d..c6f42059f 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
@@ -3,7 +3,7 @@ import * as z from 'zod'
 import { h } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { toast } from '@/lib/registry/default/ui/toast'
-import { AutoForm, AutoFormField } from '@/lib/registry/default/ui/auto-form'
+import { AutoForm } from '@/lib/registry/default/ui/auto-form'
 
 const schema = z.object({
   subObject: z.object({
diff --git a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
index 5152e4160..6d0755005 100644
--- a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
+import { type HTMLAttributes, type Ref, computed } from 'vue'
 import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
 import { createDecade, createYear, toDate } from 'radix-vue/date'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
index 40a994c78..3872ea6ac 100644
--- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { Minus, Plus } from 'lucide-vue-next'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { useData } from 'vitepress'
 import { Button } from '@/lib/registry/default/ui/button'
 
 import {
@@ -13,8 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/default/ui/card'
-import { themes } from '@/lib/registry/themes'
-import { useConfigStore } from '@/stores/config'
 
 const goal = ref(350)
 
diff --git a/apps/www/src/lib/registry/default/example/Cards/Metric.vue b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
index 457a2a26f..d96f506f6 100644
--- a/apps/www/src/lib/registry/default/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
@@ -8,7 +8,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/default/ui/card'
-import { useConfigStore } from '@/stores/config'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
index 5f7d79222..49f6fc73e 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/interface.ts b/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
index 0d41daf4b..4dd8b1214 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
@@ -1,4 +1,4 @@
-import type { Component, InputHTMLAttributes, SelectHTMLAttributes } from 'vue'
+import type { Component, InputHTMLAttributes } from 'vue'
 import type { ZodAny, z } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
index 31cd512f5..5ac16a8cd 100644
--- a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
+import type { BulletLegendItemInterface } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { type Component, computed, ref } from 'vue'
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue b/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
index 742b5fb5f..4de304d14 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as z from 'zod'
-import { h, onMounted, ref, shallowRef } from 'vue'
+import { h, onMounted, shallowRef } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue b/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
index 5ca6ef8bb..6c4414f91 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import * as z from 'zod'
-import { h, reactive, ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { DependencyType } from '../ui/auto-form/interface'
+import { h } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
-import type { Config } from '@/lib/registry/new-york/ui/auto-form'
 import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
 
 enum Sports {
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue b/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
index c83aa2704..a71b7d0da 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
@@ -3,7 +3,7 @@ import * as z from 'zod'
 import { h } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
-import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
+import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
 
 const schema = z.object({
   subObject: z.object({
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
index 820d0d9ae..086290cc7 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
+import { type HTMLAttributes, type Ref, computed } from 'vue'
 import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
 import { createDecade, createYear, toDate } from 'radix-vue/date'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index cfb00c9fd..b70865f49 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { VisScatter } from '@unovis/vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
 import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
 import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
index 18fc688b0..27bbba8e6 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
@@ -8,7 +8,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
-import { useConfigStore } from '@/stores/config'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
index 46308736e..ba6c8feb6 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
index 0d41daf4b..4dd8b1214 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
@@ -1,4 +1,4 @@
-import type { Component, InputHTMLAttributes, SelectHTMLAttributes } from 'vue'
+import type { Component, InputHTMLAttributes } from 'vue'
 import type { ZodAny, z } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
index 516e8b47c..0556df9a5 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
+import type { BulletLegendItemInterface } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { type Component, computed, ref } from 'vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
index 255abb2e8..65cfbb7b9 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>()
 })
 
 const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
   'update:items': [payload: BulletLegendItemInterface[]]
 }>()
 
diff --git a/apps/www/src/public/registry/styles/default/area-chart.json b/apps/www/src/public/registry/styles/default/area-chart.json
index 891c5dce6..4cf4d8ab8 100644
--- a/apps/www/src/public/registry/styles/default/area-chart.json
+++ b/apps/www/src/public/registry/styles/default/area-chart.json
@@ -16,4 +16,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index 3ff151d04..ce899e296 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -44,7 +44,7 @@
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldFile.vue",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes, SelectHTMLAttributes } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
index e3905d422..3c01939a1 100644
--- a/apps/www/src/public/registry/styles/default/chart-bar.json
+++ b/apps/www/src/public/registry/styles/default/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } 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, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/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 v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\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"
+      "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, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/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 v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\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",
diff --git a/apps/www/src/public/registry/styles/new-york/area-chart.json b/apps/www/src/public/registry/styles/new-york/area-chart.json
index 891c5dce6..4cf4d8ab8 100644
--- a/apps/www/src/public/registry/styles/new-york/area-chart.json
+++ b/apps/www/src/public/registry/styles/new-york/area-chart.json
@@ -16,4 +16,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index f32084dc2..dec7e3678 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -44,7 +44,7 @@
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldFile.vue",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes, SelectHTMLAttributes } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
index 8a33d7739..6c2942478 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-bar.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } 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, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/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})\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 v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\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"
+      "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, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/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})\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 v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\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",
diff --git a/apps/www/src/public/registry/styles/new-york/chart.json b/apps/www/src/public/registry/styles/new-york/chart.json
index f4e9f8a78..e7776885c 100644
--- a/apps/www/src/public/registry/styles/new-york/chart.json
+++ b/apps/www/src/public/registry/styles/new-york/chart.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "ChartSingleTooltip.vue",