braid-ui 1.0.97 → 1.0.99

package/src/components/transaction/WireDetailsSection.tsx

@@ -0,0 +1,112 @@
+import { FormCard } from "@/components/ui/form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { Button } from "@/components/ui/button"
+import { JsonViewer } from "@/components/ui/json-viewer"
+
+interface WireDetails {
+  type: string
+  originatorName: string
+  originatorAccountNumber: string
+  originatorAddress: string
+  beneficiaryName: string
+  beneficiaryAccountNumber: string
+  beneficiaryAddress: string
+  beneficiaryFIName: string
+  beneficiaryFIRoutingNumber: string
+  beneficiaryFIAddress: string
+  originatorFIName: string
+  originatorFIRoutingNumber: string
+  originatorFIAddress: string
+  intermediaryFIName?: string
+  intermediaryFIRoutingNumber?: string
+  intermediaryFIAddress?: string
+  raw?: any
+}
+
+interface WireDetailsSectionProps {
+  data: WireDetails
+}
+
+export const WireDetailsSection = ({ data }: WireDetailsSectionProps) => {
+  return (
+    <FormCard title="Wire Transfer Details">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+        <InfoField label="Type" value={data.type} layout="horizontal" />
+        <InfoField label="Originator Name" value={data.originatorName} layout="horizontal" />
+        <InfoField 
+          label="Originator Account Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.originatorAccountNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Originator Address" value={data.originatorAddress} layout="horizontal" />
+        <InfoField label="Beneficiary Name" value={data.beneficiaryName} layout="horizontal" />
+        <InfoField 
+          label="Beneficiary Account Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.beneficiaryAccountNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Beneficiary Address" value={data.beneficiaryAddress} layout="horizontal" />
+        <InfoField label="Beneficiary FI Name" value={data.beneficiaryFIName} layout="horizontal" />
+        <InfoField 
+          label="Beneficiary FI Routing Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.beneficiaryFIRoutingNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Beneficiary FI Address" value={data.beneficiaryFIAddress} layout="horizontal" />
+        <InfoField label="Originator FI Name" value={data.originatorFIName} layout="horizontal" />
+        <InfoField 
+          label="Originator FI Routing Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.originatorFIRoutingNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Originator FI Address" value={data.originatorFIAddress} layout="horizontal" />
+        
+        {data.intermediaryFIName && (
+          <>
+            <InfoField label="Intermediary FI Name" value={data.intermediaryFIName} layout="horizontal" />
+            {data.intermediaryFIRoutingNumber && (
+              <InfoField 
+                label="Intermediary FI Routing Number" 
+                value={
+                  <Button variant="link" className="h-auto p-0 text-sm">
+                    {data.intermediaryFIRoutingNumber}
+                  </Button>
+                }
+                layout="horizontal"
+              />
+            )}
+            {data.intermediaryFIAddress && (
+              <InfoField label="Intermediary FI Address" value={data.intermediaryFIAddress} layout="horizontal" />
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Raw JSON - Full Width */}
+      {data.raw && (
+        <div className="mt-6 pt-6 border-t border-border">
+          <InfoField 
+            label="Raw" 
+            value={<JsonViewer data={data.raw} className="mt-2" compact={true} />}
+          />
+        </div>
+      )}
+    </FormCard>
+  )
+}

package/src/components/ui/account-card.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { InfoField } from "@/components/ui/info-field"
+import { DataGrid } from "@/components/ui/data-grid"
+import { cn } from "@/lib/utils"
+import { Building, CreditCard, Globe } from "lucide-react"
+
+interface AccountCardProps {
+  account: {
+    id: string
+    name: string
+    number: string
+    type: "checking" | "savings" | "credit" | "investment"
+    status: "active" | "inactive" | "pending" | "suspended"
+    balance?: string
+    currency?: string
+    institution?: string
+    routingNumber?: string
+    country?: string
+  }
+  showBalance?: boolean
+  className?: string
+}
+
+const typeIcons = {
+  checking: CreditCard,
+  savings: Building,
+  credit: CreditCard,
+  investment: Globe
+}
+
+const typeLabels = {
+  checking: "Checking",
+  savings: "Savings", 
+  credit: "Credit",
+  investment: "Investment"
+}
+
+export const AccountCard = React.forwardRef<HTMLDivElement, AccountCardProps>(
+  ({ account, showBalance = true, className }, ref) => {
+    const TypeIcon = typeIcons[account.type]
+    
+    const accountData = [
+      { label: "Account Number", value: account.number },
+      { label: "Type", value: typeLabels[account.type] },
+      ...(account.routingNumber ? [{ label: "Routing Number", value: account.routingNumber }] : []),
+      ...(account.institution ? [{ label: "Institution", value: account.institution }] : []),
+      ...(account.country ? [{ label: "Country", value: account.country }] : [])
+    ]
+
+    return (
+      <Card ref={ref} className={cn("", className)}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                <TypeIcon className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <CardTitle className="text-lg">{account.name}</CardTitle>
+                <div className="flex items-center space-x-2 mt-1">
+                  <Badge variant={account.status as any}>{account.status}</Badge>
+                  <span className="text-sm text-muted-foreground">
+                    {typeLabels[account.type]}
+                  </span>
+                </div>
+              </div>
+            </div>
+            
+            {showBalance && account.balance && (
+              <div className="text-right">
+                <div className="text-2xl font-bold text-foreground">
+                  {account.balance}
+                </div>
+                {account.currency && (
+                  <div className="text-sm text-muted-foreground">
+                    {account.currency}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </CardHeader>
+        
+        <CardContent>
+          <DataGrid data={accountData} columns={2} gap="sm" />
+        </CardContent>
+      </Card>
+    )
+  }
+)
+
+AccountCard.displayName = "AccountCard"

package/src/components/ui/badge.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-success text-success-foreground hover:bg-success/80",
+        warning:
+          "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
+        // Business type specific variants
+        business:
+          "border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300",
+        individual:
+          "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
+        government:
+          "border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300",
+        nonprofit:
+          "border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300",
+        // Business entity type variants
+        corporation:
+          "border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300",
+        llc:
+          "border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300",
+        partnership:
+          "border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300",
+        sole_proprietorship:
+          "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300",
+        // Status variants
+        active:
+          "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
+        inactive:
+          "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300",
+        pending:
+          "border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300",
+        suspended:
+          "border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
+        // Alert type subtle variants
+        "alert-ofac":
+          "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 font-medium",
+        "alert-dual":
+          "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 font-medium",
+        "alert-monitoring":
+          "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300 font-medium",
+        "alert-error":
+          "border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-300 font-medium",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ChevronRight, Home } from "lucide-react"
+import { NavLink } from "react-router-dom"
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+  icon?: React.ReactNode
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  showHome?: boolean
+  separator?: React.ReactNode
+  className?: string
+}
+
+export const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ items, showHome = true, separator, className }, ref) => {
+    const defaultSeparator = <ChevronRight className="w-4 h-4 text-muted-foreground" />
+    const separatorElement = separator || defaultSeparator
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Breadcrumb"
+        className={cn("flex items-center space-x-1 text-sm", className)}
+      >
+        {showHome && (
+          <>
+            <NavLink
+              to="/"
+              className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Home className="w-4 h-4" />
+            </NavLink>
+            {items.length > 0 && (
+              <span className="text-muted-foreground">{separatorElement}</span>
+            )}
+          </>
+        )}
+        
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          
+          return (
+            <React.Fragment key={index}>
+              {item.href && !isLast ? (
+                <NavLink
+                  to={item.href}
+                  className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {item.icon && <span className="mr-1">{item.icon}</span>}
+                  {item.label}
+                </NavLink>
+              ) : (
+                <span className={cn(
+                  "flex items-center",
+                  isLast ? "text-foreground font-medium" : "text-muted-foreground"
+                )}>
+                  {item.icon && <span className="mr-1">{item.icon}</span>}
+                  {item.label}
+                </span>
+              )}
+              
+              {!isLast && (
+                <span className="text-muted-foreground">{separatorElement}</span>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </nav>
+    )
+  }
+)
+
+Breadcrumb.displayName = "Breadcrumb"

package/src/components/ui/business-type-badge.tsx

@@ -0,0 +1,42 @@
+import { Badge } from "@/components/ui/badge"
+import { Building, Briefcase, Users, User } from "lucide-react"
+
+interface BusinessTypeBadgeProps {
+  type: "corporation" | "llc" | "partnership" | "sole_proprietorship"
+  className?: string
+}
+
+const typeConfig = {
+  corporation: {
+    variant: "corporation" as const,
+    label: "Corporation",
+    icon: Building
+  },
+  llc: {
+    variant: "llc" as const,
+    label: "LLC",
+    icon: Briefcase
+  },
+  partnership: {
+    variant: "partnership" as const,
+    label: "Partnership",
+    icon: Users
+  },
+  sole_proprietorship: {
+    variant: "sole_proprietorship" as const,
+    label: "Sole Proprietorship",
+    icon: User
+  }
+}
+
+export const BusinessTypeBadge = ({ type, className }: BusinessTypeBadgeProps) => {
+  const config = typeConfig[type]
+  const Icon = config.icon
+
+  return (
+    <Badge variant={config.variant} className={className}>
+      <Icon className="w-3 h-3 mr-1" />
+      {config.label}
+    </Badge>
+  )
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    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/components/ui/calendar.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3 pointer-events-auto", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        button_previous: "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        button_next: "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative hover:bg-accent hover:text-accent-foreground rounded-md",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal"
+        ),
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }