@etherealui/react 0.0.0-stage → 0.0.3

package/src/primitives/date-picker.tsx

@@ -0,0 +1,400 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import {
+  Calendar as CalendarIcon,
+  UploadCloud,
+  FileText,
+  CheckCircle2,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react"
+import { cn } from "../utils/cn"
+import { Progress } from "./progress"
+
+export interface DateRangePreset {
+  label: string
+  value: string
+  rangeText: string
+}
+
+const defaultPresets: DateRangePreset[] = [
+  { label: "Last 7 days", value: "7d", rangeText: "Oct 31 – Nov 06, 2026" },
+  { label: "Last 30 days", value: "30d", rangeText: "Oct 08 – Nov 06, 2026" },
+  { label: "Last 90 days", value: "90d", rangeText: "Aug 09 – Nov 06, 2026" },
+  { label: "Year to date", value: "ytd", rangeText: "Jan 01 – Nov 06, 2026" },
+]
+
+export interface DateRangePickerProps {
+  value?: string
+  onValueChange?: (preset: DateRangePreset) => void
+  className?: string
+}
+
+export const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  value = "30d",
+  onValueChange,
+  className,
+}) => {
+  const [selected, setSelected] = React.useState(value)
+  const activePreset =
+    defaultPresets.find((p) => p.value === selected) || defaultPresets[1]
+
+  return (
+    <PopoverPrimitive.Root>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "inline-flex h-9 items-center gap-2.5 rounded-lg border border-zinc-200 bg-white px-3 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-50 focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 cursor-pointer",
+            className
+          )}
+        >
+          <CalendarIcon className="h-3.5 w-3.5 text-zinc-400" />
+          <span>{activePreset.label}</span>
+          <span className="hidden sm:inline border-l border-zinc-200 pl-2 text-[11px] text-zinc-400 dark:border-zinc-800">
+            {activePreset.rangeText}
+          </span>
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="end"
+          sideOffset={6}
+          className="z-50 w-72 rounded-xl border border-zinc-200 bg-white p-2 text-zinc-900 shadow-lg focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
+        >
+          <div className="px-2 py-1.5 text-[11px] font-medium text-zinc-400">
+            Date range
+          </div>
+          <div className="space-y-0.5">
+            {defaultPresets.map((preset) => {
+              const isSelected = preset.value === selected
+              return (
+                <button
+                  key={preset.value}
+                  type="button"
+                  onClick={() => {
+                    setSelected(preset.value)
+                    onValueChange?.(preset)
+                  }}
+                  className={cn(
+                    "flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-xs transition-colors cursor-pointer",
+                    isSelected
+                      ? "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300"
+                      : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                  )}
+                >
+                  <span className="font-medium">{preset.label}</span>
+                  <span className="text-[11px] text-zinc-400">
+                    {preset.rangeText}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+
+// Standalone DateCalendar Primitive
+export const DateCalendar: React.FC<{ className?: string }> = ({ className }) => {
+  const [selectedDay, setSelectedDay] = React.useState(14)
+  const days = Array.from({ length: 30 }, (_, i) => i + 1)
+
+  return (
+    <div
+      className={cn(
+        "w-64 rounded-2xl border border-zinc-200 bg-white p-4 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <span className="text-xs font-semibold text-zinc-900 dark:text-zinc-100">
+          November 2026
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-[10px] font-medium text-zinc-400 mb-1.5">
+        <span>Su</span>
+        <span>Mo</span>
+        <span>Tu</span>
+        <span>We</span>
+        <span>Th</span>
+        <span>Fr</span>
+        <span>Sa</span>
+      </div>
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((d) => {
+          const active = d === selectedDay
+          return (
+            <button
+              key={d}
+              type="button"
+              onClick={() => setSelectedDay(d)}
+              className={cn(
+                "flex h-7 w-7 items-center justify-center rounded-lg text-xs transition-colors cursor-pointer",
+                active
+                  ? "bg-blue-600 font-semibold text-white"
+                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+              )}
+            >
+              {d}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ColorPicker Primitive
+export const ColorPicker: React.FC<{ className?: string }> = ({ className }) => {
+  const swatches = [
+    "#2563eb",
+    "#0ea5e9",
+    "#10b981",
+    "#f59e0b",
+    "#f43f5e",
+    "#8b5cf6",
+    "#18181b",
+  ]
+  const [color, setColor] = React.useState(swatches[0])
+
+  return (
+    <div
+      className={cn(
+        "inline-flex flex-col gap-3 rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="h-6 w-6 rounded-lg border border-black/10 shrink-0"
+          style={{ backgroundColor: color }}
+        />
+        <input
+          type="text"
+          value={color}
+          onChange={(e) => setColor(e.target.value)}
+          className="w-28 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1 font-mono text-xs text-zinc-800 focus:outline-none dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
+        />
+      </div>
+      <div className="flex items-center gap-1.5">
+        {swatches.map((sw) => (
+          <button
+            key={sw}
+            type="button"
+            onClick={() => setColor(sw)}
+            style={{ backgroundColor: sw }}
+            className={cn(
+              "h-6 w-6 rounded-full transition-transform cursor-pointer",
+              color === sw && "scale-110 ring-2 ring-offset-2 ring-blue-500 dark:ring-offset-zinc-900"
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Carousel Primitive
+export const Carousel: React.FC<{
+  slides?: Array<{ title: string; subtitle: string; metric: string }>
+  className?: string
+}> = ({
+  slides = [
+    {
+      title: "Q4 Revenue Velocity",
+      subtitle: "Net dollar retention across enterprise accounts",
+      metric: "128.4%",
+    },
+    {
+      title: "Global Checkout Conversion",
+      subtitle: "30-day rolling average across 14 currencies",
+      metric: "4.82%",
+    },
+    {
+      title: "Customer Support SLA",
+      subtitle: "Median first response time for priority tickets",
+      metric: "3m 12s",
+    },
+  ],
+  className,
+}) => {
+  const [idx, setIdx] = React.useState(0)
+  const current = slides[idx]
+
+  return (
+    <div
+      className={cn(
+        "w-full max-w-md rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-[11px] font-medium text-zinc-400">
+          Slide {idx + 1} of {slides.length}
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => setIdx((p) => (p - 1 + slides.length) % slides.length)}
+            className="rounded-lg border border-zinc-200 p-1 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setIdx((p) => (p + 1) % slides.length)}
+            className="rounded-lg border border-zinc-200 p-1 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800 cursor-pointer"
+          >
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <div className="mt-4 space-y-1">
+        <div className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+          {current.metric}
+        </div>
+        <div className="text-xs font-medium text-zinc-800 dark:text-zinc-200">
+          {current.title}
+        </div>
+        <p className="text-xs text-zinc-500 dark:text-zinc-400">
+          {current.subtitle}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export interface UploadedFileItem {
+  name: string
+  size: string
+  progress: number
+}
+
+export interface FileDropzoneProps {
+  className?: string
+  initialFiles?: UploadedFileItem[]
+}
+
+export const FileDropzone: React.FC<FileDropzoneProps> = ({
+  className,
+  initialFiles = [
+    { name: "quarterly-report-2026.csv", size: "1.4 MB", progress: 100 },
+    { name: "customer-invoices.pdf", size: "420 KB", progress: 76 },
+  ],
+}) => {
+  const [files, setFiles] = React.useState<UploadedFileItem[]>(initialFiles)
+  const [isDragging, setIsDragging] = React.useState(false)
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div
+        onDragOver={(e) => {
+          e.preventDefault()
+          setIsDragging(true)
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault()
+          setIsDragging(false)
+          const dropped = Array.from(e.dataTransfer.files)
+          if (dropped.length > 0) {
+            setFiles((prev) => [
+              ...prev,
+              ...dropped.map((f) => ({
+                name: f.name,
+                size: `${Math.max(1, Math.round(f.size / 1024))} KB`,
+                progress: 100,
+              })),
+            ])
+          }
+        }}
+        onClick={() => {
+          setFiles((prev) => [
+            ...prev,
+            {
+              name: `attachment-${prev.length + 1}.pdf`,
+              size: "310 KB",
+              progress: 100,
+            },
+          ])
+        }}
+        className={cn(
+          "flex flex-col items-center justify-center rounded-xl border border-dashed p-6 text-center transition-colors cursor-pointer",
+          isDragging
+            ? "border-blue-500 bg-blue-50/50 dark:bg-blue-500/10"
+            : "border-zinc-300 bg-zinc-50/50 hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900/40 dark:hover:border-zinc-700"
+        )}
+      >
+        <div className="mb-2.5 flex h-9 w-9 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
+          <UploadCloud className="h-4 w-4" />
+        </div>
+        <p className="text-xs font-medium text-zinc-800 dark:text-zinc-200">
+          Click to upload or drag and drop
+        </p>
+        <p className="mt-1 text-[11px] text-zinc-400">
+          CSV, PDF, JSON, or PNG up to 25MB
+        </p>
+      </div>
+
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((file, idx) => (
+            <div
+              key={`${file.name}-${idx}`}
+              className="rounded-xl border border-zinc-200 bg-white p-3 space-y-2 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  <FileText className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0" />
+                  <div className="min-w-0">
+                    <p className="truncate text-xs font-medium text-zinc-800 dark:text-zinc-200">
+                      {file.name}
+                    </p>
+                    <p className="text-[11px] text-zinc-400">{file.size}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {file.progress >= 100 && (
+                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                  )}
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFiles((prev) => prev.filter((_, i) => i !== idx))
+                    }
+                    className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 hover:text-rose-500 dark:hover:bg-zinc-800 cursor-pointer"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </div>
+              <Progress
+                value={file.progress}
+                size="sm"
+                variant={file.progress >= 100 ? "emerald" : "blue"}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/primitives/dialog.tsx

@@ -0,0 +1,279 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X, ChevronDown, ChevronRight, ArrowRight, ChevronLeft } from "lucide-react"
+import { cn } from "../utils/cn"
+
+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-xs transition-opacity",
+      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) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border border-zinc-200 bg-white p-6 text-zinc-900 shadow-2xl focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1.5 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 focus:outline-none dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </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-left", className)}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-3 border-t border-zinc-200 dark:border-zinc-800",
+      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-base font-semibold leading-none tracking-tight text-zinc-900 dark:text-zinc-100", 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-xs text-zinc-500 dark:text-zinc-400 leading-relaxed", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+// Accordion Primitive
+export interface AccordionItemData {
+  id: string
+  title: string
+  content: string
+}
+
+export const Accordion: React.FC<{
+  items: AccordionItemData[]
+  defaultOpenId?: string
+  className?: string
+}> = ({ items, defaultOpenId, className }) => {
+  const [openId, setOpenId] = React.useState<string | null>(
+    defaultOpenId ?? items[0]?.id ?? null
+  )
+  return (
+    <div
+      className={cn(
+        "w-full divide-y divide-zinc-200 rounded-xl border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      {items.map((item) => {
+        const isOpen = openId === item.id
+        return (
+          <div key={item.id}>
+            <button
+              type="button"
+              onClick={() => setOpenId(isOpen ? null : item.id)}
+              className="flex w-full items-center justify-between px-4 py-3.5 text-left text-xs font-medium text-zinc-900 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800/50 cursor-pointer"
+            >
+              <span>{item.title}</span>
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 text-zinc-400 transition-transform",
+                  isOpen && "rotate-180"
+                )}
+              />
+            </button>
+            {isOpen && (
+              <div className="px-4 pb-3.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">
+                {item.content}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Announcement Pill Primitive
+export const Announcement: React.FC<{
+  tag?: string
+  title: string
+  href?: string
+  className?: string
+}> = ({ tag = "New", title, href = "#", className }) => (
+  <a
+    href={href}
+    className={cn(
+      "inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-700 shadow-2xs transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800",
+      className
+    )}
+  >
+    <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-500/20 dark:text-blue-300">
+      {tag}
+    </span>
+    <span className="font-medium">{title}</span>
+    <ArrowRight className="h-3 w-3 text-zinc-400" />
+  </a>
+)
+
+// Breadcrumb Primitive
+export const Breadcrumb: React.FC<{
+  items: Array<{ label: string; href?: string }>
+  className?: string
+}> = ({ items, className }) => (
+  <nav aria-label="Breadcrumb" className={cn("flex items-center gap-1.5 text-xs", className)}>
+    {items.map((item, idx) => {
+      const isLast = idx === items.length - 1
+      return (
+        <React.Fragment key={item.label}>
+          {idx > 0 && <ChevronRight className="h-3.5 w-3.5 text-zinc-400 shrink-0" />}
+          {item.href && !isLast ? (
+            <a
+              href={item.href}
+              className="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+            >
+              {item.label}
+            </a>
+          ) : (
+            <span className="font-medium text-zinc-900 dark:text-zinc-100">
+              {item.label}
+            </span>
+          )}
+        </React.Fragment>
+      )
+    })}
+  </nav>
+)
+
+// Divider Primitive
+export const Divider: React.FC<{ label?: string; className?: string }> = ({
+  label,
+  className,
+}) => {
+  if (!label) {
+    return <hr className={cn("border-t border-zinc-200 dark:border-zinc-800", className)} />
+  }
+  return (
+    <div className={cn("relative flex items-center py-2", className)}>
+      <div className="grow border-t border-zinc-200 dark:border-zinc-800" />
+      <span className="mx-3 shrink text-[11px] font-medium text-zinc-400 uppercase tracking-wider">
+        {label}
+      </span>
+      <div className="grow border-t border-zinc-200 dark:border-zinc-800" />
+    </div>
+  )
+}
+
+// Pagination Primitive
+export const Pagination: React.FC<{
+  totalPages?: number
+  initialPage?: number
+  className?: string
+}> = ({ totalPages = 5, initialPage = 1, className }) => {
+  const [page, setPage] = React.useState(initialPage)
+  return (
+    <div className={cn("inline-flex items-center gap-1", className)}>
+      <button
+        type="button"
+        disabled={page <= 1}
+        onClick={() => setPage((p) => Math.max(1, p - 1))}
+        className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-40 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 cursor-pointer"
+      >
+        <ChevronLeft className="h-3.5 w-3.5" />
+      </button>
+      {Array.from({ length: totalPages }).map((_, idx) => {
+        const num = idx + 1
+        const active = num === page
+        return (
+          <button
+            key={num}
+            type="button"
+            onClick={() => setPage(num)}
+            className={cn(
+              "inline-flex h-8 w-8 items-center justify-center rounded-lg text-xs font-medium transition-colors cursor-pointer",
+              active
+                ? "bg-blue-600 text-white"
+                : "border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            )}
+          >
+            {num}
+          </button>
+        )
+      })}
+      <button
+        type="button"
+        disabled={page >= totalPages}
+        onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+        className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-40 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 cursor-pointer"
+      >
+        <ChevronRight className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}