myoperator-ui 0.0.69 → 0.0.71

package/dist/index.js

@@ -200,91 +200,6 @@ function prefixTailwindClasses(content, prefix) {
 }
 async function getRegistry(prefix = "") {
   return {
-    "badge": {
-      name: "badge",
-      description: "A status badge component with active, failed, and disabled variants",
-      dependencies: [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ],
-      files: [
-        {
-          name: "badge.tsx",
-          content: prefixTailwindClasses(`import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-/**
- * Badge variants for status indicators.
- * Pill-shaped badges with different colors for different states.
- */
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full text-sm font-medium transition-colors whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        active: "bg-[#E5FFF5] text-[#00A651]",
-        failed: "bg-[#FFECEC] text-[#FF3B3B]",
-        disabled: "bg-[#F3F5F6] text-[#6B7280]",
-        default: "bg-[#F3F5F6] text-[#333333]",
-      },
-      size: {
-        default: "px-3 py-1",
-        sm: "px-2 py-0.5 text-xs",
-        lg: "px-4 py-1.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-/**
- * Badge component for displaying status indicators.
- *
- * @example
- * \`\`\`tsx
- * <Badge variant="active">Active</Badge>
- * <Badge variant="failed">Failed</Badge>
- * <Badge variant="disabled">Disabled</Badge>
- * <Badge variant="active" leftIcon={<CheckIcon />}>Active</Badge>
- * \`\`\`
- */
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {
-  /** Icon displayed on the left side of the badge text */
-  leftIcon?: React.ReactNode
-  /** Icon displayed on the right side of the badge text */
-  rightIcon?: React.ReactNode
-}
-
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, variant, size, leftIcon, rightIcon, children, ...props }, ref) => {
-    return (
-      <div
-        className={cn(badgeVariants({ variant, size, className }), "gap-1")}
-        ref={ref}
-        {...props}
-      >
-        {leftIcon && <span className="[&_svg]:size-3">{leftIcon}</span>}
-        {children}
-        {rightIcon && <span className="[&_svg]:size-3">{rightIcon}</span>}
-      </div>
-    )
-  }
-)
-Badge.displayName = "Badge"
-
-export { Badge, badgeVariants }
-`, prefix)
-        }
-      ]
-    },
     "button": {
       name: "button",
       description: "A customizable button component with variants, sizes, and icons",
@@ -408,202 +323,163 @@ export { Button, buttonVariants }
         }
       ]
     },
-    "checkbox": {
-      name: "checkbox",
-      description: "A tri-state checkbox component with label support (checked, unchecked, indeterminate)",
+    "badge": {
+      name: "badge",
+      description: "A status badge component with active, failed, and disabled variants",
       dependencies: [
         "class-variance-authority",
         "clsx",
-        "tailwind-merge",
-        "lucide-react"
+        "tailwind-merge"
       ],
       files: [
         {
-          name: "checkbox.tsx",
+          name: "badge.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { Check, Minus } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * Checkbox box variants (the outer container)
+ * Badge variants for status indicators.
+ * Pill-shaped badges with different colors for different states.
  */
-const checkboxVariants = cva(
-  "inline-flex items-center justify-center rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full text-sm font-medium transition-colors whitespace-nowrap",
   {
     variants: {
+      variant: {
+        active: "bg-[#E5FFF5] text-[#00A651]",
+        failed: "bg-[#FFECEC] text-[#FF3B3B]",
+        disabled: "bg-[#F3F5F6] text-[#6B7280]",
+        default: "bg-[#F3F5F6] text-[#333333]",
+      },
       size: {
-        default: "h-5 w-5",
-        sm: "h-4 w-4",
-        lg: "h-6 w-6",
+        default: "px-3 py-1",
+        sm: "px-2 py-0.5 text-xs",
+        lg: "px-4 py-1.5",
       },
     },
     defaultVariants: {
+      variant: "default",
       size: "default",
     },
   }
 )
 
 /**
- * Icon size variants based on checkbox size
+ * Badge component for displaying status indicators.
+ *
+ * @example
+ * \`\`\`tsx
+ * <Badge variant="active">Active</Badge>
+ * <Badge variant="failed">Failed</Badge>
+ * <Badge variant="disabled">Disabled</Badge>
+ * <Badge variant="active" leftIcon={<CheckIcon />}>Active</Badge>
+ * \`\`\`
  */
-const iconSizeVariants = cva("", {
-  variants: {
-    size: {
-      default: "h-3.5 w-3.5",
-      sm: "h-3 w-3",
-      lg: "h-4 w-4",
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  /** Icon displayed on the left side of the badge text */
+  leftIcon?: React.ReactNode
+  /** Icon displayed on the right side of the badge text */
+  rightIcon?: React.ReactNode
+}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, size, leftIcon, rightIcon, children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(badgeVariants({ variant, size, className }), "gap-1")}
+        ref={ref}
+        {...props}
+      >
+        {leftIcon && <span className="[&_svg]:size-3">{leftIcon}</span>}
+        {children}
+        {rightIcon && <span className="[&_svg]:size-3">{rightIcon}</span>}
+      </div>
+    )
+  }
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }
+`, prefix)
+        }
+      ]
     },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
+    "input": {
+      name: "input",
+      description: "A text input component with error and disabled states",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "input.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
 
 /**
- * Label text size variants
+ * Input variants for different visual states
  */
-const labelSizeVariants = cva("", {
-  variants: {
-    size: {
-      default: "text-sm",
-      sm: "text-xs",
-      lg: "text-base",
+const inputVariants = cva(
+  "h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#333333] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#333333] placeholder:text-[#9CA3AF] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB]",
+  {
+    variants: {
+      state: {
+        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
+        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
+      },
     },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
-
-export type CheckedState = boolean | "indeterminate"
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
 
 /**
- * A tri-state checkbox component with label support
+ * A flexible input component for text entry with state variants.
  *
  * @example
  * \`\`\`tsx
- * <Checkbox checked={isEnabled} onCheckedChange={setIsEnabled} />
- * <Checkbox size="sm" disabled />
- * <Checkbox checked="indeterminate" label="Select all" />
- * <Checkbox label="Accept terms" labelPosition="right" />
+ * <Input placeholder="Enter your email" />
+ * <Input state="error" placeholder="Invalid input" />
+ * <Input state="success" placeholder="Valid input" />
  * \`\`\`
  */
-export interface CheckboxProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">,
-    VariantProps<typeof checkboxVariants> {
-  /** Whether the checkbox is checked, unchecked, or indeterminate */
-  checked?: CheckedState
-  /** Default checked state for uncontrolled usage */
-  defaultChecked?: boolean
-  /** Callback when checked state changes */
-  onCheckedChange?: (checked: CheckedState) => void
-  /** Optional label text */
-  label?: string
-  /** Position of the label */
-  labelPosition?: "left" | "right"
-}
-
-const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-  (
-    {
-      className,
-      size,
-      checked: controlledChecked,
-      defaultChecked = false,
-      onCheckedChange,
-      disabled,
-      label,
-      labelPosition = "right",
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked)
+export interface InputProps
+  extends Omit<React.ComponentProps<"input">, "size">,
+    VariantProps<typeof inputVariants> {}
 
-    const isControlled = controlledChecked !== undefined
-    const checkedState = isControlled ? controlledChecked : internalChecked
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (disabled) return
-
-      // Cycle through states: unchecked -> checked -> unchecked
-      // (indeterminate is typically set programmatically, not through user clicks)
-      const newValue = checkedState === true ? false : true
-
-      if (!isControlled) {
-        setInternalChecked(newValue)
-      }
-
-      onCheckedChange?.(newValue)
-
-      // Call external onClick if provided
-      onClick?.(e)
-    }
-
-    const isChecked = checkedState === true
-    const isIndeterminate = checkedState === "indeterminate"
-
-    const checkbox = (
-      <button
-        type="button"
-        role="checkbox"
-        aria-checked={isIndeterminate ? "mixed" : isChecked}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, state, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ state, className }))}
         ref={ref}
-        disabled={disabled}
-        onClick={handleClick}
-        className={cn(
-          checkboxVariants({ size, className }),
-          "cursor-pointer",
-          isChecked || isIndeterminate
-            ? "bg-[#343E55] border-[#343E55] text-white"
-            : "bg-white border-[#E5E7EB] hover:border-[#9CA3AF]"
-        )}
         {...props}
-      >
-        {isChecked && (
-          <Check className={cn(iconSizeVariants({ size }), "stroke-[3]")} />
-        )}
-        {isIndeterminate && (
-          <Minus className={cn(iconSizeVariants({ size }), "stroke-[3]")} />
-        )}
-      </button>
+      />
     )
-
-    if (label) {
-      return (
-        <label className="inline-flex items-center gap-2 cursor-pointer">
-          {labelPosition === "left" && (
-            <span className={cn(labelSizeVariants({ size }), "text-[#333333]", disabled && "opacity-50")}>
-              {label}
-            </span>
-          )}
-          {checkbox}
-          {labelPosition === "right" && (
-            <span className={cn(labelSizeVariants({ size }), "text-[#333333]", disabled && "opacity-50")}>
-              {label}
-            </span>
-          )}
-        </label>
-      )
-    }
-
-    return checkbox
   }
 )
-Checkbox.displayName = "Checkbox"
+Input.displayName = "Input"
 
-export { Checkbox, checkboxVariants }
+export { Input, inputVariants }
 `, prefix)
         }
       ]
     },
-    "collapsible": {
-      name: "collapsible",
-      description: "An expandable/collapsible section component with single or multiple mode support",
+    "select": {
+      name: "select",
+      description: "A select dropdown component built on Radix UI Select",
       dependencies: [
+        "@radix-ui/react-select",
         "class-variance-authority",
         "clsx",
         "tailwind-merge",
@@ -611,572 +487,683 @@ export { Checkbox, checkboxVariants }
       ],
       files: [
         {
-          name: "collapsible.tsx",
+          name: "select.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
 import { cva, type VariantProps } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * Collapsible root variants
- */
-const collapsibleVariants = cva("w-full", {
-  variants: {
-    variant: {
-      default: "",
-      bordered: "border border-[#E5E7EB] rounded-lg divide-y divide-[#E5E7EB]",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})
-
-/**
- * Collapsible item variants
- */
-const collapsibleItemVariants = cva("", {
-  variants: {
-    variant: {
-      default: "",
-      bordered: "",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})
-
-/**
- * Collapsible trigger variants
- */
-const collapsibleTriggerVariants = cva(
-  "flex w-full items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "py-3",
-        bordered: "p-4 hover:bg-[#F9FAFB]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-/**
- * Collapsible content variants
+ * SelectTrigger variants matching TextField styling
  */
-const collapsibleContentVariants = cva(
-  "overflow-hidden transition-all duration-300 ease-in-out",
+const selectTriggerVariants = cva(
+  "flex h-10 w-full items-center justify-between rounded bg-white px-4 py-2.5 text-sm text-[#333333] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB] [&>span]:line-clamp-1",
   {
     variants: {
-      variant: {
-        default: "",
-        bordered: "px-4",
+      state: {
+        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
+        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
       },
     },
     defaultVariants: {
-      variant: "default",
+      state: "default",
     },
   }
 )
 
-// Types
-type CollapsibleType = "single" | "multiple"
+const Select = SelectPrimitive.Root
 
-interface CollapsibleContextValue {
-  type: CollapsibleType
-  value: string[]
-  onValueChange: (value: string[]) => void
-  variant: "default" | "bordered"
-}
+const SelectGroup = SelectPrimitive.Group
 
-interface CollapsibleItemContextValue {
-  value: string
-  isOpen: boolean
-  disabled?: boolean
-}
+const SelectValue = SelectPrimitive.Value
 
-// Contexts
-const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
-const CollapsibleItemContext = React.createContext<CollapsibleItemContextValue | null>(null)
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectTriggerVariants> {}
 
-function useCollapsibleContext() {
-  const context = React.useContext(CollapsibleContext)
-  if (!context) {
-    throw new Error("Collapsible components must be used within a Collapsible")
-  }
-  return context
-}
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, state, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(selectTriggerVariants({ state, className }))}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="size-4 text-[#6B7280] opacity-70" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-function useCollapsibleItemContext() {
-  const context = React.useContext(CollapsibleItemContext)
-  if (!context) {
-    throw new Error("CollapsibleTrigger/CollapsibleContent must be used within a CollapsibleItem")
-  }
-  return context
-}
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="size-4 text-[#6B7280]" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-/**
- * Root collapsible component that manages state
- */
-export interface CollapsibleProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof collapsibleVariants> {
-  /** Whether only one item can be open at a time ('single') or multiple ('multiple') */
-  type?: CollapsibleType
-  /** Controlled value - array of open item values */
-  value?: string[]
-  /** Default open items for uncontrolled usage */
-  defaultValue?: string[]
-  /** Callback when open items change */
-  onValueChange?: (value: string[]) => void
-}
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="size-4 text-[#6B7280]" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
 
-const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
-  (
-    {
-      className,
-      variant = "default",
-      type = "multiple",
-      value: controlledValue,
-      defaultValue = [],
-      onValueChange,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-white border border-[#E9E9E9] 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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
 
-    const isControlled = controlledValue !== undefined
-    const currentValue = isControlled ? controlledValue : internalValue
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-4 py-1.5 text-xs font-medium text-[#6B7280]", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-    const handleValueChange = React.useCallback(
-      (newValue: string[]) => {
-        if (!isControlled) {
-          setInternalValue(newValue)
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#333333] outline-none",
+      "hover:bg-[#F3F4F6] focus:bg-[#F3F4F6]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-4 text-[#2BBBC9]" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-[#E9E9E9]", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  selectTriggerVariants,
+}
+`, prefix)
         }
-        onValueChange?.(newValue)
-      },
-      [isControlled, onValueChange]
-    )
+      ]
+    },
+    "checkbox": {
+      name: "checkbox",
+      description: "A tri-state checkbox component with label support (checked, unchecked, indeterminate)",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "checkbox.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Check, Minus } from "lucide-react"
 
-    const contextValue = React.useMemo(
-      () => ({
-        type,
-        value: currentValue,
-        onValueChange: handleValueChange,
-        variant: variant || "default",
-      }),
-      [type, currentValue, handleValueChange, variant]
-    )
+import { cn } from "../../lib/utils"
 
-    return (
-      <CollapsibleContext.Provider value={contextValue}>
-        <div
-          ref={ref}
-          className={cn(collapsibleVariants({ variant, className }))}
-          {...props}
-        >
-          {children}
-        </div>
-      </CollapsibleContext.Provider>
-    )
+/**
+ * Checkbox box variants (the outer container)
+ */
+const checkboxVariants = cva(
+  "inline-flex items-center justify-center rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "h-5 w-5",
+        sm: "h-4 w-4",
+        lg: "h-6 w-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
   }
 )
-Collapsible.displayName = "Collapsible"
 
 /**
- * Individual collapsible item
+ * Icon size variants based on checkbox size
  */
-export interface CollapsibleItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof collapsibleItemVariants> {
-  /** Unique value for this item */
-  value: string
-  /** Whether this item is disabled */
-  disabled?: boolean
-}
-
-const CollapsibleItem = React.forwardRef<HTMLDivElement, CollapsibleItemProps>(
-  ({ className, value, disabled, children, ...props }, ref) => {
-    const { value: openValues, variant } = useCollapsibleContext()
-    const isOpen = openValues.includes(value)
+const iconSizeVariants = cva("", {
+  variants: {
+    size: {
+      default: "h-3.5 w-3.5",
+      sm: "h-3 w-3",
+      lg: "h-4 w-4",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
 
-    const contextValue = React.useMemo(
-      () => ({
-        value,
-        isOpen,
-        disabled,
-      }),
-      [value, isOpen, disabled]
-    )
+/**
+ * Label text size variants
+ */
+const labelSizeVariants = cva("", {
+  variants: {
+    size: {
+      default: "text-sm",
+      sm: "text-xs",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
 
-    return (
-      <CollapsibleItemContext.Provider value={contextValue}>
-        <div
-          ref={ref}
-          data-state={isOpen ? "open" : "closed"}
-          className={cn(collapsibleItemVariants({ variant, className }))}
-          {...props}
-        >
-          {children}
-        </div>
-      </CollapsibleItemContext.Provider>
-    )
-  }
-)
-CollapsibleItem.displayName = "CollapsibleItem"
+export type CheckedState = boolean | "indeterminate"
 
 /**
- * Trigger button that toggles the collapsible item
+ * A tri-state checkbox component with label support
+ *
+ * @example
+ * \`\`\`tsx
+ * <Checkbox checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * <Checkbox size="sm" disabled />
+ * <Checkbox checked="indeterminate" label="Select all" />
+ * <Checkbox label="Accept terms" labelPosition="right" />
+ * <Checkbox id="terms" label="Accept terms" separateLabel />
+ * \`\`\`
  */
-export interface CollapsibleTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof collapsibleTriggerVariants> {
-  /** Whether to show the chevron icon */
-  showChevron?: boolean
+export interface CheckboxProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">,
+    VariantProps<typeof checkboxVariants> {
+  /** Whether the checkbox is checked, unchecked, or indeterminate */
+  checked?: CheckedState
+  /** Default checked state for uncontrolled usage */
+  defaultChecked?: boolean
+  /** Callback when checked state changes */
+  onCheckedChange?: (checked: CheckedState) => void
+  /** Optional label text */
+  label?: string
+  /** Position of the label */
+  labelPosition?: "left" | "right"
+  /** The label of the checkbox for accessibility */
+  ariaLabel?: string
+  /** The ID of an element describing the checkbox */
+  ariaLabelledBy?: string
+  /** If true, the checkbox automatically receives focus */
+  autoFocus?: boolean
+  /** Class name applied to the checkbox element */
+  checkboxClassName?: string
+  /** Class name applied to the label element */
+  labelClassName?: string
+  /** The name of the checkbox, used for form submission */
+  name?: string
+  /** The value submitted with the form when checked */
+  value?: string
+  /** If true, uses separate labels with htmlFor/id association instead of wrapping the input. Requires id prop. */
+  separateLabel?: boolean
 }
 
-const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
-  ({ className, showChevron = true, children, ...props }, ref) => {
-    const { type, value: openValues, onValueChange, variant } = useCollapsibleContext()
-    const { value, isOpen, disabled } = useCollapsibleItemContext()
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (
+    {
+      className,
+      size,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      label,
+      labelPosition = "right",
+      ariaLabel,
+      ariaLabelledBy,
+      autoFocus,
+      checkboxClassName,
+      labelClassName,
+      name,
+      value,
+      separateLabel = false,
+      id,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked)
+    const checkboxRef = React.useRef<HTMLButtonElement>(null)
 
-    const handleClick = () => {
+    // Merge refs
+    React.useImperativeHandle(ref, () => checkboxRef.current!)
+
+    // Handle autoFocus
+    React.useEffect(() => {
+      if (autoFocus && checkboxRef.current) {
+        checkboxRef.current.focus()
+      }
+    }, [autoFocus])
+
+    const isControlled = controlledChecked !== undefined
+    const checkedState = isControlled ? controlledChecked : internalChecked
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
 
-      let newValue: string[]
+      // Cycle through states: unchecked -> checked -> unchecked
+      // (indeterminate is typically set programmatically, not through user clicks)
+      const newValue = checkedState === true ? false : true
 
-      if (type === "single") {
-        // In single mode, toggle current item (close if open, open if closed)
-        newValue = isOpen ? [] : [value]
-      } else {
-        // In multiple mode, toggle the item in the array
-        newValue = isOpen
-          ? openValues.filter((v) => v !== value)
-          : [...openValues, value]
+      if (!isControlled) {
+        setInternalChecked(newValue)
       }
 
-      onValueChange(newValue)
+      onCheckedChange?.(newValue)
+
+      // Call external onClick if provided
+      onClick?.(e)
     }
 
-    return (
+    const isChecked = checkedState === true
+    const isIndeterminate = checkedState === "indeterminate"
+
+    const checkbox = (
       <button
-        ref={ref}
         type="button"
-        aria-expanded={isOpen}
+        role="checkbox"
+        aria-checked={isIndeterminate ? "mixed" : isChecked}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        ref={checkboxRef}
+        id={id}
         disabled={disabled}
         onClick={handleClick}
-        className={cn(collapsibleTriggerVariants({ variant, className }))}
+        data-name={name}
+        data-value={value}
+        className={cn(
+          checkboxVariants({ size }),
+          "cursor-pointer",
+          isChecked || isIndeterminate
+            ? "bg-[#343E55] border-[#343E55] text-white"
+            : "bg-white border-[#E5E7EB] hover:border-[#9CA3AF]",
+          className,
+          checkboxClassName
+        )}
         {...props}
       >
-        <span className="flex-1">{children}</span>
-        {showChevron && (
-          <ChevronDown
-            className={cn(
-              "h-4 w-4 shrink-0 text-[#6B7280] transition-transform duration-300",
-              isOpen && "rotate-180"
-            )}
-          />
+        {isChecked && (
+          <Check className={cn(iconSizeVariants({ size }), "stroke-[3]")} />
+        )}
+        {isIndeterminate && (
+          <Minus className={cn(iconSizeVariants({ size }), "stroke-[3]")} />
         )}
       </button>
     )
-  }
-)
-CollapsibleTrigger.displayName = "CollapsibleTrigger"
 
-/**
- * Content that is shown/hidden when the item is toggled
- */
-export interface CollapsibleContentProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof collapsibleContentVariants> {}
-
-const CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(
-  ({ className, children, ...props }, ref) => {
-    const { variant } = useCollapsibleContext()
-    const { isOpen } = useCollapsibleItemContext()
-    const contentRef = React.useRef<HTMLDivElement>(null)
-    const [height, setHeight] = React.useState<number | undefined>(undefined)
-
-    React.useEffect(() => {
-      if (contentRef.current) {
-        const contentHeight = contentRef.current.scrollHeight
-        setHeight(isOpen ? contentHeight : 0)
+    if (label) {
+      // separateLabel mode: use htmlFor/id association instead of wrapping
+      if (separateLabel && id) {
+        return (
+          <div className="inline-flex items-center gap-2">
+            {labelPosition === "left" && (
+              <label
+                htmlFor={id}
+                className={cn(
+                  labelSizeVariants({ size }),
+                  "text-[#333333] cursor-pointer",
+                  disabled && "opacity-50 cursor-not-allowed",
+                  labelClassName
+                )}
+              >
+                {label}
+              </label>
+            )}
+            {checkbox}
+            {labelPosition === "right" && (
+              <label
+                htmlFor={id}
+                className={cn(
+                  labelSizeVariants({ size }),
+                  "text-[#333333] cursor-pointer",
+                  disabled && "opacity-50 cursor-not-allowed",
+                  labelClassName
+                )}
+              >
+                {label}
+              </label>
+            )}
+          </div>
+        )
       }
-    }, [isOpen, children])
 
-    return (
-      <div
-        ref={ref}
-        className={cn(collapsibleContentVariants({ variant, className }))}
-        style={{ height: height !== undefined ? \`\${height}px\` : undefined }}
-        aria-hidden={!isOpen}
-        {...props}
-      >
-        <div ref={contentRef} className="pb-4">
-          {children}
-        </div>
-      </div>
-    )
+      // Default: wrapping label
+      return (
+        <label className={cn("inline-flex items-center gap-2 cursor-pointer", disabled && "cursor-not-allowed")}>
+          {labelPosition === "left" && (
+            <span className={cn(labelSizeVariants({ size }), "text-[#333333]", disabled && "opacity-50", labelClassName)}>
+              {label}
+            </span>
+          )}
+          {checkbox}
+          {labelPosition === "right" && (
+            <span className={cn(labelSizeVariants({ size }), "text-[#333333]", disabled && "opacity-50", labelClassName)}>
+              {label}
+            </span>
+          )}
+        </label>
+      )
+    }
+
+    return checkbox
   }
 )
-CollapsibleContent.displayName = "CollapsibleContent"
+Checkbox.displayName = "Checkbox"
 
-export {
-  Collapsible,
-  CollapsibleItem,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  collapsibleVariants,
-  collapsibleItemVariants,
-  collapsibleTriggerVariants,
-  collapsibleContentVariants,
-}
+export { Checkbox, checkboxVariants }
 `, prefix)
         }
       ]
     },
-    "dropdown-menu": {
-      name: "dropdown-menu",
-      description: "A dropdown menu component for displaying actions and options",
+    "toggle": {
+      name: "toggle",
+      description: "A toggle/switch component for boolean inputs with on/off states",
       dependencies: [
-        "@radix-ui/react-dropdown-menu",
+        "class-variance-authority",
         "clsx",
-        "tailwind-merge",
-        "lucide-react"
+        "tailwind-merge"
       ],
       files: [
         {
-          name: "dropdown-menu.tsx",
+          name: "toggle.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+/**
+ * Toggle track variants (the outer container)
+ */
+const toggleVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "h-6 w-11",
+        sm: "h-5 w-9",
+        lg: "h-7 w-14",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+/**
+ * Toggle thumb variants (the sliding circle)
+ */
+const toggleThumbVariants = cva(
+  "pointer-events-none inline-block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ease-in-out",
+  {
+    variants: {
+      size: {
+        default: "h-5 w-5",
+        sm: "h-4 w-4",
+        lg: "h-6 w-6",
+      },
+      checked: {
+        true: "",
+        false: "translate-x-0",
+      },
+    },
+    compoundVariants: [
+      { size: "default", checked: true, className: "translate-x-5" },
+      { size: "sm", checked: true, className: "translate-x-4" },
+      { size: "lg", checked: true, className: "translate-x-7" },
+    ],
+    defaultVariants: {
+      size: "default",
+      checked: false,
+    },
+  }
+)
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+/**
+ * A toggle/switch component for boolean inputs with on/off states
+ *
+ * @example
+ * \`\`\`tsx
+ * <Toggle checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * <Toggle size="sm" disabled />
+ * <Toggle size="lg" checked label="Enable notifications" />
+ * \`\`\`
+ */
+export interface ToggleProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">,
+    VariantProps<typeof toggleVariants> {
+  /** Whether the toggle is checked/on */
+  checked?: boolean
+  /** Default checked state for uncontrolled usage */
+  defaultChecked?: boolean
+  /** Callback when checked state changes */
+  onCheckedChange?: (checked: boolean) => void
+  /** Optional label text */
+  label?: string
+  /** Position of the label */
+  labelPosition?: "left" | "right"
+}
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      className,
+      size,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      label,
+      labelPosition = "right",
+      ...props
+    },
+    ref
+  ) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+    const isControlled = controlledChecked !== undefined
+    const isChecked = isControlled ? controlledChecked : internalChecked
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#F3F4F6] data-[state=open]:bg-[#F3F4F6]",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+    const handleClick = () => {
+      if (disabled) return
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E5E7EB] bg-white p-1 text-[#333333] shadow-lg 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}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+      const newValue = !isChecked
 
-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 border-[#E5E7EB] bg-white p-1 text-[#333333] 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
+      if (!isControlled) {
+        setInternalChecked(newValue)
+      }
 
-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-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+      onCheckedChange?.(newValue)
+    }
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+    const toggle = (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isChecked}
+        ref={ref}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          toggleVariants({ size, className }),
+          isChecked ? "bg-[#343E55]" : "bg-[#E5E7EB]"
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            toggleThumbVariants({ size, checked: isChecked })
+          )}
+        />
+      </button>
+    )
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+    if (label) {
+      return (
+        <label className="inline-flex items-center gap-2 cursor-pointer">
+          {labelPosition === "left" && (
+            <span className={cn("text-sm text-[#333333]", disabled && "opacity-50")}>
+              {label}
+            </span>
+          )}
+          {toggle}
+          {labelPosition === "right" && (
+            <span className={cn("text-sm text-[#333333]", disabled && "opacity-50")}>
+              {label}
+            </span>
+          )}
+        </label>
+      )
+    }
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    return toggle
   }
->(({ 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-[#E5E7EB]", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+)
+Toggle.displayName = "Toggle"
 
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+export { Toggle, toggleVariants }
 `, prefix)
         }
       ]
     },
-    "input": {
-      name: "input",
-      description: "A text input component with error and disabled states",
+    "text-field": {
+      name: "text-field",
+      description: "A text field with label, helper text, icons, and validation states",
       dependencies: [
         "class-variance-authority",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
-          name: "input.tsx",
+          name: "text-field.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Loader2 } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * Input variants for different visual states
+ * TextField container variants for when icons/prefix/suffix are present
  */
-const inputVariants = cva(
+const textFieldContainerVariants = cva(
+  "relative flex items-center rounded bg-white transition-all",
+  {
+    variants: {
+      state: {
+        default: "border border-[#E9E9E9] focus-within:border-[#2BBBC9]/50 focus-within:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
+        error: "border border-[#FF3B3B]/40 focus-within:border-[#FF3B3B]/60 focus-within:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50 bg-[#F9FAFB]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      disabled: false,
+    },
+  }
+)
+
+/**
+ * TextField input variants (standalone without container)
+ */
+const textFieldInputVariants = cva(
   "h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#333333] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#333333] placeholder:text-[#9CA3AF] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB]",
   {
     variants: {
@@ -1192,84 +1179,236 @@ const inputVariants = cva(
 )
 
 /**
- * A flexible input component for text entry with state variants.
+ * A comprehensive text field component with label, icons, validation states, and more.
  *
  * @example
  * \`\`\`tsx
- * <Input placeholder="Enter your email" />
- * <Input state="error" placeholder="Invalid input" />
- * <Input state="success" placeholder="Valid input" />
+ * <TextField label="Email" placeholder="Enter your email" required />
+ * <TextField label="Username" error="Username is taken" />
+ * <TextField label="Website" prefix="https://" suffix=".com" />
  * \`\`\`
  */
-export interface InputProps
+export interface TextFieldProps
   extends Omit<React.ComponentProps<"input">, "size">,
-    VariantProps<typeof inputVariants> {}
+    VariantProps<typeof textFieldInputVariants> {
+  /** Label text displayed above the input */
+  label?: string
+  /** Shows red asterisk next to label when true */
+  required?: boolean
+  /** Helper text displayed below the input */
+  helperText?: string
+  /** Error message - shows error state with red styling */
+  error?: string
+  /** Icon displayed on the left inside the input */
+  leftIcon?: React.ReactNode
+  /** Icon displayed on the right inside the input */
+  rightIcon?: React.ReactNode
+  /** Text prefix inside input (e.g., "https://") */
+  prefix?: string
+  /** Text suffix inside input (e.g., ".com") */
+  suffix?: string
+  /** Shows character count when maxLength is set */
+  showCount?: boolean
+  /** Shows loading spinner inside input */
+  loading?: boolean
+  /** Additional class for the wrapper container */
+  wrapperClassName?: string
+  /** Additional class for the label */
+  labelClassName?: string
+  /** Additional class for the input container (includes prefix/suffix/icons) */
+  inputContainerClassName?: string
+}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, state, type, ...props }, ref) => {
-    return (
+const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      className,
+      wrapperClassName,
+      labelClassName,
+      inputContainerClassName,
+      state,
+      label,
+      required,
+      helperText,
+      error,
+      leftIcon,
+      rightIcon,
+      prefix,
+      suffix,
+      showCount,
+      loading,
+      maxLength,
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    // Internal state for character count in uncontrolled mode
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '')
+
+    // Determine if controlled
+    const isControlled = value !== undefined
+    const currentValue = isControlled ? value : internalValue
+
+    // Derive state from props
+    const derivedState = error ? 'error' : (state ?? 'default')
+
+    // Handle change for both controlled and uncontrolled
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value)
+      }
+      onChange?.(e)
+    }
+
+    // Determine if we need the container wrapper (for icons/prefix/suffix)
+    const hasAddons = leftIcon || rightIcon || prefix || suffix || loading
+
+    // Character count
+    const charCount = String(currentValue).length
+
+    // Generate unique IDs for accessibility
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const helperId = \`\${inputId}-helper\`
+    const errorId = \`\${inputId}-error\`
+
+    // Determine aria-describedby
+    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined
+
+    // Render the input element
+    const inputElement = (
       <input
-        type={type}
-        className={cn(inputVariants({ state, className }))}
         ref={ref}
+        id={inputId}
+        className={cn(
+          hasAddons
+            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-[#333333] placeholder:text-[#9CA3AF] disabled:cursor-not-allowed"
+            : textFieldInputVariants({ state: derivedState, className })
+        )}
+        disabled={disabled || loading}
+        maxLength={maxLength}
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        onChange={handleChange}
+        aria-invalid={!!error}
+        aria-describedby={ariaDescribedBy}
         {...props}
       />
     )
+
+    return (
+      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={inputId}
+            className={cn("text-sm font-medium text-[#333333]", labelClassName)}
+          >
+            {label}
+            {required && <span className="text-[#FF3B3B] ml-0.5">*</span>}
+          </label>
+        )}
+
+        {/* Input or Input Container */}
+        {hasAddons ? (
+          <div
+            className={cn(
+              textFieldContainerVariants({ state: derivedState, disabled: disabled || loading }),
+              "h-10 px-4",
+              inputContainerClassName
+            )}
+          >
+            {prefix && <span className="text-sm text-[#6B7280] mr-2 select-none">{prefix}</span>}
+            {leftIcon && <span className="mr-2 text-[#6B7280] [&_svg]:size-4 flex-shrink-0">{leftIcon}</span>}
+            {inputElement}
+            {loading && <Loader2 className="animate-spin size-4 text-[#6B7280] ml-2 flex-shrink-0" />}
+            {!loading && rightIcon && <span className="ml-2 text-[#6B7280] [&_svg]:size-4 flex-shrink-0">{rightIcon}</span>}
+            {suffix && <span className="text-sm text-[#6B7280] ml-2 select-none">{suffix}</span>}
+          </div>
+        ) : (
+          inputElement
+        )}
+
+        {/* Helper text / Error message / Character count */}
+        {(error || helperText || (showCount && maxLength)) && (
+          <div className="flex justify-between items-start gap-2">
+            {error ? (
+              <span id={errorId} className="text-xs text-[#FF3B3B]">
+                {error}
+              </span>
+            ) : helperText ? (
+              <span id={helperId} className="text-xs text-[#6B7280]">
+                {helperText}
+              </span>
+            ) : (
+              <span />
+            )}
+            {showCount && maxLength && (
+              <span
+                className={cn(
+                  "text-xs",
+                  charCount > maxLength ? "text-[#FF3B3B]" : "text-[#6B7280]"
+                )}
+              >
+                {charCount}/{maxLength}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    )
   }
 )
-Input.displayName = "Input"
+TextField.displayName = "TextField"
 
-export { Input, inputVariants }
+export { TextField, textFieldContainerVariants, textFieldInputVariants }
 `, prefix)
         }
       ]
     },
-    "multi-select": {
-      name: "multi-select",
-      description: "A multi-select dropdown component with search, badges, and async loading",
-      dependencies: [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge",
-        "lucide-react"
-      ],
-      files: [
-        {
-          name: "multi-select.tsx",
-          content: prefixTailwindClasses(`import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Check, ChevronDown, X, Loader2 } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-/**
- * MultiSelect trigger variants matching TextField styling
- */
-const multiSelectTriggerVariants = cva(
-  "flex min-h-10 w-full items-center justify-between rounded bg-white px-4 py-2 text-sm text-[#333333] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB]",
-  {
-    variants: {
-      state: {
-        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
-        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-)
+    "select-field": {
+      name: "select-field",
+      description: "A select field with label, helper text, and validation states",
+      dependencies: [
+        "@radix-ui/react-select",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "select-field.tsx",
+          content: prefixTailwindClasses(`import * as React from "react"
+import { Loader2 } from "lucide-react"
 
-export interface MultiSelectOption {
+import { cn } from "../../lib/utils"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+
+export interface SelectOption {
   /** The value of the option */
   value: string
   /** The display label of the option */
   label: string
   /** Whether the option is disabled */
   disabled?: boolean
+  /** Group name for grouping options */
+  group?: string
 }
 
-export interface MultiSelectProps extends VariantProps<typeof multiSelectTriggerVariants> {
+export interface SelectFieldProps {
   /** Label text displayed above the select */
   label?: string
   /** Shows red asterisk next to label when true */
@@ -1284,20 +1423,18 @@ export interface MultiSelectProps extends VariantProps<typeof multiSelectTrigger
   loading?: boolean
   /** Placeholder text when no value selected */
   placeholder?: string
-  /** Currently selected values (controlled) */
-  value?: string[]
-  /** Default values (uncontrolled) */
-  defaultValue?: string[]
-  /** Callback when values change */
-  onValueChange?: (value: string[]) => void
+  /** Currently selected value (controlled) */
+  value?: string
+  /** Default value (uncontrolled) */
+  defaultValue?: string
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void
   /** Options to display */
-  options: MultiSelectOption[]
+  options: SelectOption[]
   /** Enable search/filter functionality */
   searchable?: boolean
   /** Search placeholder text */
   searchPlaceholder?: string
-  /** Maximum selections allowed */
-  maxSelections?: number
   /** Additional class for wrapper */
   wrapperClassName?: string
   /** Additional class for trigger */
@@ -1311,23 +1448,23 @@ export interface MultiSelectProps extends VariantProps<typeof multiSelectTrigger
 }
 
 /**
- * A multi-select component with tags, search, and validation states.
+ * A comprehensive select field component with label, icons, validation states, and more.
  *
  * @example
  * \`\`\`tsx
- * <MultiSelect
- *   label="Skills"
- *   placeholder="Select skills"
+ * <SelectField
+ *   label="Authentication"
+ *   placeholder="Select authentication method"
  *   options={[
- *     { value: 'react', label: 'React' },
- *     { value: 'vue', label: 'Vue' },
- *     { value: 'angular', label: 'Angular' },
+ *     { value: 'none', label: 'None' },
+ *     { value: 'basic', label: 'Basic Auth' },
+ *     { value: 'bearer', label: 'Bearer Token' },
  *   ]}
- *   onValueChange={(values) => console.log(values)}
+ *   required
  * />
  * \`\`\`
  */
-const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
   (
     {
       label,
@@ -1336,39 +1473,26 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
       error,
       disabled,
       loading,
-      placeholder = "Select options",
+      placeholder = "Select an option",
       value,
-      defaultValue = [],
+      defaultValue,
       onValueChange,
       options,
       searchable,
       searchPlaceholder = "Search...",
-      maxSelections,
       wrapperClassName,
       triggerClassName,
       labelClassName,
-      state,
       id,
       name,
     },
     ref
   ) => {
-    // Internal state for selected values (uncontrolled mode)
-    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
-    // Dropdown open state
-    const [isOpen, setIsOpen] = React.useState(false)
-    // Search query
+    // Internal state for search
     const [searchQuery, setSearchQuery] = React.useState("")
 
-    // Container ref for click outside detection
-    const containerRef = React.useRef<HTMLDivElement>(null)
-
-    // Determine if controlled
-    const isControlled = value !== undefined
-    const selectedValues = isControlled ? value : internalValue
-
     // Derive state from props
-    const derivedState = error ? "error" : (state ?? "default")
+    const derivedState = error ? "error" : "default"
 
     // Generate unique IDs for accessibility
     const generatedId = React.useId()
@@ -1379,250 +1503,140 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
     // Determine aria-describedby
     const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined
 
-    // Filter options by search query
-    const filteredOptions = React.useMemo(() => {
-      if (!searchable || !searchQuery) return options
-      return options.filter((option) =>
-        option.label.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    }, [options, searchable, searchQuery])
-
-    // Get selected option labels
-    const selectedLabels = React.useMemo(() => {
-      return selectedValues
-        .map((v) => options.find((o) => o.value === v)?.label)
-        .filter(Boolean) as string[]
-    }, [selectedValues, options])
-
-    // Handle toggle selection
-    const toggleOption = (optionValue: string) => {
-      const newValues = selectedValues.includes(optionValue)
-        ? selectedValues.filter((v) => v !== optionValue)
-        : maxSelections && selectedValues.length >= maxSelections
-        ? selectedValues
-        : [...selectedValues, optionValue]
-
-      if (!isControlled) {
-        setInternalValue(newValues)
-      }
-      onValueChange?.(newValues)
-    }
-
-    // Handle remove tag
-    const removeValue = (valueToRemove: string, e: React.MouseEvent) => {
-      e.stopPropagation()
-      const newValues = selectedValues.filter((v) => v !== valueToRemove)
-      if (!isControlled) {
-        setInternalValue(newValues)
-      }
-      onValueChange?.(newValues)
-    }
-
-    // Handle clear all
-    const clearAll = (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (!isControlled) {
-        setInternalValue([])
-      }
-      onValueChange?.([])
-    }
-
-    // Close dropdown when clicking outside
-    React.useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-          setIsOpen(false)
-          setSearchQuery("")
-        }
-      }
-
-      document.addEventListener("mousedown", handleClickOutside)
-      return () => document.removeEventListener("mousedown", handleClickOutside)
-    }, [])
-
-    // Handle keyboard navigation
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setIsOpen(false)
-        setSearchQuery("")
-      } else if (e.key === "Enter" || e.key === " ") {
-        if (!isOpen) {
-          e.preventDefault()
-          setIsOpen(true)
-        }
-      }
-    }
-
-    return (
-      <div
-        ref={containerRef}
-        className={cn("flex flex-col gap-1 relative", wrapperClassName)}
-      >
-        {/* Label */}
-        {label && (
-          <label
-            htmlFor={selectId}
-            className={cn("text-sm font-medium text-[#333333]", labelClassName)}
-          >
-            {label}
-            {required && <span className="text-[#FF3B3B] ml-0.5">*</span>}
-          </label>
-        )}
-
-        {/* Trigger */}
-        <button
-          ref={ref}
-          id={selectId}
-          type="button"
-          role="combobox"
-          aria-expanded={isOpen}
-          aria-haspopup="listbox"
-          aria-invalid={!!error}
-          aria-describedby={ariaDescribedBy}
-          disabled={disabled || loading}
-          onClick={() => !disabled && !loading && setIsOpen(!isOpen)}
-          onKeyDown={handleKeyDown}
-          className={cn(
-            multiSelectTriggerVariants({ state: derivedState }),
-            "text-left gap-2",
-            triggerClassName
-          )}
-        >
-          <div className="flex-1 flex flex-wrap gap-1">
-            {selectedValues.length === 0 ? (
-              <span className="text-[#9CA3AF]">{placeholder}</span>
-            ) : (
-              selectedLabels.map((label, index) => (
-                <span
-                  key={selectedValues[index]}
-                  className="inline-flex items-center gap-1 bg-[#F3F4F6] text-[#333333] text-xs px-2 py-0.5 rounded"
-                >
-                  {label}
-                  <span
-                    role="button"
-                    tabIndex={0}
-                    onClick={(e) => removeValue(selectedValues[index], e)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault()
-                        removeValue(selectedValues[index], e as unknown as React.MouseEvent)
-                      }
-                    }}
-                    className="cursor-pointer hover:text-[#FF3B3B] focus:outline-none"
-                    aria-label={\`Remove \${label}\`}
-                  >
-                    <X className="size-3" />
-                  </span>
-                </span>
-              ))
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            {selectedValues.length > 0 && (
-              <span
-                role="button"
-                tabIndex={0}
-                onClick={clearAll}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault()
-                    clearAll(e as unknown as React.MouseEvent)
-                  }
-                }}
-                className="p-0.5 cursor-pointer hover:text-[#FF3B3B] focus:outline-none"
-                aria-label="Clear all"
-              >
-                <X className="size-4 text-[#6B7280]" />
-              </span>
-            )}
-            {loading ? (
-              <Loader2 className="size-4 animate-spin text-[#6B7280]" />
-            ) : (
-              <ChevronDown
-                className={cn(
-                  "size-4 text-[#6B7280] transition-transform",
-                  isOpen && "rotate-180"
-                )}
-              />
-            )}
-          </div>
-        </button>
+    // Group options by group property
+    const groupedOptions = React.useMemo(() => {
+      const groups: Record<string, SelectOption[]> = {}
+      const ungrouped: SelectOption[] = []
 
-        {/* Dropdown */}
-        {isOpen && (
-          <div
+      options.forEach((option) => {
+        // Filter by search query if searchable
+        if (searchable && searchQuery) {
+          if (!option.label.toLowerCase().includes(searchQuery.toLowerCase())) {
+            return
+          }
+        }
+
+        if (option.group) {
+          if (!groups[option.group]) {
+            groups[option.group] = []
+          }
+          groups[option.group].push(option)
+        } else {
+          ungrouped.push(option)
+        }
+      })
+
+      return { groups, ungrouped }
+    }, [options, searchable, searchQuery])
+
+    const hasGroups = Object.keys(groupedOptions.groups).length > 0
+
+    // Handle search input change
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(e.target.value)
+    }
+
+    // Reset search when dropdown closes
+    const handleOpenChange = (open: boolean) => {
+      if (!open) {
+        setSearchQuery("")
+      }
+    }
+
+    return (
+      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={selectId}
+            className={cn("text-sm font-medium text-[#333333]", labelClassName)}
+          >
+            {label}
+            {required && <span className="text-[#FF3B3B] ml-0.5">*</span>}
+          </label>
+        )}
+
+        {/* Select */}
+        <Select
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={onValueChange}
+          disabled={disabled || loading}
+          name={name}
+          onOpenChange={handleOpenChange}
+        >
+          <SelectTrigger
+            ref={ref}
+            id={selectId}
+            state={derivedState}
             className={cn(
-              "absolute z-50 mt-1 w-full rounded bg-white border border-[#E9E9E9] shadow-md",
-              "top-full"
+              loading && "pr-10",
+              triggerClassName
             )}
-            role="listbox"
-            aria-multiselectable="true"
+            aria-invalid={!!error}
+            aria-describedby={ariaDescribedBy}
           >
+            <SelectValue placeholder={placeholder} />
+            {loading && (
+              <Loader2 className="absolute right-8 size-4 animate-spin text-[#6B7280]" />
+            )}
+          </SelectTrigger>
+          <SelectContent>
             {/* Search input */}
             {searchable && (
-              <div className="p-2 border-b border-[#E9E9E9]">
+              <div className="px-2 pb-2">
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
                   value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onChange={handleSearchChange}
                   className="w-full h-8 px-3 text-sm border border-[#E9E9E9] rounded bg-white placeholder:text-[#9CA3AF] focus:outline-none focus:border-[#2BBBC9]/50"
+                  // Prevent closing dropdown when clicking input
                   onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
                 />
               </div>
             )}
 
-            {/* Options */}
-            <div className="max-h-60 overflow-auto p-1">
-              {filteredOptions.length === 0 ? (
-                <div className="py-6 text-center text-sm text-[#6B7280]">
-                  No results found
-                </div>
-              ) : (
-                filteredOptions.map((option) => {
-                  const isSelected = selectedValues.includes(option.value)
-                  const isDisabled =
-                    option.disabled ||
-                    (!isSelected && maxSelections && selectedValues.length >= maxSelections)
+            {/* Ungrouped options */}
+            {groupedOptions.ungrouped.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+              >
+                {option.label}
+              </SelectItem>
+            ))}
 
-                  return (
-                    <button
+            {/* Grouped options */}
+            {hasGroups &&
+              Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => (
+                <SelectGroup key={groupName}>
+                  <SelectLabel>{groupName}</SelectLabel>
+                  {groupOptions.map((option) => (
+                    <SelectItem
                       key={option.value}
-                      type="button"
-                      role="option"
-                      aria-selected={isSelected}
-                      disabled={isDisabled}
-                      onClick={() => !isDisabled && toggleOption(option.value)}
-                      className={cn(
-                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#333333] outline-none",
-                        "hover:bg-[#F3F4F6] focus:bg-[#F3F4F6]",
-                        isSelected && "bg-[#F3F4F6]",
-                        isDisabled && "pointer-events-none opacity-50"
-                      )}
+                      value={option.value}
+                      disabled={option.disabled}
                     >
-                      <span className="absolute right-2 flex size-4 items-center justify-center">
-                        {isSelected && <Check className="size-4 text-[#2BBBC9]" />}
-                      </span>
                       {option.label}
-                    </button>
-                  )
-                })
-              )}
-            </div>
-
-            {/* Footer with count */}
-            {maxSelections && (
-              <div className="p-2 border-t border-[#E9E9E9] text-xs text-[#6B7280]">
-                {selectedValues.length} / {maxSelections} selected
-              </div>
-            )}
-          </div>
-        )}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              ))}
 
-        {/* Hidden input for form submission */}
-        {name && selectedValues.map((v) => (
-          <input key={v} type="hidden" name={name} value={v} />
-        ))}
+            {/* No results message */}
+            {searchable &&
+              searchQuery &&
+              groupedOptions.ungrouped.length === 0 &&
+              Object.keys(groupedOptions.groups).length === 0 && (
+                <div className="py-6 text-center text-sm text-[#6B7280]">
+                  No results found
+                </div>
+              )}
+          </SelectContent>
+        </Select>
 
         {/* Helper text / Error message */}
         {(error || helperText) && (
@@ -1642,51 +1656,59 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
     )
   }
 )
-MultiSelect.displayName = "MultiSelect"
+SelectField.displayName = "SelectField"
 
-export { MultiSelect, multiSelectTriggerVariants }
+export { SelectField }
 `, prefix)
         }
       ]
     },
-    "select-field": {
-      name: "select-field",
-      description: "A select field with label, helper text, and validation states",
+    "multi-select": {
+      name: "multi-select",
+      description: "A multi-select dropdown component with search, badges, and async loading",
       dependencies: [
-        "@radix-ui/react-select",
+        "class-variance-authority",
         "clsx",
         "tailwind-merge",
         "lucide-react"
       ],
       files: [
         {
-          name: "select-field.tsx",
+          name: "multi-select.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { Loader2 } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Check, ChevronDown, X, Loader2 } from "lucide-react"
 
 import { cn } from "../../lib/utils"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "./select"
 
-export interface SelectOption {
+/**
+ * MultiSelect trigger variants matching TextField styling
+ */
+const multiSelectTriggerVariants = cva(
+  "flex min-h-10 w-full items-center justify-between rounded bg-white px-4 py-2 text-sm text-[#333333] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB]",
+  {
+    variants: {
+      state: {
+        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
+        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+export interface MultiSelectOption {
   /** The value of the option */
   value: string
   /** The display label of the option */
   label: string
   /** Whether the option is disabled */
   disabled?: boolean
-  /** Group name for grouping options */
-  group?: string
 }
 
-export interface SelectFieldProps {
+export interface MultiSelectProps extends VariantProps<typeof multiSelectTriggerVariants> {
   /** Label text displayed above the select */
   label?: string
   /** Shows red asterisk next to label when true */
@@ -1701,18 +1723,20 @@ export interface SelectFieldProps {
   loading?: boolean
   /** Placeholder text when no value selected */
   placeholder?: string
-  /** Currently selected value (controlled) */
-  value?: string
-  /** Default value (uncontrolled) */
-  defaultValue?: string
-  /** Callback when value changes */
-  onValueChange?: (value: string) => void
+  /** Currently selected values (controlled) */
+  value?: string[]
+  /** Default values (uncontrolled) */
+  defaultValue?: string[]
+  /** Callback when values change */
+  onValueChange?: (value: string[]) => void
   /** Options to display */
-  options: SelectOption[]
+  options: MultiSelectOption[]
   /** Enable search/filter functionality */
   searchable?: boolean
   /** Search placeholder text */
   searchPlaceholder?: string
+  /** Maximum selections allowed */
+  maxSelections?: number
   /** Additional class for wrapper */
   wrapperClassName?: string
   /** Additional class for trigger */
@@ -1726,23 +1750,23 @@ export interface SelectFieldProps {
 }
 
 /**
- * A comprehensive select field component with label, icons, validation states, and more.
+ * A multi-select component with tags, search, and validation states.
  *
  * @example
  * \`\`\`tsx
- * <SelectField
- *   label="Authentication"
- *   placeholder="Select authentication method"
+ * <MultiSelect
+ *   label="Skills"
+ *   placeholder="Select skills"
  *   options={[
- *     { value: 'none', label: 'None' },
- *     { value: 'basic', label: 'Basic Auth' },
- *     { value: 'bearer', label: 'Bearer Token' },
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *     { value: 'angular', label: 'Angular' },
  *   ]}
- *   required
+ *   onValueChange={(values) => console.log(values)}
  * />
  * \`\`\`
  */
-const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
+const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
   (
     {
       label,
@@ -1751,26 +1775,39 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
       error,
       disabled,
       loading,
-      placeholder = "Select an option",
+      placeholder = "Select options",
       value,
-      defaultValue,
+      defaultValue = [],
       onValueChange,
       options,
       searchable,
       searchPlaceholder = "Search...",
+      maxSelections,
       wrapperClassName,
       triggerClassName,
       labelClassName,
+      state,
       id,
       name,
     },
     ref
   ) => {
-    // Internal state for search
+    // Internal state for selected values (uncontrolled mode)
+    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
+    // Dropdown open state
+    const [isOpen, setIsOpen] = React.useState(false)
+    // Search query
     const [searchQuery, setSearchQuery] = React.useState("")
 
+    // Container ref for click outside detection
+    const containerRef = React.useRef<HTMLDivElement>(null)
+
+    // Determine if controlled
+    const isControlled = value !== undefined
+    const selectedValues = isControlled ? value : internalValue
+
     // Derive state from props
-    const derivedState = error ? "error" : "default"
+    const derivedState = error ? "error" : (state ?? "default")
 
     // Generate unique IDs for accessibility
     const generatedId = React.useId()
@@ -1781,48 +1818,85 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
     // Determine aria-describedby
     const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined
 
-    // Group options by group property
-    const groupedOptions = React.useMemo(() => {
-      const groups: Record<string, SelectOption[]> = {}
-      const ungrouped: SelectOption[] = []
+    // Filter options by search query
+    const filteredOptions = React.useMemo(() => {
+      if (!searchable || !searchQuery) return options
+      return options.filter((option) =>
+        option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    }, [options, searchable, searchQuery])
 
-      options.forEach((option) => {
-        // Filter by search query if searchable
-        if (searchable && searchQuery) {
-          if (!option.label.toLowerCase().includes(searchQuery.toLowerCase())) {
-            return
-          }
-        }
+    // Get selected option labels
+    const selectedLabels = React.useMemo(() => {
+      return selectedValues
+        .map((v) => options.find((o) => o.value === v)?.label)
+        .filter(Boolean) as string[]
+    }, [selectedValues, options])
 
-        if (option.group) {
-          if (!groups[option.group]) {
-            groups[option.group] = []
-          }
-          groups[option.group].push(option)
-        } else {
-          ungrouped.push(option)
-        }
-      })
+    // Handle toggle selection
+    const toggleOption = (optionValue: string) => {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((v) => v !== optionValue)
+        : maxSelections && selectedValues.length >= maxSelections
+        ? selectedValues
+        : [...selectedValues, optionValue]
 
-      return { groups, ungrouped }
-    }, [options, searchable, searchQuery])
+      if (!isControlled) {
+        setInternalValue(newValues)
+      }
+      onValueChange?.(newValues)
+    }
 
-    const hasGroups = Object.keys(groupedOptions.groups).length > 0
+    // Handle remove tag
+    const removeValue = (valueToRemove: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      const newValues = selectedValues.filter((v) => v !== valueToRemove)
+      if (!isControlled) {
+        setInternalValue(newValues)
+      }
+      onValueChange?.(newValues)
+    }
 
-    // Handle search input change
-    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchQuery(e.target.value)
+    // Handle clear all
+    const clearAll = (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!isControlled) {
+        setInternalValue([])
+      }
+      onValueChange?.([])
     }
 
-    // Reset search when dropdown closes
-    const handleOpenChange = (open: boolean) => {
-      if (!open) {
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+          setIsOpen(false)
+          setSearchQuery("")
+        }
+      }
+
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }, [])
+
+    // Handle keyboard navigation
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setIsOpen(false)
         setSearchQuery("")
+      } else if (e.key === "Enter" || e.key === " ") {
+        if (!isOpen) {
+          e.preventDefault()
+          setIsOpen(true)
+        }
       }
     }
 
     return (
-      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+      <div
+        ref={containerRef}
+        className={cn("flex flex-col gap-1 relative", wrapperClassName)}
+      >
         {/* Label */}
         {label && (
           <label
@@ -1834,87 +1908,160 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
           </label>
         )}
 
-        {/* Select */}
-        <Select
-          value={value}
-          defaultValue={defaultValue}
-          onValueChange={onValueChange}
+        {/* Trigger */}
+        <button
+          ref={ref}
+          id={selectId}
+          type="button"
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-invalid={!!error}
+          aria-describedby={ariaDescribedBy}
           disabled={disabled || loading}
-          name={name}
-          onOpenChange={handleOpenChange}
+          onClick={() => !disabled && !loading && setIsOpen(!isOpen)}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            multiSelectTriggerVariants({ state: derivedState }),
+            "text-left gap-2",
+            triggerClassName
+          )}
         >
-          <SelectTrigger
-            ref={ref}
-            id={selectId}
-            state={derivedState}
+          <div className="flex-1 flex flex-wrap gap-1">
+            {selectedValues.length === 0 ? (
+              <span className="text-[#9CA3AF]">{placeholder}</span>
+            ) : (
+              selectedLabels.map((label, index) => (
+                <span
+                  key={selectedValues[index]}
+                  className="inline-flex items-center gap-1 bg-[#F3F4F6] text-[#333333] text-xs px-2 py-0.5 rounded"
+                >
+                  {label}
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => removeValue(selectedValues[index], e)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        removeValue(selectedValues[index], e as unknown as React.MouseEvent)
+                      }
+                    }}
+                    className="cursor-pointer hover:text-[#FF3B3B] focus:outline-none"
+                    aria-label={\`Remove \${label}\`}
+                  >
+                    <X className="size-3" />
+                  </span>
+                </span>
+              ))
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            {selectedValues.length > 0 && (
+              <span
+                role="button"
+                tabIndex={0}
+                onClick={clearAll}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    clearAll(e as unknown as React.MouseEvent)
+                  }
+                }}
+                className="p-0.5 cursor-pointer hover:text-[#FF3B3B] focus:outline-none"
+                aria-label="Clear all"
+              >
+                <X className="size-4 text-[#6B7280]" />
+              </span>
+            )}
+            {loading ? (
+              <Loader2 className="size-4 animate-spin text-[#6B7280]" />
+            ) : (
+              <ChevronDown
+                className={cn(
+                  "size-4 text-[#6B7280] transition-transform",
+                  isOpen && "rotate-180"
+                )}
+              />
+            )}
+          </div>
+        </button>
+
+        {/* Dropdown */}
+        {isOpen && (
+          <div
             className={cn(
-              loading && "pr-10",
-              triggerClassName
+              "absolute z-50 mt-1 w-full rounded bg-white border border-[#E9E9E9] shadow-md",
+              "top-full"
             )}
-            aria-invalid={!!error}
-            aria-describedby={ariaDescribedBy}
+            role="listbox"
+            aria-multiselectable="true"
           >
-            <SelectValue placeholder={placeholder} />
-            {loading && (
-              <Loader2 className="absolute right-8 size-4 animate-spin text-[#6B7280]" />
-            )}
-          </SelectTrigger>
-          <SelectContent>
             {/* Search input */}
             {searchable && (
-              <div className="px-2 pb-2">
-                <input
-                  type="text"
-                  placeholder={searchPlaceholder}
-                  value={searchQuery}
-                  onChange={handleSearchChange}
-                  className="w-full h-8 px-3 text-sm border border-[#E9E9E9] rounded bg-white placeholder:text-[#9CA3AF] focus:outline-none focus:border-[#2BBBC9]/50"
-                  // Prevent closing dropdown when clicking input
-                  onClick={(e) => e.stopPropagation()}
-                  onKeyDown={(e) => e.stopPropagation()}
-                />
-              </div>
-            )}
-
-            {/* Ungrouped options */}
-            {groupedOptions.ungrouped.map((option) => (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-              >
-                {option.label}
-              </SelectItem>
-            ))}
-
-            {/* Grouped options */}
-            {hasGroups &&
-              Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => (
-                <SelectGroup key={groupName}>
-                  <SelectLabel>{groupName}</SelectLabel>
-                  {groupOptions.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value}
-                      disabled={option.disabled}
-                    >
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              ))}
+              <div className="p-2 border-b border-[#E9E9E9]">
+                <input
+                  type="text"
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full h-8 px-3 text-sm border border-[#E9E9E9] rounded bg-white placeholder:text-[#9CA3AF] focus:outline-none focus:border-[#2BBBC9]/50"
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            )}
 
-            {/* No results message */}
-            {searchable &&
-              searchQuery &&
-              groupedOptions.ungrouped.length === 0 &&
-              Object.keys(groupedOptions.groups).length === 0 && (
+            {/* Options */}
+            <div className="max-h-60 overflow-auto p-1">
+              {filteredOptions.length === 0 ? (
                 <div className="py-6 text-center text-sm text-[#6B7280]">
                   No results found
                 </div>
+              ) : (
+                filteredOptions.map((option) => {
+                  const isSelected = selectedValues.includes(option.value)
+                  const isDisabled =
+                    option.disabled ||
+                    (!isSelected && maxSelections && selectedValues.length >= maxSelections)
+
+                  return (
+                    <button
+                      key={option.value}
+                      type="button"
+                      role="option"
+                      aria-selected={isSelected}
+                      disabled={isDisabled}
+                      onClick={() => !isDisabled && toggleOption(option.value)}
+                      className={cn(
+                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#333333] outline-none",
+                        "hover:bg-[#F3F4F6] focus:bg-[#F3F4F6]",
+                        isSelected && "bg-[#F3F4F6]",
+                        isDisabled && "pointer-events-none opacity-50"
+                      )}
+                    >
+                      <span className="absolute right-2 flex size-4 items-center justify-center">
+                        {isSelected && <Check className="size-4 text-[#2BBBC9]" />}
+                      </span>
+                      {option.label}
+                    </button>
+                  )
+                })
               )}
-          </SelectContent>
-        </Select>
+            </div>
+
+            {/* Footer with count */}
+            {maxSelections && (
+              <div className="p-2 border-t border-[#E9E9E9] text-xs text-[#6B7280]">
+                {selectedValues.length} / {maxSelections} selected
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Hidden input for form submission */}
+        {name && selectedValues.map((v) => (
+          <input key={v} type="hidden" name={name} value={v} />
+        ))}
 
         {/* Helper text / Error message */}
         {(error || helperText) && (
@@ -1934,210 +2081,9 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
     )
   }
 )
-SelectField.displayName = "SelectField"
-
-export { SelectField }
-`, prefix)
-        }
-      ]
-    },
-    "select": {
-      name: "select",
-      description: "A select dropdown component built on Radix UI Select",
-      dependencies: [
-        "@radix-ui/react-select",
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge",
-        "lucide-react"
-      ],
-      files: [
-        {
-          name: "select.tsx",
-          content: prefixTailwindClasses(`import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-/**
- * SelectTrigger variants matching TextField styling
- */
-const selectTriggerVariants = cva(
-  "flex h-10 w-full items-center justify-between rounded bg-white px-4 py-2.5 text-sm text-[#333333] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB] [&>span]:line-clamp-1",
-  {
-    variants: {
-      state: {
-        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
-        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-)
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
-    VariantProps<typeof selectTriggerVariants> {}
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(({ className, state, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(selectTriggerVariants({ state, className }))}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-4 text-[#6B7280] opacity-70" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="size-4 text-[#6B7280]" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="size-4 text-[#6B7280]" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-white border border-[#E9E9E9] 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",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-4 py-1.5 text-xs font-medium text-[#6B7280]", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#333333] outline-none",
-      "hover:bg-[#F3F4F6] focus:bg-[#F3F4F6]",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex size-4 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-[#2BBBC9]" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-[#E9E9E9]", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+MultiSelect.displayName = "MultiSelect"
 
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-  selectTriggerVariants,
-}
+export { MultiSelect, multiSelectTriggerVariants }
 `, prefix)
         }
       ]
@@ -2454,576 +2400,710 @@ export {
         }
       ]
     },
-    "tag": {
-      name: "tag",
-      description: "A tag component for event labels with optional bold label prefix",
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      description: "A dropdown menu component for displaying actions and options",
       dependencies: [
-        "class-variance-authority",
+        "@radix-ui/react-dropdown-menu",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
-          name: "tag.tsx",
+          name: "dropdown-menu.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
-/**
- * Tag variants for event labels and categories.
- * Rounded rectangle tags with optional bold labels.
- */
-const tagVariants = cva(
-  "inline-flex items-center rounded text-sm",
-  {
-    variants: {
-      variant: {
-        default: "bg-[#F3F4F6] text-[#333333]",
-        primary: "bg-[#343E55]/10 text-[#343E55]",
-        secondary: "bg-[#E5E7EB] text-[#374151]",
-        success: "bg-[#E5FFF5] text-[#00A651]",
-        warning: "bg-[#FFF8E5] text-[#F59E0B]",
-        error: "bg-[#FFECEC] text-[#FF3B3B]",
-      },
-      size: {
-        default: "px-2 py-1",
-        sm: "px-1.5 py-0.5 text-xs",
-        lg: "px-3 py-1.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
   }
-)
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#F3F4F6] data-[state=open]:bg-[#F3F4F6]",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
 
-/**
- * Tag component for displaying event labels and categories.
- *
- * @example
- * \`\`\`tsx
- * <Tag>After Call Event</Tag>
- * <Tag label="In Call Event:">Start of call, Bridge, Call ended</Tag>
- * \`\`\`
- */
-export interface TagProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof tagVariants> {
-  /** Bold label prefix displayed before the content */
-  label?: string
-}
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E5E7EB] bg-white p-1 text-[#333333] shadow-lg 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}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
 
-const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size, label, children, ...props }, ref) => {
-    return (
-      <span
-        className={cn(tagVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {label && (
-          <span className="font-semibold mr-1">{label}</span>
-        )}
-        <span className="font-normal">{children}</span>
-      </span>
-    )
+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 border-[#E5E7EB] bg-white p-1 text-[#333333] 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
   }
-)
-Tag.displayName = "Tag"
+>(({ 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-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-/**
- * TagGroup component for displaying multiple tags with overflow indicator.
- *
- * @example
- * \`\`\`tsx
- * <TagGroup
- *   tags={[
- *     { label: "In Call Event:", value: "Call Begin, Start Dialing" },
- *     { label: "Whatsapp Event:", value: "message.Delivered" },
- *     { value: "After Call Event" },
- *   ]}
- *   maxVisible={2}
- * />
- * \`\`\`
- */
-export interface TagGroupProps {
-  /** Array of tags to display */
-  tags: Array<{ label?: string; value: string }>
-  /** Maximum number of tags to show before overflow (default: 2) */
-  maxVisible?: number
-  /** Tag variant */
-  variant?: TagProps['variant']
-  /** Tag size */
-  size?: TagProps['size']
-  /** Additional className for the container */
-  className?: string
-}
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F3F4F6] focus:text-[#333333] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.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 TagGroup = ({
-  tags,
-  maxVisible = 2,
-  variant,
-  size,
-  className,
-}: TagGroupProps) => {
-  const visibleTags = tags.slice(0, maxVisible)
-  const overflowCount = tags.length - maxVisible
+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-[#E5E7EB]", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <div className={cn("flex flex-col items-start gap-2", className)}>
-      {visibleTags.map((tag, index) => {
-        const isLastVisible = index === visibleTags.length - 1 && overflowCount > 0
-
-        if (isLastVisible) {
-          return (
-            <div key={index} className="flex items-center gap-2">
-              <Tag label={tag.label} variant={variant} size={size}>
-                {tag.value}
-              </Tag>
-              <Tag variant={variant} size={size}>
-                +{overflowCount} more
-              </Tag>
-            </div>
-          )
-        }
-
-        return (
-          <Tag key={index} label={tag.label} variant={variant} size={size}>
-            {tag.value}
-          </Tag>
-        )
-      })}
-    </div>
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
   )
 }
-TagGroup.displayName = "TagGroup"
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
-export { Tag, TagGroup, tagVariants }
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
 `, prefix)
         }
       ]
     },
-    "text-field": {
-      name: "text-field",
-      description: "A text field with label, helper text, icons, and validation states",
+    "tag": {
+      name: "tag",
+      description: "A tag component for event labels with optional bold label prefix",
       dependencies: [
         "class-variance-authority",
         "clsx",
-        "tailwind-merge",
-        "lucide-react"
+        "tailwind-merge"
       ],
       files: [
         {
-          name: "text-field.tsx",
+          name: "tag.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { Loader2 } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * TextField container variants for when icons/prefix/suffix are present
+ * Tag variants for event labels and categories.
+ * Rounded rectangle tags with optional bold labels.
  */
-const textFieldContainerVariants = cva(
-  "relative flex items-center rounded bg-white transition-all",
+const tagVariants = cva(
+  "inline-flex items-center rounded text-sm",
   {
     variants: {
-      state: {
-        default: "border border-[#E9E9E9] focus-within:border-[#2BBBC9]/50 focus-within:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
-        error: "border border-[#FF3B3B]/40 focus-within:border-[#FF3B3B]/60 focus-within:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50 bg-[#F9FAFB]",
-        false: "",
+      variant: {
+        default: "bg-[#F3F4F6] text-[#333333]",
+        primary: "bg-[#343E55]/10 text-[#343E55]",
+        secondary: "bg-[#E5E7EB] text-[#374151]",
+        success: "bg-[#E5FFF5] text-[#00A651]",
+        warning: "bg-[#FFF8E5] text-[#F59E0B]",
+        error: "bg-[#FFECEC] text-[#FF3B3B]",
       },
-    },
-    defaultVariants: {
-      state: "default",
-      disabled: false,
-    },
-  }
-)
-
-/**
- * TextField input variants (standalone without container)
- */
-const textFieldInputVariants = cva(
-  "h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#333333] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#333333] placeholder:text-[#9CA3AF] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#F9FAFB]",
-  {
-    variants: {
-      state: {
-        default: "border border-[#E9E9E9] focus:outline-none focus:border-[#2BBBC9]/50 focus:shadow-[0_0_0_1px_rgba(43,187,201,0.15)]",
-        error: "border border-[#FF3B3B]/40 focus:outline-none focus:border-[#FF3B3B]/60 focus:shadow-[0_0_0_1px_rgba(255,59,59,0.1)]",
+      size: {
+        default: "px-2 py-1",
+        sm: "px-1.5 py-0.5 text-xs",
+        lg: "px-3 py-1.5",
       },
     },
     defaultVariants: {
-      state: "default",
+      variant: "default",
+      size: "default",
     },
   }
 )
 
 /**
- * A comprehensive text field component with label, icons, validation states, and more.
+ * Tag component for displaying event labels and categories.
  *
  * @example
  * \`\`\`tsx
- * <TextField label="Email" placeholder="Enter your email" required />
- * <TextField label="Username" error="Username is taken" />
- * <TextField label="Website" prefix="https://" suffix=".com" />
+ * <Tag>After Call Event</Tag>
+ * <Tag label="In Call Event:">Start of call, Bridge, Call ended</Tag>
  * \`\`\`
  */
-export interface TextFieldProps
-  extends Omit<React.ComponentProps<"input">, "size">,
-    VariantProps<typeof textFieldInputVariants> {
-  /** Label text displayed above the input */
+export interface TagProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagVariants> {
+  /** Bold label prefix displayed before the content */
   label?: string
-  /** Shows red asterisk next to label when true */
-  required?: boolean
-  /** Helper text displayed below the input */
-  helperText?: string
-  /** Error message - shows error state with red styling */
-  error?: string
-  /** Icon displayed on the left inside the input */
-  leftIcon?: React.ReactNode
-  /** Icon displayed on the right inside the input */
-  rightIcon?: React.ReactNode
-  /** Text prefix inside input (e.g., "https://") */
-  prefix?: string
-  /** Text suffix inside input (e.g., ".com") */
-  suffix?: string
-  /** Shows character count when maxLength is set */
-  showCount?: boolean
-  /** Shows loading spinner inside input */
-  loading?: boolean
-  /** Additional class for the wrapper container */
-  wrapperClassName?: string
-  /** Additional class for the label */
-  labelClassName?: string
-  /** Additional class for the input container (includes prefix/suffix/icons) */
-  inputContainerClassName?: string
-}
-
-const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
-  (
-    {
-      className,
-      wrapperClassName,
-      labelClassName,
-      inputContainerClassName,
-      state,
-      label,
-      required,
-      helperText,
-      error,
-      leftIcon,
-      rightIcon,
-      prefix,
-      suffix,
-      showCount,
-      loading,
-      maxLength,
-      value,
-      defaultValue,
-      onChange,
-      disabled,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    // Internal state for character count in uncontrolled mode
-    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '')
-
-    // Determine if controlled
-    const isControlled = value !== undefined
-    const currentValue = isControlled ? value : internalValue
-
-    // Derive state from props
-    const derivedState = error ? 'error' : (state ?? 'default')
-
-    // Handle change for both controlled and uncontrolled
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value)
-      }
-      onChange?.(e)
-    }
-
-    // Determine if we need the container wrapper (for icons/prefix/suffix)
-    const hasAddons = leftIcon || rightIcon || prefix || suffix || loading
-
-    // Character count
-    const charCount = String(currentValue).length
-
-    // Generate unique IDs for accessibility
-    const generatedId = React.useId()
-    const inputId = id || generatedId
-    const helperId = \`\${inputId}-helper\`
-    const errorId = \`\${inputId}-error\`
-
-    // Determine aria-describedby
-    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined
-
-    // Render the input element
-    const inputElement = (
-      <input
-        ref={ref}
-        id={inputId}
-        className={cn(
-          hasAddons
-            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-[#333333] placeholder:text-[#9CA3AF] disabled:cursor-not-allowed"
-            : textFieldInputVariants({ state: derivedState, className })
-        )}
-        disabled={disabled || loading}
-        maxLength={maxLength}
-        value={isControlled ? value : undefined}
-        defaultValue={!isControlled ? defaultValue : undefined}
-        onChange={handleChange}
-        aria-invalid={!!error}
-        aria-describedby={ariaDescribedBy}
-        {...props}
-      />
-    )
+}
 
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, label, children, ...props }, ref) => {
     return (
-      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
-        {/* Label */}
+      <span
+        className={cn(tagVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
         {label && (
-          <label
-            htmlFor={inputId}
-            className={cn("text-sm font-medium text-[#333333]", labelClassName)}
-          >
-            {label}
-            {required && <span className="text-[#FF3B3B] ml-0.5">*</span>}
-          </label>
-        )}
-
-        {/* Input or Input Container */}
-        {hasAddons ? (
-          <div
-            className={cn(
-              textFieldContainerVariants({ state: derivedState, disabled: disabled || loading }),
-              "h-10 px-4",
-              inputContainerClassName
-            )}
-          >
-            {prefix && <span className="text-sm text-[#6B7280] mr-2 select-none">{prefix}</span>}
-            {leftIcon && <span className="mr-2 text-[#6B7280] [&_svg]:size-4 flex-shrink-0">{leftIcon}</span>}
-            {inputElement}
-            {loading && <Loader2 className="animate-spin size-4 text-[#6B7280] ml-2 flex-shrink-0" />}
-            {!loading && rightIcon && <span className="ml-2 text-[#6B7280] [&_svg]:size-4 flex-shrink-0">{rightIcon}</span>}
-            {suffix && <span className="text-sm text-[#6B7280] ml-2 select-none">{suffix}</span>}
-          </div>
-        ) : (
-          inputElement
-        )}
-
-        {/* Helper text / Error message / Character count */}
-        {(error || helperText || (showCount && maxLength)) && (
-          <div className="flex justify-between items-start gap-2">
-            {error ? (
-              <span id={errorId} className="text-xs text-[#FF3B3B]">
-                {error}
-              </span>
-            ) : helperText ? (
-              <span id={helperId} className="text-xs text-[#6B7280]">
-                {helperText}
-              </span>
-            ) : (
-              <span />
-            )}
-            {showCount && maxLength && (
-              <span
-                className={cn(
-                  "text-xs",
-                  charCount > maxLength ? "text-[#FF3B3B]" : "text-[#6B7280]"
-                )}
-              >
-                {charCount}/{maxLength}
-              </span>
-            )}
-          </div>
+          <span className="font-semibold mr-1">{label}</span>
         )}
-      </div>
+        <span className="font-normal">{children}</span>
+      </span>
     )
   }
 )
-TextField.displayName = "TextField"
+Tag.displayName = "Tag"
 
-export { TextField, textFieldContainerVariants, textFieldInputVariants }
+/**
+ * TagGroup component for displaying multiple tags with overflow indicator.
+ *
+ * @example
+ * \`\`\`tsx
+ * <TagGroup
+ *   tags={[
+ *     { label: "In Call Event:", value: "Call Begin, Start Dialing" },
+ *     { label: "Whatsapp Event:", value: "message.Delivered" },
+ *     { value: "After Call Event" },
+ *   ]}
+ *   maxVisible={2}
+ * />
+ * \`\`\`
+ */
+export interface TagGroupProps {
+  /** Array of tags to display */
+  tags: Array<{ label?: string; value: string }>
+  /** Maximum number of tags to show before overflow (default: 2) */
+  maxVisible?: number
+  /** Tag variant */
+  variant?: TagProps['variant']
+  /** Tag size */
+  size?: TagProps['size']
+  /** Additional className for the container */
+  className?: string
+}
+
+const TagGroup = ({
+  tags,
+  maxVisible = 2,
+  variant,
+  size,
+  className,
+}: TagGroupProps) => {
+  const visibleTags = tags.slice(0, maxVisible)
+  const overflowCount = tags.length - maxVisible
+
+  return (
+    <div className={cn("flex flex-col items-start gap-2", className)}>
+      {visibleTags.map((tag, index) => {
+        const isLastVisible = index === visibleTags.length - 1 && overflowCount > 0
+
+        if (isLastVisible) {
+          return (
+            <div key={index} className="flex items-center gap-2">
+              <Tag label={tag.label} variant={variant} size={size}>
+                {tag.value}
+              </Tag>
+              <Tag variant={variant} size={size}>
+                +{overflowCount} more
+              </Tag>
+            </div>
+          )
+        }
+
+        return (
+          <Tag key={index} label={tag.label} variant={variant} size={size}>
+            {tag.value}
+          </Tag>
+        )
+      })}
+    </div>
+  )
+}
+TagGroup.displayName = "TagGroup"
+
+export { Tag, TagGroup, tagVariants }
 `, prefix)
         }
       ]
     },
-    "toggle": {
-      name: "toggle",
-      description: "A toggle/switch component for boolean inputs with on/off states",
+    "collapsible": {
+      name: "collapsible",
+      description: "An expandable/collapsible section component with single or multiple mode support",
       dependencies: [
         "class-variance-authority",
         "clsx",
-        "tailwind-merge"
+        "tailwind-merge",
+        "lucide-react"
       ],
       files: [
         {
-          name: "toggle.tsx",
+          name: "collapsible.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * Toggle track variants (the outer container)
+ * Collapsible root variants
  */
-const toggleVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+const collapsibleVariants = cva("w-full", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "border border-[#E5E7EB] rounded-lg divide-y divide-[#E5E7EB]",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+/**
+ * Collapsible item variants
+ */
+const collapsibleItemVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+/**
+ * Collapsible trigger variants
+ */
+const collapsibleTriggerVariants = cva(
+  "flex w-full items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
-      size: {
-        default: "h-6 w-11",
-        sm: "h-5 w-9",
-        lg: "h-7 w-14",
+      variant: {
+        default: "py-3",
+        bordered: "p-4 hover:bg-[#F9FAFB]",
       },
     },
     defaultVariants: {
-      size: "default",
+      variant: "default",
     },
   }
 )
 
 /**
- * Toggle thumb variants (the sliding circle)
+ * Collapsible content variants
  */
-const toggleThumbVariants = cva(
-  "pointer-events-none inline-block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ease-in-out",
+const collapsibleContentVariants = cva(
+  "overflow-hidden transition-all duration-300 ease-in-out",
   {
     variants: {
-      size: {
-        default: "h-5 w-5",
-        sm: "h-4 w-4",
-        lg: "h-6 w-6",
-      },
-      checked: {
-        true: "",
-        false: "translate-x-0",
+      variant: {
+        default: "",
+        bordered: "px-4",
       },
     },
-    compoundVariants: [
-      { size: "default", checked: true, className: "translate-x-5" },
-      { size: "sm", checked: true, className: "translate-x-4" },
-      { size: "lg", checked: true, className: "translate-x-7" },
-    ],
     defaultVariants: {
-      size: "default",
-      checked: false,
+      variant: "default",
     },
   }
-)
+)
+
+// Types
+type CollapsibleType = "single" | "multiple"
+
+interface CollapsibleContextValue {
+  type: CollapsibleType
+  value: string[]
+  onValueChange: (value: string[]) => void
+  variant: "default" | "bordered"
+}
+
+interface CollapsibleItemContextValue {
+  value: string
+  isOpen: boolean
+  disabled?: boolean
+}
+
+// Contexts
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
+const CollapsibleItemContext = React.createContext<CollapsibleItemContextValue | null>(null)
+
+function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) {
+    throw new Error("Collapsible components must be used within a Collapsible")
+  }
+  return context
+}
+
+function useCollapsibleItemContext() {
+  const context = React.useContext(CollapsibleItemContext)
+  if (!context) {
+    throw new Error("CollapsibleTrigger/CollapsibleContent must be used within a CollapsibleItem")
+  }
+  return context
+}
 
 /**
- * A toggle/switch component for boolean inputs with on/off states
- *
- * @example
- * \`\`\`tsx
- * <Toggle checked={isEnabled} onCheckedChange={setIsEnabled} />
- * <Toggle size="sm" disabled />
- * <Toggle size="lg" checked label="Enable notifications" />
- * \`\`\`
+ * Root collapsible component that manages state
  */
-export interface ToggleProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">,
-    VariantProps<typeof toggleVariants> {
-  /** Whether the toggle is checked/on */
-  checked?: boolean
-  /** Default checked state for uncontrolled usage */
-  defaultChecked?: boolean
-  /** Callback when checked state changes */
-  onCheckedChange?: (checked: boolean) => void
-  /** Optional label text */
-  label?: string
-  /** Position of the label */
-  labelPosition?: "left" | "right"
+export interface CollapsibleProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof collapsibleVariants> {
+  /** Whether only one item can be open at a time ('single') or multiple ('multiple') */
+  type?: CollapsibleType
+  /** Controlled value - array of open item values */
+  value?: string[]
+  /** Default open items for uncontrolled usage */
+  defaultValue?: string[]
+  /** Callback when open items change */
+  onValueChange?: (value: string[]) => void
 }
 
-const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
   (
     {
       className,
-      size,
-      checked: controlledChecked,
-      defaultChecked = false,
-      onCheckedChange,
-      disabled,
-      label,
-      labelPosition = "right",
+      variant = "default",
+      type = "multiple",
+      value: controlledValue,
+      defaultValue = [],
+      onValueChange,
+      children,
       ...props
     },
     ref
   ) => {
-    const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
 
-    const isControlled = controlledChecked !== undefined
-    const isChecked = isControlled ? controlledChecked : internalChecked
+    const isControlled = controlledValue !== undefined
+    const currentValue = isControlled ? controlledValue : internalValue
+
+    const handleValueChange = React.useCallback(
+      (newValue: string[]) => {
+        if (!isControlled) {
+          setInternalValue(newValue)
+        }
+        onValueChange?.(newValue)
+      },
+      [isControlled, onValueChange]
+    )
+
+    const contextValue = React.useMemo(
+      () => ({
+        type,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        variant: variant || "default",
+      }),
+      [type, currentValue, handleValueChange, variant]
+    )
+
+    return (
+      <CollapsibleContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          className={cn(collapsibleVariants({ variant, className }))}
+          {...props}
+        >
+          {children}
+        </div>
+      </CollapsibleContext.Provider>
+    )
+  }
+)
+Collapsible.displayName = "Collapsible"
+
+/**
+ * Individual collapsible item
+ */
+export interface CollapsibleItemProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof collapsibleItemVariants> {
+  /** Unique value for this item */
+  value: string
+  /** Whether this item is disabled */
+  disabled?: boolean
+}
+
+const CollapsibleItem = React.forwardRef<HTMLDivElement, CollapsibleItemProps>(
+  ({ className, value, disabled, children, ...props }, ref) => {
+    const { value: openValues, variant } = useCollapsibleContext()
+    const isOpen = openValues.includes(value)
+
+    const contextValue = React.useMemo(
+      () => ({
+        value,
+        isOpen,
+        disabled,
+      }),
+      [value, isOpen, disabled]
+    )
+
+    return (
+      <CollapsibleItemContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          data-state={isOpen ? "open" : "closed"}
+          className={cn(collapsibleItemVariants({ variant, className }))}
+          {...props}
+        >
+          {children}
+        </div>
+      </CollapsibleItemContext.Provider>
+    )
+  }
+)
+CollapsibleItem.displayName = "CollapsibleItem"
+
+/**
+ * Trigger button that toggles the collapsible item
+ */
+export interface CollapsibleTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof collapsibleTriggerVariants> {
+  /** Whether to show the chevron icon */
+  showChevron?: boolean
+}
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+  ({ className, showChevron = true, children, ...props }, ref) => {
+    const { type, value: openValues, onValueChange, variant } = useCollapsibleContext()
+    const { value, isOpen, disabled } = useCollapsibleItemContext()
 
     const handleClick = () => {
       if (disabled) return
 
-      const newValue = !isChecked
+      let newValue: string[]
 
-      if (!isControlled) {
-        setInternalChecked(newValue)
+      if (type === "single") {
+        // In single mode, toggle current item (close if open, open if closed)
+        newValue = isOpen ? [] : [value]
+      } else {
+        // In multiple mode, toggle the item in the array
+        newValue = isOpen
+          ? openValues.filter((v) => v !== value)
+          : [...openValues, value]
       }
 
-      onCheckedChange?.(newValue)
+      onValueChange(newValue)
     }
 
-    const toggle = (
+    return (
       <button
-        type="button"
-        role="switch"
-        aria-checked={isChecked}
         ref={ref}
+        type="button"
+        aria-expanded={isOpen}
         disabled={disabled}
         onClick={handleClick}
-        className={cn(
-          toggleVariants({ size, className }),
-          isChecked ? "bg-[#343E55]" : "bg-[#E5E7EB]"
-        )}
+        className={cn(collapsibleTriggerVariants({ variant, className }))}
         {...props}
       >
-        <span
-          className={cn(
-            toggleThumbVariants({ size, checked: isChecked })
-          )}
-        />
+        <span className="flex-1">{children}</span>
+        {showChevron && (
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 shrink-0 text-[#6B7280] transition-transform duration-300",
+              isOpen && "rotate-180"
+            )}
+          />
+        )}
       </button>
     )
+  }
+)
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
 
-    if (label) {
-      return (
-        <label className="inline-flex items-center gap-2 cursor-pointer">
-          {labelPosition === "left" && (
-            <span className={cn("text-sm text-[#333333]", disabled && "opacity-50")}>
-              {label}
-            </span>
-          )}
-          {toggle}
-          {labelPosition === "right" && (
-            <span className={cn("text-sm text-[#333333]", disabled && "opacity-50")}>
-              {label}
-            </span>
-          )}
-        </label>
-      )
-    }
+/**
+ * Content that is shown/hidden when the item is toggled
+ */
+export interface CollapsibleContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof collapsibleContentVariants> {}
 
-    return toggle
+const CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useCollapsibleContext()
+    const { isOpen } = useCollapsibleItemContext()
+    const contentRef = React.useRef<HTMLDivElement>(null)
+    const [height, setHeight] = React.useState<number | undefined>(undefined)
+
+    React.useEffect(() => {
+      if (contentRef.current) {
+        const contentHeight = contentRef.current.scrollHeight
+        setHeight(isOpen ? contentHeight : 0)
+      }
+    }, [isOpen, children])
+
+    return (
+      <div
+        ref={ref}
+        className={cn(collapsibleContentVariants({ variant, className }))}
+        style={{ height: height !== undefined ? \`\${height}px\` : undefined }}
+        aria-hidden={!isOpen}
+        {...props}
+      >
+        <div ref={contentRef} className="pb-4">
+          {children}
+        </div>
+      </div>
+    )
   }
 )
-Toggle.displayName = "Toggle"
+CollapsibleContent.displayName = "CollapsibleContent"
 
-export { Toggle, toggleVariants }
+export {
+  Collapsible,
+  CollapsibleItem,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  collapsibleVariants,
+  collapsibleItemVariants,
+  collapsibleTriggerVariants,
+  collapsibleContentVariants,
+}
 `, prefix)
         }
       ]