velloo 0.0.0 → 0.2.0

package/pkgs/shadcn-snapshot/src/components/ui/select.tsx

@@ -0,0 +1,180 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/select).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: see ../canvas-portal.tsx. Select is the most divergent shim.
+// Radix drives the trigger label and the item check mark through a context
+// that Portal/Content set up, so once the popup renders inline that channel is
+// dead — the label is authored on `SelectValue` and the check on `SelectItem`'s
+// `selected`, which also puts both under inspector control. Classes track
+// upstream minus the ones keyed to Radix's runtime vars
+// (`--radix-select-*`) or to the open animation, which would fire on every
+// render and leave screenshots catching a mid-transition frame.
+"use client";
+
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs, pinOpenInDesignMode } from "../canvas-portal.tsx";
+
+const SCROLL_BUTTON =
+  "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4";
+
+export function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...pinOpenInDesignMode(props)} />;
+}
+
+/**
+ * A plain button, not `SelectPrimitive.Trigger`: the rest of this file already
+ * bypasses Radix (Content, Item and Value are inline elements), so the root's
+ * context has nothing left to give a trigger — while Radix's own trigger
+ * *throws* when it can't find that context. Designs compose nodes freely, so a
+ * trigger sitting on its own under a Box is a shape the canvas has to render,
+ * not a crash that takes the whole screen down with it.
+ */
+export function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<"button"> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </button>
+  );
+}
+
+/**
+ * Static value display. Radix reads the label off the selected item, which
+ * only exists inside the portal it owns; design mode renders whatever the
+ * user typed so the trigger reads "Pro plan" next to the chevron. Pass
+ * `placeholder` alone for the empty state — it takes upstream's muted styling
+ * here rather than through the trigger's `data-placeholder`.
+ */
+export function SelectValue({
+  className,
+  placeholder,
+  children,
+  ...props
+}: React.ComponentProps<"span"> & { placeholder?: string }) {
+  return (
+    <span
+      data-slot="select-value"
+      className={children === undefined ? cn("text-muted-foreground", className) : className}
+      {...props}
+    >
+      {children ?? placeholder ?? ""}
+    </span>
+  );
+}
+
+export function SelectContent({
+  className,
+  position: _position,
+  align: _align,
+  side: _side,
+  sideOffset: _sideOffset,
+  collisionPadding: _collisionPadding,
+  ...props
+}: React.ComponentProps<"div"> & {
+  position?: "popper" | "item-aligned";
+  align?: string;
+  side?: string;
+  sideOffset?: number;
+  collisionPadding?: number;
+}) {
+  return (
+    <div
+      data-slot="select-content"
+      {...inlineOpenAttrs()}
+      className={cn(
+        "cn-menu-target cn-menu-translucent relative z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SelectGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="select-group" className={cn("scroll-my-1 p-1", className)} {...props} />;
+}
+
+export function SelectLabel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function SelectItem({
+  className,
+  children,
+  value,
+  selected,
+  ...props
+}: React.ComponentProps<"div"> & { value?: string; selected?: boolean }) {
+  return (
+    <div
+      data-slot="select-item"
+      data-value={value}
+      data-state={selected ? "checked" : "unchecked"}
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        {selected ? <CheckIcon className="pointer-events-none" /> : null}
+      </span>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+export function SelectSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Upstream renders both scroll buttons inside Content and lets Radix hide them
+ * until the list actually overflows. A static render can't measure that, so
+ * they stay opt-in children rather than always-on chrome.
+ */
+export function SelectScrollUpButton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="select-scroll-up-button" className={cn(SCROLL_BUTTON, className)} {...props}>
+      <ChevronUpIcon />
+    </div>
+  );
+}
+
+export function SelectScrollDownButton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="select-scroll-down-button" className={cn(SCROLL_BUTTON, className)} {...props}>
+      <ChevronDownIcon />
+    </div>
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/separator.tsx

@@ -0,0 +1,32 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/separator).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
+// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+"use client";
+
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils.ts";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/pkgs/shadcn-snapshot/src/components/ui/sheet.tsx

@@ -0,0 +1,107 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/sheet).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: see ../canvas-portal.tsx. Content is a plain panel in the page
+// flow, so upstream's viewport-edge anchoring goes away while `data-side` keeps
+// driving the per-side size and border — a fixed panel would pin itself to the
+// canvas viewport instead of the frame it belongs to. The close button is a
+// plain Button rather than Radix Close, so a Content placed on the canvas
+// without its Root still renders. Classes track upstream minus the slide/fade
+// transitions: we pin `data-state="open"`, so those would replay on every
+// render and screenshots would catch a mid-transition frame.
+"use client";
+
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs, pinOpenInDesignMode } from "../canvas-portal.tsx";
+import { Button } from "./button.tsx";
+
+export function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...pinOpenInDesignMode(props)} />;
+}
+
+export function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+export function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+export function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="sheet-content"
+      data-side={side}
+      {...inlineOpenAttrs()}
+      className={cn(
+        "relative z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <Button
+          data-slot="sheet-close"
+          variant="ghost"
+          className="absolute top-3 right-3"
+          size="icon-sm"
+        >
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <h2
+      data-slot="sheet-title"
+      className={cn("cn-font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/skeleton.tsx

@@ -0,0 +1,17 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/skeleton).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
+// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+import { cn } from "../../lib/utils.ts";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/pkgs/shadcn-snapshot/src/components/ui/slider.tsx

@@ -0,0 +1,68 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/slider).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: a design ships `value` to position the thumb, with no handler
+// because nothing on the canvas is interactive. Radix would pin the thumb and
+// React would warn about the missing handler, so a handlerless `value` becomes
+// `defaultValue`.
+"use client";
+
+import { Slider as SliderPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "../../lib/utils.ts";
+
+export function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const isStaticControlled = value !== undefined && props.onValueChange === undefined;
+  // Only the keys that are actually set — an explicit `value: undefined` reads
+  // to Radix as a controlled slider with no value, which is not what "unset"
+  // means.
+  const resolved: { value?: typeof value; defaultValue?: typeof defaultValue } = isStaticControlled
+    ? { defaultValue: value }
+    : {
+        ...(value === undefined ? {} : { value }),
+        ...(defaultValue === undefined ? {} : { defaultValue }),
+      };
+
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      {...resolved}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <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"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/sonner.tsx

@@ -0,0 +1,91 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/sonner).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+//
+// Canvas-safe: real apps render sonner's <Toaster />, which mounts an
+// imperative queue plus a portal at the document root. Nothing calls toast()
+// in design mode, so that queue only ever paints an empty region — we render a
+// single sample toast pinned to the configured corner instead, so a user who
+// drops a <Toaster /> onto a screen sees what it will look like at runtime.
+// Upstream reads next-themes to hand sonner a theme; the canvas is already
+// themed by the design folder's tokens, so the sample is painted from the same
+// CSS vars upstream passes down rather than taking that dependency.
+"use client";
+
+import { CircleCheckIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+
+export interface ToasterProps extends React.ComponentProps<"div"> {
+  position?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+  richColors?: boolean;
+  expand?: boolean;
+  closeButton?: boolean;
+  theme?: "light" | "dark" | "system";
+}
+
+const POSITION_CLASS: Record<NonNullable<ToasterProps["position"]>, string> = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end",
+};
+
+const TOAST_VARS = {
+  "--normal-bg": "var(--popover)",
+  "--normal-text": "var(--popover-foreground)",
+  "--normal-border": "var(--border)",
+  "--border-radius": "var(--radius)",
+} as React.CSSProperties;
+
+const TOAST_STYLE = {
+  background: "var(--normal-bg)",
+  color: "var(--normal-text)",
+  borderColor: "var(--normal-border)",
+  borderRadius: "var(--border-radius)",
+} as React.CSSProperties;
+
+export function Toaster({
+  className,
+  style,
+  position = "bottom-right",
+  richColors: _richColors,
+  expand: _expand,
+  closeButton: _closeButton,
+  theme: _theme,
+  ...props
+}: ToasterProps) {
+  return (
+    <div
+      data-slot="sonner-toaster"
+      data-velloo-inline="true"
+      className={cn(
+        "pointer-events-none fixed z-50 flex flex-col gap-2",
+        POSITION_CLASS[position],
+        className,
+      )}
+      style={{ ...TOAST_VARS, ...style }}
+      {...props}
+    >
+      <div
+        data-slot="sonner-toast"
+        data-state="open"
+        className="pointer-events-auto flex w-80 max-w-[calc(100vw-2rem)] items-start gap-2 border p-4 text-sm shadow-lg"
+        style={TOAST_STYLE}
+      >
+        <CircleCheckIcon className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+        <div className="flex-1">
+          <div className="font-medium">Toast</div>
+          <div className="text-muted-foreground">Sample toast preview.</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/spinner.tsx

@@ -0,0 +1,21 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/spinner).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
+// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+
+import { Loader2Icon } from "lucide-react";
+import { cn } from "../../lib/utils.ts";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/pkgs/shadcn-snapshot/src/components/ui/switch.tsx

@@ -0,0 +1,41 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/switch).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: same contract as Checkbox — a design ships `checked` to show an
+// on state with no handler to change it, so it becomes `defaultChecked` rather
+// than a controlled switch React warns about.
+"use client";
+
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils.ts";
+
+export function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default";
+}) {
+  const { checked, ...rest } = props;
+  const isStaticControlled = checked !== undefined && props.onCheckedChange === undefined;
+  // Drop `checked` by omitting it, not by setting it to undefined: Radix reads
+  // "present but undefined" as a controlled component with no value.
+  const finalProps = isStaticControlled ? { ...rest, defaultChecked: checked } : props;
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...finalProps}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/table.tsx

@@ -0,0 +1,93 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/table).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
+// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../../lib/utils.ts";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <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>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <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}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };