Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	.github/workflows/publish.yaml

.github/workflows/publish.yaml

@@ -11,21 +11,50 @@ on:
       - dev
     paths:
       - 'apps/www/**'
+  pull_request_target:
+    types:
+      # When a created pull request from forked repo, it will be comment 'Should deploy to add label'
+      - opened
+      # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
+      - labeled
+    paths:
+      - 'apps/www/**'
   # Allows you to run this workflow manually from the Actions tab
   # eslint-disable-next-line yml/no-empty-mapping-value
   workflow_dispatch:
 
+permissions:
+  # default contents: read & write (in forked repos, only read)
+  contents: write
+  # default deployments: read & write (in forked repos, only read)
+  deployments: write
+  # default pull-requests: read & write (in forked repos, only read)
+  pull-requests: write
+
 jobs:
   publish:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      deployments: write
     name: Publish to Cloudflare Pages
+    # push event in main branch
+    # workflow_dispatch event
+    # pull_request event from not forked repo
+    # pull_request_target event with label "🚀request-deploy" from forked repo
+    if: ${{
+      github.event_name == 'push' ||
+      github.event_name == 'workflow_dispatch' ||
+      (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false) ||
+      (github.event_name == 'pull_request_target' &&
+      github.event.action == 'labeled' &&
+      github.event.pull_request.head.repo.fork == true &&
+      contains(github.event.label.name, '🚀request-deploy'))
+      }}
 
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          fetch-depth: 0
 
       # Run a build step here
       - name: Setup Node.js environment
@@ -60,25 +89,30 @@ jobs:
 
       # Run a action to publish docs
       - name: Publish to Cloudflare Pages
-        uses: unlike-ltd/github-actions-cloudflare-pages@v1.1.2
+        uses: zernonia/cloudflare-pages-action@v0.0.7
         with:
-          cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          cloudflare-project-name: shadcn-vue
+          projectName: shadcn-vue
           directory: .vitepress/dist
+          # Optional: Enable this if you want to have GitHub Deployments triggered
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          # Optional: Switch what branch you are publishing to.
+          # By default this will be the branch which triggered this workflow
+          branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }}
+          # Optional: Change the working directory
+          workingDirectory: apps/www
+          wranglerVersion: '3'
+
+      - name: Remove label
+        if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }}
+        uses: actions/github-script@v6
+        with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ github.event.pull_request.head.ref }}
+          script: |
-        # uses: cloudflare/pages-action@v1.5.0
+            github.rest.issues.removeLabel({
-        # with:
+              issue_number: context.issue.number,
-        #   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+              owner: context.repo.owner,
-        #   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+              repo: context.repo.repo,
-        #   projectName: shadcn-vue
+              name: ['🚀request-deploy']
-        #   directory: .vitepress/dist
+            })
-        #   # Optional: Enable this if you want to have GitHub Deployments triggered
-        #   gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-        #   # Optional: Switch what branch you are publishing to.
-        #   # By default this will be the branch which triggered this workflow
-        #   branch: refs/pull/${{ github.event.number }}/merge
-        #   # Optional: Change the working directory
-        #   workingDirectory: apps/www
-        #   wranglerVersion: '3'

apps/www/.vitepress/config.mts

@@ -3,9 +3,17 @@ import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
+import { createCssVariablesTheme } from 'shikiji'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
+const cssVariables = createCssVariablesTheme({
+  name: 'css-variables',
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
+  fontStyle: true,
+})
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: siteConfig.name,
@@ -50,7 +58,7 @@ export default defineConfig({
 
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
-    theme: 'css-variables',
+    theme: cssVariables,
     config(md) {
       md.use(ComponentPreviewPlugin)
     },

apps/www/.vitepress/theme/styles/shiki.css

@@ -1,5 +1,5 @@
 :root {
-  --shiki-color-text: #EEEEEE;
+  --shiki-foreground: #EEEEEE;
   --shiki-color-background: #ffffff;
   --shiki-token-constant: #ffffff;
   --shiki-token-string: #ffffff88;

apps/www/__registry__/index.ts

@@ -688,34 +688,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
     },
-    ToggleItalicDemo: {
-      name: 'ToggleItalicDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
-    },
-    ToggleItalicWithTextDemo: {
-      name: 'ToggleItalicWithTextDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
-    },
-    ToggleLargeDemo: {
-      name: 'ToggleLargeDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
-    },
-    ToggleSmallDemo: {
-      name: 'ToggleSmallDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
-    },
     ToggleGroupDemo: {
       name: 'ToggleGroupDemo',
       type: 'components:example',
@@ -758,6 +730,34 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'],
     },
+    ToggleItalicDemo: {
+      name: 'ToggleItalicDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
+    },
+    ToggleItalicWithTextDemo: {
+      name: 'ToggleItalicWithTextDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
+    },
+    ToggleLargeDemo: {
+      name: 'ToggleLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
+    },
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
+    },
     TooltipDemo: {
       name: 'TooltipDemo',
       type: 'components:example',
@@ -1572,34 +1572,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
     },
-    ToggleItalicDemo: {
-      name: 'ToggleItalicDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
-    },
-    ToggleItalicWithTextDemo: {
-      name: 'ToggleItalicWithTextDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
-    },
-    ToggleLargeDemo: {
-      name: 'ToggleLargeDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
-    },
-    ToggleSmallDemo: {
-      name: 'ToggleSmallDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
-    },
     ToggleGroupDemo: {
       name: 'ToggleGroupDemo',
       type: 'components:example',
@@ -1642,6 +1614,34 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'],
     },
+    ToggleItalicDemo: {
+      name: 'ToggleItalicDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
+    },
+    ToggleItalicWithTextDemo: {
+      name: 'ToggleItalicWithTextDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
+    },
+    ToggleLargeDemo: {
+      name: 'ToggleLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
+    },
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
+    },
     TooltipDemo: {
       name: 'TooltipDemo',
       type: 'components:example',

apps/www/package.json

@@ -15,28 +15,28 @@
     "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.0",
+    "@formkit/auto-animate": "^0.8.1",
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.10.7",
+    "@tanstack/vue-table": "^8.11.6",
-    "@unovis/ts": "^1.2.3",
+    "@unovis/ts": "^1.3.1",
-    "@unovis/vue": "1.3.0-beta.3",
+    "@unovis/vue": "^1.3.1",
-    "@vee-validate/zod": "^4.12.3",
+    "@vee-validate/zod": "^4.12.4",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.7.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
     "embla-carousel": "8.0.0-rc19",
     "embla-carousel-autoplay": "8.0.0-rc19",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.3.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vee-validate": "4.12.3",
+    "vee-validate": "4.12.4",
-    "vue": "^3.4.7",
+    "vue": "^3.4.14",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
@@ -47,22 +47,23 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash.template": "^4.5.2",
     "@types/node": "^20.8.10",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/compiler-core": "^3.3.7",
+    "@vue/compiler-core": "^3.4.14",
-    "@vue/compiler-dom": "^3.3.7",
+    "@vue/compiler-dom": "^3.4.14",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
-    "tailwind-merge": "^2.0.0",
+    "shikiji": "^0.10.0-beta.2",
-    "tailwindcss": "^3.3.5",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "^3.4.1",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
     "unplugin-icons": "^0.17.1",
-    "vite": "^4.5.0",
+    "vite": "^5.0.11",
-    "vitepress": "^1.0.0-rc.24",
+    "vitepress": "^1.0.0-rc.37",
     "vue-tsc": "^1.8.27"
   }
 }

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

@@ -173,7 +173,7 @@ const formSchema = toTypedSchema(z.object({
 
 ### Define a form
 
-Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a from.
+Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a form.
 
 
 <TabPreview name="Composition" :names="['Composition', 'Component']">

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

@@ -68,7 +68,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <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')">
         <ChevronLeft class="w-4 h-4" />
       </button>

apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue

@@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
     <RadioGroupIndicator
       :class="cn('flex items-center justify-center', props.class)"
     >
-      <Circle class="w-2.5 h-2.5 text-foreground" />
+      <Circle class="w-2.5 h-2.5 text-current fill-current" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>

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

@@ -67,7 +67,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <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')">
         <ChevronLeftIcon class="w-4 h-4" />
       </button>

apps/www/src/public/registry/index.json

@@ -614,6 +614,7 @@
     "name": "toggle-group",
     "dependencies": [],
     "registryDependencies": [
+      "toggle",
       "utils"
     ],
     "files": [

apps/www/src/public/registry/styles/default/button.json

@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"

apps/www/src/public/registry/styles/default/carousel.json

@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/default/radio-group.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-foreground\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-current fill-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/default/select.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -35,7 +35,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",

apps/www/src/public/registry/styles/default/toggle-group.json

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

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

@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n            'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n            'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n            'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n            'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"

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

@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'absolute h-10 w-10 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",

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

@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-0',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-0',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -35,7 +35,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",

apps/www/src/public/registry/styles/new-york/toggle-group.json

@@ -0,0 +1,23 @@
+{
+  "name": "toggle-group",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+    },
+    {
+      "name": "ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}