@otfdashkit/ui 0.1.0

package/src/components/data-table.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table'
+import { ArrowUpDown, ArrowUp, ArrowDown, ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import { Input } from '../primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
+import { Skeleton } from '../primitives/skeleton'
+
+interface DataTableProps<T> {
+  columns: ColumnDef<T>[]
+  data: T[]
+  pageSize?: number
+  searchable?: boolean
+  searchColumn?: string
+  loading?: boolean
+}
+
+export function DataTableColumnHeader({ column, title }: { column: any; title: string }) {
+  if (!column.getCanSort()) return <span>{title}</span>
+  const sorted = column.getIsSorted()
+  return (
+    <button
+      onClick={() => column.toggleSorting(sorted === 'asc')}
+      className="flex items-center gap-1 hover:text-[hsl(var(--foreground))]"
+    >
+      {title}
+      {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3 opacity-50" />}
+    </button>
+  )
+}
+
+export function DataTablePagination({ table }: { table: any }) {
+  return (
+    <div className="flex items-center justify-between px-2 py-3">
+      <span className="text-sm text-[hsl(var(--muted-foreground))]">
+        Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+      </span>
+      <div className="flex items-center gap-2">
+        <Select
+          value={String(table.getState().pagination.pageSize)}
+          onValueChange={(v) => table.setPageSize(Number(v))}
+        >
+          <SelectTrigger className="h-8 w-[70px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {[10, 20, 50].map((n) => <SelectItem key={n} value={String(n)}>{n}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function DataTableToolbar({ table, searchColumn }: { table: any; searchColumn?: string }) {
+  if (!searchColumn) return null
+  return (
+    <div className="py-3">
+      <Input
+        placeholder="Search..."
+        value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ''}
+        onChange={(e) => table.getColumn(searchColumn)?.setFilterValue(e.target.value)}
+        className="max-w-sm h-8"
+      />
+    </div>
+  )
+}
+
+export function DataTable<T>({ columns, data, pageSize = 10, searchable, searchColumn, loading }: DataTableProps<T>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    initialState: { pagination: { pageSize } },
+    state: { sorting },
+  })
+
+  if (loading) return (
+    <div className="space-y-2">
+      {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+    </div>
+  )
+
+  return (
+    <div className="w-full">
+      {searchable && <DataTableToolbar table={table} searchColumn={searchColumn} />}
+      <div className="rounded-md border border-[hsl(var(--border))] overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-[hsl(var(--muted)/0.4)]">
+            {table.getHeaderGroups().map((hg) => (
+              <tr key={hg.id}>
+                {hg.headers.map((h) => (
+                  <th key={h.id} className="px-4 py-3 text-left font-medium text-[hsl(var(--muted-foreground))]">
+                    {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row, i) => (
+              <tr key={row.id} className={cn('border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors', i % 2 === 0 ? '' : 'bg-[hsl(var(--muted)/0.1)]')}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-4 py-3">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {table.getRowModel().rows.length === 0 && (
+              <tr><td colSpan={columns.length} className="px-4 py-8 text-center text-[hsl(var(--muted-foreground))]">No results.</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  )
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+
+export const EmptyStateIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]', className)} {...props} />
+  )
+)
+EmptyStateIcon.displayName = 'EmptyStateIcon'
+
+interface EmptyStateProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: { label: string; onClick: () => void }
+  className?: string
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-3 py-12 text-center', className)}>
+      {icon && <EmptyStateIcon>{icon}</EmptyStateIcon>}
+      <div className="space-y-1">
+        <h3 className="font-semibold text-[hsl(var(--foreground))]">{title}</h3>
+        {description && <p className="text-sm text-[hsl(var(--muted-foreground))]">{description}</p>}
+      </div>
+      {action && <Button onClick={action.onClick} className="mt-1">{action.label}</Button>}
+    </div>
+  )
+}

package/src/components/hotkeys.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface HotkeyBadgeProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function HotkeyBadge({ children, className }: HotkeyBadgeProps) {
+  return (
+    <kbd className={cn(
+      'inline-flex items-center justify-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[11px] font-medium text-[hsl(var(--muted-foreground))] shadow-[0_1px_0_rgba(0,0,0,0.1)] min-w-[20px] h-5',
+      className
+    )}>
+      {children}
+    </kbd>
+  )
+}
+
+interface HotkeysProps {
+  keys: string[]
+  className?: string
+}
+
+export function Hotkeys({ keys, className }: HotkeysProps) {
+  return (
+    <span className={cn('inline-flex items-center gap-0.5', className)}>
+      {keys.map((key, i) => <HotkeyBadge key={i}>{key}</HotkeyBadge>)}
+    </span>
+  )
+}

package/src/components/icon-badge.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type IconBadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'purple'
+type IconBadgeSize = 'sm' | 'md' | 'lg'
+
+const colorMap: Record<IconBadgeColor, string> = {
+  default: 'bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]',
+  primary: 'bg-[hsl(var(--primary)/0.12)] text-[hsl(var(--primary))]',
+  success: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+  warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+  error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+}
+
+const sizeMap: Record<IconBadgeSize, string> = {
+  sm: 'h-7 w-7 [&>*]:h-3.5 [&>*]:w-3.5',
+  md: 'h-10 w-10 [&>*]:h-5 [&>*]:w-5',
+  lg: 'h-14 w-14 [&>*]:h-7 [&>*]:w-7',
+}
+
+interface IconBadgeProps {
+  icon: React.ReactNode
+  color?: IconBadgeColor
+  size?: IconBadgeSize
+  className?: string
+}
+
+export function IconBadge({ icon, color = 'default', size = 'md', className }: IconBadgeProps) {
+  return (
+    <div className={cn('inline-flex items-center justify-center rounded-full shrink-0', colorMap[color], sizeMap[size], className)}>
+      {icon}
+    </div>
+  )
+}

package/src/components/loading-overlay.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+interface LoadingOverlayProps {
+  loading: boolean
+  text?: string
+  fullPage?: boolean
+  children?: React.ReactNode
+  className?: string
+}
+
+export function LoadingOverlay({ loading, text, fullPage, children, className }: LoadingOverlayProps) {
+  if (fullPage) {
+    return loading ? (
+      <div className={cn('fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm', className)}>
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-[hsl(var(--primary))]" />
+          {text && <p className="text-sm text-[hsl(var(--muted-foreground))]">{text}</p>}
+        </div>
+      </div>
+    ) : null
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      {children}
+      {loading && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-[hsl(var(--background)/0.8)] backdrop-blur-[2px]">
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="h-6 w-6 animate-spin text-[hsl(var(--primary))]" />
+            {text && <p className="text-xs text-[hsl(var(--muted-foreground))]">{text}</p>}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/persona.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback, AvatarImage } from '../primitives/avatar'
+
+const sizeMap = {
+  sm: { avatar: 'h-7 w-7', name: 'text-sm', subtitle: 'text-xs' },
+  md: { avatar: 'h-9 w-9', name: 'text-sm font-medium', subtitle: 'text-xs' },
+  lg: { avatar: 'h-12 w-12', name: 'text-base font-medium', subtitle: 'text-sm' },
+}
+
+interface PersonaProps {
+  name: string
+  subtitle?: string
+  src?: string
+  size?: 'sm' | 'md' | 'lg'
+  badge?: React.ReactNode
+  className?: string
+}
+
+export function Persona({ name, subtitle, src, size = 'md', badge, className }: PersonaProps) {
+  const s = sizeMap[size]
+  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()
+  return (
+    <div className={cn('flex items-center gap-2.5', className)}>
+      <div className="relative shrink-0">
+        <Avatar className={s.avatar}>
+          {src && <AvatarImage src={src} alt={name} />}
+          <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+        </Avatar>
+        {badge && <div className="absolute -bottom-0.5 -right-0.5">{badge}</div>}
+      </div>
+      <div className="min-w-0">
+        <p className={cn('truncate text-[hsl(var(--foreground))]', s.name)}>{name}</p>
+        {subtitle && <p className={cn('truncate text-[hsl(var(--muted-foreground))]', s.subtitle)}>{subtitle}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/property-list.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface PropertyListProps extends React.HTMLAttributes<HTMLDListElement> {}
+
+export const PropertyList = React.forwardRef<HTMLDListElement, PropertyListProps>(
+  ({ className, ...props }, ref) => (
+    <dl ref={ref} className={cn('divide-y divide-[hsl(var(--border))]', className)} {...props} />
+  )
+)
+PropertyList.displayName = 'PropertyList'
+
+interface PropertyItemProps {
+  label: string
+  value: React.ReactNode
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+export function PropertyItem({ label, value, orientation = 'horizontal', className }: PropertyItemProps) {
+  return (
+    <div className={cn('py-3', orientation === 'horizontal' ? 'flex gap-4' : 'space-y-1', className)}>
+      <dt className={cn('text-sm font-medium text-[hsl(var(--muted-foreground))] shrink-0', orientation === 'horizontal' && 'w-[40%]')}>
+        {label}
+      </dt>
+      <dd className="text-sm text-[hsl(var(--foreground))] min-w-0">{value}</dd>
+    </div>
+  )
+}

package/src/components/stat.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Card, CardContent } from '../primitives/card'
+
+interface StatProps {
+  label: string
+  value: string | number
+  trend?: number
+  trendLabel?: string
+  icon?: React.ReactNode
+  description?: string
+  className?: string
+}
+
+export function Stat({ label, value, trend, trendLabel, icon, description, className }: StatProps) {
+  const isPositive = trend !== undefined && trend >= 0
+  return (
+    <Card className={cn('', className)}>
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between">
+          <div className="space-y-1 min-w-0">
+            <p className="text-sm font-medium text-[hsl(var(--muted-foreground))] truncate">{label}</p>
+            <p className="text-2xl font-bold text-[hsl(var(--foreground))]">{value}</p>
+          </div>
+          {icon && <div className="text-[hsl(var(--muted-foreground))] shrink-0 ml-2">{icon}</div>}
+        </div>
+        {(trend !== undefined || description) && (
+          <div className="mt-2 flex items-center gap-1">
+            {trend !== undefined && (
+              <span className={cn('flex items-center gap-0.5 text-xs font-medium', isPositive ? 'text-green-600' : 'text-red-600')}>
+                {isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+                {Math.abs(trend)}%
+              </span>
+            )}
+            {trendLabel && <span className="text-xs text-[hsl(var(--muted-foreground))]">{trendLabel}</span>}
+            {description && !trendLabel && <span className="text-xs text-[hsl(var(--muted-foreground))]">{description}</span>}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+interface StatGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function StatGroup({ className, ...props }: StatGroupProps) {
+  return (
+    <div className={cn('grid gap-4', className)} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 200px), 1fr))' }} {...props} />
+  )
+}

package/src/components/stepper.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+interface StepDef { title: string; description?: string }
+
+interface StepperStepProps extends StepDef {
+  index: number
+  current: number
+  total: number
+}
+
+export function StepperStep({ index, current, total, title, description }: StepperStepProps) {
+  const done = index < current
+  const active = index === current
+  const isLast = index === total - 1
+
+  return (
+    <div className="flex items-start gap-3 flex-1 min-w-0">
+      <div className="flex flex-col items-center shrink-0">
+        <div className={cn(
+          'h-8 w-8 rounded-full flex items-center justify-center border-2 text-sm font-semibold transition-colors',
+          done && 'bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
+          active && 'border-[hsl(var(--primary))] text-[hsl(var(--primary))] bg-transparent',
+          !done && !active && 'border-[hsl(var(--muted-foreground)/0.4)] text-[hsl(var(--muted-foreground))] bg-transparent',
+        )}>
+          {done ? <Check className="h-4 w-4" /> : index + 1}
+        </div>
+        {!isLast && <div className={cn('w-0.5 flex-1 min-h-[16px] mt-1', done ? 'bg-[hsl(var(--primary))]' : 'bg-[hsl(var(--border))]')} />}
+      </div>
+      <div className="min-w-0 pb-4">
+        <p className={cn('text-sm font-medium', active ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))]')}>{title}</p>
+        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>}
+      </div>
+    </div>
+  )
+}
+
+interface StepperProps {
+  currentStep: number
+  steps: StepDef[]
+  className?: string
+  /** 'horizontal' (default) | 'vertical' — vertical stacks steps as rows */
+  direction?: 'horizontal' | 'vertical'
+}
+
+export function Stepper({ currentStep, steps, className, direction = 'horizontal' }: StepperProps) {
+  if (direction === 'vertical' || (className && className.includes('flex-col'))) {
+    return (
+      <div className={cn('flex flex-col gap-0', className?.replace('flex-col', ''))}>
+        {steps.map((step, i) => (
+          <StepperStep key={i} {...step} index={i} current={currentStep} total={steps.length} />
+        ))}
+      </div>
+    )
+  }
+  return (
+    <div className={cn('flex gap-0', className)}>
+      {steps.map((step, i) => (
+        <div key={i} className={cn('flex items-start', i < steps.length - 1 && 'flex-1')}>
+          <StepperStep {...step} index={i} current={currentStep} total={steps.length} />
+          {i < steps.length - 1 && (
+            <div className={cn('flex-1 h-0.5 mt-4 mx-2', i < currentStep ? 'bg-[hsl(var(--primary))]' : 'bg-[hsl(var(--border))]')} />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/structured-list.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface StructuredListSectionProps {
+  title?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function StructuredListSection({ title, children, className }: StructuredListSectionProps) {
+  return (
+    <div className={cn('', className)}>
+      {title && <p className="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">{title}</p>}
+      <div className="rounded-md border border-[hsl(var(--border))] overflow-hidden divide-y divide-[hsl(var(--border))]">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface StructuredListItemProps {
+  left?: React.ReactNode
+  title: string
+  description?: string
+  right?: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+export function StructuredListItem({ left, title, description, right, onClick, className }: StructuredListItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn('flex items-center gap-3 px-4 py-3 bg-[hsl(var(--card))]', onClick && 'cursor-pointer hover:bg-[hsl(var(--muted)/0.5)] transition-colors', className)}
+    >
+      {left && <div className="shrink-0">{left}</div>}
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-[hsl(var(--foreground))] truncate">{title}</p>
+        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
+      </div>
+      {right && <div className="shrink-0 text-[hsl(var(--muted-foreground))]">{right}</div>}
+    </div>
+  )
+}
+
+interface StructuredListProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const StructuredList = React.forwardRef<HTMLDivElement, StructuredListProps>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('space-y-4', className)} {...props} />
+)
+StructuredList.displayName = 'StructuredList'

package/src/components/timeline.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type TimelineVariant = 'default' | 'success' | 'error' | 'warning'
+
+const dotColors: Record<TimelineVariant, string> = {
+  default: 'bg-[hsl(var(--primary))]',
+  success: 'bg-green-500',
+  error: 'bg-red-500',
+  warning: 'bg-yellow-500',
+}
+
+interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+export const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('pb-1', className)} {...props} />
+)
+TimelineContent.displayName = 'TimelineContent'
+
+export function TimelineConnector({ className }: { className?: string }) {
+  return <div className={cn('absolute left-[7px] top-5 bottom-0 w-0.5 bg-[hsl(var(--border))]', className)} />
+}
+
+interface TimelineItemProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  timestamp?: string
+  variant?: TimelineVariant
+  isLast?: boolean
+  className?: string
+}
+
+export function TimelineItem({ icon, title, description, timestamp, variant = 'default', isLast, className }: TimelineItemProps) {
+  return (
+    <div className={cn('relative flex gap-4', !isLast && 'pb-6', className)}>
+      <div className="relative flex-none">
+        <div className={cn('h-4 w-4 rounded-full border-2 border-[hsl(var(--background))] flex items-center justify-center mt-0.5', dotColors[variant])}>
+          {icon && <span className="text-white text-[8px]">{icon}</span>}
+        </div>
+        {!isLast && <TimelineConnector />}
+      </div>
+      <TimelineContent>
+        <div className="flex items-baseline justify-between gap-2">
+          <p className="text-sm font-medium text-[hsl(var(--foreground))]">{title}</p>
+          {timestamp && <span className="text-xs text-[hsl(var(--muted-foreground))] shrink-0">{timestamp}</span>}
+        </div>
+        {description && <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>}
+      </TimelineContent>
+    </div>
+  )
+}
+
+interface TimelineProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Timeline({ children, className }: TimelineProps) {
+  const items = React.Children.toArray(children)
+  return (
+    <div className={cn('', className)}>
+      {items.map((child, i) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as React.ReactElement<TimelineItemProps>, { isLast: i === items.length - 1 })
+          : child
+      )}
+    </div>
+  )
+}

package/src/components/toaster.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React from 'react'
+import { Toaster as SonnerToaster, toast } from 'sonner'
+import { useOtfUI } from '../provider/otf-ui-provider'
+
+export interface ToasterProps extends React.ComponentProps<typeof SonnerToaster> {}
+
+export function Toaster(props: ToasterProps) {
+  const ctx = useOtfUI?.()
+  const dark = ctx?.darkMode === 'dark'
+
+  return (
+    <SonnerToaster
+      theme={dark ? 'dark' : 'light'}
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          toast: [
+            'group flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm shadow-md',
+            'border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]',
+          ].join(' '),
+          title: 'font-semibold text-sm leading-snug',
+          description: 'text-xs text-[hsl(var(--muted-foreground))] mt-0.5 leading-snug',
+          actionButton: [
+            'mt-2 inline-flex items-center gap-1 text-xs font-medium',
+            'text-[hsl(var(--primary))] underline-offset-2 hover:underline',
+          ].join(' '),
+          cancelButton: 'mt-2 text-xs text-[hsl(var(--muted-foreground))] hover:opacity-80',
+          closeButton: 'text-[hsl(var(--muted-foreground))] opacity-60 hover:opacity-100 transition-opacity',
+          error: 'border-red-200/80 bg-red-50/60 dark:border-red-800/60 dark:bg-red-950/30',
+          success: 'border-green-200/80 bg-green-50/60 dark:border-green-800/60 dark:bg-green-950/30',
+          warning: 'border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30',
+          info: 'border-blue-200/80 bg-blue-50/60 dark:border-blue-800/60 dark:bg-blue-950/30',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { toast }

package/src/components/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../../utils/cn'