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

refactor: tailwindcss, remove all unnecessary arbitrary values, update TailwindCSS to v3.4 (#269)

Browse Source
This commit is contained in:
Roman Hrynevych 2024-02-02 21:18:58 +02:00 committed by GitHub
parent 6d24fb801b
commit fc718145ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
80 changed files with 174 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,6 @@ on:
- opened - opened
# When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
- labeled - labeled
paths:
- 'apps/www/**'
# Allows you to run this workflow manually from the Actions tab # Allows you to run this workflow manually from the Actions tab
# eslint-disable-next-line yml/no-empty-mapping-value # eslint-disable-next-line yml/no-empty-mapping-value
workflow_dispatch: workflow_dispatch:
@ -52,9 +50,6 @@ jobs:
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v3 uses: actions/checkout@v3
with:
ref: ${{ github.event.pull_request.head.sha || github.ref }}
fetch-depth: 0
# Run a build step here # Run a build step here
- name: Setup Node.js environment - name: Setup Node.js environment

6
apps/www/.vitepress/theme/components/Kbd.vue
View File

@ -18,9 +18,9 @@ const kbdClass = computed(() => {
{ {
variants: { variants: {
size: { size: {
xs: 'min-h-[16px] text-[10px] h-4 px-1', xs: 'min-h-4 text-[10px] h-4 px-1',
sm: 'min-h-[20px] text-[11px] h-5 px-1', sm: 'min-h-5 text-[11px] h-5 px-1',
md: 'min-h-[24px] text-[12px] h-6 px-1.5', md: 'min-h-6 text-[12px] h-6 px-1.5',
}, },
}, },
}, },

1
apps/www/.vitepress/theme/config/docs.ts
View File

@ -328,7 +328,6 @@ export const docsConfig: DocsConfig = {
{ {
title: 'Toast', title: 'Toast',
href: '/docs/components/toast', href: '/docs/components/toast',
label: 'New',
items: [], items: [],
}, },
{ {

4
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -135,7 +135,7 @@ watch(() => $route.path, (n) => {
:href="link.href" target="_blank" :href="link.href" target="_blank"
:variant="'ghost'" :size="'icon'" :variant="'ghost'" :size="'icon'"
> >
<component :is="link.icon" class="w-[20px] h-[20px]" /> <component :is="link.icon" class="w-[20px] h-5" />
</Button> </Button>
<Button <Button
@ -146,7 +146,7 @@ watch(() => $route.path, (n) => {
> >
<component <component
:is="isDark ? RadixIconsSun : RadixIconsMoon" :is="isDark ? RadixIconsSun : RadixIconsMoon"
class="w-[20px] h-[20px] text-foreground" class="w-[20px] h-5 text-foreground"
/> />
</Button> </Button>
</div> </div>

88
apps/www/.vitepress/theme/style.css
View File

@ -5,49 +5,49 @@
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%; --popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%; --primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%; --secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%; --secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%; --muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%; --muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%; --accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%; --accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%; --destructive: 0 72.22% 50.59%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 240 5% 64.9%; --ring: 240 5% 64.9%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 240 10% 3.9%; --background: 240 10% 3.9%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 240 10% 3.9%; --card: 240 10% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%; --popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%; --primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%; --secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%; --muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%; --muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%; --accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%; --destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%; --ring: 240 4.9% 83.9%;
} }
* { * {
@ -116,7 +116,7 @@
.step:before { .step:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background; @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply ml-[-50px] mt-[-4px]; @apply -ml-[50px] -mt-1;
content: counter(step); content: counter(step);
} }
} }
@ -139,7 +139,7 @@ pre code {
} }
pre code .line { pre code .line {
@apply px-4 min-h-[1.5rem] !py-0.5 w-full inline-block; @apply px-4 min-h-6 !py-0.5 w-full inline-block;
} }
.line-number { .line-number {

1
apps/www/package.json
View File

@ -56,6 +56,7 @@
"@vue/tsconfig": "^0.5.1", "@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.17", "autoprefixer": "^10.4.17",
"lodash.template": "^4.5.0", "lodash.template": "^4.5.0",
"oxc-parser": "^0.2.0",
"pathe": "^1.1.2", "pathe": "^1.1.2",
"rimraf": "^5.0.5", "rimraf": "^5.0.5",
"shiki": "^1.0.0-beta.3", "shiki": "^1.0.0-beta.3",

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

@ -37,6 +37,6 @@ import { Skeleton } from '@/components/ui/skeleton'
</script> </script>
<template> <template>
<Skeleton class="w-[100px] h-[20px] rounded-full" /> <Skeleton class="w-[100px] h-5 rounded-full" />
</template> </template>
``` ```

4
apps/www/src/examples/cards/components/GitHubCard.vue
View File

@ -26,7 +26,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
<template> <template>
<Card> <Card>
<CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0"> <CardHeader class="grid grid-cols-[minmax(0,1fr)_110px] items-start gap-4 space-y-0">
<div class="space-y-1"> <div class="space-y-1">
<CardTitle>shadcn/ui</CardTitle> <CardTitle>shadcn/ui</CardTitle>
<CardDescription> <CardDescription>
@ -39,7 +39,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
<StarIcon class="mr-2 h-4 w-4" /> <StarIcon class="mr-2 h-4 w-4" />
Star Star
</Button> </Button>
<Separator orientation="vertical" class="h-[20px]" /> <Separator orientation="vertical" class="h-5" />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="secondary" class="px-2 shadow-none"> <Button variant="secondary" class="px-2 shadow-none">

4
apps/www/src/examples/forms/components/AppearanceForm.vue
View File

@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent"> <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
<div class="space-y-2 rounded-sm bg-[#ecedef] p-2"> <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
<div class="space-y-2 rounded-md bg-white p-2 shadow-sm"> <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" /> <div class="h-2 w-20 rounded-lg bg-[#ecedef]" />
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div> </div>
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"> <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
@ -127,7 +127,7 @@ const onSubmit = handleSubmit((values) => {
<div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"> <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
<div class="space-y-2 rounded-sm bg-slate-950 p-2"> <div class="space-y-2 rounded-sm bg-slate-950 p-2">
<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm"> <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div class="h-2 w-[80px] rounded-lg bg-slate-400" /> <div class="h-2 w-20 rounded-lg bg-slate-400" />
<div class="h-2 w-[100px] rounded-lg bg-slate-400" /> <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
</div> </div>
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"> <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">

2
apps/www/src/examples/playground/Example.vue
View File

@ -57,7 +57,7 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
<Separator /> <Separator />
<Tabs default-value="complete" class="flex-1"> <Tabs default-value="complete" class="flex-1">
<div class="container h-full py-6"> <div class="container h-full py-6">
<div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]"> <div class="grid h-full items-stretch gap-6 md:grid-cols-[minmax(0,1fr)_200px]">
<div class="hidden flex-col space-y-4 sm:flex md:order-2"> <div class="hidden flex-col space-y-4 sm:flex md:order-2">
<div class="grid gap-2"> <div class="grid gap-2">
<HoverCard :open-delay="200"> <HoverCard :open-delay="200">

6
apps/www/src/examples/tasks/components/columns.ts
View File

@ -12,16 +12,16 @@ export const columns: ColumnDef<Task>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, header: ({ table }) => h(Checkbox,
{ 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-[2px]' }), { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-0.5' }),
cell: ({ row }) => h(Checkbox, cell: ({ row }) => h(Checkbox,
{ 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-[2px]' }), { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
}, },
{ {
accessorKey: 'id', accessorKey: 'id',
header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Task' }), header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Task' }),
cell: ({ row }) => h('div', { class: 'w-[80px]' }, row.getValue('id')), cell: ({ row }) => h('div', { class: 'w-20' }, row.getValue('id')),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
}, },

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

@ -51,7 +51,7 @@ const notifications = [
<div> <div>
<div <div
v-for="(notification, index) in notifications" :key="index" v-for="(notification, index) in notifications" :key="index"
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0" class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
> >
<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" /> <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div class="space-y-1"> <div class="space-y-1">

4
apps/www/src/lib/registry/default/example/CardStats.vue
View File

@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
+20.1% from last month +20.1% from last month
</p> </p>
<div class="h-[80px]"> <div class="h-20">
<VisXYContainer <VisXYContainer
height="80px" height="80px"
:data="data" :margin="{ :data="data" :margin="{
@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
+54.8% from last month +54.8% from last month
</p> </p>
<div class="mt-4 h-[80px]"> <div class="mt-4 h-20">
<VisXYContainer <VisXYContainer
height="80px" :data="data" :style="{ height="80px" :data="data" :style="{
'--theme-primary': `hsl(${ '--theme-primary': `hsl(${

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

@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
<li class="row-span-3"> <li class="row-span-3">
<NavigationMenuLink as-child> <NavigationMenuLink as-child>
<a <a

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

@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
</script> </script>
<template> <template>
<Progress v-model="progress" class="w-[60%]" /> <Progress v-model="progress" class="w-3/5" />
</template> </template>

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

@ -11,6 +11,6 @@ const modelValue = ref([50])
v-model="modelValue" v-model="modelValue"
:max="100" :max="100"
:step="1" :step="1"
:class="cn('w-[60%]', $attrs.class ?? '')" :class="cn('w-3/5', $attrs.class ?? '')"
/> />
</template> </template>

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
View File

@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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', 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 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',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
View File

@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<ContextMenuContent <ContextMenuContent
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
)" )"
> >

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
View File

@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
View File

@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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', 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 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',
props.class, props.class,
)" )"
> >

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuContent <DropdownMenuContent
v-bind="forwarded" v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)" :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
> >
<slot /> <slot />
</DropdownMenuContent> </DropdownMenuContent>

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template> <template>
<DropdownMenuSubContent <DropdownMenuSubContent
v-bind="forwarded" v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)" :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
> >
<slot /> <slot />
</DropdownMenuSubContent> </DropdownMenuSubContent>

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

@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
: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-48 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',
props.class, props.class,
) )
" "

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

@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
View File

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', 'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
props.class, props.class,
) )
" "

4
apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
View File

@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
:class=" :class="
cn('flex touch-none select-none transition-colors', cn('flex touch-none select-none transition-colors',
orientation === 'vertical' orientation === 'vertical'
&& 'h-full w-2.5 border-l border-l-transparent p-[1px]', && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === 'horizontal' orientation === 'horizontal'
&& 'h-2.5 flex-col border-t border-t-transparent p-[1px]', && 'h-2.5 flex-col border-t border-t-transparent p-px',
props.class)" props.class)"
> >
<ScrollAreaThumb class="relative flex-1 rounded-full bg-border" /> <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />

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

@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<SelectPortal> <SelectPortal>
<SelectContent <SelectContent
v-bind="{ ...forwarded, ...$attrs }" :class="cn( v-bind="{ ...forwarded, ...$attrs }" :class="cn(
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
position === 'popper' position === 'popper'
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class, props.class,
@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
" "
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
<SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"> <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
<slot /> <slot />
</SelectViewport> </SelectViewport>
<SelectScrollDownButton /> <SelectScrollDownButton />

2
apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
View File

@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
</script> </script>
<template> <template>
<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', props.class)" /> <textarea v-model="modelValue" :class="cn('flex min-h-20 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', props.class)" />
</template> </template>

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
import { type VariantProps, cva } from 'class-variance-authority' import { type VariantProps, cva } from 'class-variance-authority'
export const toastVariants = cva( export const toastVariants = cva(
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
{ {
variants: { variants: {
variant: { variant: {

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

@ -50,7 +50,7 @@ const notifications = [
<div> <div>
<div <div
v-for="(notification, index) in notifications" :key="index" v-for="(notification, index) in notifications" :key="index"
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0" class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
> >
<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" /> <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div class="space-y-1"> <div class="space-y-1">

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

@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
+20.1% from last month +20.1% from last month
</p> </p>
<div class="h-[80px]"> <div class="h-20">
<VisXYContainer <VisXYContainer
height="80px" height="80px"
:data="data" :margin="{ :data="data" :margin="{
@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
+54.8% from last month +54.8% from last month
</p> </p>
<div class="mt-4 h-[80px]"> <div class="mt-4 h-20">
<VisXYContainer <VisXYContainer
height="80px" :data="data" :style="{ height="80px" :data="data" :style="{
'--theme-primary': `hsl(${ '--theme-primary': `hsl(${

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

@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
<li class="row-span-3"> <li class="row-span-3">
<NavigationMenuLink as-child> <NavigationMenuLink as-child>
<a <a

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

@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
</script> </script>
<template> <template>
<Progress v-model="progress" class="w-[60%]" /> <Progress v-model="progress" class="w-3/5" />
</template> </template>

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

@ -11,6 +11,6 @@ const modelValue = ref([50])
v-model="modelValue" v-model="modelValue"
:max="100" :max="100"
:step="1" :step="1"
:class="cn('w-[60%]', $attrs.class ?? '')" :class="cn('w-3/5', $attrs.class ?? '')"
/> />
</template> </template>

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

@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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', 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 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',
props.class, props.class,
) )
" "

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

@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<ContextMenuContent <ContextMenuContent
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
)" )"
> >

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

@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
) )
" "

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

@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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', 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 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',
props.class, props.class,
)" )"
> >

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

@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuContent <DropdownMenuContent
v-bind="forwarded" v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)" :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
> >
<slot /> <slot />
</DropdownMenuContent> </DropdownMenuContent>

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

@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template> <template>
<DropdownMenuSubContent <DropdownMenuSubContent
v-bind="forwarded" v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)" :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
> >
<slot /> <slot />
</DropdownMenuSubContent> </DropdownMenuSubContent>

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

@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
: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-48 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',
props.class, props.class,
) )
" "

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

@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class, props.class,
) )
" "

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

@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
> >
<slot /> <slot />
<ChevronDownIcon <ChevronDownIcon
class="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true" aria-hidden="true"
/> />
</NavigationMenuTrigger> </NavigationMenuTrigger>

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

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', 'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
props.class, props.class,
) )
" "

4
apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
View File

@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
:class=" :class="
cn('flex touch-none select-none transition-colors', cn('flex touch-none select-none transition-colors',
orientation === 'vertical' orientation === 'vertical'
&& 'h-full w-2.5 border-l border-l-transparent p-[1px]', && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === 'horizontal' orientation === 'horizontal'
&& 'h-2.5 flex-col border-t border-t-transparent p-[1px]', && 'h-2.5 flex-col border-t border-t-transparent p-px',
props.class)" props.class)"
> >
<ScrollAreaThumb class="relative flex-1 rounded-full bg-border" /> <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />

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

@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<SelectPortal> <SelectPortal>
<SelectContent <SelectContent
v-bind="{ ...forwarded, ...$attrs }" :class="cn( v-bind="{ ...forwarded, ...$attrs }" :class="cn(
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
position === 'popper' position === 'popper'
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class, props.class,
@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
" "
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
<SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"> <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
<slot /> <slot />
</SelectViewport> </SelectViewport>
<SelectScrollDownButton /> <SelectScrollDownButton />

2
apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
View File

@ -11,7 +11,7 @@ const props = defineProps<{
<td <td
:class=" :class="
cn( cn(
'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"> <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
<slot /> <slot />
</th> </th>
</template> </template>

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

@ -1,6 +1,7 @@
import { readFile, readdir } from 'node:fs/promises' import { readFile, readdir } from 'node:fs/promises'
import { join, normalize, resolve } from 'pathe' import { join, normalize, resolve } from 'pathe'
import { compileScript, parse } from 'vue/compiler-sfc' import { compileScript, parse } from 'vue/compiler-sfc'
import oxc from 'oxc-parser'
import type { Registry } from '../../lib/registry' import type { Registry } from '../../lib/registry'
@ -135,31 +136,47 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
async function getDependencies(filename: string) { async function getDependencies(filename: string) {
const code = await readFile(filename, { encoding: 'utf8' }) const code = await readFile(filename, { encoding: 'utf8' })
const parsed = parse(code, { filename })
const registryDependencies = new Set<string>() const registryDependencies = new Set<string>()
const dependencies = new Set<string>() const dependencies = new Set<string>()
if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) { const populateDeps = (source: string) => {
const compiled = compileScript(parsed.descriptor, { id: '' }) const peerDeps = DEPENDENCIES.get(source)
const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
if (peerDeps !== undefined) {
if (taggedDeps !== undefined)
dependencies.add(taggedDeps)
else
dependencies.add(source)
peerDeps.forEach(dep => dependencies.add(dep))
}
Object.values(compiled.imports!).forEach((value) => { if (source.startsWith(REGISTRY_DEPENDENCY)) {
const source = value.source const component = source.split('/').at(-1)!
const peerDeps = DEPENDENCIES.get(source) registryDependencies.add(component)
const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source) }
if (peerDeps !== undefined) { }
if (taggedDeps !== undefined)
dependencies.add(taggedDeps)
else
dependencies.add(source)
peerDeps.forEach(dep => dependencies.add(dep))
}
if (source.startsWith(REGISTRY_DEPENDENCY)) { if (filename.endsWith('.ts')) {
const component = source.split('/').at(-1)! const ast = oxc.parseSync(code, {
registryDependencies.add(component) sourceType: 'module',
} sourceFilename: filename,
}) })
const sources = JSON.parse(ast.program).body.filter((i: any) => i.type === 'ImportDeclaration').map((i: any) => i.source)
sources.forEach((source: any) => {
populateDeps(source.value)
})
}
else {
const parsed = parse(code, { filename })
if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
const compiled = compileScript(parsed.descriptor, { id: '' })
Object.values(compiled.imports!).forEach((value) => {
populateDeps(value.source)
})
}
} }
return { registryDependencies, dependencies } return { registryDependencies, dependencies }

2
apps/www/src/public/registry/styles/default/data-table.json
View File

File diff suppressed because one or more lines are too long

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

@ -5,7 +5,7 @@
"files": [ "files": [
{ {
"name": "Kbd.vue", "name": "Kbd.vue",
"content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n as?: string\n size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n as: 'kbd',\n size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n return cva(\n 'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n {\n variants: {\n size: {\n xs: 'min-h-[16px] text-[10px] h-4 px-1',\n sm: 'min-h-[20px] text-[11px] h-5 px-1',\n md: 'min-h-[24px] text-[12px] h-6 px-1.5',\n },\n },\n },\n )({\n size: props.size,\n })\n})\n</script>\n\n<template>\n <component :is=\"props.as\" :class=\"kbdClass\">\n <slot />\n </component>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n as?: string\n size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n as: 'kbd',\n size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n return cva(\n 'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n {\n variants: {\n size: {\n xs: 'min-h-4 text-[10px] h-4 px-1',\n sm: 'min-h-5 text-[11px] h-5 px-1',\n md: 'min-h-6 text-[12px] h-6 px-1.5',\n },\n },\n },\n )({\n size: props.size,\n })\n})\n</script>\n\n<template>\n <component :is=\"props.as\" :class=\"kbdClass\">\n <slot />\n </component>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue vendored
View File

@ -24,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
v-bind="{ ...props, ...emitsAsProps }" v-bind="{ ...props, ...emitsAsProps }"
:class=" :class="
cn( cn(
'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', 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
props.class, props.class,
) )
" "

1
packages/module/playground/components/ui/carousel/Carousel.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import emblaCarouselVue from 'embla-carousel-vue'
import { useProvideCarousel } from './useCarousel' import { useProvideCarousel } from './useCarousel'
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface' import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'

10
pnpm-lock.yaml
View File

@ -162,6 +162,9 @@ importers:
lodash.template: lodash.template:
specifier: ^4.5.0 specifier: ^4.5.0
version: 4.5.0 version: 4.5.0
oxc-parser:
specifier: ^0.2.0
version: 0.2.0
pathe: pathe:
specifier: ^1.1.2 specifier: ^1.1.2
version: 1.1.2 version: 1.1.2
@ -3224,7 +3227,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@oxc-parser/binding-darwin-x64@0.2.0: /@oxc-parser/binding-darwin-x64@0.2.0:
@ -3232,7 +3234,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@oxc-parser/binding-linux-arm64-gnu@0.2.0: /@oxc-parser/binding-linux-arm64-gnu@0.2.0:
@ -3240,7 +3241,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@oxc-parser/binding-linux-x64-gnu@0.2.0: /@oxc-parser/binding-linux-x64-gnu@0.2.0:
@ -3248,7 +3248,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@oxc-parser/binding-win32-arm64-msvc@0.2.0: /@oxc-parser/binding-win32-arm64-msvc@0.2.0:
@ -3256,7 +3255,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@oxc-parser/binding-win32-x64-msvc@0.2.0: /@oxc-parser/binding-win32-x64-msvc@0.2.0:
@ -3264,7 +3262,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: false
optional: true optional: true
/@parcel/watcher-android-arm64@2.3.0: /@parcel/watcher-android-arm64@2.3.0:
@ -11206,7 +11203,6 @@ packages:
'@oxc-parser/binding-linux-x64-gnu': 0.2.0 '@oxc-parser/binding-linux-x64-gnu': 0.2.0
'@oxc-parser/binding-win32-arm64-msvc': 0.2.0 '@oxc-parser/binding-win32-arm64-msvc': 0.2.0
'@oxc-parser/binding-win32-x64-msvc': 0.2.0 '@oxc-parser/binding-win32-x64-msvc': 0.2.0
dev: false
/p-finally@1.0.0: /p-finally@1.0.0:
resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==} resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}