braid-ui 1.0.99 → 1.0.100

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

@@ -1,53 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-import { Building2, User, Shield, Heart } from "lucide-react"
-
-interface CounterpartyTypeBadgeProps {
-  type: "BUSINESS" | "INDIVIDUAL" | "GOVERNMENT" | "NONPROFIT"
-  className?: string
-}
-
-const typeConfig = {
-  BUSINESS: {
-    variant: "business" as const,
-    label: "Business",
-    icon: Building2
-  },
-  INDIVIDUAL: {
-    variant: "individual" as const,
-    label: "Individual",
-    icon: User
-  },
-  GOVERNMENT: {
-    variant: "government" as const,
-    label: "Government",
-    icon: Shield
-  },
-  NONPROFIT: {
-    variant: "nonprofit" as const,
-    label: "Non-Profit",
-    icon: Heart
-  }
-}
-
-export const CounterpartyTypeBadge = ({ type, className }: CounterpartyTypeBadgeProps) => {
-  const config = typeConfig[type]
-  
-  // Fallback if config is not found
-  if (!config) {
-    return (
-      <Badge variant="secondary" className={className}>
-        <Building2 className="w-3 h-3 mr-1" />
-        {type || "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/data-grid.tsx

@@ -1,99 +0,0 @@
-import * as React from "react"
-import { InfoField } from "@/components/ui/info-field"
-import { cn } from "@/lib/utils"
-
-export interface DataGridItem {
-  label?: string
-  value: string
-  layout?: "vertical" | "horizontal"
-}
-
-export interface DataGridSection {
-  title?: string
-  items: DataGridItem[]
-  className?: string
-}
-
-interface DataGridProps {
-  data: DataGridItem[] | DataGridSection[]
-  columns?: 1 | 2 | 3 | 4
-  gap?: "sm" | "md" | "lg"
-  className?: string
-}
-
-const gapClasses = {
-  sm: "gap-2",
-  md: "gap-4", 
-  lg: "gap-6"
-}
-
-const columnClasses = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 md:grid-cols-2",
-  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
-}
-
-export const DataGrid = React.forwardRef<HTMLDivElement, DataGridProps>(
-  ({ data, columns = 2, gap = "md", className }, ref) => {
-    // Check if data is sections or simple items
-    const isItemArray = data.length > 0 && 'label' in data[0]
-    
-    if (isItemArray) {
-      // Simple items array
-      const items = data as DataGridItem[]
-      return (
-        <div 
-          ref={ref}
-          className={cn(
-            "grid",
-            columnClasses[columns],
-            gapClasses[gap],
-            className
-          )}
-        >
-          {items.map((item, index) => (
-            <InfoField
-              key={index}
-              label={item.label}
-              value={item.value}
-              layout={item.layout || "horizontal"}
-            />
-          ))}
-        </div>
-      )
-    }
-
-    // Sections array
-    const sections = data as DataGridSection[]
-    return (
-      <div ref={ref} className={cn("space-y-4", className)}>
-        {sections.map((section, sectionIndex) => (
-          <div key={sectionIndex} className={section.className}>
-            {section.title && (
-              <h4 className="text-sm font-medium text-foreground mb-2">
-                {section.title}
-              </h4>
-            )}
-            <div className={cn(
-              "grid",
-              columnClasses[columns],
-              gapClasses[gap]
-            )}>
-              {section.items.map((item, itemIndex) => (
-                <InfoField
-                  key={itemIndex}
-                  label={item.label}
-                  value={item.value}
-                  layout={item.layout || "horizontal"}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-)
-
-DataGrid.displayName = "DataGrid"

package/src/components/ui/data-table.tsx

@@ -1,152 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
-
-export interface DataTableColumn<T = any> {
-  key: string
-  title: string
-  sortable?: boolean
-  render?: (value: any, row: T) => React.ReactNode
-  width?: string
-  align?: "left" | "center" | "right"
-}
-
-export interface DataTableProps<T = any> {
-  columns: DataTableColumn<T>[]
-  data: T[]
-  sortBy?: string
-  sortDirection?: "asc" | "desc"
-  onSort?: (key: string) => void
-  loading?: boolean
-  emptyMessage?: string
-  className?: string
-}
-
-export function DataTable<T extends Record<string, any>>({
-  columns,
-  data,
-  sortBy,
-  sortDirection,
-  onSort,
-  loading = false,
-  emptyMessage = "No data available",
-  className
-}: DataTableProps<T>) {
-  const handleSort = (key: string) => {
-    if (onSort) {
-      onSort(key)
-    }
-  }
-
-  const renderSortIcon = (column: DataTableColumn<T>) => {
-    if (!column.sortable || !onSort) return null
-    
-    if (sortBy === column.key) {
-      return sortDirection === "asc" ? 
-        <ChevronUp className="w-4 h-4 ml-1" /> : 
-        <ChevronDown className="w-4 h-4 ml-1" />
-    }
-    
-    return <ChevronsUpDown className="w-4 h-4 ml-1 opacity-50" />
-  }
-
-  const renderCell = (column: DataTableColumn<T>, row: T) => {
-    const value = row[column.key]
-    
-    if (column.render) {
-      return column.render(value, row)
-    }
-    
-    // Auto-render common types
-    if (typeof value === "boolean") {
-      return <Badge variant={value ? "success" : "secondary"}>{value ? "Yes" : "No"}</Badge>
-    }
-    
-    if (Array.isArray(value)) {
-      return value.join(", ")
-    }
-    
-    return value?.toString() || "-"
-  }
-
-  if (loading) {
-    return (
-      <div className={cn("rounded-md border", className)}>
-        <div className="p-8 text-center">
-          <div className="animate-pulse text-muted-foreground">Loading...</div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn("rounded-md border", className)}>
-      <div className="overflow-x-auto">
-        <table className="w-full">
-          <thead>
-            <tr className="border-b bg-muted/50">
-              {columns.map((column) => (
-                <th
-                  key={column.key}
-                  className={cn(
-                    "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
-                    column.align === "center" && "text-center",
-                    column.align === "right" && "text-right",
-                    column.width && `w-[${column.width}]`
-                  )}
-                >
-                  {column.sortable && onSort ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-auto p-0 font-medium hover:bg-transparent"
-                      onClick={() => handleSort(column.key)}
-                    >
-                      <span className="flex items-center">
-                        {column.title}
-                        {renderSortIcon(column)}
-                      </span>
-                    </Button>
-                  ) : (
-                    column.title
-                  )}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.length === 0 ? (
-              <tr>
-                <td colSpan={columns.length} className="h-24 text-center text-muted-foreground">
-                  {emptyMessage}
-                </td>
-              </tr>
-            ) : (
-              data.map((row, index) => (
-                <tr
-                  key={index}
-                  className="border-b transition-colors hover:bg-muted/50"
-                >
-                  {columns.map((column) => (
-                    <td
-                      key={column.key}
-                      className={cn(
-                        "p-4 align-middle",
-                        column.align === "center" && "text-center",
-                        column.align === "right" && "text-right"
-                      )}
-                    >
-                      {renderCell(column, row)}
-                    </td>
-                  ))}
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}

package/src/components/ui/detail-page-layout.tsx

@@ -1,83 +0,0 @@
-import { ReactNode, useState } from "react"
-import { PageLayout } from "@/components/ui/page-layout"
-import { Button } from "@/components/ui/button"
-
-interface DetailPageCard {
-  key: string
-  component: (props: { isEditing: boolean; onToggleEdit: () => void; className?: string }) => ReactNode
-  expandOnEdit?: boolean
-}
-
-interface DetailPageAction {
-  label: string
-  variant?: "default" | "outline" | "destructive" | "secondary" | "ghost"
-  onClick?: () => void
-  className?: string
-}
-
-interface DetailPageLayoutProps {
-  title: string
-  description: string
-  cards: DetailPageCard[]
-  actions?: DetailPageAction[]
-  initialEditingState?: Record<string, boolean>
-}
-
-export const DetailPageLayout = ({ 
-  title, 
-  description, 
-  cards, 
-  actions,
-  initialEditingState = {}
-}: DetailPageLayoutProps) => {
-  const [editingCards, setEditingCards] = useState<Record<string, boolean>>(
-    initialEditingState
-  )
-
-  const toggleEdit = (cardKey: string) => {
-    setEditingCards(prev => ({
-      ...prev,
-      [cardKey]: !prev[cardKey]
-    }))
-  }
-
-  const isAnyCardEditing = Object.values(editingCards).some(Boolean)
-
-  const isSingleCard = cards.length === 1
-  const gridClasses = isSingleCard 
-    ? "space-y-4 mb-6 lg:space-y-6" 
-    : "grid gap-4 mb-6 grid-cols-1 lg:grid-cols-2 lg:gap-6"
-
-  return (
-    <PageLayout 
-      title={title} 
-      description={description}
-      actions={actions?.map(action => ({
-        label: action.label,
-        variant: action.variant || "default",
-        onClick: action.onClick || (() => {})
-      }))}
-    >
-      {/* Cards - Full width for single card, max 2 per row for multiple */}
-      <div className={gridClasses}>
-        {cards.map((card) => {
-          const isEditing = editingCards[card.key] || false
-          const shouldExpand = !isSingleCard && card.expandOnEdit !== false && isEditing
-          
-          return (
-            <div 
-              key={card.key}
-              className={shouldExpand ? "col-span-full" : ""}
-            >
-              {card.component({ 
-                isEditing, 
-                onToggleEdit: () => toggleEdit(card.key),
-                className: shouldExpand ? "col-span-full" : ""
-              })}
-            </div>
-          )
-        })}
-      </div>
-    </PageLayout>
-  )
-}

package/src/components/ui/dialog.tsx

@@ -1,120 +0,0 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[90vh] overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}

package/src/components/ui/dropdown-menu.tsx

@@ -1,82 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-}

package/src/components/ui/editable-form-card.tsx

@@ -1,106 +0,0 @@
-import * as React from "react"
-import { FormCard, type FormCardProps } from "@/components/ui/form-card"
-import { Button } from "@/components/ui/button"
-import { Edit } from "lucide-react"
-import { useEditState } from "@/hooks/useEditState"
-import { cn } from "@/lib/utils"
-
-interface EditableFormCardProps extends Omit<FormCardProps, 'headerActions' | 'children'> {
-  title: string
-  description?: string
-  children?: React.ReactNode
-  editContent: React.ReactNode
-  viewContent: React.ReactNode
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  hideActions?: boolean
-  onSave?: () => void | Promise<void>
-  onCancel?: () => void
-  className?: string
-  isFormValid?: boolean
-  isDirty?: boolean
-  isSubmitting?: boolean
-}
-
-export const EditableFormCard = React.forwardRef<HTMLDivElement, EditableFormCardProps>(
-  ({ 
-    title, 
-    description, 
-    editContent, 
-    viewContent, 
-    isEditing, 
-    onToggleEdit, 
-    hideActions = false,
-    onSave,
-    onCancel,
-    className,
-    variant = "subtle",
-    isFormValid = true,
-    isDirty = false,
-    isSubmitting = false,
-    ...props 
-  }, ref) => {
-    const { isEditing: currentlyEditing, handleToggleEdit, handleCancel } = useEditState({
-      initialEditing: isEditing ?? false,
-      onToggleEdit
-    })
-
-    const handleSaveAction = async () => {
-      if (onSave) {
-        await onSave()
-      }
-    }
-
-    const handleCancelAction = () => {
-      if (onCancel) {
-        onCancel()
-      } else {
-        handleCancel()
-      }
-    }
-
-    return (
-      <FormCard 
-        ref={ref}
-        title={title}
-        description={description}
-        variant={variant}
-        className={className}
-        headerActions={
-          !hideActions ? (
-            <div className="flex items-center gap-2">
-              {currentlyEditing ? (
-                <>
-                  <Button variant="outline" size="sm" onClick={handleCancelAction}>
-                    Cancel
-                  </Button>
-                  <Button 
-                    size="sm" 
-                    onClick={handleSaveAction}
-                    disabled={!isFormValid || isSubmitting}
-                  >
-                    {isSubmitting ? "Saving..." : "Save"}
-                  </Button>
-                </>
-              ) : (
-                <Button 
-                  variant="ghost" 
-                  size="icon" 
-                  onClick={handleToggleEdit} 
-                  className="text-primary hover:text-primary/80 hover:bg-primary/10"
-                >
-                  <Edit className="h-4 w-4" />
-                </Button>
-              )}
-            </div>
-          ) : undefined
-        }
-        {...props}
-      >
-        {currentlyEditing ? editContent : viewContent}
-      </FormCard>
-    )
-  }
-)
-
-EditableFormCard.displayName = "EditableFormCard"