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

Merge branch 'dev' into feat/vee-validate

Browse Source
This commit is contained in:
sadeghbarati 2023-09-27 14:28:11 +03:30
commit 72ef22de60
57 changed files with 159 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -415,6 +415,27 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
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/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/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/Metric.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/Metric.vue'],
},
},
'new-york': {
AccordionDemo: {
@ -830,5 +851,26 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
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/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/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/Metric.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/Metric.vue'],
},
},
}

3
apps/www/package.json
View File

@ -13,6 +13,7 @@
},
"dependencies": {
"@morev/vue-transitions": "^2.3.6",
"@radix-icons/vue": "^1.0.0",
"@tanstack/vue-table": "^8.10.1",
"@unovis/ts": "^1.2.1",
"@unovis/vue": "1.3.0-alpha.3",
@ -42,7 +43,7 @@
"@vue/compiler-dom": "^3.3.4",
"autoprefixer": "^10.4.16",
"lodash.template": "^4.5.0",
"radix-vue": "^0.3.1",
"radix-vue": "^0.3.2",
"rimraf": "^5.0.1",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3",

2
apps/www/src/examples/cards/components/PaymentMethod.vue
View File

@ -31,7 +31,7 @@ import {
<CardContent class="grid gap-6">
<RadioGroup default-value="card" class="grid grid-cols-3 gap-4">
<div>
<RadioGroupItem id="card" model-value="card" class="peer sr-only" />
<RadioGroupItem id="card" value="card" class="peer sr-only" />
<Label
for="card"
class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"

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

@ -14,9 +14,8 @@ import {
useVueTable,
} from '@tanstack/vue-table'
import { h, ref } from 'vue'
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
import DropdownAction from '../DataTableDemoColumn.vue'
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { Button } from '@/lib/registry/default/ui/button'
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, {
variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
},
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
},
@ -180,7 +179,7 @@ const table = useVueTable({
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto">
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">

125
apps/www/src/lib/registry/default/example/Cards/index.vue
View File

@ -1,125 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ChevronDown, Minus, Plus, Send } from 'lucide-vue-next'
import { addDays, startOfToday } from 'date-fns'
import {
months,
payments,
roles,
teamMembers,
years,
} from './utils/data'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/default/ui/card'
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/lib/registry/default/ui/avatar'
import { Button } from '@/lib/registry/default/ui/button'
import { Textarea } from '@/lib/registry/default/ui/textarea'
import { Calendar } from '@/lib/registry/default/ui/calendar'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/default/ui/dropdown-menu'
import { Label } from '@/lib/registry/default/ui/label'
import { Switch } from '@/lib/registry/default/ui/switch'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/lib/registry/default/ui/select'
import { Input } from '@/lib/registry/default/ui/input'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/lib/registry/default/ui/tooltip'
import { Separator } from '@/lib/registry/default/ui/separator'
import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
import RiGoogleLine from '~icons/ri/google-line'
const strictlyNecessarySwitch = ref<boolean>(true)
const functionalCookiesSwitch = ref<boolean>(false)
const performanceCookiesSwitch = ref<boolean>(false)
const selectedArea = ref('Billing')
const selectedSecurity = ref('Medium')
const selectedMonth = ref<string>(months[0])
const selectedYear = ref<string>(years[0])
const selectedPayment = ref(payments[0])
const goal = ref(350)
function switchPayment(payment: any) {
selectedPayment.value = payment
}
const range = ref({
start: startOfToday(),
end: addDays(startOfToday(), 8),
})
</script>
<template>
<div class="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
<CardsStats />
<div class="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
<CardsCalendar />
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
<CardsActivityGoal />
</div>
<div class="pt-3 sm:col-span-2 xl:pt-4">
<CardsMetric />
</div>
</div>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
<div class="space-y-4 xl:space-y-4">
<CardsTeamMembers />
<CardsCookieSettings />
<CardsPaymentMethod />
</div>
<div class="space-y-4 xl:space-y-4">
<CardsChat />
<CardsCreateAccount />
<div class="hidden xl:block">
<CardsReportIssue />
</div>
</div>
</div>
</div>
<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
<CardsCalendar />
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
<CardsActivityGoal />
</div>
<div class="pt-3 sm:col-span-2 xl:pt-3">
<CardsMetric />
</div>
</div>
<div class="hidden md:block">
<CardsDataTable />
</div>
<CardsShare />
<div class="xl:hidden">
<CardsReportIssue />
</div>
</div>
</div>
</template>

4
apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
View File

@ -5,8 +5,8 @@ import {
type MenubarCheckboxItemProps,
MenubarItemIndicator,
} from 'radix-vue'
import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import RadixIconsCheck from '~icons/radix-icons/check'
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
<MenubarItemIndicator
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
>
<RadixIconsCheck class="w-4 h-4" />
<Check class="w-4 h-4" />
</MenubarItemIndicator>
<slot />
</MenubarCheckboxItem>

4
apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
View File

@ -5,8 +5,8 @@ import {
type MenubarRadioItemEmits,
type MenubarRadioItemProps,
} from 'radix-vue'
import { Circle } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
<MenubarItemIndicator
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
>
<RiCheckboxBlankCircleFill class="h-2 w-2 fill-curren" />
<Circle class="h-2 w-2 fill-curren" />
</MenubarItemIndicator>
<slot />

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

@ -4,8 +4,8 @@ import {
RadioGroupItem,
type RadioGroupItemProps,
} from 'radix-vue'
import { Circle } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
const props = defineProps<RadioGroupItemProps & { class?: string }>()
</script>
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
<RadioGroupIndicator
:class="cn('flex items-center justify-center', props.class)"
>
<RiCheckboxBlankCircleFill class="w-2.5 h-2.5 text-foreground" />
<Circle class="w-2.5 h-2.5 text-foreground" />
</RadioGroupIndicator>
</RadioGroupItem>
</template>

4
apps/www/src/lib/registry/default/ui/select/SelectItem.vue
View File

@ -5,8 +5,8 @@ import {
type SelectItemProps,
SelectItemText,
} from 'radix-vue'
import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import RadixIconsCheck from '~icons/radix-icons/check'
const props = defineProps<SelectItemProps & { class?: string }>()
</script>
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectItemIndicator>
<RadixIconsCheck class="h-4 w-4" />
<Check class="h-4 w-4" />
</SelectItemIndicator>
</span>

4
apps/www/src/lib/registry/new-york/example/AlertDemo.vue
View File

@ -1,11 +1,11 @@
<script setup lang="ts">
import RadixIconsRocket from '~icons/radix-icons/rocket'
import { RocketIcon } from '@radix-icons/vue'
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
</script>
<template>
<Alert>
<RadixIconsRocket class="h-4 w-4" />
<RocketIcon class="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.

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

@ -1,7 +1,5 @@
<script setup lang="ts">
import RadixIconsBell from '~icons/radix-icons/bell'
import RadixIconsCheck from '~icons/radix-icons/check'
import { BellIcon, CheckIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
Card,
@ -38,7 +36,7 @@ const notifications = [
</CardHeader>
<CardContent class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<RadixIconsBell />
<BellIcon />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">
Push Notifications
@ -68,7 +66,7 @@ const notifications = [
</CardContent>
<CardFooter>
<Button class="w-full">
<RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
<CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
</Button>
</CardFooter>
</Card>

7
apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { VisStackedBar, VisXYContainer } from '@unovis/vue'
import Minus from '~icons/radix-icons/minus'
import Plus from '~icons/radix-icons/plus'
import { MinusIcon, PlusIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
@ -54,7 +53,7 @@ const data = [
:disabled="goal <= 200"
@click="goal -= 10"
>
<Minus class="h-4 w-4" />
<MinusIcon class="h-4 w-4" />
<span class="sr-only">Decrease</span>
</Button>
<div class="flex-1 text-center">
@ -72,7 +71,7 @@ const data = [
:disabled="goal >= 400"
@click="goal += 10 "
>
<Plus class="h-4 w-4" />
<PlusIcon class="h-4 w-4" />
<span class="sr-only">Increase</span>
</Button>
</div>

7
apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
View File

@ -14,9 +14,8 @@ import {
useVueTable,
} from '@tanstack/vue-table'
import { h, ref } from 'vue'
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
import DropdownAction from '../DataTableDemoColumn.vue'
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { Button } from '@/lib/registry/new-york/ui/button'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, {
variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
},
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
},
@ -180,7 +179,7 @@ const table = useVueTable({
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto">
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">

4
apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
import { CaretSortIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
@ -23,7 +23,7 @@ const isOpen = ref(false)
</h4>
<CollapsibleTrigger as-child>
<Button variant="ghost" size="sm" class="w-9 p-0">
<RadixIconsCaretSort class="h-4 w-4" />
<CaretSortIcon class="h-4 w-4" />
<span class="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>

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

@ -1,7 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import Check from '~icons/radix-icons/check'
import CaretSort from '~icons/radix-icons/caret-sort'
import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/default/ui/button'
@ -42,7 +41,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
class="w-[200px] justify-between"
>
{{ value ? value.label : 'Select framework...' }}
<CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0">
@ -57,7 +56,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
@select="open = false"
>
{{ framework.label }}
<Check
<CheckIcon
:class="cn(
'ml-auto h-4 w-4',
value?.value === framework.value ? 'opacity-100' : 'opacity-0',

7
apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
View File

@ -14,9 +14,8 @@ import {
useVueTable,
} from '@tanstack/vue-table'
import { h, ref } from 'vue'
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
import DropdownAction from './DataTableDemoColumn.vue'
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { Button } from '@/lib/registry/new-york/ui/button'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@ -104,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, {
variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
},
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
},
@ -173,7 +172,7 @@ const table = useVueTable({
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto">
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
import { DotsHorizontalIcon } from '@radix-icons/vue'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
import { Button } from '@/lib/registry/new-york/ui/button'
@ -19,7 +19,7 @@ function copy(id: string) {
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="h-8 w-8 p-0">
<span class="sr-only">Open menu</span>
<RadixIconsDotsHorizontal class="h-4 w-4" />
<DotsHorizontalIcon class="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">

4
apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { format } from 'date-fns'
import { ref } from 'vue'
import RadixIconsCalendar from '~icons/radix-icons/calendar'
import { CalendarIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button'
@ -25,7 +25,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground',
)"
>
<RadixIconsCalendar class="mr-2 h-4 w-4" />
<CalendarIcon class="mr-2 h-4 w-4" />
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
</Button>
</PopoverTrigger>

4
apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { addDays, format } from 'date-fns'
import { ref } from 'vue'
import RadixIconsCalendar from '~icons/radix-icons/calendar'
import { CalendarIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button'
@ -30,7 +30,7 @@ const date = ref({
!date && 'text-muted-foreground',
)"
>
<RadixIconsCalendar class="mr-2 h-4 w-4" />
<CalendarIcon class="mr-2 h-4 w-4" />
<span>
{{ date.start ? (

4
apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import RadixIconsCalendar from '~icons/radix-icons/calendar'
import { CalendarIcon } from '@radix-icons/vue'
import {
Avatar,
@ -35,7 +35,7 @@ import {
Progressive JavaScript framework for building modern web interfaces.
</p>
<div class="flex items-center pt-2">
<RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
<CalendarIcon class="mr-2 h-4 w-4 opacity-70" />
<span class="text-xs text-muted-foreground">
Joined January 2014
</span>

4
apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
View File

@ -1,11 +1,11 @@
<script setup lang="ts">
import RadixIconsFontBold from '~icons/radix-icons/font-bold'
import { FontBoldIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script>
<template>
<Toggle aria-label="Toggle italic">
<RadixIconsFontBold class="h-4 w-4" />
<FontBoldIcon class="h-4 w-4" />
</Toggle>
</template>

4
apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
View File

@ -4,7 +4,7 @@ import {
AccordionTrigger,
type AccordionTriggerProps,
} from 'radix-vue'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { ChevronDownIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<AccordionTriggerProps & { class?: string }>()
@ -22,7 +22,7 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
"
>
<slot />
<RadixIconsChevronDown
<ChevronDownIcon
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
/>
</AccordionTrigger>

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import RadixIconsCheck from '~icons/radix-icons/check'
import { CheckIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<CheckboxRootProps>()
@ -18,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
$attrs.class ?? '')"
>
<CheckboxIndicator class="flex items-center justify-center text-current">
<RadixIconsCheck class="h-4 w-4" />
<CheckIcon class="h-4 w-4" />
</CheckboxIndicator>
</CheckboxRoot>
</template>

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

@ -5,7 +5,7 @@ import {
type ContextMenuCheckboxItemProps,
ContextMenuItemIndicator,
} from 'radix-vue'
import RadixIconsCheck from '~icons/radix-icons/check'
import { CheckIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
@ -26,7 +26,7 @@ const emits = defineEmits<ContextMenuCheckboxItemEmits>()
<ContextMenuItemIndicator
class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
>
<RadixIconsCheck class="h-4 w-4" />
<CheckIcon class="h-4 w-4" />
</ContextMenuItemIndicator>
</span>
<slot />

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

@ -5,7 +5,7 @@ import {
type ContextMenuRadioItemEmits,
type ContextMenuRadioItemProps,
} from 'radix-vue'
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
import { DotFilledIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
@ -24,7 +24,7 @@ const emits = defineEmits<ContextMenuRadioItemEmits>()
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator>
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
<DotFilledIcon class="h-4 w-4 fill-current" />
</ContextMenuItemIndicator>
</span>
<slot />

4
apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
View File

@ -7,7 +7,7 @@ import {
DialogOverlay,
DialogPortal,
} from 'radix-vue'
import RadixIconsCross2 from '~icons/radix-icons/cross-2'
import { Cross2Icon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>()
@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<RadixIconsCross2 class="w-4 h-4" />
<Cross2Icon class="w-4 h-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>

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

@ -5,7 +5,7 @@ import {
type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator,
} from 'radix-vue'
import RadixIconsCheck from '~icons/radix-icons/check'
import { CheckIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
@ -22,7 +22,7 @@ const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<RadixIconsCheck class="w-4 h-4" />
<CheckIcon class="w-4 h-4" />
</DropdownMenuItemIndicator>
</span>
<slot />

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

@ -5,7 +5,7 @@ import {
type DropdownMenuRadioItemEmits,
type DropdownMenuRadioItemProps,
} from 'radix-vue'
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
import { DotFilledIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
@ -24,7 +24,7 @@ const emits = defineEmits<DropdownMenuRadioItemEmits>()
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
<DotFilledIcon class="h-4 w-4 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />

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

@ -3,7 +3,7 @@ import {
DropdownMenuSubTrigger,
type DropdownMenuSubTriggerProps,
} from 'radix-vue'
import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
]"
>
<slot />
<RadixIconsChevronRight class="ml-auto h-4 w-4" />
<ChevronRightIcon class="ml-auto h-4 w-4" />
</DropdownMenuSubTrigger>
</template>

4
apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
View File

@ -5,8 +5,8 @@ import {
type MenubarCheckboxItemProps,
MenubarItemIndicator,
} from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import RadixIconsCheck from '~icons/radix-icons/check'
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
<MenubarItemIndicator
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
>
<RadixIconsCheck class="w-4 h-4" />
<CheckIcon class="w-4 h-4" />
</MenubarItemIndicator>
<slot />
</MenubarCheckboxItem>

4
apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
View File

@ -5,8 +5,8 @@ import {
type MenubarRadioItemEmits,
type MenubarRadioItemProps,
} from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
<MenubarItemIndicator
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
>
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
<DotFilledIcon class="h-4 w-4 fill-current" />
</MenubarItemIndicator>
<slot />

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

@ -3,8 +3,8 @@ import {
NavigationMenuTrigger,
type NavigationMenuTriggerProps,
} from 'radix-vue'
import { ChevronDownIcon } from '@radix-icons/vue'
import { navigationMenuTriggerStyle } from '.'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { cn } from '@/lib/utils'
const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
@ -16,7 +16,7 @@ const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
v-bind="props"
>
<slot />
<RadixIconsChevronDown
<ChevronDownIcon
class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>

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

@ -4,8 +4,8 @@ import {
RadioGroupItem,
type RadioGroupItemProps,
} from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import RadixIconsCheck from '~icons/radix-icons/check'
const props = defineProps<RadioGroupItemProps & { class?: string }>()
</script>
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
<RadioGroupIndicator
:class="cn('flex items-center justify-center', props.class)"
>
<RadixIconsCheck class="h-3.5 w-3.5 fill-primary" />
<CheckIcon class="h-3.5 w-3.5 fill-primary" />
</RadioGroupIndicator>
</RadioGroupItem>
</template>

4
apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
View File

@ -5,8 +5,8 @@ import {
type SelectItemProps,
SelectItemText,
} from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
import RadixIconsCheck from '~icons/radix-icons/check'
const props = defineProps<SelectItemProps & { class?: string }>()
</script>
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectItemIndicator>
<RadixIconsCheck class="h-4 w-4" />
<CheckIcon class="h-4 w-4" />
</SelectItemIndicator>
</span>

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
import { ChevronDownIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = withDefaults(
@ -27,7 +27,7 @@ const props = withDefaults(
>
<slot />
<SelectIcon as-child>
<RadixIconsChevronDown class="w-4 h-4 opacity-50" />
<ChevronDownIcon class="w-4 h-4 opacity-50" />
</SelectIcon>
</SelectTrigger>
</template>

4
apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
View File

@ -8,7 +8,7 @@ import {
DialogPortal,
} from 'radix-vue'
import { cva } from 'class-variance-authority'
import RadixIconsCross2 from '~icons/radix-icons/cross-2'
import { Cross2Icon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils'
interface SheetContentProps extends DialogContentProps {
@ -56,7 +56,7 @@ const sheetVariants = cva(
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<RadixIconsCross2 class="w-4 h-4 text-muted-foreground" />
<Cross2Icon class="w-4 h-4 text-muted-foreground" />
</DialogClose>
</DialogContent>
</DialogPortal>

2
apps/www/src/lib/registry/registry.ts
View File

@ -64,7 +64,7 @@ async function crawlExample(rootPath: string) {
const [name] = dirent.name.split('.vue')
const file_path = join('example', dirent.name)
const { dependencies, registryDependencies }
= await getDependencies(join(rootPath, dirent.name))
= await getDependencies(join(dirent.path, dirent.name))
exampleRegistry.push({
name,

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

@ -13,7 +13,7 @@
},
{
"name": "MenubarCheckboxItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\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 @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <RadixIconsCheck class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\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 @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <Check class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
},
{
"name": "MenubarContent.vue",
@ -41,7 +41,7 @@
},
{
"name": "MenubarRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\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 @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <RiCheckboxBlankCircleFill class=\"h-2 w-2 fill-curren\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\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 @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <Circle class=\"h-2 w-2 fill-curren\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
},
{
"name": "MenubarSeparator.vue",

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

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

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

@ -21,7 +21,7 @@
},
{
"name": "SelectItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full 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 <SelectItemIndicator>\n <RadixIconsCheck class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full 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 <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
},
{
"name": "SelectItemText.vue",

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

@ -7,7 +7,7 @@
"files": [
{
"name": "Textarea.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <textarea :class=\"cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\" />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\" />\n</template>\n"
},
{
"name": "index.ts",

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

@ -21,7 +21,7 @@
},
{
"name": "AccordionTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionHeader class=\"flex\" as=\"div\">\n <AccordionTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <RadixIconsChevronDown\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n />\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionHeader class=\"flex\" as=\"div\">\n <AccordionTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <ChevronDownIcon\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n />\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
},
{
"name": "index.ts",

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

@ -9,7 +9,7 @@
"files": [
{
"name": "Checkbox.vue",
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } 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 <RadixIconsCheck 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 } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } 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"
},
{
"name": "index.ts",

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

@ -13,7 +13,7 @@
},
{
"name": "ContextMenuCheckboxItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n} from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <ContextMenuCheckboxItem\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 class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n >\n <RadixIconsCheck class=\"h-4 w-4\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <ContextMenuCheckboxItem\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 class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n >\n <CheckIcon class=\"h-4 w-4\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
},
{
"name": "ContextMenuContent.vue",
@ -41,7 +41,7 @@
},
{
"name": "ContextMenuRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n} from 'radix-vue'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\nimport { cn, useEmitAsProps } 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 <RadixIconsDotFilled 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} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } 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"
},
{
"name": "ContextMenuSeparator.vue",

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

@ -13,7 +13,7 @@
},
{
"name": "DialogContent.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <RadixIconsCross2 class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
},
{
"name": "DialogDescription.vue",

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

@ -13,7 +13,7 @@
},
{
"name": "DropdownMenuCheckboxItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <RadixIconsCheck class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <CheckIcon class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
},
{
"name": "DropdownMenuContent.vue",
@ -37,7 +37,7 @@
},
{
"name": "DropdownMenuRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(\n 'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n <DropdownMenuItemIndicator>\n <RadixIconsDotFilled class=\"h-4 w-4 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(\n 'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n <DropdownMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
},
{
"name": "DropdownMenuSeparator.vue",
@ -57,7 +57,7 @@
},
{
"name": "DropdownMenuSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport RadixIconsChevronRight from '~icons/radix-icons/chevron-right'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <DropdownMenuSubTrigger\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 data-[state=open]:bg-accent',\n props.class,\n ),\n ]\"\n >\n <slot />\n <RadixIconsChevronRight class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <DropdownMenuSubTrigger\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 data-[state=open]:bg-accent',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
},
{
"name": "DropdownMenuTrigger.vue",

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

@ -13,7 +13,7 @@
},
{
"name": "MenubarCheckboxItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\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 @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <RadixIconsCheck class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\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 @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <CheckIcon class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
},
{
"name": "MenubarContent.vue",
@ -41,7 +41,7 @@
},
{
"name": "MenubarRadioItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\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 @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <RadixIconsDotFilled class=\"h-4 w-4 fill-current\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\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 @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
},
{
"name": "MenubarSeparator.vue",

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

@ -33,7 +33,7 @@
},
{
"name": "NavigationMenuTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuTrigger\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n <RadixIconsChevronDown\n class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuTrigger\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n <ChevronDownIcon\n class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
},
{
"name": "NavigationMenuViewport.vue",

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

@ -13,7 +13,7 @@
},
{
"name": "RadioGroupItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n :class=\"cn('flex items-center justify-center', props.class)\"\n >\n <RadixIconsCheck class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n :class=\"cn('flex items-center justify-center', props.class)\"\n >\n <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
},
{
"name": "index.ts",

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

@ -21,7 +21,7 @@
},
{
"name": "SelectItem.vue",
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full 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 <SelectItemIndicator>\n <RadixIconsCheck class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full 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 <SelectItemIndicator>\n <CheckIcon class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
},
{
"name": "SelectItemText.vue",
@ -37,7 +37,7 @@
},
{
"name": "SelectTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
},
{
"name": "SelectValue.vue",

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

@ -17,7 +17,7 @@
},
{
"name": "SheetContent.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n side?: 'left' | 'right' | 'top' | 'bottom'\n class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <RadixIconsCross2 class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n side?: 'left' | 'right' | 'top' | 'bottom'\n class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
},
{
"name": "SheetDescription.vue",

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "shadcn-vue",
"version": "0.1.9",
"version": "0.2.0",
"private": true,
"packageManager": "pnpm@8.7.6",
"license": "MIT",

4
packages/cli/package.json
View File

@ -1,7 +1,7 @@
{
"name": "shadcn-vue",
"type": "module",
"version": "0.1.9",
"version": "0.2.0",
"description": "Add components to your apps.",
"publishConfig": {
"access": "public"
@ -62,7 +62,7 @@
"node-fetch": "^3.3.2",
"ora": "^7.0.1",
"prompts": "^2.4.2",
"radix-vue": "^0.2.3",
"radix-vue": "^0.3.2",
"recast": "^0.23.4",
"rimraf": "^5.0.1",
"ts-morph": "^19.0.0",

2
packages/cli/src/commands/init.ts
View File

@ -269,7 +269,7 @@ export async function runInit(cwd: string, config: Config) {
const deps = PROJECT_DEPENDENCIES.base.concat(
config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : [],
).concat(
config.style === 'new-york' ? [] : ['lucide-vue-next'],
config.style === 'new-york' ? ['@radix-icons/vue'] : ['lucide-vue-next'],
).filter(Boolean)
await execa(

1
packages/cli/test/commands/init.test.ts
View File

@ -75,6 +75,7 @@ test('init config-full', async () => {
'class-variance-authority',
'clsx',
'tailwind-merge',
'@radix-icons/vue',
],
{
cwd: targetDir,

2
packages/cli/test/fixtures/nuxt/package.json vendored
View File

@ -13,7 +13,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-vue-next": "^0.276.0",
"radix-vue": "^0.2.3",
"radix-vue": "^0.3.2",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7"
},

23
pnpm-lock.yaml
View File

@ -53,6 +53,9 @@ importers:
'@morev/vue-transitions':
specifier: ^2.3.6
version: 2.3.6(vue@3.3.4)
'@radix-icons/vue':
specifier: ^1.0.0
version: 1.0.0(vue@3.3.4)
'@tanstack/vue-table':
specifier: ^8.10.1
version: 8.10.3(vue@3.3.4)
@ -136,8 +139,8 @@ importers:
specifier: ^4.5.0
version: 4.5.0
radix-vue:
specifier: ^0.3.1
version: 0.3.1(vue@3.3.4)
specifier: ^0.3.2
version: 0.3.2(vue@3.3.4)
rimraf:
specifier: ^5.0.1
version: 5.0.4
@ -220,8 +223,8 @@ importers:
specifier: ^2.4.2
version: 2.4.2
radix-vue:
specifier: ^0.2.3
version: 0.2.3(vue@3.3.4)
specifier: ^0.3.2
version: 0.3.2(vue@3.3.4)
recast:
specifier: ^0.23.4
version: 0.23.4
@ -1744,6 +1747,14 @@ packages:
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
dev: false
/@radix-icons/vue@1.0.0(vue@3.3.4):
resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
peerDependencies:
vue: '>= 3'
dependencies:
vue: 3.3.4
dev: false
/@rollup/pluginutils@5.0.4:
resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
engines: {node: '>=14.0.0'}
@ -6837,8 +6848,8 @@ packages:
resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
dev: false
/radix-vue@0.2.3(vue@3.3.4):
resolution: {integrity: sha512-kA+3XCO5zXStbTrzbibhyKh62TlL+5Nq5FMAfPjS5/Ni8Qf0FGfWb924O2q2sV85HfZKHa9XcACuMN1NKZz0KA==}
/radix-vue@0.3.2(vue@3.3.4):
resolution: {integrity: sha512-u7ldJ01C1YRF3dtNAKhr3P3i9rLK0zzRHBPx9SaWqyjV3mgV2bLjkDEf2UvLZel+HABdtXO4x1NW2DltdFYatQ==}
dependencies:
'@floating-ui/dom': 1.5.3
'@floating-ui/vue': 1.0.2(vue@3.3.4)