@fayz-ai/ui 0.9.0 → 0.10.0

package/src/primitives/SearchCombobox.tsx

@@ -1,216 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import { createPortal } from 'react-dom'
-import { Search, Plus } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Reusable search combobox with keyboard navigation + optional create
-// ---------------------------------------------------------------------------
-
-export interface ComboboxOption {
-  id: string
-  label: string
-  subtitle?: string
-  price?: number
-  data?: Record<string, unknown>
-}
-
-interface SearchComboboxProps {
-  value: string
-  onChange: (value: string) => void
-  onSelect: (option: ComboboxOption) => void
-  options: ComboboxOption[]
-  placeholder?: string
-  autoFocus?: boolean
-  onBlurEmpty?: () => void
-  renderRight?: (option: ComboboxOption) => React.ReactNode
-  /** Show a "+ Create ..." option when search has no exact match */
-  allowCreate?: boolean
-  /** Called when user clicks the create option. Receives the current search text. */
-  onCreateNew?: (searchText: string) => void
-  /** Label for the create option (default: 'Create') */
-  createLabel?: string
-  className?: string
-  /** Minimal style — no border/bg, just underline on focus. For inline use. */
-  minimal?: boolean
-  /** Inline label shown when collapsed. Click reveals the search input. */
-  inlineLabel?: string
-  /** Icon for the inline label: 'search' (default) or 'plus' (for "add" actions) */
-  inlineIcon?: 'search' | 'plus'
-  /** Show a loading skeleton in the dropdown while results are being fetched */
-  loading?: boolean
-  /** Called when the input gains focus */
-  onFocus?: () => void
-}
-
-export function SearchCombobox({
-  value, onChange, onSelect, options, placeholder, autoFocus, onBlurEmpty,
-  renderRight, allowCreate, onCreateNew, createLabel = 'Create', className, minimal, inlineLabel, inlineIcon = 'search',
-  loading, onFocus: onFocusProp,
-}: SearchComboboxProps) {
-  const [open, setOpen] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const [expanded, setExpanded] = useState(!inlineLabel)
-  const [dropRect, setDropRect] = useState<DOMRect | null>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-
-  // When value is set externally (e.g. edit mode), auto-expand; collapse when cleared
-  useEffect(() => {
-    if (value && inlineLabel) setExpanded(true)
-    if (!value && inlineLabel && !open) setExpanded(false)
-  }, [value, open])
-
-  function updateRect() {
-    if (wrapperRef.current) setDropRect(wrapperRef.current.getBoundingClientRect())
-  }
-
-  // Show create option only when dropdown is open, has text, and no exact match
-  const showCreate = open && allowCreate && onCreateNew && value.trim().length > 0 &&
-    !options.some((o) => o.label.toLowerCase() === value.trim().toLowerCase())
-
-  const totalItems = options.length + (showCreate ? 1 : 0)
-
-  useEffect(() => { setActiveIndex(-1) }, [options])
-  useEffect(() => {
-    if ((options.length > 0 || showCreate || loading) && document.activeElement === inputRef.current) setOpen(true)
-  }, [options, showCreate, loading])
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (!open || totalItems === 0) {
-      if (e.key === 'ArrowDown' && totalItems > 0) {
-        e.preventDefault()
-        setOpen(true)
-        setActiveIndex(0)
-      }
-      return
-    }
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault()
-        setActiveIndex((prev) => (prev + 1) % totalItems)
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        setActiveIndex((prev) => (prev <= 0 ? totalItems - 1 : prev - 1))
-        break
-      case 'Enter':
-        e.preventDefault()
-        if (activeIndex >= 0 && activeIndex < options.length) {
-          onSelect(options[activeIndex])
-          setOpen(false)
-          setActiveIndex(-1)
-        } else if (showCreate && activeIndex === options.length) {
-          onCreateNew?.(value.trim())
-          setOpen(false)
-          setActiveIndex(-1)
-        }
-        break
-      case 'Escape':
-        e.preventDefault()
-        setOpen(false)
-        setActiveIndex(-1)
-        break
-    }
-  }, [open, options, totalItems, activeIndex, onSelect, showCreate, onCreateNew, value])
-
-  useEffect(() => {
-    if (activeIndex < 0 || !listRef.current) return
-    const items = listRef.current.children
-    if (items[activeIndex]) (items[activeIndex] as HTMLElement).scrollIntoView({ block: 'nearest' })
-  }, [activeIndex])
-
-  function handleBlur() {
-    setTimeout(() => {
-      setOpen(false)
-      setActiveIndex(-1)
-      if (!value && onBlurEmpty) onBlurEmpty()
-      if (!value && inlineLabel) setExpanded(false)
-    }, 200)
-  }
-
-  const hasDropdown = open && (options.length > 0 || showCreate || loading)
-
-  // Collapsed inline label — click to expand
-  if (!expanded && inlineLabel) {
-    const isPlus = inlineIcon === 'plus'
-    return (
-      <button type="button" onClick={() => { setExpanded(true); setTimeout(() => inputRef.current?.focus(), 50) }}
-        className={`flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 transition-colors ${
-          isPlus ? 'text-primary hover:text-primary/80' : 'text-muted-foreground hover:text-foreground'
-        } ${className ?? ''}`}>
-        {isPlus && <Plus className="h-3.5 w-3.5 shrink-0" />}
-        {inlineLabel}
-      </button>
-    )
-  }
-
-  return (
-    <div ref={wrapperRef} className={`relative ${className ?? ''}`}>
-      {!minimal && (
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-      )}
-      <input
-        ref={inputRef}
-        type="text"
-        value={value}
-        onChange={(e) => { onChange(e.target.value); updateRect(); setOpen(true) }}
-        onFocus={() => { updateRect(); onFocusProp?.(); if (options.length > 0 || showCreate || loading) setOpen(true) }}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-        className={minimal
-          ? 'w-full bg-transparent pl-2 pr-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors'
-          : 'w-full rounded-lg border bg-background pl-8 pr-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring'
-        }
-        role="combobox"
-        aria-expanded={hasDropdown}
-        aria-autocomplete="list"
-        aria-activedescendant={activeIndex >= 0 ? `combobox-opt-${activeIndex}` : undefined}
-      />
-      {hasDropdown && dropRect && createPortal(
-        <div ref={listRef} role="listbox" data-modal-passthrough
-          style={{ position: 'fixed', left: dropRect.left, top: dropRect.bottom + 4, width: dropRect.width, zIndex: 9999, pointerEvents: 'auto' }}
-          className="fayz-glass-surface max-h-52 overflow-y-auto rounded-lg border bg-popover shadow-lg py-0.5 animate-in fade-in zoom-in-95 duration-100">
-          {loading && options.length === 0 && (
-            <div className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground">
-              <svg className="h-3.5 w-3.5 animate-spin shrink-0" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
-                <path d="M14.5 8a6.5 6.5 0 00-6.5-6.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-              </svg>
-              <span>Buscando…</span>
-            </div>
-          )}
-          {options.map((opt, i) => (
-            <div key={opt.id} id={`combobox-opt-${i}`} role="option" aria-selected={i === activeIndex}
-              onMouseDown={(e) => { e.preventDefault(); onSelect(opt); setOpen(false) }}
-              onMouseEnter={() => setActiveIndex(i)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors ${
-                i === activeIndex ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
-              }`}>
-              <div className="flex-1 min-w-0">
-                <p className="truncate font-medium">{opt.label}</p>
-                {opt.subtitle && <p className="truncate text-[11px] text-muted-foreground">{opt.subtitle}</p>}
-              </div>
-              {renderRight && <div className="shrink-0">{renderRight(opt)}</div>}
-            </div>
-          ))}
-          {showCreate && (
-            <div id={`combobox-opt-${options.length}`} role="option" aria-selected={activeIndex === options.length}
-              onMouseDown={(e) => { e.preventDefault(); onCreateNew?.(value.trim()); setOpen(false) }}
-              onMouseEnter={() => setActiveIndex(options.length)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors border-t ${
-                activeIndex === options.length ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
-              }`}>
-              <Plus className="h-3.5 w-3.5 shrink-0" />
-              <span>{createLabel} &ldquo;<span className="font-medium">{value.trim()}</span>&rdquo;</span>
-            </div>
-          )}
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}

package/src/primitives/badge.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../utils/cn'
-
-const badgeVariants = cva(
-  'inline-flex items-center gap-1.5 rounded px-2 py-0.5 text-xs font-medium leading-[18px] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted text-muted-foreground',
-        secondary: 'bg-muted text-muted-foreground',
-        info: 'bg-info-soft text-info-soft-foreground',
-        success: 'bg-success-soft text-success-soft-foreground',
-        warning: 'bg-warning-soft text-warning-soft-foreground',
-        destructive: 'bg-destructive-soft text-destructive-soft-foreground',
-        magic: 'bg-magic-soft text-magic-soft-foreground',
-        strong: 'bg-primary text-primary-foreground',
-        outline: 'border border-border text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-const VARIANTS_WITH_DOT = new Set([
-  'info',
-  'success',
-  'warning',
-  'destructive',
-  'magic',
-])
-
-const DOT_COLOR: Record<string, string> = {
-  info: 'hsl(var(--info))',
-  success: 'hsl(var(--success))',
-  warning: 'hsl(var(--warning))',
-  destructive: 'hsl(var(--destructive))',
-  magic: 'hsl(var(--magic))',
-}
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {
-  // Show a leading status dot. Defaults to true for status variants
-  // (info/success/warning/destructive/magic), false for neutral/outline/strong.
-  dot?: boolean
-}
-
-function Badge({ className, variant, dot, children, ...props }: BadgeProps) {
-  const v = variant ?? 'default'
-  const showDot = dot ?? VARIANTS_WITH_DOT.has(v)
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props}>
-      {showDot && (
-        <span
-          className="inline-block size-1.5 rounded-full"
-          style={{ background: DOT_COLOR[v] ?? 'currentColor' }}
-        />
-      )}
-      {children}
-    </div>
-  )
-}
-
-export { Badge, badgeVariants }

package/src/primitives/breadcrumb.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react'
-import { ArrowLeft } from 'lucide-react'
-import { useBackHandler } from '../layout/SaveBar'
-import { useCrossModuleBack } from '../layout/useCrossModuleBack'
-
-interface BreadcrumbProps {
-  /** Parent label (e.g. "Invoices", "Clients") — clicking navigates back */
-  parent: string
-  /** Current item name (e.g. "Invoice #123", "John Doe") */
-  current?: string
-  /** Navigate back handler */
-  onBack: () => void
-}
-
-export function Breadcrumb({ parent, current, onBack }: BreadcrumbProps) {
-  // When the user came from another module, point "back" at that actual
-  // previous page; otherwise keep this page's own parent/onBack.
-  const { onBack: effectiveOnBack, parentLabel: effectiveParent } = useCrossModuleBack(onBack, parent)
-  // Wire this page's back action into the app-wide Escape key (no per-plugin code).
-  useBackHandler(effectiveOnBack)
-  return (
-    <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
-      <button
-        type="button"
-        onClick={effectiveOnBack}
-        className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
-      >
-        <ArrowLeft className="h-3.5 w-3.5" />
-        {effectiveParent}
-      </button>
-      {current !== undefined && (
-        <>
-          <span>/</span>
-          {current ? (
-            <span className="text-foreground font-medium truncate max-w-[200px]">{current}</span>
-          ) : (
-            <span className="inline-block h-4 w-24 rounded bg-muted animate-pulse align-middle" />
-          )}
-        </>
-      )}
-    </nav>
-  )
-}

package/src/primitives/button.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../utils/cn'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-button text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        // Polaris primary — near-black brand with the stronger primary bevel
-        default:
-          'bg-primary text-primary-foreground border border-primary shadow-button-primary hover:bg-primary/90 active:shadow-button-inset',
-        destructive:
-          'bg-destructive text-destructive-foreground border border-destructive shadow-button-primary hover:bg-destructive/90 active:shadow-button-inset',
-        // Default/secondary surface — white with hairline + bevel
-        outline:
-          'border border-border bg-card text-foreground shadow-button hover:bg-muted active:shadow-button-inset',
-        secondary:
-          'border border-border bg-card text-foreground shadow-button hover:bg-muted active:shadow-button-inset',
-        ghost: 'hover:bg-muted hover:text-foreground',
-        link: 'text-info underline-offset-4 hover:underline',
-      },
-      size: {
-        // Polaris button sizes: md 30px, sm 26px, lg 36px
-        default: 'h-[30px] px-3 py-1',
-        sm: 'h-[26px] rounded-button px-2.5 text-xs',
-        lg: 'h-9 rounded-button px-4 text-sm',
-        icon: 'h-[30px] w-[30px]',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }

package/src/primitives/card.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../utils/cn'
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'fayz-glass-surface rounded-card border bg-card text-card-foreground shadow-sm',
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1 p-4', className)}
-    {...props}
-  />
-))
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      'text-sm font-semibold leading-tight tracking-tight',
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-xs text-muted-foreground', className)}
-    {...props}
-  />
-))
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
-))
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex items-center p-4 pt-0', className)}
-    {...props}
-  />
-))
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/primitives/checkbox.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { Check } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-type CheckboxColor = 'primary' | 'success' | 'warning' | 'destructive'
-
-interface CheckboxProps {
-  checked?: boolean
-  onChange?: (checked: boolean) => void
-  disabled?: boolean
-  className?: string
-  color?: CheckboxColor
-  id?: string
-}
-
-const COLOR_CLASSES: Record<CheckboxColor, string> = {
-  primary: 'border-primary bg-primary text-primary-foreground',
-  success: 'border-success bg-success text-white dark:border-success dark:bg-success',
-  warning: 'border-warning bg-warning text-white',
-  destructive: 'border-destructive bg-destructive text-destructive-foreground',
-}
-
-const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-  ({ checked = false, onChange, disabled, className, color = 'primary', id, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        id={id}
-        type="button"
-        role="checkbox"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={() => onChange?.(!checked)}
-        className={cn(
-          'peer inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border-2 transition-all duration-150',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          checked
-            ? `${COLOR_CLASSES[color]} shadow-sm`
-            : 'border-muted-foreground/40 bg-background hover:border-muted-foreground/60',
-          className,
-        )}
-        {...props}
-      >
-        {checked && <Check className="h-3.5 w-3.5" strokeWidth={3} />}
-      </button>
-    )
-  },
-)
-Checkbox.displayName = 'Checkbox'
-
-export { Checkbox }
-export type { CheckboxColor, CheckboxProps }

package/src/primitives/confirm-dialog.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-import { AlertTriangle, Info, CheckCircle2, XCircle } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from './button'
-
-type ConfirmVariant = 'default' | 'destructive' | 'warning' | 'success'
-
-interface ConfirmDialogProps {
-  open: boolean
-  onConfirm: () => void
-  onCancel: () => void
-  title: string
-  description?: string
-  confirmLabel?: string
-  cancelLabel?: string
-  variant?: ConfirmVariant
-  loading?: boolean
-}
-
-const VARIANT_CONFIG: Record<
-  ConfirmVariant,
-  {
-    icon: React.ElementType
-    iconBg: string
-    iconColor: string
-    buttonVariant: 'default' | 'destructive'
-  }
-> = {
-  default: {
-    icon: Info,
-    iconBg: 'bg-info/10',
-    iconColor: 'text-info',
-    buttonVariant: 'default',
-  },
-  destructive: {
-    icon: XCircle,
-    iconBg: 'bg-destructive/10',
-    iconColor: 'text-destructive',
-    buttonVariant: 'destructive',
-  },
-  warning: {
-    icon: AlertTriangle,
-    iconBg: 'bg-warning/10',
-    iconColor: 'text-warning',
-    buttonVariant: 'destructive',
-  },
-  success: {
-    icon: CheckCircle2,
-    iconBg: 'bg-success/10',
-    iconColor: 'text-success',
-    buttonVariant: 'default',
-  },
-}
-
-export function ConfirmDialog({
-  open,
-  onConfirm,
-  onCancel,
-  title,
-  description,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  variant = 'default',
-  loading = false,
-}: ConfirmDialogProps) {
-  const config = VARIANT_CONFIG[variant]
-  const Icon = config.icon
-
-  React.useEffect(() => {
-    if (!open) return
-    function handleKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onCancel()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onCancel])
-
-  if (!open) return null
-
-  return createPortal(
-    <div className="fixed inset-0 z-[60] flex items-center justify-center">
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-[2px] animate-fade-in"
-        onClick={onCancel}
-      />
-
-      <div
-        className="relative z-10 w-full max-w-sm mx-4 rounded-modal border border-border bg-card shadow-lg animate-zoom-in"
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="confirm-title"
-        aria-describedby={description ? 'confirm-desc' : undefined}
-      >
-        <div className="p-6">
-          <div className="flex gap-4">
-            <div className={cn('flex h-10 w-10 items-center justify-center rounded-full shrink-0', config.iconBg)}>
-              <Icon className={cn('h-5 w-5', config.iconColor)} />
-            </div>
-            <div className="min-w-0 pt-0.5">
-              <h3 id="confirm-title" className="text-sm font-semibold text-foreground">
-                {title}
-              </h3>
-              {description && (
-                <p id="confirm-desc" className="text-xs text-muted-foreground mt-1 leading-relaxed">
-                  {description}
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="flex justify-end gap-2 mt-5">
-            <Button variant="outline" size="sm" onClick={onCancel} disabled={loading}>
-              {cancelLabel}
-            </Button>
-            <Button variant={config.buttonVariant} size="sm" onClick={onConfirm} disabled={loading}>
-              {loading ? 'Processing...' : confirmLabel}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  )
-}