@optilogic/core 1.0.0-beta.0

package/src/components/theme-picker.tsx

@@ -0,0 +1,245 @@
+/**
+ * ThemePicker Component
+ *
+ * A polished theme selection component built with library primitives.
+ * Features:
+ * - Visual theme swatches showing color palette preview
+ * - Popover-based selection dropdown
+ * - Current theme indicator
+ * - Keyboard accessible
+ * - Smooth theme transitions
+ */
+
+import * as React from "react";
+import { Palette, Check } from "lucide-react";
+import { cn } from "../utils/cn";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { IconButton } from "./icon-button";
+import { Button } from "./button";
+import { Tooltip } from "./tooltip";
+import { ALL_THEMES, applyTheme, type Theme } from "../theme";
+
+export interface ThemePickerProps {
+  /** Currently selected theme (controlled) */
+  value?: Theme;
+  /** Callback when theme changes */
+  onValueChange?: (theme: Theme) => void;
+  /** Available themes to choose from */
+  themes?: Theme[];
+  /** Trigger style variant */
+  triggerVariant?: "icon" | "button";
+  /** Size of the trigger */
+  triggerSize?: "sm" | "default" | "lg";
+  /** Whether to apply the theme to the DOM when selected */
+  applyOnSelect?: boolean;
+  /** Additional class name for the trigger */
+  className?: string;
+  /** Alignment of the popover */
+  align?: "start" | "center" | "end";
+  /** Side of the popover */
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+/**
+ * Theme swatch component showing a preview of theme colors
+ */
+interface ThemeSwatchProps {
+  theme: Theme;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+function ThemeSwatch({ theme, isSelected, onClick }: ThemeSwatchProps) {
+  return (
+    <Tooltip
+      content={
+        <div className="space-y-1">
+          <p className="font-medium">{theme.name}</p>
+          {theme.description && (
+            <p className="text-xs text-muted-foreground">{theme.description}</p>
+          )}
+        </div>
+      }
+      position="bottom"
+      delayDuration={300}
+    >
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          "relative flex flex-col items-center gap-1.5 p-2 rounded-lg transition-all",
+          "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isSelected && "bg-accent ring-2 ring-primary"
+        )}
+      >
+        <div
+          className="relative w-12 h-8 rounded-md overflow-hidden border border-border shadow-sm"
+          style={{ backgroundColor: theme.background }}
+        >
+          <div
+            className="absolute bottom-0 left-0 right-0 h-2"
+            style={{ backgroundColor: theme.primary }}
+          />
+          <div
+            className="absolute top-1 right-1 w-2 h-2 rounded-full"
+            style={{ backgroundColor: theme.accent }}
+          />
+          <div
+            className="absolute top-1 left-1 w-4 h-1 rounded-full"
+            style={{ backgroundColor: theme.foreground }}
+          />
+        </div>
+        
+        <span className="text-xs font-medium text-foreground truncate max-w-[60px]">
+          {theme.name.split(" ")[0]}
+        </span>
+        
+        {isSelected && (
+          <div className="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full flex items-center justify-center">
+            <Check className="w-2.5 h-2.5 text-primary-foreground" />
+          </div>
+        )}
+      </button>
+    </Tooltip>
+  );
+}
+
+/**
+ * ThemePicker Component
+ *
+ * A theme selection dropdown that displays available themes as visual swatches.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ThemePicker onValueChange={(theme) => console.log(theme)} />
+ * ```
+ *
+ * @example Controlled with custom themes
+ * ```tsx
+ * const [theme, setTheme] = useState(OPTILOGIC_LEGACY_THEME);
+ * <ThemePicker
+ *   value={theme}
+ *   onValueChange={setTheme}
+ *   themes={[OPTILOGIC_LEGACY_THEME, DARK_ELEGANT_THEME]}
+ * />
+ * ```
+ */
+export function ThemePicker({
+  value,
+  onValueChange,
+  themes = ALL_THEMES,
+  triggerVariant = "icon",
+  triggerSize = "default",
+  applyOnSelect = true,
+  className,
+  align = "end",
+  side = "bottom",
+}: ThemePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedTheme, setSelectedTheme] = React.useState<Theme | undefined>(
+    value || themes[0]
+  );
+
+  React.useEffect(() => {
+    if (value) {
+      setSelectedTheme(value);
+    }
+  }, [value]);
+
+  const handleThemeSelect = (theme: Theme) => {
+    setSelectedTheme(theme);
+    
+    if (applyOnSelect) {
+      applyTheme(theme);
+    }
+    
+    onValueChange?.(theme);
+    setOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) return;
+
+    const currentIndex = themes.findIndex((t) => t.id === selectedTheme?.id);
+    
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        const nextIndex = (currentIndex + 1) % themes.length;
+        handleThemeSelect(themes[nextIndex]);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        const prevIndex = currentIndex <= 0 ? themes.length - 1 : currentIndex - 1;
+        handleThemeSelect(themes[prevIndex]);
+        break;
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {triggerVariant === "icon" ? (
+          <IconButton
+            variant="ghost"
+            size={triggerSize}
+            aria-label="Select theme"
+            className={className}
+          >
+            <Palette className="w-4 h-4" />
+          </IconButton>
+        ) : (
+          <Button
+            variant="outline"
+            size={triggerSize === "lg" ? "default" : triggerSize}
+            className={cn("gap-2", className)}
+          >
+            <Palette className="w-4 h-4" />
+            <span>{selectedTheme?.name || "Theme"}</span>
+          </Button>
+        )}
+      </PopoverTrigger>
+      
+      <PopoverContent
+        align={align}
+        side={side}
+        className="w-auto p-3"
+        onKeyDown={handleKeyDown}
+      >
+        <div className="space-y-3">
+          <div className="px-1">
+            <h4 className="text-sm font-medium">Select Theme</h4>
+            <p className="text-xs text-muted-foreground">
+              Choose a color theme for the interface
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-4 gap-1">
+            {themes.map((theme) => (
+              <ThemeSwatch
+                key={theme.id}
+                theme={theme}
+                isSelected={selectedTheme?.id === theme.id}
+                onClick={() => handleThemeSelect(theme)}
+              />
+            ))}
+          </div>
+          
+          {selectedTheme && (
+            <div className="pt-2 border-t border-border">
+              <div className="flex items-center gap-2 px-1">
+                <div
+                  className="w-4 h-4 rounded-full border border-border"
+                  style={{ backgroundColor: selectedTheme.primary }}
+                />
+                <span className="text-sm font-medium">{selectedTheme.name}</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/toaster.tsx

@@ -0,0 +1,84 @@
+import { Toaster as Sonner } from "sonner";
+
+export interface ToasterProps {
+  /**
+   * Position of the toaster
+   * @default "top-right"
+   */
+  position?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+
+  /**
+   * Whether to expand toasts on hover
+   * @default false
+   */
+  expand?: boolean;
+
+  /**
+   * Whether to use rich colors
+   * @default true
+   */
+  richColors?: boolean;
+
+  /**
+   * Whether to show close button
+   * @default true
+   */
+  closeButton?: boolean;
+
+  /**
+   * Theme mode
+   * @default "system"
+   */
+  theme?: "light" | "dark" | "system";
+}
+
+/**
+ * Toaster component using Sonner
+ *
+ * Provides toast notifications throughout the app.
+ * Add this component once at the root of your app.
+ *
+ * Usage:
+ *   import { toast } from "sonner";
+ *   toast.success("Success!");
+ *   toast.error("Error!");
+ *   toast.info("Info!");
+ *   toast.warning("Warning!");
+ *
+ * @example
+ * // In your app root
+ * <Toaster />
+ *
+ * // Then anywhere in your app
+ * toast.success("Saved successfully!");
+ */
+export function Toaster({
+  position = "top-right",
+  expand = false,
+  richColors = true,
+  closeButton = true,
+  theme = "system",
+}: ToasterProps = {}) {
+  return (
+    <Sonner
+      position={position}
+      expand={expand}
+      richColors={richColors}
+      closeButton={closeButton}
+      theme={theme}
+      toastOptions={{
+        style: {
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          color: "hsl(var(--foreground))",
+        },
+      }}
+    />
+  );
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,199 @@
+/**
+ * Tooltip Component
+ *
+ * A compact, themeable tooltip built on Radix UI.
+ * Uses a portal to render at document body level, ensuring it's never clipped.
+ *
+ * Features:
+ * - Portal-based rendering (never clipped by containers)
+ * - Configurable delay duration
+ * - Automatic position flipping when near edges
+ * - Theme-aware styling
+ */
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../utils/cn";
+
+/**
+ * TooltipProvider - Wrap your app with this for shared tooltip delay behavior
+ */
+const TooltipProvider = TooltipPrimitive.Provider;
+
+/**
+ * TooltipRoot - The root component for controlled usage
+ */
+const TooltipRoot = TooltipPrimitive.Root;
+
+/**
+ * TooltipTrigger - The element that triggers the tooltip
+ */
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+/**
+ * TooltipPortal - Portals the content to document.body
+ */
+const TooltipPortal = TooltipPrimitive.Portal;
+
+/**
+ * TooltipContent - The styled tooltip content
+ */
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        // Base styles
+        "z-[99999] overflow-hidden",
+        "px-2.5 py-1.5 rounded-md",
+        // Colors
+        "bg-popover text-popover-foreground",
+        "border border-border",
+        // Typography
+        "text-xs font-medium",
+        // Shadow
+        "shadow-md",
+        // Animation
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+/**
+ * TooltipArrow - Optional arrow pointing to the trigger
+ */
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Arrow
+    ref={ref}
+    className={cn("fill-popover", className)}
+    {...props}
+  />
+));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+
+// ============================================================================
+// Simple Tooltip API (backwards compatible with existing usage)
+// ============================================================================
+
+export interface TooltipProps {
+  /**
+   * Tooltip content - can be string or ReactNode for rich content
+   */
+  content: React.ReactNode;
+
+  /**
+   * Element to wrap with tooltip
+   */
+  children: React.ReactElement;
+
+  /**
+   * Position of the tooltip relative to the trigger
+   * @default "top"
+   */
+  position?: "top" | "bottom" | "left" | "right";
+
+  /**
+   * Delay before showing tooltip (in milliseconds)
+   * @default 200
+   */
+  delayDuration?: number;
+
+  /**
+   * Offset from the trigger element (in pixels)
+   * @default 6
+   */
+  sideOffset?: number;
+
+  /**
+   * Maximum width of the tooltip
+   * @default 250
+   */
+  maxWidth?: number;
+
+  /**
+   * Whether the tooltip is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional class names for the tooltip content
+   */
+  className?: string;
+}
+
+/**
+ * Tooltip component
+ *
+ * Simple wrapper around Radix Tooltip for ease of use.
+ * Renders in a portal so it's never clipped by containers.
+ *
+ * @example
+ * <Tooltip content="Hello world">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content="Click to save" position="bottom" delayDuration={0}>
+ *   <button>Save</button>
+ * </Tooltip>
+ */
+function Tooltip({
+  content,
+  children,
+  position = "top",
+  delayDuration = 200,
+  sideOffset = 6,
+  maxWidth = 250,
+  disabled = false,
+  className,
+}: TooltipProps) {
+  // Don't render tooltip if no content or disabled
+  if (!content || disabled) {
+    return children;
+  }
+
+  return (
+    <TooltipPrimitive.Provider delayDuration={delayDuration}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipContent
+          side={position}
+          sideOffset={sideOffset}
+          className={className}
+          style={{ maxWidth: `${maxWidth}px` }}
+        >
+          {content}
+        </TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
+// Export primitives for advanced usage
+export {
+  Tooltip,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipArrow,
+};