braid-ui 1.0.99 → 1.0.101

package/src/components/ui/form-select.tsx

@@ -1,35 +0,0 @@
-import * as React from "react"
-import { Controller, useFormContext, FieldPath, FieldValues } from "react-hook-form"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-
-interface FormSelectProps<T extends FieldValues = FieldValues> {
-  name: FieldPath<T>
-  label?: string
-  hint?: string
-  placeholder?: string
-  options: { value: string; label: string; disabled?: boolean }[]
-  disabled?: boolean
-}
-
-export const FormSelect = <T extends FieldValues = FieldValues>({ 
-  name, 
-  ...props 
-}: FormSelectProps<T>) => {
-  const { control, formState } = useFormContext<T>()
-  const error = formState.errors[name]?.message as string | undefined
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <EnhancedSelect
-          {...props}
-          value={field.value}
-          onValueChange={field.onChange}
-          error={error}
-        />
-      )}
-    />
-  )
-}

package/src/components/ui/info-field.tsx

@@ -1,36 +0,0 @@
-interface InfoFieldProps {
-  label?: string
-  value: string | React.ReactNode
-  layout?: 'vertical' | 'horizontal' | 'compact'
-  className?: string
-}
-
-import React from "react"
-
-export const InfoField = ({ label, value, layout = 'vertical', className }: InfoFieldProps) => {
-  if (layout === 'horizontal') {
-    return (
-      <div className={`flex items-start gap-3 ${className || ''}`}>
-        {label && <p className="text-sm font-medium text-muted-foreground flex-shrink-0 max-w-[50%]">{label}</p>}
-        <div className="text-sm text-foreground flex-1 min-w-0 break-words">{value}</div>
-      </div>
-    )
-  }
-
-  if (layout === 'compact') {
-    return (
-      <div className={`flex items-center gap-2 ${className || ''}`}>
-        {label && <p className="text-xs font-medium text-muted-foreground">{label}:</p>}
-        <div className="text-xs text-foreground">{value}</div>
-      </div>
-    )
-  }
-
-  // Default vertical layout
-  return (
-    <div className={className}>
-      {label && <p className="text-sm font-medium text-muted-foreground">{label}</p>}
-      <div className={`text-sm text-foreground ${label ? 'mt-1' : ''}`}>{value}</div>
-    </div>
-  )
-}

package/src/components/ui/json-viewer.tsx

@@ -1,146 +0,0 @@
-import { useState } from "react"
-import { ChevronDown, ChevronRight, Copy, Check } from "lucide-react"
-import { Button } from "./button"
-import { cn } from "@/lib/utils"
-
-interface JsonViewerProps {
-  data: any
-  className?: string
-  compact?: boolean
-  maxHeight?: string
-}
-
-export const JsonViewer = ({ data, className, compact = false, maxHeight = "60vh" }: JsonViewerProps) => {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(JSON.stringify(data, null, 2))
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  return (
-    <div className={cn("relative", className)}>
-      <div className={cn("absolute z-10", compact ? "right-1 top-1" : "right-2 top-2")}>
-        <Button
-          variant="outline"
-          size={compact ? "sm" : "sm"}
-          onClick={handleCopy}
-          className={cn("gap-2", compact && "h-7 text-xs px-2")}
-        >
-          {copied ? (
-            <>
-              <Check className="h-3 w-3" />
-              {!compact && "Copied"}
-            </>
-          ) : (
-            <>
-              <Copy className="h-3 w-3" />
-              {!compact && "Copy JSON"}
-            </>
-          )}
-        </Button>
-      </div>
-      <div 
-        className={cn(
-          "overflow-auto bg-muted/30 rounded-lg border font-mono",
-          compact ? "max-h-[300px] p-2 text-xs" : `max-h-[${maxHeight}] p-4 text-xs`
-        )}
-        style={{ maxHeight: compact ? "300px" : maxHeight }}
-      >
-        <JsonNode data={data} name="root" depth={0} compact={compact} />
-      </div>
-    </div>
-  )
-}
-
-interface JsonNodeProps {
-  data: any
-  name: string
-  depth: number
-  compact?: boolean
-}
-
-const JsonNode = ({ data, name, depth, compact = false }: JsonNodeProps) => {
-  const [isExpanded, setIsExpanded] = useState(compact ? depth < 1 : depth < 2)
-
-  const indent = compact ? depth * 12 : depth * 16
-
-  if (data === null) {
-    return (
-      <div style={{ paddingLeft: indent }} className="text-muted-foreground">
-        <span className="text-primary">{name}</span>: <span className="text-orange-500">null</span>
-      </div>
-    )
-  }
-
-  if (typeof data !== "object") {
-    const valueClass = 
-      typeof data === "string" ? "text-green-600 dark:text-green-400" :
-      typeof data === "number" ? "text-blue-600 dark:text-blue-400" :
-      typeof data === "boolean" ? "text-orange-500" :
-      "text-foreground"
-
-    return (
-      <div style={{ paddingLeft: indent }}>
-        <span className="text-primary">{name}</span>:{" "}
-        <span className={valueClass}>
-          {typeof data === "string" ? `"${data}"` : String(data)}
-        </span>
-      </div>
-    )
-  }
-
-  const isArray = Array.isArray(data)
-  const entries = isArray ? data : Object.entries(data)
-  const isEmpty = entries.length === 0
-
-  return (
-    <div style={{ paddingLeft: indent }}>
-      <div
-        className="flex items-center gap-1 cursor-pointer hover:bg-muted/50 rounded"
-        onClick={() => !isEmpty && setIsExpanded(!isExpanded)}
-      >
-        {!isEmpty && (
-          isExpanded ? (
-            <ChevronDown className="h-3 w-3 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="h-3 w-3 text-muted-foreground" />
-          )
-        )}
-        <span className="text-primary">{name}</span>
-        <span className="text-muted-foreground">
-          {isArray ? "[" : "{"}
-          {!isExpanded && !isEmpty && "..."}
-          {isEmpty && (isArray ? "]" : "}")}
-        </span>
-      </div>
-      {isExpanded && !isEmpty && (
-        <div>
-          {isArray
-            ? data.map((item: any, index: number) => (
-                <JsonNode
-                  key={index}
-                  data={item}
-                  name={String(index)}
-                  depth={depth + 1}
-                  compact={compact}
-                />
-              ))
-            : Object.entries(data).map(([key, value]) => (
-                <JsonNode
-                  key={key}
-                  data={value}
-                  name={key}
-                  depth={depth + 1}
-                  compact={compact}
-                />
-              ))}
-          <div style={{ paddingLeft: indent }} className="text-muted-foreground">
-            {isArray ? "]" : "}"}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

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

@@ -1,80 +0,0 @@
-import * as React from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-import { TrendingUp, TrendingDown, Minus } from "lucide-react"
-
-interface MetricCardProps {
-  title: string
-  value: string | number
-  description?: string
-  trend?: {
-    value: number
-    label: string
-    direction: "up" | "down" | "neutral"
-  }
-  icon?: React.ReactNode
-  variant?: "default" | "success" | "warning" | "destructive"
-  className?: string
-}
-
-const variantStyles = {
-  default: "",
-  success: "border-success/20 bg-success/5",
-  warning: "border-warning/20 bg-warning/5", 
-  destructive: "border-destructive/20 bg-destructive/5"
-}
-
-const trendIcons = {
-  up: TrendingUp,
-  down: TrendingDown,
-  neutral: Minus
-}
-
-const trendColors = {
-  up: "success",
-  down: "destructive",
-  neutral: "secondary"
-} as const
-
-export const MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(
-  ({ title, value, description, trend, icon, variant = "default", className }, ref) => {
-    const TrendIcon = trend ? trendIcons[trend.direction] : null
-    
-    return (
-      <Card 
-        ref={ref}
-        className={cn(variantStyles[variant], className)}
-      >
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
-            {title}
-          </CardTitle>
-          {icon && (
-            <div className="text-muted-foreground">
-              {icon}
-            </div>
-          )}
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold text-foreground">{value}</div>
-          {(description || trend) && (
-            <div className="flex items-center justify-between mt-2">
-              {description && (
-                <p className="text-xs text-muted-foreground">{description}</p>
-              )}
-              {trend && TrendIcon && (
-                <Badge variant={trendColors[trend.direction]} className="text-xs">
-                  <TrendIcon className="w-3 h-3 mr-1" />
-                  {trend.value > 0 ? "+" : ""}{trend.value}% {trend.label}
-                </Badge>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    )
-  }
-)
-
-MetricCard.displayName = "MetricCard"

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

@@ -1,183 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface PageAction {
-  label: string
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost"
-  onClick: () => void
-  icon?: React.ComponentType<{ className?: string }>
-}
-
-export interface PageCard {
-  component: React.ComponentType<any>
-  key: string
-  expandOnEdit?: boolean
-  props?: Record<string, any>
-}
-
-interface PageLayoutProps {
-  title: string
-  description?: string
-  children?: React.ReactNode
-  actions?: PageAction[]
-  cards?: PageCard[]
-  mode?: "simple" | "detail" | "cards"
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full"
-  gridCols?: 1 | 2 | 3 | 4
-  responsive?: boolean
-  className?: string
-}
-
-const maxWidthClasses = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl", 
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  full: "max-w-none"
-}
-
-const getGridClasses = (gridCols: number, responsive: boolean) => {
-  const colsMap = {
-    1: "grid-cols-1",
-    2: "grid-cols-2", 
-    3: "grid-cols-3",
-    4: "grid-cols-4"
-  }
-  
-  if (!responsive) {
-    return colsMap[gridCols as keyof typeof colsMap] || "grid-cols-1"
-  }
-  
-  // Responsive grid classes
-  switch (gridCols) {
-    case 1:
-      return "grid-cols-1"
-    case 2:
-      return "grid-cols-1 lg:grid-cols-2"
-    case 3:
-      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-    case 4:
-      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-    default:
-      return "grid-cols-1 lg:grid-cols-2"
-  }
-}
-
-export const PageLayout = React.forwardRef<HTMLDivElement, PageLayoutProps>(
-  ({ 
-    title, 
-    description, 
-    children, 
-    actions = [], 
-    cards = [],
-    mode = "simple",
-    maxWidth = "xl",
-    gridCols = 2,
-    responsive = true,
-    className 
-  }, ref) => {
-    const [editingCards, setEditingCards] = React.useState<Set<string>>(new Set())
-
-    const toggleEdit = (cardKey: string) => {
-      setEditingCards(prev => {
-        const next = new Set(prev)
-        if (next.has(cardKey)) {
-          next.delete(cardKey)
-        } else {
-          next.add(cardKey)
-        }
-        return next
-      })
-    }
-
-    return (
-      <div ref={ref} className="flex flex-col h-screen bg-gradient-subtle">
-        {/* Sticky Header */}
-        <div className={cn(
-          "sticky top-0 z-10 bg-gradient-subtle border-b border-border/40",
-          "container mx-auto px-4 pt-8 pb-4",
-          maxWidthClasses[maxWidth]
-        )}>
-          <div className="flex items-start justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-foreground mb-2">
-                {title}
-              </h1>
-              {description && (
-                <p className="text-muted-foreground">
-                  {description}
-                </p>
-              )}
-            </div>
-            
-            {actions.length > 0 && (
-              <div className="flex items-center gap-2">
-                {actions.map((action, index) => {
-                  const Icon = action.icon
-                  return (
-                    <button
-                      key={index}
-                      onClick={action.onClick}
-                      className={cn(
-                        "inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors",
-                        {
-                          "bg-primary text-primary-foreground hover:bg-primary/90": action.variant === "default" || !action.variant,
-                          "bg-secondary text-secondary-foreground hover:bg-secondary/80": action.variant === "secondary",
-                          "bg-destructive text-destructive-foreground hover:bg-destructive/90": action.variant === "destructive",
-                          "border border-input bg-background hover:bg-accent hover:text-accent-foreground": action.variant === "outline",
-                          "hover:bg-accent hover:text-accent-foreground": action.variant === "ghost"
-                        }
-                      )}
-                    >
-                      {Icon && <Icon className="h-4 w-4" />}
-                      {action.label}
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-        
-        {/* Scrollable Content */}
-        <div className="flex-1 overflow-y-auto">
-          <div className={cn(
-            "container mx-auto px-4 py-6",
-            maxWidthClasses[maxWidth],
-            className
-          )}>
-            {mode === "cards" && cards.length > 0 ? (
-              <div className={cn("grid gap-6", getGridClasses(gridCols, responsive))}>
-                {cards.map((card) => {
-                  const isEditing = editingCards.has(card.key)
-                  const shouldExpand = card.expandOnEdit && isEditing
-                  
-                  return (
-                    <div 
-                      key={card.key}
-                      className={cn(
-                        "transition-all duration-300",
-                        shouldExpand && (gridCols > 1 ? "col-span-full" : "")
-                      )}
-                    >
-                      <card.component
-                        {...card.props}
-                        isEditing={isEditing}
-                        onToggleEdit={() => toggleEdit(card.key)}
-                      />
-                    </div>
-                  )
-                })}
-              </div>
-            ) : (
-              children
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-
-PageLayout.displayName = "PageLayout"

package/src/components/ui/popover.tsx

@@ -1,29 +0,0 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }

package/src/components/ui/responsive-grid.tsx

@@ -1,46 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface ResponsiveGridProps {
-  children: React.ReactNode
-  type?: "cards" | "forms" | "data" | "custom"
-  gap?: "sm" | "md" | "lg" | "xl"
-  editMode?: boolean
-  className?: string
-}
-
-const typeClasses = {
-  cards: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  forms: "grid-cols-1 lg:grid-cols-2", 
-  data: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-  custom: ""
-}
-
-const gapClasses = {
-  sm: "gap-3",
-  md: "gap-4",
-  lg: "gap-6", 
-  xl: "gap-8"
-}
-
-export const ResponsiveGrid = React.forwardRef<HTMLDivElement, ResponsiveGridProps>(
-  ({ children, type = "cards", gap = "md", editMode = false, className }, ref) => {
-    const gridClasses = editMode ? "grid-cols-1" : typeClasses[type]
-    
-    return (
-      <div 
-        ref={ref}
-        className={cn(
-          "grid",
-          gridClasses,
-          gapClasses[gap],
-          className
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-ResponsiveGrid.displayName = "ResponsiveGrid"

package/src/components/ui/separator.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }