amliq-dashboard 2.0.0

package/src/components/screening/ShareResults.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Share2, MessageCircle, Linkedin, Mail, Copy, Check } from 'lucide-react'
+import type { ScreenResponse } from '../../types'
+
+interface Props {
+  data: ScreenResponse
+}
+
+function buildSummary(data: ScreenResponse): string {
+  const matches = data.matches ?? []
+  if (matches.length === 0) {
+    return `AMLIQ Screening Report\n\nEntity: ${data.query}\nResult: CLEAR - No sanctions matches found\nProcessing: ${data.processing_time_ms ?? 0}ms\n\nScreened by AMLIQ - AI-Enhanced Sanctions Screening\nhttps://amliq.finance`
+  }
+  const top = matches.slice(0, 3)
+  const lines = top.map(
+    (m) => `- ${m.entity_name} (${m.list_id}) — ${(m.confidence * 100).toFixed(0)}% confidence`,
+  )
+  return `AMLIQ Screening Report\n\nEntity: ${data.query}\nMatches: ${data.total_matches ?? matches.length}\n${lines.join('\n')}\nProcessing: ${data.processing_time_ms ?? 0}ms\n\nScreened by AMLIQ - AI-Enhanced Sanctions Screening\nhttps://amliq.finance`
+}
+
+function buildSubject(data: ScreenResponse): string {
+  const count = data.total_matches ?? data.matches?.length ?? 0
+  return count === 0
+    ? `AMLIQ: ${data.query} — CLEAR`
+    : `AMLIQ: ${data.query} — ${count} match${count > 1 ? 'es' : ''} found`
+}
+
+export function ShareResults({ data }: Props) {
+  const [copied, setCopied] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const summary = buildSummary(data)
+  const subject = buildSubject(data)
+  const encoded = encodeURIComponent(summary)
+  const encodedSubject = encodeURIComponent(subject)
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(summary)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const channels = [
+    {
+      name: 'WhatsApp',
+      icon: MessageCircle,
+      color: 'hover:bg-[#25D366]/20 hover:text-[#25D366]',
+      href: `https://wa.me/?text=${encoded}`,
+    },
+    {
+      name: 'LinkedIn',
+      icon: Linkedin,
+      color: 'hover:bg-[#0A66C2]/20 hover:text-[#0A66C2]',
+      href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://amliq.finance')}&summary=${encoded}`,
+    },
+    {
+      name: 'Email',
+      icon: Mail,
+      color: 'hover:bg-apple-blue/20 hover:text-apple-blue',
+      href: `mailto:?subject=${encodedSubject}&body=${encoded}`,
+    },
+  ]
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-xs px-md py-sm rounded-apple-md border border-white/10 hover:bg-white/5 text-apple-label-secondary hover:text-white transition-colors cursor-pointer text-sm"
+      >
+        <Share2 className="w-4 h-4" />
+        Share
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-sm z-50 w-56 rounded-apple-lg border border-white/10 bg-apple-bg-secondary shadow-xl p-sm">
+          <p className="text-xs text-apple-label-tertiary px-md py-xs mb-xs">
+            Share screening results
+          </p>
+          {channels.map((ch) => (
+            <a
+              key={ch.name}
+              href={ch.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => setOpen(false)}
+              className={`flex items-center gap-md px-md py-sm rounded-apple-md text-sm text-apple-label-secondary transition-colors ${ch.color}`}
+            >
+              <ch.icon className="w-4 h-4" />
+              {ch.name}
+            </a>
+          ))}
+          <button
+            onClick={copyToClipboard}
+            className="flex items-center gap-md px-md py-sm rounded-apple-md text-sm text-apple-label-secondary hover:bg-white/10 hover:text-white transition-colors w-full cursor-pointer"
+          >
+            {copied ? <Check className="w-4 h-4 text-apple-green" /> : <Copy className="w-4 h-4" />}
+            {copied ? 'Copied!' : 'Copy to clipboard'}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/screening/ThresholdSlider.tsx

@@ -0,0 +1,23 @@
+interface ThresholdSliderProps {
+  value: number
+  onChange: (v: number) => void
+}
+
+export function ThresholdSlider({ value, onChange }: ThresholdSliderProps) {
+  return (
+    <div className="mt-lg">
+      <label className="sf-caption text-white/60 flex justify-between">
+        <span>Confidence Threshold</span>
+        <span className="font-semibold text-white">{value}%</span>
+      </label>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-full mt-sm accent-apple-blue"
+      />
+    </div>
+  )
+}

package/src/components/transactions/WebhookCTA.tsx

@@ -0,0 +1,63 @@
+import { useNavigate } from 'react-router-dom'
+import { Webhook, ArrowRight, Zap, Shield, Code } from 'lucide-react'
+
+const STEPS = [
+  { icon: Code, title: 'Get your API key', desc: 'Generate a key from Settings > API Keys' },
+  { icon: Webhook, title: 'Configure webhook', desc: 'Point your payment system to our endpoint' },
+  { icon: Zap, title: 'Screen in real-time', desc: 'Every transaction is screened automatically' },
+] as const
+
+export function WebhookCTA() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="rounded-apple-lg border border-white/[0.08] bg-gradient-to-br from-apple-blue/[0.06] to-transparent p-xl text-center">
+      <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-apple-blue/10 mb-lg">
+        <Shield className="w-7 h-7 text-apple-blue" />
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-sm">
+        Connect your payment system
+      </h3>
+      <p className="sf-caption max-w-md mx-auto mb-xl">
+        Attach a webhook to screen every transaction in real-time against
+        global sanctions lists. Get alerts within milliseconds.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-lg mb-xl max-w-2xl mx-auto">
+        {STEPS.map((step, i) => (
+          <div key={i} className="flex flex-col items-center gap-sm">
+            <div className="flex items-center justify-center w-10 h-10 rounded-apple-md bg-white/[0.06]">
+              <step.icon className="w-5 h-5 text-apple-blue" />
+            </div>
+            <p className="text-sm font-medium text-white">{step.title}</p>
+            <p className="text-xs text-apple-label-secondary">{step.desc}</p>
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col sm:flex-row items-center justify-center gap-md">
+        <button
+          onClick={() => navigate('/webhooks')}
+          className="flex items-center gap-sm px-xl py-md bg-apple-blue hover:bg-apple-blue/80
+            text-white text-sm font-semibold rounded-apple-md transition-colors cursor-pointer"
+        >
+          <Webhook className="w-4 h-4" />
+          Set Up Webhook
+          <ArrowRight className="w-4 h-4" />
+        </button>
+        <button
+          onClick={() => navigate('/api-keys')}
+          className="flex items-center gap-sm px-xl py-md border border-white/10
+            hover:bg-white/5 text-white text-sm font-medium rounded-apple-md
+            transition-colors cursor-pointer"
+        >
+          <Code className="w-4 h-4" />
+          Get API Key
+        </button>
+      </div>
+      <div className="mt-lg">
+        <code className="text-xs text-apple-label-tertiary bg-white/[0.04] px-md py-sm rounded-apple">
+          POST https://api.amliq.finance/api/v1/transactions/screen
+        </code>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/Avatar.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Avatar } from './Avatar'
+
+describe('Avatar', () => {
+  it('renders initials from name', () => {
+    render(<Avatar name="John Doe" />)
+    expect(screen.getByText('JD')).toBeInTheDocument()
+  })
+
+  it('handles single name', () => {
+    render(<Avatar name="Prince" />)
+    expect(screen.getByText('P')).toBeInTheDocument()
+  })
+
+  it('handles multiple names and takes first two initials', () => {
+    render(<Avatar name="John Michael Doe" />)
+    expect(screen.getByText('JM')).toBeInTheDocument()
+  })
+
+  it('converts initials to uppercase', () => {
+    render(<Avatar name="alice bob" />)
+    expect(screen.getByText('AB')).toBeInTheDocument()
+  })
+
+  it('renders different sizes', () => {
+    const { rerender } = render(<Avatar name="Test User" size="sm" />)
+    expect(screen.getByText('TU')).toHaveClass('w-6', 'h-6', 'text-xs')
+
+    rerender(<Avatar name="Test User" size="md" />)
+    expect(screen.getByText('TU')).toHaveClass('w-8', 'h-8', 'text-sm')
+
+    rerender(<Avatar name="Test User" size="lg" />)
+    expect(screen.getByText('TU')).toHaveClass('w-10', 'h-10', 'text-base')
+  })
+
+  it('applies custom className', () => {
+    render(<Avatar name="Test User" className="custom-class" />)
+    expect(screen.getByText('TU')).toHaveClass('custom-class')
+  })
+
+  it('has base styling', () => {
+    render(<Avatar name="Test User" />)
+    const element = screen.getByText('TU')
+    expect(element).toHaveClass('rounded-full', 'bg-apple-blue', 'flex', 'items-center', 'justify-center', 'font-semibold', 'text-white')
+  })
+})

package/src/components/ui/Avatar.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface AvatarProps {
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function Avatar({ name, size = 'md', className }: AvatarProps) {
+  const initials = name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+
+  const sizes = {
+    sm: 'w-6 h-6 text-xs',
+    md: 'w-8 h-8 text-sm',
+    lg: 'w-10 h-10 text-base',
+  };
+
+  return (
+    <div
+      className={clsx(
+        'rounded-full bg-apple-blue flex items-center justify-center font-semibold text-white',
+        sizes[size],
+        className
+      )}
+    >
+      {initials}
+    </div>
+  );
+}

package/src/components/ui/Badge.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Badge } from './Badge'
+
+describe('Badge', () => {
+  it('renders badge with text', () => {
+    render(<Badge>Test Badge</Badge>)
+    expect(screen.getByText('Test Badge')).toBeInTheDocument()
+  })
+
+  it('renders different color variants', () => {
+    const { rerender } = render(<Badge color="green">Green</Badge>)
+    expect(screen.getByText('Green')).toHaveClass('bg-apple-green/20', 'text-apple-green')
+
+    rerender(<Badge color="red">Red</Badge>)
+    expect(screen.getByText('Red')).toHaveClass('bg-apple-red/20', 'text-apple-red')
+
+    rerender(<Badge color="orange">Orange</Badge>)
+    expect(screen.getByText('Orange')).toHaveClass('bg-apple-orange/20', 'text-apple-orange')
+
+    rerender(<Badge color="blue">Blue</Badge>)
+    expect(screen.getByText('Blue')).toHaveClass('bg-apple-blue/20', 'text-apple-blue')
+
+    rerender(<Badge color="purple">Purple</Badge>)
+    expect(screen.getByText('Purple')).toHaveClass('bg-purple-500/20', 'text-purple-400')
+
+    rerender(<Badge color="gray">Gray</Badge>)
+    expect(screen.getByText('Gray')).toHaveClass('bg-white/10', 'text-white')
+  })
+
+  it('renders different sizes', () => {
+    const { rerender } = render(<Badge size="sm">Small</Badge>)
+    expect(screen.getByText('Small')).toHaveClass('px-md', 'py-xs', 'text-sf-caption')
+
+    rerender(<Badge size="md">Medium</Badge>)
+    expect(screen.getByText('Medium')).toHaveClass('px-lg', 'py-sm', 'text-sf-body')
+  })
+
+  it('applies default color and size', () => {
+    render(<Badge>Default</Badge>)
+    expect(screen.getByText('Default')).toHaveClass('bg-apple-blue/20', 'text-apple-blue')
+    expect(screen.getByText('Default')).toHaveClass('px-lg', 'py-sm')
+  })
+
+  it('has rounded-full class', () => {
+    render(<Badge>Pill</Badge>)
+    expect(screen.getByText('Pill')).toHaveClass('rounded-full')
+  })
+})

package/src/components/ui/Badge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  color?: 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'gray';
+  size?: 'sm' | 'md';
+}
+
+const colors = {
+  green: 'bg-apple-green/15 text-apple-green shadow-[0_0_12px_rgba(48,209,88,0.1)]',
+  red: 'bg-apple-red/15 text-apple-red shadow-[0_0_12px_rgba(255,69,58,0.1)]',
+  orange: 'bg-apple-orange/15 text-apple-orange shadow-[0_0_12px_rgba(255,159,10,0.1)]',
+  blue: 'bg-apple-blue/15 text-apple-blue shadow-[0_0_12px_rgba(10,132,255,0.1)]',
+  purple: 'bg-purple-500/15 text-purple-400 shadow-[0_0_12px_rgba(168,85,247,0.1)]',
+  gray: 'bg-white/[0.06] text-white/80',
+};
+
+const sizes = {
+  sm: 'px-md py-xs text-sf-caption font-semibold',
+  md: 'px-lg py-sm text-sf-body font-semibold',
+};
+
+export function Badge({ children, color = 'blue', size = 'md' }: BadgeProps) {
+  return (
+    <span className={clsx(
+      'rounded-full inline-block border border-white/[0.04]',
+      colors[color], sizes[size],
+    )}>
+      {children}
+    </span>
+  );
+}

package/src/components/ui/Button.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Button } from './Button'
+
+describe('Button', () => {
+  it('renders button with text', () => {
+    render(<Button>Click me</Button>)
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
+  })
+
+  it('renders different variants', () => {
+    const { rerender } = render(<Button variant="primary">Primary</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-apple-blue')
+
+    rerender(<Button variant="secondary">Secondary</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-apple-bg-tertiary')
+
+    rerender(<Button variant="destructive">Destructive</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-apple-red')
+  })
+
+  it('renders different sizes', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>)
+    expect(screen.getByRole('button')).toHaveClass('px-md', 'py-sm')
+
+    rerender(<Button size="md">Medium</Button>)
+    expect(screen.getByRole('button')).toHaveClass('px-lg', 'py-md')
+
+    rerender(<Button size="lg">Large</Button>)
+    expect(screen.getByRole('button')).toHaveClass('px-xl', 'py-lg')
+  })
+
+  it('handles click events', async () => {
+    const handler = vi.fn()
+    render(<Button onClick={handler}>Click</Button>)
+    await userEvent.click(screen.getByRole('button'))
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('disables button when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>)
+    expect(screen.getByRole('button')).toBeDisabled()
+    expect(screen.getByRole('button')).toHaveClass('disabled:opacity-50')
+  })
+
+  it('respects type prop', () => {
+    render(<Button type="submit">Submit</Button>)
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Button</Button>)
+    expect(screen.getByRole('button')).toHaveClass('custom-class')
+  })
+})

package/src/components/ui/Button.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'destructive';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  className?: string;
+  type?: 'button' | 'submit';
+}
+
+const baseClasses = [
+  'font-semibold rounded-apple-md cursor-pointer transition-all duration-200',
+  'disabled:opacity-50 disabled:cursor-not-allowed',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-blue',
+].join(' ');
+
+const variants = {
+  primary: 'bg-gradient-to-br from-[#0A84FF] to-[#0066CC] text-white hover:shadow-[0_0_20px_rgba(10,132,255,0.3)]',
+  secondary: 'bg-apple-bg-tertiary text-white border border-white/[0.08] hover:bg-white/[0.06] hover:border-white/[0.12]',
+  destructive: 'bg-gradient-to-br from-[#FF453A] to-[#CC362E] text-white hover:shadow-[0_0_20px_rgba(255,69,58,0.3)]',
+};
+
+const sizes = {
+  sm: 'px-md py-sm text-sf-caption',
+  md: 'px-lg py-md text-sf-body',
+  lg: 'px-xl py-lg text-sf-headline',
+};
+
+export function Button({
+  children, variant = 'primary', size = 'md',
+  disabled, onClick, className, type = 'button',
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+      className={clsx(baseClasses, variants[variant], sizes[size], className)}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ui/Card.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Card } from './Card'
+
+describe('Card', () => {
+  it('renders children content', () => {
+    render(
+      <Card>
+        <p>Card content</p>
+      </Card>
+    )
+    expect(screen.getByText('Card content')).toBeInTheDocument()
+  })
+
+  it('applies base styling classes', () => {
+    const { container } = render(<Card>Test</Card>)
+    const card = container.querySelector('div[class*="bg-apple-bg-secondary"]')
+    expect(card?.className).toContain('bg-apple-bg-secondary')
+    expect(card?.className).toContain('rounded-apple-lg')
+  })
+
+  it('handles click events when onClick provided', async () => {
+    const handler = vi.fn()
+    render(<Card onClick={handler}>Clickable</Card>)
+    await userEvent.click(screen.getByText('Clickable'))
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('applies hover styles when hover prop is true', () => {
+    const { container } = render(<Card hover>Hoverable</Card>)
+    const card = container.querySelector('div[class*="cursor-pointer"]')
+    expect(card?.className).toContain('cursor-pointer')
+  })
+
+  it('does not apply hover styles when hover prop is false', () => {
+    render(<Card hover={false}>Not Hoverable</Card>)
+    const card = screen.getByText('Not Hoverable').parentElement
+    expect(card).not.toHaveClass('hover:bg-apple-bg-secondary')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Card className="custom-class">Test</Card>)
+    const card = container.querySelector('div[class*="custom-class"]')
+    expect(card?.className).toContain('custom-class')
+  })
+
+  it('combines all props correctly', async () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <Card hover onClick={handler} className="extra">
+        Combined
+      </Card>
+    )
+    const card = container.querySelector('button[class*="extra"]')
+    expect(card?.className).toContain('extra')
+    expect(card?.className).toContain('cursor-pointer')
+    await userEvent.click(card!)
+    expect(handler).toHaveBeenCalledOnce()
+  })
+})

package/src/components/ui/Card.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  hover?: boolean;
+}
+
+export function Card({ children, className, onClick, hover }: CardProps) {
+  const classes = clsx(
+    'rounded-[16px] border border-white/[0.06] p-lg transition-all duration-200',
+    'bg-[rgba(18,18,26,0.8)] backdrop-blur-[24px] backdrop-saturate-[180%]',
+    'shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_4px_24px_rgba(0,0,0,0.4)]',
+    hover && 'cursor-pointer hover:border-white/[0.12] hover:shadow-[0_0_0_1px_rgba(10,132,255,0.1),0_8px_32px_rgba(0,0,0,0.5)]',
+    className
+  );
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className={clsx(classes, 'text-left w-full')}>
+        {children}
+      </button>
+    );
+  }
+
+  return <div className={classes}>{children}</div>;
+}

package/src/components/ui/ConfirmModal.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface ConfirmModalProps {
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'destructive' | 'primary'
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmModal({
+  open, title, message,
+  confirmLabel = 'Confirm', cancelLabel = 'Cancel',
+  variant = 'primary', onConfirm, onCancel,
+}: ConfirmModalProps) {
+  if (!open) return null
+
+  const accentBar = variant === 'destructive'
+    ? 'bg-gradient-to-r from-red-500 to-rose-500'
+    : 'bg-gradient-to-r from-[#0A84FF] to-[#6366F1]'
+
+  const confirmBtn = variant === 'destructive'
+    ? 'bg-gradient-to-br from-red-500 to-rose-600 text-white hover:shadow-[0_0_20px_rgba(239,68,68,0.3)]'
+    : 'bg-gradient-to-br from-[#0A84FF] to-[#6366F1] text-white hover:shadow-[0_0_20px_rgba(10,132,255,0.3)]'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={onCancel}>
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div className="relative w-full max-w-md rounded-2xl overflow-hidden
+        bg-[rgba(18,18,26,0.95)] backdrop-blur-xl border border-white/[0.08]
+        shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
+        onClick={e => e.stopPropagation()}>
+        {/* accent bar */}
+        <div className={clsx('h-1', accentBar)} />
+
+        {/* body */}
+        <div className="p-6">
+          <h3 className="text-lg font-bold text-white mb-2">{title}</h3>
+          <p className="text-sm text-apple-label-secondary leading-relaxed">{message}</p>
+        </div>
+
+        {/* footer */}
+        <div className="flex gap-3 p-4 border-t border-white/[0.06] bg-white/[0.02]">
+          <button type="button" onClick={onCancel}
+            className="flex-1 py-2.5 rounded-xl text-sm font-semibold
+              text-white/70 border border-white/[0.08] hover:bg-white/[0.04]
+              transition-all cursor-pointer active:scale-[0.97]">
+            {cancelLabel}
+          </button>
+          <button type="button" onClick={onConfirm}
+            className={clsx(
+              'flex-1 py-2.5 rounded-xl text-sm font-semibold',
+              'transition-all cursor-pointer active:scale-[0.97]',
+              confirmBtn,
+            )}>
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/Divider.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Divider } from './Divider'
+
+describe('Divider', () => {
+  it('renders divider element', () => {
+    const { container } = render(<Divider />)
+    const divider = container.querySelector('div[class*="h-px"]')
+    expect(divider).toBeInTheDocument()
+  })
+
+  it('has correct styling', () => {
+    const { container } = render(<Divider />)
+    const divider = container.querySelector('div[class*="h-px"]')
+    expect(divider).toHaveClass('h-px', 'bg-apple-separator', 'my-lg')
+  })
+
+  it('creates a visual separator', () => {
+    const { container } = render(<Divider />)
+    const divider = container.querySelector('div[class*="h-px"]')
+    expect(divider?.className).toContain('h-px')
+    expect(divider?.className).toContain('bg-apple-separator')
+  })
+})

package/src/components/ui/Divider.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Divider() {
+  return <div className="h-px bg-apple-separator my-lg" />;
+}