@squadbase/vantage 0.6.2-dev1.b332e5a → 0.6.2-dev1.d7c0911

package/registry/ui/skeleton.tsx

@@ -0,0 +1,17 @@
+// Copied by `vantage add ui skeleton`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/skeleton.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { cn } from "@squadbase/vantage/ui"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/registry/ui/slider.tsx

@@ -0,0 +1,56 @@
+// Copied by `vantage add ui slider`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/slider.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@squadbase/vantage/ui"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="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">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="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.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/registry/ui/sparkline.tsx

@@ -0,0 +1,230 @@
+// Copied by `vantage add ui sparkline`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/charts/sparkline.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * Sparkline — an inline trend micro-chart. Deliberately *not* an `EChart`: a
+ * sparkline sits inside table cells and KPI tiles by the dozen, where one
+ * ECharts instance per cell would be wasteful. This renders a single stateless
+ * `<svg>` instead, so hundreds of them stay cheap.
+ */
+import { forwardRef, useEffect, useState, type SVGAttributes } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+import type { ChartHighlight } from "@squadbase/vantage/components"
+
+export type SparklineVariant = "line" | "bar"
+
+export interface SparklineDataPoint {
+  value: number
+  label?: string
+}
+
+export interface SparklineProps extends SVGAttributes<SVGSVGElement> {
+  data: SparklineDataPoint[]
+  variant?: SparklineVariant
+  height?: number
+  /** Tailwind text-colour class; drives both stroke and fill via `currentColor`. */
+  color?: string
+  area?: boolean
+  /** マウント時に線を引く / 棒を伸ばす。既定 `false`(`prefers-reduced-motion` では常に無効)。 */
+  animate?: boolean
+  /**
+   * 点の強調(Tufte 流)。`"auto"` は最新・最大・最小の 3 点だけに小さな点を打つ
+   * (最新は系列の色、最大・最小は muted)。`"latest"` は最新の 1 点だけ、`"none"` は線だけ。`variant="line"` のときだけ効く。既定 `"auto"`。
+   */
+  highlight?: ChartHighlight | "latest"
+  /** 指定すると `role="img"` で読み上げ対象にする。省略時は装飾として `aria-hidden`。 */
+  "aria-label"?: string
+  className?: string
+}
+
+const VB_WIDTH = 100
+
+/** Map raw values onto SVG y-coordinates (inverted, padded). */
+function normalizeData(values: number[], height: number, vPad = 2): number[] {
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const range = max - min
+  const drawHeight = height - vPad * 2
+  if (range === 0) return values.map(() => vPad + drawHeight / 2)
+  return values.map((v) => height - vPad - ((v - min) / range) * drawHeight)
+}
+
+function buildLinePath(ys: number[]): string {
+  if (ys.length === 0) return ""
+  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0
+  return ys
+    .map((y, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(2)},${y.toFixed(2)}`)
+    .join(" ")
+}
+
+function buildAreaPath(ys: number[], height: number): string {
+  if (ys.length === 0) return ""
+  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0
+  const lastX = ((ys.length - 1) * step).toFixed(2)
+  return `${buildLinePath(ys)} L${lastX},${height} L0,${height} Z`
+}
+
+export type SparklinePointKind = "latest" | "max" | "min"
+
+export interface SparklinePoint {
+  kind: SparklinePointKind
+  index: number
+}
+
+/**
+ * The points a Tufte-style sparkline marks: the latest, the max and the min.
+ * A point that is both latest and max/min is drawn once, as `latest`; a flat
+ * series marks only the latest. Ties pick the most recent occurrence.
+ */
+export function sparklineHighlightPoints(values: number[]): SparklinePoint[] {
+  if (values.length === 0) return []
+  const last = values.length - 1
+  const points: SparklinePoint[] = [{ kind: "latest", index: last }]
+  let maxI = 0
+  let minI = 0
+  let max = values[0] as number
+  let min = max
+  values.forEach((v, i) => {
+    if (v >= max) [max, maxI] = [v, i]
+    if (v <= min) [min, minI] = [v, i]
+  })
+  const latest = values[last] as number
+  if (max === min) return points
+  if (max !== latest) points.push({ kind: "max", index: maxI })
+  if (min !== latest) points.push({ kind: "min", index: minI })
+  return points
+}
+
+interface BarRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+function buildBarRects(ys: number[], height: number, gap = 1): BarRect[] {
+  const barW = Math.max(1, VB_WIDTH / ys.length - gap)
+  return ys.map((y, i) => ({ x: i * (barW + gap), y, w: barW, h: height - y }))
+}
+
+/** Rows not given yet (a draft fills props in steps): draw the empty state, keep the same array between renders. */
+const NO_ROWS: never[] = []
+
+export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Sparkline(
+  {
+    data = NO_ROWS,
+    variant = "line",
+    height = 40,
+    color = "text-chart-1",
+    area = false,
+    animate = false,
+    highlight = "auto",
+    "aria-label": ariaLabel,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    if (animate) setMounted(true)
+  }, [animate])
+
+  if (data.length === 0) return null
+
+  const values = data.map((d) => d.value)
+  const ys = normalizeData(values, height)
+  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0
+  const points =
+    variant !== "line"
+      ? []
+      : highlight === "auto"
+        ? sparklineHighlightPoints(values)
+        : highlight === "latest"
+          ? [{ kind: "latest" as const, index: values.length - 1 }]
+          : []
+
+  return (
+    <svg
+      ref={ref}
+      data-slot="sparkline"
+      viewBox={`0 0 ${VB_WIDTH} ${height}`}
+      preserveAspectRatio="none"
+      width="100%"
+      height={height}
+      role={ariaLabel ? "img" : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      className={cn("overflow-visible", className)}
+      {...props}
+    >
+      {variant === "line" && (
+        <>
+          {area && (
+            <path
+              d={buildAreaPath(ys, height)}
+              strokeWidth={0}
+              className={cn("fill-current opacity-15", color)}
+            />
+          )}
+          <path
+            d={buildLinePath(ys)}
+            fill="none"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            vectorEffect="non-scaling-stroke"
+            pathLength={animate ? 1 : undefined}
+            strokeDasharray={animate ? 1 : undefined}
+            strokeDashoffset={animate ? (mounted ? 0 : 1) : undefined}
+            className={cn("stroke-current", animate && "motion-reduce:transition-none!", color)}
+            style={animate ? { transition: "stroke-dashoffset 0.6s ease-in-out" } : undefined}
+          />
+          {/* A zero-length round-capped stroke with a non-scaling width stays a
+              circle even though the viewBox stretches (`preserveAspectRatio="none"`). */}
+          {points.map((p) => {
+            const x = (p.index * step).toFixed(2)
+            const y = (ys[p.index] ?? 0).toFixed(2)
+            return (
+              <path
+                key={p.kind}
+                data-slot="sparkline-point"
+                data-point={p.kind}
+                d={`M${x},${y} L${x},${y}`}
+                fill="none"
+                strokeWidth={p.kind === "latest" ? 5 : 4}
+                strokeLinecap="round"
+                vectorEffect="non-scaling-stroke"
+                className={cn("stroke-current", p.kind === "latest" ? color : "text-muted-foreground")}
+              />
+            )
+          })}
+        </>
+      )}
+
+      {variant === "bar" &&
+        buildBarRects(ys, height).map((rect, i) => (
+          <rect
+            key={i}
+            x={rect.x}
+            y={animate ? (mounted ? rect.y : height) : rect.y}
+            width={rect.w}
+            height={animate ? (mounted ? rect.h : 0) : rect.h}
+            rx={0.5}
+            className={cn("fill-current", animate && "motion-reduce:transition-none!", color)}
+            style={
+              animate
+                ? {
+                    transition: `height 0.4s ease-out ${i * 0.02}s, y 0.4s ease-out ${i * 0.02}s`,
+                  }
+                : undefined
+            }
+          />
+        ))}
+    </svg>
+  )
+})
+Sparkline.displayName = "Sparkline"

package/registry/ui/spinner.tsx

@@ -0,0 +1,14 @@
+// Copied by `vantage add ui spinner`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/spinner.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Loader2Icon } from "lucide-react"
+
+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/registry/ui/states.tsx

@@ -0,0 +1,90 @@
+// Copied by `vantage add ui states`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/states.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * Loading / Empty / ErrorState — the three non-data states of a panel, worded for
+ * business users. Defaults are Japanese and say what is happening, not why the
+ * system failed: keep raw errors ("upstream timeout after 30s") in `details`,
+ * which stays folded behind "詳細を表示".
+ *
+ * @example
+ * import { ErrorState } from "@/components/ui/states"
+ * // Vantage: import { ErrorState } from "@squadbase/vantage/ui"
+ *
+ * <ErrorState
+ *   title="売上を読み込めませんでした"
+ *   message="データソースから時間内に応答がありませんでした。しばらくしてから再試行してください。"
+ *   details={error.message}
+ *   action={<Button variant="outline" onClick={retry}>再試行する</Button>}
+ * />
+ */
+import type { ReactNode } from "react"
+import { cn } from "@squadbase/vantage/ui"
+
+export function Loading({ label = "読み込んでいます…", className }: { label?: string; className?: string }) {
+  return (
+    <div className={cn("flex min-h-[30vh] items-center justify-center", className)} role="status" aria-live="polite">
+      <div className="flex items-center gap-3 text-sm text-muted-foreground">
+        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export function Empty({
+  title = "表示できるデータがありません",
+  description,
+  icon,
+  action,
+  className,
+}: {
+  title?: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center gap-2 p-10 text-center", className)}>
+      {icon ? <div className="text-3xl text-muted-foreground">{icon}</div> : null}
+      <p className="font-medium">{title}</p>
+      {description ? <p className="max-w-sm text-sm text-muted-foreground">{description}</p> : null}
+      {action ? <div className="mt-2">{action}</div> : null}
+    </div>
+  )
+}
+
+export function ErrorState({
+  title = "データを読み込めませんでした",
+  message = "時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。",
+  details,
+  action,
+  className,
+}: {
+  title?: string
+  /** What happened and what to do next, in plain words. */
+  message?: ReactNode
+  /** Technical detail (error message, status code), folded behind "詳細を表示". */
+  details?: ReactNode
+  action?: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn("rounded-xl border border-destructive/30 bg-destructive/5 p-6", className)}
+      role="alert"
+    >
+      <p className="font-semibold text-destructive">{title}</p>
+      {message ? <p className="mt-1 text-sm text-muted-foreground">{message}</p> : null}
+      {details ? (
+        <details className="mt-2 text-xs text-muted-foreground">
+          <summary className="cursor-pointer select-none">詳細を表示</summary>
+          <div className="mt-1 font-mono break-all">{details}</div>
+        </details>
+      ) : null}
+      {action ? <div className="mt-3">{action}</div> : null}
+    </div>
+  )
+}

package/registry/ui/status-badge.tsx

@@ -0,0 +1,121 @@
+// Copied by `vantage add ui status-badge`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/status-badge.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * StatusBadge — a dot-plus-label badge for row/record status. Statuses map to a
+ * tone through `defaultColorMap`; pass `colorMap` to extend or override it.
+ *
+ * Tones are the theme's semantic tokens — `positive` | `negative` | `warning` |
+ * `info` | `neutral` — drawn as a `--<tone>` dot and text on a `--<tone>-subtle`
+ * background. The legacy colour names `green` / `red` / `yellow` / `blue` /
+ * `gray` are still accepted and map to positive / negative / warning / info /
+ * neutral. Unknown statuses and tones fall back to `neutral`.
+ *
+ * The default label comes from `STATUS_VOCABULARY` (one table of status, 日本語ラベル and tone), so the same
+ * state is worded the same everywhere (Tracker legends import it too):
+ *
+ * | status | ラベル | 色調 |
+ * |---|---|---|
+ * | `success` | 正常 | positive |
+ * | `partial` | 一部失敗 | warning |
+ * | `failed` | 失敗 | negative |
+ * | `delayed` | 遅延 | warning |
+ * | `running` | 実行中 | info |
+ * | `stopped` | 停止中 | neutral |
+ * | `active` / `inactive` | 有効 / 無効 | positive / neutral |
+ * | `warning` / `error` / `pending` | 警告 / エラー / 保留中 | warning / negative / info |
+ */
+import { forwardRef } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Badge } from "@squadbase/vantage/ui"
+
+type StatusTone = "positive" | "negative" | "warning" | "info" | "neutral"
+
+/**
+ * 状態の語彙の正本: status → 日本語ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
+ * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。
+ */
+export const STATUS_VOCABULARY = {
+  success: { label: "正常", tone: "positive" },
+  partial: { label: "一部失敗", tone: "warning" },
+  failed: { label: "失敗", tone: "negative" },
+  delayed: { label: "遅延", tone: "warning" },
+  running: { label: "実行中", tone: "info" },
+  stopped: { label: "停止中", tone: "neutral" },
+  active: { label: "有効", tone: "positive" },
+  inactive: { label: "無効", tone: "neutral" },
+  warning: { label: "警告", tone: "warning" },
+  error: { label: "エラー", tone: "negative" },
+  pending: { label: "保留中", tone: "info" },
+} as const satisfies Record<string, { label: string; tone: StatusTone }>
+
+export type StatusKey = keyof typeof STATUS_VOCABULARY
+
+/** 状態の日本語ラベル。語彙に無い status は渡された文字列のまま返す。 */
+export function statusLabel(status: string): string {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_VOCABULARY[status as StatusKey].label : status
+}
+
+const defaultColorMap: Record<string, string> = Object.fromEntries(
+  Object.entries(STATUS_VOCABULARY).map(([key, { tone }]) => [key, tone]),
+)
+
+/** Legacy colour names → tones. */
+const legacyColorTones: Record<string, StatusTone> = {
+  green: "positive",
+  gray: "neutral",
+  yellow: "warning",
+  red: "negative",
+  blue: "info",
+}
+
+/**
+ * One literal class set per tone — Tailwind only emits classes it can see
+ * literally in the source.
+ */
+const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string }> = {
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral" },
+}
+
+const resolveTone = (color: string | undefined): StatusTone => {
+  if (color === undefined) return "neutral"
+  if (Object.hasOwn(toneStyles, color)) return color as StatusTone
+  return legacyColorTones[color] ?? "neutral"
+}
+
+export interface StatusBadgeProps {
+  status: string
+  label?: string
+  /** status → tone (`positive` | `negative` | `warning` | `info` | `neutral`) or legacy colour name. */
+  colorMap?: Partial<Record<string, string>>
+  className?: string
+}
+
+export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(function StatusBadge(
+  { status, label, colorMap, className },
+  ref,
+) {
+  const mergedColorMap = { ...defaultColorMap, ...colorMap }
+  const style = toneStyles[resolveTone(mergedColorMap[status])]
+  const displayLabel = label ?? statusLabel(status)
+
+  return (
+    <Badge
+      ref={ref}
+      data-slot="status-badge"
+      variant="outline"
+      className={cn("gap-1.5 border-transparent", style.bg, style.text, className)}
+      aria-label={displayLabel}
+    >
+      <span className={cn("inline-block size-2 rounded-full", style.dot)} aria-hidden="true" />
+      {displayLabel}
+    </Badge>
+  )
+})
+StatusBadge.displayName = "StatusBadge"

package/registry/ui/switch.tsx

@@ -0,0 +1,34 @@
+// Copied by `vantage add ui switch`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/switch.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@squadbase/vantage/ui"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  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 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
+      )}
+      {...props}
+    >
+      <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>
+  )
+}
+
+export { Switch }

package/registry/ui/table.tsx

@@ -0,0 +1,118 @@
+// Copied by `vantage add ui table`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/table.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+
+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 text-xs font-medium whitespace-nowrap text-muted-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,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}