@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/primitives/DataLoader.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Spinner } from './spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export interface DataLoaderProps {
+  isLoading: boolean
+  children: React.ReactNode
+  loadingMessage?: string
+  spinnerSize?: 'sm' | 'md' | 'lg'
+  className?: string
+  loadingClassName?: string
+  // Optional: show a skeleton or placeholder instead of just spinner
+  showSkeleton?: boolean
+  skeletonComponent?: React.ReactNode
+}
+
+export function DataLoader({
+  isLoading,
+  children,
+  loadingMessage,
+  spinnerSize = 'md',
+  className = '',
+  loadingClassName = '',
+  showSkeleton = false,
+  skeletonComponent
+}: DataLoaderProps) {
+  const t = useT()
+  const resolvedLoadingMessage = loadingMessage ?? t('ui.dataLoader.loading', 'Loading...')
+  if (isLoading) {
+    if (showSkeleton && skeletonComponent) {
+      return <div className={className}>{skeletonComponent}</div>
+    }
+
+    return (
+      <div className={`flex items-center justify-center gap-2 py-4 ${loadingClassName} ${className}`}>
+        <Spinner size={spinnerSize} />
+        <span className="text-sm text-muted-foreground">{resolvedLoadingMessage}</span>
+      </div>
+    )
+  }
+
+  return <div className={className}>{children}</div>
+}
+
+// Convenience component for inline loading states
+export function InlineLoader({
+  isLoading,
+  children,
+  loadingMessage,
+  spinnerSize = 'sm'
+}: {
+  isLoading: boolean
+  children: React.ReactNode
+  loadingMessage?: string
+  spinnerSize?: 'sm' | 'md' | 'lg'
+}) {
+  return (
+    <DataLoader
+      isLoading={isLoading}
+      loadingMessage={loadingMessage}
+      spinnerSize={spinnerSize}
+      className="inline-flex items-center"
+      loadingClassName="py-2"
+    >
+      {children}
+    </DataLoader>
+  )
+}
+
+// Convenience component for full-page loading states
+export function PageLoader({
+  isLoading,
+  children,
+  loadingMessage,
+  spinnerSize = 'lg'
+}: {
+  isLoading: boolean
+  children: React.ReactNode
+  loadingMessage?: string
+  spinnerSize?: 'sm' | 'md' | 'lg'
+}) {
+  return (
+    <DataLoader
+      isLoading={isLoading}
+      loadingMessage={loadingMessage}
+      spinnerSize={spinnerSize}
+      className="min-h-[200px] flex items-center justify-center"
+    >
+      {children}
+    </DataLoader>
+  )
+}

package/src/primitives/ErrorNotice.tsx

@@ -0,0 +1,26 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function ErrorNotice({ title, message, action }: {
+  title?: string
+  message?: string
+  action?: React.ReactNode
+}) {
+  const t = useT()
+  const defaultTitle = title ?? t('ui.errors.defaultTitle', 'Something went wrong')
+  const defaultMessage = message ?? t('ui.errors.defaultMessage', 'Unable to load data. Please try again.')
+  return (
+    <div className="rounded-md border border-red-200 bg-red-50 p-4 text-red-800">
+      <div className="flex items-start gap-3">
+        <span className="inline-block mt-0.5 h-4 w-4 rounded-full border-2 border-red-500" aria-hidden />
+        <div className="space-y-1">
+          <div className="text-sm font-medium">{defaultTitle}</div>
+          <div className="text-sm opacity-90">{defaultMessage}</div>
+          {action ? <div className="mt-2">{action}</div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/primitives/alert.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-foreground',
+        destructive:
+          'border-destructive/60 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground',
+        success:
+          'border-emerald-600/30 bg-emerald-500/10 text-emerald-900 dark:border-emerald-500/50 dark:bg-emerald-500/15 dark:text-emerald-50',
+        warning:
+          'border-amber-500/30 bg-amber-400/10 text-amber-950 dark:border-amber-400/40 dark:bg-amber-400/20 dark:text-amber-50',
+        info:
+          'border-sky-600/30 bg-sky-500/10 text-sky-900 dark:border-sky-500/40 dark:bg-sky-500/20 dark:text-sky-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 text-sm font-semibold leading-tight', className)} {...props} />
+  )
+)
+
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm leading-relaxed', className)} {...props} />
+  )
+)
+
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertDescription, AlertTitle, alertVariants }

package/src/primitives/badge.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+        muted: 'border-transparent bg-muted text-muted-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
+))
+
+Badge.displayName = 'Badge'
+
+export { badgeVariants }

package/src/primitives/button.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
+}
+
+export { buttonVariants }
+

package/src/primitives/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/primitives/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@open-mercato/shared/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/src/primitives/dialog.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const t = useT()
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-dialog-content=""
+        className={cn(
+          'fixed inset-x-0 bottom-0 z-50 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
+          'focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
+          className,
+        )}
+        {...props}
+      >
+        <DialogClose
+          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          aria-label={t('ui.dialog.close.ariaLabel', 'Close')}
+        >
+          <X className="h-4 w-4" />
+        </DialogClose>
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+})
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/primitives/input.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type InputProps = React.ComponentPropsWithoutRef<'input'>
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+Input.displayName = 'Input'

package/src/primitives/label.tsx

@@ -0,0 +1,18 @@
+"use client"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+

package/src/primitives/separator.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export function Separator({ className = '', orientation = 'horizontal' }: { className?: string; orientation?: 'horizontal' | 'vertical' }) {
+  const base = orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full'
+  return <div role="separator" aria-orientation={orientation} className={`${base} bg-border ${className}`} />
+}
+

package/src/primitives/spinner.tsx

@@ -0,0 +1,27 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export interface SpinnerProps {
+  className?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Spinner({ className = '', size = 'md' }: SpinnerProps) {
+  const t = useT()
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  }
+
+  return (
+    <span
+      className={`inline-flex items-center justify-center animate-spin rounded-full border-2 border-border border-t-foreground ${sizeClasses[size]} ${className}`}
+      role="status"
+      aria-label={t('ui.spinner.ariaLabel', 'Loading')}
+    >
+      <span className="sr-only">{t('ui.spinner.srOnly', 'Loading...')}</span>
+    </span>
+  )
+}

package/src/primitives/switch.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type SwitchProps = {
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+} & Omit<React.ComponentProps<'button'>, 'onChange'>
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, defaultChecked, onCheckedChange, disabled, className, onClick, onKeyDown, ...props }, ref) => {
+    const isControlled = typeof checked === 'boolean'
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultChecked ?? false)
+
+    const currentChecked = isControlled ? checked : uncontrolledValue
+
+    const toggle = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {
+        event.preventDefault()
+        if (disabled) {
+          return
+        }
+        const next = !currentChecked
+        if (!isControlled) {
+          setUncontrolledValue(next)
+        }
+        onCheckedChange?.(next)
+      },
+      [currentChecked, disabled, isControlled, onCheckedChange]
+    )
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) {
+          toggle(event)
+        }
+      },
+      [onClick, toggle]
+    )
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        onKeyDown?.(event)
+        if (event.defaultPrevented) {
+          return
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+          toggle(event)
+        }
+      },
+      [onKeyDown, toggle]
+    )
+
+    return (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={currentChecked}
+        aria-disabled={disabled}
+        data-state={currentChecked ? 'checked' : 'unchecked'}
+        data-disabled={disabled ? '' : undefined}
+        ref={ref}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        className={cn(
+          'inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-input/60 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary',
+          className
+        )}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            'inline-block size-5 translate-x-0 rounded-full bg-background shadow transition-transform duration-200',
+            currentChecked ? 'translate-x-5' : 'translate-x-0'
+          )}
+        />
+      </button>
+    )
+  }
+)
+
+Switch.displayName = 'Switch'

package/src/primitives/table.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return <table className={cn('w-full text-sm', className)} {...props} />
+}
+
+export function TableHeader(props: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead {...props} />
+}
+
+export function TableBody(props: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody {...props} />
+}
+
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn('border-b last:border-b-0', className)} {...props} />
+}
+
+export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={cn('text-left font-medium px-4 py-2 whitespace-nowrap text-muted-foreground', className)} {...props} />
+}
+
+export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn('px-4 py-2', className)} {...props} />
+}
+