@optilogic/core 1.0.0-beta.0

package/src/components/modal.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { X } from "lucide-react";
+
+import { cn } from "../utils/cn";
+import { Button, type ButtonProps } from "./button";
+
+export interface ModalProps {
+  /**
+   * Whether the modal is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when modal should close
+   */
+  onClose: () => void;
+
+  /**
+   * Modal title
+   */
+  title: string;
+
+  /**
+   * Modal content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Footer content (buttons, actions, etc.)
+   */
+  footer?: React.ReactNode;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Z-index for stacking modals (default: 50)
+   */
+  zIndex?: number;
+
+  /**
+   * Additional class names for modal content
+   */
+  className?: string;
+}
+
+/**
+ * Modal component
+ *
+ * Extensible modal base for dialogs, confirmations, and forms.
+ * Features:
+ * - Backdrop overlay
+ * - Escape key to close
+ * - Click outside to close
+ * - Customizable footer with action buttons
+ * - Multiple size variants
+ *
+ * @example
+ * <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm">
+ *   <p>Are you sure?</p>
+ *   <footer slot="footer">
+ *     <Button onClick={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
+ *   </footer>
+ * </Modal>
+ */
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = "md",
+  zIndex = 50,
+  className,
+}: ModalProps) {
+  React.useEffect(() => {
+    if (!isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+  };
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center p-4"
+      style={{ zIndex }}
+      onClick={onClose}
+    >
+      <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+
+      <div
+        className={cn(
+          "relative w-full",
+          "bg-card border border-border rounded-lg shadow-lg",
+          "flex flex-col",
+          "max-h-[90vh]",
+          sizeClasses[size]
+        )}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-border flex-shrink-0">
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+          <Button
+            onClick={onClose}
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            aria-label="Close modal"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className={cn("flex-1 overflow-y-auto p-4", className)}>
+          {children}
+        </div>
+
+        {footer && (
+          <div className="flex items-center justify-end gap-2 p-4 border-t border-border flex-shrink-0">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ModalButton component
+ * @deprecated Use Button component from @optilogic/core instead
+ *
+ * Wrapper around Button for backward compatibility
+ */
+export interface ModalButtonProps {
+  /**
+   * Button label
+   */
+  label: string;
+
+  /**
+   * Click handler
+   */
+  onClick: () => void;
+
+  /**
+   * Button variant
+   */
+  variant?: "default" | "primary" | "destructive";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional class names
+   */
+  className?: string;
+}
+
+export function ModalButton({
+  label,
+  onClick,
+  variant = "default",
+  disabled = false,
+  className,
+}: ModalButtonProps) {
+  return (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      variant={variant}
+      className={className}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/popover.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "../utils/cn";
+
+/**
+ * Popover - Root component for popover behavior
+ */
+const Popover = PopoverPrimitive.Root;
+
+/**
+ * PopoverTrigger - Element that triggers the popover
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/**
+ * PopoverAnchor - Custom anchor element for positioning
+ */
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export interface PopoverContentProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}
+
+/**
+ * PopoverContent - The popover content panel
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Popover content here</p>
+ *   </PopoverContent>
+ * </Popover>
+ */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        // Animation
+        "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}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/components/progress.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "../utils/cn";
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {}
+
+/**
+ * Progress Component
+ *
+ * A progress bar showing completion percentage.
+ * Use for loading states, file uploads, or task progress.
+ *
+ * @example
+ * <Progress value={50} />
+ *
+ * @example
+ * <Progress value={progress} className="w-[60%]" />
+ */
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };