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

refactor: radix-vue to reka-ui

Browse Source
This commit is contained in:
zernonia 2024-11-04 18:19:28 +08:00
parent be888c80b6
commit d2b3a8783c
613 changed files with 1093 additions and 1075 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/ISSUE_TEMPLATE/bug-report.yml vendored
View File

@ -10,8 +10,8 @@ body:
This form is only for submitting bug reports. If you have a usage question
or are unsure if this is really a bug, make sure to:
- Read the [docs](https://radix-vue.com/)
- Ask on [Discord Chat](https://chat.radix-vue.com/)
- Read the [docs](https://reka-ui.com/)
- Ask on [Discord Chat](https://chat.unovue.com/)
- Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
- type: input
id: reproduction

4
.github/ISSUE_TEMPLATE/config.yml vendored
View File

@ -1,8 +1,8 @@
blank_issues_enabled: true
contact_links:
# - name: 📚 Documentation
# url: https://www.radix-vue.com/
# url: https://www.reka-ui.com/
# about: Check the documentation for usage of Radix Vue.
- name: 🗨️ Discord
url: https://chat.radix-vue.com/
url: https://chat.unovue.com/
about: Join the Radix Vue Discord server.

2
.github/ISSUE_TEMPLATE/feature-request.yml vendored
View File

@ -11,7 +11,7 @@ body:
id: feature-description
attributes:
label: Describe the feature
description: A clear and concise description of what you think would be a helpful addition to radix-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
description: A clear and concise description of what you think would be a helpful addition to shadcn-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
placeholder: Feature description
validations:
required: true

4
CONTRIBUTING.md
View File

@ -4,7 +4,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/).
If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
## About this repository
@ -44,7 +44,7 @@ packages
### Start by cloning the repository:
```
git clone git@github.com:radix-vue/shadcn-vue.git
git clone git@github.com:unovue/shadcn-vue.git
```
### Install dependencies

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2023 radix-vue
Copyright (c) 2023 unovue
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

4
README.md
View File

@ -1,5 +1,5 @@
<p align="center">
<img align="center" src="https://raw.githubusercontent.com/radix-vue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
<img align="center" src="https://raw.githubusercontent.com/unovue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
<h1 align="center">
shadcn-vue
</h1>
@ -23,7 +23,7 @@ All credits go to these open-source works and resources
- [Shadcn UI](https://ui.shadcn.com) for creating this beautiful project.
- [Shadcn Svelte](https://shadcn-svelte.com) for some inspiration for registry.
- [Radix Vue](https://radix-vue.com) for doing all the hard work to make sure components are accessible.
- [Radix Vue](https://reka-ui.com) for doing all the hard work to make sure components are accessible.
- [VueUse](https://vueuse.org) for providing many useful utilities.
- [ahmedmayara](https://github.com/ahmedmayara/shadcn-vue) for populating many components

4
apps/www/.vitepress/config.mts
View File

@ -23,7 +23,7 @@ export default defineConfig({
['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }],
['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }],
['meta', { name: 'creator', content: 'radix-vue' }],
['meta', { name: 'creator', content: 'reka-ui' }],
['meta', { name: 'theme-color', content: '#41b883' }],
['meta', { name: 'og:type', content: 'website' }],
['meta', { name: 'og:locale', content: 'en' }],
@ -45,7 +45,7 @@ export default defineConfig({
provider: 'local',
},
editLink: {
pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
pattern: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/:path',
text: 'Edit this page on GitHub',
},
carbonAds: {

2
apps/www/.vitepress/theme/components/Blocks.vue
View File

@ -34,7 +34,7 @@ import('../../../__registry__/index').then((res) => {
Browse
</a>
<a
href="https://github.com/radix-vue/shadcn-vue"
href="https://github.com/unovue/shadcn-vue"
target="_blank"
:class="cn(
buttonVariants({ variant: 'outline' }),

16
apps/www/.vitepress/theme/components/ExamplesNav.vue
View File

@ -11,42 +11,42 @@ const examples = [
{
name: 'Mail',
href: '/examples/mail',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
},
{
name: 'Dashboard',
href: '/examples/dashboard',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
},
{
name: 'Cards',
href: '/examples/cards',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
},
{
name: 'Tasks',
href: '/examples/tasks',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks',
},
{
name: 'Playground',
href: '/examples/playground',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
},
{
name: 'Forms',
href: '/examples/forms',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
},
{
name: 'Music',
href: '/examples/music',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
},
{
name: 'Authentication',
href: '/examples/authentication',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
},
]

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

@ -30,7 +30,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
Get Started
</a>
<a
href="https://github.com/radix-vue/shadcn-vue"
href="https://github.com/unovue/shadcn-vue"
target="_blank"
:class="cn(
buttonVariants({ variant: 'outline' }),

2
apps/www/.vitepress/theme/components/StyleSwitcher.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectTriggerProps } from 'radix-vue'
import type { SelectTriggerProps } from 'reka-ui'
import {
Select,
SelectContent,

2
apps/www/.vitepress/theme/components/theming/Theming.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DateRange } from 'radix-vue'
import type { DateRange } from 'reka-ui'
import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
import CreateAccount from '@/examples/cards/components/CreateAccount.vue'

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

@ -44,7 +44,7 @@ export const docsConfig: DocsConfig = {
},
{
title: 'GitHub',
href: 'https://github.com/radix-vue/shadcn-vue',
href: 'https://github.com/unovue/shadcn-vue',
external: true,
},
],
@ -377,42 +377,42 @@ export const examples: Example[] = [
{
name: 'Mail',
href: '/examples/mail',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
},
{
name: 'Dashboard',
href: '/examples/dashboard',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
},
{
name: 'Cards',
href: '/examples/cards',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
},
// {
// name: "Tasks",
// href: "/examples/tasks",
// label: "New",
// code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
// code: "https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
// },
{
name: 'Playground',
href: '/examples/playground',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
},
{
name: 'Music',
href: '/examples/music',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
},
{
name: 'Authentication',
href: '/examples/authentication',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
},
{
name: 'Forms',
href: '/examples/forms',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms',
code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms',
},
]

2
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -11,7 +11,7 @@ import { docsConfig } from '../config/docs'
const $route = useRoute()
const { frontmatter } = useData()
const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
</script>
<template>

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

@ -209,7 +209,7 @@ watch(() => $route.path, (n) => {
<span class="inline-block ml-2">
Ported to Vue by
<a
href="https://github.com/radix-vue"
href="https://github.com/unovue"
target="_blank"
class="underline underline-offset-4 font-bold decoration-foreground"
>

4
apps/www/.vitepress/theme/utils/codeeditor.ts
View File

@ -91,7 +91,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
const dependencies = {
'vue': 'latest',
'radix-vue': 'latest',
'reka-ui': 'latest',
'@radix-ui/colors': 'latest',
'clsx': 'latest',
'class-variance-authority': 'latest',
@ -206,7 +206,7 @@ createApp(App).mount('#app')`,
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "rlig" 1, "calt" 1;
}
}
#app {
@apply w-full flex items-center justify-center px-12;

2
apps/www/package.json
View File

@ -33,7 +33,7 @@
"embla-carousel-vue": "^8.3.0",
"lucide-vue-next": "^0.441.0",
"magic-string": "^0.30.11",
"radix-vue": "catalog:",
"reka-ui": "catalog:",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
"vaul-vue": "^0.2.0",

6
apps/www/src/content/docs/about.md
View File

@ -5,16 +5,16 @@ description: Powered by amazing open source projects.
## About
[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [unovue](https://github.com/unovue).
## Credits
- [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
- [Radix Vue](https://radix-vue.com) - The headless components that power this project.
- [Radix Vue](https://reka-ui.com) - The headless components that power this project.
- [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
- [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.
## License
MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue)
MIT © [shadcn](https://shadcn.com) & [unovue](https://github.com/unovue)

4
apps/www/src/content/docs/changelog.md
View File

@ -49,7 +49,7 @@ The following form has been created by passing a `zod` schema object to our `Aut
### Component Updated - Calendar
The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component.
@ -104,7 +104,7 @@ And if you're looking for a date picker input, check out the [`Date Picker`](/do
### New Component - Drawer
[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
<ComponentPreview name="DrawerDemo" />

2
apps/www/src/content/docs/charts.md
View File

@ -91,7 +91,7 @@ However, you can always pass in the desired `color` into each chart.
## Custom tooltip
If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
The expected prop definition would be:

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

@ -2,7 +2,7 @@
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.radix-vue.com/components/accordion.html
primitive: https://www.reka-ui.com/components/accordion.html
---
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />

2
apps/www/src/content/docs/components/alert-dialog.md
View File

@ -2,7 +2,7 @@
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
source: apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html
primitive: https://www.reka-ui.com/components/alert-dialog.html
---
<ComponentPreview name="AlertDialogDemo" />

4
apps/www/src/content/docs/components/aspect-ratio.md
View File

@ -2,7 +2,7 @@
title: Aspect Ratio
description: Displays content within a desired ratio.
source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
primitive: https://www.reka-ui.com/components/aspect-ratio.html
---
<ComponentPreview name="AspectRatioDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add aspect-ratio
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project:

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

@ -2,7 +2,7 @@
title: Avatar
description: An image element with a fallback for representing the user.
source: apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html
primitive: https://www.reka-ui.com/components/avatar.html
---
<ComponentPreview name="AvatarDemo" />
@ -22,7 +22,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
<template>
<Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
<AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>

6
apps/www/src/content/docs/components/calendar.md
View File

@ -2,7 +2,7 @@
title: Calendar
description: A date field component that allows users to enter and edit date.
source: apps/www/src/lib/registry/default/ui/calendar
primitive: https://www.radix-vue.com/components/calendar.html
primitive: https://www.reka-ui.com/components/calendar.html
---
<ComponentPreview name="CalendarDemo" />
@ -15,7 +15,7 @@ If you're looking for **previous** Calendar implementation, checkout to <span cl
## About
The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
@ -26,7 +26,7 @@ npx shadcn-vue@latest add calendar
```
::: tip
The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
Check [Dates & Times in Radix Vue](https://www.radix-vue.com/guides/dates.html) for more information and installation instructions.
Check [Dates & Times in Radix Vue](https://www.reka-ui.com/guides/dates.html) for more information and installation instructions.
:::
## Datepicker

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

@ -2,7 +2,7 @@
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/checkbox
primitive: https://www.radix-vue.com/components/checkbox.html
primitive: https://www.reka-ui.com/components/checkbox.html
---
<ComponentPreview name="CheckboxDemo" />

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

@ -2,7 +2,7 @@
title: Collapsible
description: An interactive component which expands/collapses a panel.
source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html
primitive: https://www.reka-ui.com/components/collapsible.html
---
<ComponentPreview name="CollapsibleDemo" />

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

@ -6,11 +6,6 @@ description: Autocomplete input and command palette with a list of suggestions.
<ComponentPreview name="ComboboxDemo" />
<br>
<Callout title="Note" class="bg-destructive">
[Radix Vue](https://github.com/radix-vue/radix-vue/releases/tag/v1.2.0) introduced a breaking change. You will need to wrap `ComboboxGroup` and `ComboboxItem` inside of `ComboboxList` now.
</Callout>
## Installation

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

@ -2,7 +2,7 @@
title: Command
description: Fast, composable, unstyled command menu.
source: apps/www/src/lib/registry/default/ui/command
primitive: https://www.radix-vue.com/components/combobox.html
primitive: https://www.reka-ui.com/components/combobox.html
---
<ComponentPreview name="CommandDemo" />

2
apps/www/src/content/docs/components/context-menu.md
View File

@ -2,7 +2,7 @@
title: Context Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/context-menu
primitive: https://www.radix-vue.com/components/context-menu.html
primitive: https://www.reka-ui.com/components/context-menu.html
---
<ComponentPreview name="ContextMenuDemo" />

2
apps/www/src/content/docs/components/date-picker.md
View File

@ -2,7 +2,7 @@
title: Date Picker
description: A date picker component with range and presets.
source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
primitive: https://www.radix-vue.com/components/calendar.html
primitive: https://www.reka-ui.com/components/calendar.html
---
<ComponentPreview name="DatePickerDemo" />

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

@ -2,7 +2,7 @@
title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html
primitive: https://www.reka-ui.com/components/dialog.html
---
<ComponentPreview name="DialogDemo" />

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

@ -2,14 +2,14 @@
title: Drawer
description: A drawer component for vue.
source: apps/www/src/lib/registry/default/ui/drawer
primitive: https://github.com/radix-vue/vaul-vue
primitive: https://github.com/unovue/vaul-vue
---
<ComponentPreview name="DrawerDemo" />
## About
Drawer is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
Drawer is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
## Installation

2
apps/www/src/content/docs/components/dropdown-menu.md
View File

@ -2,7 +2,7 @@
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/dropdown-menu
primitive: https://www.radix-vue.com/components/dropdown-menu.html
primitive: https://www.reka-ui.com/components/dropdown-menu.html
---
<ComponentPreview name="DropdownMenuDemo" />

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

@ -108,7 +108,7 @@ npx shadcn-vue@latest add form
### Install the following dependency:
```bash
npm install radix-vue vee-validate @vee-validate/zod zod
npm install reka-ui vee-validate @vee-validate/zod zod
```
### Copy and paste the following codes into your project:

2
apps/www/src/content/docs/components/hover-card.md
View File

@ -2,7 +2,7 @@
title: Hover Card
description: For sighted users to preview content available behind a link.
source: apps/www/src/lib/registry/default/ui/hover-card
primitive: https://www.radix-vue.com/components/hover-card.html
primitive: https://www.reka-ui.com/components/hover-card.html
---
<ComponentPreview name="HoverCardDemo" />

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

@ -2,7 +2,7 @@
title: Label
description: Renders an accessible label associated with controls.
source: apps/www/src/lib/registry/default/ui/label
primitive: https://www.radix-vue.com/components/label.html
primitive: https://www.reka-ui.com/components/label.html
---
<ComponentPreview name="LabelDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add label
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project:

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

@ -2,7 +2,7 @@
title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
source: apps/www/src/lib/registry/default/ui/menubar
primitive: https://www.radix-vue.com/components/menubar.html
primitive: https://www.reka-ui.com/components/menubar.html
---
<ComponentPreview name="MenubarDemo" />

2
apps/www/src/content/docs/components/navigation-menu.md
View File

@ -2,7 +2,7 @@
title: Navigation Menu
description: A collection of links for navigating websites.
source: apps/www/src/lib/registry/default/ui/navigation-menu
primitive: https://www.radix-vue.com/components/navigation-menu.html
primitive: https://www.reka-ui.com/components/navigation-menu.html
---
<ComponentPreview name="NavigationMenuDemo" />

2
apps/www/src/content/docs/components/number-field.md
View File

@ -2,7 +2,7 @@
title: Number Field
description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
source: apps/www/src/lib/registry/default/ui/number-field
primitive: https://www.radix-vue.com/components/number-field.html
primitive: https://www.reka-ui.com/components/number-field.html
---
<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />

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

@ -2,7 +2,7 @@
title: Pagination
description: Displays data in paged format and provides navigation between pages.
source: apps/www/src/lib/registry/default/ui/pagination
primitive: https://www.radix-vue.com/components/pagination.html
primitive: https://www.reka-ui.com/components/pagination.html
---
<ComponentPreview name="PaginationDemo" />

2
apps/www/src/content/docs/components/pin-input.md
View File

@ -2,7 +2,7 @@
title: PIN Input
description: Allows users to input a sequence of one-character alphanumeric inputs.
source: apps/www/src/lib/registry/default/ui/pin-input
primitive: https://www.radix-vue.com/components/pin-input.html
primitive: https://www.reka-ui.com/components/pin-input.html
---
<ComponentPreview name="PinInputDemo" />

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

@ -2,7 +2,7 @@
title: Popover
description: Displays rich content in a portal, triggered by a button.
source: apps/www/src/lib/registry/default/ui/popover
primitive: https://www.radix-vue.com/components/popover.html
primitive: https://www.reka-ui.com/components/popover.html
---
<ComponentPreview name="PopoverDemo" />

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

@ -2,7 +2,7 @@
title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
source: apps/www/src/lib/registry/default/ui/progress
primitive: https://www.radix-vue.com/components/progress.html
primitive: https://www.reka-ui.com/components/progress.html
---
<ComponentPreview name="ProgressDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add progress
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project:

2
apps/www/src/content/docs/components/radio-group.md
View File

@ -2,7 +2,7 @@
title: Radio Group
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
source: apps/www/src/lib/registry/default/ui/radio-group
primitive: https://www.radix-vue.com/components/radio-group.html
primitive: https://www.reka-ui.com/components/radio-group.html
---
<ComponentPreview name="RadioGroupDemo" />

4
apps/www/src/content/docs/components/range-calendar.md
View File

@ -2,14 +2,14 @@
title: Range Calendar
description: A calendar component that allows users to select a range of dates.
source: apps/www/src/lib/registry/default/ui/range-calendar
primitive: https://www.radix-vue.com/components/range-calendar.html
primitive: https://www.reka-ui.com/components/range-calendar.html
---
<ComponentPreview name="RangeCalendarDemo" />
## About
The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.radix-vue.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
## Installation

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

@ -2,7 +2,7 @@
title: Resizable
description: Accessible resizable panel groups and layouts with keyboard support.
source: apps/www/src/lib/registry/default/ui/resizable
primitive: https://www.radix-vue.com/components/splitter.html
primitive: https://www.reka-ui.com/components/splitter.html
---
<ComponentPreview name="ResizableDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add resizable
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project:

2
apps/www/src/content/docs/components/scroll-area.md
View File

@ -2,7 +2,7 @@
title: Scroll-area
description: Augments native scroll functionality for custom, cross-browser styling.
source: apps/www/src/lib/registry/default/ui/scroll-area
primitive: https://www.radix-vue.com/components/scroll-area.html
primitive: https://www.reka-ui.com/components/scroll-area.html
---
<ComponentPreview name="ScrollAreaDemo" />

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

@ -2,7 +2,7 @@
title: Select
description: Displays a list of options for the user to pick from—triggered by a button.
source: apps/www/src/lib/registry/default/ui/select
primitive: https://www.radix-vue.com/components/select.html
primitive: https://www.reka-ui.com/components/select.html
---
<ComponentPreview name="SelectDemo" />

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

@ -2,7 +2,7 @@
title: Separator
description: Visually or semantically separates content.
source: apps/www/src/lib/registry/default/ui/separator
primitive: https://www.radix-vue.com/components/separator.html
primitive: https://www.reka-ui.com/components/separator.html
---
<ComponentPreview name="SeparatorDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add separator
### Install the following dependency
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project

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

@ -2,7 +2,7 @@
title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen.
source: apps/www/src/lib/registry/default/ui/sheet
primitive: https://www.radix-vue.com/components/dialog.html
primitive: https://www.reka-ui.com/components/dialog.html
---
<ComponentPreview name="SheetDemo" />

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

@ -2,7 +2,7 @@
title: Slider
description: An input where the user selects a value from within a given range.
source: apps/www/src/lib/registry/default/ui/slider
primitive: https://www.radix-vue.com/components/slider.html
primitive: https://www.reka-ui.com/components/slider.html
---
<ComponentPreview name="SliderDemo" />

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

@ -66,7 +66,7 @@ import { toast } from 'vue-sonner'
### Sonner with Dialog
Related issue https://github.com/radix-vue/shadcn-vue/issues/462
Related issue https://github.com/unovue/shadcn-vue/issues/462
Add `pointer-events-auto` class to Toaster component in your `App.vue` file:

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

@ -2,7 +2,7 @@
title: Stepper
description: A set of steps that are used to indicate progress through a multi-step process.
source: apps/www/src/lib/registry/default/ui/stepper
primitive: https://www.radix-vue.com/components/stepper.html
primitive: https://www.reka-ui.com/components/stepper.html
---
<ComponentPreview name="StepperDemo" />

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

@ -2,7 +2,7 @@
title: Switch
description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/switch
primitive: https://www.radix-vue.com/components/switch.html
primitive: https://www.reka-ui.com/components/switch.html
---
<ComponentPreview name="SwitchDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add switch
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project

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

@ -2,7 +2,7 @@
title: Tabs
description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
source: apps/www/src/lib/registry/default/ui/tabs
primitive: https://www.radix-vue.com/components/tabs.html
primitive: https://www.reka-ui.com/components/tabs.html
---
<ComponentPreview name="TabsDemo" />

2
apps/www/src/content/docs/components/tags-input.md
View File

@ -2,7 +2,7 @@
title: Tags Input
description: Tag inputs render tags inside an input, followed by an actual text input.
source: apps/www/src/lib/registry/default/ui/tags-input
primitive: https://www.radix-vue.com/components/tags-input.html
primitive: https://www.reka-ui.com/components/tags-input.html
---
<ComponentPreview name="TagsInputDemo" />

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

@ -22,7 +22,7 @@ npx shadcn-vue@latest add textarea
### Install the following dependency:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project

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

@ -2,7 +2,7 @@
title: Toast
description: A succinct message that is displayed temporarily.
source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.radix-vue.com/components/toast.html
primitive: https://www.reka-ui.com/components/toast.html
---
<ComponentPreview name="ToastDemo" />

4
apps/www/src/content/docs/components/toggle-group.md
View File

@ -2,7 +2,7 @@
title: Toggle Group
description: A set of two-state buttons that can be toggled on or off.
source: apps/www/src/lib/registry/default/ui/toggle-group
primitive: https://www.radix-vue.com/components/toggle-group.html
primitive: https://www.reka-ui.com/components/toggle-group.html
---
<ComponentPreview name="ToggleGroupDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle-group
### Install the following dependencies:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project

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

@ -2,7 +2,7 @@
title: Toggle
description: A two-state button that can be either on or off.
source: apps/www/src/lib/registry/default/ui/toggle
primitive: https://www.radix-vue.com/components/toggle.html
primitive: https://www.reka-ui.com/components/toggle.html
---
<ComponentPreview name="ToggleDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle
### Install the following dependencies:
```bash
npm install radix-vue
npm install reka-ui
```
### Copy and paste the following code into your project

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

@ -2,7 +2,7 @@
title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
source: apps/www/src/lib/registry/default/ui/tooltip
primitive: https://www.radix-vue.com/components/tooltip.html
primitive: https://www.reka-ui.com/components/tooltip.html
---
<ComponentPreview name="TooltipDemo" />

36
apps/www/src/content/docs/contribution.md
View File

@ -17,7 +17,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/).
If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
This guide provides detailed information to help new contributors.
@ -84,7 +84,7 @@ When adding or modifying components, please ensure that:
Start by cloning the repository:
```bash
git clone git@github.com:radix-vue/shadcn-vue.git
git clone git@github.com:unovue/shadcn-vue.git
```
### Install dependencies
@ -170,17 +170,17 @@ If you are interested in the detailed specification you can visit [Conventional
Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file.
See the [`Accordion`](https://github.com/radix-vue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
## Wrapping Radix-Vue Components
## Wrapping Reka UI Components
[Radix-Vue](https://www.radix-vue.com) hosts many low-level UI components that are used to build reusable components.
There are many cases that you need to wrap `Radix-Vue` components.
[Reka UI](https://www.reka-ui.com) hosts many low-level UI components that are used to build reusable components.
There are many cases that you need to wrap `Reka UI` components.
### Props & Events
All of the `Radix-Vue` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Radix-Vue` component.
All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component.
To do so, we have a helper function named [`useForwardPropsEmits`](https://www.radix-vue.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
computed object that combines the parsed props and emits as props.
@ -194,7 +194,7 @@ import {
type AccordionRootEmits,
type AccordionRootProps,
useForwardPropsEmits,
} from 'radix-vue'
} from 'reka-ui'
const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>()
@ -212,9 +212,9 @@ const forwarded = useForwardPropsEmits(props, emits)
As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax.
### CSS Classes
There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `radix-vue` component via `cn` utility function.
There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `Reka UI` component via `cn` utility function.
In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/radix-vue/shadcn-vue/pull/241).
In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/unovue/shadcn-vue/pull/241).
Take a look at `DrawerDescription.vue`.
@ -250,7 +250,7 @@ This pattern only needs to be applied when the `cn` utility is required. For ins
```vue
<script setup lang="ts">
import { SelectValue, type SelectValueProps } from 'radix-vue'
import { SelectValue, type SelectValueProps } from 'reka-ui'
const props = defineProps<SelectValueProps>()
</script>
@ -264,14 +264,14 @@ const props = defineProps<SelectValueProps>()
### Boolean Props
When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting).
You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.radix-vue.com/utilities/use-forward-props.html) composable.
You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/utilities/use-forward-props.html) composable.
Take a look at `AccordionItem.vue`
```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
@ -300,7 +300,7 @@ Since `AccordionItemProps` type has atleast one boolean property, we need to use
Note that `useForwardPropsEmits` use `useForwardProps` under the hood.
### Component as Root
Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.radix-vue.com/utilities/primitive.html) instead.
Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/utilities/primitive.html) instead.
Let's take a look at `Button.vue`
@ -308,7 +308,7 @@ Let's take a look at `Button.vue`
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type ButtonVariants, buttonVariants } from '.'
interface Props extends PrimitiveProps {
@ -333,7 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
</template>
```
You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.radix-vue.com/utilities/primitive.html#changing-as-value) property.
You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/utilities/primitive.html#changing-as-value) property.
## Updating with `shadcn/ui`
@ -352,7 +352,7 @@ Click on the following link to check if there are newer commits that we should b
</div>
1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version.
2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/unovue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
## Debugging
Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects.

2
apps/www/src/content/docs/installation/astro.md
View File

@ -50,7 +50,7 @@ This will install `vue` and `@astrojs/vue` as dependencies and automatically set
### Install TypeScript
If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118)
If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/unovue/shadcn-vue/pull/118)
```bash
npm install -D typescript

6
apps/www/src/content/docs/installation/nuxt.md
View File

@ -147,21 +147,21 @@ export default defineNuxtModule<ShadcnVueOptions>({
}
addComponent({
filePath: 'radix-vue',
filePath: 'reka-ui',
export: 'PaginationRoot',
name: `${prefix}Pagination`,
priority: 999,
});
addComponent({
filePath: 'radix-vue',
filePath: 'reka-ui',
export: 'PaginationList',
name: `${prefix}PaginationList`,
priority: 999,
});
addComponent({
filePath: 'radix-vue',
filePath: 'reka-ui',
export: 'PaginationListItem',
name: `${prefix}PaginationListItem`,
priority: 999,

2
apps/www/src/examples/dashboard/components/DateRangePicker.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DateRange } from 'radix-vue'
import type { DateRange } from 'reka-ui'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
Popover,

2
apps/www/src/examples/forms/components/AccountForm.vue
View File

@ -25,7 +25,7 @@ import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internati
import { toTypedSchema } from '@vee-validate/zod'
import RadixIconsCalendar from '~icons/radix-icons/calendar'
import { Check, ChevronsUpDown } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date'
import { toDate } from 'reka-ui/date'
import { h, ref } from 'vue'
import * as z from 'zod'

2
apps/www/src/examples/playground/components/MaxLengthSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SliderRootProps } from 'radix-vue'
import type { SliderRootProps } from 'reka-ui'
import {
HoverCard,
HoverCardContent,

2
apps/www/src/examples/playground/components/TemperatureSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SliderRootProps } from 'radix-vue'
import type { SliderRootProps } from 'reka-ui'
import {
HoverCard,

2
apps/www/src/examples/playground/components/TopPSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SliderRootProps } from 'radix-vue'
import type { SliderRootProps } from 'reka-ui'
import {
HoverCard,

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

@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/a
<template>
<Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
<AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>

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

@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toTypedSchema } from '@vee-validate/zod'
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date'
import { toDate } from 'reka-ui/date'
import { useForm } from 'vee-validate'
import { computed, h, ref } from 'vue'
import { z } from 'zod'

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

@ -10,8 +10,8 @@ import {
import { cn } from '@/lib/utils'
import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
import { useVModel } from '@vueuse/core'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
import { createDecade, createYear, toDate } from 'radix-vue/date'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
import { createDecade, createYear, toDate } from 'reka-ui/date'
import { computed, type HTMLAttributes, type Ref } from 'vue'
const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {

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

@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toTypedSchema } from '@vee-validate/zod'
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date'
import { toDate } from 'reka-ui/date'
import { useForm } from 'vee-validate'
import { computed, h, ref } from 'vue'
import { z } from 'zod'

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

@ -27,8 +27,8 @@ import {
ChevronLeft,
ChevronRight,
} from 'lucide-vue-next'
import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
import { createMonth, type Grid, toDate } from 'radix-vue/date'
import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'
import { createMonth, type Grid, toDate } from 'reka-ui/date'
import { type Ref, ref, watch } from 'vue'
const value = ref({

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DateRange } from 'radix-vue'
import type { DateRange } from 'reka-ui'
import { Button } from '@/lib/registry/default/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'

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

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
import { Button } from '@/lib/registry/default/ui/button'
import {
DropdownMenu,

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

@ -61,7 +61,7 @@ const components: { title: string, href: string, description: string }[] = [
class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
href="/"
>
<img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6">
<img src="https://www.reka-ui.com/logo.svg" class="h-6 w-6">
<div class="mb-2 mt-4 text-lg font-medium">
shadcn/ui
</div>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DateRange } from 'radix-vue'
import type { DateRange } from 'reka-ui'
import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
import { getLocalTimeZone, today } from '@internationalized/date'
import { type Ref, ref } from 'vue'

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
import { computed, ref } from 'vue'
const frameworks = [

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

@ -2,6 +2,6 @@
<code
class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
>
radix-vue
reka-ui
</code>
</template>

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

@ -4,7 +4,7 @@ import {
type AccordionRootEmits,
type AccordionRootProps,
useForwardPropsEmits,
} from 'radix-vue'
} from 'reka-ui'
const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>()

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { AccordionContent, type AccordionContentProps } from 'radix-vue'
import { AccordionContent, type AccordionContentProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()

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

@ -5,7 +5,7 @@ import {
AccordionHeader,
AccordionTrigger,
type AccordionTriggerProps,
} from 'radix-vue'
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
const props = defineProps<AlertDialogProps>()
const emits = defineEmits<AlertDialogEmits>()

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils'
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils'
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()

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

@ -7,7 +7,7 @@ import {
AlertDialogOverlay,
AlertDialogPortal,
useForwardPropsEmits,
} from 'radix-vue'
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()

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

@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
import {
AlertDialogDescription,
type AlertDialogDescriptionProps,
} from 'radix-vue'
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
const props = defineProps<AlertDialogTriggerProps>()
</script>

2
apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { AspectRatio, type AspectRatioProps } from 'radix-vue'
import { AspectRatio, type AspectRatioProps } from 'reka-ui'
const props = defineProps<AspectRatioProps>()
</script>

2
apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
View File

@ -1,6 +1,6 @@
import type { Ref } from 'vue'
import type * as z from 'zod'
import { createContext } from 'radix-vue'
import { createContext } from 'reka-ui'
import { useFieldValue, useFormValues } from 'vee-validate'
import { computed, ref, watch } from 'vue'
import { type Dependency, DependencyType, type EnumValues } from './interface'

2
apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { AvatarRoot } from 'radix-vue'
import { AvatarRoot } from 'reka-ui'
import { avatarVariant, type AvatarVariants } from '.'
const props = withDefaults(defineProps<{

2
apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
const props = defineProps<AvatarFallbackProps>()
</script>

2
apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { AvatarImage, type AvatarImageProps } from 'radix-vue'
import { AvatarImage, type AvatarImageProps } from 'reka-ui'
const props = defineProps<AvatarImageProps>()
</script>

2
apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { Primitive, type PrimitiveProps } from 'reka-ui'
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
as: 'a',

2
apps/www/src/lib/registry/default/ui/button/Button.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type ButtonVariants, buttonVariants } from '.'
interface Props extends PrimitiveProps {

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'

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