Skip to content

Commit 3b0f694

Browse files
tombanksmetombanksme
committed
fix: upgrade radix-vue -> reka-ui
1 parent 5ae6361 commit 3b0f694

File tree

111 files changed

+2111
-2454
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

111 files changed

+2111
-2454
lines changed

‎package-lock.json

+571-1,000
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,16 @@
2525
"dependencies": {
2626
"@inertiajs/vue3": "^2.0.0-beta.3",
2727
"@vitejs/plugin-vue": "^5.2.1",
28-
"@vueuse/core": "^12.0.0",
28+
"@vueuse/core": "^12.8.2",
2929
"autoprefixer": "^10.4.20",
3030
"class-variance-authority": "^0.7.1",
3131
"clsx": "^2.1.1",
3232
"concurrently": "^9.0.1",
3333
"laravel-vite-plugin": "^1.0",
3434
"lucide": "^0.468.0",
3535
"lucide-vue-next": "^0.468.0",
36-
"radix-vue": "^1.9.11",
37-
"tailwind-merge": "^2.5.5",
36+
"reka-ui": "^2.1.1",
37+
"tailwind-merge": "^2.6.0",
3838
"tailwindcss": "^3.4.1",
3939
"tailwindcss-animate": "^1.0.7",
4040
"typescript": "^5.2.2",

‎resources/js/components/ui/avatar/Avatar.vue

+15-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { AvatarRoot } from 'radix-vue';
4-
import type { HTMLAttributes } from 'vue';
5-
import { avatarVariant, type AvatarVariants } from '.';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { AvatarRoot } from 'reka-ui'
5+
import { avatarVariant, type AvatarVariants } from '.'
66
7-
const props = withDefaults(
8-
defineProps<{
9-
class?: HTMLAttributes['class'];
10-
size?: AvatarVariants['size'];
11-
shape?: AvatarVariants['shape'];
12-
}>(),
13-
{
14-
size: 'sm',
15-
shape: 'circle',
16-
},
17-
);
7+
const props = withDefaults(defineProps<{
8+
class?: HTMLAttributes['class']
9+
size?: AvatarVariants['size']
10+
shape?: AvatarVariants['shape']
11+
}>(), {
12+
size: 'sm',
13+
shape: 'circle',
14+
})
1815
</script>
1916

2017
<template>
21-
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
22-
<slot />
23-
</AvatarRoot>
18+
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
19+
<slot />
20+
</AvatarRoot>
2421
</template>

‎resources/js/components/ui/avatar/AvatarFallback.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
2-
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
2+
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
33
4-
const props = defineProps<AvatarFallbackProps>();
4+
const props = defineProps<AvatarFallbackProps>()
55
</script>
66

77
<template>
8-
<AvatarFallback v-bind="props">
9-
<slot />
10-
</AvatarFallback>
8+
<AvatarFallback v-bind="props">
9+
<slot />
10+
</AvatarFallback>
1111
</template>

‎resources/js/components/ui/avatar/AvatarImage.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<script setup lang="ts">
2-
import { AvatarImage, type AvatarImageProps } from 'radix-vue';
2+
import type { AvatarImageProps } from 'reka-ui'
3+
import { AvatarImage } from 'reka-ui'
34
4-
const props = defineProps<AvatarImageProps>();
5+
const props = defineProps<AvatarImageProps>()
56
</script>
67

78
<template>
8-
<AvatarImage v-bind="props" class="h-full w-full object-cover" />
9+
<AvatarImage v-bind="props" class="h-full w-full object-cover">
10+
<slot />
11+
</AvatarImage>
912
</template>

‎resources/js/components/ui/avatar/index.ts

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { cva, type VariantProps } from 'class-variance-authority';
1+
import { cva, type VariantProps } from 'class-variance-authority'
22

3-
export { default as Avatar } from './Avatar.vue';
4-
export { default as AvatarFallback } from './AvatarFallback.vue';
5-
export { default as AvatarImage } from './AvatarImage.vue';
3+
export { default as Avatar } from './Avatar.vue'
4+
export { default as AvatarFallback } from './AvatarFallback.vue'
5+
export { default as AvatarImage } from './AvatarImage.vue'
66

77
export const avatarVariant = cva(
8-
'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
9-
{
10-
variants: {
11-
size: {
12-
sm: 'h-10 w-10 text-xs',
13-
base: 'h-16 w-16 text-2xl',
14-
lg: 'h-32 w-32 text-5xl',
15-
},
16-
shape: {
17-
circle: 'rounded-full',
18-
square: 'rounded-md',
19-
},
20-
},
8+
'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
9+
{
10+
variants: {
11+
size: {
12+
sm: 'h-10 w-10 text-xs',
13+
base: 'h-16 w-16 text-2xl',
14+
lg: 'h-32 w-32 text-5xl',
15+
},
16+
shape: {
17+
circle: 'rounded-full',
18+
square: 'rounded-md',
19+
},
2120
},
22-
);
21+
},
22+
)
2323

24-
export type AvatarVariants = VariantProps<typeof avatarVariant>;
24+
export type AvatarVariants = VariantProps<typeof avatarVariant>

‎resources/js/components/ui/breadcrumb/Breadcrumb.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts" setup>
2-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
33
44
const props = defineProps<{
5-
class?: HTMLAttributes['class'];
6-
}>();
5+
class?: HTMLAttributes['class']
6+
}>()
77
</script>
88

99
<template>
10-
<nav aria-label="breadcrumb" :class="props.class">
11-
<slot />
12-
</nav>
10+
<nav aria-label="breadcrumb" :class="props.class">
11+
<slot />
12+
</nav>
1313
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import { MoreHorizontal } from 'lucide-vue-next';
4-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { MoreHorizontal } from 'lucide-vue-next'
55
66
const props = defineProps<{
7-
class?: HTMLAttributes['class'];
8-
}>();
7+
class?: HTMLAttributes['class']
8+
}>()
99
</script>
1010

1111
<template>
12-
<span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
13-
<slot>
14-
<MoreHorizontal class="h-4 w-4" />
15-
</slot>
16-
<span class="sr-only">More</span>
17-
</span>
12+
<span
13+
role="presentation"
14+
aria-hidden="true"
15+
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
16+
>
17+
<slot>
18+
<MoreHorizontal class="h-4 w-4" />
19+
</slot>
20+
<span class="sr-only">More</span>
21+
</span>
1822
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbItem.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
44
55
const props = defineProps<{
6-
class?: HTMLAttributes['class'];
7-
}>();
6+
class?: HTMLAttributes['class']
7+
}>()
88
</script>
99

1010
<template>
11-
<li :class="cn('inline-flex items-center gap-1.5', props.class)">
12-
<slot />
13-
</li>
11+
<li
12+
:class="cn('inline-flex items-center gap-1.5', props.class)"
13+
>
14+
<slot />
15+
</li>
1416
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbLink.vue

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import { Primitive, type PrimitiveProps } from 'radix-vue';
4-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { Primitive, type PrimitiveProps } from 'reka-ui'
55
66
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
7-
as: 'a',
8-
});
7+
as: 'a',
8+
})
99
</script>
1010

1111
<template>
12-
<Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
13-
<slot />
14-
</Primitive>
12+
<Primitive
13+
:as="as"
14+
:as-child="asChild"
15+
:class="cn('transition-colors hover:text-foreground', props.class)"
16+
>
17+
<slot />
18+
</Primitive>
1519
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbList.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
44
55
const props = defineProps<{
6-
class?: HTMLAttributes['class'];
7-
}>();
6+
class?: HTMLAttributes['class']
7+
}>()
88
</script>
99

1010
<template>
11-
<ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
12-
<slot />
13-
</ol>
11+
<ol
12+
:class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
13+
>
14+
<slot />
15+
</ol>
1416
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbPage.vue

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
44
55
const props = defineProps<{
6-
class?: HTMLAttributes['class'];
7-
}>();
6+
class?: HTMLAttributes['class']
7+
}>()
88
</script>
99

1010
<template>
11-
<span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
12-
<slot />
13-
</span>
11+
<span
12+
role="link"
13+
aria-disabled="true"
14+
aria-current="page"
15+
:class="cn('font-normal text-foreground', props.class)"
16+
>
17+
<slot />
18+
</span>
1419
</template>

‎resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<script lang="ts" setup>
2-
import { cn } from '@/lib/utils';
3-
import { ChevronRight } from 'lucide-vue-next';
4-
import type { HTMLAttributes } from 'vue';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { ChevronRight } from 'lucide-vue-next'
55
66
const props = defineProps<{
7-
class?: HTMLAttributes['class'];
8-
}>();
7+
class?: HTMLAttributes['class']
8+
}>()
99
</script>
1010

1111
<template>
12-
<li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
13-
<slot>
14-
<ChevronRight />
15-
</slot>
16-
</li>
12+
<li
13+
role="presentation"
14+
aria-hidden="true"
15+
:class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
16+
>
17+
<slot>
18+
<ChevronRight />
19+
</slot>
20+
</li>
1721
</template>

‎resources/js/components/ui/breadcrumb/index.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
export { default as Breadcrumb } from './Breadcrumb.vue';
2-
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
3-
export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
4-
export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
5-
export { default as BreadcrumbList } from './BreadcrumbList.vue';
6-
export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
7-
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
1+
export { default as Breadcrumb } from './Breadcrumb.vue'
2+
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
3+
export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
4+
export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
5+
export { default as BreadcrumbList } from './BreadcrumbList.vue'
6+
export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
7+
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

‎resources/js/components/ui/button/Button.vue

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { Primitive, type PrimitiveProps } from 'radix-vue';
4-
import type { HTMLAttributes } from 'vue';
5-
import { buttonVariants, type ButtonVariants } from '.';
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { Primitive, type PrimitiveProps } from 'reka-ui'
5+
import { type ButtonVariants, buttonVariants } from '.'
66
77
interface Props extends PrimitiveProps {
8-
variant?: ButtonVariants['variant'];
9-
size?: ButtonVariants['size'];
10-
class?: HTMLAttributes['class'];
8+
variant?: ButtonVariants['variant']
9+
size?: ButtonVariants['size']
10+
class?: HTMLAttributes['class']
1111
}
1212
1313
const props = withDefaults(defineProps<Props>(), {
14-
as: 'button',
15-
});
14+
as: 'button',
15+
})
1616
</script>
1717

1818
<template>
19-
<Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
20-
<slot />
21-
</Primitive>
19+
<Primitive
20+
:as="as"
21+
:as-child="asChild"
22+
:class="cn(buttonVariants({ variant, size }), props.class)"
23+
>
24+
<slot />
25+
</Primitive>
2226
</template>

0 commit comments

Comments
 (0)