@optilogic/core 1.0.0-beta.0

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "../utils/cn";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export interface DropdownMenuSubTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+  inset?: boolean;
+}
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  DropdownMenuSubTriggerProps
+>(({ 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-accent",
+      "data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+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-border bg-popover p-1 text-popover-foreground 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 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-border bg-popover p-1 text-popover-foreground 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;
+
+export interface DropdownMenuItemProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+  inset?: boolean;
+  destructive?: boolean;
+}
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemProps
+>(({ className, inset, destructive, ...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-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      destructive && "text-destructive focus:text-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+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-accent focus:text-accent-foreground",
+      "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-accent focus:text-accent-foreground",
+      "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;
+
+export interface DropdownMenuLabelProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+  inset?: boolean;
+}
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  DropdownMenuLabelProps
+>(({ 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-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export interface DropdownMenuShortcutProps
+  extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: DropdownMenuShortcutProps) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/components/icon-button.tsx

@@ -0,0 +1,157 @@
+/**
+ * IconButton Component
+ *
+ * A consistent icon button primitive for toolbars and actions.
+ * Features:
+ * - Multiple size variants
+ * - Multiple style variants
+ * - Consistent hover states
+ * - Theme-aware styling
+ * - Optional active state
+ */
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+const iconButtonVariants = cva(
+  // Base styles
+  [
+    "inline-flex items-center justify-center",
+    "rounded-md",
+    "transition-colors duration-150",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        /**
+         * Default - subtle background with accent on hover
+         */
+        default: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+          "border border-transparent",
+        ],
+        /**
+         * Ghost - no background, accent on hover
+         */
+        ghost: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+        ],
+        /**
+         * Outline - border with accent on hover
+         */
+        outline: [
+          "bg-transparent text-muted-foreground",
+          "border border-border",
+          "hover:bg-accent hover:text-accent-foreground hover:border-accent",
+        ],
+        /**
+         * Filled - accent background
+         */
+        filled: [
+          "bg-accent text-accent-foreground",
+          "hover:bg-accent/90 hover:shadow-sm",
+        ],
+        /**
+         * Muted - muted background with accent on hover
+         */
+        muted: [
+          "bg-muted text-muted-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+        ],
+      },
+      size: {
+        /**
+         * Small - 32px (8 × 4)
+         */
+        sm: "h-8 w-8 [&_svg]:h-4 [&_svg]:w-4",
+        /**
+         * Default - 36px (9 × 4)
+         */
+        default: "h-9 w-9 [&_svg]:h-4.5 [&_svg]:w-4.5",
+        /**
+         * Large - 40px (10 × 4)
+         */
+        lg: "h-10 w-10 [&_svg]:h-5 [&_svg]:w-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof iconButtonVariants> {
+  /**
+   * Whether the button is in an active/selected state
+   */
+  isActive?: boolean;
+  /**
+   * Icon element to display (typically from lucide-react)
+   */
+  icon?: React.ReactNode;
+  /**
+   * Accessibility label (required if no children)
+   */
+  "aria-label": string;
+}
+
+/**
+ * IconButton component
+ *
+ * A versatile icon button for toolbars and action buttons.
+ * Uses consistent hover states across all themes.
+ *
+ * @example
+ * <IconButton
+ *   icon={<RefreshCw className="w-4 h-4" />}
+ *   aria-label="Refresh"
+ *   onClick={handleRefresh}
+ * />
+ *
+ * @example With active state
+ * <IconButton
+ *   icon={<Grid className="w-4 h-4" />}
+ *   aria-label="Grid view"
+ *   isActive={viewMode === 'grid'}
+ *   onClick={() => setViewMode('grid')}
+ * />
+ */
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    { className, variant, size, isActive = false, icon, children, ...props },
+    ref
+  ) => {
+    return (
+      <button
+        className={cn(
+          iconButtonVariants({ variant, size }),
+          // Active state overrides
+          isActive && [
+            "bg-accent text-accent-foreground",
+            // Add subtle shadow for visual feedback
+            variant !== "filled" && "shadow-sm",
+          ],
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {icon || children}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton, iconButtonVariants };

package/src/components/input.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+/**
+ * Input Component
+ *
+ * A styled text input with consistent theming.
+ * Supports all native input attributes.
+ *
+ * @example
+ * <Input placeholder="Enter your name" />
+ *
+ * @example
+ * <Input type="email" placeholder="email@example.com" />
+ *
+ * @example
+ * <Input disabled value="Disabled input" />
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/label.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+    VariantProps<typeof labelVariants> {}
+
+/**
+ * Label Component
+ *
+ * A form label component with consistent styling.
+ * Automatically associates with form controls via htmlFor.
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ */
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label, labelVariants };

package/src/components/loading-spinner.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+const loadingSpinnerVariants = cva("rounded-full animate-spin border-current", {
+  variants: {
+    /**
+     * Size of the spinner
+     */
+    size: {
+      sm: "w-4 h-4 border-2",
+      default: "w-8 h-8 border-2",
+      lg: "w-12 h-12 border-[3px]",
+      xl: "w-16 h-16 border-4",
+    },
+    /**
+     * Visual variant
+     */
+    variant: {
+      /** Primary color spinner (default) */
+      default: "border-primary/20 border-t-primary",
+      /** Accent color spinner */
+      accent: "border-accent/20 border-t-accent",
+      /** Muted/subtle spinner */
+      muted: "border-muted-foreground/20 border-t-muted-foreground",
+      /** Inherits current text color */
+      inherit: "border-current/20 border-t-current",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+});
+
+export interface LoadingSpinnerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof loadingSpinnerVariants> {
+  /**
+   * Optional label shown below the spinner
+   */
+  label?: string;
+  /**
+   * Show animated dots after the label
+   */
+  showDots?: boolean;
+}
+
+/**
+ * LoadingSpinner Component
+ *
+ * A circular loading spinner with size and color variants.
+ *
+ * @example
+ * // Basic spinner
+ * <LoadingSpinner />
+ *
+ * @example
+ * // Large spinner with label
+ * <LoadingSpinner size="lg" label="Loading..." />
+ *
+ * @example
+ * // Small accent spinner
+ * <LoadingSpinner size="sm" variant="accent" />
+ *
+ * @example
+ * // Inherit parent text color
+ * <LoadingSpinner variant="inherit" />
+ */
+const LoadingSpinner = React.forwardRef<HTMLDivElement, LoadingSpinnerProps>(
+  ({ className, size, variant, label, showDots = false, ...props }, ref) => {
+    const [dots, setDots] = React.useState("");
+
+    // Animated dots effect
+    React.useEffect(() => {
+      if (!showDots || !label) return;
+
+      const interval = setInterval(() => {
+        setDots((prev) => (prev.length >= 3 ? "" : prev + "."));
+      }, 500);
+
+      return () => clearInterval(interval);
+    }, [showDots, label]);
+
+    if (label) {
+      return (
+        <div
+          ref={ref}
+          className={cn("flex flex-col items-center gap-3", className)}
+          {...props}
+        >
+          <div className={loadingSpinnerVariants({ size, variant })} />
+          <p className="text-sm text-muted-foreground">
+            {label}
+            {showDots && <span className="inline-block w-4">{dots}</span>}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(loadingSpinnerVariants({ size, variant }), className)}
+        {...props}
+      />
+    );
+  }
+);
+LoadingSpinner.displayName = "LoadingSpinner";
+
+export { LoadingSpinner, loadingSpinnerVariants };