braid-ui 1.0.99 → 1.0.100

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

@@ -1,67 +0,0 @@
-import { useState } from "react"
-import { InfoField } from "./info-field"
-import { EnhancedSelect } from "./enhanced-select"
-import { Badge } from "./badge"
-import { cn } from "@/lib/utils"
-
-interface EditableInfoFieldProps {
-  label: string
-  value: string | null | undefined
-  options: { value: string; label: string }[]
-  onChange: (value: string) => void
-  placeholder?: string
-  renderValue?: (value: string) => React.ReactNode
-  className?: string
-}
-
-export const EditableInfoField = ({
-  label,
-  value,
-  options,
-  onChange,
-  placeholder = "Select...",
-  renderValue,
-  className
-}: EditableInfoFieldProps) => {
-  const [isEditing, setIsEditing] = useState(false)
-
-  const handleChange = (newValue: string) => {
-    onChange(newValue)
-    setIsEditing(false)
-  }
-
-  if (isEditing) {
-    return (
-      <div className={className}>
-        <EnhancedSelect
-          label={label}
-          value={value || ""}
-          onValueChange={handleChange}
-          options={options}
-          placeholder={placeholder}
-        />
-      </div>
-    )
-  }
-
-  const displayValue = value 
-    ? (renderValue ? renderValue(value) : value)
-    : placeholder
-
-  return (
-    <div 
-      className={cn("cursor-pointer transition-colors hover:bg-muted/50 rounded-md -mx-2 px-2 -my-1 py-1", className)}
-      onClick={() => setIsEditing(true)}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          setIsEditing(true)
-        }
-      }}
-    >
-      <InfoField label={label} value={displayValue} />
-    </div>
-  )
-}

package/src/components/ui/enhanced-input.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-
-const inputVariants = cva(
-  "flex w-full rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground transition-form",
-  {
-    variants: {
-      variant: {
-        default: "border border-form-border focus-visible:border-form-border-focus focus-visible:outline-none focus-visible:shadow-form-focus",
-        error: "border border-form-border-error focus-visible:border-form-border-error focus-visible:outline-none focus-visible:shadow-form-error",
-        success: "border border-form-border-success focus-visible:border-form-border-success focus-visible:outline-none",
-        disabled: "border border-form-border bg-muted cursor-not-allowed opacity-50",
-        readonly: "border border-form-border bg-muted/50 cursor-default"
-      },
-      size: {
-        default: "h-10",
-        sm: "h-9",
-        lg: "h-11"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-)
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-    VariantProps<typeof inputVariants> {
-  label?: string
-  hint?: string
-  error?: string
-  success?: string
-  isLoading?: boolean
-}
-
-const EnhancedInput = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, size, label, hint, error, success, isLoading, ...props }, ref) => {
-    const inputVariant = error ? "error" : success ? "success" : props.disabled ? "disabled" : props.readOnly ? "readonly" : variant
-
-    return (
-      <div className="space-y-2">
-        {label && (
-          <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            {label}
-            {props.required && <span className="text-destructive ml-1">*</span>}
-          </label>
-        )}
-        <div className="relative">
-          <input
-            className={cn(inputVariants({ variant: inputVariant, size, className }))}
-            ref={ref}
-            {...props}
-          />
-          {isLoading && (
-            <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-              <div className="animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent"></div>
-            </div>
-          )}
-        </div>
-        {hint && !error && !success && (
-          <p className="text-xs text-muted-foreground">{hint}</p>
-        )}
-        {error && (
-          <p className="text-xs text-destructive">{error}</p>
-        )}
-        {success && (
-          <p className="text-xs text-success">{success}</p>
-        )}
-      </div>
-    )
-  }
-)
-EnhancedInput.displayName = "EnhancedInput"
-
-export { EnhancedInput, inputVariants }

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

@@ -1,101 +0,0 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-
-const selectVariants = cva(
-  "flex h-10 w-full items-center justify-between rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none transition-form",
-  {
-    variants: {
-      variant: {
-        default: "border border-form-border focus:border-form-border-focus focus:shadow-form-focus",
-        error: "border border-form-border-error focus:border-form-border-error focus:shadow-form-error",
-        success: "border border-form-border-success focus:border-form-border-success",
-        disabled: "border border-form-border bg-muted cursor-not-allowed opacity-50",
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-)
-
-interface EnhancedSelectProps extends VariantProps<typeof selectVariants> {
-  label?: string
-  hint?: string
-  error?: string
-  success?: string
-  placeholder?: string
-  options: { value: string; label: string; disabled?: boolean }[]
-  value?: string
-  onValueChange?: (value: string) => void
-  disabled?: boolean
-}
-
-const EnhancedSelect = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  EnhancedSelectProps
->(({ variant, label, hint, error, success, placeholder, options, disabled, ...props }, ref) => {
-  const selectVariant = error ? "error" : success ? "success" : disabled ? "disabled" : variant
-
-  return (
-    <div className="space-y-2">
-      {label && (
-        <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-          {label}
-        </label>
-      )}
-      <SelectPrimitive.Root {...props} disabled={disabled}>
-        <SelectPrimitive.Trigger
-          ref={ref}
-          className={cn(selectVariants({ variant: selectVariant }))}
-        >
-          <SelectPrimitive.Value placeholder={placeholder} />
-          <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-4 w-4 opacity-50" />
-          </SelectPrimitive.Icon>
-        </SelectPrimitive.Trigger>
-        <SelectPrimitive.Portal>
-          <SelectPrimitive.Content className="relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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">
-            <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
-              <ChevronUp className="h-4 w-4" />
-            </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-1">
-              {options.map((option) => (
-                <SelectPrimitive.Item
-                  key={option.value}
-                  value={option.value}
-                  disabled={option.disabled}
-                  className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                >
-                  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    <SelectPrimitive.ItemIndicator>
-                      <Check className="h-4 w-4" />
-                    </SelectPrimitive.ItemIndicator>
-                  </span>
-                  <SelectPrimitive.ItemText>{option.label}</SelectPrimitive.ItemText>
-                </SelectPrimitive.Item>
-              ))}
-            </SelectPrimitive.Viewport>
-            <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
-              <ChevronDown className="h-4 w-4" />
-            </SelectPrimitive.ScrollDownButton>
-          </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
-      </SelectPrimitive.Root>
-      {hint && !error && !success && (
-        <p className="text-xs text-muted-foreground">{hint}</p>
-      )}
-      {error && (
-        <p className="text-xs text-destructive">{error}</p>
-      )}
-      {success && (
-        <p className="text-xs text-success">{success}</p>
-      )}
-    </div>
-  )
-})
-EnhancedSelect.displayName = "EnhancedSelect"
-
-export { EnhancedSelect }

package/src/components/ui/enhanced-textarea.tsx

@@ -1,64 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-
-const textareaVariants = cva(
-  "flex min-h-[80px] w-full rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground transition-form resize-y",
-  {
-    variants: {
-      variant: {
-        default: "border border-form-border focus-visible:border-form-border-focus focus-visible:outline-none focus-visible:shadow-form-focus",
-        error: "border border-form-border-error focus-visible:border-form-border-error focus-visible:outline-none focus-visible:shadow-form-error",
-        success: "border border-form-border-success focus-visible:border-form-border-success focus-visible:outline-none",
-        disabled: "border border-form-border bg-muted cursor-not-allowed opacity-50 resize-none",
-        readonly: "border border-form-border bg-muted/50 cursor-default resize-none"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-)
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    VariantProps<typeof textareaVariants> {
-  label?: string
-  hint?: string
-  error?: string
-  success?: string
-}
-
-const EnhancedTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant, label, hint, error, success, ...props }, ref) => {
-    const textareaVariant = error ? "error" : success ? "success" : props.disabled ? "disabled" : props.readOnly ? "readonly" : variant
-
-    return (
-      <div className="space-y-2">
-        {label && (
-          <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            {label}
-            {props.required && <span className="text-destructive ml-1">*</span>}
-          </label>
-        )}
-        <textarea
-          className={cn(textareaVariants({ variant: textareaVariant, className }))}
-          ref={ref}
-          {...props}
-        />
-        {hint && !error && !success && (
-          <p className="text-xs text-muted-foreground">{hint}</p>
-        )}
-        {error && (
-          <p className="text-xs text-destructive">{error}</p>
-        )}
-        {success && (
-          <p className="text-xs text-success">{success}</p>
-        )}
-      </div>
-    )
-  }
-)
-EnhancedTextarea.displayName = "EnhancedTextarea"
-
-export { EnhancedTextarea, textareaVariants }

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

@@ -1,140 +0,0 @@
-import * as React from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { DataGrid } from "@/components/ui/data-grid"
-import { cn } from "@/lib/utils"
-import { MoreVertical, Edit, Trash2, Eye } from "lucide-react"
-import { 
-  DropdownMenu, 
-  DropdownMenuContent, 
-  DropdownMenuItem, 
-  DropdownMenuSeparator, 
-  DropdownMenuTrigger 
-} from "@/components/ui/dropdown-menu"
-
-interface EntityAction {
-  label: string
-  icon: React.ReactNode
-  onClick: () => void
-  variant?: "default" | "destructive"
-}
-
-interface EntityCardProps {
-  entity: {
-    id: string
-    name: string
-    type: string
-    status: string
-    description?: string
-    metadata?: Record<string, any>
-  }
-  actions?: EntityAction[]
-  showDefaultActions?: boolean
-  onView?: (id: string) => void
-  onEdit?: (id: string) => void
-  onDelete?: (id: string) => void
-  className?: string
-  children?: React.ReactNode
-}
-
-export const EntityCard = React.forwardRef<HTMLDivElement, EntityCardProps>(
-  ({ 
-    entity, 
-    actions, 
-    showDefaultActions = true,
-    onView,
-    onEdit, 
-    onDelete,
-    className, 
-    children 
-  }, ref) => {
-    const defaultActions: EntityAction[] = [
-      ...(onView ? [{
-        label: "View Details",
-        icon: <Eye className="w-4 h-4" />,
-        onClick: () => onView(entity.id)
-      }] : []),
-      ...(onEdit ? [{
-        label: "Edit",
-        icon: <Edit className="w-4 h-4" />,
-        onClick: () => onEdit(entity.id)
-      }] : []),
-      ...(onDelete ? [{
-        label: "Delete",
-        icon: <Trash2 className="w-4 h-4" />,
-        onClick: () => onDelete(entity.id),
-        variant: "destructive" as const
-      }] : [])
-    ]
-
-    const allActions = showDefaultActions ? [...defaultActions, ...(actions || [])] : (actions || [])
-    
-    const entityData = entity.metadata ? Object.entries(entity.metadata)
-      .filter(([_, value]) => value !== null && value !== undefined)
-      .map(([key, value]) => ({
-        label: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
-        value: typeof value === 'object' ? JSON.stringify(value) : String(value)
-      })) : []
-
-    return (
-      <Card ref={ref} className={cn("relative", className)}>
-        <CardHeader>
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <CardTitle className="text-lg truncate">{entity.name}</CardTitle>
-              <div className="flex items-center space-x-2 mt-2">
-                <Badge variant={entity.status as any}>{entity.status}</Badge>
-                <Badge variant="outline">{entity.type}</Badge>
-              </div>
-              {entity.description && (
-                <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
-                  {entity.description}
-                </p>
-              )}
-            </div>
-            
-            {allActions.length > 0 && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon" className="h-8 w-8">
-                    <MoreVertical className="w-4 h-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  {allActions.map((action, index) => (
-                    <React.Fragment key={index}>
-                      <DropdownMenuItem
-                        onClick={action.onClick}
-                        className={cn(
-                          action.variant === "destructive" && "text-destructive focus:text-destructive"
-                        )}
-                      >
-                        {action.icon}
-                        {action.label}
-                      </DropdownMenuItem>
-                      {index < allActions.length - 1 && action.variant === "destructive" && (
-                        <DropdownMenuSeparator />
-                      )}
-                    </React.Fragment>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
-        </CardHeader>
-        
-        {(entityData.length > 0 || children) && (
-          <CardContent>
-            {entityData.length > 0 && (
-              <DataGrid data={entityData} columns={2} gap="sm" />
-            )}
-            {children}
-          </CardContent>
-        )}
-      </Card>
-    )
-  }
-)
-
-EntityCard.displayName = "EntityCard"

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

@@ -1,40 +0,0 @@
-import * as React from "react"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, type CardProps } from "@/components/ui/card"
-import { cn } from "@/lib/utils"
-
-export interface FormCardProps extends Omit<CardProps, 'children'> {
-  title: string
-  description?: string
-  children: React.ReactNode
-  headerActions?: React.ReactNode
-}
-
-export const FormCard = React.forwardRef<HTMLDivElement, FormCardProps>(
-  ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => (
-    <Card 
-      ref={ref}
-      variant={variant}
-      fullHeight
-      className={cn("", className)}
-      {...props}
-    >
-      <CardHeader 
-        direction={headerActions ? "row" : "column"}
-        size="md"
-      >
-        <div className="space-y-1">
-          <CardTitle size="md">{title}</CardTitle>
-        </div>
-        {headerActions && (
-          <div className="flex items-center gap-2">
-            {headerActions}
-          </div>
-        )}
-      </CardHeader>
-      <CardContent size="md" fullHeight>
-        {children}
-      </CardContent>
-    </Card>
-  )
-)
-FormCard.displayName = "FormCard"

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

@@ -1,50 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface FormFieldProps {
-  label?: string
-  description?: string
-  error?: string
-  required?: boolean
-  children: React.ReactNode
-  className?: string
-  layout?: "vertical" | "horizontal"
-}
-
-export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
-  ({ label, description, error, required, children, className, layout = "vertical" }, ref) => {
-    const isHorizontal = layout === "horizontal"
-    
-    return (
-      <div 
-        ref={ref}
-        className={cn(
-          "space-y-2",
-          isHorizontal && "grid grid-cols-1 md:grid-cols-3 gap-4 items-start space-y-0",
-          className
-        )}
-      >
-        {label && (
-          <div className={cn("space-y-1", isHorizontal && "pt-2")}>
-            <label className="text-sm font-medium text-foreground">
-              {label}
-              {required && <span className="text-destructive ml-1">*</span>}
-            </label>
-            {description && (
-              <p className="text-xs text-muted-foreground">{description}</p>
-            )}
-          </div>
-        )}
-        
-        <div className={cn(isHorizontal && "md:col-span-2")}>
-          {children}
-          {error && (
-            <p className="text-xs text-destructive mt-1">{error}</p>
-          )}
-        </div>
-      </div>
-    )
-  }
-)
-
-FormField.displayName = "FormField"

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

@@ -1,29 +0,0 @@
-import * as React from "react"
-import { Controller, useFormContext, FieldPath, FieldValues } from "react-hook-form"
-import { EnhancedInput, type InputProps } from "@/components/ui/enhanced-input"
-
-interface FormInputProps<T extends FieldValues = FieldValues> extends Omit<InputProps, 'error' | 'name'> {
-  name: FieldPath<T>
-}
-
-export const FormInput = <T extends FieldValues = FieldValues>({ 
-  name, 
-  ...props 
-}: FormInputProps<T>) => {
-  const { control, formState } = useFormContext<T>()
-  const error = formState.errors[name]?.message as string | undefined
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <EnhancedInput
-          {...props}
-          {...field}
-          error={error}
-        />
-      )}
-    />
-  )
-}

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

@@ -1,18 +0,0 @@
-import * as React from "react"
-import { FormProvider as RHFFormProvider, UseFormReturn, FieldValues } from "react-hook-form"
-
-interface FormProviderProps<T extends FieldValues> {
-  form: UseFormReturn<T>
-  children: React.ReactNode
-}
-
-export const FormProvider = <T extends FieldValues>({ 
-  form, 
-  children 
-}: FormProviderProps<T>) => {
-  return (
-    <RHFFormProvider {...form}>
-      {children}
-    </RHFFormProvider>
-  )
-}

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

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface FormSectionProps {
-  title?: string
-  description?: string
-  children: React.ReactNode
-  className?: string
-  spacing?: "sm" | "md" | "lg"
-  layout?: "vertical" | "grid"
-  columns?: 1 | 2 | 3 | 4
-}
-
-const spacingClasses = {
-  sm: "space-y-3",
-  md: "space-y-4",
-  lg: "space-y-6"
-}
-
-const gridClasses = {
-  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 FormSection = React.forwardRef<HTMLDivElement, FormSectionProps>(
-  ({ 
-    title, 
-    description, 
-    children, 
-    className, 
-    spacing = "md", 
-    layout = "vertical",
-    columns = 2 
-  }, ref) => {
-    return (
-      <div ref={ref} className={cn("space-y-4", className)}>
-        {(title || description) && (
-          <div className="space-y-1">
-            {title && (
-              <h3 className="text-lg font-semibold text-foreground">
-                {title}
-              </h3>
-            )}
-            {description && (
-              <p className="text-sm text-muted-foreground">
-                {description}
-              </p>
-            )}
-          </div>
-        )}
-        
-        <div className={cn(
-          layout === "grid" 
-            ? `grid gap-4 ${gridClasses[columns]}` 
-            : spacingClasses[spacing]
-        )}>
-          {children}
-        </div>
-      </div>
-    )
-  }
-)
-
-FormSection.displayName = "FormSection"