myoperator-ui 0.0.67 → 0.0.69

package/dist/index.js

@@ -1159,8 +1159,9 @@ export {
     },
     "input": {
       name: "input",
-      description: "input component",
+      description: "A text input component with error and disabled states",
       dependencies: [
+        "class-variance-authority",
         "clsx",
         "tailwind-merge"
       ],
@@ -1225,10 +1226,12 @@ export { Input, inputVariants }
     },
     "multi-select": {
       name: "multi-select",
-      description: "multi-select component",
+      description: "A multi-select dropdown component with search, badges, and async loading",
       dependencies: [
+        "class-variance-authority",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
@@ -1648,10 +1651,12 @@ export { MultiSelect, multiSelectTriggerVariants }
     },
     "select-field": {
       name: "select-field",
-      description: "select-field component",
+      description: "A select field with label, helper text, and validation states",
       dependencies: [
+        "@radix-ui/react-select",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
@@ -1938,10 +1943,13 @@ export { SelectField }
     },
     "select": {
       name: "select",
-      description: "select component",
+      description: "A select dropdown component built on Radix UI Select",
       dependencies: [
+        "@radix-ui/react-select",
+        "class-variance-authority",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
@@ -2599,10 +2607,12 @@ export { Tag, TagGroup, tagVariants }
     },
     "text-field": {
       name: "text-field",
-      description: "text-field component",
+      description: "A text field with label, helper text, icons, and validation states",
       dependencies: [
+        "class-variance-authority",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
@@ -3014,6 +3024,908 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
 Toggle.displayName = "Toggle"
 
 export { Toggle, toggleVariants }
+`, prefix)
+        }
+      ]
+    },
+    "event-selector": {
+      name: "event-selector",
+      description: "A component for selecting webhook events with groups, categories, and tri-state checkboxes",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      internalDependencies: [
+        "checkbox",
+        "collapsible"
+      ],
+      isMultiFile: true,
+      directory: "event-selector",
+      mainFile: "event-selector.tsx",
+      files: [
+        {
+          name: "event-selector.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { cn } from "../../../lib/utils"
+import { EventGroupComponent } from "./event-group"
+import type { EventSelectorProps, EventCategory, EventGroup } from "./types"
+
+/**
+ * EventSelector - A component for selecting webhook events
+ *
+ * Install via CLI:
+ * \`\`\`bash
+ * npx myoperator-ui add event-selector
+ * \`\`\`
+ *
+ * Or import directly from npm:
+ * \`\`\`tsx
+ * import { EventSelector } from "@myoperator/ui"
+ * \`\`\`
+ *
+ * @example
+ * \`\`\`tsx
+ * <EventSelector
+ *   events={events}
+ *   groups={groups}
+ *   selectedEvents={selected}
+ *   onSelectionChange={setSelected}
+ * />
+ * \`\`\`
+ */
+export const EventSelector = React.forwardRef<HTMLDivElement, EventSelectorProps>(
+  (
+    {
+      events,
+      groups,
+      categories,
+      selectedEvents: controlledSelected,
+      onSelectionChange,
+      defaultSelectedEvents = [],
+      title = "Events",
+      description = "Select which events should trigger this webhook",
+      emptyGroupMessage,
+      renderEmptyGroup,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Controlled vs uncontrolled state
+    const [internalSelected, setInternalSelected] = React.useState<string[]>(
+      defaultSelectedEvents
+    )
+
+    const isControlled = controlledSelected !== undefined
+    const selectedEvents = isControlled ? controlledSelected : internalSelected
+
+    const handleSelectionChange = React.useCallback(
+      (newSelection: string[]) => {
+        if (!isControlled) {
+          setInternalSelected(newSelection)
+        }
+        onSelectionChange?.(newSelection)
+      },
+      [isControlled, onSelectionChange]
+    )
+
+    // Get events for a specific group
+    const getEventsForGroup = (groupId: string) => {
+      return events.filter((event) => event.group === groupId)
+    }
+
+    // Get groups for a specific category
+    const getGroupsForCategory = (category: EventCategory): EventGroup[] => {
+      return category.groups
+        .map((groupId) => groups.find((g) => g.id === groupId))
+        .filter((g): g is EventGroup => g !== undefined)
+    }
+
+    // Calculate total selected count
+    const totalSelected = selectedEvents.length
+
+    // Render groups without categories
+    const renderGroups = (groupsToRender: EventGroup[]) => {
+      return groupsToRender.map((group) => (
+        <EventGroupComponent
+          key={group.id}
+          group={group}
+          events={getEventsForGroup(group.id)}
+          selectedEvents={selectedEvents}
+          onSelectionChange={handleSelectionChange}
+          emptyGroupMessage={emptyGroupMessage}
+          renderEmptyGroup={renderEmptyGroup}
+        />
+      ))
+    }
+
+    // Render categories with nested groups
+    const renderCategories = () => {
+      // Ensure categories is an array before using array methods
+      if (!categories || !Array.isArray(categories) || categories.length === 0) {
+        return renderGroups(groups)
+      }
+
+      // Get groups that belong to categories
+      const groupsInCategories = new Set(categories.flatMap((c) => c.groups))
+
+      // Get orphan groups (not in any category)
+      const orphanGroups = groups.filter((g) => !groupsInCategories.has(g.id))
+
+      return (
+        <>
+          {categories.map((category) => {
+            const categoryGroups = getGroupsForCategory(category)
+            const categoryEventIds = categoryGroups.flatMap((g) =>
+              getEventsForGroup(g.id).map((e) => e.id)
+            )
+            const selectedInCategory = categoryEventIds.filter((id) =>
+              selectedEvents.includes(id)
+            )
+
+            return (
+              <div
+                key={category.id}
+                className="border border-[#E5E7EB] rounded-lg overflow-hidden"
+              >
+                {/* Category Header - no checkbox, just label */}
+                <div className="flex items-center justify-between p-4 bg-white border-b border-[#E5E7EB]">
+                  <div className="flex items-center gap-3">
+                    {category.icon && (
+                      <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#F3F4F6]">
+                        {category.icon}
+                      </div>
+                    )}
+                    <span className="font-medium text-[#333333]">
+                      {category.name}
+                    </span>
+                  </div>
+                  {selectedInCategory.length > 0 && (
+                    <span className="text-sm text-[#6B7280]">
+                      {selectedInCategory.length} Selected
+                    </span>
+                  )}
+                </div>
+                {/* Category Groups */}
+                <div className="p-4 space-y-3 bg-[#F9FAFB]">
+                  {renderGroups(categoryGroups)}
+                </div>
+              </div>
+            )
+          })}
+          {/* Render orphan groups outside categories */}
+          {orphanGroups.length > 0 && (
+            <div className="space-y-3">{renderGroups(orphanGroups)}</div>
+          )}
+        </>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn("w-full", className)}
+        {...props}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h3 className="text-base font-semibold text-[#333333]">{title}</h3>
+            {description && (
+              <p className="text-sm text-[#6B7280] mt-1">{description}</p>
+            )}
+          </div>
+          <span className="text-sm font-medium text-[#333333]">
+            {totalSelected} Selected
+          </span>
+        </div>
+
+        {/* Groups */}
+        <div className="space-y-3">{renderCategories()}</div>
+      </div>
+    )
+  }
+)
+EventSelector.displayName = "EventSelector"
+`, prefix)
+        },
+        {
+          name: "event-group.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { cn } from "../../../lib/utils"
+import { Checkbox, type CheckedState } from "../checkbox"
+import {
+  Collapsible,
+  CollapsibleItem,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../collapsible"
+import { EventItemComponent } from "./event-item"
+import type { EventGroupComponentProps } from "./types"
+
+/**
+ * Event group with collapsible section and group-level checkbox
+ */
+export const EventGroupComponent = React.forwardRef<
+  HTMLDivElement,
+  EventGroupComponentProps & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      group,
+      events,
+      selectedEvents,
+      onSelectionChange,
+      emptyGroupMessage = "No events available",
+      renderEmptyGroup,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Calculate selection state for this group
+    const groupEventIds = events.map((e) => e.id)
+    const selectedInGroup = groupEventIds.filter((id) =>
+      selectedEvents.includes(id)
+    )
+    const allSelected = groupEventIds.length > 0 && selectedInGroup.length === groupEventIds.length
+    const someSelected = selectedInGroup.length > 0 && selectedInGroup.length < groupEventIds.length
+
+    const checkboxState: CheckedState = allSelected
+      ? true
+      : someSelected
+      ? "indeterminate"
+      : false
+
+    const selectedCount = selectedInGroup.length
+
+    // Handle group checkbox click
+    const handleGroupCheckbox = () => {
+      if (allSelected) {
+        // Deselect all events in this group
+        onSelectionChange(selectedEvents.filter((id) => !groupEventIds.includes(id)))
+      } else {
+        // Select all events in this group
+        const newSelection = [...selectedEvents]
+        groupEventIds.forEach((id) => {
+          if (!newSelection.includes(id)) {
+            newSelection.push(id)
+          }
+        })
+        onSelectionChange(newSelection)
+      }
+    }
+
+    // Handle individual event selection
+    const handleEventSelection = (eventId: string, selected: boolean) => {
+      if (selected) {
+        onSelectionChange([...selectedEvents, eventId])
+      } else {
+        onSelectionChange(selectedEvents.filter((id) => id !== eventId))
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn("bg-[#F9FAFB] rounded-lg", className)}
+        {...props}
+      >
+        <Collapsible type="multiple">
+          <CollapsibleItem value={group.id}>
+            <CollapsibleTrigger
+              showChevron={true}
+              className="w-full p-4 hover:bg-[#F3F4F6] rounded-lg"
+            >
+              <div className="flex items-center gap-3 flex-1">
+                <Checkbox
+                  checked={checkboxState}
+                  onCheckedChange={handleGroupCheckbox}
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={\`Select all \${group.name}\`}
+                />
+                <div className="flex flex-col items-start text-left flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    {group.icon && (
+                      <span className="text-[#6B7280]">{group.icon}</span>
+                    )}
+                    <span className="font-medium text-[#333333]">
+                      {group.name}
+                    </span>
+                  </div>
+                  <span className="text-sm text-[#6B7280] mt-0.5">
+                    {group.description}
+                  </span>
+                </div>
+                {selectedCount > 0 && (
+                  <span className="text-sm text-[#6B7280] whitespace-nowrap">
+                    {selectedCount} Selected
+                  </span>
+                )}
+              </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="border-t border-[#E5E7EB]">
+                {events.length > 0 ? (
+                  events.map((event) => (
+                    <EventItemComponent
+                      key={event.id}
+                      event={event}
+                      isSelected={selectedEvents.includes(event.id)}
+                      onSelectionChange={(selected) =>
+                        handleEventSelection(event.id, selected)
+                      }
+                    />
+                  ))
+                ) : renderEmptyGroup ? (
+                  <div className="py-4 px-8">
+                    {renderEmptyGroup(group)}
+                  </div>
+                ) : (
+                  <div className="py-4 px-8 text-sm text-[#6B7280] italic">
+                    {emptyGroupMessage}
+                  </div>
+                )}
+              </div>
+            </CollapsibleContent>
+          </CollapsibleItem>
+        </Collapsible>
+      </div>
+    )
+  }
+)
+EventGroupComponent.displayName = "EventGroupComponent"
+`, prefix)
+        },
+        {
+          name: "event-item.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { cn } from "../../../lib/utils"
+import { Checkbox } from "../checkbox"
+import type { EventItemComponentProps } from "./types"
+
+/**
+ * Individual event item with checkbox
+ */
+export const EventItemComponent = React.forwardRef<
+  HTMLDivElement,
+  EventItemComponentProps & React.HTMLAttributes<HTMLDivElement>
+>(({ event, isSelected, onSelectionChange, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-start gap-3 py-2 pl-8 pr-4",
+        className
+      )}
+      {...props}
+    >
+      <Checkbox
+        checked={isSelected}
+        onCheckedChange={(checked) => onSelectionChange(checked === true)}
+        aria-label={\`Select \${event.name}\`}
+      />
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-[#333333]">{event.name}</div>
+        <div className="text-sm text-[#6B7280] mt-0.5 leading-relaxed">
+          {event.description}
+        </div>
+      </div>
+    </div>
+  )
+})
+EventItemComponent.displayName = "EventItemComponent"
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react"
+
+/**
+ * Represents an individual event item
+ */
+export interface EventItem {
+  /** Unique identifier for the event */
+  id: string
+  /** Display name of the event (e.g., "Call.Initiated") */
+  name: string
+  /** Description of when this event is triggered */
+  description: string
+  /** Group ID this event belongs to */
+  group: string
+}
+
+/**
+ * Represents a group of events
+ */
+export interface EventGroup {
+  /** Unique identifier for the group */
+  id: string
+  /** Display name of the group (e.g., "In-Call Events") */
+  name: string
+  /** Description of the group */
+  description: string
+  /** Optional icon to display next to the group name */
+  icon?: React.ReactNode
+}
+
+/**
+ * Optional top-level category that can contain multiple groups
+ */
+export interface EventCategory {
+  /** Unique identifier for the category */
+  id: string
+  /** Display name of the category (e.g., "Call Events (Voice)") */
+  name: string
+  /** Optional icon to display next to the category name */
+  icon?: React.ReactNode
+  /** Array of group IDs that belong to this category */
+  groups: string[]
+}
+
+/**
+ * Props for the EventSelector component
+ */
+export interface EventSelectorProps {
+  // Data
+  /** Array of event items */
+  events: EventItem[]
+  /** Array of event groups */
+  groups: EventGroup[]
+  /** Optional array of categories for top-level grouping */
+  categories?: EventCategory[]
+
+  // State (controlled mode)
+  /** Array of selected event IDs (controlled) */
+  selectedEvents?: string[]
+  /** Callback when selection changes */
+  onSelectionChange?: (selectedIds: string[]) => void
+
+  // State (uncontrolled mode)
+  /** Default selected events for uncontrolled usage */
+  defaultSelectedEvents?: string[]
+
+  // Customization
+  /** Title displayed at the top (default: "Events") */
+  title?: string
+  /** Description displayed below the title */
+  description?: string
+  /** Message shown when a group has no events */
+  emptyGroupMessage?: string
+  /** Custom render function for empty group state (overrides emptyGroupMessage) */
+  renderEmptyGroup?: (group: EventGroup) => React.ReactNode
+
+  // Styling
+  /** Additional CSS classes for the root element */
+  className?: string
+}
+
+/**
+ * Internal props for EventGroup component
+ */
+export interface EventGroupComponentProps {
+  /** The group data */
+  group: EventGroup
+  /** Events that belong to this group */
+  events: EventItem[]
+  /** Currently selected event IDs */
+  selectedEvents: string[]
+  /** Callback to update selected events */
+  onSelectionChange: (selectedIds: string[]) => void
+  /** Message shown when group has no events */
+  emptyGroupMessage?: string
+  /** Custom render function for empty group state */
+  renderEmptyGroup?: (group: EventGroup) => React.ReactNode
+}
+
+/**
+ * Internal props for EventItem component
+ */
+export interface EventItemComponentProps {
+  /** The event data */
+  event: EventItem
+  /** Whether this event is selected */
+  isSelected: boolean
+  /** Callback when selection changes */
+  onSelectionChange: (selected: boolean) => void
+}
+`, prefix)
+        }
+      ]
+    },
+    "key-value-input": {
+      name: "key-value-input",
+      description: "A component for managing key-value pairs with validation and duplicate detection",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "button",
+        "input"
+      ],
+      isMultiFile: true,
+      directory: "key-value-input",
+      mainFile: "key-value-input.tsx",
+      files: [
+        {
+          name: "key-value-input.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { Plus } from "lucide-react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../button"
+import { KeyValueRow } from "./key-value-row"
+import type { KeyValueInputProps, KeyValuePair } from "./types"
+
+// Helper to generate unique IDs
+const generateId = () =>
+  \`kv-\${Date.now()}-\${Math.random().toString(36).substr(2, 9)}\`
+
+/**
+ * KeyValueInput - A component for managing key-value pairs
+ *
+ * Install via CLI:
+ * \`\`\`bash
+ * npx myoperator-ui add key-value-input
+ * \`\`\`
+ *
+ * Or import directly from npm:
+ * \`\`\`tsx
+ * import { KeyValueInput } from "@myoperator/ui"
+ * \`\`\`
+ *
+ * @example
+ * \`\`\`tsx
+ * <KeyValueInput
+ *   title="HTTP Headers"
+ *   description="Add custom headers for the webhook request"
+ *   value={headers}
+ *   onChange={setHeaders}
+ * />
+ * \`\`\`
+ */
+export const KeyValueInput = React.forwardRef<
+  HTMLDivElement,
+  KeyValueInputProps
+>(
+  (
+    {
+      title,
+      description,
+      addButtonText = "Add Header",
+      maxItems = 10,
+      keyPlaceholder = "Key",
+      valuePlaceholder = "Value",
+      keyLabel = "Key",
+      valueLabel = "Value",
+      value: controlledValue,
+      onChange,
+      defaultValue = [],
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Controlled vs uncontrolled state
+    const [internalPairs, setInternalPairs] =
+      React.useState<KeyValuePair[]>(defaultValue)
+
+    const isControlled = controlledValue !== undefined
+    const pairs = isControlled ? controlledValue : internalPairs
+
+    // Track which keys have been touched for validation
+    const [touchedKeys, setTouchedKeys] = React.useState<Set<string>>(new Set())
+
+    const handlePairsChange = React.useCallback(
+      (newPairs: KeyValuePair[]) => {
+        if (!isControlled) {
+          setInternalPairs(newPairs)
+        }
+        onChange?.(newPairs)
+      },
+      [isControlled, onChange]
+    )
+
+    // Check for duplicate keys (case-insensitive)
+    const getDuplicateKeys = React.useCallback((): Set<string> => {
+      const keyCount = new Map<string, number>()
+      pairs.forEach((pair) => {
+        if (pair.key.trim()) {
+          const key = pair.key.toLowerCase()
+          keyCount.set(key, (keyCount.get(key) || 0) + 1)
+        }
+      })
+      const duplicates = new Set<string>()
+      keyCount.forEach((count, key) => {
+        if (count > 1) duplicates.add(key)
+      })
+      return duplicates
+    }, [pairs])
+
+    const duplicateKeys = getDuplicateKeys()
+
+    // Add new row
+    const handleAdd = () => {
+      if (pairs.length >= maxItems) return
+      const newPair: KeyValuePair = {
+        id: generateId(),
+        key: "",
+        value: "",
+      }
+      handlePairsChange([...pairs, newPair])
+    }
+
+    // Update key
+    const handleKeyChange = (id: string, key: string) => {
+      handlePairsChange(
+        pairs.map((pair) => (pair.id === id ? { ...pair, key } : pair))
+      )
+      setTouchedKeys((prev) => new Set(prev).add(id))
+    }
+
+    // Update value
+    const handleValueChange = (id: string, value: string) => {
+      handlePairsChange(
+        pairs.map((pair) => (pair.id === id ? { ...pair, value } : pair))
+      )
+    }
+
+    // Delete row
+    const handleDelete = (id: string) => {
+      handlePairsChange(pairs.filter((pair) => pair.id !== id))
+      setTouchedKeys((prev) => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+    }
+
+    const isAtLimit = pairs.length >= maxItems
+    const addButtonTitle = isAtLimit
+      ? \`Maximum of \${maxItems} items allowed\`
+      : undefined
+
+    return (
+      <div ref={ref} className={cn("w-full", className)} {...props}>
+        {/* Header */}
+        <div className="mb-3">
+          <h3 className="text-base font-semibold text-[#333333]">{title}</h3>
+          {description && (
+            <p className="text-sm text-[#6B7280] mt-1">{description}</p>
+          )}
+        </div>
+
+        {/* Content Container with Background - only show when there are items */}
+        {pairs.length > 0 && (
+          <div className="bg-[#F9FAFB] rounded-lg p-4 mb-4">
+            {/* Column Headers */}
+            <div className="flex items-center gap-3 mb-3">
+              <div className="flex-1">
+                <span className="text-sm font-medium text-[#333333]">
+                  {keyLabel}
+                  <span className="text-[#FF3B3B] ml-0.5">*</span>
+                </span>
+              </div>
+              <div className="flex-1">
+                <span className="text-sm font-medium text-[#333333]">
+                  {valueLabel}
+                </span>
+              </div>
+              {/* Spacer for delete button column */}
+              <div className="w-8 flex-shrink-0" />
+            </div>
+
+            {/* Rows */}
+            <div className="space-y-3">
+              {pairs.map((pair) => (
+                <KeyValueRow
+                  key={pair.id}
+                  pair={pair}
+                  isDuplicateKey={duplicateKeys.has(pair.key.toLowerCase())}
+                  isKeyEmpty={touchedKeys.has(pair.id) && !pair.key.trim()}
+                  keyPlaceholder={keyPlaceholder}
+                  valuePlaceholder={valuePlaceholder}
+                  onKeyChange={handleKeyChange}
+                  onValueChange={handleValueChange}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Button using dashed variant - outside the gray container */}
+        <Button
+          type="button"
+          variant="dashed"
+          onClick={handleAdd}
+          disabled={isAtLimit}
+          title={addButtonTitle}
+          className="w-full justify-center"
+        >
+          <Plus className="h-4 w-4" />
+          {addButtonText}
+        </Button>
+
+        {/* Limit indicator */}
+        {isAtLimit && (
+          <p className="text-xs text-[#6B7280] mt-2 text-center">
+            Maximum of {maxItems} items reached
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+KeyValueInput.displayName = "KeyValueInput"
+`, prefix)
+        },
+        {
+          name: "key-value-row.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { Trash2 } from "lucide-react"
+import { cn } from "../../../lib/utils"
+import { Input } from "../input"
+import { Button } from "../button"
+import type { KeyValueRowProps } from "./types"
+
+/**
+ * Individual key-value pair row with inputs and delete button
+ */
+export const KeyValueRow = React.forwardRef<
+  HTMLDivElement,
+  KeyValueRowProps & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      pair,
+      isDuplicateKey,
+      isKeyEmpty,
+      keyPlaceholder = "Key",
+      valuePlaceholder = "Value",
+      onKeyChange,
+      onValueChange,
+      onDelete,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Determine if key input should show error state
+    const keyHasError = isDuplicateKey || isKeyEmpty
+
+    // Determine error message
+    const errorMessage = isDuplicateKey
+      ? "Duplicate key"
+      : isKeyEmpty
+      ? "Key is required"
+      : null
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-start gap-3", className)}
+        {...props}
+      >
+        {/* Key Input */}
+        <div className="flex-1">
+          <Input
+            value={pair.key}
+            onChange={(e) => onKeyChange(pair.id, e.target.value)}
+            placeholder={keyPlaceholder}
+            state={keyHasError ? "error" : "default"}
+            aria-label="Key"
+          />
+          {errorMessage && (
+            <span className="text-xs text-[#FF3B3B] mt-1 block">
+              {errorMessage}
+            </span>
+          )}
+        </div>
+
+        {/* Value Input */}
+        <div className="flex-1">
+          <Input
+            value={pair.value}
+            onChange={(e) => onValueChange(pair.id, e.target.value)}
+            placeholder={valuePlaceholder}
+            aria-label="Value"
+          />
+        </div>
+
+        {/* Delete Button */}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onDelete(pair.id)}
+          className="text-gray-400 hover:text-[#EF4444] hover:bg-[#FEF2F2] flex-shrink-0"
+          aria-label="Delete row"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  }
+)
+KeyValueRow.displayName = "KeyValueRow"
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`import * as React from "react"
+
+/**
+ * Represents a single key-value pair
+ */
+export interface KeyValuePair {
+  /** Unique identifier for the pair */
+  id: string
+  /** The key (e.g., header name) */
+  key: string
+  /** The value (e.g., header value) */
+  value: string
+}
+
+/**
+ * Props for the KeyValueInput component
+ */
+export interface KeyValueInputProps {
+  // Customization
+  /** Title displayed at the top (e.g., "HTTP Headers") */
+  title: string
+  /** Description displayed below the title */
+  description?: string
+  /** Text for the add button (default: "Add Header") */
+  addButtonText?: string
+  /** Maximum number of items allowed (default: 10) */
+  maxItems?: number
+  /** Placeholder for key input */
+  keyPlaceholder?: string
+  /** Placeholder for value input */
+  valuePlaceholder?: string
+  /** Label for key column header (default: "Key") */
+  keyLabel?: string
+  /** Label for value column header (default: "Value") */
+  valueLabel?: string
+
+  // State (controlled mode)
+  /** Array of key-value pairs (controlled) */
+  value?: KeyValuePair[]
+  /** Callback when pairs change */
+  onChange?: (pairs: KeyValuePair[]) => void
+
+  // State (uncontrolled mode)
+  /** Default key-value pairs for uncontrolled usage */
+  defaultValue?: KeyValuePair[]
+
+  // Styling
+  /** Additional CSS classes for the root element */
+  className?: string
+}
+
+/**
+ * Internal props for KeyValueRow component
+ */
+export interface KeyValueRowProps {
+  /** The key-value pair data */
+  pair: KeyValuePair
+  /** Whether the key is a duplicate */
+  isDuplicateKey: boolean
+  /** Whether key is empty (for validation) */
+  isKeyEmpty: boolean
+  /** Placeholder for key input */
+  keyPlaceholder?: string
+  /** Placeholder for value input */
+  valuePlaceholder?: string
+  /** Callback when key changes */
+  onKeyChange: (id: string, key: string) => void
+  /** Callback when value changes */
+  onValueChange: (id: string, value: string) => void
+  /** Callback when row is deleted */
+  onDelete: (id: string) => void
+}
 `, prefix)
         }
       ]
@@ -3152,10 +4064,26 @@ async function add(components, options) {
   try {
     const installed = [];
     const dependencies = /* @__PURE__ */ new Set();
-    for (const componentName of components) {
+    const installedComponents = /* @__PURE__ */ new Set();
+    const installComponent = async (componentName) => {
+      if (installedComponents.has(componentName)) {
+        return;
+      }
       const component = registry[componentName];
+      if (!component) {
+        spinner.warn(`Component ${componentName} not found in registry`);
+        return;
+      }
+      if (component.internalDependencies && component.internalDependencies.length > 0) {
+        spinner.text = `Installing dependencies for ${componentName}...`;
+        for (const depName of component.internalDependencies) {
+          await installComponent(depName);
+        }
+      }
+      spinner.text = `Installing ${componentName}...`;
+      const targetDir = component.isMultiFile ? path2.join(componentsDir, component.directory) : componentsDir;
       for (const file of component.files) {
-        const filePath = path2.join(componentsDir, file.name);
+        const filePath = path2.join(targetDir, file.name);
         if (await fs2.pathExists(filePath)) {
           if (!options.overwrite) {
             spinner.warn(`${file.name} already exists. Use --overwrite to replace.`);
@@ -3164,11 +4092,16 @@ async function add(components, options) {
         }
         await fs2.ensureDir(path2.dirname(filePath));
         await fs2.writeFile(filePath, file.content);
-        installed.push(file.name);
+        const relativePath = component.isMultiFile ? `${component.directory}/${file.name}` : file.name;
+        installed.push(relativePath);
       }
       if (component.dependencies) {
         component.dependencies.forEach((dep) => dependencies.add(dep));
       }
+      installedComponents.add(componentName);
+    };
+    for (const componentName of components) {
+      await installComponent(componentName);
     }
     spinner.succeed("Components installed successfully!");
     if (installed.length > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",