Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream' into fix/issue/62

Browse Source
This commit is contained in:
Dunqing 2023-10-25 14:58:53 +08:00
commit 5cee81b417
103 changed files with 1937 additions and 712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
.github/workflows/publish.yaml vendored
View File

@ -11,14 +11,37 @@ on:
- dev - dev
paths: paths:
- 'apps/www/**' - 'apps/www/**'
# Triggers the workflow on pull request event, but only for pull request opened or pull request labeled with "🚀request-deploy" (from forked repo)
# pull_request is not allowed to use secrets, so we use pull_request_target instead (in forked repos)
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
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: jobs:
publish: publish:
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
name: Publish to Cloudflare Pages name: Publish to Cloudflare Pages
if: ${{
github.event_name == 'push' ||
github.event_name == 'workflow_dispatch' ||
github.event_name == 'pull_request' ||
(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: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v3 uses: actions/checkout@v3
@ -70,3 +93,16 @@ jobs:
# Optional: Change the working directory # Optional: Change the working directory
workingDirectory: apps/www workingDirectory: apps/www
wranglerVersion: '3' 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 }}
script: |
github.rest.issues.removeLabel({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
name: ['🚀request-deploy']
})

8
apps/www/.vitepress/theme/components/ComponentPreview.vue
View File

@ -7,7 +7,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<{ defineOptions({
inheritAttrs: false,
})
withDefaults(defineProps<{
name: string name: string
align?: 'center' | 'start' | 'end' align?: 'center' | 'start' | 'end'
sfcTsCode?: string sfcTsCode?: string
@ -54,7 +58,7 @@ const { style } = useConfigStore()
'items-end': align === 'end', 'items-end': align === 'end',
})" })"
> >
<ComponentLoader :key="style" :name="name" /> <ComponentLoader v-bind="$attrs" :key="style" :name="name" />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="code"> <TabsContent value="code">

8
apps/www/.vitepress/theme/components/LandingPage.vue
View File

@ -16,12 +16,12 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
<template> <template>
<PageHeader class="page-header pb-8"> <PageHeader class="page-header pb-8">
<a <a
href="/docs/changelog" href="/docs/components/form"
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium" class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
> >
🚧 <Separator class="mx-2 h-4" orientation="vertical" /> 🎉 <Separator class="mx-2 h-4" orientation="vertical" />
<span class="sm:hidden">WIP</span> <span class="sm:hidden">New form & pagination component</span>
<span class="hidden sm:inline">WIP <span class="hidden sm:inline">New form & pagination component
</span> </span>
<!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> --> <!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
</a> </a>

6
apps/www/.vitepress/theme/layout/ExamplesLayout.vue
View File

@ -14,13 +14,13 @@ import { cn } from '@/lib/utils'
<div class="container relative"> <div class="container relative">
<PageHeader class="page-header pb-8"> <PageHeader class="page-header pb-8">
<a <a
href="/docs/changelog" href="/docs/components/form"
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium" class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
> >
🎉 <Separator class="mx-2 h-4" orientation="vertical" /> 🎉 <Separator class="mx-2 h-4" orientation="vertical" />
<span class="sm:hidden">Style, a new CLI and more.</span> <span class="sm:hidden">New form & pagination component</span>
<span class="hidden sm:inline"> <span class="hidden sm:inline">
Introducing Style, a new CLI and more. New form & pagination component
</span> </span>
<ArrowRightIcon class="ml-1 h-4 w-4" /> <ArrowRightIcon class="ml-1 h-4 w-4" />
</a> </a>

43
apps/www/__registry__/index.ts
View File

@ -576,7 +576,27 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default), component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TypographyTable.vue'], files: ['../src/lib/registry/default/example/TypographyTable.vue'],
}, },
ActivityGoal: {
name: 'ActivityGoal',
type: 'components:example',
registryDependencies: ['button', 'card', 'themes', 'config'],
component: () => import('../src/lib/registry/default/example/Cards/ActivityGoal.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/ActivityGoal.vue'],
},
DataTable: {
name: 'DataTable',
type: 'components:example',
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
component: () => import('../src/lib/registry/default/example/Cards/DataTable.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/DataTable.vue'],
},
Metric: {
name: 'Metric',
type: 'components:example',
registryDependencies: ['card', 'config'],
component: () => import('../src/lib/registry/default/example/Cards/Metric.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/Metric.vue'],
},
}, },
'new-york': { 'new-york': {
AccordionDemo: { AccordionDemo: {
@ -1153,5 +1173,26 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default), component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'], files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
}, },
ActivityGoal: {
name: 'ActivityGoal',
type: 'components:example',
registryDependencies: ['button', 'card', 'themes', 'config'],
component: () => import('../src/lib/registry/new-york/example/Cards/ActivityGoal.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'],
},
DataTable: {
name: 'DataTable',
type: 'components:example',
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
component: () => import('../src/lib/registry/new-york/example/Cards/DataTable.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/DataTable.vue'],
},
Metric: {
name: 'Metric',
type: 'components:example',
registryDependencies: ['card', 'config'],
component: () => import('../src/lib/registry/new-york/example/Cards/Metric.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/Metric.vue'],
},
}, },
} }

39
apps/www/package.json
View File

@ -16,21 +16,21 @@
"@morev/vue-transitions": "^2.3.6", "@morev/vue-transitions": "^2.3.6",
"@radix-icons/vue": "^1.0.0", "@radix-icons/vue": "^1.0.0",
"@stackblitz/sdk": "^1.9.0", "@stackblitz/sdk": "^1.9.0",
"@tanstack/vue-table": "^8.10.3", "@tanstack/vue-table": "^8.10.7",
"@unovis/ts": "^1.2.1", "@unovis/ts": "^1.2.2",
"@unovis/vue": "1.3.0-alpha.3", "@unovis/vue": "1.3.0-beta.3",
"@vee-validate/zod": "^4.11.7", "@vee-validate/zod": "^4.11.8",
"@vueuse/core": "^10.4.1", "@vueuse/core": "^10.5.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"codesandbox": "^2.2.3", "codesandbox": "^2.2.3",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"lucide-vue-next": "^0.276.0", "lucide-vue-next": "^0.276.0",
"radix-vue": "^0.4.1", "radix-vue": "^1.0.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.0", "v-calendar": "^3.1.2",
"vee-validate": "4.11.7", "vee-validate": "4.11.8",
"vue": "^3.3.4", "vue": "^3.3.6",
"vue-wrap-balancer": "^1.1.3", "vue-wrap-balancer": "^1.1.3",
"zod": "^3.22.4" "zod": "^3.22.4"
}, },
@ -39,22 +39,23 @@
"@iconify-json/tabler": "^1.1.89", "@iconify-json/tabler": "^1.1.89",
"@iconify/json": "^2.2.108", "@iconify/json": "^2.2.108",
"@iconify/vue": "^4.1.1", "@iconify/vue": "^4.1.1",
"@types/lodash.template": "^4.5.1", "@types/lodash.template": "^4.5.2",
"@types/node": "^20.6.0", "@types/node": "^20.8.7",
"@vitejs/plugin-vue": "^4.4.0", "@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue-jsx": "^3.0.2", "@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/compiler-core": "^3.3.4", "@vue/compiler-core": "^3.3.6",
"@vue/compiler-dom": "^3.3.4", "@vue/compiler-dom": "^3.3.6",
"autoprefixer": "^10.4.16", "autoprefixer": "^10.4.16",
"lodash.template": "^4.5.0", "lodash.template": "^4.5.0",
"rimraf": "^5.0.1", "radix-vue": "^1.0.0",
"rimraf": "^5.0.5",
"tailwind-merge": "^1.14.0", "tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"tsx": "^3.13.0", "tsx": "^3.14.0",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"unplugin-icons": "^0.17.0", "unplugin-icons": "^0.17.1",
"vite": "^4.4.11", "vite": "^4.5.0",
"vitepress": "^1.0.0-rc.20", "vitepress": "^1.0.0-rc.23",
"vue-tsc": "^1.8.15" "vue-tsc": "^1.8.20"
} }
} }

2
apps/www/src/content/docs/components/accordion.md
View File

@ -6,7 +6,7 @@ primitive: https://www.radix-vue.com/components/accordion.html
--- ---
<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" /> <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
## Installation ## Installation

4
apps/www/src/content/docs/components/combobox.md
View File

@ -96,9 +96,9 @@ const value = ref({})
<ComponentPreview name="ComboboxPopover" /> <ComponentPreview name="ComboboxPopover" />
<!-- ### Dropdown menu ### Dropdown menu
<ComponentPreview name="ComboboxDropdownMenu" /> --> <ComponentPreview name="ComboboxDropdownMenu" />
### Form ### Form

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

File diff suppressed because it is too large Load Diff

12
apps/www/src/content/docs/components/input.md
View File

@ -4,7 +4,7 @@ description: Displays a form input field or a component that looks like an input
--- ---
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputDemo" class="max-w-xs" />
## Installation ## Installation
@ -45,23 +45,23 @@ import { Input } from '@/components/ui/input'
### Default ### Default
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputDemo" class="max-w-xs" />
### File ### File
<ComponentPreview name="InputFile" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputFile" class="max-w-xs" />
### Disabled ### Disabled
<ComponentPreview name="InputDisabled" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputDisabled" class="max-w-xs" />
### With Label ### With Label
<ComponentPreview name="InputWithLabel" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputWithLabel" class="max-w-xs" />
### With Button ### With Button
<ComponentPreview name="InputWithButton" class="[&_input]:max-w-xs" /> <ComponentPreview name="InputWithButton" class="max-w-xs" />
### Form ### Form

2
apps/www/src/content/docs/components/textarea.md
View File

@ -59,7 +59,7 @@ import { Textarea } from '@/components/ui/textarea'
### With Label ### With Label
<ComponentPreview name="TextareaWithLabel" className="[&_div.grid]:w-full" /> <ComponentPreview name="TextareaWithLabel" />
### With Text ### With Text

7
apps/www/src/lib/registry/default/example/ComboboxDemo.vue
View File

@ -45,7 +45,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
<Command v-model="value" :filter-function="filterFunction"> <Command :filter-function="filterFunction">
<CommandInput placeholder="Search framework..." /> <CommandInput placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup> <CommandGroup>
@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework"
@select="open = false" @select="(ev) => {
value = ev.detail.value as typeof framework
open = false
}"
> >
<Check <Check
:class="cn( :class="cn(

6
apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
View File

@ -47,7 +47,7 @@ const open = ref(false)
</span> </span>
<span class="text-muted-foreground">Create a new project</span> <span class="text-muted-foreground">Create a new project</span>
</p> </p>
<DropdownMenu :open="open"> <DropdownMenu v-model:open="open">
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="ghost" size="sm"> <Button variant="ghost" size="sm">
<MoreHorizontal /> <MoreHorizontal />
@ -83,8 +83,8 @@ const open = ref(false)
v-for="label in labels" v-for="label in labels"
:key="label" :key="label"
:value="label" :value="label"
@select="(value) => { @select="(ev) => {
labelRef = value as string labelRef = ev.detail.value as string
open = false open = false
}" }"
> >

2
apps/www/src/lib/registry/default/example/ContextMenuDemo.vue
View File

@ -56,7 +56,7 @@ import {
</ContextMenuCheckboxItem> </ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem> <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
<ContextMenuSeparator /> <ContextMenuSeparator />
<ContextMenuRadioGroup value="pedro"> <ContextMenuRadioGroup model-value="pedro">
<ContextMenuLabel inset> <ContextMenuLabel inset>
People People
</ContextMenuLabel> </ContextMenuLabel>

2
apps/www/src/lib/registry/default/example/DialogDemo.vue
View File

@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/default/ui/label'
Edit Profile Edit Profile
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent> <DialogContent class="sm:max-w-[425px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Edit profile</DialogTitle> <DialogTitle>Edit profile</DialogTitle>
<DialogDescription> <DialogDescription>

2
apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
View File

@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
</script> </script>
<template> <template>
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion"> <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
<slot /> <slot />
</AccordionRoot> </AccordionRoot>
</template> </template>

6
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
View File

@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue' import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<AlertDialogProps>() const props = defineProps<AlertDialogProps>()
const emits = defineEmits<AlertDialogEmits>() const emits = defineEmits<AlertDialogEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }"> <AlertDialogRoot v-bind="forwarded">
<slot /> <slot />
</AlertDialogRoot> </AlertDialogRoot>
</template> </template>

6
apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
View File

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue' import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue' import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
import { Check } from 'lucide-vue-next' import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<CheckboxRootProps>() const props = defineProps<CheckboxRootProps>()
const emits = defineEmits<CheckboxRootEmits>() const emits = defineEmits<CheckboxRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<CheckboxRoot <CheckboxRoot
v-bind="{ ...props, ...emitsAsProps }" v-bind="forwarded"
:class=" :class="
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
$attrs.class ?? '')" $attrs.class ?? '')"

2
apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
View File

@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
</script> </script>
<template> <template>
<CollapsibleContent v-bind="props"> <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<slot /> <slot />
</CollapsibleContent> </CollapsibleContent>
</template> </template>

6
apps/www/src/lib/registry/default/ui/command/Command.vue
View File

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue' import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
import { ComboboxRoot, useEmitAsProps } from 'radix-vue' import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ComboboxRootProps>() const props = defineProps<ComboboxRootProps>()
const emits = defineEmits<ComboboxRootEmits>() const emits = defineEmits<ComboboxRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ComboboxRoot <ComboboxRoot
v-bind="{ ...props, ...emitsAsProps }" v-bind="forwarded"
:open="true" :open="true"
:model-value="''" :model-value="''"
:class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')" :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"

1
apps/www/src/lib/registry/default/ui/command/CommandItem.vue
View File

@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
<ComboboxItem <ComboboxItem
v-bind="{ ...props, ...emitsAsProps }" v-bind="{ ...props, ...emitsAsProps }"
:class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')" :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
@select.prevent
> >
<slot /> <slot />
</ComboboxItem> </ComboboxItem>

6
apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
View File

@ -1,13 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ContextMenuRoot, useEmitAsProps } from 'radix-vue' import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue' import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
const props = defineProps<ContextMenuRootProps>() const props = defineProps<ContextMenuRootProps>()
const emits = defineEmits<ContextMenuRootEmits>() const emits = defineEmits<ContextMenuRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <ContextMenuRoot v-bind="forwarded">
<slot /> <slot />
</ContextMenuRoot> </ContextMenuRoot>
</template> </template>

9
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
View File

@ -3,18 +3,17 @@ import {
ContextMenuRadioGroup, ContextMenuRadioGroup,
type ContextMenuRadioGroupEmits, type ContextMenuRadioGroupEmits,
type ContextMenuRadioGroupProps, type ContextMenuRadioGroupProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<ContextMenuRadioGroupProps>() const props = defineProps<ContextMenuRadioGroupProps>()
const emits = defineEmits<ContextMenuRadioGroupEmits>() const emits = defineEmits<ContextMenuRadioGroupEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRadioGroup <ContextMenuRadioGroup v-bind="forwarded">
v-bind="props"
@update:model-value="emits('update:modelValue', $event)"
>
<slot /> <slot />
</ContextMenuRadioGroup> </ContextMenuRadioGroup>
</template> </template>

6
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
View File

@ -4,18 +4,20 @@ import {
ContextMenuRadioItem, ContextMenuRadioItem,
type ContextMenuRadioItemEmits, type ContextMenuRadioItemEmits,
type ContextMenuRadioItemProps, type ContextMenuRadioItemProps,
useEmitAsProps, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { Circle } from 'lucide-vue-next' import { Circle } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>() const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuRadioItemEmits>() const emits = defineEmits<ContextMenuRadioItemEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRadioItem <ContextMenuRadioItem
v-bind="{ ...props, ...useEmitAsProps(emits) }" v-bind="forwarded"
:class="[ :class="[
cn( cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',

6
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
View File

@ -3,15 +3,17 @@ import {
ContextMenuSub, ContextMenuSub,
type ContextMenuSubEmits, type ContextMenuSubEmits,
type ContextMenuSubProps, type ContextMenuSubProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<ContextMenuSubProps>() const props = defineProps<ContextMenuSubProps>()
const emits = defineEmits<ContextMenuSubEmits>() const emits = defineEmits<ContextMenuSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)"> <ContextMenuSub v-bind="forwarded">
<slot /> <slot />
</ContextMenuSub> </ContextMenuSub>
</template> </template>

6
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue' import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<DropdownMenuRootProps>() const props = defineProps<DropdownMenuRootProps>()
const emits = defineEmits<DropdownMenuRootEmits>() const emits = defineEmits<DropdownMenuRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <DropdownMenuRoot v-bind="forwarded">
<slot /> <slot />
</DropdownMenuRoot> </DropdownMenuRoot>
</template> </template>

6
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
View File

@ -3,15 +3,17 @@ import {
DropdownMenuSub, DropdownMenuSub,
type DropdownMenuSubEmits, type DropdownMenuSubEmits,
type DropdownMenuSubProps, type DropdownMenuSubProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<DropdownMenuSubProps>() const props = defineProps<DropdownMenuSubProps>()
const emits = defineEmits<DropdownMenuSubEmits>() const emits = defineEmits<DropdownMenuSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)"> <DropdownMenuSub v-bind="forwarded">
<slot /> <slot />
</DropdownMenuSub> </DropdownMenuSub>
</template> </template>

5
apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
View File

@ -1,11 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue' import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
const props = defineProps<HoverCardRootProps>() const props = defineProps<HoverCardRootProps>()
const forwarded = useForwardProps(props)
</script> </script>
<template> <template>
<HoverCardRoot v-bind="props"> <HoverCardRoot v-bind="forwarded">
<slot /> <slot />
</HoverCardRoot> </HoverCardRoot>
</template> </template>

10
apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
MenubarSub,
type MenubarSubEmits,
} from 'radix-vue'
interface MenubarSubRootProps { interface MenubarSubRootProps {
defaultOpen?: boolean defaultOpen?: boolean
@ -10,12 +7,13 @@ interface MenubarSubRootProps {
} }
const props = defineProps<MenubarSubRootProps>() const props = defineProps<MenubarSubRootProps>()
const emits = defineEmits<MenubarSubEmits>() const emits = defineEmits<MenubarSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<MenubarSub v-bind="props" @update:open="emits('update:open', $event)"> <MenubarSub v-bind="forwarded">
<slot /> <slot />
</MenubarSub> </MenubarSub>
</template> </template>

2
apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue' import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>() const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
]" ]"
> >
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" />
</MenubarSubTrigger> </MenubarSubTrigger>
</template> </template>

6
apps/www/src/lib/registry/default/ui/popover/Popover.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { PopoverRoot, useEmitAsProps } from 'radix-vue' import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue' import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
const props = defineProps<PopoverRootProps>() const props = defineProps<PopoverRootProps>()
const emits = defineEmits<PopoverRootEmits>() const emits = defineEmits<PopoverRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<PopoverRoot v-bind="{ ...props, ...emitsAsProps }"> <PopoverRoot v-bind="forwarded">
<slot /> <slot />
</PopoverRoot> </PopoverRoot>
</template> </template>

7
apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
View File

@ -1,16 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue' import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<RadioGroupRootProps & { class?: string }>() const props = defineProps<RadioGroupRootProps & { class?: string }>()
const emits = defineEmits<RadioGroupRootEmits>() const emits = defineEmits<RadioGroupRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }"> <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
<slot /> <slot />
</RadioGroupRoot> </RadioGroupRoot>
</template> </template>

6
apps/www/src/lib/registry/default/ui/select/Select.vue
View File

@ -1,13 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SelectRootEmits, SelectRootProps } from 'radix-vue' import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
import { SelectRoot, useEmitAsProps } from 'radix-vue' import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<SelectRootProps>() const props = defineProps<SelectRootProps>()
const emits = defineEmits<SelectRootEmits>() const emits = defineEmits<SelectRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <SelectRoot v-bind="forwarded">
<slot /> <slot />
</SelectRoot> </SelectRoot>
</template> </template>

8
apps/www/src/lib/registry/default/ui/switch/Switch.vue
View File

@ -4,24 +4,26 @@ import {
type SwitchRootEmits, type SwitchRootEmits,
type SwitchRootProps, type SwitchRootProps,
SwitchThumb, SwitchThumb,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SwitchRootProps & { class?: string }>() const props = defineProps<SwitchRootProps & { class?: string }>()
const emits = defineEmits<SwitchRootEmits>() const emits = defineEmits<SwitchRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
console.log(props, forwarded)
</script> </script>
<template> <template>
<SwitchRoot <SwitchRoot
v-bind="props" v-bind="forwarded"
:class=" :class="
cn( cn(
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
props.class, props.class,
) )
" "
@update:checked="emits('update:checked', $event)"
> >
<SwitchThumb <SwitchThumb
:class=" :class="

6
apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ToggleEmits, ToggleProps } from 'radix-vue' import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle, useEmitAsProps } from 'radix-vue' import { Toggle, useForwardPropsEmits } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue' import { computed } from 'vue'
import { toggleVariants } from '.' import { toggleVariants } from '.'
@ -23,11 +23,13 @@ const toggleProps = computed(() => {
const { variant, size, ...otherProps } = props const { variant, size, ...otherProps } = props
return otherProps return otherProps
}) })
const forwarded = useForwardPropsEmits(toggleProps, emits)
</script> </script>
<template> <template>
<Toggle <Toggle
v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }" v-bind="forwarded"
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))" :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
> >
<slot /> <slot />

6
apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue
View File

@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue' import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<TooltipRootProps>() const props = defineProps<TooltipRootProps>()
const emits = defineEmits<TooltipRootEmits>() const emits = defineEmits<TooltipRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<TooltipRoot v-bind="{ ...props, ...emitsAsProps }"> <TooltipRoot v-bind="forwarded">
<slot /> <slot />
</TooltipRoot> </TooltipRoot>
</template> </template>

8
apps/www/src/lib/registry/new-york/example/CardChat.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Check, Plus, Send } from 'lucide-vue-next' import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { import {
Card, Card,
@ -89,7 +89,7 @@ const selectedUsers = ref<User[]>([])
class="rounded-full p-2.5 flex items-center justify-center" class="rounded-full p-2.5 flex items-center justify-center"
@click="open = true" @click="open = true"
> >
<Plus class="w-4 h-4" /> <PlusIcon class="w-4 h-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent :side-offset="10"> <TooltipContent :side-offset="10">
@ -125,7 +125,7 @@ const selectedUsers = ref<User[]>([])
> >
<Input v-model="input" placeholder="Type a message..." class="flex-1" /> <Input v-model="input" placeholder="Type a message..." class="flex-1" />
<Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0"> <Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
<Send class="w-4 h-4" /> <PaperPlaneIcon class="w-4 h-4" />
<span class="sr-only">Send</span> <span class="sr-only">Send</span>
</Button> </Button>
</form> </form>
@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([])
{{ user.email }} {{ user.email }}
</p> </p>
</div> </div>
<Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" /> <CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>

5
apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
View File

@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework"
@select="open = false" @select="(ev) => {
value = ev.detail.value as typeof framework
open = false
}"
> >
{{ framework.label }} {{ framework.label }}
<CheckIcon <CheckIcon

6
apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
View File

@ -47,7 +47,7 @@ const open = ref(false)
</span> </span>
<span class="text-muted-foreground">Create a new project</span> <span class="text-muted-foreground">Create a new project</span>
</p> </p>
<DropdownMenu :open="open"> <DropdownMenu v-model:open="open">
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="ghost" size="sm"> <Button variant="ghost" size="sm">
<DotsHorizontalIcon /> <DotsHorizontalIcon />
@ -80,8 +80,8 @@ const open = ref(false)
v-for="label in labels" v-for="label in labels"
:key="label" :key="label"
:value="label" :value="label"
@select="(value) => { @select="(ev) => {
labelRef = value as string labelRef = ev.detail.value as string
open = false open = false
}" }"
> >

34
apps/www/src/lib/registry/new-york/example/CommandDemo.vue
View File

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
Calculator, CalendarIcon,
Calendar, EnvelopeClosedIcon,
CreditCard, FaceIcon,
Settings, GearIcon,
Smile, PersonIcon,
User, RocketIcon,
} from 'lucide-vue-next' } from '@radix-icons/vue'
import { import {
Command, Command,
@ -27,32 +27,32 @@ import {
<CommandEmpty>No results found.</CommandEmpty> <CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions"> <CommandGroup heading="Suggestions">
<CommandItem value="Calendar"> <CommandItem value="Calendar">
<Calendar class="mr-2 h-4 w-4" /> <CalendarIcon class="mr-2 h-4 w-4" />
<span>Calendar</span> <span>Calendar</span>
</CommandItem> </CommandItem>
<CommandItem value="Search Emoji"> <CommandItem value="Search Emoji">
<Smile class="mr-2 h-4 w-4" /> <FaceIcon class="mr-2 h-4 w-4" />
<span>Search Emoji</span> <span>Search Emoji</span>
</CommandItem> </CommandItem>
<CommandItem value="Calculator"> <CommandItem value="Launch">
<Calculator class="mr-2 h-4 w-4" /> <RocketIcon class="mr-2 h-4 w-4" />
<span>Calculator</span> <span>Launch</span>
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading="Settings"> <CommandGroup heading="Settings">
<CommandItem value="Profile"> <CommandItem value="Profile">
<User class="mr-2 h-4 w-4" /> <PersonIcon class="mr-2 h-4 w-4" />
<span>Profile</span> <span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut> <CommandShortcut>⌘P</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Billing"> <CommandItem value="Mail">
<CreditCard class="mr-2 h-4 w-4" /> <EnvelopeClosedIcon class="mr-2 h-4 w-4" />
<span>Billing</span> <span>Mail</span>
<CommandShortcut>⌘B</CommandShortcut> <CommandShortcut>⌘B</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Settings"> <CommandItem value="Settings">
<Settings class="mr-2 h-4 w-4" /> <GearIcon class="mr-2 h-4 w-4" />
<span>Settings</span> <span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut> <CommandShortcut>⌘S</CommandShortcut>
</CommandItem> </CommandItem>

2
apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue
View File

@ -56,7 +56,7 @@ import {
</ContextMenuCheckboxItem> </ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem> <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
<ContextMenuSeparator /> <ContextMenuSeparator />
<ContextMenuRadioGroup value="pedro"> <ContextMenuRadioGroup model-value="pedro">
<ContextMenuLabel inset> <ContextMenuLabel inset>
People People
</ContextMenuLabel> </ContextMenuLabel>

2
apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { addDays, format } from 'date-fns' import { addDays, format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-vue-next' import { CalendarIcon } from '@radix-icons/vue'
import { ref } from 'vue' import { ref } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'

2
apps/www/src/lib/registry/new-york/example/DialogDemo.vue
View File

@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
Edit Profile Edit Profile
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent> <DialogContent class="sm:max-w-[425px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Edit profile</DialogTitle> <DialogTitle>Edit profile</DialogTitle>
<DialogDescription> <DialogDescription>

2
apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
View File

@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
</script> </script>
<template> <template>
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion"> <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
<slot /> <slot />
</AccordionRoot> </AccordionRoot>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue
View File

@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue' import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<AlertDialogProps>() const props = defineProps<AlertDialogProps>()
const emits = defineEmits<AlertDialogEmits>() const emits = defineEmits<AlertDialogEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }"> <AlertDialogRoot v-bind="forwarded">
<slot /> <slot />
</AlertDialogRoot> </AlertDialogRoot>
</template> </template>

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

@ -2,7 +2,7 @@
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import type { Calendar } from 'v-calendar' import type { Calendar } from 'v-calendar'
import { DatePicker } from 'v-calendar' import { DatePicker } from 'v-calendar'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next' import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
import { computed, nextTick, onMounted, ref } from 'vue' import { computed, nextTick, onMounted, ref } from 'vue'
import { buttonVariants } from '../button' import { buttonVariants } from '../button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@ -55,10 +55,10 @@ onMounted(async () => {
<div class="relative"> <div class="relative">
<div class="absolute top-3 flex justify-between w-full px-4"> <div class="absolute top-3 flex justify-between w-full px-4">
<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" /> <ChevronLeftIcon class="w-4 h-4" />
</button> </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" /> <ChevronRightIcon class="w-4 h-4" />
</button> </button>
</div> </div>

6
apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
View File

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue' import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue' import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<CheckboxRootProps>() const props = defineProps<CheckboxRootProps>()
const emits = defineEmits<CheckboxRootEmits>() const emits = defineEmits<CheckboxRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<CheckboxRoot <CheckboxRoot
v-bind="{ ...props, ...emitsAsProps }" v-bind="forwarded"
:class=" :class="
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
$attrs.class ?? '')" $attrs.class ?? '')"

2
apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue
View File

@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
</script> </script>
<template> <template>
<CollapsibleContent v-bind="props"> <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<slot /> <slot />
</CollapsibleContent> </CollapsibleContent>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/command/Command.vue
View File

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue' import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
import { ComboboxRoot, useEmitAsProps } from 'radix-vue' import { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ComboboxRootProps>() const props = defineProps<ComboboxRootProps>()
const emits = defineEmits<ComboboxRootEmits>() const emits = defineEmits<ComboboxRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ComboboxRoot <ComboboxRoot
v-bind="{ ...props, ...emitsAsProps }" v-bind="forwarded"
:open="true" :open="true"
:class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')" :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
> >

4
apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Search } from 'lucide-vue-next' import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { ComboboxInput, type ComboboxInputProps } from 'radix-vue' import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@ -14,7 +14,7 @@ export default {
<template> <template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper> <div class="flex items-center border-b px-3" cmdk-input-wrapper>
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" /> <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<ComboboxInput <ComboboxInput
v-bind="{ ...props, ...$attrs }" v-bind="{ ...props, ...$attrs }"
auto-focus auto-focus

1
apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
View File

@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
<ComboboxItem <ComboboxItem
v-bind="{ ...props, ...emitsAsProps }" v-bind="{ ...props, ...emitsAsProps }"
:class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')" :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
@select.prevent
> >
<slot /> <slot />
</ComboboxItem> </ComboboxItem>

6
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue
View File

@ -1,13 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ContextMenuRoot, useEmitAsProps } from 'radix-vue' import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue' import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
const props = defineProps<ContextMenuRootProps>() const props = defineProps<ContextMenuRootProps>()
const emits = defineEmits<ContextMenuRootEmits>() const emits = defineEmits<ContextMenuRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <ContextMenuRoot v-bind="forwarded">
<slot /> <slot />
</ContextMenuRoot> </ContextMenuRoot>
</template> </template>

9
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
View File

@ -3,18 +3,17 @@ import {
ContextMenuRadioGroup, ContextMenuRadioGroup,
type ContextMenuRadioGroupEmits, type ContextMenuRadioGroupEmits,
type ContextMenuRadioGroupProps, type ContextMenuRadioGroupProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<ContextMenuRadioGroupProps>() const props = defineProps<ContextMenuRadioGroupProps>()
const emits = defineEmits<ContextMenuRadioGroupEmits>() const emits = defineEmits<ContextMenuRadioGroupEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRadioGroup <ContextMenuRadioGroup v-bind="forwarded">
v-bind="props"
@update:model-value="emits('update:modelValue', $event)"
>
<slot /> <slot />
</ContextMenuRadioGroup> </ContextMenuRadioGroup>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
View File

@ -4,18 +4,20 @@ import {
ContextMenuRadioItem, ContextMenuRadioItem,
type ContextMenuRadioItemEmits, type ContextMenuRadioItemEmits,
type ContextMenuRadioItemProps, type ContextMenuRadioItemProps,
useEmitAsProps, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue' import { DotFilledIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>() const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuRadioItemEmits>() const emits = defineEmits<ContextMenuRadioItemEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuRadioItem <ContextMenuRadioItem
v-bind="{ ...props, ...useEmitAsProps(emits) }" v-bind="forwarded"
:class="[ :class="[
cn( cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',

6
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue
View File

@ -3,15 +3,17 @@ import {
ContextMenuSub, ContextMenuSub,
type ContextMenuSubEmits, type ContextMenuSubEmits,
type ContextMenuSubProps, type ContextMenuSubProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<ContextMenuSubProps>() const props = defineProps<ContextMenuSubProps>()
const emits = defineEmits<ContextMenuSubEmits>() const emits = defineEmits<ContextMenuSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)"> <ContextMenuSub v-bind="forwarded">
<slot /> <slot />
</ContextMenuSub> </ContextMenuSub>
</template> </template>

4
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -3,7 +3,7 @@ import {
ContextMenuSubTrigger, ContextMenuSubTrigger,
type ContextMenuSubTriggerProps, type ContextMenuSubTriggerProps,
} from 'radix-vue' } from 'radix-vue'
import { ChevronRight } from 'lucide-vue-next' import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>() const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
@ -21,6 +21,6 @@ const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?:
]" ]"
> >
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" /> <ChevronRightIcon class="ml-auto h-4 w-4" />
</ContextMenuSubTrigger> </ContextMenuSubTrigger>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue' import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<DropdownMenuRootProps>() const props = defineProps<DropdownMenuRootProps>()
const emits = defineEmits<DropdownMenuRootEmits>() const emits = defineEmits<DropdownMenuRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <DropdownMenuRoot v-bind="forwarded">
<slot /> <slot />
</DropdownMenuRoot> </DropdownMenuRoot>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
View File

@ -3,15 +3,17 @@ import {
DropdownMenuSub, DropdownMenuSub,
type DropdownMenuSubEmits, type DropdownMenuSubEmits,
type DropdownMenuSubProps, type DropdownMenuSubProps,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
const props = defineProps<DropdownMenuSubProps>() const props = defineProps<DropdownMenuSubProps>()
const emits = defineEmits<DropdownMenuSubEmits>() const emits = defineEmits<DropdownMenuSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)"> <DropdownMenuSub v-bind="forwarded">
<slot /> <slot />
</DropdownMenuSub> </DropdownMenuSub>
</template> </template>

5
apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
View File

@ -1,11 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue' import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
const props = defineProps<HoverCardRootProps>() const props = defineProps<HoverCardRootProps>()
const forwarded = useForwardProps(props)
</script> </script>
<template> <template>
<HoverCardRoot v-bind="props"> <HoverCardRoot v-bind="forwarded">
<slot /> <slot />
</HoverCardRoot> </HoverCardRoot>
</template> </template>

9
apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
View File

@ -3,6 +3,7 @@ import {
MenubarContent, MenubarContent,
type MenubarContentProps, type MenubarContentProps,
MenubarPortal, MenubarPortal,
useForwardProps,
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@ -14,17 +15,13 @@ const props = withDefaults(
sideOffset: 8, sideOffset: 8,
}, },
) )
const forwarded = useForwardProps(props)
</script> </script>
<template> <template>
<MenubarPortal> <MenubarPortal>
<MenubarContent <MenubarContent
:loop="props.loop" v-bind="forwarded"
:as-child="props.asChild"
:side-offset="props.sideOffset"
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:class=" :class="
cn( cn(
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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', 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',

10
apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
MenubarSub,
type MenubarSubEmits,
} from 'radix-vue'
interface MenubarSubRootProps { interface MenubarSubRootProps {
defaultOpen?: boolean defaultOpen?: boolean
@ -10,12 +7,13 @@ interface MenubarSubRootProps {
} }
const props = defineProps<MenubarSubRootProps>() const props = defineProps<MenubarSubRootProps>()
const emits = defineEmits<MenubarSubEmits>() const emits = defineEmits<MenubarSubEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<MenubarSub v-bind="props" @update:open="emits('update:open', $event)"> <MenubarSub v-bind="forwarded">
<slot /> <slot />
</MenubarSub> </MenubarSub>
</template> </template>

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue' import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>() const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
]" ]"
> >
<slot /> <slot />
<ChevronRightIcon class="ml-auto h-4 w-4" />
</MenubarSubTrigger> </MenubarSubTrigger>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/popover/Popover.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { PopoverRoot, useEmitAsProps } from 'radix-vue' import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue' import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
const props = defineProps<PopoverRootProps>() const props = defineProps<PopoverRootProps>()
const emits = defineEmits<PopoverRootEmits>() const emits = defineEmits<PopoverRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<PopoverRoot v-bind="{ ...props, ...emitsAsProps }"> <PopoverRoot v-bind="forwarded">
<slot /> <slot />
</PopoverRoot> </PopoverRoot>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue' import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<RadioGroupRootProps & { class?: string }>() const props = defineProps<RadioGroupRootProps & { class?: string }>()
const emits = defineEmits<RadioGroupRootEmits>() const emits = defineEmits<RadioGroupRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }"> <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
<slot /> <slot />
</RadioGroupRoot> </RadioGroupRoot>
</template> </template>

6
apps/www/src/lib/registry/new-york/ui/select/Select.vue
View File

@ -1,13 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SelectRootEmits, SelectRootProps } from 'radix-vue' import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
import { SelectRoot, useEmitAsProps } from 'radix-vue' import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<SelectRootProps>() const props = defineProps<SelectRootProps>()
const emits = defineEmits<SelectRootEmits>() const emits = defineEmits<SelectRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <SelectRoot v-bind="forwarded">
<slot /> <slot />
</SelectRoot> </SelectRoot>
</template> </template>

7
apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
View File

@ -4,24 +4,25 @@ import {
type SwitchRootEmits, type SwitchRootEmits,
type SwitchRootProps, type SwitchRootProps,
SwitchThumb, SwitchThumb,
useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SwitchRootProps & { class?: string }>() const props = defineProps<SwitchRootProps & { class?: string }>()
const emits = defineEmits<SwitchRootEmits>() const emits = defineEmits<SwitchRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<SwitchRoot <SwitchRoot
v-bind="props" v-bind="forwarded"
:class=" :class="
cn( cn(
'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
props.class, props.class,
) )
" "
@update:checked="emits('update:checked', $event)"
> >
<SwitchThumb <SwitchThumb
:class=" :class="

6
apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ToggleEmits, ToggleProps } from 'radix-vue' import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle, useEmitAsProps } from 'radix-vue' import { Toggle, useForwardPropsEmits } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue' import { computed } from 'vue'
import { toggleVariants } from '.' import { toggleVariants } from '.'
@ -23,11 +23,13 @@ const toggleProps = computed(() => {
const { variant, size, ...otherProps } = props const { variant, size, ...otherProps } = props
return otherProps return otherProps
}) })
const forwarded = useForwardPropsEmits(toggleProps, emits)
</script> </script>
<template> <template>
<Toggle <Toggle
v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }" v-bind="forwarded"
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))" :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
> >
<slot /> <slot />

6
apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue' import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<TooltipRootProps>() const props = defineProps<TooltipRootProps>()
const emits = defineEmits<TooltipRootEmits>() const emits = defineEmits<TooltipRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script> </script>
<template> <template>
<TooltipRoot v-bind="{ ...props, ...useEmitAsProps(emits) }"> <TooltipRoot v-bind="forwarded">
<slot /> <slot />
</TooltipRoot> </TooltipRoot>
</template> </template>

2
apps/www/src/public/registry/styles/default/accordion.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Accordion.vue", "name": "Accordion.vue",
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
}, },
{ {
"name": "AccordionContent.vue", "name": "AccordionContent.vue",

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

@ -10,7 +10,7 @@
"files": [ "files": [
{ {
"name": "AlertDialog.vue", "name": "AlertDialog.vue",
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
}, },
{ {
"name": "AlertDialogAction.vue", "name": "AlertDialogAction.vue",

2
apps/www/src/public/registry/styles/default/checkbox.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Checkbox.vue", "name": "Checkbox.vue",
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/default/collapsible.json
View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "CollapsibleContent.vue", "name": "CollapsibleContent.vue",
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
}, },
{ {
"name": "CollapsibleTrigger.vue", "name": "CollapsibleTrigger.vue",

4
apps/www/src/public/registry/styles/default/command.json
View File

@ -10,7 +10,7 @@
"files": [ "files": [
{ {
"name": "Command.vue", "name": "Command.vue",
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :open=\"true\"\n :model-value=\"''\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :model-value=\"''\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
}, },
{ {
"name": "CommandDialog.vue", "name": "CommandDialog.vue",
@ -30,7 +30,7 @@
}, },
{ {
"name": "CommandItem.vue", "name": "CommandItem.vue",
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxItem>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
}, },
{ {
"name": "CommandList.vue", "name": "CommandList.vue",

8
apps/www/src/public/registry/styles/default/context-menu.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "ContextMenu.vue", "name": "ContextMenu.vue",
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
}, },
{ {
"name": "ContextMenuCheckboxItem.vue", "name": "ContextMenuCheckboxItem.vue",
@ -37,11 +37,11 @@
}, },
{ {
"name": "ContextMenuRadioGroup.vue", "name": "ContextMenuRadioGroup.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
}, },
{ {
"name": "ContextMenuRadioItem.vue", "name": "ContextMenuRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
}, },
{ {
"name": "ContextMenuSeparator.vue", "name": "ContextMenuSeparator.vue",
@ -53,7 +53,7 @@
}, },
{ {
"name": "ContextMenuSub.vue", "name": "ContextMenuSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
}, },
{ {
"name": "ContextMenuSubContent.vue", "name": "ContextMenuSubContent.vue",

4
apps/www/src/public/registry/styles/default/dropdown-menu.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "DropdownMenu.vue", "name": "DropdownMenu.vue",
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
}, },
{ {
"name": "DropdownMenuCheckboxItem.vue", "name": "DropdownMenuCheckboxItem.vue",
@ -49,7 +49,7 @@
}, },
{ {
"name": "DropdownMenuSub.vue", "name": "DropdownMenuSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
}, },
{ {
"name": "DropdownMenuSubContent.vue", "name": "DropdownMenuSubContent.vue",

2
apps/www/src/public/registry/styles/default/hover-card.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "HoverCard.vue", "name": "HoverCard.vue",
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\n <slot />\n </HoverCardRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
}, },
{ {
"name": "HoverCardContent.vue", "name": "HoverCardContent.vue",

4
apps/www/src/public/registry/styles/default/menubar.json
View File

@ -53,7 +53,7 @@
}, },
{ {
"name": "MenubarSub.vue", "name": "MenubarSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
}, },
{ {
"name": "MenubarSubContent.vue", "name": "MenubarSubContent.vue",
@ -61,7 +61,7 @@
}, },
{ {
"name": "MenubarSubTrigger.vue", "name": "MenubarSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </MenubarSubTrigger>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
}, },
{ {
"name": "MenubarTrigger.vue", "name": "MenubarTrigger.vue",

2
apps/www/src/public/registry/styles/default/popover.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Popover.vue", "name": "Popover.vue",
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
}, },
{ {
"name": "PopoverContent.vue", "name": "PopoverContent.vue",

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

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "RadioGroup.vue", "name": "RadioGroup.vue",
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
}, },
{ {
"name": "RadioGroupItem.vue", "name": "RadioGroupItem.vue",

2
apps/www/src/public/registry/styles/default/select.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Select.vue", "name": "Select.vue",
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",

2
apps/www/src/public/registry/styles/default/switch.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Switch.vue", "name": "Switch.vue",
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n @update:checked=\"emits('update:checked', $event)\"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nconsole.log(props, forwarded)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/default/toggle.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Toggle.vue", "name": "Toggle.vue",
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/default/tooltip.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Tooltip.vue", "name": "Tooltip.vue",
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </TooltipRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
}, },
{ {
"name": "TooltipContent.vue", "name": "TooltipContent.vue",

2
apps/www/src/public/registry/styles/new-york/accordion.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Accordion.vue", "name": "Accordion.vue",
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
}, },
{ {
"name": "AccordionContent.vue", "name": "AccordionContent.vue",

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

@ -10,7 +10,7 @@
"files": [ "files": [
{ {
"name": "AlertDialog.vue", "name": "AlertDialog.vue",
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
}, },
{ {
"name": "AlertDialogAction.vue", "name": "AlertDialogAction.vue",

2
apps/www/src/public/registry/styles/new-york/calendar.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Calendar.vue", "name": "Calendar.vue",
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeft class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRight class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n" "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeftIcon class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRightIcon class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/checkbox.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Checkbox.vue", "name": "Checkbox.vue",
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/collapsible.json
View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "CollapsibleContent.vue", "name": "CollapsibleContent.vue",
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
}, },
{ {
"name": "CollapsibleTrigger.vue", "name": "CollapsibleTrigger.vue",

6
apps/www/src/public/registry/styles/new-york/command.json
View File

@ -10,7 +10,7 @@
"files": [ "files": [
{ {
"name": "Command.vue", "name": "Command.vue",
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :open=\"true\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
}, },
{ {
"name": "CommandDialog.vue", "name": "CommandDialog.vue",
@ -26,11 +26,11 @@
}, },
{ {
"name": "CommandInput.vue", "name": "CommandInput.vue",
"content": "<script setup lang=\"ts\">\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n"
}, },
{ {
"name": "CommandItem.vue", "name": "CommandItem.vue",
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxItem>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
}, },
{ {
"name": "CommandList.vue", "name": "CommandList.vue",

10
apps/www/src/public/registry/styles/new-york/context-menu.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "ContextMenu.vue", "name": "ContextMenu.vue",
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
}, },
{ {
"name": "ContextMenuCheckboxItem.vue", "name": "ContextMenuCheckboxItem.vue",
@ -37,11 +37,11 @@
}, },
{ {
"name": "ContextMenuRadioGroup.vue", "name": "ContextMenuRadioGroup.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
}, },
{ {
"name": "ContextMenuRadioItem.vue", "name": "ContextMenuRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
}, },
{ {
"name": "ContextMenuSeparator.vue", "name": "ContextMenuSeparator.vue",
@ -53,7 +53,7 @@
}, },
{ {
"name": "ContextMenuSub.vue", "name": "ContextMenuSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
}, },
{ {
"name": "ContextMenuSubContent.vue", "name": "ContextMenuSubContent.vue",
@ -61,7 +61,7 @@
}, },
{ {
"name": "ContextMenuSubTrigger.vue", "name": "ContextMenuSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
}, },
{ {
"name": "ContextMenuTrigger.vue", "name": "ContextMenuTrigger.vue",

4
apps/www/src/public/registry/styles/new-york/dropdown-menu.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "DropdownMenu.vue", "name": "DropdownMenu.vue",
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
}, },
{ {
"name": "DropdownMenuCheckboxItem.vue", "name": "DropdownMenuCheckboxItem.vue",
@ -49,7 +49,7 @@
}, },
{ {
"name": "DropdownMenuSub.vue", "name": "DropdownMenuSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
}, },
{ {
"name": "DropdownMenuSubContent.vue", "name": "DropdownMenuSubContent.vue",

2
apps/www/src/public/registry/styles/new-york/hover-card.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "HoverCard.vue", "name": "HoverCard.vue",
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\n <slot />\n </HoverCardRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
}, },
{ {
"name": "HoverCardContent.vue", "name": "HoverCardContent.vue",

6
apps/www/src/public/registry/styles/new-york/menubar.json
View File

@ -17,7 +17,7 @@
}, },
{ {
"name": "MenubarContent.vue", "name": "MenubarContent.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n :loop=\"props.loop\"\n :as-child=\"props.asChild\"\n :side-offset=\"props.sideOffset\"\n :side=\"props.side\"\n :align=\"props.align\"\n :align-offset=\"props.alignOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
}, },
{ {
"name": "MenubarGroup.vue", "name": "MenubarGroup.vue",
@ -53,7 +53,7 @@
}, },
{ {
"name": "MenubarSub.vue", "name": "MenubarSub.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
}, },
{ {
"name": "MenubarSubContent.vue", "name": "MenubarSubContent.vue",
@ -61,7 +61,7 @@
}, },
{ {
"name": "MenubarSubTrigger.vue", "name": "MenubarSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </MenubarSubTrigger>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
}, },
{ {
"name": "MenubarTrigger.vue", "name": "MenubarTrigger.vue",

2
apps/www/src/public/registry/styles/new-york/popover.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Popover.vue", "name": "Popover.vue",
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
}, },
{ {
"name": "PopoverContent.vue", "name": "PopoverContent.vue",

2
apps/www/src/public/registry/styles/new-york/radio-group.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "RadioGroup.vue", "name": "RadioGroup.vue",
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
}, },
{ {
"name": "RadioGroupItem.vue", "name": "RadioGroupItem.vue",

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

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Select.vue", "name": "Select.vue",
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",

2
apps/www/src/public/registry/styles/new-york/switch.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Switch.vue", "name": "Switch.vue",
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n @update:checked=\"emits('update:checked', $event)\"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/toggle.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Toggle.vue", "name": "Toggle.vue",
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/tooltip.json
View File

@ -9,7 +9,7 @@
"files": [ "files": [
{ {
"name": "Tooltip.vue", "name": "Tooltip.vue",
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </TooltipRoot>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
}, },
{ {
"name": "TooltipContent.vue", "name": "TooltipContent.vue",

12
package.json
View File

@ -1,8 +1,8 @@
{ {
"name": "shadcn-vue", "name": "shadcn-vue",
"version": "0.6.1", "version": "0.7.0",
"private": true, "private": true,
"packageManager": "pnpm@8.8.0", "packageManager": "pnpm@8.9.2",
"license": "MIT", "license": "MIT",
"repository": "radix-vue/shadcn-vue", "repository": "radix-vue/shadcn-vue",
"workspaces": [ "workspaces": [
@ -32,13 +32,13 @@
"@antfu/eslint-config": "^0.43.1", "@antfu/eslint-config": "^0.43.1",
"@commitlint/cli": "^17.7.1", "@commitlint/cli": "^17.7.1",
"@commitlint/config-conventional": "^17.7.0", "@commitlint/config-conventional": "^17.7.0",
"eslint": "^8.50.0", "eslint": "^8.52.0",
"lint-staged": "^14.0.1", "lint-staged": "^14.0.1",
"pnpm": "^8.8.0", "pnpm": "^8.9.2",
"simple-git-hooks": "^2.9.0", "simple-git-hooks": "^2.9.0",
"taze": "^0.11.3", "taze": "^0.11.4",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vitest": "^0.34.4" "vitest": "^0.34.6"
}, },
"commitlint": { "commitlint": {
"extends": [ "extends": [

Some files were not shown because too many files have changed in this diff Show More