@classytic/fluid 0.1.1 → 0.1.2

package/dist/index.js

@@ -11,7 +11,7 @@ import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, Pagi
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/ui/table';
-import { ChevronDown, Minus, Plus, X, Check, LoaderIcon, Wand2, ChevronUp, AlertTriangle, Loader2, AlertCircle, RefreshCw, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Filter, RotateCcw, ChevronLeft, ChevronRight, ChevronsUpDown, Tag } from 'lucide-react';
+import { ChevronDown, Minus, Plus, X, Check, LoaderIcon, Wand2, ChevronUp, AlertTriangle, Loader2, AlertCircle, RefreshCw, Copy, Search, ArrowUp, ArrowDown, ArrowUpDown, MoreHorizontal, Sun, Moon, MinusIcon, ChevronUpIcon, ChevronDownIcon, ArrowLeft, ArrowRight, CalendarIcon, Filter, RotateCcw, ChevronLeft, ChevronRight, Tag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
@@ -41,6 +41,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Switch } from '@/components/ui/switch';
 import { Calendar } from '@/components/ui/calendar';
+import { Combobox, ComboboxInput as ComboboxInput$1, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from '@/components/ui/combobox';
 import { startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay, subMonths, addMonths, format, isSameMonth, isValid } from 'date-fns';
 
 var __defProp = Object.defineProperty;
@@ -2319,23 +2320,23 @@ var PhoneInput = React5.forwardRef(
             if (open) setSearchValue("");
           },
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               PopoverTrigger,
               {
-                render: /* @__PURE__ */ jsx(
+                render: /* @__PURE__ */ jsxs(
                   Button,
                   {
                     type: "button",
                     variant: "ghost",
                     className: "gap-1.5 rounded-none border-r px-3 focus:z-10 min-w-[90px] h-full",
-                    disabled
+                    disabled,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedCountry.dialCode }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
+                    ]
                   }
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: selectedCountry.flag }),
-                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedCountry.dialCode }),
-                  /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
-                ]
+                )
               }
             ),
             /* @__PURE__ */ jsx(PopoverContent, { className: "w-[280px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
@@ -3648,7 +3649,7 @@ function SelectInput({
               "aria-invalid": fieldState?.invalid || void 0,
               children: [
                 Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4 text-primary" }),
-                /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selectedLabel })
+                /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selectedLabel || null })
               ]
             }
           ),
@@ -4105,10 +4106,10 @@ function DateInput({
       year: "numeric"
     }) : placeholder;
     return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         PopoverTrigger,
         {
-          render: /* @__PURE__ */ jsx(
+          render: /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
@@ -4118,20 +4119,20 @@ function DateInput({
                 !selected && "text-muted-foreground",
                 inputClassName
               ),
-              disabled: isDisabled
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
+                displayText,
+                allowClear && selected && !isDisabled && /* @__PURE__ */ jsx(
+                  X,
+                  {
+                    className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
+                    onClick: handleClear
+                  }
+                )
+              ]
             }
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
-            displayText,
-            allowClear && selected && !isDisabled && /* @__PURE__ */ jsx(
-              X,
-              {
-                className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
-                onClick: handleClear
-              }
-            )
-          ]
+          )
         }
       ),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
@@ -4609,10 +4610,10 @@ function TagChoiceInputInternal({
         }
       ),
       /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           PopoverTrigger,
           {
-            render: /* @__PURE__ */ jsx(
+            render: /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -4625,33 +4626,33 @@ function TagChoiceInputInternal({
                   "hover:bg-accent/50 transition-colors",
                   error && "border-destructive",
                   disabled && "opacity-50 cursor-not-allowed"
-                )
-              }
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "text-sm",
-                      selectedValues.length === 0 && "text-muted-foreground"
-                    ),
-                    children: selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                ChevronDown,
-                {
-                  className: cn(
-                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
-                    open && "rotate-180"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-muted-foreground" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm",
+                          selectedValues.length === 0 && "text-muted-foreground"
+                        ),
+                        children: selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn(
+                        "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                        open && "rotate-180"
+                      )
+                    }
                   )
-                }
-              )
-            ]
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -4719,7 +4720,7 @@ function TagChoiceInput({
   onValueChange
 }) {
   const descriptionText = description || helperText;
-  if (control && name) {
+  if (control) {
     return /* @__PURE__ */ jsx(
       Controller,
       {
@@ -4762,15 +4763,11 @@ function TagChoiceInput({
   );
 }
 TagChoiceInput.displayName = "TagChoiceInput";
-function generateStableKey(item, index, prefix) {
-  return `${prefix}-${item.value}-${index}`;
-}
 function ComboboxInput({
   control,
   name,
   label,
   placeholder = "Select...",
-  searchPlaceholder = "Search...",
   emptyText = "No items found.",
   description,
   helperText,
@@ -4779,86 +4776,67 @@ function ComboboxInput({
   items = [],
   className,
   labelClassName,
-  triggerClassName,
+  inputClassName,
   onValueChange,
   renderOption,
   value: propValue,
   onChange: propOnChange
 }) {
   const descriptionText = description || helperText;
-  const [open, setOpen] = useState(false);
-  const handleSelect = (selectedValue, field) => {
-    if (field) {
-      field.onChange(selectedValue);
-    } else if (propOnChange) {
-      propOnChange(selectedValue);
-    }
-    onValueChange?.(selectedValue);
-    setOpen(false);
-  };
+  const itemValues = useMemo(() => items.map((item) => item.value), [items]);
+  const handleValueChange = useCallback(
+    (newValue, field) => {
+      const safeValue = newValue || "";
+      if (field) {
+        field.onChange(safeValue);
+      } else if (propOnChange) {
+        propOnChange(safeValue);
+      }
+      onValueChange?.(safeValue);
+    },
+    [propOnChange, onValueChange]
+  );
   const renderCombobox = (currentValue, field, isDisabled) => {
-    const selectedItem = items.find((item) => item.value === currentValue);
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs(
-        PopoverTrigger,
-        {
-          render: /* @__PURE__ */ jsx(
-            Button,
+    return /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        items: itemValues,
+        value: currentValue,
+        onValueChange: (value) => handleValueChange(value, field),
+        disabled: isDisabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxInput$1,
             {
-              variant: "outline",
-              role: "combobox",
-              "aria-expanded": open,
-              disabled: isDisabled,
-              className: cn(
-                "w-full justify-between font-normal",
-                !currentValue && "text-muted-foreground",
-                triggerClassName
-              )
+              placeholder,
+              className: cn(inputClassName)
             }
           ),
-          children: [
-            selectedItem ? selectedItem.label : placeholder,
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-(--anchor-width) p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-        /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
-        /* @__PURE__ */ jsxs(CommandList, { children: [
-          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
-          /* @__PURE__ */ jsx(CommandGroup, { children: items.map((item, index) => {
-            const itemKey = generateStableKey(item, index, name || "combobox");
-            return /* @__PURE__ */ jsxs(
-              CommandItem,
-              {
-                value: item.label,
-                disabled: item.disabled,
-                onSelect: () => handleSelect(item.value, field),
-                children: [
-                  renderOption ? renderOption(item) : item.label,
-                  /* @__PURE__ */ jsx(
-                    Check,
-                    {
-                      className: cn(
-                        "ml-auto h-4 w-4",
-                        currentValue === item.value ? "opacity-100" : "opacity-0"
-                      )
-                    }
-                  )
-                ]
-              },
-              itemKey
-            );
-          }) })
-        ] })
-      ] }) })
-    ] });
+          /* @__PURE__ */ jsxs(ComboboxContent, { children: [
+            /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (itemValue) => {
+              const option = items.find((item) => item.value === itemValue);
+              if (!option) return null;
+              return /* @__PURE__ */ jsx(
+                ComboboxItem,
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  children: renderOption ? renderOption(option) : option.label
+                },
+                option.value
+              );
+            } })
+          ] })
+        ]
+      }
+    );
   };
   if (!control) {
     return /* @__PURE__ */ jsxs(Field, { className, "data-disabled": disabled, children: [
       label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
         label,
-        required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
       renderCombobox(propValue, void 0, disabled),
       descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText })
@@ -4878,7 +4856,7 @@ function ComboboxInput({
           children: [
             label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: name, className: labelClassName, children: [
               label,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
             ] }),
             renderCombobox(field.value, field, disabled),
             descriptionText && /* @__PURE__ */ jsx(FieldDescription, { children: descriptionText }),
@@ -5096,32 +5074,32 @@ function DateRangeFilter({
     if (appliedRange.to) return `Until ${formatDate(appliedRange.to)}`;
   };
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
-        render: /* @__PURE__ */ jsx(
+        render: /* @__PURE__ */ jsxs(
           Button,
           {
             type: "button",
             variant: "outline",
             className: cn(
-              "w-full justify-start text-left font-normal",
+              "w-full justify-start font-normal",
               !(appliedRange?.from || appliedRange?.to) && "text-muted-foreground",
               buttonClassName
-            )
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+              getDisplayText(),
+              (appliedRange?.from || appliedRange?.to) && /* @__PURE__ */ jsx(
+                X,
+                {
+                  className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
+                  onClick: handleClearFilter
+                }
+              )
+            ]
           }
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          getDisplayText(),
-          (appliedRange?.from || appliedRange?.to) && /* @__PURE__ */ jsx(
-            X,
-            {
-              className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
-              onClick: handleClearFilter
-            }
-          )
-        ]
+        )
       }
     ),
     /* @__PURE__ */ jsx(
@@ -5191,74 +5169,85 @@ function DateRangePopover({
   maxDate
 }) {
   const hasValue = dateRange?.from || dateRange?.to;
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(
+        PopoverTrigger,
         {
-          variant: hasValue ? "outline" : "secondary",
-          className: cn(
-            "w-full justify-start text-left font-normal",
-            !hasValue && "text-muted-foreground",
-            disabled && "cursor-not-allowed opacity-50",
-            hasValue && allowClear && "pr-8",
-            buttonClassName
-          ),
-          disabled,
-          type: "button",
-          children: [
-            /* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
-            hasValue ? /* @__PURE__ */ jsxs("span", { children: [
-              formatDateRange(dateRange),
-              showBadge && dateRange?.from && dateRange?.to && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs bg-secondary text-secondary-foreground py-0.5 px-2 rounded-full", children: formatDateRange(dateRange) })
-            ] }) : /* @__PURE__ */ jsx("span", { children: placeholder })
-          ]
+          render: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              disabled,
+              variant: "outline",
+              className: cn(
+                "w-full justify-start gap-2 font-normal",
+                !hasValue && "text-muted-foreground",
+                hasValue && allowClear && "pr-10",
+                buttonClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+                hasValue ? /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-left", children: [
+                  formatDateRange(dateRange),
+                  showBadge && dateRange?.from && dateRange?.to && (() => {
+                    const from = dateRange.from instanceof Date ? dateRange.from : new Date(dateRange.from);
+                    const to = dateRange.to instanceof Date ? dateRange.to : new Date(dateRange.to);
+                    const days = Math.ceil((to.getTime() - from.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+                    return /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs bg-secondary text-secondary-foreground py-0.5 px-2 rounded-full", children: [
+                      days,
+                      " ",
+                      days === 1 ? "day" : "days"
+                    ] });
+                  })()
+                ] }) : /* @__PURE__ */ jsx("span", { className: "text-left", children: placeholder })
+              ]
+            }
+          )
         }
       ),
-      hasValue && allowClear && !disabled && /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
         {
-          type: "button",
-          variant: "ghost",
-          className: "absolute right-0 top-0 h-full px-2 hover:bg-transparent",
-          onClick: handleClear,
+          className: cn("w-auto p-0", calendarClassName),
+          align: "start",
           children: [
-            /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Clear date range" })
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                selected: dateRange,
+                onSelect: handleDateRangeSelect,
+                disabled: isDateDisabled,
+                initialFocus: true,
+                ...minDate && { fromDate: minDate },
+                ...maxDate && { toDate: maxDate }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-border", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleClear,
+                disabled: !hasValue,
+                className: "w-full",
+                type: "button",
+                children: "Clear Date Range"
+              }
+            ) })
           ]
         }
       )
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
+    ] }),
+    hasValue && allowClear && !disabled && /* @__PURE__ */ jsx(
+      "button",
       {
-        className: cn("w-auto p-0", calendarClassName),
-        align: "start",
-        children: [
-          /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              mode: "range",
-              selected: dateRange,
-              onSelect: handleDateRangeSelect,
-              disabled: isDateDisabled,
-              initialFocus: true,
-              ...minDate && { fromDate: minDate },
-              ...maxDate && { toDate: maxDate }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-border", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: handleClear,
-              disabled: !hasValue,
-              className: "w-full",
-              children: "Clear Date Range"
-            }
-          ) })
-        ]
+        type: "button",
+        onClick: handleClear,
+        className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-muted transition-colors",
+        "aria-label": "Clear date range",
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" })
       }
     )
   ] });
@@ -5294,7 +5283,7 @@ function DateRangeInput({
   clearErrors,
   descriptionComponent,
   allowClear = true,
-  showBadge = true,
+  showBadge = false,
   Icon: Icon2 = CalendarIcon,
   transform = defaultTransform
 }) {
@@ -5356,7 +5345,7 @@ function DateRangeInput({
       clearErrors(name);
     }
   };
-  if (control && name) {
+  if (control) {
     return /* @__PURE__ */ jsx(
       Controller,
       {
@@ -5413,11 +5402,11 @@ function DateRangeInput({
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
     label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium flex-grow", labelClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium grow", labelClassName), children: [
         label,
         required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex-shrink-0", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) })
     ] }),
     /* @__PURE__ */ jsx(
       DateRangePopover,
@@ -6507,7 +6496,7 @@ var CompactTagChoiceInternal = forwardRef(({
       "div",
       {
         className: cn(
-          "min-h-[2.5rem] w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "min-h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
           "ring-offset-background focus-within:ring-1 focus-within:ring-primary/20",
           "hover:border-primary/50 transition-all duration-200",
           error && "border-destructive focus-within:ring-destructive/20",
@@ -6538,25 +6527,33 @@ var CompactTagChoiceInternal = forwardRef(({
             ] }, val);
           }) }),
           !disabled && availableChoices.length > 0 && (!maxSelections || value.length < maxSelections) && /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-              Button,
+            /* @__PURE__ */ jsx(
+              PopoverTrigger,
               {
-                ref: triggerRef,
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: "h-auto p-1 text-muted-foreground hover:text-foreground",
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setOpen(true);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
-                  value.length === 0 ? placeholder : "Add more..."
-                ]
+                render: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    ref: triggerRef,
+                    type: "button",
+                    variant: "ghost",
+                    className: cn(
+                      "inline-flex items-center justify-center h-auto p-1 rounded-md text-sm font-medium transition-colors",
+                      "text-muted-foreground hover:text-foreground hover:bg-accent",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    ),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
+                      value.length === 0 ? placeholder : "Add more..."
+                    ]
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx(PopoverContent, { className: "w-[220px] p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
               availableChoices.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: "No options available" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: availableChoices.map((choice) => /* @__PURE__ */ jsxs(
                 "div",
@@ -6962,7 +6959,57 @@ function CalendarWithDetail({
     }
   );
 }
+var backgrounds = {
+  default: "bg-background",
+  muted: "bg-muted",
+  primary: "bg-primary text-primary-foreground",
+  transparent: "bg-transparent"
+};
+var paddings = {
+  none: "",
+  sm: "py-8 md:py-12",
+  md: "py-12 md:py-16",
+  lg: "py-16 md:py-24",
+  xl: "py-24 md:py-32"
+};
+function Section({
+  id,
+  children,
+  className,
+  background = "default",
+  padding = "sm"
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(backgrounds[background], paddings[padding], className),
+      children
+    }
+  );
+}
+var maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full"
+};
+function Container({
+  children,
+  className,
+  maxWidth = "7xl"
+}) {
+  const isFullWidth = maxWidth === "full";
+  const baseClass = isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8";
+  return /* @__PURE__ */ jsx("div", { className: cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className), children });
+}
 
-export { AccordionSection, ActionDropdown, ActionTooltip, ApiPagination, ButtonTooltip, CalendarDayDetail, CalendarWithDetail, CardWrapper, CheckboxDropdown, CheckboxInput, ClientSubmitButton, CollapsibleCard, CollapsibleSection, CollapsibleWrapper, ComboboxInput, CompactInput, CompactNumberInput, CompactSelect, CompactSlugField, CompactTagChoice, CompactTextarea, ConfirmDialog, ConfirmSheet, CopyButton, CopyCodeBlock, CopyText, CustomPagination, DataCard, DataTable, DateInput, DateRangeFilter, DateRangeInput, DeleteConfirmDialog, DialogWrapper, DisplayHeading, DraggableCard, DropdownWrapper, DynamicTabs, ErrorState, ErrorStateInline, EventCalendar, FacebookIcon, FaqAccordion, FeatureItem, Field13 as Field, FormDialog, FormErrorSummary, FormInput, FormSheet, FormTextarea, GoogleIcon, IconItemMedia, IconTooltip, InfoAlert, InfoRow, InfoTooltip, InstagramIcon, LoadingCard, ModeToggle, PaginationInfo, PhoneInput, Pill, PillAvatar, PillAvatarGroup, PillButton, PillDelta, PillIcon, PillIndicator, PillStatus, RadioDropdown, RadioInput, ResponsiveSplitLayout, search_exports as Search, SearchProvider, SelectDropdown, SelectInput, SheetWrapper, SimpleTable, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, SlugField, StatsCard, SwitchInput, TabContent, TabTrigger, TableWrapper, TabsWrapper, TagChoiceInput, TagInput, Thumbnail, TooltipWrapper, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, cn, generateSlug, generateSlug2 as generateSlugCompact, getApiParams, useBaseSearch, useIsMobile, useMediaQuery, useScrollDetection, useSearch };
+export { AccordionSection, ActionDropdown, ActionTooltip, ApiPagination, ButtonTooltip, CalendarDayDetail, CalendarWithDetail, CardWrapper, CheckboxDropdown, CheckboxInput, ClientSubmitButton, CollapsibleCard, CollapsibleSection, CollapsibleWrapper, ComboboxInput, CompactInput, CompactNumberInput, CompactSelect, CompactSlugField, CompactTagChoice, CompactTextarea, ConfirmDialog, ConfirmSheet, Container, CopyButton, CopyCodeBlock, CopyText, CustomPagination, DataCard, DataTable, DateInput, DateRangeFilter, DateRangeInput, DeleteConfirmDialog, DialogWrapper, DisplayHeading, DraggableCard, DropdownWrapper, DynamicTabs, ErrorState, ErrorStateInline, EventCalendar, FacebookIcon, FaqAccordion, FeatureItem, Field13 as Field, FormDialog, FormErrorSummary, FormInput, FormSheet, FormTextarea, GoogleIcon, IconItemMedia, IconTooltip, InfoAlert, InfoRow, InfoTooltip, InstagramIcon, LoadingCard, ModeToggle, PaginationInfo, PhoneInput, Pill, PillAvatar, PillAvatarGroup, PillButton, PillDelta, PillIcon, PillIndicator, PillStatus, RadioDropdown, RadioInput, ResponsiveSplitLayout, search_exports as Search, SearchProvider, Section, SelectDropdown, SelectInput, SheetWrapper, SimpleTable, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, SlugField, StatsCard, SwitchInput, TabContent, TabTrigger, TableWrapper, TabsWrapper, TagChoiceInput, TagInput, Thumbnail, TooltipWrapper, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, cn, generateSlug, generateSlug2 as generateSlugCompact, getApiParams, useBaseSearch, useIsMobile, useMediaQuery, useScrollDetection, useSearch };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map