@optilogic/core 1.0.0-beta.0

package/src/components/accordion.tsx

@@ -0,0 +1,187 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "../utils/cn";
+
+/**
+ * Accordion variant styles using class-variance-authority.
+ * Provides consistent accordion styling across the application.
+ */
+const accordionItemVariants = cva("", {
+  variants: {
+    variant: {
+      default: "border-b border-border",
+      bordered:
+        "border border-border rounded-lg mb-2 last:mb-0 overflow-hidden",
+      card: "bg-card border border-border rounded-lg mb-3 last:mb-0 shadow-sm overflow-hidden",
+      filled: "bg-muted/50 rounded-lg mb-2 last:mb-0 overflow-hidden",
+      ghost: "mb-1 last:mb-0",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const accordionTriggerVariants = cva(
+  // Base styles - no text decoration
+  [
+    "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+    "transition-all",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "[&[data-state=open]>svg]:rotate-180",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "hover:text-foreground/80",
+        bordered: "px-4 hover:bg-muted/50",
+        card: "px-4 hover:bg-muted/30",
+        filled: "px-4 hover:bg-muted",
+        ghost: "px-2 rounded-md hover:bg-muted/50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const accordionContentVariants = cva(
+  ["overflow-hidden text-sm", "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"],
+  {
+    variants: {
+      variant: {
+        default: "",
+        bordered: "",
+        card: "",
+        filled: "",
+        ghost: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const accordionContentInnerVariants = cva("pb-4 pt-0", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "px-4",
+      card: "px-4",
+      filled: "px-4",
+      ghost: "px-2",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+/**
+ * Accordion Root
+ *
+ * Container for accordion items. Can be single or multiple mode.
+ *
+ * @example
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+const Accordion = AccordionPrimitive.Root;
+
+export type AccordionVariant = "default" | "bordered" | "card" | "filled" | "ghost";
+
+export interface AccordionItemProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>,
+    VariantProps<typeof accordionItemVariants> {}
+
+/**
+ * AccordionItem
+ *
+ * Individual accordion section containing a trigger and content.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  AccordionItemProps
+>(({ className, variant, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn(accordionItemVariants({ variant }), className)}
+    data-variant={variant || "default"}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+export interface AccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>,
+    VariantProps<typeof accordionTriggerVariants> {}
+
+/**
+ * AccordionTrigger
+ *
+ * Button that toggles the accordion item open/closed.
+ * Includes animated chevron indicator.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  AccordionTriggerProps
+>(({ className, children, variant, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(accordionTriggerVariants({ variant }), className)}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+export interface AccordionContentProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>,
+    VariantProps<typeof accordionContentVariants> {}
+
+/**
+ * AccordionContent
+ *
+ * Animated content area that expands/collapses.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  AccordionContentProps
+>(({ className, children, variant, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(accordionContentVariants({ variant }))}
+    {...props}
+  >
+    <div className={cn(accordionContentInnerVariants({ variant }), className)}>
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionContentVariants,
+};

package/src/components/alert-dialog.tsx

@@ -0,0 +1,143 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "../utils/cn";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+export interface AlertDialogHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+export interface AlertDialogFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/autocomplete.tsx

@@ -0,0 +1,271 @@
+import * as React from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+
+import { cn } from "../utils/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface AutocompleteOption {
+  /** Unique value for the option */
+  value: string;
+  /** Display label for the option */
+  label: string;
+  /** Optional description shown below the label */
+  description?: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+  /** Optional group/category for the option */
+  group?: string;
+}
+
+export interface AutocompleteProps {
+  /** Array of options to display */
+  options: AutocompleteOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Callback when selection changes */
+  onChange?: (value: string | undefined) => 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 autocomplete is disabled */
+  disabled?: boolean;
+  /** Additional class name for the trigger */
+  className?: string;
+  /** Whether to allow clearing the selection */
+  clearable?: boolean;
+}
+
+/**
+ * Autocomplete component - a searchable dropdown/select
+ *
+ * Features:
+ * - Search filtering
+ * - Grouped options support
+ * - Clearable selection
+ * - Keyboard navigation
+ *
+ * @example
+ * <Autocomplete
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select a framework..."
+ * />
+ */
+export function Autocomplete({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = false,
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Find the selected option
+  const selectedOption = React.useMemo(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
+  );
+
+  // Filter options based on search
+  const filteredOptions = React.useMemo(() => {
+    if (!search.trim()) return options;
+    const searchLower = search.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(searchLower) ||
+        opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [options, search]);
+
+  // Group options if they have groups
+  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;
+
+  // Handle selection
+  const handleSelect = React.useCallback(
+    (optionValue: string) => {
+      onChange?.(optionValue);
+      setOpen(false);
+      setSearch("");
+    },
+    [onChange]
+  );
+
+  // Handle clear
+  const handleClear = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(undefined);
+      setSearch("");
+    },
+    [onChange]
+  );
+
+  // Focus input when popover opens
+  React.useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+      return () => clearTimeout(timeout);
+    } else {
+      setSearch("");
+    }
+  }, [open]);
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      setOpen(false);
+    }
+  }, []);
+
+  const renderOption = (option: AutocompleteOption) => (
+    <button
+      key={option.value}
+      type="button"
+      disabled={option.disabled}
+      onClick={() => handleSelect(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",
+        "focus:bg-accent focus:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50",
+        value === option.value && "bg-accent/50"
+      )}
+    >
+      <span className="flex h-4 w-4 items-center justify-center flex-shrink-0 mt-0.5">
+        {value === option.value && <Check className="h-4 w-4" />}
+      </span>
+      <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 h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+            "focus:outline-none focus:ring-1 focus:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            !selectedOption && "text-muted-foreground",
+            className
+          )}
+        >
+          <span className="truncate flex-1 text-left">
+            {selectedOption?.label || placeholder}
+          </span>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {clearable && selectedOption && (
+              <span
+                role="button"
+                tabIndex={-1}
+                onClick={handleClear}
+                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">
+          {filteredOptions.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : hasGroups ? (
+            <>
+              {/* Ungrouped options first */}
+              {groupedOptions.ungrouped.map(renderOption)}
+
+              {/* Grouped options */}
+              {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>
+  );
+}
+
+export default Autocomplete;

package/src/components/badge.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+/**
+ * Badge variant styles using class-variance-authority.
+ */
+const badgeVariants = cva(
+  "inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-success text-success-foreground shadow hover:bg-success/80",
+        warning:
+          "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80",
+        muted:
+          "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
+        accent:
+          "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * Badge Component
+ *
+ * A small status indicator with various semantic variants.
+ * Use for tags, labels, counts, or status indicators.
+ *
+ * @example
+ * <Badge>Default</Badge>
+ *
+ * @example
+ * <Badge variant="success">Active</Badge>
+ *
+ * @example
+ * <Badge variant="destructive">Error</Badge>
+ */
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };