@fayz-ai/ui 0.9.0 → 0.10.1

package/src/primitives/currency-input.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-
-interface CurrencyInputProps {
-  value: number
-  onChange: (value: number) => void
-  symbol?: string
-  locale?: string
-  currencyCode?: string
-  label?: string
-  placeholder?: string
-  className?: string
-  disabled?: boolean
-}
-
-/**
- * Currency input with automatic decimal formatting.
- *
- * - Always displays the value with 2 decimal places using the project's locale
- * - Input works like an ATM: digits push from right, decimals are fixed
- * - Typing "12345" shows "123,45" (or "123.45" depending on locale)
- * - Backspace removes the last digit
- * - Supports the project currency symbol
- */
-export function CurrencyInput({
-  value,
-  onChange,
-  symbol = 'R$',
-  locale = 'pt-BR',
-  currencyCode = 'BRL',
-  label,
-  placeholder,
-  className,
-  disabled,
-}: CurrencyInputProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const [focused, setFocused] = React.useState(false)
-
-  // Format number to locale string with 2 decimals
-  const format = React.useCallback((v: number) => {
-    return new Intl.NumberFormat(locale, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(v)
-  }, [locale])
-
-  const displayValue = format(value)
-
-  // Handle key-by-key input — ATM-style (digits push from right)
-  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (disabled) return
-
-    // Allow tab, arrow keys, etc.
-    if (['Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return
-
-    e.preventDefault()
-
-    if (e.key === 'Backspace' || e.key === 'Delete') {
-      // Remove last digit: 123.45 → 12.34
-      const cents = Math.floor(Math.round(value * 100) / 10)
-      onChange(cents / 100)
-      return
-    }
-
-    // Only accept digits
-    if (!/^\d$/.test(e.key)) return
-
-    // Append digit: 12.34 + '5' → 123.45
-    const currentCents = Math.round(value * 100)
-    const newCents = currentCents * 10 + parseInt(e.key, 10)
-    // Cap at 999,999,999.99
-    if (newCents > 99999999999) return
-    onChange(newCents / 100)
-  }
-
-  // Handle paste — parse number from pasted text
-  function handlePaste(e: React.ClipboardEvent) {
-    e.preventDefault()
-    const text = e.clipboardData.getData('text')
-    // Remove everything except digits, dots, commas
-    const cleaned = text.replace(/[^\d.,]/g, '')
-    // Replace comma with dot for parsing
-    const normalized = cleaned.replace(',', '.')
-    const parsed = parseFloat(normalized)
-    if (!isNaN(parsed)) {
-      onChange(Math.round(parsed * 100) / 100)
-    }
-  }
-
-  return (
-    <div className={className}>
-      {label && <label className="text-xs font-medium text-muted-foreground">{label}</label>}
-      <div
-        className={cn(
-          'flex items-center rounded-lg border border-input bg-background ring-offset-background transition-colors cursor-text',
-          label && 'mt-1',
-          focused && 'border-ring ring-2 ring-ring ring-offset-2',
-          disabled && 'opacity-50 cursor-not-allowed',
-        )}
-        onClick={() => inputRef.current?.focus()}
-      >
-        <span className="pl-3 pr-1 text-sm font-medium text-muted-foreground select-none">{symbol}</span>
-        <input
-          ref={inputRef}
-          type="text"
-          inputMode="numeric"
-          value={displayValue}
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          placeholder={placeholder ?? format(0)}
-          disabled={disabled}
-          readOnly={false}
-          className="flex-1 bg-transparent px-2 py-2 text-sm outline-none text-right tabular-nums caret-primary selection:bg-primary/20"
-          onChange={() => {}}
-        />
-      </div>
-    </div>
-  )
-}

package/src/primitives/data-table.tsx

@@ -1,160 +0,0 @@
-import * as React from 'react'
-import {
-  type ColumnDef,
-  type SortingState,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table'
-import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
-
-import { cn } from '../utils/cn'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  loading?: boolean
-  skeletonRows?: number
-  emptyMessage?: string
-  onRowClick?: (row: TData) => void
-  /** Visual variant: 'card' (white bg, card wrapper — default) or 'flat' (transparent bg) */
-  variant?: 'card' | 'flat'
-  /** Compact mode: smaller padding and font size */
-  compact?: boolean
-}
-
-function DataTable<TData, TValue>({
-  columns,
-  data,
-  loading = false,
-  skeletonRows = 3,
-  emptyMessage = 'No results.',
-  onRowClick,
-  variant = 'card',
-  compact = false,
-}: DataTableProps<TData, TValue>) {
-  const isCard = variant === 'card'
-  // Rounded box and scroll container must be SEPARATE elements: a scroll
-  // container paints its content over its own border-radius, which squared
-  // the corners the moment a row background met them.
-  const wrapperCls = isCard
-    ? 'overflow-hidden rounded-lg border bg-card shadow-sm'
-    : 'overflow-hidden rounded-lg border'
-  const headerCls = isCard ? 'border-b bg-muted/50' : 'border-b bg-muted/30'
-  const thCls = compact ? 'px-3 py-1.5 text-left text-[11px] font-medium text-muted-foreground' : 'px-4 py-2.5 text-left font-medium text-muted-foreground'
-  const tdCls = compact ? 'px-3 py-1.5 align-middle text-xs' : 'px-4 py-3 align-middle'
-  const tableCls = compact ? 'w-full text-xs min-w-max' : 'w-full text-sm min-w-max'
-  const rowHoverCls = isCard ? 'hover:bg-muted/30' : 'hover:bg-muted/20'
-  const [sorting, setSorting] = React.useState<SortingState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: { sorting },
-  })
-
-  if (loading) {
-    return (
-      <div className={wrapperCls}>
-        <div className="overflow-x-auto">
-        <table className={tableCls}>
-          <thead>
-            <tr className={headerCls}>
-              {columns.map((_, i) => (
-                <th key={i} className={thCls}>
-                  <div className="h-3.5 w-20 animate-pulse rounded bg-muted" />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: skeletonRows }).map((_, i) => (
-              <tr key={i} className="border-b last:border-0">
-                {columns.map((_, j) => (
-                  <td key={j} className={tdCls}>
-                    <div className="h-3.5 w-full animate-pulse rounded bg-muted" />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={wrapperCls}>
-      <div className="overflow-x-auto">
-      <table className={tableCls}>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id} className={headerCls}>
-              {headerGroup.headers.map((header) => {
-                const sorted = header.column.getIsSorted()
-                return (
-                  <th
-                    key={header.id}
-                    className={thCls}
-                  >
-                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                      <button
-                        className="flex items-center gap-1 hover:text-foreground transition-colors"
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        {flexRender(header.column.columnDef.header, header.getContext())}
-                        {sorted === 'asc' ? (
-                          <ArrowUp className="h-3 w-3" />
-                        ) : sorted === 'desc' ? (
-                          <ArrowDown className="h-3 w-3" />
-                        ) : (
-                          <ArrowUpDown className="h-3 w-3 opacity-40" />
-                        )}
-                      </button>
-                    ) : (
-                      flexRender(header.column.columnDef.header, header.getContext())
-                    )}
-                  </th>
-                )
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <tr
-                key={row.id}
-                className={cn(
-                  `border-b last:border-0 transition-colors ${rowHoverCls}`,
-                  onRowClick && 'cursor-pointer'
-                )}
-                onClick={() => onRowClick?.(row.original)}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className={tdCls}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan={columns.length} className="h-24 text-center text-muted-foreground">
-                {emptyMessage}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-      </div>
-    </div>
-  )
-}
-
-export { DataTable, type DataTableProps }

package/src/primitives/date-picker.tsx

@@ -1,225 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { createPortal } from 'react-dom'
-import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
-import { useTranslation } from '@fayz-ai/core'
-import { getCurrentLocale } from '@fayz-ai/core'
-
-// ---------------------------------------------------------------------------
-// DatePicker — custom dropdown calendar, Google Calendar style
-// ---------------------------------------------------------------------------
-
-const DAY_LABELS: Record<string, string[]> = {
-  en: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-  'pt-BR': ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
-}
-
-function toDateLocale(locale: string): string {
-  if (locale === 'pt-BR') return 'pt-BR'
-  return 'en-US'
-}
-
-function isSameDay(a: Date, b: Date) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
-}
-
-function isToday(d: Date) { return isSameDay(d, new Date()) }
-
-function formatDate(date: Date, locale: string) {
-  return date.toLocaleDateString(toDateLocale(locale), { month: 'short', day: 'numeric', year: 'numeric' })
-}
-
-/** Toolbar label: the year is noise while you're inside it, and two of these sit
- *  side by side in a range — it only earns its space on another year. */
-function formatDateCompact(date: Date, locale: string) {
-  const sameYear = date.getFullYear() === new Date().getFullYear()
-  return date.toLocaleDateString(toDateLocale(locale), {
-    month: 'short',
-    day: 'numeric',
-    ...(sameYear ? {} : { year: 'numeric' }),
-  })
-}
-
-function toDateStr(d: Date) {
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-}
-
-function parseDate(s: string): Date {
-  const [y, m, d] = s.split('-').map(Number)
-  return new Date(y, m - 1, d)
-}
-
-interface DatePickerProps {
-  /** Value as YYYY-MM-DD string */
-  value: string
-  onChange: (value: string) => void
-  className?: string
-  /**
-   * `input` (default) is the form-field trigger. `toolbar` is the 26px pill that
-   * matches SegmentedControl/Button `sm`, for filter bars where a full-height
-   * form field towers over everything beside it.
-   */
-  variant?: 'input' | 'toolbar'
-  /** Open the dropdown immediately on mount */
-  defaultOpen?: boolean
-  /** Called when the dropdown opens or closes */
-  onOpenChange?: (open: boolean) => void
-}
-
-const TRIGGER_VARIANT: Record<'input' | 'toolbar', string> = {
-  input: 'rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm w-full',
-  toolbar: 'h-[26px] rounded-button border border-border bg-card shadow-button px-2.5 text-xs font-medium',
-}
-
-export function DatePicker({ value, onChange, className, variant = 'input', defaultOpen, onOpenChange }: DatePickerProps) {
-  const t = useTranslation()
-  const locale = getCurrentLocale()
-  const [open, setOpen] = useState(defaultOpen ?? false)
-  const ref = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const selectedDate = value ? parseDate(value) : new Date()
-  const [viewMonth, setViewMonth] = useState(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1))
-  const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 })
-
-  const dayLabels = DAY_LABELS[locale] ?? DAY_LABELS.en
-  const dateLocale = toDateLocale(locale)
-
-  // Position the portal dropdown relative to the trigger
-  useEffect(() => {
-    if (!open || !triggerRef.current) return
-    const rect = triggerRef.current.getBoundingClientRect()
-    const dropW = 260
-    let left = rect.left
-    if (left + dropW > window.innerWidth - 12) left = window.innerWidth - dropW - 12
-    if (left < 8) left = 8
-    setPos({ top: rect.bottom + 4, left })
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handler = (e: MouseEvent) => {
-      const target = e.target as Node
-      if (ref.current?.contains(target)) return
-      if (dropdownRef.current?.contains(target)) return
-      setOpen(false)
-      onOpenChange?.(false)
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [open, onOpenChange])
-
-  // Sync view month when value changes externally
-  useEffect(() => {
-    if (value) {
-      const d = parseDate(value)
-      setViewMonth(new Date(d.getFullYear(), d.getMonth(), 1))
-    }
-  }, [value])
-
-  const monthLabel = viewMonth.toLocaleDateString(dateLocale, { month: 'long', year: 'numeric' })
-
-  const weeks = useMemo(() => {
-    const year = viewMonth.getFullYear()
-    const month = viewMonth.getMonth()
-    const firstDay = new Date(year, month, 1)
-    const startOffset = firstDay.getDay()
-    const daysInMonth = new Date(year, month + 1, 0).getDate()
-    const prevMonthDays = new Date(year, month, 0).getDate()
-
-    const cells: { date: Date; inMonth: boolean }[] = []
-    for (let i = startOffset - 1; i >= 0; i--) {
-      cells.push({ date: new Date(year, month - 1, prevMonthDays - i), inMonth: false })
-    }
-    for (let d = 1; d <= daysInMonth; d++) {
-      cells.push({ date: new Date(year, month, d), inMonth: true })
-    }
-    while (cells.length % 7 !== 0) {
-      cells.push({ date: new Date(year, month + 1, cells.length - startOffset - daysInMonth + 1), inMonth: false })
-    }
-
-    const rows: typeof cells[] = []
-    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7))
-    return rows
-  }, [viewMonth])
-
-  function handleSelect(date: Date) {
-    onChange(toDateStr(date))
-    setOpen(false)
-  }
-
-  return (
-    <div ref={ref} className={`relative ${className ?? ''}`}>
-      {/* Trigger */}
-      <button ref={triggerRef} type="button" onClick={() => setOpen((p) => !p)}
-        className={`flex items-center gap-2 text-left transition-colors hover:bg-muted/30 ${TRIGGER_VARIANT[variant]}`}>
-        <Calendar className={`shrink-0 text-muted-foreground ${variant === 'toolbar' ? 'h-3 w-3' : 'h-3.5 w-3.5'}`} />
-        <span className="whitespace-nowrap">
-          {value
-            ? (variant === 'toolbar' ? formatDateCompact : formatDate)(selectedDate, locale)
-            : t('common.selectDate')}
-        </span>
-      </button>
-
-      {/* Dropdown — portal to escape overflow containers */}
-      {open && createPortal(
-        <div ref={dropdownRef} data-modal-passthrough
-          style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 9999, pointerEvents: 'auto' }}
-          className="fayz-glass-surface rounded-xl border bg-popover shadow-xl p-3 w-[260px]">
-          {/* Month nav */}
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm font-medium capitalize">{monthLabel}</span>
-            <div className="flex items-center gap-0.5">
-              <button type="button" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1))}
-                className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted transition-colors">
-                <ChevronLeft className="h-4 w-4" />
-              </button>
-              <button type="button" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1))}
-                className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted transition-colors">
-                <ChevronRight className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-
-          {/* Day labels */}
-          <div className="grid grid-cols-7 mb-1">
-            {dayLabels.map((l, i) => (
-              <div key={i} className="flex h-8 items-center justify-center text-[11px] font-medium text-muted-foreground">{l}</div>
-            ))}
-          </div>
-
-          {/* Dates */}
-          {weeks.map((week, wi) => (
-            <div key={wi} className="grid grid-cols-7">
-              {week.map(({ date, inMonth }, di) => {
-                const sel = value && isSameDay(date, selectedDate)
-                const today = isToday(date)
-                return (
-                  <button key={di} type="button"
-                    onClick={() => handleSelect(date)}
-                    className={`flex h-8 w-8 items-center justify-center rounded-full text-xs mx-auto transition-colors ${
-                      sel
-                        ? 'bg-primary text-primary-foreground font-semibold'
-                        : today
-                          ? 'bg-primary/10 text-primary font-semibold'
-                          : inMonth
-                            ? 'hover:bg-muted text-foreground'
-                            : 'text-muted-foreground/40 hover:bg-muted/50'
-                    }`}>
-                    {date.getDate()}
-                  </button>
-                )
-              })}
-            </div>
-          ))}
-
-          {/* Today shortcut */}
-          <div className="mt-2 pt-2 border-t">
-            <button type="button" onClick={() => { handleSelect(new Date()) }}
-              className="text-xs text-primary font-medium hover:underline">{t('agenda.calendar.today')}</button>
-          </div>
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}