feat: support tailwind prefix (#619)

* chore: enable tw prefix

* chore: enable tw  prefix during init

* fix: cater for cn function

* fix: prevent transforming importDeclaration

* chore: update registry to make sure tailwind prefix parse correctly

* chore: fix wrong import

* chore: checkpoint

* refactor: goodbye ts-morph

* chore: remove ts-morpg

* chore: update test

* chore: cleanup

* chore: fix test

* fix: move vue-metamorph to dep

* refactor: transform tw prefix by specific case

* fix: transform-sfc not parsing .ts file

* fix: prefix double quote

* chore: patch vue-eslint-parser

* refactor: transform to cater only for class in sfc

* refactor: replace detypes with @unovue/detypes

* chore: update test snapshot

* chore: update pnpm-lock, fix import

* chore: bump detypes version

* chore: update deps

apps/www/.vitepress/theme/components/BlockPreview.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import { reactive, ref, watch } from 'vue'
-import { codeToHtml } from 'shiki'
-import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import MagicString from 'magic-string'
-import { cssVariables } from '../config/shiki'
-import StyleSwitcher from './StyleSwitcher.vue'
-import Spinner from './Spinner.vue'
-import BlockCopyButton from './BlockCopyButton.vue'
 import { useConfigStore } from '@/stores/config'
+import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import MagicString from 'magic-string'
+import { codeToHtml } from 'shiki'
+import { reactive, ref, watch } from 'vue'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
+import { cssVariables } from '../config/shiki'
+import BlockCopyButton from './BlockCopyButton.vue'
+import Spinner from './Spinner.vue'
+import StyleSwitcher from './StyleSwitcher.vue'
 
 // import { V0Button } from '@/components/v0-button'
 import { Badge } from '@/lib/registry/new-york/ui/badge'

apps/www/.vitepress/theme/components/theming/utils/data.ts

@@ -1,6 +1,6 @@
-import { CreditCard } from 'lucide-vue-next'
 import RiAppleFill from '~icons/ri/apple-fill'
 import RiPaypalFill from '~icons/ri/paypal-fill'
+import { CreditCard } from 'lucide-vue-next'
 
 type Color =
   | 'zinc'

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -1,11 +1,11 @@
-import { getParameters } from 'codesandbox/lib/api/define'
+import type { Style } from '@/lib/registry/styles'
 import sdk from '@stackblitz/sdk'
+import { getParameters } from 'codesandbox/lib/api/define'
 import { Index as demoIndex } from '../../../../www/__registry__'
 // @ts-expect-error ?raw
 import tailwindConfigRaw from '../../../tailwind.config?raw'
 // @ts-expect-error ?raw
 import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw'
-import type { Style } from '@/lib/registry/styles'
 
 export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
   let files: Record<string, any> = {}

apps/www/src/content/docs/components/breadcrumb.md

@@ -58,7 +58,6 @@ Use a custom component as `slot` for `<BreadcrumbSeparator />` to create a custo
 
 ```vue showLineNumbers {2,20-22}
 <script setup lang="ts">
-import { Slash } from 'lucide-vue-next'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -66,6 +65,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
+import { Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -99,6 +99,8 @@ You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropd
 
 ```vue showLineNumbers {2-7,16-26}
 <script setup lang="ts">
+import { BreadcrumbItem } from '@/components/ui/breadcrumb'
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -106,8 +108,6 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/components/ui/dropdown-menu'
 
-import { BreadcrumbItem } from '@/components/ui/breadcrumb'
-
 import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 </script>
 
@@ -169,13 +169,13 @@ To use a custom link component from your routing library, you can use the `asChi
 
 ```vue showLineNumbers {15-19}
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
 } from '@/components/ui/breadcrumb'
+import { RouterLink } from 'vue-router'
 </script>
 
 <template>

apps/www/src/content/docs/components/data-table.md

@@ -163,12 +163,6 @@ Next, we'll create a `<DataTable />` component to render our table.
 ```vue
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-
 import {
   Table,
   TableBody,
@@ -178,6 +172,12 @@ import {
   TableRow,
 } from '@/components/ui/table'
 
+import {
+  FlexRender,
+  getCoreRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
@@ -241,9 +241,9 @@ Finally, we'll render our table in our index component.
 
 ```vue
 <script setup lang="ts">
+import type { Payment } from './components/columns'
 import { onMounted, ref } from 'vue'
 import { columns } from './components/columns'
-import type { Payment } from './components/columns'
 import DataTable from './components/DataTable.vue'
 
 const data = ref<Payment[]>([])
@@ -317,9 +317,9 @@ Let's add row actions to our table. We'll use a `<Dropdown />` component for thi
 
 ```vue
 <script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 defineProps<{
   payment: {
@@ -358,8 +358,8 @@ function copy(id: string) {
 Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
 
 ```ts
-import { ColumnDef } from '@tanstack/vue-table'
 import DropdownAction from '@/components/DataTableDropDown.vue'
+import { ColumnDef } from '@tanstack/vue-table'
 
 export const columns: ColumnDef<Payment>[] = [
   // ...
@@ -465,12 +465,12 @@ Let's make the email column sortable.
 ### Add the following into your `utils` file
 
 ```ts
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 import type { Updater } from '@tanstack/vue-table'
 import type { Ref } from 'vue'
 
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

apps/www/src/content/docs/components/number-field.md

@@ -22,6 +22,7 @@ npx shadcn-vue@latest add number-field
 
 ```vue
 <script setup lang="ts">
+import { Label } from '@/components/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -29,7 +30,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/components/ui/number-field'
-import { Label } from '@/components/ui/label'
 </script>
 
 <template>

apps/www/src/content/docs/contribution.md

@@ -221,9 +221,9 @@ Take a look at `DrawerDescription.vue`.
 ```vue
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
-import { DrawerDescription } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
@@ -270,9 +270,9 @@ Take a look at `AccordionItem.vue`
 
 ```vue
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 
@@ -307,9 +307,9 @@ Let's take a look at `Button.vue`
 ```vue
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']

apps/www/src/content/docs/dark-mode/astro.md

@@ -61,10 +61,10 @@ We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueu
 
 ```vue
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
+import { useColorMode } from '@vueuse/core'
 
 const mode = useColorMode()
 </script>

apps/www/src/content/docs/dark-mode/nuxt.md

@@ -42,9 +42,9 @@ npm install -D @iconify/vue @iconify-json/radix-icons
 
 ```vue
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
 
 const colorMode = useColorMode()
 </script>

apps/www/src/content/docs/dark-mode/vite.md

@@ -27,10 +27,10 @@ We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueu
 
 ```vue
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
+import { useColorMode } from '@vueuse/core'
 
 // Pass { disableTransition: false } to enable transitions
 const mode = useColorMode()

apps/www/src/content/docs/installation/vite.md

@@ -46,11 +46,11 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
   ```typescript {5,6,9-13}
   import path from 'node:path'
-  import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
+  import autoprefixer from 'autoprefixer'
 
   import tailwind from 'tailwindcss'
-  import autoprefixer from 'autoprefixer'
+  import { defineConfig } from 'vite'
 
   export default defineConfig({
     css: {
@@ -124,10 +124,10 @@ npm i -D @types/node
 ```typescript {15-19}
 import path from 'node:path'
 import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
 
 import tailwind from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   css: {

apps/www/src/examples/cards/components/TeamMembers.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import ChevronDownIcon from '~icons/radix-icons/chevron-down'
-
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@/lib/registry/new-york/ui/avatar'
 import { Button } from '@/lib/registry/new-york/ui/button'
+
 import {
   Card,
   CardContent,
@@ -16,12 +14,14 @@ import {
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
-
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+
+import { ref } from 'vue'
 
 const sofiaRole = ref('Owner')
 const jacksonRole = ref('Member')

apps/www/src/examples/forms/components/NotificationsForm.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const notificationsFormSchema = toTypedSchema(z.object({
   type: z.enum(['all', 'mentions', 'none'], {

apps/www/src/lib/registry/default/example/CalendarWithSelect.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-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'
-import { useVModel } from '@vueuse/core'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/default/ui/calendar'
 import {
   Select,
@@ -13,6 +8,11 @@ import {
   SelectValue,
 } from '@/lib/registry/default/ui/select'
 import { cn } from '@/lib/utils'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { useVModel } from '@vueuse/core'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
+import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { computed, type HTMLAttributes, type Ref } from 'vue'
 
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: undefined,

apps/www/src/lib/registry/default/example/CarouselDemo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 </script>
 
 <template>

apps/www/src/lib/registry/default/example/ComboboxPopover.vue

@@ -1,15 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import {
-  ArrowUpCircle,
-  CheckCircle2,
-  Circle,
-  HelpCircle,
-  XCircle,
-} from 'lucide-vue-next'
 import type { Icon } from 'lucide-vue-next'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Command,
@@ -19,11 +9,21 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/default/ui/command'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
+import { cn } from '@/lib/utils'
+import {
+  ArrowUpCircle,
+  CheckCircle2,
+  Circle,
+  HelpCircle,
+  XCircle,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
 
 interface Status {
   value: string

apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue

@@ -5,22 +5,9 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
-
-import { h, ref } from 'vue'
-import DropdownAction from './DataTableDemoColumn.vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -37,6 +24,19 @@ import {
   TableRow,
 } from '@/lib/registry/default/ui/table'
 import { cn, valueUpdater } from '@/lib/utils'
+import {
+  createColumnHelper,
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string

apps/www/src/lib/registry/default/example/DataTableDemo.vue

@@ -6,21 +6,9 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
-
-import { h, ref } from 'vue'
-import DropdownAction from './DataTableDemoColumn.vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -37,6 +25,18 @@ import {
   TableRow,
 } from '@/lib/registry/default/ui/table'
 import { valueUpdater } from '@/lib/utils'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string

apps/www/src/lib/registry/default/example/DataTableDemoColumn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
 import { Button } from '@/lib/registry/default/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 defineProps<{
   payment: {

apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue

@@ -6,21 +6,9 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
-
-import { h, ref, shallowRef } from 'vue'
-import DropdownAction from './DataTableDemoColumn.vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -37,6 +25,18 @@ import {
   TableRow,
 } from '@/lib/registry/default/ui/table'
 import { valueUpdater } from '@/lib/utils'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+import { h, ref, shallowRef } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string

apps/www/src/lib/registry/default/example/DialogForm.vue

@@ -1,18 +1,5 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/lib/registry/default/ui/form'
 import {
   Dialog,
   DialogContent,
@@ -22,8 +9,21 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/default/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+
 import { Input } from '@/lib/registry/default/ui/input'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),

apps/www/src/lib/registry/default/example/NumberFieldForm.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -22,6 +17,11 @@ import {
 } from '@/lib/registry/default/ui/number-field'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
 }))

apps/www/src/lib/registry/default/example/StepperDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
-
 import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
 
+import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
+
 const steps = [{
   step: 1,
   title: 'Address',

apps/www/src/lib/registry/default/example/StepperForm.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { Check, Circle, Dot } from 'lucide-vue-next'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { h, ref } from 'vue'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Button } from '@/lib/registry/default/ui/button'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Input } from '@/lib/registry/default/ui/input'
 import {
   Select,
   SelectContent,
@@ -13,9 +10,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/default/ui/select'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Check, Circle, Dot } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+import * as z from 'zod'
 
 const formSchema = [
   z.object({

apps/www/src/lib/registry/default/example/StepperHorizental.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Check, Circle, Dot } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
   {

apps/www/src/lib/registry/default/example/StepperVertical.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Check, Circle, Dot } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
   {

apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { computed, ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
@@ -28,7 +28,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
       </TagsInputItem>
     </div>
 
-    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:search-term="searchTerm" class="w-full">
       <ComboboxAnchor as-child>
         <ComboboxInput placeholder="Framework..." as-child>
           <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />

apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h, ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -13,7 +8,12 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import { z } from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   fruits: z.array(z.string()).min(1).max(3),

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue

@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
     <slot />
   </AlertDialogCancel>
 </template>

apps/www/src/lib/registry/default/ui/auto-form/AutoForm.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import { computed, toRefs } from 'vue'
-import type { ZodAny, z } from 'zod'
-import { toTypedSchema } from '@vee-validate/zod'
 import type { FormContext, GenericObject } from 'vee-validate'
-import { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
+import type { z, ZodAny } from 'zod'
 import type { Config, ConfigItem, Dependency, Shape } from './interface'
+import { Form } from '@/lib/registry/default/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { computed, toRefs } from 'vue'
 import AutoFormField from './AutoFormField.vue'
 import { provideDependencies } from './dependencies'
-import { Form } from '@/lib/registry/default/ui/form'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'
 
 const props = defineProps<{
   schema: T

apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/carousel/Carousel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useProvideCarousel } from './useCarousel'
 
 const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',

apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
-import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Area, Axis, Line } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
-import { useId } from 'radix-vue'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { Area, Axis, Line } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { useId } from 'radix-vue'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**

apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue'
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-import { Minus } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { Minus } from 'lucide-vue-next'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue'
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-import { Plus } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { Plus } from 'lucide-vue-next'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { NumberFieldInput } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+import { NumberFieldInput } from 'radix-vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/separator/Separator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<
   SeparatorProps & { class?: HTMLAttributes['class'], label?: string }

apps/www/src/lib/registry/default/ui/slider/Slider.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()

apps/www/src/lib/registry/default/ui/stepper/Stepper.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<StepperRootEmits>()

apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperDescription, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperIndicatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperIndicator, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperItem, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperSeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperSeparator, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperTitle, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperTrigger, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/stepper/index.ts

@@ -1,7 +1,7 @@
 export { default as Stepper } from './Stepper.vue'
-export { default as StepperItem } from './StepperItem.vue'
-export { default as StepperIndicator } from './StepperIndicator.vue'
-export { default as StepperTrigger } from './StepperTrigger.vue'
-export { default as StepperTitle } from './StepperTitle.vue'
 export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperItem } from './StepperItem.vue'
 export { default as StepperSeparator } from './StepperSeparator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'

apps/www/src/lib/registry/default/ui/tabs/TabsList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue

@@ -79,10 +79,22 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('prev')"
+      >
         <ChevronLeft class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('next')"
+      >
         <ChevronRight class="w-4 h-4" />
       </button>
     </div>

apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-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'
-import { useVModel } from '@vueuse/core'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/new-york/ui/calendar'
 import {
   Select,
@@ -13,6 +8,11 @@ import {
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
 import { cn } from '@/lib/utils'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { useVModel } from '@vueuse/core'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
+import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { computed, type HTMLAttributes, type Ref } from 'vue'
 
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: undefined,

apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue

@@ -5,22 +5,9 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
-
-import { h, ref } from 'vue'
-import DropdownAction from './DataTableDemoColumn.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -37,6 +24,19 @@ import {
   TableRow,
 } from '@/lib/registry/new-york/ui/table'
 import { cn, valueUpdater } from '@/lib/utils'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
+import {
+  createColumnHelper,
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string

apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DotsHorizontalIcon } from '@radix-icons/vue'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 
 defineProps<{
   payment: {

apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue

@@ -6,21 +6,9 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
-
-import { h, ref, shallowRef } from 'vue'
-import DropdownAction from './DataTableDemoColumn.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -37,6 +25,18 @@ import {
   TableRow,
 } from '@/lib/registry/new-york/ui/table'
 import { valueUpdater } from '@/lib/utils'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+import { h, ref, shallowRef } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string

apps/www/src/lib/registry/new-york/example/DialogForm.vue

@@ -1,18 +1,5 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/lib/registry/new-york/ui/form'
 import {
   Dialog,
   DialogContent,
@@ -22,8 +9,21 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/new-york/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),

apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -22,6 +17,11 @@ import {
 } from '@/lib/registry/new-york/ui/number-field'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
 }))

apps/www/src/lib/registry/new-york/example/StepperDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
-
 import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
 
+import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
+
 const steps = [{
   step: 1,
   title: 'Address',

apps/www/src/lib/registry/new-york/example/StepperForm.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { h, ref } from 'vue'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Select,
   SelectContent,
@@ -13,9 +10,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { h, ref } from 'vue'
+import * as z from 'zod'
 
 const formSchema = [
   z.object({

apps/www/src/lib/registry/new-york/example/StepperHorizental.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 
 const steps = [
   {

apps/www/src/lib/registry/new-york/example/StepperVertical.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 
 const steps = [
   {

apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { computed, ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
@@ -28,7 +28,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
       </TagsInputItem>
     </div>
 
-    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:search-term="searchTerm" class="w-full">
       <ComboboxAnchor as-child>
         <ComboboxInput placeholder="Framework..." as-child>
           <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />

apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h, ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -13,7 +8,12 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import { z } from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   fruits: z.array(z.string()).min(1).max(3),

apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue

@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
     <slot />
   </AlertDialogCancel>
 </template>

apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import { computed, toRefs } from 'vue'
-import type { ZodAny, z } from 'zod'
-import { toTypedSchema } from '@vee-validate/zod'
 import type { FormContext, GenericObject } from 'vee-validate'
-import { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
+import type { z, ZodAny } from 'zod'
 import type { Config, ConfigItem, Dependency, Shape } from './interface'
+import { Form } from '@/lib/registry/new-york/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { computed, toRefs } from 'vue'
 import AutoFormField from './AutoFormField.vue'
 import { provideDependencies } from './dependencies'
-import { Form } from '@/lib/registry/new-york/ui/form'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'
 
 const props = defineProps<{
   schema: T

apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useProvideCarousel } from './useCarousel'
 
 const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',

apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
-import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Area, Axis, Line } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
-import { useId } from 'radix-vue'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { Area, Axis, Line } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { useId } from 'radix-vue'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**

apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Cross2Icon } from '@radix-icons/vue'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue'
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-import { Minus } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { Minus } from 'lucide-vue-next'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue'
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-import { Plus } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { Plus } from 'lucide-vue-next'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { NumberFieldInput } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+import { NumberFieldInput } from 'radix-vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
-import { CaretSortIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/separator/Separator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<
   SeparatorProps & { class?: HTMLAttributes['class'], label?: string }

apps/www/src/lib/registry/new-york/ui/slider/Slider.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()

apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<StepperRootEmits>()

apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperDescription, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperIndicatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperIndicator, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperItem, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperSeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperSeparator, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperTitle, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
 import type { StepperTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { StepperTrigger, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/stepper/index.ts

@@ -1,7 +1,7 @@
 export { default as Stepper } from './Stepper.vue'
-export { default as StepperItem } from './StepperItem.vue'
-export { default as StepperIndicator } from './StepperIndicator.vue'
-export { default as StepperTrigger } from './StepperTrigger.vue'
-export { default as StepperTitle } from './StepperTitle.vue'
 export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperItem } from './StepperItem.vue'
 export { default as StepperSeparator } from './StepperSeparator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'

apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
 

apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue

@@ -80,10 +80,22 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('prev')"
+      >
         <ChevronLeftIcon class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('next')"
+      >
         <ChevronRightIcon class="w-4 h-4" />
       </button>
     </div>

apps/www/src/public/registry/styles/default/alert-dialog.json

@@ -16,7 +16,7 @@
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",

apps/www/src/public/registry/styles/new-york/alert-dialog.json

@@ -16,7 +16,7 @@
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",

packages/cli/package.json

@@ -50,40 +50,37 @@
     "vitest": "*"
   },
   "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/parser": "^7.25.3",
-    "@vue/compiler-sfc": "^3.4",
-    "c12": "^1.11.1",
+    "@unovue/detypes": "^0.8.4",
+    "@vue/compiler-sfc": "^3.5",
+    "c12": "^2.0.1",
     "commander": "^12.1.0",
     "consola": "^3.2.3",
-    "detype": "npm:detypes@^0.8.0",
-    "diff": "^5.2.0",
+    "diff": "^7.0.0",
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.5",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.11",
-    "nypm": "^0.3.9",
-    "ofetch": "^1.3.4",
-    "ora": "^8.0.1",
+    "magic-string": "^0.30.12",
+    "nypm": "^0.3.12",
+    "ofetch": "^1.4.1",
+    "ora": "^8.1.0",
     "pathe": "^1.1.2",
-    "pkg-types": "^1.1.3",
+    "pkg-types": "^1.2.1",
     "prompts": "^2.4.2",
     "radix-vue": "catalog:",
     "semver": "^7.6.3",
-    "ts-morph": "^22.0.0",
     "tsconfig-paths": "^4.2.0",
+    "vue-metamorph": "^3.2.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
-    "@types/diff": "^5.2.1",
+    "@types/diff": "^5.2.3",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.15",
+    "@types/node": "^22.7.5",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.2.4",
-    "type-fest": "^4.24.0",
-    "typescript": "^5.5.3",
+    "tsup": "^8.3.0",
+    "type-fest": "^4.26.1",
+    "typescript": "^5.6.3",
     "vite-tsconfig-paths": "^5.0.1"
   }
 }

packages/cli/src/commands/init.ts

@@ -163,14 +163,14 @@ export async function promptForConfig(
       active: 'yes',
       inactive: 'no',
     },
-    // {
-    //   type: 'text',
-    //   name: 'tailwindPrefix',
-    //   message: `Are you using a custom ${highlight(
-    //     'tailwind prefix eg. tw-',
-    //   )}? (Leave blank if not)`,
-    //   initial: '',
-    // },
+    {
+      type: 'text',
+      name: 'tailwindPrefix',
+      message: `Are you using a custom ${highlight(
+        'tailwind prefix eg. tw-',
+      )}? (Leave blank if not)`,
+      initial: '',
+    },
     {
       type: 'text',
       name: 'tailwindConfig',
@@ -208,7 +208,7 @@ export async function promptForConfig(
       css: options.tailwindCss,
       baseColor: options.tailwindBaseColor,
       cssVariables: options.tailwindCssVariables,
-      // prefix: options.tailwindPrefix,
+      prefix: options.tailwindPrefix,
     },
     aliases: {
       utils: options.utils,