@optilogic/core 1.2.2 → 1.2.3

package/src/components/multi-select.tsx

@@ -0,0 +1,375 @@
+import * as React from "react";
+import { ChevronDown, X } from "lucide-react";
+
+import { cn } from "../utils/cn";
+import { Checkbox } from "./checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import type { AutocompleteOption } from "./autocomplete";
+
+export interface MultiSelectProps {
+  /** Array of options to display */
+  options: AutocompleteOption[];
+  /** Currently selected values */
+  value?: string[];
+  /** Callback when selection changes */
+  onChange?: (values: string[]) => void;
+  /** Placeholder text when no selection */
+  placeholder?: string;
+  /** Placeholder for the search input */
+  searchPlaceholder?: string;
+  /** Text to show when no options match the search */
+  emptyText?: string;
+  /** Whether the multi-select is disabled */
+  disabled?: boolean;
+  /** Additional class name for the trigger */
+  className?: string;
+  /** Whether to show the clear-all button */
+  clearable?: boolean;
+  /** Max number of pills to display before showing "+N more" */
+  maxDisplayItems?: number;
+  /** Whether to show a "Select All" toggle */
+  showSelectAll?: boolean;
+  /** Custom label for the select all option */
+  selectAllLabel?: string;
+}
+
+/**
+ * MultiSelect component - a multi-select dropdown with checkboxes
+ *
+ * Features:
+ * - Checkbox selection for multiple options
+ * - Search filtering
+ * - Grouped options support
+ * - Descriptions per option
+ * - Tag pills with individual removal
+ * - "Select All" toggle
+ *
+ * @example
+ * <MultiSelect
+ *   options={[
+ *     { value: 'react', label: 'React', description: 'A JS library' },
+ *     { value: 'vue', label: 'Vue', group: 'Frameworks' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select frameworks..."
+ *   showSelectAll
+ * />
+ */
+export function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select items...",
+  searchPlaceholder = "Search...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = true,
+  maxDisplayItems = 3,
+  showSelectAll = false,
+  selectAllLabel = "Select all",
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const safeOptions = options ?? [];
+  const safeValue = value ?? [];
+  const selectedSet = React.useMemo(() => new Set(safeValue), [safeValue]);
+
+  const filteredOptions = React.useMemo(() => {
+    if (!search.trim()) return safeOptions;
+    const searchLower = search.toLowerCase();
+    return safeOptions.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(searchLower) ||
+        opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [safeOptions, search]);
+
+  const groupedOptions = React.useMemo(() => {
+    const groups: Record<string, AutocompleteOption[]> = {};
+    const ungrouped: AutocompleteOption[] = [];
+
+    filteredOptions.forEach((opt) => {
+      if (opt.group) {
+        if (!groups[opt.group]) groups[opt.group] = [];
+        groups[opt.group]!.push(opt);
+      } else {
+        ungrouped.push(opt);
+      }
+    });
+
+    return { groups, ungrouped };
+  }, [filteredOptions]);
+
+  const hasGroups = Object.keys(groupedOptions.groups).length > 0;
+
+  // Select All logic
+  const selectableFiltered = React.useMemo(
+    () => filteredOptions.filter((opt) => !opt.disabled),
+    [filteredOptions]
+  );
+
+  const allFilteredSelected = React.useMemo(
+    () =>
+      selectableFiltered.length > 0 &&
+      selectableFiltered.every((opt) => selectedSet.has(opt.value)),
+    [selectableFiltered, selectedSet]
+  );
+
+  const someFilteredSelected = React.useMemo(
+    () =>
+      !allFilteredSelected &&
+      selectableFiltered.some((opt) => selectedSet.has(opt.value)),
+    [selectableFiltered, selectedSet, allFilteredSelected]
+  );
+
+  const handleToggle = React.useCallback(
+    (optionValue: string) => {
+      const next = selectedSet.has(optionValue)
+        ? safeValue.filter((v) => v !== optionValue)
+        : [...safeValue, optionValue];
+      onChange?.(next);
+    },
+    [onChange, safeValue, selectedSet]
+  );
+
+  const handleRemove = React.useCallback(
+    (optionValue: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(safeValue.filter((v) => v !== optionValue));
+    },
+    [onChange, safeValue]
+  );
+
+  const handleClearAll = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+
+  const handleSelectAll = React.useCallback(() => {
+    if (allFilteredSelected) {
+      // Deselect all filtered
+      const filteredValues = new Set(selectableFiltered.map((o) => o.value));
+      onChange?.(safeValue.filter((v) => !filteredValues.has(v)));
+    } else {
+      // Select all filtered (merge with existing selections)
+      const existing = new Set(safeValue);
+      const next = [...safeValue];
+      for (const opt of selectableFiltered) {
+        if (!existing.has(opt.value)) {
+          next.push(opt.value);
+        }
+      }
+      onChange?.(next);
+    }
+  }, [allFilteredSelected, selectableFiltered, safeValue, onChange]);
+
+  React.useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(timeout);
+    } else {
+      setSearch("");
+    }
+  }, [open]);
+
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
+
+  const selectedLabels = React.useMemo(
+    () =>
+      safeValue
+        .map((v) => safeOptions.find((o) => o.value === v)?.label ?? v)
+        .slice(0, maxDisplayItems),
+    [safeValue, safeOptions, maxDisplayItems]
+  );
+
+  const overflow = safeValue.length - maxDisplayItems;
+
+  const isSearching = search.trim().length > 0;
+
+  const renderOption = (option: AutocompleteOption) => (
+    <button
+      key={option.value}
+      type="button"
+      disabled={option.disabled}
+      onClick={() => handleToggle(option.value)}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50"
+      )}
+    >
+      <Checkbox
+        checked={selectedSet.has(option.value)}
+        tabIndex={-1}
+        className="mt-0.5 pointer-events-none"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="truncate">{option.label}</div>
+        {option.description && (
+          <div className="text-xs text-muted-foreground truncate">
+            {option.description}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          disabled={disabled}
+          className={cn(
+            "flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm ring-offset-background",
+            "hover:border-input-hover",
+            "focus:outline-none focus:ring-1 focus:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input",
+            className
+          )}
+        >
+          <div className="flex flex-1 flex-wrap gap-1 items-center min-w-0">
+            {safeValue.length === 0 ? (
+              <span className="text-muted-foreground">{placeholder}</span>
+            ) : (
+              <>
+                {selectedLabels.map((label, i) => (
+                  <span
+                    key={safeValue[i]}
+                    className="inline-flex items-center gap-0.5 rounded-sm bg-accent px-1.5 py-0.5 text-xs font-medium text-accent-foreground"
+                  >
+                    <span className="truncate max-w-[100px]">{label}</span>
+                    <span
+                      role="button"
+                      tabIndex={-1}
+                      onClick={(e) => handleRemove(safeValue[i]!, e)}
+                      className="rounded-sm hover:bg-foreground/10 p-0.5"
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
+                  </span>
+                ))}
+                {overflow > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    +{overflow}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {clearable && safeValue.length > 0 && (
+              <span
+                role="button"
+                tabIndex={-1}
+                onClick={handleClearAll}
+                className="rounded-sm hover:bg-muted p-0.5"
+              >
+                <X className="h-3.5 w-3.5 text-muted-foreground" />
+              </span>
+            )}
+            <ChevronDown className="h-4 w-4 opacity-50" />
+          </div>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[--radix-popover-trigger-width] p-0"
+        align="start"
+        sideOffset={4}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center border-b border-border px-3">
+          <input
+            ref={inputRef}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
+          />
+          {search && (
+            <button
+              type="button"
+              onClick={() => setSearch("")}
+              className="p-1 hover:bg-muted rounded-sm"
+            >
+              <X className="h-3.5 w-3.5 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+
+        {/* Options list */}
+        <div className="max-h-[300px] overflow-y-auto p-1">
+          {/* Select All */}
+          {showSelectAll && selectableFiltered.length > 0 && (
+            <>
+              <button
+                type="button"
+                onClick={handleSelectAll}
+                className={cn(
+                  "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+                  "hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <Checkbox
+                  checked={
+                    allFilteredSelected
+                      ? true
+                      : someFilteredSelected
+                        ? "indeterminate"
+                        : false
+                  }
+                  tabIndex={-1}
+                  className="pointer-events-none"
+                />
+                <span className="font-medium">
+                  {isSearching
+                    ? `${selectAllLabel} (filtered)`
+                    : selectAllLabel}
+                </span>
+              </button>
+              <div className="-mx-1 my-1 h-px bg-border" />
+            </>
+          )}
+
+          {filteredOptions.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : hasGroups ? (
+            <>
+              {groupedOptions.ungrouped.map(renderOption)}
+              {Object.entries(groupedOptions.groups).map(([group, opts]) => (
+                <div key={group}>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    {group}
+                  </div>
+                  {opts.map(renderOption)}
+                </div>
+              ))}
+            </>
+          ) : (
+            filteredOptions.map(renderOption)
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+MultiSelect.displayName = "MultiSelect";
+
+export default MultiSelect;

package/src/components/select.tsx

@@ -119,12 +119,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-start rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center mt-0.5">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
@@ -134,6 +134,21 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
+export interface SelectItemDescriptionProps
+  extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const SelectItemDescription = React.forwardRef<
+  HTMLSpanElement,
+  SelectItemDescriptionProps
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={cn("text-xs text-muted-foreground", className)}
+    {...props}
+  />
+));
+SelectItemDescription.displayName = "SelectItemDescription";
+
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
@@ -154,6 +169,7 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
+  SelectItemDescription,
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,

package/src/components/tabs.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../utils/cn";
 
@@ -20,56 +21,113 @@ import { cn } from "../utils/cn";
  */
 const Tabs = TabsPrimitive.Root;
 
+const tabsListVariants = cva(
+  "inline-flex h-10 items-center justify-start bg-transparent",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border",
+        pill: "gap-1 rounded-lg bg-muted p-1",
+        unstyled: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const tabsTriggerVariants = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap",
+    "px-4 py-2.5 text-sm font-medium",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "-mb-px",
+          "border-transparent text-muted-foreground",
+          "hover:text-foreground hover:border-muted-foreground/50",
+          "data-[state=active]:border-foreground data-[state=active]:text-foreground",
+        ],
+        pill: [
+          "rounded-md",
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        ],
+        unstyled: [
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:text-foreground",
+        ],
+      },
+      indicatorSize: {
+        sm: "border-b",
+        default: "border-b-2",
+        lg: "border-b-[3px]",
+      },
+    },
+    compoundVariants: [
+      { variant: "pill", indicatorSize: "sm", className: "border-b-0" },
+      { variant: "pill", indicatorSize: "default", className: "border-b-0" },
+      { variant: "pill", indicatorSize: "lg", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "sm", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "default", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "lg", className: "border-b-0" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      indicatorSize: "default",
+    },
+  }
+);
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
 /**
  * TabsList
  *
  * Container for tab triggers. Provides the tab header bar.
+ * Supports variants: default, pill, unstyled
  */
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+  TabsListProps
+>(({ className, variant, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-start",
-      "border-b border-border",
-      "bg-transparent",
-      className
-    )}
+    className={cn(tabsListVariants({ variant }), className)}
     {...props}
   />
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
 /**
  * TabsTrigger
  *
  * Individual tab button that activates its associated content.
+ * Supports variants: default, pill, unstyled
+ * Supports indicatorSize: sm, default, lg (only applies to default variant)
  */
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+  TabsTriggerProps
+>(({ className, variant, indicatorSize, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      // Base styles
-      "inline-flex items-center justify-center whitespace-nowrap",
-      "px-4 py-2.5 text-sm font-medium",
-      "transition-colors",
-      // Border-bottom indicator style
-      "border-b-2 -mb-px",
-      // Default state
-      "border-transparent text-muted-foreground",
-      // Hover state
-      "hover:text-foreground hover:border-muted-foreground/50",
-      // Active/selected state
-      "data-[state=active]:border-foreground data-[state=active]:text-foreground",
-      // Focus styles
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      // Disabled styles
-      "disabled:pointer-events-none disabled:opacity-50",
+      tabsTriggerVariants({ variant, indicatorSize }),
       className
     )}
     {...props}
@@ -90,7 +148,6 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2",
-      // Focus styles
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
@@ -99,4 +156,11 @@ const TabsContent = React.forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  tabsListVariants,
+  tabsTriggerVariants,
+};

package/src/index.ts

@@ -22,10 +22,12 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
+  SelectItemDescription,
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
   type SelectTriggerProps,
+  type SelectItemDescriptionProps,
 } from "./components/select";
 
 export {
@@ -33,6 +35,10 @@ export {
   TabsList,
   TabsTrigger,
   TabsContent,
+  tabsListVariants,
+  tabsTriggerVariants,
+  type TabsListProps,
+  type TabsTriggerProps,
 } from "./components/tabs";
 
 export {
@@ -287,6 +293,16 @@ export {
   type AutocompleteOption,
 } from "./components/autocomplete";
 
+export {
+  MultiSelect,
+  type MultiSelectProps,
+} from "./components/multi-select";
+
+export {
+  Combobox,
+  type ComboboxProps,
+} from "./components/combobox";
+
 // Utility components
 export {
   IconButton,