@optilogic/core 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/index.js

@@ -861,18 +861,104 @@ var AlertDialogCancel = React33.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Card = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "rounded-xl border bg-card text-card-foreground shadow",
-        className
-      ),
-      ...props
+var cardVariants = cva(
+  "rounded-xl border bg-card text-card-foreground shadow",
+  {
+    variants: {
+      /**
+       * Card width size presets
+       */
+      size: {
+        auto: "",
+        sm: "w-64",
+        md: "w-80",
+        lg: "w-96",
+        xl: "w-[28rem]",
+        full: "w-full"
+      },
+      /**
+       * Hover effect styles
+       */
+      hover: {
+        none: "",
+        lift: "transition-all duration-200 hover:-translate-y-1 hover:shadow-lg",
+        glow: "transition-shadow duration-200 hover:shadow-lg hover:shadow-accent/20",
+        border: "transition-colors duration-200 hover:border-accent",
+        "border-success": "transition-colors duration-200 hover:border-success",
+        "border-warning": "transition-colors duration-200 hover:border-warning",
+        "border-destructive": "transition-colors duration-200 hover:border-destructive",
+        "border-muted": "transition-colors duration-200 hover:border-muted-foreground",
+        scale: "transition-transform duration-200 hover:scale-[1.02]"
+      },
+      /**
+       * Whether the card is interactive (clickable)
+       */
+      interactive: {
+        true: "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        false: ""
+      },
+      /**
+       * Card padding density
+       */
+      padding: {
+        none: "",
+        sm: "[&>*:not(img)]:p-3 [&>*:not(img)]:pt-3",
+        md: "",
+        lg: "[&>*:not(img)]:p-8 [&>*:not(img)]:pt-8"
+      }
+    },
+    defaultVariants: {
+      size: "auto",
+      hover: "none",
+      interactive: false,
+      padding: "md"
     }
-  )
+  }
+);
+var Card = React33.forwardRef(
+  ({
+    className,
+    size,
+    hover,
+    interactive,
+    padding,
+    asButton,
+    hoverBorderClass,
+    onClick,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const isInteractive = interactive || asButton || !!onClick;
+    const handleKeyDown = React33.useCallback(
+      (e) => {
+        if (isInteractive && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick?.(e);
+        }
+        onKeyDown?.(e);
+      },
+      [isInteractive, onClick, onKeyDown]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: isInteractive ? "button" : void 0,
+        tabIndex: isInteractive ? 0 : void 0,
+        className: cn(
+          cardVariants({ size, hover, interactive: isInteractive, padding }),
+          "group relative",
+          // Custom hover border color overrides variant if provided
+          hoverBorderClass && "transition-colors duration-200",
+          hoverBorderClass,
+          className
+        ),
+        onClick,
+        onKeyDown: handleKeyDown,
+        ...props
+      }
+    );
+  }
 );
 Card.displayName = "Card";
 var CardHeader = React33.forwardRef(
@@ -923,6 +1009,300 @@ var CardFooter = React33.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
+var cardImageVariants = cva("w-full object-cover", {
+  variants: {
+    /**
+     * Image aspect ratio
+     */
+    aspectRatio: {
+      auto: "",
+      square: "aspect-square",
+      video: "aspect-video",
+      wide: "aspect-[2/1]",
+      portrait: "aspect-[3/4]"
+    },
+    /**
+     * Image position in the card
+     */
+    position: {
+      top: "rounded-t-xl",
+      bottom: "rounded-b-xl",
+      fill: "rounded-xl"
+    }
+  },
+  defaultVariants: {
+    aspectRatio: "video",
+    position: "top"
+  }
+});
+var CardImage = React33.forwardRef(
+  ({ className, aspectRatio, position, fallback, alt, src, onError, ...props }, ref) => {
+    const [hasError, setHasError] = React33.useState(false);
+    const handleError = React33.useCallback(
+      (e) => {
+        setHasError(true);
+        onError?.(e);
+      },
+      [onError]
+    );
+    React33.useEffect(() => {
+      setHasError(false);
+    }, [src]);
+    if (hasError && fallback) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center bg-muted",
+            cardImageVariants({ aspectRatio, position }),
+            className
+          ),
+          children: fallback
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        src,
+        alt,
+        className: cn(cardImageVariants({ aspectRatio, position }), className),
+        onError: handleError,
+        ...props
+      }
+    );
+  }
+);
+CardImage.displayName = "CardImage";
+var cardActionsVariants = cva(
+  "absolute flex items-center gap-1 transition-opacity duration-200 z-10",
+  {
+    variants: {
+      /**
+       * When to show the actions
+       */
+      showOn: {
+        hover: "opacity-0 group-hover:opacity-100",
+        always: "opacity-100"
+      },
+      /**
+       * Position of the actions overlay
+       */
+      position: {
+        "top-right": "top-2 right-2",
+        "top-left": "top-2 left-2",
+        "bottom-right": "bottom-2 right-2",
+        "bottom-left": "bottom-2 left-2"
+      },
+      /**
+       * Visual style of the actions container
+       */
+      variant: {
+        /** Solid background with backdrop blur */
+        floating: "bg-background/90 backdrop-blur-sm rounded-md shadow-sm p-1",
+        /** No background, just spacing */
+        ghost: "p-1",
+        /** Muted bar background */
+        bar: "bg-muted/80 backdrop-blur-sm rounded-md p-1.5",
+        /** No background on container, icons get background on hover */
+        "icon-hover": "p-0 [&>button]:bg-transparent [&>button]:hover:bg-background/90 [&>button]:hover:shadow-sm [&>button]:transition-all"
+      }
+    },
+    defaultVariants: {
+      showOn: "hover",
+      position: "top-right",
+      variant: "floating"
+    }
+  }
+);
+var CardActions = React33.forwardRef(
+  ({ className, showOn, position, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardActionsVariants({ showOn, position, variant }), className),
+      onClick: (e) => e.stopPropagation(),
+      ...props
+    }
+  )
+);
+CardActions.displayName = "CardActions";
+var SelectableCard = React33.forwardRef(
+  ({
+    className,
+    selected: controlledSelected,
+    defaultSelected = false,
+    onSelectedChange,
+    showCheckbox = false,
+    checkboxPosition = "top-right",
+    disabled = false,
+    children,
+    onClick,
+    hover = "border",
+    ...props
+  }, ref) => {
+    const [uncontrolledSelected, setUncontrolledSelected] = React33.useState(defaultSelected);
+    const isControlled = controlledSelected !== void 0;
+    const isSelected = isControlled ? controlledSelected : uncontrolledSelected;
+    const handleClick = React33.useCallback(
+      (e) => {
+        if (disabled) return;
+        const newSelected = !isSelected;
+        if (!isControlled) {
+          setUncontrolledSelected(newSelected);
+        }
+        onSelectedChange?.(newSelected);
+        onClick?.(e);
+      },
+      [disabled, isSelected, isControlled, onSelectedChange, onClick]
+    );
+    const handleCheckboxChange = React33.useCallback(
+      (checked) => {
+        if (disabled) return;
+        const newSelected = checked === true;
+        if (!isControlled) {
+          setUncontrolledSelected(newSelected);
+        }
+        onSelectedChange?.(newSelected);
+      },
+      [disabled, isControlled, onSelectedChange]
+    );
+    const isInline = checkboxPosition === "inline-left";
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          // Selection styling
+          isSelected && "ring-2 ring-accent border-accent",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        interactive: !disabled,
+        hover: disabled ? "none" : hover,
+        onClick: handleClick,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        ...props,
+        children: [
+          showCheckbox && isInline && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3 px-4 py-3 border-b border-border/50",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: handleCheckboxChange,
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: isSelected ? "Selected" : "Click to select" })
+              ]
+            }
+          ),
+          showCheckbox && !isInline && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute z-10 p-1 bg-background/90 backdrop-blur-sm rounded-md",
+                checkboxPosition === "top-left" ? "top-2 left-2" : "top-2 right-2"
+              ),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  onCheckedChange: handleCheckboxChange,
+                  disabled
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectableCard.displayName = "SelectableCard";
+var cardGridVariants = cva("grid", {
+  variants: {
+    /**
+     * Number of columns
+     */
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 sm:grid-cols-2",
+      3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      auto: "grid-cols-[repeat(auto-fill,minmax(280px,1fr))]"
+    },
+    /**
+     * Gap between cards
+     */
+    gap: {
+      none: "gap-0",
+      sm: "gap-3",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    columns: "auto",
+    gap: "md"
+  }
+});
+var CardGrid = React33.forwardRef(
+  ({ className, columns, gap, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardGridVariants({ columns, gap }), className),
+      ...props
+    }
+  )
+);
+CardGrid.displayName = "CardGrid";
+var cardListVariants = cva("flex flex-col", {
+  variants: {
+    /**
+     * Gap between cards
+     */
+    gap: {
+      none: "gap-0",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6"
+    },
+    /**
+     * Whether to show dividers between cards
+     */
+    divided: {
+      true: "[&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:pb-4 [&>*:not(:last-child)]:rounded-b-none",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    gap: "md",
+    divided: false
+  }
+});
+var CardList = React33.forwardRef(
+  ({ className, gap, divided, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardListVariants({ gap, divided }), className),
+      ...props
+    }
+  )
+);
+CardList.displayName = "CardList";
 var Table = React33.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
@@ -5823,6 +6203,6 @@ function useContextMenu() {
   };
 }
 
-export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Button, CYBERPUNK_THEME, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CellEditor, Checkbox, Chip, ConfirmationModal, ContextMenu, CopyButton, DARK_ELEGANT_THEME, DataGrid, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FOREST_THEME, FUTURISTIC_THEME, FilterPopover, GREEN_THEME, HeaderCell, IconButton, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, Modal, ModalButton, NATURE_THEME, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, SCIFI_THEME, SUNSET_THEME, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
+export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Button, CYBERPUNK_THEME, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, ConfirmationModal, ContextMenu, CopyButton, DARK_ELEGANT_THEME, DataGrid, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FOREST_THEME, FUTURISTIC_THEME, FilterPopover, GREEN_THEME, HeaderCell, IconButton, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, Modal, ModalButton, NATURE_THEME, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, SCIFI_THEME, SUNSET_THEME, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map