braid-ui 1.0.99 → 1.0.101

package/src/components/ui-kit/pattern-library.tsx

@@ -1,248 +0,0 @@
-import * as React from "react"
-import { Container } from "@/components/ui/container"
-import { Stack } from "@/components/ui/stack"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { ResponsiveGrid } from "@/components/ui/responsive-grid"
-import { Copy, Check } from "lucide-react"
-
-const colorPalette = {
-  primary: {
-    name: "Primary",
-    colors: [
-      { name: "primary", value: "hsl(204 100% 54%)", class: "bg-primary" },
-      { name: "primary-foreground", value: "hsl(0 0% 100%)", class: "bg-primary-foreground" },
-      { name: "primary-glow", value: "hsl(204 100% 64%)", class: "bg-primary-glow" }
-    ]
-  },
-  neutral: {
-    name: "Neutral",
-    colors: [
-      { name: "background", value: "hsl(240 10% 98%)", class: "bg-background" },
-      { name: "foreground", value: "hsl(240 10% 8%)", class: "bg-foreground" },
-      { name: "muted", value: "hsl(240 5% 96%)", class: "bg-muted" },
-      { name: "muted-foreground", value: "hsl(240 4% 46%)", class: "bg-muted-foreground" }
-    ]
-  },
-  semantic: {
-    name: "Semantic",
-    colors: [
-      { name: "success", value: "hsl(142 76% 36%)", class: "bg-success" },
-      { name: "warning", value: "hsl(38 92% 50%)", class: "bg-warning" },
-      { name: "destructive", value: "hsl(0 84% 60%)", class: "bg-destructive" }
-    ]
-  }
-}
-
-const typography = [
-  { name: "Heading 1", class: "text-3xl font-bold", example: "The quick brown fox" },
-  { name: "Heading 2", class: "text-2xl font-semibold", example: "The quick brown fox" },
-  { name: "Heading 3", class: "text-xl font-medium", example: "The quick brown fox" },
-  { name: "Body Large", class: "text-lg", example: "The quick brown fox jumps over the lazy dog" },
-  { name: "Body", class: "text-base", example: "The quick brown fox jumps over the lazy dog" },
-  { name: "Body Small", class: "text-sm", example: "The quick brown fox jumps over the lazy dog" },
-  { name: "Caption", class: "text-xs text-muted-foreground", example: "The quick brown fox jumps over the lazy dog" }
-]
-
-const spacing = [
-  { name: "None", class: "space-y-0", value: "0" },
-  { name: "XS", class: "space-y-1", value: "0.25rem" },
-  { name: "SM", class: "space-y-2", value: "0.5rem" },
-  { name: "MD", class: "space-y-4", value: "1rem" },
-  { name: "LG", class: "space-y-6", value: "1.5rem" },
-  { name: "XL", class: "space-y-8", value: "2rem" }
-]
-
-const badgeVariants = [
-  "default", "secondary", "destructive", "outline", "success", "warning",
-  "business", "individual", "active", "inactive", "pending", "suspended"
-]
-
-function ColorSwatch({ color }: { color: { name: string; value: string; class: string } }) {
-  const [copied, setCopied] = React.useState(false)
-  
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(color.value)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-  
-  return (
-    <div className="group cursor-pointer" onClick={copyToClipboard}>
-      <div className={`h-16 w-full rounded-lg ${color.class} mb-2 group-hover:scale-105 transition-transform`} />
-      <div className="text-xs">
-        <div className="font-medium text-foreground">{color.name}</div>
-        <div className="text-muted-foreground flex items-center gap-1">
-          {color.value}
-          {copied ? <Check className="w-3 h-3 text-success" /> : <Copy className="w-3 h-3 opacity-0 group-hover:opacity-100" />}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function PatternLibrary() {
-  return (
-    <Container size="xl">
-      <Stack spacing="lg">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground">Pattern Library</h1>
-          <p className="text-muted-foreground mt-2">
-            Design system tokens, components, and usage guidelines
-          </p>
-        </div>
-
-        <Tabs defaultValue="colors" className="w-full">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="colors">Colors</TabsTrigger>
-            <TabsTrigger value="typography">Typography</TabsTrigger>
-            <TabsTrigger value="spacing">Spacing</TabsTrigger>
-            <TabsTrigger value="components">Components</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="colors" className="mt-6">
-            <Stack spacing="lg">
-              {Object.entries(colorPalette).map(([key, palette]) => (
-                <Card key={key}>
-                  <CardHeader>
-                    <CardTitle>{palette.name}</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-                      {palette.colors.map((color) => (
-                        <ColorSwatch key={color.name} color={color} />
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </Stack>
-          </TabsContent>
-
-          <TabsContent value="typography" className="mt-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Typography Scale</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <Stack spacing="lg">
-                  {typography.map((type) => (
-                    <div key={type.name} className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
-                      <div className="text-sm font-medium text-muted-foreground">
-                        {type.name}
-                      </div>
-                      <div className="md:col-span-2">
-                        <div className={type.class}>{type.example}</div>
-                      </div>
-                      <div className="text-xs text-muted-foreground font-mono">
-                        {type.class}
-                      </div>
-                    </div>
-                  ))}
-                </Stack>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="spacing" className="mt-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Spacing System</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <Stack spacing="lg">
-                  {spacing.map((space) => (
-                    <div key={space.name} className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
-                      <div className="text-sm font-medium text-muted-foreground">
-                        {space.name}
-                      </div>
-                      <div className="md:col-span-2">
-                        <div className={space.class}>
-                          <div className="bg-primary/20 p-2 rounded">Item 1</div>
-                          <div className="bg-primary/20 p-2 rounded">Item 2</div>
-                        </div>
-                      </div>
-                      <div className="text-xs text-muted-foreground font-mono">
-                        {space.value} ({space.class})
-                      </div>
-                    </div>
-                  ))}
-                </Stack>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="components" className="mt-6">
-            <Stack spacing="lg">
-              {/* Badges */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Badge Variants</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-2">
-                    {badgeVariants.map((variant) => (
-                      <Badge key={variant} variant={variant as any}>
-                        {variant}
-                      </Badge>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Buttons */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Button Variants</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Stack direction="horizontal" spacing="sm" className="flex-wrap">
-                    <Button variant="default">Default</Button>
-                    <Button variant="secondary">Secondary</Button>
-                    <Button variant="outline">Outline</Button>
-                    <Button variant="ghost">Ghost</Button>
-                    <Button variant="link">Link</Button>
-                    <Button variant="destructive">Destructive</Button>
-                  </Stack>
-                </CardContent>
-              </Card>
-
-              {/* Grid Examples */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Grid Layouts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Stack spacing="md">
-                    <div>
-                      <h4 className="text-sm font-medium mb-2">Cards Grid</h4>
-                      <ResponsiveGrid type="cards" gap="sm">
-                        {[1, 2, 3, 4, 5, 6].map((i) => (
-                          <div key={i} className="bg-muted rounded p-4 text-center text-sm">
-                            Card {i}
-                          </div>
-                        ))}
-                      </ResponsiveGrid>
-                    </div>
-                    <div>
-                      <h4 className="text-sm font-medium mb-2">Forms Grid</h4>
-                      <ResponsiveGrid type="forms" gap="md">
-                        {[1, 2, 3, 4].map((i) => (
-                          <div key={i} className="bg-muted rounded p-4 text-center text-sm">
-                            Form Section {i}
-                          </div>
-                        ))}
-                      </ResponsiveGrid>
-                    </div>
-                  </Stack>
-                </CardContent>
-              </Card>
-            </Stack>
-          </TabsContent>
-        </Tabs>
-      </Stack>
-    </Container>
-  )
-}

package/src/components/ui-kit/showcase.tsx

@@ -1,211 +0,0 @@
-import * as React from "react"
-import { Container } from "@/components/ui/container"
-import { Stack } from "@/components/ui/stack"
-import { MetricCard } from "@/components/ui/metric-card"
-import { DataTable, type DataTableColumn } from "@/components/ui/data-table"
-import { AccountCard } from "@/components/ui/account-card"
-import { EntityCard } from "@/components/ui/entity-card"
-import { FormField } from "@/components/ui/form-field"
-import { Breadcrumb } from "@/components/ui/breadcrumb"
-import { ResponsiveGrid } from "@/components/ui/responsive-grid"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-import { mockCounterparties, mockAccounts, mockMetrics, mockTableData } from "@/lib/mock-data"
-import { Building, Users, Plus, Download } from "lucide-react"
-
-const tableColumns: DataTableColumn[] = [
-  { key: "name", title: "Name", sortable: true },
-  { key: "type", title: "Type", sortable: true },
-  { key: "status", title: "Status", sortable: true },
-  { key: "amount", title: "Amount", sortable: true, align: "right" },
-  { key: "date", title: "Date", sortable: true },
-  { key: "verified", title: "Verified", sortable: true }
-]
-
-export function UIKitShowcase() {
-  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: "Showcase" }
-  ]
-
-  return (
-    <div className="min-h-screen bg-gradient-subtle">
-      <Container size="xl">
-        <Stack spacing="lg">
-          {/* Breadcrumbs */}
-          <Breadcrumb items={breadcrumbs} />
-          
-          {/* Page Header */}
-          <div className="flex items-start justify-between">
-            <Stack spacing="sm">
-              <h1 className="text-3xl font-bold text-foreground">UI Kit Showcase</h1>
-              <p className="text-muted-foreground max-w-2xl">
-                Complete collection of reusable components, layouts, and patterns for building financial applications.
-              </p>
-            </Stack>
-            
-            <Stack direction="horizontal" spacing="sm">
-              <Button variant="outline">
-                <Download className="w-4 h-4" />
-                Export Kit
-              </Button>
-              <Button>
-                <Plus className="w-4 h-4" />
-                Create Component
-              </Button>
-            </Stack>
-          </div>
-
-          {/* Metrics Section */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Metric Cards</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveGrid type="cards" gap="md">
-                {mockMetrics.map((metric, index) => (
-                  <MetricCard key={index} {...metric} />
-                ))}
-              </ResponsiveGrid>
-            </CardContent>
-          </Card>
-
-          {/* Form Components */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Form Components</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Stack spacing="md">
-                <FormField
-                  label="Enhanced Input"
-                  description="Input field with validation and enhanced styling"
-                  required
-                >
-                  <EnhancedInput 
-                    placeholder="Enter your name"
-                    error="This field is required"
-                  />
-                </FormField>
-                
-                <FormField
-                  label="Enhanced Select"
-                  description="Select dropdown with search and validation"
-                  layout="horizontal"
-                >
-                  <EnhancedSelect
-                    placeholder="Choose an option"
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" }
-                    ]}
-                  />
-                </FormField>
-              </Stack>
-            </CardContent>
-          </Card>
-
-          {/* Account Cards */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Account Cards</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveGrid type="cards" gap="md">
-                {mockAccounts.map((account) => (
-                  <AccountCard key={account.id} account={account} />
-                ))}
-              </ResponsiveGrid>
-            </CardContent>
-          </Card>
-
-          {/* Entity Cards */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Entity Cards</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveGrid type="cards" gap="md">
-                {mockCounterparties.map((entity) => (
-                  <EntityCard 
-                    key={entity.id}
-                    entity={entity}
-                    onView={(id) => console.log("View", id)}
-                    onEdit={(id) => console.log("Edit", id)}
-                    onDelete={(id) => console.log("Delete", id)}
-                  />
-                ))}
-              </ResponsiveGrid>
-            </CardContent>
-          </Card>
-
-          {/* Data Table */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Data Table</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <DataTable
-                columns={tableColumns}
-                data={mockTableData}
-                sortBy={sortBy}
-                sortDirection={sortDirection}
-                onSort={handleSort}
-              />
-            </CardContent>
-          </Card>
-
-          {/* Layout Examples */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Layout Components</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Stack spacing="md">
-                <div>
-                  <h4 className="text-sm font-medium text-foreground mb-2">Container Sizes</h4>
-                  <Stack spacing="sm">
-                    <div className="bg-primary/10 rounded p-2 text-center text-xs">
-                      Small Container (max-w-2xl)
-                    </div>
-                    <div className="bg-primary/10 rounded p-2 text-center text-xs max-w-4xl">
-                      Medium Container (max-w-4xl)
-                    </div>
-                    <div className="bg-primary/10 rounded p-2 text-center text-xs max-w-6xl">
-                      Large Container (max-w-6xl)
-                    </div>
-                  </Stack>
-                </div>
-                
-                <div>
-                  <h4 className="text-sm font-medium text-foreground mb-2">Responsive Grids</h4>
-                  <ResponsiveGrid type="forms" gap="sm">
-                    <div className="bg-secondary rounded p-4 text-center text-sm">Form Grid 1</div>
-                    <div className="bg-secondary rounded p-4 text-center text-sm">Form Grid 2</div>
-                    <div className="bg-secondary rounded p-4 text-center text-sm">Form Grid 3</div>
-                    <div className="bg-secondary rounded p-4 text-center text-sm">Form Grid 4</div>
-                  </ResponsiveGrid>
-                </div>
-              </Stack>
-            </CardContent>
-          </Card>
-        </Stack>
-      </Container>
-    </div>
-  )
-}

package/src/hooks/use-mobile.tsx

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}

package/src/hooks/use-toast.ts

@@ -1,191 +0,0 @@
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }