@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-muted-foreground text-sm', props.class)">
+		<slot />
+	</AlertDialogDescription>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-lg font-semibold', props.class)">
+		<slot />
+	</AlertDialogTitle>
+</template>

package/src/runtime/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from 'reka-ui';
+import { AlertDialogTrigger } from 'reka-ui';
+
+const props = defineProps<AlertDialogTriggerProps>();
+</script>
+
+<template>
+	<AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+		<slot />
+	</AlertDialogTrigger>
+</template>

package/src/runtime/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

package/src/runtime/components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from 'reka-ui';
+import { AspectRatio } from 'reka-ui';
+
+const props = defineProps<AspectRatioProps>();
+</script>
+
+<template>
+	<AspectRatio v-slot="slotProps" data-slot="aspect-ratio" v-bind="props">
+		<slot v-bind="slotProps" />
+	</AspectRatio>
+</template>

package/src/runtime/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue';

package/src/runtime/components/ui/avatar/Avatar.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { AvatarRoot } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<AvatarRoot data-slot="avatar" :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)">
+		<slot />
+	</AvatarRoot>
+</template>

package/src/runtime/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AvatarFallback } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)">
+		<slot />
+	</AvatarFallback>
+</template>

package/src/runtime/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui';
+import { AvatarImage } from 'reka-ui';
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+	<AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+		<slot />
+	</AvatarImage>
+</template>

package/src/runtime/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';

package/src/runtime/components/ui/badge/Badge.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { BadgeVariants } from '.';
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { badgeVariants } from '.';
+
+const props = defineProps<
+	PrimitiveProps & {
+		variant?: BadgeVariants['variant'];
+		class?: HTMLAttributes['class'];
+	}
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<Primitive data-slot="badge" :class="cn(badgeVariants({ variant }), props.class)" v-bind="delegatedProps">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/badge/index.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Badge } from './Badge.vue';
+
+export const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/runtime/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+		<slot />
+	</nav>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontal } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span data-slot="breadcrumb-ellipsis" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+		<slot>
+			<MoreHorizontal class="size-4" />
+		</slot>
+		<span class="sr-only">More</span>
+	</span>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+		<slot />
+	</li>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+	as: 'a',
+});
+</script>
+
+<template>
+	<Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('hover:text-foreground', props.class)">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<ol data-slot="breadcrumb-list" :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)">
+		<slot />
+	</ol>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span data-slot="breadcrumb-page" aria-disabled="true" aria-current="page" :class="cn('text-foreground font-normal', props.class)">
+		<slot />
+	</span>
+</template>

package/src/runtime/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { ChevronRight } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<li data-slot="breadcrumb-separator" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+		<slot>
+			<ChevronRight />
+		</slot>
+	</li>
+</template>

package/src/runtime/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

package/src/runtime/components/ui/button/Button.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '.';
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+interface Props extends PrimitiveProps {
+	color?: ButtonVariants['color'];
+	size?: ButtonVariants['size'];
+	iconOnly?: boolean;
+	loading?: boolean;
+	leftIcon?: string;
+	rightIcon?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: 'button',
+	color: 'brand',
+	size: 'base',
+	iconOnly: false,
+	loading: false,
+});
+</script>
+
+<template>
+	<Primitive data-slot="button" :data-color="color" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ color, size, iconOnly }), props.class)" :disabled="loading || undefined">
+		<Icon v-if="loading" name="lucide:loader-circle" class="animate-spin" />
+		<template v-else>
+			<Icon v-if="leftIcon" :name="leftIcon" />
+			<slot />
+			<Icon v-if="rightIcon" :name="rightIcon" />
+		</template>
+	</Primitive>
+</template>

package/src/runtime/components/ui/button/index.ts

@@ -0,0 +1,51 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Button } from './Button.vue';
+
+// ── Variants ─────────────────────────────────────────────────────────────────
+export const buttonVariants = cva('inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+	variants: {
+		color: {
+			// Solid
+			brand: 'bg-bg-brand dark:bg-bg-brand text-text-white shadow-xs hover:bg-bg-brand-strong dark:hover:bg-bg-brand-strong focus-visible:ring-brand-300 dark:focus-visible:ring-brand-700',
+			dynect: 'bg-bg-dynect dark:bg-bg-dynect text-text-white shadow-xs hover:bg-bg-dynect-strong dark:hover:bg-bg-dynect-strong focus-visible:ring-dynect-300 dark:focus-visible:ring-dynect-700',
+			success: 'bg-bg-success dark:bg-bg-success text-text-white shadow-xs hover:bg-bg-success-strong dark:hover:bg-bg-success-strong focus-visible:ring-emerald-300 dark:focus-visible:ring-emerald-700',
+			danger: 'bg-bg-danger dark:bg-bg-danger text-text-white shadow-xs hover:bg-bg-danger-strong dark:hover:bg-bg-danger-strong focus-visible:ring-rose-300 dark:focus-visible:ring-rose-700',
+			warning: 'bg-bg-warning dark:bg-bg-warning text-text-white shadow-xs hover:bg-bg-warning-strong dark:hover:bg-bg-warning-strong focus-visible:ring-orange-300 dark:focus-visible:ring-orange-700',
+			info: 'bg-bg-info dark:bg-bg-info text-text-white shadow-xs hover:bg-bg-info-strong dark:hover:bg-bg-info-strong focus-visible:ring-blue-300 dark:focus-visible:ring-blue-700',
+			dark: 'bg-bg-dark dark:bg-bg-dark text-text-white shadow-xs hover:bg-bg-dark-strong dark:hover:bg-bg-dark-strong focus-visible:ring-gray-400 dark:focus-visible:ring-gray-600',
+			// Subtle
+			secondary: 'bg-bg-secondary-medium dark:bg-bg-secondary-medium text-text-body dark:text-text-body ring ring-border-base-medium dark:ring-border-base-medium  hover:bg-bg-tertiary-medium dark:hover:bg-bg-tertiary-medium focus-visible:ring-gray-300 dark:focus-visible:ring-gray-600',
+			tertiary: 'bg-bg-tertiary-medium dark:bg-bg-tertiary-medium text-text-body dark:text-text-body border border-border-base dark:border-border-base shadow-xs hover:bg-bg-secondary dark:hover:bg-bg-secondary focus-visible:ring-gray-300 dark:focus-visible:ring-gray-600',
+			ghost: 'bg-transparent text-text-body dark:text-text-body hover:bg-[#0C0E1205] dark:hover:bg-[#FFFFFF05] focus-visible:ring-gray-300 dark:focus-visible:ring-gray-600',
+			link: 'bg-transparent text-text-fg-dynect dark:text-text-fg-dynect underline-offset-4 hover:bg-bg-secondary dark:hover:bg-bg-secondary hover:underline focus-visible:ring-dynect-300 dark:focus-visible:ring-dynect-600',
+			// Outlined
+			'outline-success':
+				'bg-transparent text-text-fg-success dark:text-text-fg-success border border-border-success dark:border-border-success shadow-xs hover:bg-bg-success-strong dark:hover:bg-bg-success-strong hover:text-text-white dark:hover:text-text-white focus-visible:ring-emerald-300 dark:focus-visible:ring-emerald-700',
+			'outline-danger':
+				'bg-transparent text-text-fg-danger dark:text-text-fg-danger border border-border-danger dark:border-border-danger shadow-xs hover:bg-bg-danger-strong dark:hover:bg-bg-danger-strong hover:text-text-white dark:hover:text-text-white focus-visible:ring-rose-300 dark:focus-visible:ring-rose-700',
+			'outline-warning':
+				'bg-transparent text-text-fg-warning-subtle dark:text-text-fg-warning-subtle border border-border-warning dark:border-border-warning shadow-xs hover:bg-bg-warning-strong dark:hover:bg-bg-warning-strong hover:text-text-white dark:hover:text-text-white focus-visible:ring-orange-300 dark:focus-visible:ring-orange-700',
+			'outline-info':
+				'bg-transparent text-text-fg-info dark:text-text-fg-info border border-border-info dark:border-border-info shadow-xs hover:bg-bg-info-strong dark:hover:bg-bg-info-strong hover:text-text-white dark:hover:text-text-white focus-visible:ring-blue-300 dark:focus-visible:ring-blue-700',
+		},
+		size: {
+			xs: 'gap-1.5 rounded-xl py-1.5 px-3 text-xs [&_svg]:size-3.5',
+			sm: 'gap-1.5 rounded-xl py-2 px-3 text-sm [&_svg]:size-4',
+			base: 'gap-1.5 rounded-xl py-2.5 px-4 text-sm [&_svg]:size-4',
+			lg: 'gap-1.5 rounded-xl py-3 px-5 text-base [&_svg]:size-4',
+			xl: 'gap-1.5 rounded-xl py-3.5 px-6 text-base [&_svg]:size-5',
+		},
+		iconOnly: { true: 'px-0' },
+	},
+	compoundVariants: [
+		{ iconOnly: true, size: 'xs', class: 'size-7.5' },
+		{ iconOnly: true, size: 'sm', class: 'size-9' },
+		{ iconOnly: true, size: 'base', class: 'size-10' },
+		{ iconOnly: true, size: 'lg', class: 'size-11' },
+		{ iconOnly: true, size: 'xl', class: 'size-12' },
+	],
+	defaultVariants: { color: 'brand', size: 'base', iconOnly: false },
+});
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/runtime/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { ButtonGroupVariants } from '.';
+import { cn } from '@/lib/utils';
+import { buttonGroupVariants } from '.';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	orientation?: ButtonGroupVariants['orientation'];
+}>();
+</script>
+
+<template>
+	<optgroup role="group" data-slot="button-group" :data-orientation="props.orientation" :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)">
+		<slot />
+	</optgroup>
+</template>

package/src/runtime/components/ui/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
+	orientation: 'vertical',
+});
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<Separator data-slot="button-group-separator" v-bind="delegatedProps" :orientation="props.orientation" :class="cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', props.class)" />
+</template>

package/src/runtime/components/ui/button-group/ButtonGroupText.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonGroupVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+interface Props extends PrimitiveProps {
+	class?: HTMLAttributes['class'];
+	orientation?: ButtonGroupVariants['orientation'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: 'div',
+});
+</script>
+
+<template>
+	<Primitive role="group" data-slot="button-group" :data-orientation="props.orientation" :as="as" :as-child="asChild" :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/button-group/index.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue';
+export { default as ButtonGroupText } from './ButtonGroupText.vue';
+
+export const buttonGroupVariants = cva(
+	"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+	{
+		variants: {
+			orientation: {
+				horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+				vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+			},
+		},
+		defaultVariants: {
+			orientation: 'horizontal',
+		},
+	}
+);
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;