@fayz-ai/ui 0.9.0-next.1 → 0.10.0

package/src/primitives/dropdown.tsx

@@ -1,196 +0,0 @@
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
-
-import { cn } from '../utils/cn'
-
-const Dropdown = DropdownMenuPrimitive.Root
-
-const DropdownTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownGroup = DropdownMenuPrimitive.Group
-
-const DropdownPortal = DropdownMenuPrimitive.Portal
-
-const DropdownSub = DropdownMenuPrimitive.Sub
-
-const DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-DropdownSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
-  )
-}
-DropdownShortcut.displayName = 'DropdownShortcut'
-
-export {
-  Dropdown,
-  DropdownTrigger,
-  DropdownContent,
-  DropdownItem,
-  DropdownCheckboxItem,
-  DropdownRadioItem,
-  DropdownLabel,
-  DropdownSeparator,
-  DropdownShortcut,
-  DropdownGroup,
-  DropdownPortal,
-  DropdownSub,
-  DropdownSubContent,
-  DropdownSubTrigger,
-  DropdownRadioGroup,
-}

package/src/primitives/index.ts

@@ -1,87 +0,0 @@
-export { Button, buttonVariants, type ButtonProps } from './button'
-export { Input, type InputProps } from './input'
-export { Badge, badgeVariants, type BadgeProps } from './badge'
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from './card'
-export {
-  Modal,
-  ModalPortal,
-  ModalOverlay,
-  ModalClose,
-  ModalTrigger,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalTitle,
-  ModalDescription,
-  type ModalSize,
-} from './modal'
-export {
-  Dropdown,
-  DropdownTrigger,
-  DropdownContent,
-  DropdownItem,
-  DropdownCheckboxItem,
-  DropdownRadioItem,
-  DropdownLabel,
-  DropdownSeparator,
-  DropdownShortcut,
-  DropdownGroup,
-  DropdownPortal,
-  DropdownSub,
-  DropdownSubContent,
-  DropdownSubTrigger,
-  DropdownRadioGroup,
-} from './dropdown'
-export { DataTable, type DataTableProps } from './data-table'
-export { Checkbox, type CheckboxColor, type CheckboxProps } from './checkbox'
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetBody,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-} from './sheet'
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-} from './select'
-export { ToastProvider, toast } from './toast'
-export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'
-export { Separator } from './separator'
-export { PhoneLink, normalizePhone, type PhoneLinkProps, type NormalizedPhone } from './phone-link'
-export { Breadcrumb } from './breadcrumb'
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
-export { TimePicker } from './time-picker'
-export { Skeleton, TableSkeleton } from './skeleton'
-export { ListView } from './list-view'
-export { DatePicker } from './date-picker'
-export { SearchSelect, type SearchSelectOption, type SearchSelectProps } from './search-select'
-export { CurrencyInput } from './currency-input'
-export { ConfirmDialog } from './confirm-dialog'
-export { Popover, PopoverTrigger, PopoverContent } from './popover'
-export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './segmented-control'
-export { Markdown, renderMarkdown, type MarkdownProps } from './markdown'
-export { MarkdownEditor, type MarkdownEditorProps } from './markdown-editor'
-export { SearchCombobox, type ComboboxOption } from './SearchCombobox'

package/src/primitives/input.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../utils/cn'
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  error?: string
-  description?: string
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, error, description, id, ...props }, ref) => {
-    const inputId = id ?? React.useId()
-    const descriptionId = description ? `${inputId}-description` : undefined
-    const errorId = error ? `${inputId}-error` : undefined
-
-    return (
-      <div className="w-full">
-        <input
-          type={type}
-          id={inputId}
-          className={cn(
-            'flex h-8 w-full rounded-input border border-input bg-card px-2 py-1 text-sm text-foreground shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-            error && 'border-destructive focus-visible:ring-destructive',
-            className,
-          )}
-          ref={ref}
-          aria-invalid={error ? true : undefined}
-          aria-describedby={
-            [descriptionId, errorId].filter(Boolean).join(' ') || undefined
-          }
-          {...props}
-        />
-        {description && !error && (
-          <p id={descriptionId} className="mt-1.5 text-xs text-muted-foreground">
-            {description}
-          </p>
-        )}
-        {error && (
-          <p id={errorId} className="mt-1.5 text-xs text-destructive">
-            {error}
-          </p>
-        )}
-      </div>
-    )
-  }
-)
-Input.displayName = 'Input'
-
-export { Input }

package/src/primitives/list-view.tsx

@@ -1,252 +0,0 @@
-import * as React from 'react'
-import { useState, useCallback, useRef, useEffect } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Search, Plus, ChevronLeft, ChevronRight } from 'lucide-react'
-import { DataTable } from './data-table'
-import { Button } from './button'
-import { cn } from '../utils/cn'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface TagFilter {
-  value: string
-  label: string
-}
-
-export interface ListViewProps<TData> {
-  /** TanStack column definitions */
-  columns: ColumnDef<TData, any>[]
-  /** Data rows */
-  data: TData[]
-  /** Loading state — shows skeleton */
-  loading?: boolean
-
-  // ── Search ──
-  /** Placeholder for search input (default: "Search...") */
-  searchPlaceholder?: string
-  /** Controlled search value */
-  search?: string
-  /** Called on search change (debounced internally if onSearchDebounced is used) */
-  onSearchChange?: (value: string) => void
-  /** Debounce delay in ms (default: 300). Set 0 for no debounce. */
-  searchDebounce?: number
-
-  // ── Tag filters ──
-  /** Available filter tags (e.g. status values, types) */
-  tags?: TagFilter[]
-  /** "All" label (default: "All") */
-  allTagLabel?: string
-  /** Currently active tag value (undefined = all) */
-  activeTag?: string
-  /** Called when a tag is selected (undefined = all) */
-  onTagChange?: (value: string | undefined) => void
-
-  // ── CTA button ──
-  /** Label for the "New" button (e.g. "New Product") */
-  newLabel?: string
-  /** Called when the "New" button is clicked */
-  onNew?: () => void
-
-  // ── Row interaction ──
-  /** Called when a row is clicked */
-  onRowClick?: (row: TData) => void
-
-  // ── Empty state ──
-  /** Icon component for the empty state */
-  emptyIcon?: React.ComponentType<{ className?: string }>
-  /** Empty state message */
-  emptyMessage?: string
-  /** Empty state action label (e.g. "Create your first product") */
-  emptyActionLabel?: string
-  /** Called when the empty action is clicked */
-  onEmptyAction?: () => void
-
-  // ── Pagination ──
-  /** Total item count (enables pagination when > pageSize) */
-  total?: number
-  /** Current page (1-indexed) */
-  page?: number
-  /** Page size (default: 25) */
-  pageSize?: number
-  /** Called when page changes */
-  onPageChange?: (page: number) => void
-
-  // ── Extra ──
-  /** Additional content rendered between filters and table */
-  toolbar?: React.ReactNode
-  /** CSS class for the outer wrapper */
-  className?: string
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function ListView<TData>({
-  columns,
-  data,
-  loading = false,
-  searchPlaceholder = 'Search...',
-  search: controlledSearch,
-  onSearchChange,
-  searchDebounce = 300,
-  tags,
-  allTagLabel = 'All',
-  activeTag,
-  onTagChange,
-  newLabel,
-  onNew,
-  onRowClick,
-  emptyIcon: EmptyIcon,
-  emptyMessage = 'No results found.',
-  emptyActionLabel,
-  onEmptyAction,
-  total,
-  page = 1,
-  pageSize = 25,
-  onPageChange,
-  toolbar,
-  className,
-}: ListViewProps<TData>) {
-  // Internal search state for debouncing
-  const [internalSearch, setInternalSearch] = useState(controlledSearch ?? '')
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>()
-
-  // Sync controlled → internal
-  useEffect(() => {
-    if (controlledSearch !== undefined) setInternalSearch(controlledSearch)
-  }, [controlledSearch])
-
-  const handleSearchChange = useCallback((value: string) => {
-    setInternalSearch(value)
-    if (searchDebounce === 0) {
-      onSearchChange?.(value)
-    } else {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-      debounceRef.current = setTimeout(() => onSearchChange?.(value), searchDebounce)
-    }
-  }, [onSearchChange, searchDebounce])
-
-  // Pagination
-  const totalItems = total ?? data.length
-  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize))
-  const showPagination = onPageChange && totalItems > pageSize
-
-  const showSearch = !!onSearchChange
-  const showTags = tags && tags.length > 0 && onTagChange
-  const showToolbar = showSearch || onNew || showTags
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {/* ── Search + CTA row ── */}
-      {showToolbar && (
-        <div className="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
-          {showSearch && (
-            <div className="relative flex-1 max-w-sm">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-              <input
-                type="text"
-                placeholder={searchPlaceholder}
-                value={internalSearch}
-                onChange={(e) => handleSearchChange(e.target.value)}
-                className="w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] pl-8 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              />
-            </div>
-          )}
-          {onNew && newLabel && (
-            <Button variant="default" size="default" onClick={onNew} className="shrink-0">
-              <Plus className="h-3.5 w-3.5" />
-              {newLabel}
-            </Button>
-          )}
-        </div>
-      )}
-
-      {/* ── Tag filters ── */}
-      {showTags && (
-        <div className="flex gap-1.5 flex-wrap">
-          <button
-            onClick={() => onTagChange!(undefined)}
-            className={cn(
-              'rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
-              !activeTag
-                ? 'bg-primary text-primary-foreground'
-                : 'bg-muted/50 text-muted-foreground hover:bg-muted'
-            )}
-          >
-            {allTagLabel}
-          </button>
-          {tags!.map((tag) => (
-            <button
-              key={tag.value}
-              onClick={() => onTagChange!(tag.value)}
-              className={cn(
-                'rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
-                activeTag === tag.value
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted/50 text-muted-foreground hover:bg-muted'
-              )}
-            >
-              {tag.label}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* ── Extra toolbar ── */}
-      {toolbar}
-
-      {/* ── Table / Empty / Loading ── */}
-      {loading ? (
-        <DataTable columns={columns} data={[]} loading variant="card" />
-      ) : data.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-12 text-center rounded-lg border-2 border-dashed border-muted">
-          {EmptyIcon && <EmptyIcon className="h-8 w-8 text-muted-foreground/30 mb-2" />}
-          <p className="text-sm text-muted-foreground">{emptyMessage}</p>
-          {emptyActionLabel && onEmptyAction && (
-            <button onClick={onEmptyAction} className="text-xs text-primary hover:underline mt-1">
-              {emptyActionLabel}
-            </button>
-          )}
-        </div>
-      ) : (
-        <DataTable
-          columns={columns}
-          data={data}
-          onRowClick={onRowClick}
-          variant="card"
-        />
-      )}
-
-      {/* ── Pagination ── */}
-      {showPagination && (
-        <div className="flex items-center justify-between px-1">
-          <p className="text-xs text-muted-foreground">
-            {((page - 1) * pageSize) + 1}–{Math.min(page * pageSize, totalItems)} of {totalItems}
-          </p>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => onPageChange!(page - 1)}
-              disabled={page <= 1}
-              className="flex h-7 w-7 items-center justify-center rounded-md border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-            >
-              <ChevronLeft className="h-3.5 w-3.5" />
-            </button>
-            <span className="text-xs text-muted-foreground px-2">
-              {page} / {totalPages}
-            </span>
-            <button
-              onClick={() => onPageChange!(page + 1)}
-              disabled={page >= totalPages}
-              className="flex h-7 w-7 items-center justify-center rounded-md border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-            >
-              <ChevronRight className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/primitives/markdown-editor.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-import { SegmentedControl } from './segmented-control'
-import { Markdown } from './markdown'
-
-export interface MarkdownEditorProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  /** Minimum visible rows for the textarea. */
-  minRows?: number
-  defaultMode?: 'edit' | 'preview'
-  /** i18n injection — ui stays locale-agnostic. */
-  editLabel?: string
-  previewLabel?: string
-  /** Custom preview renderer — e.g. a social-post mockup instead of plain
-   *  markdown. Defaults to the built-in Markdown renderer. */
-  renderPreview?: (value: string) => React.ReactNode
-  className?: string
-}
-
-/**
- * Markdown editor with an edit/preview toggle. Plain textarea + the zero-dep
- * Markdown renderer — deliberately not a block/WYSIWYG editor (that's a later
- * milestone); this covers script/brief documents today.
- */
-export function MarkdownEditor({
-  value,
-  onChange,
-  placeholder,
-  minRows = 16,
-  defaultMode = 'preview',
-  editLabel = 'Edit',
-  previewLabel = 'Preview',
-  renderPreview,
-  className,
-}: MarkdownEditorProps) {
-  const [mode, setMode] = React.useState<'edit' | 'preview'>(
-    defaultMode === 'preview' && value.trim() === '' ? 'edit' : defaultMode,
-  )
-  return (
-    <div className={cn('flex flex-col gap-2', className)}>
-      <div className="flex justify-end">
-        <SegmentedControl
-          aria-label="Markdown mode"
-          options={[
-            { value: 'edit', label: editLabel },
-            { value: 'preview', label: previewLabel },
-          ]}
-          value={mode}
-          onChange={(m) => setMode(m as 'edit' | 'preview')}
-        />
-      </div>
-      {mode === 'edit' ? (
-        <textarea
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          rows={Math.max(minRows, value.split('\n').length + 1)}
-          className={cn(
-            'w-full resize-y rounded-md border border-border bg-card p-3',
-            'font-mono text-[13px] leading-relaxed text-foreground',
-            'placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring',
-          )}
-        />
-      ) : renderPreview ? (
-        renderPreview(value)
-      ) : (
-        <div className="rounded-md border border-border bg-card p-4">
-          <Markdown source={value} />
-        </div>
-      )}
-    </div>
-  )
-}