@octanejs/shadcn 0.0.6 → 0.0.7

package/src/bases/react-aria/ui/accordion.tsrx

@@ -0,0 +1,73 @@
+import { type OctaneNode } from 'octane';
+import {
+	DisclosurePanel as AccordionContentPrimitive,
+	Heading as AccordionHeaderPrimitive,
+	Disclosure as AccordionItemPrimitive,
+	DisclosureGroup as AccordionPrimitive,
+	Button as AccordionTriggerPrimitive,
+	type ButtonProps,
+	type DisclosureGroupProps,
+	type DisclosurePanelProps,
+	type DisclosureProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
+
+export function Accordion({ className, ...props }: DisclosureGroupProps) {
+	return <AccordionPrimitive
+		data-slot="accordion"
+		className={cn('flex w-full flex-col', className)}
+		{...props}
+	/>;
+}
+
+export function AccordionItem({ className, ...props }: DisclosureProps) {
+	return <AccordionItemPrimitive
+		data-slot="accordion-item"
+		className={cn('not-last:border-b', className)}
+		{...props}
+	/>;
+}
+
+export function AccordionTrigger({ className, children, ...props }: Omit<
+	ButtonProps,
+	'children'
+> & { children: OctaneNode }) {
+	return <AccordionHeaderPrimitive className="flex">
+		<AccordionTriggerPrimitive
+			slot="trigger"
+			data-slot="accordion-trigger"
+			className={cn(
+				'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+			/>
+			<ChevronUpIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+			/>
+		</AccordionTriggerPrimitive>
+	</AccordionHeaderPrimitive>;
+}
+
+export function AccordionContent({ className, children, ...props }: DisclosurePanelProps) {
+	return <AccordionContentPrimitive
+		data-slot="accordion-content"
+		className="h-(--disclosure-panel-height) overflow-clip text-sm transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up"
+		{...props}
+	>
+		<div
+			className={cn(
+				'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+				className,
+			)}
+		>{children}</div>
+	</AccordionContentPrimitive>;
+}

package/src/bases/react-aria/ui/alert-dialog.tsrx

@@ -0,0 +1,154 @@
+// OCTANE ADAPTATION: RAC does not publish a `ModalProps` type (upstream writes
+// `React.ComponentProps<typeof Modal>` for exactly that reason), so the one
+// prop borrowed from Modal is spelled out instead of picked.
+import { type OctaneNode } from 'octane';
+import {
+	Dialog as AlertDialogPrimitive,
+	DialogTrigger as AlertDialogTriggerPrimitive,
+	Heading,
+	ModalOverlay as ModalOverlayPrimitive,
+	Modal as ModalPrimitive,
+	type DialogProps as AlertDialogPrimitiveProps,
+	type DialogTriggerProps as AlertDialogTriggerPrimitiveProps,
+	type ModalOverlayProps as ModalOverlayPrimitiveProps,
+} from '@octanejs/aria/components';
+import type { HeadingProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Button } from './button.tsrx';
+
+export function AlertDialogTrigger({ ...props }: AlertDialogTriggerPrimitiveProps) {
+	return <AlertDialogTriggerPrimitive data-slot="alert-dialog-trigger" {...props} />;
+}
+
+export function AlertDialogOverlay({ className, children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & {
+	className?: string;
+	children: OctaneNode;
+}) {
+	return <ModalOverlayPrimitive
+		data-slot="alert-dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	>{children}</ModalOverlayPrimitive>;
+}
+
+export function AlertDialog({ className, size = 'default', children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & { isDismissable?: boolean } & {
+	className?: string;
+	size?: 'default' | 'sm';
+	children: OctaneNode;
+}) {
+	return <AlertDialogOverlay {...props}>
+		<ModalPrimitive
+			data-slot="alert-dialog-content"
+			data-size={size}
+			className={cn(
+				'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
+				className,
+			)}
+		>
+			<AlertDialogPrimitive
+				data-slot="alert-dialog"
+				role="alertdialog"
+				className="[display:inherit] [gap:inherit] outline-none"
+			>{children}</AlertDialogPrimitive>
+		</ModalPrimitive>
+	</AlertDialogOverlay>;
+}
+
+export function AlertDialogContent({ className, size = 'default', children, ...props }: Record<
+	string,
+	any
+>) {
+	return <AlertDialog className={className} size={size} {...props}>{children}</AlertDialog>;
+}
+
+export function AlertDialogHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-header"
+		className={cn(
+			'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogMedia({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-media"
+		className={cn(
+			'mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=\'size-\'])]:size-6',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogTitle({ className, ...props }: Omit<HeadingProps, 'slot'>) {
+	return <Heading
+		slot="title"
+		data-slot="alert-dialog-title"
+		className={cn(
+			'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
+	return <div
+		data-slot="alert-dialog-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogAction({ className, ...props }: Record<string, any>) {
+	return <Button
+		slot="close"
+		data-slot="alert-dialog-action"
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogCancel({
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
+}: Record<string, any>) {
+	return <Button
+		slot="close"
+		data-slot="alert-dialog-cancel"
+		className={cn(className)}
+		variant={variant}
+		size={size}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/alert.tsrx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+const alertVariants = cva(
+	'group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function Alert({ className, variant, ...props }: HostProps<'div'> & VariantProps<
+	typeof alertVariants
+>) {
+	return <div
+		data-slot="alert"
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>;
+}
+
+export function AlertTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-title"
+		className={cn(
+			'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDescription({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertAction({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-action"
+		className={cn('absolute top-2 right-2', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/aspect-ratio.tsrx

@@ -0,0 +1,13 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function AspectRatio({ ratio, className, ...props }: HostProps<'div'> & { ratio: number }) {
+	return <div
+		data-slot="aspect-ratio"
+		style={{
+			'--ratio': ratio,
+		} as Record<string, string | number>}
+		className={cn('relative aspect-(--ratio)', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/avatar.tsrx

@@ -0,0 +1,83 @@
+import { useState } from 'octane';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Avatar({ className, size = 'default', ...props }: HostProps<'div'> & {
+	size?: 'default' | 'sm' | 'lg';
+}) {
+	return <div
+		data-slot="avatar"
+		data-size={size}
+		className={cn(
+			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+type ImageState = 'loading' | 'loaded' | 'error';
+
+export function AvatarImage({ className, ...props }: HostProps<'img'>) {
+	const [state, setState] = useState<ImageState>(props.src ? 'loading' : 'error');
+	return <img
+		data-slot="avatar-image"
+		alt={props.alt || ''}
+		data-state={state}
+		onLoad={() => setState('loaded')}
+		onError={() => setState('error')}
+		className={cn(
+			'peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarFallback({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-fallback"
+		className={cn(
+			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarBadge({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="avatar-badge"
+		className={cn(
+			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarGroup({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-group"
+		className={cn(
+			'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarGroupCount({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-group-count"
+		className={cn(
+			'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+			className,
+		)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/badge.tsrx

@@ -0,0 +1,48 @@
+import { type OctaneNode } from 'octane';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export const badgeVariants = cva(
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function Badge({ className, variant = 'default', render, ...props }: HostProps<
+	'span'
+> & VariantProps<typeof badgeVariants> & {
+	render?: (props: Record<string, unknown>) => OctaneNode;
+}) {
+	if (render) {
+		const renderProps = {
+			'data-slot': 'badge',
+			'data-variant': variant,
+			className: cn(badgeVariants({ variant }), className),
+			...props,
+		};
+
+		return render(renderProps);
+	}
+
+	return <span
+		data-slot="badge"
+		data-variant={variant}
+		className={cn(badgeVariants({ variant }), className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/breadcrumb.tsrx

@@ -0,0 +1,100 @@
+// OCTANE ADAPTATION: octane's renderable type is `OctaneNode = unknown`, and a
+// union containing `unknown` collapses to `unknown` — so RAC's
+// `ChildrenOrFunction` cannot keep its render-prop arm distinguishable the way
+// React's precise `ReactNode` union does, and composeRenderProps has nothing to
+// infer its render values from. Annotating them here restores the upstream
+// parameter types without weakening the binding.
+import {
+	Breadcrumb as BreadcrumbPrimitive,
+	Breadcrumbs as BreadcrumbsPrimitive,
+	composeRenderProps,
+	Link as LinkPrimitive,
+	type BreadcrumbProps,
+	type BreadcrumbRenderProps,
+	type BreadcrumbsProps,
+	type LinkProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+
+export function Breadcrumb({ className, ...props }: HostProps<'nav'>) {
+	return <nav
+		aria-label="breadcrumb"
+		data-slot="breadcrumb"
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbList<T extends object>({ className, ...props }: BreadcrumbsProps<T>) {
+	return <BreadcrumbsPrimitive
+		data-slot="breadcrumb-list"
+		className={cn(
+			'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbItem({
+	className,
+	children,
+	separatorClassName,
+	...props
+}: BreadcrumbProps & { separatorClassName?: string }) {
+	return <BreadcrumbPrimitive
+		data-slot="breadcrumb-item"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	>{composeRenderProps(
+		children,
+		(children, { isCurrent }: BreadcrumbRenderProps) => <>
+			{children}
+			{!isCurrent &&
+				<span
+					data-slot="breadcrumb-separator"
+					role="presentation"
+					aria-hidden="true"
+					className={cn('[&>svg]:size-3.5', separatorClassName)}
+				>
+					<ChevronRightIcon />
+				</span>}
+		</>,
+	)}</BreadcrumbPrimitive>;
+}
+
+export function BreadcrumbLink({ className, render, ...props }: LinkProps) {
+	return <LinkPrimitive
+		data-slot="breadcrumb-link"
+		className={cn('transition-colors hover:text-foreground', className)}
+		render={render}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbPage({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="breadcrumb-page"
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn('font-normal text-foreground', className)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="breadcrumb-ellipsis"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+		{...props}
+	>
+		<MoreHorizontalIcon />
+		<span className="sr-only">More</span>
+	</span>;
+}

package/src/bases/react-aria/ui/button.tsrx

@@ -0,0 +1,96 @@
+// React Aria base button — structure from upstream `bases/aria/ui/button.tsx`
+// (RAC Button + Link primitives, both slotted as `button`, and the aria base's
+// data-variant/data-size attributes, which the Base UI base omits).
+//
+// STYLING: the cva strings are this package's Radix-base (default-Tailwind,
+// utilities-inlined) flavor rather than upstream's `cn-*` semantic hooks, so
+// this component styles against a plain Tailwind v4 build like the migrated
+// Radix families do. Upstream's own bases share button's class strings exactly,
+// so nothing is lost here — but that is NOT a general rule: where a selector
+// keys off a primitive-emitted attribute the bases legitimately diverge (the
+// Radix separator styles `data-horizontal:`, the aria one
+// `aria-[orientation=horizontal]:`). `tests/cross-base.test.ts` therefore pins
+// the structural contract — data-slot names and exported components — not class
+// equality.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Button as ButtonPrimitive, Link as LinkPrimitive } from '@octanejs/aria/components';
+import type {
+	ButtonProps as ButtonPrimitiveProps,
+	LinkProps as LinkPrimitiveProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export const buttonVariants = cva(
+	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+				outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3',
+				sm: 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3.5',
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-8',
+				'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=\'size-\'])]:size-3',
+				'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'className'> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export interface LinkButtonProps extends Omit<LinkPrimitiveProps, 'className'> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ButtonProps) @{
+	<ButtonPrimitive
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}
+
+export function LinkButton({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: LinkButtonProps) @{
+	<LinkPrimitive
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}