braid-ui 1.0.99 → 1.0.101

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

@@ -1,94 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,56 +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 "@/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

@@ -1,49 +0,0 @@
-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 }

package/src/components/ui/card.tsx

@@ -1,223 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const cardVariants = cva(
-  "rounded-lg border bg-card text-card-foreground transition-all duration-200",
-  {
-    variants: {
-      variant: {
-        default: "shadow-sm",
-        elevated: "shadow-md hover:shadow-lg",
-        outlined: "border-2 shadow-none",
-        ghost: "border-transparent shadow-none bg-transparent",
-        subtle: "border-border/75 shadow-none"
-      },
-      size: {
-        sm: "p-3",
-        md: "p-4", 
-        lg: "p-6",
-        none: "p-0"
-      },
-      fullHeight: {
-        true: "h-full flex flex-col",
-        false: ""
-      },
-      interactive: {
-        true: "cursor-pointer hover:shadow-md hover:scale-[1.02]",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "none",
-      fullHeight: false,
-      interactive: false
-    }
-  }
-)
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardVariants> {}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, size, fullHeight, interactive, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ variant, size, fullHeight, interactive }), className)}
-      {...props}
-    />
-  )
-)
-Card.displayName = "Card"
-
-const cardHeaderVariants = cva(
-  "flex flex-col space-y-1.5",
-  {
-    variants: {
-      size: {
-        sm: "px-3 pt-3 pb-2",
-        md: "px-4 pt-4 pb-3",
-        lg: "px-6 pt-6 pb-4"
-      },
-      align: {
-        start: "items-start",
-        center: "items-center", 
-        end: "items-end"
-      },
-      direction: {
-        row: "flex-row justify-between items-center space-y-0 space-x-4",
-        column: "flex-col space-y-1.5"
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      align: "start",
-      direction: "column"
-    }
-  }
-)
-
-export interface CardHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardHeaderVariants> {}
-
-const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ className, size, align, direction, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(cardHeaderVariants({ size, align, direction }), className)}
-      {...props}
-    />
-  )
-)
-CardHeader.displayName = "CardHeader"
-
-const cardTitleVariants = cva(
-  "font-semibold leading-none tracking-tight",
-  {
-    variants: {
-      size: {
-        sm: "text-base",
-        md: "text-lg", 
-        lg: "text-xl"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-)
-
-export interface CardTitleProps
-  extends React.HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof cardTitleVariants> {}
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
-  ({ className, size, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn(cardTitleVariants({ size }), className)}
-      {...props}
-    />
-  )
-)
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const cardContentVariants = cva(
-  "",
-  {
-    variants: {
-      size: {
-        sm: "px-3 pb-2",
-        md: "px-4 pb-3",
-        lg: "px-6 pb-4"
-      },
-      fullHeight: {
-        true: "flex-1",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      fullHeight: false
-    }
-  }
-)
-
-export interface CardContentProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardContentVariants> {}
-
-const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-  ({ className, size, fullHeight, ...props }, ref) => (
-    <div 
-      ref={ref} 
-      className={cn(cardContentVariants({ size, fullHeight }), className)} 
-      {...props} 
-    />
-  )
-)
-CardContent.displayName = "CardContent"
-
-const cardFooterVariants = cva(
-  "flex items-center pt-0",
-  {
-    variants: {
-      size: {
-        sm: "p-3 pt-0",
-        md: "p-4 pt-0",
-        lg: "p-6 pt-0"
-      },
-      justify: {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between"
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      justify: "start"
-    }
-  }
-)
-
-export interface CardFooterProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardFooterVariants> {}
-
-const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
-  ({ className, size, justify, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(cardFooterVariants({ size, justify }), className)}
-      {...props}
-    />
-  )
-)
-CardFooter.displayName = "CardFooter"
-
-export { 
-  Card, 
-  CardHeader, 
-  CardFooter, 
-  CardTitle, 
-  CardDescription, 
-  CardContent,
-  cardVariants
-}

package/src/components/ui/container.tsx

@@ -1,45 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface ContainerProps {
-  children: React.ReactNode
-  size?: "sm" | "md" | "lg" | "xl" | "full"
-  padding?: "none" | "sm" | "md" | "lg"
-  center?: boolean
-  className?: string
-}
-
-const sizeClasses = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl", 
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
-  full: "max-w-full"
-}
-
-const paddingClasses = {
-  none: "",
-  sm: "px-4 py-4",
-  md: "px-6 py-6", 
-  lg: "px-8 py-8"
-}
-
-export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-  ({ children, size = "lg", padding = "md", center = true, className }, ref) => {
-    return (
-      <div 
-        ref={ref}
-        className={cn(
-          sizeClasses[size],
-          paddingClasses[padding],
-          center && "mx-auto",
-          className
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-Container.displayName = "Container"