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

package/dist/styles.css

@@ -94,3 +94,64 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* Thin scrollbar - apply per-element
+   * Uses theme variables for automatic theme matching:
+   * - Track: transparent (blends with background)
+   * - Thumb: muted-foreground with transparency
+   */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+  }
+
+  /* Global thin scrollbar - apply to html/body to style all descendants */
+  .scrollbar-thin-all,
+  .scrollbar-thin-all * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+
+  .scrollbar-thin-all ::-webkit-scrollbar,
+  .scrollbar-thin-all::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-thin-all ::-webkit-scrollbar-track,
+  .scrollbar-thin-all::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin-all ::-webkit-scrollbar-thumb,
+  .scrollbar-thin-all::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin-all ::-webkit-scrollbar-thumb:hover,
+  .scrollbar-thin-all::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -38,27 +38,27 @@
     "README.md"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
     "tailwind-merge": "^3.0.1"
   },
   "peerDependencies": {
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-alert-dialog": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.0",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.0",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.0",
     "@tanstack/react-virtual": "^3.10.0",
     "date-fns": "^3.0.0 || ^4.0.0",
-    "lucide-react": "^0.400.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-day-picker": "^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -66,42 +66,6 @@
     "tailwindcss": "^3.4.0"
   },
   "peerDependenciesMeta": {
-    "@radix-ui/react-accordion": {
-      "optional": true
-    },
-    "@radix-ui/react-alert-dialog": {
-      "optional": true
-    },
-    "@radix-ui/react-checkbox": {
-      "optional": true
-    },
-    "@radix-ui/react-dropdown-menu": {
-      "optional": true
-    },
-    "@radix-ui/react-label": {
-      "optional": true
-    },
-    "@radix-ui/react-popover": {
-      "optional": true
-    },
-    "@radix-ui/react-progress": {
-      "optional": true
-    },
-    "@radix-ui/react-select": {
-      "optional": true
-    },
-    "@radix-ui/react-separator": {
-      "optional": true
-    },
-    "@radix-ui/react-switch": {
-      "optional": true
-    },
-    "@radix-ui/react-tabs": {
-      "optional": true
-    },
-    "@radix-ui/react-tooltip": {
-      "optional": true
-    },
     "@tanstack/react-virtual": {
       "optional": true
     },
@@ -116,15 +80,15 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.20",
     "date-fns": "^4.1.0",
     "postcss": "^8.4.49",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-day-picker": "^9.13.0",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.16",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.19",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"
   },

package/src/components/board.tsx

@@ -0,0 +1,251 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+// =============================================================================
+// Board Variants
+// =============================================================================
+
+/**
+ * Board variant styles using class-variance-authority.
+ * Provides elevation (shadow), border, padding, radius, background, and hover options.
+ */
+const boardVariants = cva("text-card-foreground", {
+  variants: {
+    /**
+     * Elevation (shadow depth) - similar to MUI Paper
+     */
+    elevation: {
+      none: "",
+      sm: "shadow-sm",
+      md: "shadow",
+      lg: "shadow-lg",
+      xl: "shadow-xl",
+    },
+    /**
+     * Border style
+     */
+    border: {
+      none: "",
+      default: "border",
+      muted: "border border-muted",
+    },
+    /**
+     * Padding size
+     */
+    padding: {
+      none: "",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8",
+    },
+    /**
+     * Border radius
+     */
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    /**
+     * Background color
+     */
+    background: {
+      default: "bg-card",
+      muted: "bg-muted",
+      transparent: "bg-transparent",
+    },
+    /**
+     * Hover effect styles
+     */
+    hover: {
+      none: "",
+      border: "transition-colors duration-200 hover:border-accent",
+      elevate: "transition-shadow duration-200 hover:shadow-lg",
+      "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",
+    },
+  },
+  defaultVariants: {
+    elevation: "none",
+    border: "default",
+    padding: "none",
+    radius: "lg",
+    background: "default",
+    hover: "none",
+  },
+});
+
+// =============================================================================
+// Board Component
+// =============================================================================
+
+export interface BoardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof boardVariants> {
+  /**
+   * Custom CSS class for hover border color.
+   * Use Tailwind classes like "hover:border-blue-500" or custom CSS variables.
+   * This overrides the hover variant's border color if specified.
+   */
+  hoverBorderClass?: string;
+}
+
+/**
+ * Board - General-purpose container component with elevation support
+ *
+ * A flexible container similar to MUI's Paper component. Supports configurable
+ * elevation (shadows), borders, padding, border radius, background colors,
+ * and hover effects. Use with BoardHeader and BoardContent for structured layouts.
+ *
+ * @example
+ * // Simple container
+ * <Board elevation="md" padding="md">
+ *   <p>Content here</p>
+ * </Board>
+ *
+ * @example
+ * // With header and content
+ * <Board elevation="lg" border="default">
+ *   <BoardHeader>
+ *     <span className="font-semibold">Section Title</span>
+ *   </BoardHeader>
+ *   <BoardContent>
+ *     Main content goes here
+ *   </BoardContent>
+ * </Board>
+ *
+ * @example
+ * // Transparent background with hover effect
+ * <Board background="transparent" hover="border" border="muted">
+ *   <BoardContent>Hoverable content</BoardContent>
+ * </Board>
+ */
+const Board = React.forwardRef<HTMLDivElement, BoardProps>(
+  (
+    {
+      className,
+      elevation,
+      border,
+      padding,
+      radius,
+      background,
+      hover,
+      hoverBorderClass,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          boardVariants({
+            elevation,
+            border,
+            padding,
+            radius,
+            background,
+            hover,
+          }),
+          // Custom hover border color overrides variant if provided
+          hoverBorderClass && "transition-colors duration-200",
+          hoverBorderClass,
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Board.displayName = "Board";
+
+// =============================================================================
+// BoardHeader Component
+// =============================================================================
+
+export interface BoardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * BoardHeader - Header section with bottom separator
+ *
+ * Renders a header area with a bottom border divider. Accepts any children
+ * including text, icons, badges, or custom layouts.
+ *
+ * @example
+ * <Board>
+ *   <BoardHeader>
+ *     <span className="font-semibold">Title</span>
+ *   </BoardHeader>
+ *   <BoardContent>Content</BoardContent>
+ * </Board>
+ *
+ * @example
+ * // With custom layout
+ * <BoardHeader className="flex items-center justify-between">
+ *   <div className="flex items-center gap-2">
+ *     <FileIcon />
+ *     <span>Documents</span>
+ *   </div>
+ *   <Badge>12</Badge>
+ * </BoardHeader>
+ */
+const BoardHeader = React.forwardRef<HTMLDivElement, BoardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-4 border-b", className)}
+      {...props}
+    />
+  )
+);
+BoardHeader.displayName = "BoardHeader";
+
+// =============================================================================
+// BoardContent Component
+// =============================================================================
+
+export interface BoardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * BoardContent - Main content area with consistent padding
+ *
+ * Provides a padded container for the main content. Useful when using
+ * BoardHeader to maintain proper spacing.
+ *
+ * @example
+ * <Board>
+ *   <BoardHeader>Title</BoardHeader>
+ *   <BoardContent>
+ *     Main content goes here
+ *   </BoardContent>
+ * </Board>
+ */
+const BoardContent = React.forwardRef<HTMLDivElement, BoardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-4", className)} {...props} />
+  )
+);
+BoardContent.displayName = "BoardContent";
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export {
+  // Components
+  Board,
+  BoardHeader,
+  BoardContent,
+  // Variants (for advanced customization)
+  boardVariants,
+};