Bg Pattern

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/* ================================================================== */
5/*  BG PATTERNS — Soft, minimal, customizable background patterns      */
6/* ================================================================== */
7 
8export interface BgPatternProps extends React.HTMLAttributes<HTMLDivElement> {
9  /** Pattern color — any valid CSS color */
10  color?: string;
11  /** Pattern opacity (0-1) */
12  opacity?: number;
13  /** Pattern size / spacing in px */
14  size?: number;
15  /** Whether the pattern covers its parent absolutely */
16  overlay?: boolean;
17}
18 
19const baseClass = "pointer-events-none select-none";
20const overlayClass = "absolute inset-0 z-0";
21 
22function patternWrapper(overlay: boolean | undefined, className: string | undefined) {
23  return cn(baseClass, overlay && overlayClass, className);
24}
25 
26/* ── 1. Dots ──────────────────────────────────────────────────────── */
27 
28export const PatternDots = React.forwardRef<HTMLDivElement, BgPatternProps>(
29  (
30    { color = "currentColor", opacity = 0.08, size = 24, overlay, className, style, ...props },
31    ref,
32  ) => (
33    <div
34      ref={ref}
35 
36      data-slot="background-pattern"
37 
38      data-pattern="dots"
39      className={patternWrapper(overlay, className)}
40      style={{
41        backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,
42        backgroundSize: `${size}px ${size}px`,
43        opacity,
44        ...style,
45      }}
46      aria-hidden="true"
47      {...props}
48    />
49  ),
50);
51PatternDots.displayName = "PatternDots";
52 
53/* ── 2. Grid / Boxes ──────────────────────────────────────────────── */
54 
55export const PatternGrid = React.forwardRef<HTMLDivElement, BgPatternProps>(
56  (
57    { color = "currentColor", opacity = 0.06, size = 40, overlay, className, style, ...props },
58    ref,
59  ) => (
60    <div
61      ref={ref}
62 
63      data-slot="background-pattern"
64 
65      data-pattern="grid"
66      className={patternWrapper(overlay, className)}
67      style={{
68        backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
69        backgroundSize: `${size}px ${size}px`,
70        opacity,
71        ...style,
72      }}
73      aria-hidden="true"
74      {...props}
75    />
76  ),
77);
78// … truncated