import { cn } from "../../utils/cn.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Pattern/DotPattern.tsx
/**
* Dot Pattern Component
*
* A decorative SVG component that generates a repeating dot pattern background.
* Perfect for adding subtle texture and visual interest to sections, cards, or hero areas
* without interfering with content readability.
*
* Features:
* - Scalable vector-based pattern that looks crisp at any size
* - Customizable dot spacing, size, and positioning
* - Semi-transparent fill for subtle visual effect
* - Accessibility-friendly with aria-hidden attribute
* - Pointer events disabled to avoid interaction interference
* - Unique pattern ID generation to prevent conflicts
* - Full coverage with absolute positioning
*
* Technical Implementation:
* - Uses SVG `<pattern>` element for efficient rendering
* - Pattern repeats using userSpaceOnUse coordinate system
* - Generates unique IDs using React's useId hook
* - Fills entire container with 100% width and height
* - Pattern tile coordinates defined in userSpaceOnUse units
*
* Visual Characteristics:
* - Default: 16x16px tile with 1px radius dots
* - Semi-transparent neutral fill (30% opacity)
* - Dots positioned at (1,1) within each tile by default
* - Absolute positioning covers entire parent container
*
* @example
* Basic usage as background pattern:
* ```tsx
* <div className="relative min-h-screen">
*   <DotPattern />
*   <div className="relative z-10">
*     <h1>Content over dot pattern</h1>
*   </div>
* </div>
* ```
*
* @example
* Custom dot spacing and size:
* ```tsx
* <DotPattern
*   width={24}
*   height={24}
*   cr={1.5}
*   className="fill-primary/20"
* />
* ```
*
* @example
* Offset pattern positioning:
* ```tsx
* <DotPattern
*   x={8}
*   y={8}
*   cx={2}
*   cy={2}
*   className="fill-accent/25"
* />
* ```
*
* @example
* Large sparse dots:
* ```tsx
* <DotPattern
*   width={32}
*   height={32}
*   cr={2}
*   cx={16}
*   cy={16}
*   className="fill-neutral/10"
* />
* ```
*
* Styling Notes:
* - Use `fill-*` classes to customize dot color and opacity
* - Pattern automatically fills parent container
* - Consider contrast with overlaid content
* - Semi-transparent fills work best for backgrounds
*
* Accessibility:
* - Marked as `aria-hidden="true"` since it's decorative
* - Pointer events disabled to maintain interactivity of overlaid content
* - Does not interfere with screen readers or keyboard navigation
*
* @param props - DotPattern component props
* @returns SVG element with repeating dot pattern
*/
const DotPattern = ({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
	"aria-hidden": "true",
	className: cn("pointer-events-none absolute inset-0 h-full w-full fill-neutral/30", className),
	...props,
	children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
		id: "pattern-circle",
		width,
		height,
		patternUnits: "userSpaceOnUse",
		patternContentUnits: "userSpaceOnUse",
		x,
		y,
		children: /* @__PURE__ */ jsx("circle", {
			cx,
			cy,
			r: cr
		})
	}) }), /* @__PURE__ */ jsx("rect", {
		width: "100%",
		height: "100%",
		strokeWidth: 0,
		fill: `url(#pattern-circle)`
	})]
});

//#endregion
export { DotPattern };
//# sourceMappingURL=DotPattern.mjs.map