@octanejs/shadcn 0.0.8 → 0.0.9

package/src/bases/base-ui/ui/pagination.tsrx

@@ -0,0 +1,125 @@
+// Base UI base pagination — TRANSCRIBED from upstream's `bases/base-ui/ui/pagination.tsx`
+// (maintainer-supplied), class strings verbatim. There is no pagination primitive in any base;
+// the family is host elements plus button styling, and the only base-specific question is how the
+// link acquires that styling.
+//
+// THE LINK GOES THROUGH `Button`, NOT THROUGH `buttonVariants`. The radix base writes
+// `<Button asChild><a/></Button>`, where Slot is a pure prop-merger that layers no button
+// semantics onto the anchor. Base UI has no Slot, so upstream uses the `render` prop plus
+// `nativeButton={false}` — the documented escape for "this Button is not a native `<button>`".
+//
+// THE TWO BASES THEREFORE DIVERGE OBSERVABLY, and that is upstream's call, not a porting bug:
+// this base's links carry `role="button"` and `tabindex="0"` (verified by rendering) where the
+// radix base's carry neither. `nativeButton={false}` is what keeps keyboard activation working on
+// a non-button element, which is the trade upstream chose. Do not "fix" this toward radix by
+// dropping Button for a bare `buttonVariants()` anchor: it diverges from the source, and it also
+// drops the key handling Base UI attaches.
+//
+// Octane adaptations: lucide-react → @octanejs/lucide, and children are passed explicitly rather
+// than riding along in the props spread — React's `ComponentProps<"a">` carries `children`, octane
+// routes it through its own channel.
+import { createElement, type OctaneNode } from 'octane';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import { Button, type ButtonProps } from './button.tsrx';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Pagination({ className, ...props }: Props) @{
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		data-slot="pagination"
+		className={cn('mx-auto flex w-full justify-center', className)}
+		{...props}
+	/>
+}
+
+export function PaginationContent({ className, ...props }: Props) @{
+	<ul
+		data-slot="pagination-content"
+		className={cn('flex items-center gap-0.5', className)}
+		{...props}
+	/>
+}
+
+export function PaginationItem(props: Record<string, unknown>) @{
+	<li data-slot="pagination-item" {...props} />
+}
+
+export interface PaginationLinkProps extends Record<string, unknown> {
+	className?: string;
+	isActive?: boolean;
+	size?: ButtonProps['size'];
+	children?: OctaneNode;
+}
+
+export function PaginationLink({
+	className,
+	isActive,
+	size = 'icon',
+	children,
+	...props
+}: PaginationLinkProps) {
+	return createElement(Button, {
+		variant: isActive ? 'outline' : 'ghost',
+		size,
+		className: cn(className),
+		nativeButton: false,
+		render: createElement('a', {
+			'aria-current': isActive ? 'page' : undefined,
+			'data-slot': 'pagination-link',
+			'data-active': isActive,
+			...props,
+			children,
+		}),
+	});
+}
+
+export function PaginationPrevious({
+	className,
+	text = 'Previous',
+	...props
+}: PaginationLinkProps & {
+	text?: string;
+}) @{
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn('pl-1.5!', className)}
+		{...props}
+	>
+		<ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+		<span className="hidden sm:block">{text as string}</span>
+	</PaginationLink>
+}
+
+export function PaginationNext({ className, text = 'Next', ...props }: PaginationLinkProps & {
+	text?: string;
+}) @{
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn('pr-1.5!', className)}
+		{...props}
+	>
+		<span className="hidden sm:block">{text as string}</span>
+		<ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+	</PaginationLink>
+}
+
+export function PaginationEllipsis({ className, ...props }: Props) @{
+	<span
+		aria-hidden="true"
+		data-slot="pagination-ellipsis"
+		className={cn(
+			'flex size-8 items-center justify-center [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	>
+		<MoreHorizontalIcon />
+		<span className="sr-only">More pages</span>
+	</span>
+}

package/src/bases/base-ui/ui/popover.tsrx

@@ -21,6 +21,11 @@
 //
 // UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
 // transcribed from upstream's Base UI source.
+// POSITIONING PROPS BELONG TO THE POSITIONER, NOT THE POPUP. Radix has one `Content` element that
+// takes them all; Base UI splits positioning into its own layer, so anything forwarded to `Popup`
+// instead is inert — `side="top"` silently leaves the popup on the default side, and the prop lands
+// on the DOM as an invalid attribute. They are destructured and routed explicitly.
+//
 import { createElement } from 'octane';
 import { Popover as PopoverPrimitive } from '@octanejs/base-ui/popover';
 
@@ -36,22 +41,56 @@ export function PopoverTrigger(props: Record<string, unknown>) @{
 	<PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
-export interface PopoverContentProps extends Record<string, unknown> {
-	className?: string;
-	align?: 'start' | 'center' | 'end';
+export interface BaseUiPositioningProps {
+	/** Forwarded to the Positioner; see the note at the top of this file. */
+	side?: 'top' | 'right' | 'bottom' | 'left';
 	sideOffset?: number;
+	align?: 'start' | 'center' | 'end';
+	alignOffset?: number;
+	anchor?: unknown;
+	positionMethod?: 'absolute' | 'fixed';
+	collisionBoundary?: unknown;
+	collisionPadding?: unknown;
+	collisionAvoidance?: unknown;
+	arrowPadding?: number;
+	sticky?: boolean;
+	disableAnchorTracking?: boolean;
+}
+
+export interface PopoverContentProps extends Record<string, unknown>, BaseUiPositioningProps {
+	className?: string;
 }
 
 export function PopoverContent({
 	className,
 	align = 'center',
 	sideOffset = 4,
+	side,
+	alignOffset,
+	anchor,
+	positionMethod,
+	collisionBoundary,
+	collisionPadding,
+	collisionAvoidance,
+	arrowPadding,
+	sticky,
+	disableAnchorTracking,
 	...props
 }: PopoverContentProps) {
 	return createElement(PopoverPrimitive.Portal, {
 		children: createElement(PopoverPrimitive.Positioner, {
-			align,
+			side,
 			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			positionMethod,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			arrowPadding,
+			sticky,
+			disableAnchorTracking,
 			children: createElement(PopoverPrimitive.Popup, {
 				'data-slot': 'popover-content',
 				className: cn(

package/src/bases/base-ui/ui/progress.tsrx

@@ -0,0 +1,46 @@
+// Base UI base progress — runs on @octanejs/base-ui's Progress.
+//
+// TWO STRUCTURAL DIFFERENCES FROM THE RADIX BASE, both verified by rendering the primitive
+// rather than inferred:
+//
+//   1. THERE IS A TRACK PART. Radix goes Root > Indicator; Base UI goes Root > Track > Indicator,
+//      and the Track is what carries the rail. Rendering an Indicator directly under Root would
+//      put it outside the element the primitive sizes against.
+//
+//   2. THE INDICATOR SIZES ITSELF. Radix leaves the fill entirely to the consumer, which is why
+//      its base ships `style={{ transform: translateX(-${100 - value}%) }}`. Base UI's Indicator
+//      already emits `width: <value>%` inline. Carrying the radix transform across would shift a
+//      correctly-sized bar sideways by the same amount again — a double offset, worst at the
+//      midpoint and invisible at 0% and 100%.
+//
+// So `value` is forwarded to the Root (which owns the aria-valuenow/valuetext contract) and NOT
+// turned into a transform.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source; the rail/fill classes are split across Track and
+// Indicator to match the extra part.
+import { Progress as ProgressPrimitive } from '@octanejs/base-ui/progress';
+
+import { cn } from '../../../lib/utils';
+
+export interface ProgressProps extends Record<string, unknown> {
+	className?: string;
+	value?: number | null;
+}
+
+export function Progress({ className, value, ...props }: ProgressProps) @{
+	// Base UI's Root types `value` as `number | null` where shadcn's prop is optional, and null is
+	// its documented indeterminate state — so an omitted value maps to null rather than being
+	// forwarded as undefined.
+	<ProgressPrimitive.Root data-slot="progress" value={value ?? null} {...props}>
+		<ProgressPrimitive.Track
+			data-slot="progress-track"
+			className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="h-full bg-primary transition-all"
+			/>
+		</ProgressPrimitive.Track>
+	</ProgressPrimitive.Root>
+}

package/src/bases/base-ui/ui/radio-group.tsrx

@@ -10,6 +10,18 @@
 // renders a `<span role="radio">`, which is never `:disabled`, so the pseudo-class variant could
 // never match. The primitive publishes `data-disabled` instead.
 //
+// THE ROOT MUST CARRY ITS OWN DISPLAY, and this is the second consequence of that same `<span>`.
+// Radix's radio root is a `<button>`, which is `display: inline-block` by default, so its class
+// string never needed one and `size-4` just worked. A bare `<span>` is `display: inline`, where
+// width and height are IGNORED — the box collapses and only `border` paints, rendering the control
+// as a thin vertical bar beside its label rather than a circle. The React Aria base hit the same
+// thing (its root is not a button either) and carries `relative flex` for it; this base copied the
+// radix string and lost it. Hence `relative flex … items-center justify-center` here.
+//
+// The indicator is `size-full` rather than `relative` so the dot, which positions itself with
+// `absolute … -translate-1/2`, anchors to the ROOT's 16px box — matching the React Aria base. Left
+// `relative`, it would anchor to a zero-sized flex item and sit off-centre.
+//
 // UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
 // rather than upstream's Base UI source.
 import { RadioGroup as RadioGroupPrimitive } from '@octanejs/base-ui/radio-group';
@@ -33,14 +45,14 @@ export function RadioGroupItem({ className, ...props }: ItemProps) @{
 	<RadioPrimitive.Root
 		data-slot="radio-group-item"
 		className={cn(
-			'aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+			'relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
 			className,
 		)}
 		{...props}
 	>
 		<RadioPrimitive.Indicator
 			data-slot="radio-group-indicator"
-			className="relative flex items-center justify-center"
+			className="flex size-full items-center justify-center"
 		>
 			<CircleIcon
 				className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"

package/src/bases/base-ui/ui/sheet.tsrx

@@ -0,0 +1,121 @@
+// Base UI base sheet — TRANSCRIBED from upstream's `bases/base-ui/ui/sheet.tsx`
+// (maintainer-supplied), class strings verbatim. Runs on @octanejs/base-ui's Dialog:
+// Overlay -> Backdrop, Content -> Popup.
+//
+// UPSTREAM ANIMATES THIS WITH CSS TRANSITIONS, NOT KEYFRAMES, which is why the file is transcribed
+// rather than derived. Base UI publishes `data-starting-style` and `data-ending-style` (see
+// utils/popupStateMapping.ts) and this source drives motion off them with a plain `transition`,
+// where the radix base uses `animate-in` / `animate-out` keyframe utilities.
+//
+// A derived version of this file did jump visibly on close, which is what prompted the
+// transcription. Do NOT infer from that a general rule that keyframes cannot work on Base UI: the
+// same mapping also emits `data-open` and `data-closed`, so `data-closed:animate-out` does match,
+// and the precise cause of that jump was never isolated. What is established here is only what
+// upstream ships, which is this.
+//
+// So the motion here reads: `transition duration-200` plus per-side
+// `data-starting-style:translate-*` / `data-ending-style:translate-*` and an opacity pair —
+// the element sits offset-and-transparent before open and after close, and transitions to its
+// resting position in between.
+//
+// ONE DEPARTURE FROM THE SOURCE: upstream's title carries `cn-font-heading`, a semantic hook from
+// the pinned cn-* system. This package ships the utilities-inlined flavor, the react-aria base
+// drops the same class, and nothing defines it here (0 occurrences in the built CSS).
+//
+// Octane adaptations: no `"use client"`; refs are props.
+import { type OctaneNode } from 'octane';
+import { Dialog as SheetPrimitive } from '@octanejs/base-ui/dialog';
+import { XIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Sheet(props: Record<string, unknown>) @{
+	<SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+export function SheetTrigger(props: Record<string, unknown>) @{
+	<SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+export function SheetClose(props: Record<string, unknown>) @{
+	<SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export function SheetPortal(props: Record<string, unknown>) @{
+	<SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+export function SheetOverlay({ className, ...props }: Props) @{
+	<SheetPrimitive.Backdrop
+		data-slot="sheet-overlay"
+		className={cn(
+			'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export interface SheetContentProps extends Props {
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	showCloseButton?: boolean;
+}
+
+export function SheetContent(props: SheetContentProps) @{
+	const { className, side = 'right', showCloseButton = true, children: _children, ...rest } = props;
+
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Popup
+			data-slot="sheet-content"
+			data-side={side}
+			className={cn(
+				'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+				className,
+			)}
+			{...rest}
+		>
+			{props.children}
+			@if (showCloseButton) {
+				<SheetPrimitive.Close
+					data-slot="sheet-close"
+					render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</Button>}
+				/>
+			}
+		</SheetPrimitive.Popup>
+	</SheetPortal>
+}
+
+export function SheetHeader({ className, ...props }: Props) @{
+	<div data-slot="sheet-header" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />
+}
+
+export function SheetFooter({ className, ...props }: Props) @{
+	<div
+		data-slot="sheet-footer"
+		className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+		{...props}
+	/>
+}
+
+export function SheetTitle({ className, ...props }: Props) @{
+	<SheetPrimitive.Title
+		data-slot="sheet-title"
+		className={cn('text-base font-medium text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function SheetDescription({ className, ...props }: Props) @{
+	<SheetPrimitive.Description
+		data-slot="sheet-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/slider.tsrx

@@ -0,0 +1,111 @@
+// Base UI base slider — TRANSCRIBED from upstream's `bases/base-ui/ui/slider.tsx`
+// (maintainer-supplied). Structure, part tree and class strings follow that source.
+//
+// THE PART TREE IS NOT THE RADIX ONE:
+//
+//     radix     Root >           Track > Range,       Thumb a SIBLING of Track (under Root)
+//     Base UI   Root > Control > Track > Indicator,   Thumb a SIBLING of Track (under Control)
+//
+// The thumb sits OUTSIDE the track in both. That matters: the track carries `overflow-hidden` —
+// which is what gives the fill its rounded ends — and is only `h-1` tall, so a round thumb nested
+// inside it is clipped to a 4px sliver that reads as a missing thumb. Base UI positions the thumb
+// from slider context rather than from its DOM parent (`inset-inline-start: <pct>` plus a
+// centering `translate`), so Control is the box those percentages resolve against.
+//
+// ONE DEPARTURE FROM THE SOURCE, AND IT IS DELIBERATE: upstream writes its orientation variants as
+// `data-horizontal:` / `data-vertical:`. No primitive in @octanejs/base-ui emits those attributes —
+// this one publishes `data-orientation="horizontal" | "vertical"` on Root, Control, Track,
+// Indicator and Thumb (verified by rendering it), so the variants are written as
+// `data-[orientation=…]:` instead. Copied verbatim, upstream's spelling would match nothing and the
+// track would render with no height at all: an invisible rail. Whether the primitive should be
+// emitting the newer attribute names is a question about @octanejs/base-ui, not about this file.
+//
+// `thumbAlignment="edge"` is forwarded as upstream does: it insets the thumb so the two extremes
+// sit flush with the ends of the track instead of overhanging them.
+//
+// Thumbs are composed with createElement for the same reason as the radix base: one per entry of
+// `_values`, and mapped descriptors are octane's channel for computed children.
+import { createElement, useMemo } from 'octane';
+import { Slider as SliderPrimitive } from '@octanejs/base-ui/slider';
+
+import { cn } from '../../../lib/utils';
+
+export interface SliderProps extends Record<string, unknown> {
+	className?: string;
+	defaultValue?: number | number[];
+	value?: number | number[];
+	min?: number;
+	max?: number;
+}
+
+export function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: SliderProps) {
+	// This drives HOW MANY THUMBS get rendered, so a value shape it fails to recognise is a visible
+	// bug rather than a type nicety.
+	//
+	// DEPARTS FROM THE TRANSCRIBED SOURCE, deliberately. Upstream only tests `Array.isArray` and
+	// otherwise falls back to `[min, max]` — but Base UI's Slider accepts a SCALAR for a
+	// single-value slider, and upstream types these props as `SliderPrimitive.Root.Props`, which
+	// permits one. So `defaultValue={30}` renders two thumbs against a one-value slider: the range
+	// fallback fires, and the second thumb has no value behind it.
+	const _values = useMemo(() => {
+		// A controlled `value` wins when present; `??` rather than `||` so a legitimate 0 counts.
+		const provided = value ?? defaultValue;
+		if (Array.isArray(provided)) {
+			return provided;
+		}
+		if (typeof provided === 'number') {
+			return [provided];
+		}
+		// Neither given: upstream's range-across-the-track default, kept as-is in both bases.
+		return [min, max];
+	}, [value, defaultValue, min, max]);
+
+	return createElement(
+		SliderPrimitive.Root,
+		{
+			className: cn(
+				'data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full',
+				className,
+			),
+			'data-slot': 'slider',
+			defaultValue,
+			value,
+			min,
+			max,
+			thumbAlignment: 'edge',
+			...props,
+		},
+		createElement(
+			SliderPrimitive.Control,
+			{
+				className: 'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+			},
+			createElement(
+				SliderPrimitive.Track,
+				{
+					'data-slot': 'slider-track',
+					className: 'relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1',
+				},
+				createElement(SliderPrimitive.Indicator, {
+					'data-slot': 'slider-range',
+					className: 'bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+				}),
+			),
+			...Array.from(
+				{ length: _values.length },
+				(_, index) => createElement(SliderPrimitive.Thumb, {
+					'data-slot': 'slider-thumb',
+					key: index,
+					className: 'relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50',
+				}),
+			),
+		),
+	);
+}

package/src/bases/base-ui/ui/table.tsrx

@@ -0,0 +1,85 @@
+// Base UI base table — THIS FAMILY IS BASE-INDEPENDENT. Neither Radix nor Base UI publishes a
+// table primitive, so upstream ships the same plain host elements in both bases and this file is
+// the radix base's content unchanged. (The React Aria base is the odd one out: RAC does have a
+// table, so that base runs on real collection components with generic item types.)
+//
+// There is consequently no dialect to get wrong here and nothing to verify against a primitive:
+// `data-[state=selected]` on the row is written by the CONSUMER — a data-table library setting
+// selection state — not emitted by anything underneath, so unlike checkbox or toggle it is not a
+// Radix-ism that needs translating.
+import { cn } from '../../../lib/utils';
+
+// Multi-host family (div/table/thead/tbody/tr/th/td/caption): no single host
+// prop table applies, so the shared alias stays structural.
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Table({ className, ...props }: Props) @{
+	<div data-slot="table-container" className="relative w-full overflow-x-auto">
+		<table
+			data-slot="table"
+			className={cn('w-full caption-bottom text-sm', className)}
+			{...props}
+		/>
+	</div>
+}
+
+export function TableHeader({ className, ...props }: Props) @{
+	<thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+export function TableBody({ className, ...props }: Props) @{
+	<tbody
+		data-slot="table-body"
+		className={cn('[&_tr:last-child]:border-0', className)}
+		{...props}
+	/>
+}
+
+export function TableFooter({ className, ...props }: Props) @{
+	<tfoot
+		data-slot="table-footer"
+		className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+		{...props}
+	/>
+}
+
+export function TableRow({ className, ...props }: Props) @{
+	<tr
+		data-slot="table-row"
+		className={cn(
+			'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableHead({ className, ...props }: Props) @{
+	<th
+		data-slot="table-head"
+		className={cn(
+			'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableCell({ className, ...props }: Props) @{
+	<td
+		data-slot="table-cell"
+		className={cn(
+			'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableCaption({ className, ...props }: Props) @{
+	<caption
+		data-slot="table-caption"
+		className={cn('text-muted-foreground mt-4 text-sm', className)}
+		{...props}
+	/>
+}