braid-ui 1.0.98 → 1.0.99

package/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,106 @@
+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"

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,64 @@
+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 }