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

package/README.md

@@ -13,17 +13,20 @@ npm install @optilogic/core
 Install the required peer dependencies:
 
 ```bash
-# Required
 npm install react react-dom tailwindcss
+```
+
+Optional peer dependencies for specific components:
 
-# Radix UI (install based on components you use)
-npm install @radix-ui/react-tooltip @radix-ui/react-select @radix-ui/react-dropdown-menu
+```bash
+# DataGrid virtualization
+npm install @tanstack/react-virtual
 
-# Icons
-npm install lucide-react
+# DatePicker
+npm install date-fns react-day-picker
 
-# Optional (for specific components)
-npm install @tanstack/react-virtual sonner
+# Toaster notifications
+npm install sonner
 ```
 
 ## Setup

package/dist/index.cjs

@@ -894,18 +894,104 @@ var AlertDialogCancel = React33__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
-var Card = React33__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "rounded-xl border bg-card text-card-foreground shadow",
-        className
-      ),
-      ...props
+var cardVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({
+    className,
+    size,
+    hover,
+    interactive,
+    padding,
+    asButton,
+    hoverBorderClass,
+    onClick,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const isInteractive = interactive || asButton || !!onClick;
+    const handleKeyDown = React33__namespace.useCallback(
+      (e) => {
+        if (isInteractive && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick?.(e);
+        }
+        onKeyDown?.(e);
+      },
+      [isInteractive, onClick, onKeyDown]
+    );
+    return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
@@ -956,6 +1042,300 @@ var CardFooter = React33__namespace.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
+var cardImageVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, aspectRatio, position, fallback, alt, src, onError, ...props }, ref) => {
+    const [hasError, setHasError] = React33__namespace.useState(false);
+    const handleError = React33__namespace.useCallback(
+      (e) => {
+        setHasError(true);
+        onError?.(e);
+      },
+      [onError]
+    );
+    React33__namespace.useEffect(() => {
+      setHasError(false);
+    }, [src]);
+    if (hasError && fallback) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center bg-muted",
+            cardImageVariants({ aspectRatio, position }),
+            className
+          ),
+          children: fallback
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ref,
+        src,
+        alt,
+        className: cn(cardImageVariants({ aspectRatio, position }), className),
+        onError: handleError,
+        ...props
+      }
+    );
+  }
+);
+CardImage.displayName = "CardImage";
+var cardActionsVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, showOn, position, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardActionsVariants({ showOn, position, variant }), className),
+      onClick: (e) => e.stopPropagation(),
+      ...props
+    }
+  )
+);
+CardActions.displayName = "CardActions";
+var SelectableCard = React33__namespace.forwardRef(
+  ({
+    className,
+    selected: controlledSelected,
+    defaultSelected = false,
+    onSelectedChange,
+    showCheckbox = false,
+    checkboxPosition = "top-right",
+    disabled = false,
+    children,
+    onClick,
+    hover = "border",
+    ...props
+  }, ref) => {
+    const [uncontrolledSelected, setUncontrolledSelected] = React33__namespace.useState(defaultSelected);
+    const isControlled = controlledSelected !== void 0;
+    const isSelected = isControlled ? controlledSelected : uncontrolledSelected;
+    const handleClick = React33__namespace.useCallback(
+      (e) => {
+        if (disabled) return;
+        const newSelected = !isSelected;
+        if (!isControlled) {
+          setUncontrolledSelected(newSelected);
+        }
+        onSelectedChange?.(newSelected);
+        onClick?.(e);
+      },
+      [disabled, isSelected, isControlled, onSelectedChange, onClick]
+    );
+    const handleCheckboxChange = React33__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3 px-4 py-3 border-b border-border/50",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: handleCheckboxChange,
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: isSelected ? "Selected" : "Click to select" })
+              ]
+            }
+          ),
+          showCheckbox && !isInline && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  onCheckedChange: handleCheckboxChange,
+                  disabled
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectableCard.displayName = "SelectableCard";
+var cardGridVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, columns, gap, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardGridVariants({ columns, gap }), className),
+      ...props
+    }
+  )
+);
+CardGrid.displayName = "CardGrid";
+var cardListVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, gap, divided, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardListVariants({ gap, divided }), className),
+      ...props
+    }
+  )
+);
+CardList.displayName = "CardList";
 var Table = React33__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
@@ -5878,10 +6258,14 @@ exports.Button = Button;
 exports.CYBERPUNK_THEME = CYBERPUNK_THEME;
 exports.Calendar = Calendar;
 exports.Card = Card;
+exports.CardActions = CardActions;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
+exports.CardGrid = CardGrid;
 exports.CardHeader = CardHeader;
+exports.CardImage = CardImage;
+exports.CardList = CardList;
 exports.CardTitle = CardTitle;
 exports.CellEditor = CellEditor;
 exports.Checkbox = Checkbox;
@@ -5943,6 +6327,7 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.SelectableCard = SelectableCard;
 exports.Separator = Separator;
 exports.Skeleton = Skeleton;
 exports.Switch = Switch;
@@ -5978,6 +6363,11 @@ exports.applyTheme = applyTheme;
 exports.areThemesEqual = areThemesEqual;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
+exports.cardActionsVariants = cardActionsVariants;
+exports.cardGridVariants = cardGridVariants;
+exports.cardImageVariants = cardImageVariants;
+exports.cardListVariants = cardListVariants;
+exports.cardVariants = cardVariants;
 exports.cloneTheme = cloneTheme;
 exports.cn = cn;
 exports.exportTheme = exportTheme;