braid-ui 1.0.99 → 1.0.101

package/src/components/ui/sonner.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, toast } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster, toast }

package/src/components/ui/stack.tsx

@@ -1,77 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface StackProps {
-  children: React.ReactNode
-  direction?: "vertical" | "horizontal"
-  spacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
-  align?: "start" | "center" | "end" | "stretch"
-  justify?: "start" | "center" | "end" | "between" | "around"
-  className?: string
-}
-
-const spacingClasses = {
-  vertical: {
-    none: "",
-    xs: "space-y-1",
-    sm: "space-y-2",
-    md: "space-y-4",
-    lg: "space-y-6",
-    xl: "space-y-8"
-  },
-  horizontal: {
-    none: "",
-    xs: "space-x-1",
-    sm: "space-x-2", 
-    md: "space-x-4",
-    lg: "space-x-6",
-    xl: "space-x-8"
-  }
-}
-
-const alignClasses = {
-  vertical: {
-    start: "",
-    center: "items-center",
-    end: "items-end", 
-    stretch: "items-stretch"
-  },
-  horizontal: {
-    start: "",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
-  }
-}
-
-const justifyClasses = {
-  start: "",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around"
-}
-
-export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
-  ({ children, direction = "vertical", spacing = "md", align = "start", justify = "start", className }, ref) => {
-    const isHorizontal = direction === "horizontal"
-    
-    return (
-      <div 
-        ref={ref}
-        className={cn(
-          "flex",
-          isHorizontal ? "flex-row" : "flex-col",
-          spacingClasses[direction][spacing],
-          alignClasses[direction][align],
-          justifyClasses[justify],
-          className
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-Stack.displayName = "Stack"

package/src/components/ui/status-badge.tsx

@@ -1,68 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-import { CheckCircle, XCircle, Clock, AlertTriangle } from "lucide-react"
-
-interface StatusBadgeProps {
-  status: "ACTIVE" | "INACTIVE" | "PENDING" | "SUSPENDED" | "POSTED" | "FAILED" | "CANCELLED"
-  className?: string
-}
-
-const statusConfig = {
-  ACTIVE: {
-    variant: "active" as const,
-    label: "Active",
-    icon: CheckCircle
-  },
-  INACTIVE: {
-    variant: "inactive" as const,
-    label: "Inactive",
-    icon: XCircle
-  },
-  PENDING: {
-    variant: "pending" as const,
-    label: "Pending",
-    icon: Clock
-  },
-  SUSPENDED: {
-    variant: "suspended" as const,
-    label: "Suspended",
-    icon: AlertTriangle
-  },
-  POSTED: {
-    variant: "active" as const,
-    label: "Posted",
-    icon: CheckCircle
-  },
-  FAILED: {
-    variant: "inactive" as const,
-    label: "Failed",
-    icon: XCircle
-  },
-  CANCELLED: {
-    variant: "secondary" as const,
-    label: "Cancelled",
-    icon: XCircle
-  }
-}
-
-export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
-  const config = statusConfig[status]
-  
-  // Fallback if config is not found
-  if (!config) {
-    return (
-      <Badge variant="secondary" className={className}>
-        <AlertTriangle className="w-3 h-3 mr-1" />
-        {status || "Unknown"}
-      </Badge>
-    )
-  }
-  
-  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/tabs.tsx

@@ -1,52 +0,0 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "@/lib/utils"
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/ui/toast.tsx

@@ -1,127 +0,0 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}

package/src/components/ui/toaster.tsx

@@ -1,33 +0,0 @@
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}

package/src/components/ui/tooltip.tsx

@@ -1,28 +0,0 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/ui/use-toast.ts

@@ -1,3 +0,0 @@
-import { useToast, toast } from "@/hooks/use-toast";
-
-export { useToast, toast };

package/src/components/ui-kit/dashboard-demo.tsx

@@ -1,156 +0,0 @@
-import * as React from "react"
-import { ListPage } from "@/components/layouts/list-page"
-import { MetricCard } from "@/components/ui/metric-card"
-import { DataTable, type DataTableColumn } from "@/components/ui/data-table"
-import { EntityCard } from "@/components/ui/entity-card"
-import { AccountCard } from "@/components/ui/account-card"
-import { ResponsiveGrid } from "@/components/ui/responsive-grid"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { mockMetrics, mockTableData, mockCounterparties, mockAccounts } from "@/lib/mock-data"
-import { Plus, Download, TrendingUp } from "lucide-react"
-
-const recentTransactions = [
-  {
-    id: "1",
-    recipient: "Acme Corporation",
-    amount: "$25,000",
-    type: "Wire Transfer",
-    status: "completed",
-    date: "2024-01-20"
-  },
-  {
-    id: "2", 
-    recipient: "Global Tech LLC",
-    amount: "$12,500",
-    type: "ACH Transfer",
-    status: "pending",
-    date: "2024-01-20"
-  },
-  {
-    id: "3",
-    recipient: "John Smith",
-    amount: "$3,200",
-    type: "Wire Transfer", 
-    status: "completed",
-    date: "2024-01-19"
-  }
-]
-
-const transactionColumns: DataTableColumn[] = [
-  { key: "recipient", title: "Recipient", sortable: true },
-  { key: "amount", title: "Amount", sortable: true, align: "right" },
-  { key: "type", title: "Type", sortable: true },
-  { 
-    key: "status", 
-    title: "Status", 
-    sortable: true,
-    render: (value) => <Badge variant={value === "completed" ? "success" : "warning"}>{value}</Badge>
-  },
-  { key: "date", title: "Date", sortable: true }
-]
-
-export function DashboardDemo() {
-  const [sortBy, setSortBy] = React.useState<string>()
-  const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">("asc")
-
-  const handleSort = (key: string) => {
-    if (sortBy === key) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
-    } else {
-      setSortBy(key)
-      setSortDirection("asc")
-    }
-  }
-
-  const breadcrumbs = [
-    { label: "UI Kit", href: "/ui-kit" },
-    { label: "Dashboard Demo" }
-  ]
-
-  const actions = [
-    {
-      label: "Export Report",
-      onClick: () => console.log("Export"),
-      variant: "outline" as const,
-      icon: <Download className="w-4 h-4" />
-    },
-    {
-      label: "New Transfer",
-      onClick: () => console.log("New Transfer"),
-      icon: <Plus className="w-4 h-4" />
-    }
-  ]
-
-  return (
-    <ListPage
-      title="Financial Dashboard"
-      description="Comprehensive overview of accounts, transfers, and business metrics"
-      breadcrumbs={breadcrumbs}
-      actions={actions}
-      maxWidth="xl"
-    >
-      {/* Metrics Overview */}
-      <ResponsiveGrid type="cards" gap="md">
-        {mockMetrics.map((metric, index) => (
-          <MetricCard key={index} {...metric} />
-        ))}
-      </ResponsiveGrid>
-
-      {/* Account Cards */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle>Account Overview</CardTitle>
-            <Badge variant="secondary" className="flex items-center gap-1">
-              <TrendingUp className="w-3 h-3" />
-              3 Active Accounts
-            </Badge>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveGrid type="cards" gap="md">
-            {mockAccounts.map((account) => (
-              <AccountCard key={account.id} account={account} />
-            ))}
-          </ResponsiveGrid>
-        </CardContent>
-      </Card>
-
-      {/* Recent Transactions */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Recent Transactions</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DataTable
-            columns={transactionColumns}
-            data={recentTransactions}
-            sortBy={sortBy}
-            sortDirection={sortDirection}
-            onSort={handleSort}
-          />
-        </CardContent>
-      </Card>
-
-      {/* Recent Counterparties */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Recent Counterparties</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveGrid type="cards" gap="md">
-            {mockCounterparties.slice(0, 4).map((entity) => (
-              <EntityCard 
-                key={entity.id}
-                entity={entity}
-                onView={(id) => console.log("View", id)}
-                onEdit={(id) => console.log("Edit", id)}
-              />
-            ))}
-          </ResponsiveGrid>
-        </CardContent>
-      </Card>
-    </ListPage>
-  )
-}