From 2b6dfd1fbbcaa5fae96b170bf6d66a4cf8d7553f Mon Sep 17 00:00:00 2001 From: Raed Bahri <raedbahri90@gmail.com> Date: Tue, 5 Mar 2024 08:56:43 +0100 Subject: [PATCH 1/6] fix: change to css logical props --- .../default/example/ButtonLoadingDemo.vue | 2 +- .../default/example/ButtonWithIconDemo.vue | 2 +- .../lib/registry/default/example/CardChat.vue | 6 +- .../lib/registry/default/example/CardDemo.vue | 2 +- .../default/example/Cards/DataTable.vue | 10 +-- .../default/example/CarouselSpacing.vue | 4 +- .../registry/default/example/ComboboxDemo.vue | 4 +- .../default/example/ComboboxDropdownMenu.vue | 10 +-- .../registry/default/example/ComboboxForm.vue | 4 +- .../default/example/ComboboxPopover.vue | 6 +- .../registry/default/example/CommandDemo.vue | 12 ++-- .../example/DataTableColumnPinningDemo.vue | 11 ++-- .../default/example/DataTableDemo.vue | 6 +- .../default/example/DatePickerDemo.vue | 2 +- .../default/example/DatePickerWithPresets.vue | 2 +- .../default/example/DatePickerWithRange.vue | 2 +- .../default/example/DateTimePickerDemo.vue | 2 +- .../registry/default/example/DrawerDialog.vue | 4 +- .../default/example/DropdownMenuDemo.vue | 28 ++++---- .../default/example/HoverCardDemo.vue | 2 +- .../default/example/InputWithIcon.vue | 2 +- .../default/example/RangePickerWithSlot.vue | 2 +- .../example/ToggleItalicWithTextDemo.vue | 2 +- .../default/example/TypographyBlockquote.vue | 2 +- .../default/example/TypographyDemo.vue | 4 +- .../default/example/TypographyList.vue | 2 +- .../ui/alert-dialog/AlertDialogContent.vue | 2 +- .../lib/registry/default/ui/alert/index.ts | 2 +- .../registry/default/ui/calendar/Calendar.vue | 64 +++++++++---------- .../default/ui/carousel/CarouselContent.vue | 2 +- .../default/ui/carousel/CarouselItem.vue | 2 +- .../default/ui/carousel/CarouselNext.vue | 2 +- .../default/ui/carousel/CarouselPrevious.vue | 2 +- .../default/ui/command/CommandInput.vue | 2 +- .../default/ui/command/CommandShortcut.vue | 2 +- .../context-menu/ContextMenuCheckboxItem.vue | 4 +- .../ui/context-menu/ContextMenuItem.vue | 4 +- .../ui/context-menu/ContextMenuLabel.vue | 4 +- .../ui/context-menu/ContextMenuRadioItem.vue | 4 +- .../ui/context-menu/ContextMenuShortcut.vue | 2 +- .../ui/context-menu/ContextMenuSubTrigger.vue | 6 +- .../default/ui/dialog/DialogContent.vue | 4 +- .../default/ui/dialog/DialogScrollContent.vue | 2 +- .../DropdownMenuCheckboxItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuLabel.vue | 4 +- .../dropdown-menu/DropdownMenuRadioItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuShortcut.vue | 2 +- .../dropdown-menu/DropdownMenuSubTrigger.vue | 2 +- .../ui/menubar/MenubarCheckboxItem.vue | 4 +- .../default/ui/menubar/MenubarItem.vue | 4 +- .../default/ui/menubar/MenubarLabel.vue | 4 +- .../default/ui/menubar/MenubarRadioItem.vue | 4 +- .../default/ui/menubar/MenubarShortcut.vue | 2 +- .../default/ui/menubar/MenubarSubTrigger.vue | 6 +- .../navigation-menu/NavigationMenuTrigger.vue | 2 +- .../NavigationMenuViewport.vue | 2 +- .../registry/default/ui/select/SelectItem.vue | 4 +- .../default/ui/select/SelectLabel.vue | 2 +- .../default/ui/sheet/SheetContent.vue | 4 +- .../lib/registry/default/ui/sheet/index.ts | 4 +- .../registry/default/ui/table/TableCell.vue | 2 +- .../registry/default/ui/table/TableHead.vue | 2 +- .../ui/tags-input/TagsInputItemDelete.vue | 2 +- .../registry/default/ui/toast/ToastClose.vue | 2 +- .../default/ui/toast/ToastViewport.vue | 2 +- .../lib/registry/default/ui/toast/index.ts | 4 +- .../new-york/example/ButtonLoadingDemo.vue | 2 +- .../new-york/example/ButtonWithIconDemo.vue | 2 +- .../registry/new-york/example/CardChat.vue | 6 +- .../registry/new-york/example/CardDemo.vue | 2 +- .../new-york/example/Cards/DataTable.vue | 10 +-- .../new-york/example/CarouselSpacing.vue | 4 +- .../new-york/example/ComboboxDemo.vue | 4 +- .../new-york/example/ComboboxDropdownMenu.vue | 2 +- .../new-york/example/ComboboxForm.vue | 4 +- .../registry/new-york/example/CommandDemo.vue | 12 ++-- .../example/DataTableColumnPinningDemo.vue | 11 ++-- .../new-york/example/DataTableDemo.vue | 6 +- .../new-york/example/DatePickerDemo.vue | 2 +- .../example/DatePickerWithPresets.vue | 2 +- .../new-york/example/DatePickerWithRange.vue | 2 +- .../new-york/example/DateTimePickerDemo.vue | 2 +- .../new-york/example/DrawerDialog.vue | 4 +- .../new-york/example/HoverCardDemo.vue | 2 +- .../new-york/example/InputWithIcon.vue | 2 +- .../new-york/example/RangePickerWithSlot.vue | 2 +- .../example/ToggleItalicWithTextDemo.vue | 2 +- .../new-york/example/TypographyBlockquote.vue | 2 +- .../new-york/example/TypographyDemo.vue | 4 +- .../new-york/example/TypographyList.vue | 2 +- .../ui/alert-dialog/AlertDialogContent.vue | 2 +- .../lib/registry/new-york/ui/alert/index.ts | 2 +- .../new-york/ui/calendar/Calendar.vue | 64 +++++++++---------- .../new-york/ui/carousel/CarouselContent.vue | 2 +- .../new-york/ui/carousel/CarouselItem.vue | 2 +- .../new-york/ui/carousel/CarouselNext.vue | 2 +- .../new-york/ui/carousel/CarouselPrevious.vue | 2 +- .../new-york/ui/command/CommandInput.vue | 2 +- .../new-york/ui/command/CommandShortcut.vue | 2 +- .../context-menu/ContextMenuCheckboxItem.vue | 4 +- .../ui/context-menu/ContextMenuItem.vue | 4 +- .../ui/context-menu/ContextMenuLabel.vue | 4 +- .../ui/context-menu/ContextMenuRadioItem.vue | 4 +- .../ui/context-menu/ContextMenuShortcut.vue | 2 +- .../ui/context-menu/ContextMenuSubTrigger.vue | 6 +- .../new-york/ui/dialog/DialogContent.vue | 4 +- .../ui/dialog/DialogScrollContent.vue | 3 +- .../DropdownMenuCheckboxItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuLabel.vue | 4 +- .../dropdown-menu/DropdownMenuRadioItem.vue | 4 +- .../ui/dropdown-menu/DropdownMenuShortcut.vue | 2 +- .../dropdown-menu/DropdownMenuSubTrigger.vue | 2 +- .../ui/menubar/MenubarCheckboxItem.vue | 4 +- .../new-york/ui/menubar/MenubarItem.vue | 4 +- .../new-york/ui/menubar/MenubarLabel.vue | 4 +- .../new-york/ui/menubar/MenubarRadioItem.vue | 4 +- .../new-york/ui/menubar/MenubarShortcut.vue | 2 +- .../new-york/ui/menubar/MenubarSubTrigger.vue | 6 +- .../navigation-menu/NavigationMenuTrigger.vue | 2 +- .../NavigationMenuViewport.vue | 2 +- .../new-york/ui/select/SelectItem.vue | 4 +- .../new-york/ui/sheet/SheetContent.vue | 4 +- .../lib/registry/new-york/ui/sheet/index.ts | 4 +- .../registry/new-york/ui/table/TableCell.vue | 2 +- .../registry/new-york/ui/table/TableHead.vue | 2 +- .../ui/tags-input/TagsInputItemDelete.vue | 2 +- .../registry/new-york/ui/toast/ToastClose.vue | 2 +- .../new-york/ui/toast/ToastViewport.vue | 2 +- .../lib/registry/new-york/ui/toast/index.ts | 4 +- 131 files changed, 296 insertions(+), 303 deletions(-) diff --git a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue index 221e14039..6207909c5 100644 --- a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue +++ b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue @@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/default/ui/button' <template> <Button disabled> - <Loader2 class="w-4 h-4 mr-2 animate-spin" /> + <Loader2 class="w-4 h-4 me-2 animate-spin" /> Please wait </Button> </template> diff --git a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue index 801e4ebe3..9ace85bac 100644 --- a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue +++ b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button' <template> <Button> - <Mail class="w-4 h-4 mr-2" /> Login with Email + <Mail class="w-4 h-4 me-2" /> Login with Email </Button> </template> diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue index 66089f4e3..d80997eae 100644 --- a/apps/www/src/lib/registry/default/example/CardChat.vue +++ b/apps/www/src/lib/registry/default/example/CardChat.vue @@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([]) :key="index" :class="cn( 'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm', - message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted', + message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted', )" > {{ message.content }} @@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([]) <AvatarImage :src="user.avatar" alt="Image" /> <AvatarFallback>{{ user.name[0] }}</AvatarFallback> </Avatar> - <div class="ml-2"> + <div class="ms-2"> <p class="text-sm font-medium leading-none"> {{ user.name }} </p> @@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([]) {{ user.email }} </p> </div> - <Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" /> + <Check v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" /> </CommandItem> </CommandGroup> </CommandList> diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue index 81e6eff7d..7b6b4d3a0 100644 --- a/apps/www/src/lib/registry/default/example/CardDemo.vue +++ b/apps/www/src/lib/registry/default/example/CardDemo.vue @@ -67,7 +67,7 @@ const notifications = [ </CardContent> <CardFooter> <Button class="w-full"> - <Check class="mr-2 h-4 w-4" /> Mark all as read + <Check class="me-2 h-4 w-4" /> Mark all as read </Button> </CardFooter> </Card> diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue index e208a04a5..33b3215ac 100644 --- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue +++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue @@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })]) + }, ['Email', h(ChevronsUpDown, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }, @@ -178,8 +178,8 @@ const table = useVueTable({ /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDown class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDown class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> @@ -201,7 +201,7 @@ const table = useVueTable({ <Table> <TableHeader> <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"> - <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3"> + <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3"> <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" /> </TableHead> </TableRow> @@ -213,7 +213,7 @@ const table = useVueTable({ :key="row.id" :data-state="row.getIsSelected() && 'selected'" > - <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3"> + <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3"> <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" /> </TableCell> </TableRow> diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue index 04bc1024d..650a48445 100644 --- a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue +++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue @@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card' align: 'start', }" > - <CarouselContent class="-ml-1"> - <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3"> + <CarouselContent class="-ms-1"> + <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3"> <div class="p-1"> <Card> <CardContent class="flex aspect-square items-center justify-center p-6"> diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue index da21cf4e6..33d352451 100644 --- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue +++ b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue @@ -44,7 +44,7 @@ const value = ref<string>('') {{ value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..." }} - <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> + <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </PopoverTrigger> <PopoverContent class="w-[200px] p-0"> @@ -67,7 +67,7 @@ const value = ref<string>('') {{ framework.label }} <Check :class="cn( - 'ml-auto h-4 w-4', + 'ms-auto h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0', )" /> diff --git a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue index a274c0c55..671cc98de 100644 --- a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue +++ b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue @@ -42,7 +42,7 @@ const open = ref(false) <template> <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"> <p class="text-sm font-medium leading-none"> - <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> + <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> {{ labelRef }} </span> <span class="text-muted-foreground">Create a new project</span> @@ -57,17 +57,17 @@ const open = ref(false) <DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuGroup> <DropdownMenuItem> - <User class="mr-2 h-4 w-4" /> + <User class="me-2 h-4 w-4" /> Assign to... </DropdownMenuItem> <DropdownMenuItem> - <Calendar class="mr-2 h-4 w-4" /> + <Calendar class="me-2 h-4 w-4" /> Set due date... </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuSub> <DropdownMenuSubTrigger> - <Tags class="mr-2 h-4 w-4" /> + <Tags class="me-2 h-4 w-4" /> Apply label </DropdownMenuSubTrigger> <DropdownMenuSubContent class="p-0"> @@ -97,7 +97,7 @@ const open = ref(false) </DropdownMenuSub> <DropdownMenuSeparator /> <DropdownMenuItem class="text-red-600"> - <Trash class="mr-2 h-4 w-4" /> + <Trash class="me-2 h-4 w-4" /> Delete <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> </DropdownMenuItem> diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue index fe4de4c43..661281b5a 100644 --- a/apps/www/src/lib/registry/default/example/ComboboxForm.vue +++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue @@ -76,7 +76,7 @@ const onSubmit = handleSubmit((values) => { {{ values.language ? languages.find( (language) => language.value === values.language, )?.label : 'Select language...' }} - <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> + <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </FormControl> </PopoverTrigger> @@ -97,7 +97,7 @@ const onSubmit = handleSubmit((values) => { }" > <Check - :class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" + :class="cn('me-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" /> {{ language.label }} </CommandItem> diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue index 4686e4cef..52fa47eeb 100644 --- a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue +++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue @@ -60,7 +60,7 @@ const statuses: Status[] = [ ] const open = ref(false) -const value = ref<typeof statuses[number]>() +// const value = ref<typeof statuses[number]>() const selectedStatus = ref<Status>() </script> @@ -78,7 +78,7 @@ const selectedStatus = ref<Status>() class="w-[150px] justify-start" > <template v-if="selectedStatus"> - <component :is="selectedStatus?.icon" class="mr-2 h-4 w-4 shrink-0" /> + <component :is="selectedStatus?.icon" class="me-2 h-4 w-4 shrink-0" /> {{ selectedStatus?.label }} </template> <template v-else> @@ -104,7 +104,7 @@ const selectedStatus = ref<Status>() <component :is="status.icon" :key="status.value" - :class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40', + :class="cn('me-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40', )" /> <span>{{ status.label }}</span> diff --git a/apps/www/src/lib/registry/default/example/CommandDemo.vue b/apps/www/src/lib/registry/default/example/CommandDemo.vue index df1a42163..0e729f301 100644 --- a/apps/www/src/lib/registry/default/example/CommandDemo.vue +++ b/apps/www/src/lib/registry/default/example/CommandDemo.vue @@ -27,32 +27,32 @@ import { <CommandEmpty>No results found.</CommandEmpty> <CommandGroup heading="Suggestions"> <CommandItem value="Calendar"> - <Calendar class="mr-2 h-4 w-4" /> + <Calendar class="me-2 h-4 w-4" /> <span>Calendar</span> </CommandItem> <CommandItem value="Search Emoji"> - <Smile class="mr-2 h-4 w-4" /> + <Smile class="me-2 h-4 w-4" /> <span>Search Emoji</span> </CommandItem> <CommandItem value="Calculator"> - <Calculator class="mr-2 h-4 w-4" /> + <Calculator class="me-2 h-4 w-4" /> <span>Calculator</span> </CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Settings"> <CommandItem value="Profile"> - <User class="mr-2 h-4 w-4" /> + <User class="me-2 h-4 w-4" /> <span>Profile</span> <CommandShortcut>⌘P</CommandShortcut> </CommandItem> <CommandItem value="Billing"> - <CreditCard class="mr-2 h-4 w-4" /> + <CreditCard class="me-2 h-4 w-4" /> <span>Billing</span> <CommandShortcut>⌘B</CommandShortcut> </CommandItem> <CommandItem value="Settings"> - <Settings class="mr-2 h-4 w-4" /> + <Settings class="me-2 h-4 w-4" /> <span>Settings</span> <CommandShortcut>⌘S</CommandShortcut> </CommandItem> diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue index ed8271937..e349923d6 100644 --- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue +++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue @@ -1,6 +1,5 @@ <script setup lang="ts"> import type { - ColumnDef, ColumnFiltersState, SortingState, VisibilityState, @@ -88,7 +87,7 @@ const columns = [ 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', }), - cell: ({ row, column }) => { + cell: ({ row }) => { return h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), @@ -108,7 +107,7 @@ const columns = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]) + }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }), @@ -165,8 +164,6 @@ const table = useVueTable({ }, }, }) - -const getState = table.getState() </script> <template> @@ -180,8 +177,8 @@ const getState = table.getState() /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDown class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDown class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue index e6e8a1944..df77bfd80 100644 --- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue +++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue @@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]) + }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }, @@ -171,8 +171,8 @@ const table = useVueTable({ /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDown class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDown class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue index 18334e635..62138b3b0 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue @@ -25,7 +25,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span> </Button> </PopoverTrigger> diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue index c45446f80..f24ec1b54 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue @@ -32,7 +32,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <template v-if="date"> {{ format(date, "PPP") }} </template> diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue index 212b9c068..2e7901513 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue @@ -30,7 +30,7 @@ const date = ref({ !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span> {{ date.start ? ( diff --git a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue index 883f7a896..44659fbaf 100644 --- a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue +++ b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue @@ -25,7 +25,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span> </Button> </PopoverTrigger> diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue index 488ca7f00..6426c5f9c 100644 --- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue @@ -34,11 +34,11 @@ const isOpen = ref(false) <UseTemplate> <form class="grid items-start gap-4 px-4"> <div class="grid gap-2"> - <Label html-for="email">Email</Label> + <Label htms-for="email">Email</Label> <Input id="email" type="email" default-value="shadcn@example.com" /> </div> <div class="grid gap-2"> - <Label html-for="username">Username</Label> + <Label htms-for="username">Username</Label> <Input id="username" default-value="@shadcn" /> </div> <Button type="submit"> diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue index 025a3aa16..dff6420a4 100644 --- a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue +++ b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue @@ -45,22 +45,22 @@ import { <DropdownMenuSeparator /> <DropdownMenuGroup> <DropdownMenuItem> - <User class="mr-2 h-4 w-4" /> + <User class="me-2 h-4 w-4" /> <span>Profile</span> <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem> - <CreditCard class="mr-2 h-4 w-4" /> + <CreditCard class="me-2 h-4 w-4" /> <span>Billing</span> <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem> - <Settings class="mr-2 h-4 w-4" /> + <Settings class="me-2 h-4 w-4" /> <span>Settings</span> <DropdownMenuShortcut>⌘S</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem> - <Keyboard class="mr-2 h-4 w-4" /> + <Keyboard class="me-2 h-4 w-4" /> <span>Keyboard shortcuts</span> <DropdownMenuShortcut>⌘K</DropdownMenuShortcut> </DropdownMenuItem> @@ -68,54 +68,54 @@ import { <DropdownMenuSeparator /> <DropdownMenuGroup> <DropdownMenuItem> - <Users class="mr-2 h-4 w-4" /> + <Users class="me-2 h-4 w-4" /> <span>Team</span> </DropdownMenuItem> <DropdownMenuSub> <DropdownMenuSubTrigger> - <UserPlus class="mr-2 h-4 w-4" /> + <UserPlus class="me-2 h-4 w-4" /> <span>Invite users</span> </DropdownMenuSubTrigger> <DropdownMenuPortal> <DropdownMenuSubContent> <DropdownMenuItem> - <Mail class="mr-2 h-4 w-4" /> + <Mail class="me-2 h-4 w-4" /> <span>Email</span> </DropdownMenuItem> <DropdownMenuItem> - <MessageSquare class="mr-2 h-4 w-4" /> + <MessageSquare class="me-2 h-4 w-4" /> <span>Message</span> </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem> - <PlusCircle class="mr-2 h-4 w-4" /> + <PlusCircle class="me-2 h-4 w-4" /> <span>More...</span> </DropdownMenuItem> </DropdownMenuSubContent> </DropdownMenuPortal> </DropdownMenuSub> <DropdownMenuItem> - <Plus class="mr-2 h-4 w-4" /> + <Plus class="me-2 h-4 w-4" /> <span>New Team</span> <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut> </DropdownMenuItem> </DropdownMenuGroup> <DropdownMenuSeparator /> <DropdownMenuItem> - <Github class="mr-2 h-4 w-4" /> + <Github class="me-2 h-4 w-4" /> <span>GitHub</span> </DropdownMenuItem> <DropdownMenuItem> - <LifeBuoy class="mr-2 h-4 w-4" /> + <LifeBuoy class="me-2 h-4 w-4" /> <span>Support</span> </DropdownMenuItem> <DropdownMenuItem disabled> - <Cloud class="mr-2 h-4 w-4" /> + <Cloud class="me-2 h-4 w-4" /> <span>API</span> </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem> - <LogOut class="mr-2 h-4 w-4" /> + <LogOut class="me-2 h-4 w-4" /> <span>Log out</span> <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> </DropdownMenuItem> diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue index 54e4a8d7f..d83266b70 100644 --- a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue +++ b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue @@ -35,7 +35,7 @@ import { Progressive JavaScript framework for building modern web interfaces. </p> <div class="flex items-center pt-2"> - <CalendarDays class="mr-2 h-4 w-4 opacity-70" /> + <CalendarDays class="me-2 h-4 w-4 opacity-70" /> <span class="text-xs text-muted-foreground"> Joined January 2014 </span> diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue index 04d295ff3..2fcabf183 100644 --- a/apps/www/src/lib/registry/default/example/InputWithIcon.vue +++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue @@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/default/ui/input' <template> <div class="relative w-full max-w-sm items-center"> - <Input id="search" type="text" placeholder="Search..." class="pl-10" /> + <Input id="search" type="text" placeholder="Search..." class="ps-10" /> <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2"> <MagnifyingGlassIcon class="size-6 text-muted-foreground" /> </span> diff --git a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue index 2add61c6e..7c4a75199 100644 --- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue +++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue @@ -30,7 +30,7 @@ const date = ref({ !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span> {{ date.start ? ( diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue index c888989c9..fbb7f66d8 100644 --- a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue +++ b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue @@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/default/ui/toggle' <template> <Toggle aria-label="Toggle italic"> - <Italic class="w-4 h-4 mr-2" /> + <Italic class="w-4 h-4 me-2" /> Italic </Toggle> </template> diff --git a/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue b/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue index c3bb658b9..60c37ff12 100644 --- a/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue +++ b/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue @@ -1,5 +1,5 @@ <template> - <blockquote class="mt-6 border-l-2 pl-6 italic"> + <blockquote class="mt-6 border-l-2 ps-6 italic"> "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." </blockquote> diff --git a/apps/www/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/src/lib/registry/default/example/TypographyDemo.vue index 55020f333..e302937ba 100644 --- a/apps/www/src/lib/registry/default/example/TypographyDemo.vue +++ b/apps/www/src/lib/registry/default/example/TypographyDemo.vue @@ -23,7 +23,7 @@ </a> : he would tax the jokes in the kingdom. </p> - <blockquote class="mt-6 border-l-2 pl-6 italic"> + <blockquote class="mt-6 border-l-2 ps-6 italic"> "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." </blockquote> @@ -34,7 +34,7 @@ The king's subjects were not amused. They grumbled and complained, but the king was firm: </p> - <ul class="my-6 ml-6 list-disc [&>li]:mt-2"> + <ul class="my-6 ms-6 list-disc [&>li]:mt-2"> <li>1st level of puns: 5 gold coins</li> <li>2nd level of jokes: 10 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li> diff --git a/apps/www/src/lib/registry/default/example/TypographyList.vue b/apps/www/src/lib/registry/default/example/TypographyList.vue index a9a2d09fd..f45b9478a 100644 --- a/apps/www/src/lib/registry/default/example/TypographyList.vue +++ b/apps/www/src/lib/registry/default/example/TypographyList.vue @@ -1,5 +1,5 @@ <template> - <ul class="my-6 ml-6 list-disc [&>li]:mt-2"> + <ul class="my-6 ms-6 list-disc [&>li]:mt-2"> <li>1st level of puns: 5 gold coins</li> <li>2nd level of jokes: 10 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li> diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue index 9f09909e8..d2534ae20 100644 --- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue +++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue @@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - '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', + 'fixed start-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, ) " diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts index 765f704d0..c72b06be4 100644 --- a/apps/www/src/lib/registry/default/ui/alert/index.ts +++ b/apps/www/src/lib/registry/default/ui/alert/index.ts @@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue' export { default as AlertDescription } from './AlertDescription.vue' export const alertVariants = cva( - 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', + 'relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground', { variants: { variant: { diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue index b8c60f3d0..dd71b0085 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -193,9 +193,9 @@ const vCalendarSlots = computed(() => { @apply w-full relative; } :root { - --vc-slide-translate: 22px; - --vc-slide-duration: 0.15s; - --vc-slide-timing: ease; + --vc-slide-translate: 22px; + --vc-slide-duration: 0.15s; + --vc-slide-timing: ease; } .calendar .vc-fade-enter-active, @@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-down-leave-active, .calendar .vc-slide-fade-enter-active, .calendar .vc-slide-fade-leave-active { - transition: - opacity var(--vc-slide-duration) var(--vc-slide-timing), - -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); - transition: - transform var(--vc-slide-duration) var(--vc-slide-timing), - opacity var(--vc-slide-duration) var(--vc-slide-timing); - transition: - transform var(--vc-slide-duration) var(--vc-slide-timing), - opacity var(--vc-slide-duration) var(--vc-slide-timing), - -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - pointer-events: none; + transition: + opacity var(--vc-slide-duration) var(--vc-slide-timing), + -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); + transition: + transform var(--vc-slide-duration) var(--vc-slide-timing), + opacity var(--vc-slide-duration) var(--vc-slide-timing); + transition: + transform var(--vc-slide-duration) var(--vc-slide-timing), + opacity var(--vc-slide-duration) var(--vc-slide-timing), + -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; } .calendar .vc-none-leave-active, @@ -231,8 +231,8 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-right-leave-active, .calendar .vc-slide-up-leave-active, .calendar .vc-slide-down-leave-active { - position: absolute !important; - width: 100%; + position: absolute !important; + width: 100%; } .calendar .vc-none-enter-from, @@ -249,39 +249,39 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-down-leave-to, .calendar .vc-slide-fade-enter-from, .calendar .vc-slide-fade-leave-to { - opacity: 0; + opacity: 0; } .calendar .vc-slide-left-enter-from, .calendar .vc-slide-right-leave-to, .calendar .vc-slide-fade-enter-from.direction-left, .calendar .vc-slide-fade-leave-to.direction-left { - -webkit-transform: translateX(var(--vc-slide-translate)); - transform: translateX(var(--vc-slide-translate)); + -webkit-transform: translateX(var(--vc-slide-translate)); + transform: translateX(var(--vc-slide-translate)); } .calendar .vc-slide-right-enter-from, .calendar .vc-slide-left-leave-to, .calendar .vc-slide-fade-enter-from.direction-right, .calendar .vc-slide-fade-leave-to.direction-right { - -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); - transform: translateX(calc(-1 * var(--vc-slide-translate))); + -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); + transform: translateX(calc(-1 * var(--vc-slide-translate))); } .calendar .vc-slide-up-enter-from, .calendar .vc-slide-down-leave-to, .calendar .vc-slide-fade-enter-from.direction-top, .calendar .vc-slide-fade-leave-to.direction-top { - -webkit-transform: translateY(var(--vc-slide-translate)); - transform: translateY(var(--vc-slide-translate)); + -webkit-transform: translateY(var(--vc-slide-translate)); + transform: translateY(var(--vc-slide-translate)); } .calendar .vc-slide-down-enter-from, .calendar .vc-slide-up-leave-to, .calendar .vc-slide-fade-enter-from.direction-bottom, .calendar .vc-slide-fade-leave-to.direction-bottom { - -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); - transform: translateY(calc(-1 * var(--vc-slide-translate))); + -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); + transform: translateY(calc(-1 * var(--vc-slide-translate))); } /** * Timepicker styles @@ -305,7 +305,7 @@ const vCalendarSlots = computed(() => { @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary; } .vc-time-select-group .vc-base-icon { - @apply mr-1 text-primary stroke-primary; + @apply me-1 text-primary stroke-primary; } .vc-time-select-group select { @apply bg-primary-foreground p-1 appearance-none outline-none text-center; @@ -314,18 +314,18 @@ const vCalendarSlots = computed(() => { @apply text-muted-foreground tracking-wide; } .vc-time-month { - @apply text-primary ml-2; + @apply text-primary ms-2; } .vc-time-day { - @apply text-primary ml-1; + @apply text-primary ms-1; } .vc-time-year { - @apply text-muted-foreground ml-2; + @apply text-muted-foreground ms-2; } .vc-time-colon { @apply mb-0.5; } .vc-time-decimal { - @apply ml-0.5; + @apply ms-0.5; } </style> diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue index 87f0e3087..d8d859db8 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue @@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel() :class=" cn( 'flex', - orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', + orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col', props.class, )" v-bind="$attrs" diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue index 801e5c162..4759b767b 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue @@ -14,7 +14,7 @@ const { orientation } = useCarousel() aria-roledescription="slide" :class="cn( 'min-w-0 shrink-0 grow-0 basis-full', - orientation === 'horizontal' ? 'pl-4' : 'pt-4', + orientation === 'horizontal' ? 'ps-4' : 'pt-4', props.class, )" > diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue index 012f807e8..63f5f975c 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue @@ -17,7 +17,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel() 'touch-manipulation absolute h-8 w-8 rounded-full p-0', orientation === 'horizontal' ? '-right-12 top-1/2 -translate-y-1/2' - : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', + : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90', props.class, )" variant="outline" diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue index 9a71f7359..6930e8c0b 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue @@ -17,7 +17,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel() 'touch-manipulation absolute h-8 w-8 rounded-full p-0', orientation === 'horizontal' ? '-left-12 top-1/2 -translate-y-1/2' - : '-top-12 left-1/2 -translate-x-1/2 rotate-90', + : '-top-12 start-1/2 -translate-x-1/2 rotate-90', props.class, )" variant="outline" diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue index 669237338..cab9f9933 100644 --- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue +++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue @@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps) <template> <div class="flex items-center border-b px-3" cmdk-input-wrapper> - <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" /> + <Search class="me-2 h-4 w-4 shrink-0 opacity-50" /> <ComboboxInput v-bind="{ ...forwardedProps, ...$attrs }" auto-focus diff --git a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue +++ b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue index 3025e5aa9..1408c65d2 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <ContextMenuCheckboxItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <ContextMenuItemIndicator> <Check class="h-4 w-4" /> </ContextMenuItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue index 0ac2f2533..de9d5d89f 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue @@ -8,7 +8,7 @@ import { } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const emits = defineEmits<ContextMenuItemEmits>() const delegatedProps = computed(() => { @@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue index a10aef122..f4bb331fb 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -17,7 +17,7 @@ const delegatedProps = computed(() => { v-bind="delegatedProps" :class=" cn('px-2 py-1.5 text-sm font-semibold text-foreground', - inset && 'pl-8', props.class, + inset && 'ps-8', props.class, )" > <slot /> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue index 37a39a4eb..b4f29b299 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <ContextMenuRadioItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <ContextMenuItemIndicator> <Circle class="h-2 w-2 fill-current" /> </ContextMenuItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue index 057ae675e..0a9ecb47f 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue @@ -8,7 +8,7 @@ import { import { ChevronRight } from 'lucide-vue-next' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -24,11 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > <slot /> - <ChevronRight class="ml-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4" /> </ContextMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue index 7b3aeaba9..37594aa8f 100644 --- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue +++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue @@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - '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', + 'fixed start-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, )" > <slot /> <DialogClose - class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" + class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" > <X class="w-4 h-4" /> <span class="sr-only">Close</span> diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue index cd9ba0d24..450599aa2 100644 --- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue +++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue @@ -48,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <slot /> <DialogClose - class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary" + class="absolute top-3 end-3 p-0.5 transition-colors rounded-md hover:bg-secondary" > <X class="w-4 h-4" /> <span class="sr-only">Close</span> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue index cd21fdeb9..eb435506f 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <DropdownMenuCheckboxItem v-bind="forwarded" :class=" cn( - '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', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuItemIndicator> <Check class="w-4 h-4" /> </DropdownMenuItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue index 3360e8721..436a22cd4 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue index ecf9b2fc6..ec21cb0ff 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps) <template> <DropdownMenuLabel v-bind="forwardedProps" - :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)" + :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)" > <slot /> </DropdownMenuLabel> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue index c8b9029ce..17c5fafcf 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue @@ -27,11 +27,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <DropdownMenuRadioItem v-bind="forwarded" :class="cn( - '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', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuItemIndicator> <Circle class="h-2 w-2 fill-current" /> </DropdownMenuItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue index abaeda649..f8adfe85d 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest opacity-60', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue index 3474553db..3c99e0434 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue @@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRight class="ml-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4" /> </DropdownMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue index 1e7c3a9fb..3f413dc11 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <MenubarCheckboxItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <MenubarItemIndicator> <Check class="w-4 h-4" /> </MenubarItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue index 742e30189..9c809a1c5 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue @@ -8,7 +8,7 @@ import { } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const emits = defineEmits<MenubarItemEmits>() @@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue index 168df904e..275fc2b08 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue @@ -3,11 +3,11 @@ import type { HTMLAttributes } from 'vue' import { MenubarLabel, type MenubarLabelProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() </script> <template> - <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"> + <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)"> <slot /> </MenubarLabel> </template> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue index c97b00db9..c75bdb614 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <MenubarRadioItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <MenubarItemIndicator> <Circle class="h-2 w-2 fill-current" /> </MenubarItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue index 3cf8b858c..3e12f8a85 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue @@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from import { ChevronRight } from 'lucide-vue-next' import { cn } from '@/lib/utils' -const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -20,11 +20,11 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > <slot /> - <ChevronRight class="ml-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4" /> </MenubarSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue index f93d9c221..77dbb20d2 100644 --- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue @@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps) > <slot /> <ChevronDown - class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" + class="relative top-px ms-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" /> </NavigationMenuTrigger> diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue index 8abf60d1d..53d356872 100644 --- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue +++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue @@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps) </script> <template> - <div class="absolute left-0 top-full flex justify-center"> + <div class="absolute start-0 top-full flex justify-center"> <NavigationMenuViewport v-bind="forwardedProps" :class=" diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue index b102a8128..9705d608f 100644 --- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue +++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue @@ -26,12 +26,12 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class=" cn( - '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', + 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, ) " > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <SelectItemIndicator> <Check class="h-4 w-4" /> </SelectItemIndicator> diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue index 3d45cdb6a..acfa2af5f 100644 --- a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue +++ b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue @@ -7,7 +7,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] } </script> <template> - <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)"> + <SelectLabel :class="cn('py-1.5 ps-8 pe-2 text-sm font-semibold', props.class)"> <slot /> </SelectLabel> </template> diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue index 796251823..aa9c3b49b 100644 --- a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue +++ b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue @@ -27,7 +27,7 @@ const props = defineProps<SheetContentProps>() const emits = defineEmits<DialogContentEmits>() const delegatedProps = computed(() => { - const { class: _, side, ...delegated } = props + const { class: _, ...delegated } = props return delegated }) @@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <slot /> <DialogClose - class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" + class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" > <X class="w-4 h-4 text-muted-foreground" /> </DialogClose> diff --git a/apps/www/src/lib/registry/default/ui/sheet/index.ts b/apps/www/src/lib/registry/default/ui/sheet/index.ts index fae3f08c4..9e2fc2089 100644 --- a/apps/www/src/lib/registry/default/ui/sheet/index.ts +++ b/apps/www/src/lib/registry/default/ui/sheet/index.ts @@ -17,9 +17,9 @@ export const sheetVariants = cva( top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', - left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', + left: 'inset-y-0 start-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', right: - 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', + 'inset-y-0 end-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', }, }, defaultVariants: { diff --git a/apps/www/src/lib/registry/default/ui/table/TableCell.vue b/apps/www/src/lib/registry/default/ui/table/TableCell.vue index 4a4da4004..fd52c437d 100644 --- a/apps/www/src/lib/registry/default/ui/table/TableCell.vue +++ b/apps/www/src/lib/registry/default/ui/table/TableCell.vue @@ -11,7 +11,7 @@ const props = defineProps<{ <td :class=" cn( - 'p-4 align-middle [&:has([role=checkbox])]:pr-0', + 'p-4 align-middle [&:has([role=checkbox])]:pe-0', props.class, ) " diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue index e882b6084..01c210864 100644 --- a/apps/www/src/lib/registry/default/ui/table/TableHead.vue +++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)"> + <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0', props.class)"> <slot /> </th> </template> diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue index 544eebc4b..e57b99c4b 100644 --- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue +++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue @@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps) </script> <template> - <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)"> + <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent me-1', props.class)"> <slot> <X class="w-4 h-4" /> </slot> diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue index ab685a51c..01722a63f 100644 --- a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue +++ b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue @@ -16,7 +16,7 @@ const delegatedProps = computed(() => { </script> <template> - <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> + <ToastClose v-bind="delegatedProps" :class="cn('absolute end-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> <X class="h-4 w-4" /> </ToastClose> </template> diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue index 57deec811..a2ed192b3 100644 --- a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue +++ b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue @@ -13,5 +13,5 @@ const delegatedProps = computed(() => { </script> <template> - <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" /> + <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" /> </template> diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts index dd097c544..ba4143d94 100644 --- a/apps/www/src/lib/registry/default/ui/toast/index.ts +++ b/apps/www/src/lib/registry/default/ui/toast/index.ts @@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast' import { type VariantProps, cva } from 'class-variance-authority' 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-[--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', + 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-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: { variant: { @@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants> export interface ToastProps extends ToastRootProps { class?: HTMLAttributes['class'] variant?: ToastVariants['variant'] - 'onOpenChange'?: ((value: boolean) => void) | undefined + onOpenChange?: ((value: boolean) => void) | undefined } diff --git a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue index 6835086e3..a19363411 100644 --- a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue @@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/new-york/ui/button' <template> <Button disabled> - <ReloadIcon class="w-4 h-4 mr-2 animate-spin" /> + <ReloadIcon class="w-4 h-4 me-2 animate-spin" /> Please wait </Button> </template> diff --git a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue index 648764a4f..5a5728ada 100644 --- a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button' <template> <Button> - <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email + <EnvelopeOpenIcon class="w-4 h-4 me-2" /> Login with Email </Button> </template> diff --git a/apps/www/src/lib/registry/new-york/example/CardChat.vue b/apps/www/src/lib/registry/new-york/example/CardChat.vue index a98601dce..ac25c4d9d 100644 --- a/apps/www/src/lib/registry/new-york/example/CardChat.vue +++ b/apps/www/src/lib/registry/new-york/example/CardChat.vue @@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([]) :key="index" :class="cn( 'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm', - message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted', + message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted', )" > {{ message.content }} @@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([]) <AvatarImage :src="user.avatar" alt="Image" /> <AvatarFallback>{{ user.name[0] }}</AvatarFallback> </Avatar> - <div class="ml-2"> + <div class="ms-2"> <p class="text-sm font-medium leading-none"> {{ user.name }} </p> @@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([]) {{ user.email }} </p> </div> - <CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" /> + <CheckIcon v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" /> </CommandItem> </CommandGroup> </CommandList> diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue index ad8c08835..35abf0975 100644 --- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue @@ -66,7 +66,7 @@ const notifications = [ </CardContent> <CardFooter> <Button class="w-full"> - <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read + <CheckIcon class="me-2 h-4 w-4" /> Mark all as read </Button> </CardFooter> </Card> diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue index 2ed40cc38..56a191807 100644 --- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue +++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue @@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) + }, ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }, @@ -178,8 +178,8 @@ const table = useVueTable({ /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDownIcon class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> @@ -201,7 +201,7 @@ const table = useVueTable({ <Table> <TableHeader> <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"> - <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3"> + <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3"> <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" /> </TableHead> </TableRow> @@ -213,7 +213,7 @@ const table = useVueTable({ :key="row.id" :data-state="row.getIsSelected() && 'selected'" > - <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3"> + <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3"> <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" /> </TableCell> </TableRow> diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue index 7e4603ca5..1de3a7be5 100644 --- a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue +++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue @@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card' align: 'start', }" > - <CarouselContent class="-ml-1"> - <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3"> + <CarouselContent class="-ms-1"> + <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3"> <div class="p-1"> <Card> <CardContent class="flex aspect-square items-center justify-center p-6"> diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue index f5f197a26..a1629d9af 100644 --- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue @@ -44,7 +44,7 @@ const value = ref<string>('') {{ value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..." }} - <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> + <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </PopoverTrigger> <PopoverContent class="w-[200px] p-0"> @@ -67,7 +67,7 @@ const value = ref<string>('') {{ framework.label }} <CheckIcon :class="cn( - 'ml-auto h-4 w-4', + 'ms-auto h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0', )" /> diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue index b45b60232..a0a9c7473 100644 --- a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue +++ b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue @@ -42,7 +42,7 @@ const open = ref(false) <template> <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"> <p class="text-sm font-medium leading-none"> - <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> + <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> {{ labelRef }} </span> <span class="text-muted-foreground">Create a new project</span> diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue index 247c08702..6e7edf312 100644 --- a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue +++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue @@ -79,7 +79,7 @@ const onSubmit = handleSubmit((values) => { {{ values.language ? languages.find( (language) => language.value === values.language, )?.label : 'Select language...' }} - <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> + <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </FormControl> </PopoverTrigger> @@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => { > {{ language.label }} <CheckIcon - :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" + :class="cn('ms-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" /> </CommandItem> </CommandGroup> diff --git a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue index 52067aebd..d81aa83d0 100644 --- a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue @@ -27,32 +27,32 @@ import { <CommandEmpty>No results found.</CommandEmpty> <CommandGroup heading="Suggestions"> <CommandItem value="Calendar"> - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span>Calendar</span> </CommandItem> <CommandItem value="Search Emoji"> - <FaceIcon class="mr-2 h-4 w-4" /> + <FaceIcon class="me-2 h-4 w-4" /> <span>Search Emoji</span> </CommandItem> <CommandItem value="Launch"> - <RocketIcon class="mr-2 h-4 w-4" /> + <RocketIcon class="me-2 h-4 w-4" /> <span>Launch</span> </CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Settings"> <CommandItem value="Profile"> - <PersonIcon class="mr-2 h-4 w-4" /> + <PersonIcon class="me-2 h-4 w-4" /> <span>Profile</span> <CommandShortcut>⌘P</CommandShortcut> </CommandItem> <CommandItem value="Mail"> - <EnvelopeClosedIcon class="mr-2 h-4 w-4" /> + <EnvelopeClosedIcon class="me-2 h-4 w-4" /> <span>Mail</span> <CommandShortcut>⌘B</CommandShortcut> </CommandItem> <CommandItem value="Settings"> - <GearIcon class="mr-2 h-4 w-4" /> + <GearIcon class="me-2 h-4 w-4" /> <span>Settings</span> <CommandShortcut>⌘S</CommandShortcut> </CommandItem> diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue index 3d5f7d8c1..4064e907d 100644 --- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue @@ -1,6 +1,5 @@ <script setup lang="ts"> import type { - ColumnDef, ColumnFiltersState, SortingState, VisibilityState, @@ -88,7 +87,7 @@ const columns = [ 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', }), - cell: ({ row, column }) => { + cell: ({ row }) => { return h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), @@ -108,7 +107,7 @@ const columns = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) + }, () => ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }), @@ -165,8 +164,6 @@ const table = useVueTable({ }, }, }) - -const getState = table.getState() </script> <template> @@ -180,8 +177,8 @@ const getState = table.getState() /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDownIcon class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue index a83220ab4..c27d8c0da 100644 --- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue @@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [ return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), - }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) + }, ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })]) }, cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), }, @@ -171,8 +171,8 @@ const table = useVueTable({ /> <DropdownMenu> <DropdownMenuTrigger as-child> - <Button variant="outline" class="ml-auto"> - Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> + <Button variant="outline" class="ms-auto"> + Columns <ChevronDownIcon class="ms-2 h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue index 685f17cb2..5cfb0ccc3 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue @@ -25,7 +25,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span> </Button> </PopoverTrigger> diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue index 0e96f721c..f1b79f827 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue @@ -32,7 +32,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <template v-if="date"> {{ format(date, "PPP") }} </template> diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue index 7b8c3084f..a9f57d797 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue @@ -30,7 +30,7 @@ const date = ref({ !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span> {{ date.start ? ( diff --git a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue index 401d89a88..bf7ae69a0 100644 --- a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue @@ -25,7 +25,7 @@ const date = ref<Date>() !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span> </Button> </PopoverTrigger> diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue index 488ca7f00..6426c5f9c 100644 --- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue @@ -34,11 +34,11 @@ const isOpen = ref(false) <UseTemplate> <form class="grid items-start gap-4 px-4"> <div class="grid gap-2"> - <Label html-for="email">Email</Label> + <Label htms-for="email">Email</Label> <Input id="email" type="email" default-value="shadcn@example.com" /> </div> <div class="grid gap-2"> - <Label html-for="username">Username</Label> + <Label htms-for="username">Username</Label> <Input id="username" default-value="@shadcn" /> </div> <Button type="submit"> diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue index 57ea45c82..b88c653d7 100644 --- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue @@ -35,7 +35,7 @@ import { Progressive JavaScript framework for building modern web interfaces. </p> <div class="flex items-center pt-2"> - <CalendarIcon class="mr-2 h-4 w-4 opacity-70" /> + <CalendarIcon class="me-2 h-4 w-4 opacity-70" /> <span class="text-xs text-muted-foreground"> Joined January 2014 </span> diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue index 6f61ef7d9..9c8c4ceb4 100644 --- a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue +++ b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue @@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/new-york/ui/input' <template> <div class="relative w-full max-w-sm items-center"> - <Input id="search" type="text" placeholder="Search..." class="pl-10" /> + <Input id="search" type="text" placeholder="Search..." class="ps-10" /> <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2"> <MagnifyingGlassIcon class="size-6 text-muted-foreground" /> </span> diff --git a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue index 6099b11c1..6b388660b 100644 --- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue +++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue @@ -30,7 +30,7 @@ const date = ref({ !date && 'text-muted-foreground', )" > - <CalendarIcon class="mr-2 h-4 w-4" /> + <CalendarIcon class="me-2 h-4 w-4" /> <span> {{ date.start ? ( diff --git a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue index 4bb359092..5a679b2d3 100644 --- a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue @@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/new-york/ui/toggle' <template> <Toggle aria-label="Toggle italic"> - <FontItalicIcon class="w-4 h-4 mr-2" /> + <FontItalicIcon class="w-4 h-4 me-2" /> Italic </Toggle> </template> diff --git a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue index c3bb658b9..60c37ff12 100644 --- a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue +++ b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue @@ -1,5 +1,5 @@ <template> - <blockquote class="mt-6 border-l-2 pl-6 italic"> + <blockquote class="mt-6 border-l-2 ps-6 italic"> "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." </blockquote> diff --git a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue index 55020f333..e302937ba 100644 --- a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue @@ -23,7 +23,7 @@ </a> : he would tax the jokes in the kingdom. </p> - <blockquote class="mt-6 border-l-2 pl-6 italic"> + <blockquote class="mt-6 border-l-2 ps-6 italic"> "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." </blockquote> @@ -34,7 +34,7 @@ The king's subjects were not amused. They grumbled and complained, but the king was firm: </p> - <ul class="my-6 ml-6 list-disc [&>li]:mt-2"> + <ul class="my-6 ms-6 list-disc [&>li]:mt-2"> <li>1st level of puns: 5 gold coins</li> <li>2nd level of jokes: 10 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li> diff --git a/apps/www/src/lib/registry/new-york/example/TypographyList.vue b/apps/www/src/lib/registry/new-york/example/TypographyList.vue index a9a2d09fd..f45b9478a 100644 --- a/apps/www/src/lib/registry/new-york/example/TypographyList.vue +++ b/apps/www/src/lib/registry/new-york/example/TypographyList.vue @@ -1,5 +1,5 @@ <template> - <ul class="my-6 ml-6 list-disc [&>li]:mt-2"> + <ul class="my-6 ms-6 list-disc [&>li]:mt-2"> <li>1st level of puns: 5 gold coins</li> <li>2nd level of jokes: 10 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li> diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue index afc76e582..6374e47bd 100644 --- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue +++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue @@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - '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', + 'fixed start-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, ) " diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts index 1ef587234..799f23aed 100644 --- a/apps/www/src/lib/registry/new-york/ui/alert/index.ts +++ b/apps/www/src/lib/registry/new-york/ui/alert/index.ts @@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue' export { default as AlertDescription } from './AlertDescription.vue' export const alertVariants = cva( - 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7', + 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7', { variants: { variant: { diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue index bada5b225..32edfdd34 100644 --- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue @@ -194,9 +194,9 @@ const vCalendarSlots = computed(() => { @apply w-full relative; } :root { - --vc-slide-translate: 22px; - --vc-slide-duration: 0.15s; - --vc-slide-timing: ease; + --vc-slide-translate: 22px; + --vc-slide-duration: 0.15s; + --vc-slide-timing: ease; } .calendar .vc-fade-enter-active, .calendar .vc-fade-leave-active, @@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-down-leave-active, .calendar .vc-slide-fade-enter-active, .calendar .vc-slide-fade-leave-active { - transition: - opacity var(--vc-slide-duration) var(--vc-slide-timing), - -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); - transition: - transform var(--vc-slide-duration) var(--vc-slide-timing), - opacity var(--vc-slide-duration) var(--vc-slide-timing); - transition: - transform var(--vc-slide-duration) var(--vc-slide-timing), - opacity var(--vc-slide-duration) var(--vc-slide-timing), - -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - pointer-events: none; + transition: + opacity var(--vc-slide-duration) var(--vc-slide-timing), + -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); + transition: + transform var(--vc-slide-duration) var(--vc-slide-timing), + opacity var(--vc-slide-duration) var(--vc-slide-timing); + transition: + transform var(--vc-slide-duration) var(--vc-slide-timing), + opacity var(--vc-slide-duration) var(--vc-slide-timing), + -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; } .calendar .vc-none-leave-active, .calendar .vc-fade-leave-active, @@ -230,8 +230,8 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-right-leave-active, .calendar .vc-slide-up-leave-active, .calendar .vc-slide-down-leave-active { - position: absolute !important; - width: 100%; + position: absolute !important; + width: 100%; } .calendar .vc-none-enter-from, .calendar .vc-none-leave-to, @@ -247,35 +247,35 @@ const vCalendarSlots = computed(() => { .calendar .vc-slide-down-leave-to, .calendar .vc-slide-fade-enter-from, .calendar .vc-slide-fade-leave-to { - opacity: 0; + opacity: 0; } .calendar .vc-slide-left-enter-from, .calendar .vc-slide-right-leave-to, .calendar .vc-slide-fade-enter-from.direction-left, .calendar .vc-slide-fade-leave-to.direction-left { - -webkit-transform: translateX(var(--vc-slide-translate)); - transform: translateX(var(--vc-slide-translate)); + -webkit-transform: translateX(var(--vc-slide-translate)); + transform: translateX(var(--vc-slide-translate)); } .calendar .vc-slide-right-enter-from, .calendar .vc-slide-left-leave-to, .calendar .vc-slide-fade-enter-from.direction-right, .calendar .vc-slide-fade-leave-to.direction-right { - -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); - transform: translateX(calc(-1 * var(--vc-slide-translate))); + -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); + transform: translateX(calc(-1 * var(--vc-slide-translate))); } .calendar .vc-slide-up-enter-from, .calendar .vc-slide-down-leave-to, .calendar .vc-slide-fade-enter-from.direction-top, .calendar .vc-slide-fade-leave-to.direction-top { - -webkit-transform: translateY(var(--vc-slide-translate)); - transform: translateY(var(--vc-slide-translate)); + -webkit-transform: translateY(var(--vc-slide-translate)); + transform: translateY(var(--vc-slide-translate)); } .calendar .vc-slide-down-enter-from, .calendar .vc-slide-up-leave-to, .calendar .vc-slide-fade-enter-from.direction-bottom, .calendar .vc-slide-fade-leave-to.direction-bottom { - -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); - transform: translateY(calc(-1 * var(--vc-slide-translate))); + -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); + transform: translateY(calc(-1 * var(--vc-slide-translate))); } /** * Timepicker styles @@ -299,7 +299,7 @@ const vCalendarSlots = computed(() => { @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary; } .vc-time-select-group .vc-base-icon { - @apply mr-1 text-primary stroke-primary; + @apply me-1 text-primary stroke-primary; } .vc-time-select-group select { @apply bg-primary-foreground p-1 appearance-none outline-none text-center; @@ -308,18 +308,18 @@ const vCalendarSlots = computed(() => { @apply text-muted-foreground tracking-wide; } .vc-time-month { - @apply text-primary ml-2; + @apply text-primary ms-2; } .vc-time-day { - @apply text-primary ml-1; + @apply text-primary ms-1; } .vc-time-year { - @apply text-muted-foreground ml-2; + @apply text-muted-foreground ms-2; } .vc-time-colon { @apply mb-0.5; } .vc-time-decimal { - @apply ml-0.5; + @apply ms-0.5; } </style> diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue index 87f0e3087..d8d859db8 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue @@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel() :class=" cn( 'flex', - orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', + orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col', props.class, )" v-bind="$attrs" diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue index 801e5c162..4759b767b 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue @@ -14,7 +14,7 @@ const { orientation } = useCarousel() aria-roledescription="slide" :class="cn( 'min-w-0 shrink-0 grow-0 basis-full', - orientation === 'horizontal' ? 'pl-4' : 'pt-4', + orientation === 'horizontal' ? 'ps-4' : 'pt-4', props.class, )" > diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue index 39c1daa75..3429ef26d 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue @@ -17,7 +17,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel() 'touch-manipulation absolute h-8 w-8 rounded-full p-0', orientation === 'horizontal' ? '-right-12 top-1/2 -translate-y-1/2' - : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', + : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90', props.class, )" variant="outline" diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue index adb34c690..5780396dd 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue @@ -17,7 +17,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel() 'touch-manipulation absolute h-8 w-8 rounded-full p-0', orientation === 'horizontal' ? '-left-12 top-1/2 -translate-y-1/2' - : '-top-12 left-1/2 -translate-x-1/2 rotate-90', + : '-top-12 start-1/2 -translate-x-1/2 rotate-90', props.class, )" variant="outline" diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue index c0a672657..d9494d701 100644 --- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue +++ b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue @@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps) <template> <div class="flex items-center border-b px-3" cmdk-input-wrapper> - <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" /> + <MagnifyingGlassIcon class="me-2 h-4 w-4 shrink-0 opacity-50" /> <ComboboxInput v-bind="{ ...forwardedProps, ...$attrs }" auto-focus diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue +++ b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue index aca45cd8b..7bda74a9d 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <ContextMenuCheckboxItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <ContextMenuItemIndicator> <CheckIcon class="h-4 w-4" /> </ContextMenuItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue index 0ac2f2533..de9d5d89f 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue @@ -8,7 +8,7 @@ import { } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const emits = defineEmits<ContextMenuItemEmits>() const delegatedProps = computed(() => { @@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue index a10aef122..f4bb331fb 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -17,7 +17,7 @@ const delegatedProps = computed(() => { v-bind="delegatedProps" :class=" cn('px-2 py-1.5 text-sm font-semibold text-foreground', - inset && 'pl-8', props.class, + inset && 'ps-8', props.class, )" > <slot /> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue index b1df78027..cf8d5c81e 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <ContextMenuRadioItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <ContextMenuItemIndicator> <DotFilledIcon class="h-4 w-4 fill-current" /> </ContextMenuItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue index 9ba6176a2..9d0362068 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue @@ -8,7 +8,7 @@ import { import { ChevronRightIcon } from '@radix-icons/vue' import { cn } from '@/lib/utils' -const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -24,11 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > <slot /> - <ChevronRightIcon class="ml-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4" /> </ContextMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue index d8699c291..90b1d6cce 100644 --- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue +++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue @@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - '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', + 'fixed start-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, )" > <slot /> <DialogClose - class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" + class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" > <Cross2Icon class="w-4 h-4" /> <span class="sr-only">Close</span> diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue index 12228f13d..fa5988959 100644 --- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue +++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue @@ -9,7 +9,6 @@ import { DialogPortal, useForwardPropsEmits, } from 'radix-vue' -import { X } from 'lucide-vue-next' import { cn } from '@/lib/utils' const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>() @@ -48,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <slot /> <DialogClose - class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary" + class="absolute top-4 end-4 p-0.5 transition-colors rounded-md hover:bg-secondary" > <Cross2Icon class="w-4 h-4" /> <span class="sr-only">Close</span> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue index a6792a7a6..589c2ae99 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <DropdownMenuCheckboxItem v-bind="forwarded" :class=" cn( - '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', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuItemIndicator> <CheckIcon class="w-4 h-4" /> </DropdownMenuItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue index 3360e8721..436a22cd4 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue index ecf9b2fc6..ec21cb0ff 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue @@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue' import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps) <template> <DropdownMenuLabel v-bind="forwardedProps" - :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)" + :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)" > <slot /> </DropdownMenuLabel> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue index a2fef4c98..055f489ab 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue @@ -27,11 +27,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <DropdownMenuRadioItem v-bind="forwarded" :class="cn( - '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', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuItemIndicator> <DotFilledIcon class="h-4 w-4 fill-current" /> </DropdownMenuItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue index abaeda649..f8adfe85d 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest opacity-60', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue index 00d04e090..1fa122f0c 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue @@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRightIcon class="ml-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4" /> </DropdownMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue index e2724bfff..0ffb94494 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <MenubarCheckboxItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <MenubarItemIndicator> <CheckIcon class="w-4 h-4" /> </MenubarItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue index 742e30189..9c809a1c5 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue @@ -8,7 +8,7 @@ import { } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const emits = defineEmits<MenubarItemEmits>() @@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class="cn( 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue index 168df904e..275fc2b08 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue @@ -3,11 +3,11 @@ import type { HTMLAttributes } from 'vue' import { MenubarLabel, type MenubarLabelProps } from 'radix-vue' import { cn } from '@/lib/utils' -const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() </script> <template> - <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"> + <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)"> <slot /> </MenubarLabel> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue index c3ddbe3b8..3830b55fe 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue @@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <MenubarRadioItem v-bind="forwarded" :class="cn( - 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, )" > - <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center"> <MenubarItemIndicator> <DotFilledIcon class="h-4 w-4 fill-current" /> </MenubarItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue index 0d4da9218..67aa26a35 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"> + <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)"> <slot /> </span> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue index 80b2a8917..b824e91da 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue @@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from import { ChevronRightIcon } from '@radix-icons/vue' import { cn } from '@/lib/utils' -const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() +const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -20,11 +20,11 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class="cn( 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', - inset && 'pl-8', + inset && 'ps-8', props.class, )" > <slot /> - <ChevronRightIcon class="ml-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4" /> </MenubarSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue index 3c37c3d6b..45622d642 100644 --- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue @@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps) > <slot /> <ChevronDownIcon - class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" + class="relative top-px ms-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" aria-hidden="true" /> </NavigationMenuTrigger> diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue index db240ccce..9c6c774d5 100644 --- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue +++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue @@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps) </script> <template> - <div class="absolute left-0 top-full flex justify-center"> + <div class="absolute start-0 top-full flex justify-center"> <NavigationMenuViewport v-bind="forwardedProps" :class=" diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue index c9a5cf7b3..6fca209dc 100644 --- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue @@ -26,12 +26,12 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class=" cn( - 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', + 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class, ) " > - <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center"> + <span class="absolute end-2 flex h-3.5 w-3.5 items-center justify-center"> <SelectItemIndicator> <CheckIcon class="h-4 w-4" /> </SelectItemIndicator> diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue index 188b69d79..468e717b6 100644 --- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue +++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue @@ -27,7 +27,7 @@ const props = defineProps<SheetContentProps>() const emits = defineEmits<DialogContentEmits>() const delegatedProps = computed(() => { - const { class: _, side, ...delegated } = props + const { class: _, ...delegated } = props return delegated }) @@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) <slot /> <DialogClose - class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" + class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" > <Cross2Icon class="w-4 h-4" /> </DialogClose> diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts index fae3f08c4..9e2fc2089 100644 --- a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts +++ b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts @@ -17,9 +17,9 @@ export const sheetVariants = cva( top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', - left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', + left: 'inset-y-0 start-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', right: - 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', + 'inset-y-0 end-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', }, }, defaultVariants: { diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue index 40c1f43e1..9390b5e9d 100644 --- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue +++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue @@ -11,7 +11,7 @@ const props = defineProps<{ <td :class=" cn( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5', props.class, ) " diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue index 11fb10102..40f2af797 100644 --- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue +++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <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-0.5', props.class)"> + <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"> <slot /> </th> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue index c72ee631d..a221676e8 100644 --- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue +++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue @@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps) </script> <template> - <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)"> + <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent me-1', props.class)"> <slot> <Cross2Icon class="w-4 h-4" /> </slot> diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue index 782cf184c..9e717f6aa 100644 --- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue +++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue @@ -16,7 +16,7 @@ const delegatedProps = computed(() => { </script> <template> - <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> + <ToastClose v-bind="delegatedProps" :class="cn('absolute end-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> <Cross2Icon class="h-4 w-4" /> </ToastClose> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue index 57deec811..a2ed192b3 100644 --- a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue +++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue @@ -13,5 +13,5 @@ const delegatedProps = computed(() => { </script> <template> - <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" /> + <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" /> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts index a90780c61..14079a5a6 100644 --- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts +++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts @@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast' import { type VariantProps, cva } from 'class-variance-authority' export const toastVariants = cva( - 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 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-2 overflow-hidden rounded-md border p-4 pe-6 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', { variants: { variant: { @@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants> export interface ToastProps extends ToastRootProps { class?: HTMLAttributes['class'] variant?: ToastVariants['variant'] - 'onOpenChange'?: ((value: boolean) => void) | undefined + onOpenChange?: ((value: boolean) => void) | undefined } From 71fea4ff3ae8d067c7ecd5d43635935ed911e603 Mon Sep 17 00:00:00 2001 From: Raed Bahri <raedbahri90@gmail.com> Date: Tue, 5 Mar 2024 09:03:52 +0100 Subject: [PATCH 2/6] fix: change space-x-* with gap and add flex --- apps/www/src/lib/registry/default/example/CardChat.vue | 6 +++--- apps/www/src/lib/registry/default/example/CardDemo.vue | 2 +- .../src/lib/registry/default/example/Cards/ActivityGoal.vue | 2 +- .../src/lib/registry/default/example/Cards/DataTable.vue | 4 ++-- apps/www/src/lib/registry/default/example/CheckboxDemo.vue | 2 +- .../src/lib/registry/default/example/CheckboxDisabled.vue | 2 +- .../lib/registry/default/example/CheckboxFormMultiple.vue | 2 +- .../src/lib/registry/default/example/CollapsibleDemo.vue | 2 +- .../src/lib/registry/default/example/ComboboxPopover.vue | 2 +- .../registry/default/example/DataTableColumnPinningDemo.vue | 4 ++-- apps/www/src/lib/registry/default/example/DataTableDemo.vue | 4 ++-- .../registry/default/example/DialogCustomCloseButton.vue | 2 +- apps/www/src/lib/registry/default/example/DrawerDemo.vue | 2 +- apps/www/src/lib/registry/default/example/HoverCardDemo.vue | 2 +- apps/www/src/lib/registry/default/example/LabelDemo.vue | 2 +- .../www/src/lib/registry/default/example/RadioGroupDemo.vue | 6 +++--- .../registry/default/example/ScrollAreaHorizontalDemo.vue | 2 +- apps/www/src/lib/registry/default/example/SeparatorDemo.vue | 2 +- apps/www/src/lib/registry/default/example/SkeletonDemo.vue | 2 +- apps/www/src/lib/registry/default/example/SwitchDemo.vue | 2 +- apps/www/src/lib/registry/default/ui/toast/index.ts | 2 +- apps/www/src/lib/registry/new-york/example/CardChat.vue | 6 +++--- apps/www/src/lib/registry/new-york/example/CardDemo.vue | 2 +- .../lib/registry/new-york/example/Cards/ActivityGoal.vue | 2 +- .../src/lib/registry/new-york/example/Cards/DataTable.vue | 4 ++-- apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue | 2 +- .../src/lib/registry/new-york/example/CheckboxDisabled.vue | 2 +- .../lib/registry/new-york/example/CheckboxFormMultiple.vue | 2 +- .../src/lib/registry/new-york/example/CollapsibleDemo.vue | 2 +- .../src/lib/registry/new-york/example/ComboboxPopover.vue | 2 +- .../new-york/example/DataTableColumnPinningDemo.vue | 4 ++-- .../www/src/lib/registry/new-york/example/DataTableDemo.vue | 4 ++-- .../registry/new-york/example/DialogCustomCloseButton.vue | 2 +- apps/www/src/lib/registry/new-york/example/DrawerDemo.vue | 2 +- .../www/src/lib/registry/new-york/example/HoverCardDemo.vue | 2 +- apps/www/src/lib/registry/new-york/example/LabelDemo.vue | 2 +- .../src/lib/registry/new-york/example/RadioGroupDemo.vue | 6 +++--- .../registry/new-york/example/ScrollAreaHorizontalDemo.vue | 2 +- .../www/src/lib/registry/new-york/example/SeparatorDemo.vue | 2 +- apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue | 2 +- apps/www/src/lib/registry/new-york/example/SwitchDemo.vue | 2 +- apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue | 2 +- apps/www/src/lib/registry/new-york/ui/toast/index.ts | 2 +- 43 files changed, 57 insertions(+), 57 deletions(-) diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue index d80997eae..d1b386096 100644 --- a/apps/www/src/lib/registry/default/example/CardChat.vue +++ b/apps/www/src/lib/registry/default/example/CardChat.vue @@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([]) <template> <Card> <CardHeader class="flex flex-row items-center justify-between"> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <Avatar> <AvatarImage src="/avatars/01.png" alt="Image" /> <AvatarFallback>OM</AvatarFallback> @@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([]) </CardContent> <CardFooter> <form - class="flex w-full items-center space-x-2" + class="flex w-full items-center gap-2" @submit.prevent="() => { if (inputLength === 0) return messages.push({ @@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([]) </CommandList> </Command> <DialogFooter class="flex items-center border-t p-4 sm:justify-between"> - <div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden"> + <div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden"> <Avatar v-for="user in selectedUsers" :key="user.email" diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue index 7b6b4d3a0..789db8dea 100644 --- a/apps/www/src/lib/registry/default/example/CardDemo.vue +++ b/apps/www/src/lib/registry/default/example/CardDemo.vue @@ -36,7 +36,7 @@ const notifications = [ <CardDescription>You have 3 unread messages.</CardDescription> </CardHeader> <CardContent class="grid gap-4"> - <div class=" flex items-center space-x-4 rounded-md border p-4"> + <div class=" flex items-center gap-4 rounded-md border p-4"> <BellRing /> <div class="flex-1 space-y-1"> <p class="text-sm font-medium leading-none"> diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue index f2445fa87..53c4f15f6 100644 --- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue +++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue @@ -49,7 +49,7 @@ const data = [ <CardDescription>Set your daily activity goal.</CardDescription> </CardHeader> <CardContent class="pb-2"> - <div class="flex items-center justify-center space-x-2"> + <div class="flex items-center justify-center gap-2"> <Button variant="outline" size="icon" diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue index 33b3215ac..9675882a7 100644 --- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue +++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue @@ -231,12 +231,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue b/apps/www/src/lib/registry/default/example/CheckboxDemo.vue index 9cdd4a412..0540bc43f 100644 --- a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue +++ b/apps/www/src/lib/registry/default/example/CheckboxDemo.vue @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox' </script> <template> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Checkbox id="terms" /> <label for="terms" diff --git a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue index bb30177f1..105004430 100644 --- a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue +++ b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox' </script> <template> - <div class="items-top flex space-x-2"> + <div class="items-top flex gap-2"> <Checkbox id="terms1" disabled /> <label for="terms2" diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue index 641c719b3..218c81924 100644 --- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue +++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue @@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => { </div> <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items"> - <FormItem class="flex flex-row items-start space-x-3 space-y-0"> + <FormItem class="flex flex-row items-start gap-3 space-y-0"> <FormControl> <Checkbox :checked="value.includes(item.id)" diff --git a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue index b0980a307..f2eaab24f 100644 --- a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue +++ b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue @@ -17,7 +17,7 @@ const isOpen = ref(false) v-model:open="isOpen" class="w-[350px] space-y-2" > - <div class="flex items-center justify-between space-x-4 px-4"> + <div class="flex items-center justify-between gap-4 px-4"> <h4 class="text-sm font-semibold"> @peduarte starred 3 repositories </h4> diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue index 52fa47eeb..d3f732782 100644 --- a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue +++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue @@ -66,7 +66,7 @@ const selectedStatus = ref<Status>() </script> <template> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <p class="text-sm text-muted-foreground"> Status </p> diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue index e349923d6..d9d4c4a77 100644 --- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue +++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue @@ -242,12 +242,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue index df77bfd80..b9d79ca28 100644 --- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue +++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue @@ -224,12 +224,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue index 7f286bba4..bf5103bd2 100644 --- a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue +++ b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue @@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/default/ui/label' Anyone who has this link will be able to view this. </DialogDescription> </DialogHeader> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <div class="grid flex-1 gap-2"> <Label for="link" class="sr-only"> Link diff --git a/apps/www/src/lib/registry/default/example/DrawerDemo.vue b/apps/www/src/lib/registry/default/example/DrawerDemo.vue index aec72f279..8f6ec0e06 100644 --- a/apps/www/src/lib/registry/default/example/DrawerDemo.vue +++ b/apps/www/src/lib/registry/default/example/DrawerDemo.vue @@ -48,7 +48,7 @@ const data = [ <DrawerDescription>Set your daily activity goal.</DrawerDescription> </DrawerHeader> <div class="p-4 pb-0"> - <div class="flex items-center justify-center space-x-2"> + <div class="flex items-center justify-center gap-2"> <Button variant="outline" size="icon" diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue index d83266b70..cda04ec9a 100644 --- a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue +++ b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue @@ -22,7 +22,7 @@ import { </Button> </HoverCardTrigger> <HoverCardContent class="w-80"> - <div class="flex justify-between space-x-4"> + <div class="flex justify-between gap-4"> <Avatar> <AvatarImage src="https://github.com/vuejs.png" /> <AvatarFallback>VC</AvatarFallback> diff --git a/apps/www/src/lib/registry/default/example/LabelDemo.vue b/apps/www/src/lib/registry/default/example/LabelDemo.vue index 9dfd33323..8574b4f03 100644 --- a/apps/www/src/lib/registry/default/example/LabelDemo.vue +++ b/apps/www/src/lib/registry/default/example/LabelDemo.vue @@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/default/ui/label' <template> <div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Checkbox id="terms" /> <Label for="terms">Accept terms and conditions</Label> </div> diff --git a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue index a6da7a6f8..7ff0d8e66 100644 --- a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue +++ b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue @@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-grou <template> <RadioGroup default-value="comfortable"> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r1" value="default" /> <Label for="r1">Default</Label> </div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r2" value="comfortable" /> <Label for="r2">Comfortable</Label> </div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r3" value="compact" /> <Label for="r3">Compact</Label> </div> diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue index d687c9a0c..8c966deb7 100644 --- a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue +++ b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue @@ -28,7 +28,7 @@ const works: Artwork[] = [ <template> <ScrollArea class="border rounded-md w-96 whitespace-nowrap"> - <div class="flex p-4 space-x-4 w-max"> + <div class="flex p-4 gap-4 w-max"> <div v-for="artwork in works" :key="artwork.id"> <figure class="shrink-0"> <div class="overflow-hidden rounded-md"> diff --git a/apps/www/src/lib/registry/default/example/SeparatorDemo.vue b/apps/www/src/lib/registry/default/example/SeparatorDemo.vue index ddd29560e..555d7e4a8 100644 --- a/apps/www/src/lib/registry/default/example/SeparatorDemo.vue +++ b/apps/www/src/lib/registry/default/example/SeparatorDemo.vue @@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/default/ui/separator' </p> </div> <Separator class="my-4" /> - <div class="flex h-5 items-center space-x-4 text-sm"> + <div class="flex h-5 items-center gap-4 text-sm"> <div>Blog</div> <Separator orientation="vertical" /> <div>Docs</div> diff --git a/apps/www/src/lib/registry/default/example/SkeletonDemo.vue b/apps/www/src/lib/registry/default/example/SkeletonDemo.vue index 33f2beec2..2428f33f9 100644 --- a/apps/www/src/lib/registry/default/example/SkeletonDemo.vue +++ b/apps/www/src/lib/registry/default/example/SkeletonDemo.vue @@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/default/ui/skeleton' </script> <template> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> diff --git a/apps/www/src/lib/registry/default/example/SwitchDemo.vue b/apps/www/src/lib/registry/default/example/SwitchDemo.vue index b97c506a9..219d260ec 100644 --- a/apps/www/src/lib/registry/default/example/SwitchDemo.vue +++ b/apps/www/src/lib/registry/default/example/SwitchDemo.vue @@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/default/ui/switch' </script> <template> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Switch id="airplane-mode" /> <Label for="airplane-mode">Airplane Mode</Label> </div> diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts index ba4143d94..adf9f534c 100644 --- a/apps/www/src/lib/registry/default/ui/toast/index.ts +++ b/apps/www/src/lib/registry/default/ui/toast/index.ts @@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast' import { type VariantProps, cva } from 'class-variance-authority' 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 pe-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', + 'group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-6 pe-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: { variant: { diff --git a/apps/www/src/lib/registry/new-york/example/CardChat.vue b/apps/www/src/lib/registry/new-york/example/CardChat.vue index ac25c4d9d..ca6d91c26 100644 --- a/apps/www/src/lib/registry/new-york/example/CardChat.vue +++ b/apps/www/src/lib/registry/new-york/example/CardChat.vue @@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([]) <template> <Card> <CardHeader class="flex flex-row items-center justify-between"> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <Avatar> <AvatarImage src="/avatars/01.png" alt="Image" /> <AvatarFallback>OM</AvatarFallback> @@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([]) </CardContent> <CardFooter> <form - class="flex w-full items-center space-x-2" + class="flex w-full items-center gap-2" @submit.prevent="() => { if (inputLength === 0) return messages.push({ @@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([]) </CommandList> </Command> <DialogFooter class="flex items-center border-t p-4 sm:justify-between"> - <div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden"> + <div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden"> <Avatar v-for="user in selectedUsers" :key="user.email" diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue index 35abf0975..c43b5f947 100644 --- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue @@ -35,7 +35,7 @@ const notifications = [ <CardDescription>You have 3 unread messages.</CardDescription> </CardHeader> <CardContent class="grid gap-4"> - <div class=" flex items-center space-x-4 rounded-md border p-4"> + <div class=" flex items-center gap-4 rounded-md border p-4"> <BellIcon /> <div class="flex-1 space-y-1"> <p class="text-sm font-medium leading-none"> diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue index 420887d91..38346c5c3 100644 --- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue +++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue @@ -45,7 +45,7 @@ const data = [ <CardDescription>Set your daily activity goal.</CardDescription> </CardHeader> <CardContent class="pb-2"> - <div class="flex items-center justify-center space-x-2"> + <div class="flex items-center justify-center gap-2"> <Button variant="outline" size="icon" diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue index 56a191807..dfbcfaf7b 100644 --- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue +++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue @@ -231,12 +231,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue index 5f58ce160..e958624cb 100644 --- a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox' </script> <template> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Checkbox id="terms" /> <label for="terms" diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue b/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue index f754015be..8695d2445 100644 --- a/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue +++ b/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox' </script> <template> - <div class="items-top flex space-x-2"> + <div class="items-top flex gap-2"> <Checkbox id="terms1" disabled /> <label for="terms2" diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue index 1debb3108..3913c3204 100644 --- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue +++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue @@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => { </div> <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items"> - <FormItem class="flex flex-row items-start space-x-3 space-y-0"> + <FormItem class="flex flex-row items-start gap-3 space-y-0"> <FormControl> <Checkbox :checked="value.includes(item.id)" diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue index 77868bbf9..f5977d168 100644 --- a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue @@ -17,7 +17,7 @@ const isOpen = ref(false) v-model:open="isOpen" class="w-[350px] space-y-2" > - <div class="flex items-center justify-between space-x-4 px-4"> + <div class="flex items-center justify-between gap-4 px-4"> <h4 class="text-sm font-semibold"> @peduarte starred 3 repositories </h4> diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue index f9423dffb..19ba1c62f 100644 --- a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue +++ b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue @@ -49,7 +49,7 @@ const selectedStatus = ref<Status>() </script> <template> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <p class="text-sm text-muted-foreground"> Status </p> diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue index 4064e907d..6cc4120a4 100644 --- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue @@ -242,12 +242,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue index c27d8c0da..dc623c9ad 100644 --- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue @@ -224,12 +224,12 @@ const table = useVueTable({ </Table> </div> - <div class="flex items-center justify-end space-x-2 py-4"> + <div class="flex items-center justify-end gap-2 py-4"> <div class="flex-1 text-sm text-muted-foreground"> {{ table.getFilteredSelectedRowModel().rows.length }} of {{ table.getFilteredRowModel().rows.length }} row(s) selected. </div> - <div class="space-x-2"> + <div class="flex gap-2"> <Button variant="outline" size="sm" diff --git a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue index 03a0695f6..681872d61 100644 --- a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue +++ b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue @@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/new-york/ui/label' Anyone who has this link will be able to view this. </DialogDescription> </DialogHeader> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <div class="grid flex-1 gap-2"> <Label for="link" class="sr-only"> Link diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue index aec72f279..8f6ec0e06 100644 --- a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue @@ -48,7 +48,7 @@ const data = [ <DrawerDescription>Set your daily activity goal.</DrawerDescription> </DrawerHeader> <div class="p-4 pb-0"> - <div class="flex items-center justify-center space-x-2"> + <div class="flex items-center justify-center gap-2"> <Button variant="outline" size="icon" diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue index b88c653d7..72494b098 100644 --- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue @@ -22,7 +22,7 @@ import { </Button> </HoverCardTrigger> <HoverCardContent class="w-80"> - <div class="flex justify-between space-x-4"> + <div class="flex justify-between gap-4"> <Avatar> <AvatarImage src="https://github.com/vuejs.png" /> <AvatarFallback>VC</AvatarFallback> diff --git a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue index d2cb788f2..3ae14be15 100644 --- a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue @@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/new-york/ui/label' <template> <div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Checkbox id="terms" /> <Label for="terms">Accept terms and conditions</Label> </div> diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue index 926fd2290..14fd10f7b 100644 --- a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue @@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-gro <template> <RadioGroup default-value="comfortable" :orientation="'vertical'"> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r1" value="default" /> <Label for="r1">Default</Label> </div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r2" value="comfortable" /> <Label for="r2">Comfortable</Label> </div> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <RadioGroupItem id="r3" value="compact" /> <Label for="r3">Compact</Label> </div> diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue index 13c8efcde..0af51712f 100644 --- a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue @@ -28,7 +28,7 @@ const works: Artwork[] = [ <template> <ScrollArea class="border rounded-md w-96 whitespace-nowrap"> - <div class="flex p-4 space-x-4 w-max"> + <div class="flex p-4 gap-4 w-max"> <div v-for="artwork in works" :key="artwork.id"> <figure class="shrink-0"> <div class="overflow-hidden rounded-md"> diff --git a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue index 7e4f2f3e9..6894add75 100644 --- a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue @@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator' </p> </div> <Separator class="my-4" /> - <div class="flex h-5 items-center space-x-4 text-sm"> + <div class="flex h-5 items-center gap-4 text-sm"> <div>Blog</div> <Separator orientation="vertical" /> <div>Docs</div> diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue index a271ddbce..07a553fa7 100644 --- a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue @@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/new-york/ui/skeleton' </script> <template> - <div class="flex items-center space-x-4"> + <div class="flex items-center gap-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> diff --git a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue index a68c5f67d..194eb4696 100644 --- a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue @@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/new-york/ui/switch' </script> <template> - <div class="flex items-center space-x-2"> + <div class="flex items-center gap-2"> <Switch id="airplane-mode" /> <Label for="airplane-mode">Airplane Mode</Label> </div> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue index f41f106ec..e675b4628 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue @@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - 'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', + 'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm', props.class, ) " diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts index 14079a5a6..c3170cf74 100644 --- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts +++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts @@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast' import { type VariantProps, cva } from 'class-variance-authority' export const toastVariants = cva( - 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pe-6 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 gap-2 overflow-hidden rounded-md border p-4 pe-6 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', { variants: { variant: { From 71d97fac573b19105abcbc74a524398fe57c3eac Mon Sep 17 00:00:00 2001 From: Raed Bahri <raedbahri90@gmail.com> Date: Tue, 5 Mar 2024 09:16:03 +0100 Subject: [PATCH 3/6] fix: add rotation on rtl for chevrons and arrows --- .../src/lib/registry/default/example/ButtonIconDemo.vue | 2 +- .../www/src/lib/registry/default/ui/calendar/Calendar.vue | 8 ++++---- .../src/lib/registry/default/ui/carousel/CarouselNext.vue | 2 +- .../lib/registry/default/ui/carousel/CarouselPrevious.vue | 2 +- .../default/ui/context-menu/ContextMenuSubTrigger.vue | 2 +- .../default/ui/dropdown-menu/DropdownMenuSubTrigger.vue | 2 +- .../lib/registry/default/ui/menubar/MenubarSubTrigger.vue | 2 +- .../lib/registry/default/ui/pagination/PaginationNext.vue | 2 +- .../lib/registry/default/ui/pagination/PaginationPrev.vue | 2 +- .../src/lib/registry/new-york/example/ButtonIconDemo.vue | 2 +- .../src/lib/registry/new-york/ui/calendar/Calendar.vue | 8 ++++---- .../lib/registry/new-york/ui/carousel/CarouselNext.vue | 2 +- .../registry/new-york/ui/carousel/CarouselPrevious.vue | 2 +- .../new-york/ui/context-menu/ContextMenuSubTrigger.vue | 2 +- .../new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue | 2 +- .../registry/new-york/ui/menubar/MenubarSubTrigger.vue | 2 +- .../registry/new-york/ui/pagination/PaginationFirst.vue | 2 +- .../registry/new-york/ui/pagination/PaginationLast.vue | 2 +- .../registry/new-york/ui/pagination/PaginationNext.vue | 2 +- .../registry/new-york/ui/pagination/PaginationPrev.vue | 2 +- 20 files changed, 26 insertions(+), 26 deletions(-) diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue index 2b4ce9a3a..ca82a0d8c 100644 --- a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue +++ b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button' <template> <Button variant="outline" size="icon"> - <ChevronRight class="w-4 h-4" /> + <ChevronRight class="w-4 h-4 rtl:rotate-180" /> </Button> </template> diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue index dd71b0085..81d8ac5a5 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => { <div class="relative"> <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]"> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')"> - <ChevronLeft class="w-4 h-4" /> + <ChevronLeft class="w-4 h-4 rtl:rotate-180" /> </button> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')"> - <ChevronRight class="w-4 h-4" /> + <ChevronRight class="w-4 h-4 rtl:rotate-180" /> </button> </div> @@ -102,11 +102,11 @@ const vCalendarSlots = computed(() => { </template> <template #nav-prev-button> - <ChevronLeft /> + <ChevronLeft class="rtl:rotate-180" /> </template> <template #nav-next-button> - <ChevronRight /> + <ChevronRight class="rtl:rotate-180" /> </template> </DatePicker> </div> diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue index 63f5f975c..e1f8d9609 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue @@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel() @click="scrollNext" > <slot> - <ArrowRight class="h-4 w-4 text-current" /> + <ArrowRight class="h-4 w-4 text-current rtl:rotate-180" /> </slot> </Button> </template> diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue index 6930e8c0b..1373c3867 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue +++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue @@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel() @click="scrollPrev" > <slot> - <ArrowLeft class="h-4 w-4 text-current" /> + <ArrowLeft class="h-4 w-4 text-current rtl:rotate-180" /> </slot> </Button> </template> diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue index 0a9ecb47f..ef79b8ce4 100644 --- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue @@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRight class="ms-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" /> </ContextMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue index 3c99e0434..9af48c5c3 100644 --- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue @@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRight class="ms-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" /> </DropdownMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue index 3e12f8a85..86730327a 100644 --- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue +++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue @@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRight class="ms-auto h-4 w-4" /> + <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" /> </MenubarSubTrigger> </template> diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue index 360cb43d5..6ab2f1af9 100644 --- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationNext v-bind="delegatedProps"> <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline"> <slot> - <ChevronRight class="h-4 w-4" /> + <ChevronRight class="h-4 w-4 rtl:rotate-180" /> </slot> </Button> </PaginationNext> diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue index e37aeb642..f3a033270 100644 --- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationPrev v-bind="delegatedProps"> <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline"> <slot> - <ChevronLeft class="h-4 w-4" /> + <ChevronLeft class="h-4 w-4 rtl:rotate-180" /> </slot> </Button> </PaginationPrev> diff --git a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue index d1bc3d2d2..94800adc7 100644 --- a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button' <template> <Button variant="outline" size="icon"> - <ChevronRightIcon class="w-4 h-4" /> + <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" /> </Button> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue index 32edfdd34..0f8a6b4a5 100644 --- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue @@ -81,10 +81,10 @@ const vCalendarSlots = computed(() => { <div class="relative"> <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]"> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')"> - <ChevronLeftIcon class="w-4 h-4" /> + <ChevronLeftIcon class="w-4 h-4 rtl:rotate-180" /> </button> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')"> - <ChevronRightIcon class="w-4 h-4" /> + <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" /> </button> </div> @@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => { </template> <template #nav-prev-button> - <ChevronLeft /> + <ChevronLeftIcon class="rtl:rotate-180" /> </template> <template #nav-next-button> - <ChevronRight /> + <ChevronRightIcon class="rtl:rotate-180" /> </template> </DatePicker> </div> diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue index 3429ef26d..3ae9372f7 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue @@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel() @click="scrollNext" > <slot> - <ArrowRightIcon class="h-4 w-4 text-current" /> + <ArrowRightIcon class="h-4 w-4 text-current rtl:rotate-180" /> </slot> </Button> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue index 5780396dd..154861c77 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue +++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue @@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel() @click="scrollPrev" > <slot> - <ArrowLeftIcon class="h-4 w-4 text-current" /> + <ArrowLeftIcon class="h-4 w-4 text-current rtl:rotate-180" /> </slot> </Button> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue index 9d0362068..35c93e89a 100644 --- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue @@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRightIcon class="ms-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" /> </ContextMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue index 1fa122f0c..13d393aa9 100644 --- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue @@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRightIcon class="ms-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" /> </DropdownMenuSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue index b824e91da..6f2dba7f2 100644 --- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue +++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue @@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps) )" > <slot /> - <ChevronRightIcon class="ms-auto h-4 w-4" /> + <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" /> </MenubarSubTrigger> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue index ecb8735d6..365cbd365 100644 --- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue +++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationFirst v-bind="delegatedProps"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <slot> - <DoubleArrowLeftIcon /> + <DoubleArrowLeftIcon class="rtl:rotate-180" /> </slot> </Button> </PaginationFirst> diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue index d1c06f849..d822df0ac 100644 --- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue +++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationLast v-bind="delegatedProps"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <slot> - <DoubleArrowRightIcon /> + <DoubleArrowRightIcon class="rtl:rotate-180" /> </slot> </Button> </PaginationLast> diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue index 360f5f28d..11a08c7ac 100644 --- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue +++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationNext v-bind="delegatedProps"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <slot> - <ChevronRightIcon /> + <ChevronRightIcon class="rtl:rotate-180" /> </slot> </Button> </PaginationNext> diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue index 12d512053..00c4af2dc 100644 --- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue +++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue @@ -22,7 +22,7 @@ const delegatedProps = computed(() => { <PaginationPrev v-bind="delegatedProps"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <slot> - <ChevronLeftIcon /> + <ChevronLeftIcon class="rtl:rotate-180" /> </slot> </Button> </PaginationPrev> From 7dfd0d445701214f4705f9f307f22b7f7436485c Mon Sep 17 00:00:00 2001 From: Raed Bahri <raedbahri90@gmail.com> Date: Tue, 5 Mar 2024 09:18:09 +0100 Subject: [PATCH 4/6] fix: change text-left to text-start to support rtl written text --- .../registry/default/example/DatePickerDemo.vue | 2 +- .../default/example/DatePickerWithPresets.vue | 2 +- .../default/example/DatePickerWithRange.vue | 2 +- .../default/example/DateTimePickerDemo.vue | 2 +- .../registry/default/example/DrawerDialog.vue | 2 +- .../default/example/RangePickerWithSlot.vue | 2 +- .../registry/default/example/TypographyDemo.vue | 16 ++++++++-------- .../registry/default/example/TypographyTable.vue | 16 ++++++++-------- .../ui/alert-dialog/AlertDialogHeader.vue | 2 +- .../registry/default/ui/dialog/DialogHeader.vue | 2 +- .../registry/default/ui/drawer/DrawerHeader.vue | 2 +- .../registry/default/ui/sheet/SheetHeader.vue | 2 +- .../lib/registry/default/ui/table/TableHead.vue | 2 +- .../registry/new-york/example/DatePickerDemo.vue | 2 +- .../new-york/example/DatePickerWithPresets.vue | 2 +- .../new-york/example/DatePickerWithRange.vue | 2 +- .../new-york/example/DateTimePickerDemo.vue | 2 +- .../registry/new-york/example/DrawerDialog.vue | 2 +- .../new-york/example/RangePickerWithSlot.vue | 2 +- .../ui/alert-dialog/AlertDialogHeader.vue | 2 +- .../registry/new-york/ui/dialog/DialogHeader.vue | 2 +- .../registry/new-york/ui/drawer/DrawerHeader.vue | 2 +- .../registry/new-york/ui/sheet/SheetHeader.vue | 2 +- .../lib/registry/new-york/ui/table/TableHead.vue | 2 +- 24 files changed, 38 insertions(+), 38 deletions(-) diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue index 62138b3b0..8482f8bb2 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue @@ -21,7 +21,7 @@ const date = ref<Date>() <Button :variant="'outline'" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue index f24ec1b54..4fb920541 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue @@ -28,7 +28,7 @@ const date = ref<Date>() <Button variant="outline" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue index 2e7901513..b63009e5d 100644 --- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue +++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue @@ -26,7 +26,7 @@ const date = ref({ id="date" :variant="'outline'" :class="cn( - 'w-[300px] justify-start text-left font-normal', + 'w-[300px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue index 44659fbaf..c81f35a1d 100644 --- a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue +++ b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue @@ -21,7 +21,7 @@ const date = ref<Date>() <Button :variant="'outline'" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue index 6426c5f9c..ee6f49724 100644 --- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue @@ -71,7 +71,7 @@ const isOpen = ref(false) </Button> </DrawerTrigger> <DrawerContent> - <DrawerHeader class="text-left"> + <DrawerHeader class="text-start"> <DrawerTitle>Edit profile</DrawerTitle> <DrawerDescription> Make changes to your profile here. Click save when you're done. diff --git a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue index 7c4a75199..23c58bd63 100644 --- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue +++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue @@ -26,7 +26,7 @@ const date = ref({ id="date" :variant="'outline'" :class="cn( - 'w-[300px] justify-start text-left font-normal', + 'w-[300px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/src/lib/registry/default/example/TypographyDemo.vue index e302937ba..afbb34b92 100644 --- a/apps/www/src/lib/registry/default/example/TypographyDemo.vue +++ b/apps/www/src/lib/registry/default/example/TypographyDemo.vue @@ -71,12 +71,12 @@ <thead> <tr class="m-0 border-t p-0 even:bg-muted"> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > King's Treasury </th> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > People's happiness </th> @@ -85,36 +85,36 @@ <tbody> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Empty </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Overflowing </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Modest </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Satisfied </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Full </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Ecstatic </td> diff --git a/apps/www/src/lib/registry/default/example/TypographyTable.vue b/apps/www/src/lib/registry/default/example/TypographyTable.vue index 876090069..7da37b244 100644 --- a/apps/www/src/lib/registry/default/example/TypographyTable.vue +++ b/apps/www/src/lib/registry/default/example/TypographyTable.vue @@ -4,12 +4,12 @@ <thead> <tr class="m-0 border-t p-0 even:bg-muted"> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > King's Treasury </th> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > People's happiness </th> @@ -18,36 +18,36 @@ <tbody> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Empty </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Overflowing </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Modest </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Satisfied </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Full </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Ecstatic </td> diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue index c61c44954..0e8c91dad 100644 --- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue +++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue @@ -9,7 +9,7 @@ const props = defineProps<{ <template> <div - :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)" + :class="cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)" > <slot /> </div> diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue index b2c9085d8..3c2610acb 100644 --- a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue +++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue @@ -9,7 +9,7 @@ const props = defineProps<{ <template> <div - :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)" + :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)" > <slot /> </div> diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue index ecef7a67b..edd6442e1 100644 --- a/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue +++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)"> + <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)"> <slot /> </div> </template> diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue index 541f48f57..09ddfc4db 100644 --- a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue +++ b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue @@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>() <template> <div :class=" - cn('flex flex-col gap-y-2 text-center sm:text-left', props.class) + cn('flex flex-col gap-y-2 text-center sm:text-start', props.class) " > <slot /> diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue index 01c210864..21c80cf1b 100644 --- a/apps/www/src/lib/registry/default/ui/table/TableHead.vue +++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0', props.class)"> + <th :class="cn('h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0', props.class)"> <slot /> </th> </template> diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue index 5cfb0ccc3..6b2b923b1 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue @@ -21,7 +21,7 @@ const date = ref<Date>() <Button :variant="'outline'" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue index f1b79f827..2cb3f49ec 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue @@ -28,7 +28,7 @@ const date = ref<Date>() <Button variant="outline" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue index a9f57d797..1c798b4dc 100644 --- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue +++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue @@ -26,7 +26,7 @@ const date = ref({ id="date" :variant="'outline'" :class="cn( - 'w-[300px] justify-start text-left font-normal', + 'w-[300px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue index bf7ae69a0..0cb306dff 100644 --- a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue @@ -21,7 +21,7 @@ const date = ref<Date>() <Button :variant="'outline'" :class="cn( - 'w-[280px] justify-start text-left font-normal', + 'w-[280px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue index 6426c5f9c..ee6f49724 100644 --- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue @@ -71,7 +71,7 @@ const isOpen = ref(false) </Button> </DrawerTrigger> <DrawerContent> - <DrawerHeader class="text-left"> + <DrawerHeader class="text-start"> <DrawerTitle>Edit profile</DrawerTitle> <DrawerDescription> Make changes to your profile here. Click save when you're done. diff --git a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue index 6b388660b..013060310 100644 --- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue +++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue @@ -26,7 +26,7 @@ const date = ref({ id="date" :variant="'outline'" :class="cn( - 'w-[300px] justify-start text-left font-normal', + 'w-[300px] justify-start text-start font-normal', !date && 'text-muted-foreground', )" > diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue index c61c44954..0e8c91dad 100644 --- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue +++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue @@ -9,7 +9,7 @@ const props = defineProps<{ <template> <div - :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)" + :class="cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)" > <slot /> </div> diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue index b2c9085d8..3c2610acb 100644 --- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue +++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue @@ -9,7 +9,7 @@ const props = defineProps<{ <template> <div - :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)" + :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)" > <slot /> </div> diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue index ecef7a67b..edd6442e1 100644 --- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue +++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)"> + <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)"> <slot /> </div> </template> diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue index 541f48f57..09ddfc4db 100644 --- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue +++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue @@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>() <template> <div :class=" - cn('flex flex-col gap-y-2 text-center sm:text-left', props.class) + cn('flex flex-col gap-y-2 text-center sm:text-start', props.class) " > <slot /> diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue index 40f2af797..9cb4543b6 100644 --- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue +++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue @@ -8,7 +8,7 @@ const props = defineProps<{ </script> <template> - <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"> + <th :class="cn('h-10 px-2 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"> <slot /> </th> </template> From 9def0dbe360c3b3a7306200660670581d412aabb Mon Sep 17 00:00:00 2001 From: Raed Bahri <raedbahri90@gmail.com> Date: Tue, 5 Mar 2024 09:21:19 +0100 Subject: [PATCH 5/6] fix: change text-left to text-start to support rtl written text --- .../registry/new-york/example/TypographyDemo.vue | 16 ++++++++-------- .../new-york/example/TypographyTable.vue | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue index e302937ba..afbb34b92 100644 --- a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue +++ b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue @@ -71,12 +71,12 @@ <thead> <tr class="m-0 border-t p-0 even:bg-muted"> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > King's Treasury </th> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > People's happiness </th> @@ -85,36 +85,36 @@ <tbody> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Empty </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Overflowing </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Modest </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Satisfied </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Full </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Ecstatic </td> diff --git a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue index 876090069..7da37b244 100644 --- a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue +++ b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue @@ -4,12 +4,12 @@ <thead> <tr class="m-0 border-t p-0 even:bg-muted"> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > King's Treasury </th> <th - class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right" > People's happiness </th> @@ -18,36 +18,36 @@ <tbody> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Empty </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Overflowing </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Modest </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Satisfied </td> </tr> <tr class="m-0 border-t p-0 even:bg-muted"> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Full </td> <td - class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right" + class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right" > Ecstatic </td> From 523270e9b54a5d0837215b07cdf60f0df6505598 Mon Sep 17 00:00:00 2001 From: sadeghbarati <sadeghbaratiwork@gmail.com> Date: Tue, 5 Mar 2024 12:37:09 +0330 Subject: [PATCH 6/6] chore: update --- apps/www/src/lib/registry/default/example/DrawerDialog.vue | 4 ++-- apps/www/src/lib/registry/new-york/example/DrawerDialog.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue index ee6f49724..11b2e3eb1 100644 --- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue @@ -34,11 +34,11 @@ const isOpen = ref(false) <UseTemplate> <form class="grid items-start gap-4 px-4"> <div class="grid gap-2"> - <Label htms-for="email">Email</Label> + <Label for="email">Email</Label> <Input id="email" type="email" default-value="shadcn@example.com" /> </div> <div class="grid gap-2"> - <Label htms-for="username">Username</Label> + <Label for="username">Username</Label> <Input id="username" default-value="@shadcn" /> </div> <Button type="submit"> diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue index ee6f49724..11b2e3eb1 100644 --- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue +++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue @@ -34,11 +34,11 @@ const isOpen = ref(false) <UseTemplate> <form class="grid items-start gap-4 px-4"> <div class="grid gap-2"> - <Label htms-for="email">Email</Label> + <Label for="email">Email</Label> <Input id="email" type="email" default-value="shadcn@example.com" /> </div> <div class="grid gap-2"> - <Label htms-for="username">Username</Label> + <Label for="username">Username</Label> <Input id="username" default-value="@shadcn" /> </div> <Button type="submit">