+ return `
${text}
`
@@ -25,53 +30,61 @@ ${text}
// https://vitepress.dev/reference/site-config
export default defineConfig({
- title: radixVueName,
- description: radixVueDescription,
+ cleanUrls: true,
+ title: rekaName,
+ description: rekaDescription,
+ titleTemplate: rekaShortName,
head: [
['meta', { name: 'theme-color', content: '#00C38A' }],
['link', { rel: 'icon', href: '/logo.png' }],
['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
+ ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${rekaName} contributors` }],
+ ['meta', { name: 'keywords', content: 'vue, nuxt, component-library, radix, radix-vue, reka-ui, typescript' }],
+ ['meta', { property: 'og:title', content: rekaName }],
+ ['meta', { property: 'og:description', content: rekaDescription }],
+ ['meta', { property: 'og:url', content: ogUrl }],
+ ['meta', { property: 'og:image', content: ogImage }],
+ ['meta', { name: 'twitter:title', content: rekaName }],
+ ['meta', { name: 'twitter:description', content: rekaDescription }],
+ ['meta', { name: 'twitter:image', content: ogImage }],
+ ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+ [
+ 'link',
+ {
+ rel: 'preload',
+ as: 'style',
+ onload: 'this.onload=null;this.rel=\'stylesheet\'',
+ href: font,
+ },
+ ],
[
- 'meta',
- { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${radixVueName} contributors` },
+ 'noscript',
+ {},
+ `
`,
],
+ ['link', { rel: 'mask-icon', href: '/logo.svg', color: '#ffffff' }],
[
- 'meta',
+ 'link',
{
- name: 'keywords',
- content:
- 'vue, nuxt, component-library, radix, radix-vue, typescript',
+ rel: 'apple-touch-icon',
+ href: '/apple-touch-icon.png',
+ sizes: '180x180',
},
],
- ['meta', { property: 'og:title', content: radixVueName }],
- ['meta', { property: 'og:description', content: radixVueDescription }],
- ['meta', { property: 'og:url', content: ogUrl }],
- ['meta', { property: 'og:image', content: ogImage }],
- ['meta', { name: 'twitter:title', content: radixVueName }],
- ['meta', { name: 'twitter:description', content: radixVueDescription }],
- ['meta', { name: 'twitter:image', content: ogImage }],
- ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
- ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: font }],
- ['noscript', {}, `
`],
- ['link', { rel: 'mask-icon', href: '/logo.svg', color: '#ffffff' }],
- ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
],
lastUpdated: true,
- sitemap: {
- hostname: ogUrl,
- },
+ sitemap: { hostname: ogUrl },
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
- { text: 'Docs', link: '/overview/getting-started.html' },
+ { text: 'Docs', link: '/docs/overview/getting-started' },
+ { text: 'Examples', link: '/examples/checkbox-group' },
{ text: 'Showcase', link: '/showcase' },
{
text: `v${version}`,
items: [
- {
- text: 'Release Notes ',
- link: releases,
- },
+ { text: 'Release Notes ', link: releases },
+ { text: legacyVersion, link: legacyLink },
],
},
],
@@ -83,92 +96,256 @@ export default defineConfig({
sidebar: [
{
text: 'Overview',
- collapsed: false,
+ icon: 'lucide:rocket',
items: [
- { text: 'Introduction', link: '/overview/introduction' },
- { text: 'Getting Started', link: '/overview/getting-started' },
- { text: 'Installation', link: '/overview/installation' },
- { text: 'Accessibility', link: '/overview/accessibility' },
- { text: 'Releases', link: '/overview/releases' },
+ { text: 'Introduction', link: '/docs/overview/introduction' },
+ { text: 'Getting Started', link: '/docs/overview/getting-started' },
+ { text: 'Installation', link: '/docs/overview/installation' },
+ { text: 'Accessibility', link: '/docs/overview/accessibility' },
+ { text: 'Releases', link: '/docs/overview/releases' },
],
},
{
text: 'Guides',
- collapsed: false,
+ icon: 'lucide:book-open',
items: [
- { text: 'Styling', link: '/guides/styling' },
- { text: 'Animation/Transition', link: '/guides/animation' },
- { text: 'Composition', link: '/guides/composition' },
- { text: 'Server side rendering', link: '/guides/server-side-rendering' },
- { text: 'Namespaced', link: '/guides/namespaced-components' },
- { text: 'Internationalization (RTL)', link: '/guides/i18n' },
- { text: 'Dates', link: '/guides/dates' },
- // { text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
+ { text: 'Styling', link: '/docs/guides/styling' },
+ { text: 'Animation/Transition', link: '/docs/guides/animation' },
+ { text: 'Composition', link: '/docs/guides/composition' },
+ { text: `Controlled State ${BadgeHTML('New')}`, link: '/docs/guides/controlled-state' },
+ {
+ text: 'Server side rendering',
+ link: '/docs/guides/server-side-rendering',
+ },
+ { text: 'Namespaced', link: '/docs/guides/namespaced-components' },
+ { text: 'Dates', link: '/docs/guides/dates' },
+ { text: 'Internationalization (RTL)', link: '/docs/guides/i18n' },
+ {
+ text: `Inject Context ${BadgeHTML('New')}`,
+ link: '/docs/guides/inject-context',
+ },
+ {
+ text: `Virtualization ${BadgeHTML('New')}`,
+ link: '/docs/guides/virtualization',
+ },
+ {
+ text: `Migration ${BadgeHTML('New')}`,
+ link: '/docs/guides/migration',
+ },
],
},
{
text: 'Components',
- collapsed: false,
+ icon: 'lucide:box',
items: [
- { text: 'Accordion', link: '/components/accordion' },
- { text: 'Alert Dialog', link: '/components/alert-dialog' },
- { text: 'Aspect Ratio', link: '/components/aspect-ratio' },
- { text: 'Avatar', link: '/components/avatar' },
- { text: `Calendar ${BadgeHTML('Alpha', true)}`, link: '/components/calendar' },
- { text: 'Checkbox', link: '/components/checkbox' },
- { text: 'Collapsible', link: '/components/collapsible' },
- { text: 'Combobox', link: '/components/combobox' },
- { text: 'Context Menu', link: '/components/context-menu' },
- { text: `Date Field ${BadgeHTML('Alpha', true)}`, link: '/components/date-field' },
- { text: `Date Picker ${BadgeHTML('Alpha', true)}`, link: '/components/date-picker' },
- { text: `Date Range Field ${BadgeHTML('Alpha', true)}`, link: '/components/date-range-field' },
- { text: `Date Range Picker ${BadgeHTML('Alpha', true)}`, link: '/components/date-range-picker' },
- { text: 'Dialog', link: '/components/dialog' },
- { text: 'Dropdown Menu', link: '/components/dropdown-menu' },
- { text: `Editable ${BadgeHTML('Alpha', true)}`, link: '/components/editable' },
- { text: 'Hover Card', link: '/components/hover-card' },
- { text: 'Label', link: '/components/label' },
- { text: `Listbox ${BadgeHTML('Alpha', true)}`, link: '/components/listbox' },
- { text: 'Menubar', link: '/components/menubar' },
- { text: 'Navigation Menu', link: '/components/navigation-menu' },
- { text: `Number Field ${BadgeHTML('Alpha', true)}`, link: '/components/number-field' },
- { text: 'Pagination', link: '/components/pagination' },
- { text: 'Pin Input', link: '/components/pin-input' },
- { text: 'Popover', link: '/components/popover' },
- { text: 'Progress', link: '/components/progress' },
- { text: 'Radio Group', link: '/components/radio-group' },
- { text: `Range Calendar ${BadgeHTML('Alpha', true)}`, link: '/components/range-calendar' },
- { text: 'Scroll Area', link: '/components/scroll-area' },
- { text: 'Select', link: '/components/select' },
- { text: 'Separator', link: '/components/separator' },
- { text: 'Slider', link: '/components/slider' },
- { text: 'Splitter', link: '/components/splitter' },
- { text: `Stepper ${BadgeHTML('Alpha')}`, link: '/components/stepper' },
- { text: 'Switch', link: '/components/switch' },
- { text: 'Tabs', link: '/components/tabs' },
- { text: 'Tags Input', link: '/components/tags-input' },
- { text: 'Toast', link: '/components/toast' },
- { text: 'Toggle', link: '/components/toggle' },
- { text: 'Toggle Group', link: '/components/toggle-group' },
- { text: 'Toolbar', link: '/components/toolbar' },
- { text: 'Tooltip', link: '/components/tooltip' },
- { text: `Tree ${BadgeHTML('Alpha')}`, link: '/components/tree' },
+ {
+ text: 'Form',
+ items: [
+ { text: 'Checkbox', link: '/docs/components/checkbox' },
+ { text: 'Combobox', link: '/docs/components/combobox' },
+ { text: `Editable`, link: '/docs/components/editable' },
+ { text: `Listbox`, link: '/docs/components/listbox' },
+ { text: `Number Field`, link: '/docs/components/number-field' },
+ { text: 'Label', link: '/docs/components/label' },
+ { text: 'Pin Input', link: '/docs/components/pin-input' },
+ { text: 'Radio Group', link: '/docs/components/radio-group' },
+ { text: 'Select', link: '/docs/components/select' },
+ { text: 'Slider', link: '/docs/components/slider' },
+ { text: 'Switch', link: '/docs/components/switch' },
+ { text: 'Tags Input', link: '/docs/components/tags-input' },
+ { text: 'Toggle', link: '/docs/components/toggle' },
+ { text: 'Toggle Group', link: '/docs/components/toggle-group' },
+ ],
+ },
+ {
+ text: 'Dates',
+ items: [
+ {
+ text: `Calendar ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/calendar',
+ },
+ {
+ text: `Date Field ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/date-field',
+ },
+ {
+ text: `Date Picker ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/date-picker',
+ },
+ {
+ text: `Date Range Field ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/date-range-field',
+ },
+ {
+ text: `Date Range Picker ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/date-range-picker',
+ },
+ {
+ text: `Range Calendar ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/range-calendar',
+ },
+ {
+ text: `Time Field ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/time-field',
+ },
+ ],
+ },
+ {
+ text: 'General',
+ items: [
+ { text: 'Accordion', link: '/docs/components/accordion' },
+ { text: 'Alert Dialog', link: '/docs/components/alert-dialog' },
+ { text: 'Aspect Ratio', link: '/docs/components/aspect-ratio' },
+ { text: 'Avatar', link: '/docs/components/avatar' },
+ { text: 'Collapsible', link: '/docs/components/collapsible' },
+ { text: 'Context Menu', link: '/docs/components/context-menu' },
+ { text: 'Dialog', link: '/docs/components/dialog' },
+ { text: 'Dropdown Menu', link: '/docs/components/dropdown-menu' },
+ { text: 'Hover Card', link: '/docs/components/hover-card' },
+ { text: 'Menubar', link: '/docs/components/menubar' },
+ {
+ text: 'Navigation Menu',
+ link: '/docs/components/navigation-menu',
+ },
+ { text: 'Pagination', link: '/docs/components/pagination' },
+ { text: 'Popover', link: '/docs/components/popover' },
+ { text: 'Progress', link: '/docs/components/progress' },
+ { text: 'Scroll Area', link: '/docs/components/scroll-area' },
+ { text: 'Separator', link: '/docs/components/separator' },
+ { text: 'Splitter', link: '/docs/components/splitter' },
+ {
+ text: `Stepper ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/stepper',
+ },
+ { text: 'Tabs', link: '/docs/components/tabs' },
+ { text: 'Toast', link: '/docs/components/toast' },
+ { text: 'Toolbar', link: '/docs/components/toolbar' },
+ { text: 'Tooltip', link: '/docs/components/tooltip' },
+ {
+ text: `Tree ${BadgeHTML('Alpha', true)}`,
+ link: '/docs/components/tree',
+ },
+ ],
+ },
],
},
{
text: 'Utilities',
- collapsed: false,
+ icon: 'lucide:wrench',
items: [
- { text: 'Config Provider', link: '/utilities/config-provider' },
- { text: 'Visually Hidden', link: '/utilities/visually-hidden' },
- { text: 'Primitive', link: '/utilities/primitive' },
- { text: 'Slot', link: '/utilities/slot' },
- { text: 'useId', link: '/utilities/use-id' },
- { text: 'useDateFormatter', link: '/utilities/use-date-formatter' },
- { text: 'useEmitAsProps', link: '/utilities/use-emit-as-props' },
- { text: 'useForwardExpose', link: '/utilities/use-forward-expose' },
- { text: 'useForwardProps', link: '/utilities/use-forward-props' },
- { text: 'useForwardPropsEmits', link: '/utilities/use-forward-props-emits' },
+ {
+ text: 'Component',
+ items: [
+ { text: 'Config Provider', link: '/docs/utilities/config-provider' },
+ { text: 'Focus Scope', link: '/docs/utilities/focus-scope' },
+ { text: 'Presence', link: '/docs/utilities/presence' },
+ { text: 'Primitive', link: '/docs/utilities/primitive' },
+ { text: 'Slot', link: '/docs/utilities/slot' },
+ { text: 'Visually Hidden', link: '/docs/utilities/visually-hidden' },
+ ],
+ },
+ {
+ text: 'Composable',
+ items: [
+ { text: 'useId', link: '/docs/utilities/use-id' },
+ {
+ text: 'useDateFormatter',
+ link: '/docs/utilities/use-date-formatter',
+ },
+ {
+ text: 'useEmitAsProps',
+ link: '/docs/utilities/use-emit-as-props',
+ },
+ { text: 'useFilter', link: '/docs/utilities/use-filter' },
+ {
+ text: 'useForwardExpose',
+ link: '/docs/utilities/use-forward-expose',
+ },
+ {
+ text: 'useForwardProps',
+ link: '/docs/utilities/use-forward-props',
+ },
+ {
+ text: 'useForwardPropsEmits',
+ link: '/docs/utilities/use-forward-props-emits',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ text: 'Examples',
+ icon: 'lucide:square-dashed-mouse-pointer',
+ link: '/examples/checkbox-group',
+ items: [
+ {
+ text: 'Checkbox',
+ items: [
+ { text: 'Checkbox Group', link: '/examples/checkbox-group' },
+ ],
+ },
+ {
+ text: 'Combobox',
+ items: [
+ {
+ text: 'Combobox Tags Input',
+ link: '/examples/combobox-tags-input',
+ },
+ {
+ text: 'Combobox Textarea',
+ link: '/examples/combobox-textarea',
+ },
+ ],
+ },
+ {
+ text: 'Date',
+ items: [
+ {
+ text: 'Date Picker Selection',
+ link: '/examples/date-picker-selection',
+ },
+ ],
+ },
+ {
+ text: 'Dialog',
+ items: [
+ {
+ text: 'Dialog Command Menu',
+ link: '/examples/dialog-command-menu',
+ },
+ ],
+ },
+ {
+ text: 'Listbox',
+ items: [
+ { text: 'Listbox Transfer', link: '/examples/listbox-transfer' },
+ ],
+ },
+ {
+ text: 'Slider',
+ items: [
+ {
+ text: 'Slider with Number Field',
+ link: '/examples/slider-number-field',
+ },
+ { text: 'Slider Tooltip', link: '/examples/slider-tooltip' },
+ ],
+ },
+ {
+ text: 'Tooltip',
+ items: [
+ { text: 'Tooltip Cursor', link: '/examples/tooltip-cursor' },
+ ],
+ },
+ {
+ text: 'Progress',
+ items: [
+ {
+ text: 'Circular Progress',
+ link: '/examples/progress-circular',
+ },
+ ],
+ },
],
},
],
@@ -182,22 +359,54 @@ export default defineConfig({
provider: 'local',
},
editLink: {
- pattern: 'https://github.com/unovue/radix-vue/edit/main/docs/content/:path',
+ pattern: 'https://github.com/unovue/reka-ui/edit/main/docs/content/:path',
},
carbonAds: {
- code: 'CW7DV27J',
- placement: 'wwwradix-vuecom',
+ code: 'CW7DP2JW',
+ placement: 'reka-uicom',
},
},
srcDir: 'content',
appearance: 'dark',
markdown: {
- theme: 'material-theme-palenight',
+ theme: 'github-dark',
+ headers: {
+ level: [2, 3],
+ },
+ anchor: {
+ callback(token) {
+ // set tw `group` modifier to heading element
+ token.attrSet(
+ 'class',
+ 'group relative border-none mb-4 lg:-ml-2 lg:pl-2 lg:pr-2 w-max',
+ )
+ },
+ permalink: anchor.permalink.linkInsideHeader({
+ class:
+ 'header-anchor [&_span]:focus:opacity-100 [&_span_>_span]:focus:outline',
+ symbol: `
`,
+ renderAttrs: (slug, state) => {
+ // From: https://github.com/vuejs/vitepress/blob/256d742b733bfb62d54c78168b0e867b8eb829c9/src/node/markdown/markdown.ts#L263
+ // Find `heading_open` with the id identical to slug
+ const idx = state.tokens.findIndex((token) => {
+ const attrs = token.attrs
+ const id = attrs?.find(attr => attr[0] === 'id')
+ return id && slug === id[1]
+ })
+ // Get the actual heading content
+ const title = state.tokens[idx + 1].content
+ return {
+ 'aria-label': `Permalink to "${title}"`,
+ }
+ },
+ }),
+ },
preConfig(md) {
md.use(ComponentPreviewPlugin)
md.use(InstallationTabsPlugin)
},
+ codeTransformers: [createHoverTransformer()],
},
transformPageData(pageData) {
if (pageData.frontmatter.sidebar != null)
@@ -209,11 +418,8 @@ export default defineConfig({
css: {
postcss: {
plugins: [
- // @ts-expect-error nocheck
tailwind(),
- // @ts-expect-error nocheck
autoprefixer(),
- // @ts-expect-error nocheck
postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }),
],
},
diff --git a/docs/.vitepress/custom/Docs.vue b/docs/.vitepress/custom/Docs.vue
new file mode 100644
index 000000000..f4f696d6b
--- /dev/null
+++ b/docs/.vitepress/custom/Docs.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ On this page
+
+
+
+
+
+
+
+ {{ activeSection?.text }}
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/custom/Examples.vue b/docs/.vitepress/custom/Examples.vue
new file mode 100644
index 000000000..dd5937351
--- /dev/null
+++ b/docs/.vitepress/custom/Examples.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/docs/.vitepress/custom/Layout.vue b/docs/.vitepress/custom/Layout.vue
new file mode 100644
index 000000000..292e0ca05
--- /dev/null
+++ b/docs/.vitepress/custom/Layout.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/layouts/showcase.vue b/docs/.vitepress/custom/Showcase.vue
similarity index 58%
rename from docs/.vitepress/layouts/showcase.vue
rename to docs/.vitepress/custom/Showcase.vue
index 153b2d29e..adf056f53 100644
--- a/docs/.vitepress/layouts/showcase.vue
+++ b/docs/.vitepress/custom/Showcase.vue
@@ -1,36 +1,36 @@
-
-
-
-
+
+
+
+
Showcase
-
+
{{ frontmatter.description }}
-
-
+
Packages
-
+
-
+
Projects
-
+
-
+
Starters
-
+
, U extends keyof T>(items: T[], key: U): T[] {
+ return items.reduce((acc: any[], item: T) => {
+ acc.push(item)
+ if (item[key])
+ acc.push(...flatten(item[key], key as any))
+ return acc
+ }, [])
+}
diff --git a/docs/.vitepress/meta.ts b/docs/.vitepress/meta.ts
index d50a8e579..25215eca0 100644
--- a/docs/.vitepress/meta.ts
+++ b/docs/.vitepress/meta.ts
@@ -1,29 +1,34 @@
// noinspection ES6PreferShortImport: IntelliJ IDE hint to avoid warning to use `~/contributors`, will fail on build if changed
/* Texts */
-export const radixVueName = 'Radix Vue'
-export const radixVueShortName = 'Radix Vue'
-export const radixVueDescription
- = 'Unstyled, accessible components for building high‑quality design systems and web apps in Vue'
+export const rekaName = 'Reka'
+export const rekaShortName = 'Reka UI'
+export const rekaDescription
+ = 'An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.'
/* CDN fonts and styles */
export const googleapis = 'https://fonts.googleapis.com'
export const gstatic = 'https://fonts.gstatic.com'
-export const font = `${googleapis}/css2?family=Readex+Pro:wght@200;400;600&display=swap`
+export const font = `${googleapis}/css2?family=Inter:wght@100..900&display=swap`
/* vitepress head */
-export const ogUrl = 'https://radix-vue.com/'
+export const ogUrl = 'https://reka-ui.com/'
export const ogImage = `${ogUrl}og.jpg`
+/* Legacy Radix Vue */
+export const legacyVersion = 'Radix Vue v1.9.x'
+export const legacyLink = 'https://radix-vue.com/'
+
/* GitHub and social links */
-export const github = 'https://github.com/unovue/radix-vue'
-export const releases = 'https://github.com/unovue/radix-vue/releases'
-export const contributing = 'https://github.com/unovue/radix-vue/blob/main/CONTRIBUTING.md'
-export const discord = 'https://chat.radix-vue.com'
+export const github = 'https://github.com/unovue/reka-ui'
+export const releases = 'https://github.com/unovue/reka-ui/releases'
+export const contributing = 'https://github.com/unovue/reka-ui/blob/main/CONTRIBUTING.md'
+export const discord = 'https://chat.unovue.com'
// export const mastodon = "https://elk.zone/m.webtoo.ls/@vitest";
// export const twitter = "https://twitter.com/vitest_dev";
/* Avatar/Image/Sponsors servers */
+export const sponsor = 'https://github.com/sponsors/zernonia'
export const preconnectLinks = [googleapis, gstatic]
export const preconnectHomeLinks = [googleapis, gstatic]
diff --git a/docs/.vitepress/plugins/ComponentPreview.ts b/docs/.vitepress/plugins/ComponentPreview.ts
index 286805cb3..c62bfebdb 100644
--- a/docs/.vitepress/plugins/ComponentPreview.ts
+++ b/docs/.vitepress/plugins/ComponentPreview.ts
@@ -37,12 +37,27 @@ export default function (md: MarkdownRenderer) {
}
// Define the regular expression to match the desired pattern
- const regex = /]+)\/>/g
// Iterate through the Markdown content and replace the pattern
- state.src = state.src.replace(regex, (match, componentName) => {
- const pathName = `../../components/demo/${componentName}`
- insertComponentImport(`import ${componentName} from '${pathName}/tailwind/index.vue'`)
+ state.src = state.src.replace(regex, (_, bindingValue) => {
+ // Define a regex pattern to match props and their values
+ const propPattern = /(\w+)="([^"]*)"/g
+
+ // Create an object to store the props and their values
+ const props: { [key: string]: string } = {}
+
+ // Use matchAll to find all matches in the input string
+ const matches = bindingValue.matchAll(propPattern)
+
+ // Iterate through the matches and populate the props object
+ for (const match of matches) {
+ const [, propName, propValue] = match
+ props[propName] = propValue
+ }
+
+ const pathName = props.type === 'example' ? `../../components/examples/${props.name}` : `../../../components/demo/${props.name}`
+ insertComponentImport(props.type === 'example' ? `import ${props.name} from '${pathName}/index.vue'` : `import ${props.name} from '${pathName}/tailwind/index.vue'`)
const index = state.tokens.findIndex(i => i.content.match(regex))
@@ -51,20 +66,22 @@ export default function (md: MarkdownRenderer) {
const childFiles = readdirSync(resolve(dirname(realPath ?? _path), pathName), { withFileTypes: false, recursive: true })
.map(file => typeof file === 'string' ? file.split(/[/\\]/).join('/') : file)
- const groupedFiles = childFiles.reduce((prev, curr) => {
- if (typeof curr !== 'string')
+ const groupedFiles = props.type === 'example'
+ ? { tailwind: childFiles }
+ : childFiles.reduce((prev, curr) => {
+ if (typeof curr !== 'string')
+ return prev
+ if (!curr.includes('/')) {
+ prev[curr] = []
+ }
+ else {
+ const folder = curr.split('/')[0]
+ prev[folder].push(curr)
+ }
return prev
- if (!curr.includes('/')) {
- prev[curr] = []
- }
- else {
- const folder = curr.split('/')[0]
- prev[folder].push(curr)
- }
- return prev
- }, {} as { [key: string]: string[] })
-
- state.tokens[index].content = `<${componentName} />`
+ }, {} as { [key: string]: string[] })
+
+ state.tokens[index].content = `<${props.name} />`
const dummyToken = new state.Token('', '', 0)
const tokenArray: Array = []
diff --git a/docs/.vitepress/plugins/HoverTransformer.ts b/docs/.vitepress/plugins/HoverTransformer.ts
new file mode 100644
index 000000000..36b4a15a2
--- /dev/null
+++ b/docs/.vitepress/plugins/HoverTransformer.ts
@@ -0,0 +1,120 @@
+import type { ShikiTransformer } from 'shiki'
+import type { Element, Text } from 'hast'
+import { components as componentsObj } from 'reka-ui/constant'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+function extractAndTransformData(tagName: string, raw: string): Element | null {
+ const match = raw.match(new RegExp(`<${tagName} :data="(\\[.*?\\])" \\/>`, 's'))
+ if (match && match[1]) {
+ return {
+ type: 'element',
+ tagName: 'link-hover-card-content',
+ properties: {
+ title: tagName.toLowerCase().replace('table', ''),
+ data: match[1].replace(/'/g, '"'),
+ },
+ children: [],
+ }
+ }
+ return null
+}
+
+export function createHoverTransformer(): ShikiTransformer {
+ const contentMap = new Map()
+
+ return {
+ name: 'custom:hover-card',
+ preprocess(code, options) {
+ // Reference
+ // https://github.com/shikijs/shiki/blob/5cf4b3c24baef51df44618e3d2652102fdddc794/packages/vitepress-twoslash/src/index.ts
+ // https://github.com/shikijs/shiki/blob/5cf4b3c24baef51df44618e3d2652102fdddc794/packages/twoslash/src/renderer-rich.ts
+ // https://github.com/shikijs/shiki/blob/5cf4b3c24baef51df44618e3d2652102fdddc794/packages/vitepress-twoslash/src/renderer-floating-vue.ts
+
+ if (options.lang === 'vue') {
+ // Disable v-pre for this transformer, because we need to render `LinkHoverCard`
+ const vPre = options.transformers?.find(i => i.name === 'vitepress:v-pre')
+ if (vPre)
+ options.transformers?.splice(options.transformers.indexOf(vPre), 1)
+ }
+ },
+ code(codeEl) {
+ if (this.options.lang !== 'vue')
+ return
+
+ const component = Object.values(componentsObj).flat()
+ // Build a map of tokens to their line and character position
+ const tokensMap: [line: number, charStart: number, charEnd: number, token: Element | Text, value: string][] = []
+ this.lines.forEach((lineEl, line) => {
+ let index = 0
+ for (const token of lineEl.children.flatMap(i => i.type === 'element' ? i.children || [] : []) as (Text | Element)[]) {
+ if ('value' in token && typeof token.value === 'string') {
+ const value = token.value
+ if (component.includes(value)) {
+ tokensMap.push([line, index, index + value.length, token, value])
+ index += value.length
+
+ if (!contentMap.get(value)) {
+ try {
+ const raw = readFileSync(join(__dirname, `../../content/meta/${value}.md`), 'utf8')
+
+ const content = ['PropsTable', 'EmitsTable', 'SlotsTable', 'MethodsTable']
+ .map(tag => extractAndTransformData(tag, raw))
+ .filter((element): element is Element => element !== null)
+
+ contentMap.set(value, content)
+ }
+ catch (err) {
+ // File doesn't exist
+ }
+ }
+ }
+ }
+ }
+ })
+
+ // We excluded vPre transformer during preprocess so that we can render `LinkHoverCard` component
+ // However this causes some code to be executed instead of just being rendered as string
+ // Temporary using hacky way to add `v-pre` to each line.
+ const ignoredPreLine = tokensMap.map(i => i[0])
+ this.lines.forEach((lineEl, line) => {
+ if (!ignoredPreLine.includes(line)) {
+ lineEl.properties['v-pre'] = ''
+ }
+ })
+
+ if (tokensMap.length) {
+ tokensMap.forEach(([,,,token, value]) => {
+ if (!contentMap.has(value))
+ return
+
+ Object.assign(token, {
+ type: 'element',
+ tagName: 'link-hover-card',
+ properties: {
+ name: value,
+ },
+ children: [
+ { ...token },
+ {
+ type: 'element',
+ tagName: 'template',
+ properties: {
+ 'v-slot:content': '{}',
+ },
+ children: [],
+ content: {
+ type: 'root',
+ children: contentMap.get(value) ?? [],
+ },
+ },
+ ],
+ } satisfies Element)
+ })
+ }
+ },
+ }
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index dc2e49c66..fd7c59b66 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,33 +1,18 @@
-// https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import Banner from '../components/Banner.vue'
-import HomePage from '../components/HomePage.vue'
-import HomePageDemo from '../components/HomePageDemo.vue'
-import Announcement from '../components/Announcement.vue'
import EmbedIframe from '../components/EmbedIframe.vue'
import ComponentPreview from '../components/ComponentPreview.vue'
import InstallationTabs from '../components/InstallationTabs.vue'
-import LayoutShowcase from '../layouts/showcase.vue'
-import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
import './style.css'
-import './tailwind.postcss'
import type { Theme } from 'vitepress'
+import Layout from '../custom/Layout.vue'
+
const regex = /\/(\w+)\.vue/
const baseModules = import.meta.glob('../../components/*.vue', { eager: true })
const tableModules = import.meta.glob('../../components/tables/*.vue', { eager: true })
export default {
- extends: DefaultTheme,
- Layout: () => {
- return h(DefaultTheme.Layout, null, {
- 'layout-top': () => h(Banner),
- 'home-hero-info-before': () => h(Announcement),
- // https://vitepress.dev/guide/extending-default-theme#layout-slots
- 'home-features-after': () => h('div', [h(HomePageDemo), h(HomePage)]),
- })
- },
+ // extends: DefaultTheme,
+ Layout,
enhanceApp({ app }) {
for (const path in baseModules)
app.component(path.match(regex)?.[1] ?? '', (baseModules[path] as any)?.default)
@@ -35,7 +20,6 @@ export default {
for (const path in tableModules)
app.component(path.match(regex)?.[1] ?? '', (tableModules[path] as any)?.default)
- app.component('Showcase', LayoutShowcase)
app.component('EmbedIframe', EmbedIframe)
app.component('ComponentPreview', ComponentPreview)
app.component('InstallationTabs', InstallationTabs)
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 0fee6d01f..52bf64a14 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -1,156 +1,229 @@
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
-/**
- * Colors
- * -------------------------------------------------------------------------- */
+@font-face {
+ font-family: "Geist";
+ src: url("/fonts/Geist[wght].ttf");
+}
+@font-face {
+ font-family: "GeistMono";
+ src: url("/fonts/GeistMono[wght].ttf");
+}
-:root {
- --vp-c-brand-1: #10b981;
- --vp-c-brand-light: #25a677;
- --vp-c-brand-lighter: #34d399;
- --vp-c-brand-lightest: #a7f3d0;
- --vp-c-brand-2: #059669;
- --vp-c-brand-darker: #047857;
- --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
- --vp-c-tip-soft: #5bb98c;
- --vp-c-tip-1: var(--vp-c-brand-darker);
+@layer base {
+ :root {
+ --font-geist-sans: "Geist";
+ --font-geist-mono: "GeistMono";
- --vp-code-color: rgba(60, 60, 67);
- --vp-code-block-bg: #292b30;
- --vp-code-block-bg-light: #1e1e20;
- --vp-code-block-divider-color: #000000;
- --vp-custom-block-tip-bg: #40644d29;
-}
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
-.dark {
- --vp-c-bg: #1e1e20;
- --vp-c-bg-alt: #161618;
- --vp-c-bg-soft: #252529;
- --vp-code-block-bg: #161618;
- --vp-c-tip-1: white;
+ --card: 60 8% 97%;
+ --card-foreground: 240 10% 3.9%;
-}
-/* --vp-c-bg-elv: #252529;
---vp-c-bg-elv-up: #313136;
---vp-c-bg-elv-down: #1e1e20;
---vp-c-bg-elv-mute: #313136;
---vp-c-bg-soft-up: #313136;
---vp-c-bg-soft-down: #1e1e20;
---vp-c-bg-soft-mute: #313136; */
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
+ --primary: 142.1 76.2% 36.3%;
+ --primary-foreground: 355.7 100% 97.3%;
-:root {
- --vp-button-brand-border: var(--vp-c-brand-light);
- --vp-button-brand-text: var(--vp-c-white);
- --vp-button-brand-bg: var(--vp-c-brand);
- --vp-button-brand-hover-border: var(--vp-c-brand-light);
- --vp-button-brand-hover-text: var(--vp-c-white);
- --vp-button-brand-hover-bg: var(--vp-c-brand-light);
- --vp-button-brand-active-border: var(--vp-c-brand-light);
- --vp-button-brand-active-text: var(--vp-c-white);
- --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-}
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
+ --muted: 40 6% 91%;
+ --muted-foreground: 240 3.8% 46.1%;
-:root {
- --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #11b981 30%, #6ff4cc);
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
- --vp-home-hero-image-background-image: linear-gradient(180deg, #8600c5 0%, #00f0ff 100%);
- --vp-home-hero-image-filter: blur(50px);
-}
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
-@media (min-width: 640px) {
- :root {
- --vp-home-hero-image-filter: blur(56px);
+ --code: 24 9.8% 10%; /* 0 0% 4%; */
+ --border:240 5.9% 90%;
+ --input:240 5.9% 90%;
+ --ring:142.1 76.2% 36.3%;
+ --radius: 0.5rem;
}
-}
-@media (min-width: 960px) {
- :root {
- --vp-home-hero-image-filter: blur(72px);
+ .dark {
+ --background:141 17% 5%;
+ --foreground:0 0% 95%;
+
+ --card:24 9.8% 10%;
+ --card-foreground:0 0% 95%;
+
+ --popover:0 0% 9%;
+ --popover-foreground:0 0% 95%;
+
+ --primary: 151 62% 59%;
+ --primary-foreground:144.9 80.4% 10%;
+
+ --secondary:240 3.7% 15.9%;
+ --secondary-foreground:0 0% 98%;
+
+ --muted:0 0% 15%;
+ --muted-foreground:168 2.6% 62.9%;
+
+ --accent:12 6.5% 15.1%;
+ --accent-foreground:0 0% 98%;
+
+ --destructive:0 62.8% 30.6%;
+ --destructive-foreground:0 85.7% 97.3%;
+
+ --border:240 3.7% 15.9%;
+ --input:240 3.7% 15.9%;
+ --ring:142.4 71.8% 29.2%;
}
-}
+ html {
+ -webkit-text-size-adjust: 100%;
+ font-variation-settings: normal;
+ }
-/* Fix the layout shift for Vitepress https://github.com/vuejs/vitepress/pull/1844/files */
-@media (min-width: 768px) {
- .VPContent, .VPLocalNav, .VPNav, .VPHome {
- width: 100vw !important;
+ html.dark {
+ color-scheme: dark;
}
- .VPFooter {
- width: 100vw !important;
- padding: 32px !important;
+
+ body {
+ @apply bg-background text-foreground min-h-screen antialiased;
+ /* font-feature-settings: "rlig" 1, "calt" 1; */
+ font-synthesis-weight: none;
+ text-rendering: optimizeLegibility;
+ }
+
+ /* Mobile tap highlight */
+ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+ html {
+ -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+ }
+
+ *:focus-visible {
+ @apply outline-primary;
}
-}
-@media (min-width: 1440px) {
- .VPSidebar {
- padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2)) !important;
- width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+
+ ::selection {
+ background: hsl(var(--primary) / 0.3);
}
-}
-body {
- overflow-x: hidden;
+
}
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-.DocSearch {
- --docsearch-primary-color: var(--vp-c-brand) !important;
+@layer utilities {
+ .step {
+ counter-increment: step;
+ }
+
+ .step:before {
+ @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+ @apply -ml-[50px] -mt-1;
+ content: counter(step);
+ }
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
}
-.blocks {
- max-height: 80vh;
- overflow: scroll;
+@media (max-width: 640px) {
+ .container {
+ @apply px-4;
+ }
}
-.vp-code-group {
- margin-top: 0px;
- color: var(--vp-code-block-color);
- border-radius: 0px;
+.custom .vp-code {
+ @apply border-none rounded-none;
}
+.vp-code {
+ @apply px-6 py-4 my-0 bg-[hsl(24_9.8%_10%)] border border-[hsl(0_0%_15%)] rounded-lg;
+
+ .diff {
+ @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6
+ }
+ .diff:before {
+ @apply absolute left-2.5
+ }
+
+ .diff.remove {
+ @apply bg-red-500/20 opacity-70
+ }
+ .diff.remove:before {
+ content: "-";
+ @apply text-red-500/80
+ }
+
+ .diff.add {
+ @apply bg-green-600/15
+ }
+ .diff.add:before {
+ content: "+";
+ @apply text-green-600/80
+ }
-.vp-doc h2 {
- @apply mb-2 md:mb-2.5 text-xl md:text-2xl;
+ .highlighted {
+ @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6 bg-[hsl(0_0%_15%)]
+ }
}
-.vp-doc h3 {
- @apply text-[17px] md:text-xl;
- font-weight: 600;
- margin-top: 40px;
+
+
+.custom-block {
+ @apply rounded-xl p-6 border border-muted;
}
-.vp-doc :not(pre) > code {
- font-size: max(12px, 85%);
- @apply dark:text-[var(--vp-c-brand)] dark:bg-[#0F291E];
+input {
+ @apply bg-foreground;
}
-.vp-doc div[class*='language-']:not(:where(.custom, .custom *)) {
- @apply border border-neutral-700/40;
+kbd {
+ @apply font-sans rounded-md px-1.5 py-[1px];
}
-.VPSidebarItem.is-active .indicator {
- @apply bg-[var(--vp-c-brand-1)]
+mark {
+ @apply bg-transparent text-foreground font-semibold;
}
-.content-container {
- @apply !max-w-[720px];
+[class*="language"] {
+ @apply relative mb-4;
+
+ & .lang {
+ @apply hidden;
+ }
+
+ /* Better impl for custom copy button */
+ & .copy {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
+ background-size: 16px;
+ background-position: 50% center;
+ background-repeat: no-repeat;
+ transition: border-color 0.25s ease 0s, background-color 0.25s ease 0s, opacity 0.25s ease 0s;
+ @apply absolute top-2 right-2 w-9 h-9 rounded-lg;
+ }
+
+ & .copied {
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0yMCA2TDkgMTdsLTUtNSIvPjwvc3ZnPg==");
+ }
}
-li > span {
- @apply text-[15px] md:text-base;
+@layer utilities {
+ .step {
+ counter-increment: step;
+ }
+
+ .step:before {
+ @apply absolute w-9 h-9 bg-muted rounded-lg font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+ @apply -ml-[50px] -mt-1;
+ content: counter(step);
+ }
}
.image-bg {
@@ -163,10 +236,6 @@ li > span {
flex: 1;
}
-button:focus-visible {
- @apply !outline-none;
-}
-
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.15s ease-in-out;
@@ -175,4 +244,4 @@ button:focus-visible {
.fade-enter-from,
.fade-leave-to {
opacity: 0;
-}
\ No newline at end of file
+}
diff --git a/docs/.vitepress/theme/tailwind.postcss b/docs/.vitepress/theme/tailwind.postcss
deleted file mode 100644
index bd6213e1d..000000000
--- a/docs/.vitepress/theme/tailwind.postcss
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
\ No newline at end of file
diff --git a/docs/codeeditor/index.ts b/docs/codeeditor/index.ts
index 9c99f9081..1d7bcbd4b 100644
--- a/docs/codeeditor/index.ts
+++ b/docs/codeeditor/index.ts
@@ -17,7 +17,7 @@ export function makeStackblitzParams(componentName: string, sources: Record) {
const dependencies = {
'vue': 'latest',
- 'radix-vue': version,
+ 'reka-ui': version,
'@radix-ui/colors': 'latest',
'@iconify/vue': 'latest',
}
@@ -84,7 +84,7 @@ function constructFiles(componentName: string, sources: Record)
const files = {
'package.json': {
content: {
- name: `radix-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
+ name: `reka-ui-${componentName.toLowerCase().replace(/ /g, '-')}`,
scripts: { start: 'vite' },
dependencies,
devDependencies,
diff --git a/docs/components/Badge.vue b/docs/components/Badge.vue
new file mode 100644
index 000000000..266a3521b
--- /dev/null
+++ b/docs/components/Badge.vue
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/docs/components/Callout.vue b/docs/components/Callout.vue
new file mode 100644
index 000000000..b74a48a53
--- /dev/null
+++ b/docs/components/Callout.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+ {{ title }}
+
+ {{ type }}
+
+
+
+
+
diff --git a/docs/components/CodeSandbox.vue b/docs/components/CodeSandbox.vue
index 0459ef818..8317a9557 100644
--- a/docs/components/CodeSandbox.vue
+++ b/docs/components/CodeSandbox.vue
@@ -1,25 +1,13 @@
@@ -44,13 +32,17 @@ onMounted(() => {
value="1"
>
-
+
diff --git a/docs/components/Demos.vue b/docs/components/Demos.vue
index 3b3b82c24..a5ba377e6 100644
--- a/docs/components/Demos.vue
+++ b/docs/components/Demos.vue
@@ -158,6 +158,9 @@ import DemoContainer from './DemoContainer.vue'
+
+
diff --git a/docs/components/Description.vue b/docs/components/Description.vue
index b3ca4e0f3..69f14a9d2 100644
--- a/docs/components/Description.vue
+++ b/docs/components/Description.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/docs/components/ExampleSection.vue b/docs/components/ExampleSection.vue
new file mode 100644
index 000000000..ba93774db
--- /dev/null
+++ b/docs/components/ExampleSection.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/docs/components/HeroCodeGroup.vue b/docs/components/HeroCodeGroup.vue
deleted file mode 100644
index 34fbaeac5..000000000
--- a/docs/components/HeroCodeGroup.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-
-
-
-
-
-
-
-
- {{ tab.label }}
-
-
-
-
-
- Tailwind CSS
-
-
-
-
-
-
-
-
-
-
-
- {{ open ? "Collapse code" : "Expand code" }}
-
-
-
-
-
-
diff --git a/docs/components/HeroContainer.vue b/docs/components/HeroContainer.vue
deleted file mode 100644
index d3eaa877a..000000000
--- a/docs/components/HeroContainer.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
-
-
diff --git a/docs/components/Highlights.vue b/docs/components/Highlights.vue
index fe3dd766a..2b6732994 100644
--- a/docs/components/Highlights.vue
+++ b/docs/components/Highlights.vue
@@ -9,29 +9,19 @@ const props = defineProps
()
-
-
-
diff --git a/docs/components/LinkHoverCard.vue b/docs/components/LinkHoverCard.vue
new file mode 100644
index 000000000..a925eb3f3
--- /dev/null
+++ b/docs/components/LinkHoverCard.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/components/LinkHoverCardContent.vue b/docs/components/LinkHoverCardContent.vue
new file mode 100644
index 000000000..c5da50810
--- /dev/null
+++ b/docs/components/LinkHoverCardContent.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+ {{ prop.name }}
+
+
+ {{ prop.typeSimple ? prop.typeSimple : prop.type }}
+
+
+ default: {{ prop.default }}
+
+
+ {{ prop.required ? "required" : null }}
+
+
+
+
+
diff --git a/docs/components/PresenceCallout.vue b/docs/components/PresenceCallout.vue
new file mode 100644
index 000000000..90430f71d
--- /dev/null
+++ b/docs/components/PresenceCallout.vue
@@ -0,0 +1,9 @@
+
+
+
+
+ Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.
+
+
diff --git a/docs/components/Stackblitz.vue b/docs/components/Stackblitz.vue
index f25c73ada..009015d8e 100644
--- a/docs/components/Stackblitz.vue
+++ b/docs/components/Stackblitz.vue
@@ -1,5 +1,4 @@
-
+
diff --git a/docs/components/Steps.vue b/docs/components/Steps.vue
new file mode 100644
index 000000000..a1d6cd8ea
--- /dev/null
+++ b/docs/components/Steps.vue
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/docs/components/Tags.vue b/docs/components/Tags.vue
new file mode 100644
index 000000000..b06dd614e
--- /dev/null
+++ b/docs/components/Tags.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/docs/components/Tooltip.vue b/docs/components/Tooltip.vue
index 0a3ee6d39..14fedb759 100644
--- a/docs/components/Tooltip.vue
+++ b/docs/components/Tooltip.vue
@@ -1,5 +1,5 @@
-
-
-
+
+
+
+
-
-
-
- {{ content }}
-
-
-
-
+ {{ content }}
+
+
+
diff --git a/docs/components/demo/Accordion/css/index.vue b/docs/components/demo/Accordion/css/index.vue
index 68790aa8d..e086d6040 100644
--- a/docs/components/demo/Accordion/css/index.vue
+++ b/docs/components/demo/Accordion/css/index.vue
@@ -1,5 +1,5 @@
@@ -8,7 +8,7 @@ import './styles.css'
diff --git a/docs/components/demo/AspectRatio/tailwind/index.vue b/docs/components/demo/AspectRatio/tailwind/index.vue
index a139139fe..f399e4bc3 100644
--- a/docs/components/demo/AspectRatio/tailwind/index.vue
+++ b/docs/components/demo/AspectRatio/tailwind/index.vue
@@ -1,13 +1,13 @@
-
+
diff --git a/docs/components/demo/Avatar/css/index.vue b/docs/components/demo/Avatar/css/index.vue
index d950b1a45..c02aec1c9 100644
--- a/docs/components/demo/Avatar/css/index.vue
+++ b/docs/components/demo/Avatar/css/index.vue
@@ -1,5 +1,5 @@
diff --git a/docs/components/demo/Avatar/tailwind/index.vue b/docs/components/demo/Avatar/tailwind/index.vue
index d94b95d8c..9405faaff 100644
--- a/docs/components/demo/Avatar/tailwind/index.vue
+++ b/docs/components/demo/Avatar/tailwind/index.vue
@@ -1,5 +1,5 @@
@@ -11,7 +11,7 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
alt="Colm Tuite"
/>
CT
@@ -24,14 +24,14 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
alt="Pedro Duarte"
/>
JD
-
-
+
+
PD
diff --git a/docs/components/demo/Calendar/css/index.vue b/docs/components/demo/Calendar/css/index.vue
index cfc095825..b7ea2774c 100644
--- a/docs/components/demo/Calendar/css/index.vue
+++ b/docs/components/demo/Calendar/css/index.vue
@@ -1,6 +1,6 @@
-
+
-
- Fruits
-
+
+
+
-
-
-
- {{ option }}
-
-
-
+
+ {{ group.name }}
+
-
-
- Vegetables
-
-
-
-
-
- {{ option }}
-
-
-
+
+
+
+ {{ option }}
+
+
+
+
diff --git a/docs/components/demo/Combobox/tailwind/index.vue b/docs/components/demo/Combobox/tailwind/index.vue
index bbb5056de..545fba480 100644
--- a/docs/components/demo/Combobox/tailwind/index.vue
+++ b/docs/components/demo/Combobox/tailwind/index.vue
@@ -1,21 +1,38 @@
-
+
@@ -26,55 +43,41 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
-
+
-
- Fruits
-
+
+
+
-
-
-
- {{ option }}
-
-
-
+
+ {{ group.name }}
+
-
-
- Vegetables
-
-
-
-
-
- {{ option }}
-
-
-
+
+
+
+ {{ option.name }}
+
+
+
+
diff --git a/docs/components/demo/ContextMenu/css/index.vue b/docs/components/demo/ContextMenu/css/index.vue
index 5e5aa3946..125f3679f 100644
--- a/docs/components/demo/ContextMenu/css/index.vue
+++ b/docs/components/demo/ContextMenu/css/index.vue
@@ -16,7 +16,7 @@ import {
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import './styles.css'
const checkboxOne = ref(false)
diff --git a/docs/components/demo/ContextMenu/tailwind/index.vue b/docs/components/demo/ContextMenu/tailwind/index.vue
index 60d2b33cb..130b17b5a 100644
--- a/docs/components/demo/ContextMenu/tailwind/index.vue
+++ b/docs/components/demo/ContextMenu/tailwind/index.vue
@@ -16,7 +16,7 @@ import {
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
const checkboxOne = ref(false)
const checkboxTwo = ref(false)
@@ -32,7 +32,7 @@ function handleClick() {
Right click here.
@@ -43,7 +43,7 @@ function handleClick() {
>
New Tab
More Tools
Save Page As…
Create Shortcut…
Name Window…
Developer Tools
@@ -99,7 +99,7 @@ function handleClick() {
New Window
New Private Window
More Tools
Save Page As…
Create Shortcut…
Name Window…
Developer Tools
More Tools
Save Page As…
Create Shortcut…
Name Window…
Developer Tools
More Tools
Save Page As…
Create Shortcut…
Name Window…
Developer Tools
@@ -251,7 +251,7 @@ function handleClick() {
Developer Tools
@@ -261,7 +261,7 @@ function handleClick() {
@@ -293,7 +293,7 @@ function handleClick() {
Pedro Duarte
diff --git a/docs/components/demo/DateField/css/index.vue b/docs/components/demo/DateField/css/index.vue
index bc97a9853..cdd303041 100644
--- a/docs/components/demo/DateField/css/index.vue
+++ b/docs/components/demo/DateField/css/index.vue
@@ -1,5 +1,5 @@
diff --git a/docs/components/demo/DateField/tailwind/index.vue b/docs/components/demo/DateField/tailwind/index.vue
index 5d1f1bdf5..02f7ec57e 100644
--- a/docs/components/demo/DateField/tailwind/index.vue
+++ b/docs/components/demo/DateField/tailwind/index.vue
@@ -1,18 +1,20 @@
Birthday
+ class="text-sm text-stone-700 dark:text-white"
+ for="birthday"
+ >
+ Birthday
+
{{ item.value }}
diff --git a/docs/components/demo/DatePicker/css/index.vue b/docs/components/demo/DatePicker/css/index.vue
index 133fbf597..daae66846 100644
--- a/docs/components/demo/DatePicker/css/index.vue
+++ b/docs/components/demo/DatePicker/css/index.vue
@@ -20,7 +20,7 @@ import {
DatePickerRoot,
DatePickerTrigger,
Label,
-} from 'radix-vue'
+} from 'reka-ui'
import './styles.css'
diff --git a/docs/components/demo/DatePicker/css/styles.css b/docs/components/demo/DatePicker/css/styles.css
index 27853bcea..c7625d0a3 100644
--- a/docs/components/demo/DatePicker/css/styles.css
+++ b/docs/components/demo/DatePicker/css/styles.css
@@ -121,7 +121,7 @@
width: 100%;
}
-.CalendarGridRow[data-radix-vue-calendar-month-view] {
+.CalendarGridRow[data-reka-calendar-month-view] {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
diff --git a/docs/components/demo/DatePicker/tailwind/index.vue b/docs/components/demo/DatePicker/tailwind/index.vue
index dc44f6dc0..ca059a0eb 100644
--- a/docs/components/demo/DatePicker/tailwind/index.vue
+++ b/docs/components/demo/DatePicker/tailwind/index.vue
@@ -20,22 +20,24 @@ import {
DatePickerRoot,
DatePickerTrigger,
Label,
-} from 'radix-vue'
+} from 'reka-ui'
Birthday
+ class="text-sm text-stone-700 dark:text-white"
+ for="birthday"
+ >
+ Birthday
+
{{ item.value }}
-
-
+
-
diff --git a/docs/components/demo/DateRangeField/css/index.vue b/docs/components/demo/DateRangeField/css/index.vue
index a51172f14..3e1dec7c9 100644
--- a/docs/components/demo/DateRangeField/css/index.vue
+++ b/docs/components/demo/DateRangeField/css/index.vue
@@ -1,5 +1,5 @@
diff --git a/docs/components/demo/DateRangeField/tailwind/index.vue b/docs/components/demo/DateRangeField/tailwind/index.vue
index f45226a9d..862f84859 100644
--- a/docs/components/demo/DateRangeField/tailwind/index.vue
+++ b/docs/components/demo/DateRangeField/tailwind/index.vue
@@ -1,20 +1,22 @@
Booking
+ for="booking"
+ class="text-stone-700 dark:text-white"
+ >
+ Booking
+
{{ item.value }}
@@ -54,7 +56,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
{{ item.value }}
diff --git a/docs/components/demo/DateRangePicker/css/index.vue b/docs/components/demo/DateRangePicker/css/index.vue
index 891a954ac..a55fbfe12 100644
--- a/docs/components/demo/DateRangePicker/css/index.vue
+++ b/docs/components/demo/DateRangePicker/css/index.vue
@@ -20,7 +20,7 @@ import {
DateRangePickerRoot,
DateRangePickerTrigger,
Label,
-} from 'radix-vue'
+} from 'reka-ui'
import './styles.css'
diff --git a/docs/components/demo/DateRangePicker/css/styles.css b/docs/components/demo/DateRangePicker/css/styles.css
index 27853bcea..c7625d0a3 100644
--- a/docs/components/demo/DateRangePicker/css/styles.css
+++ b/docs/components/demo/DateRangePicker/css/styles.css
@@ -121,7 +121,7 @@
width: 100%;
}
-.CalendarGridRow[data-radix-vue-calendar-month-view] {
+.CalendarGridRow[data-reka-calendar-month-view] {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
diff --git a/docs/components/demo/DateRangePicker/tailwind/index.vue b/docs/components/demo/DateRangePicker/tailwind/index.vue
index 7f5e5ac75..322ec60fd 100644
--- a/docs/components/demo/DateRangePicker/tailwind/index.vue
+++ b/docs/components/demo/DateRangePicker/tailwind/index.vue
@@ -20,22 +20,24 @@ import {
DateRangePickerRoot,
DateRangePickerTrigger,
Label,
-} from 'radix-vue'
+} from 'reka-ui'
Birthday
+ class="text-sm text-stone-700 dark:text-white"
+ for="booking"
+ >
+ Booking
+
-
+
-
-
diff --git a/docs/components/demo/Dialog/css/index.vue b/docs/components/demo/Dialog/css/index.vue
index b2fd8f84e..308ae0f20 100644
--- a/docs/components/demo/Dialog/css/index.vue
+++ b/docs/components/demo/Dialog/css/index.vue
@@ -8,7 +8,7 @@ import {
DialogRoot,
DialogTitle,
DialogTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import { Icon } from '@iconify/vue'
import './styles.css'
diff --git a/docs/components/demo/Dialog/tailwind/index.vue b/docs/components/demo/Dialog/tailwind/index.vue
index 3634cb62b..39148c9a3 100644
--- a/docs/components/demo/Dialog/tailwind/index.vue
+++ b/docs/components/demo/Dialog/tailwind/index.vue
@@ -8,14 +8,14 @@ import {
DialogRoot,
DialogTitle,
DialogTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import { Icon } from '@iconify/vue'
Edit profile
@@ -27,35 +27,35 @@ import { Icon } from '@iconify/vue'
Edit profile
-
+
Make changes to your profile here. Click save when you're done.
Name
Username
Save changes
diff --git a/docs/components/demo/DialogNested/tailwind/index.vue b/docs/components/demo/DialogNested/tailwind/index.vue
index 05d098e03..463304ef3 100644
--- a/docs/components/demo/DialogNested/tailwind/index.vue
+++ b/docs/components/demo/DialogNested/tailwind/index.vue
@@ -8,7 +8,7 @@ import {
DialogRoot,
DialogTitle,
DialogTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import { Icon } from '@iconify/vue'
@@ -28,7 +28,7 @@ import { Icon } from '@iconify/vue'
First Dialog
-
+
First dialog.
@@ -56,7 +56,7 @@ import { Icon } from '@iconify/vue'
Second Dialog
-
+
Second dialog.
diff --git a/docs/components/demo/DialogToaster/tailwind/index.vue b/docs/components/demo/DialogToaster/tailwind/index.vue
index 858c0e781..53fd99ddb 100644
--- a/docs/components/demo/DialogToaster/tailwind/index.vue
+++ b/docs/components/demo/DialogToaster/tailwind/index.vue
@@ -8,7 +8,7 @@ import {
DialogRoot,
DialogTitle,
DialogTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import { Icon } from '@iconify/vue'
import { Toaster, toast } from 'vue-sonner'
@@ -34,7 +34,7 @@ import { Toaster, toast } from 'vue-sonner'
Dialog Title
-
+
Dialog description
diff --git a/docs/components/demo/DropdownMenu/css/index.vue b/docs/components/demo/DropdownMenu/css/index.vue
index dda2c5047..bab265231 100644
--- a/docs/components/demo/DropdownMenu/css/index.vue
+++ b/docs/components/demo/DropdownMenu/css/index.vue
@@ -17,7 +17,7 @@ import {
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
-} from 'radix-vue'
+} from 'reka-ui'
import './styles.css'
const toggleState = ref(false)
@@ -275,7 +275,7 @@ function handleClick() {
-
-
-
+ 
+ 
+
+ 
+ 
