@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/dot-background.tsx

@@ -1,153 +1,161 @@
 "use client";
 
-import {cn} from "@/lib/utilities";
 import {motion} from "motion/react";
 import React, {useEffect, useId, useRef, useState} from "react";
 
-/**
- *  DotBackground Component Props
- * @param width The horizontal spacing between dots
- * @param height The vertical spacing between dots
- * @param x The x-offset of the entire pattern
- * @param y The y-offset of the entire pattern
- * @param cx The x-offset of individual dots
- * @param cy The y-offset of individual dots
- * @param cr The radius of each dot
- * @param className Additional CSS classes to apply to the SVG container
- * @param glow Whether dots should have a glowing animation effect
- */
-interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
+import {cn} from "@/lib/utilities";
+import styles from "./dot-background.module.css";
+
+/** Props accepted by {@link DotBackground}. */
+export interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
+  /** Horizontal spacing between generated dots. @default 16 */
   width?: number;
+  /** Vertical spacing between generated dots. @default 16 */
   height?: number;
+  /** Horizontal offset applied to the dot grid. @default 0 */
   x?: number;
+  /** Vertical offset applied to the dot grid. @default 0 */
   y?: number;
+  /** Horizontal center offset for each generated circle. @default 1 */
   cx?: number;
+  /** Vertical center offset for each generated circle. @default 1 */
   cy?: number;
+  /** Radius used for each generated dot. @default 1 */
   cr?: number;
+  /** Additional CSS classes merged with the root SVG element. @default undefined */
   className?: string;
+  /** Enables pulsing radial glow animation for every dot. @default false */
   glow?: boolean;
-  [key: string]: unknown;
 }
 
 /**
- * DotBackground Component
- * A React component that creates an animated or static dot pattern background using SVG.
- * The pattern automatically adjusts to fill its container and can optionally display glowing dots.
- * @see DotBackgroundProps for the props interface.
+ * Renders an animated dot grid with an optional glowing pulse effect.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders an `<svg>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
  * @example
- * // Basic usage
- * <DotBackground />
+ * ```tsx
+ * <DotBackground glow />
+ * ```
  *
- * // With glowing effect and custom spacing
- * <DotBackground
- *   width={20}
- *   height={20}
- *   glow={true}
- *   className="opacity-50"
- * />
- *@summary Summary:
- * - The component is client-side only ("use client")
- * - Automatically responds to container size changes
- * - When glow is enabled, dots will animate with random delays and durations
- * - Uses Motion for animations
- * - Dots color can be controlled via the text color utility classes
+ * @see {@link DotBackgroundProps} for available props
  */
+const DotBackground = React.forwardRef<SVGSVGElement, DotBackgroundProps>(
+  (
+    {width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props}: Readonly<DotBackgroundProps>,
+    ref,
+  ): React.JSX.Element => {
+    const id = useId();
+    const containerRef = useRef<SVGSVGElement>(null);
+    const [dimensions, setDimensions] = useState({width: 0, height: 0});
 
-export function DotBackground({
-  width = 16,
-  height = 16,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 1,
-  className,
-  glow = false,
-  ...props
-}: DotBackgroundProps) {
-  const id = useId();
-  const containerRef = useRef<SVGSVGElement>(null);
-  const [dimensions, setDimensions] = useState({width: 0, height: 0});
+    const setRefs = React.useCallback(
+      (node: SVGSVGElement | null): void => {
+        containerRef.current = node;
 
-  useEffect(() => {
-    const updateDimensions = () => {
-      if (containerRef.current) {
-        const {width, height} = containerRef.current.getBoundingClientRect();
-        setDimensions({width, height});
-      }
-    };
+        if (typeof ref === "function") {
+          ref(node);
+          return;
+        }
 
-    updateDimensions();
-    window.addEventListener("resize", updateDimensions);
-    return () => window.removeEventListener("resize", updateDimensions);
-  }, []);
+        if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref],
+    );
 
-  const dots = Array.from(
-    {
-      length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height),
-    },
-    (_, i) => {
-      const col = i % Math.ceil(dimensions.width / width);
-      const row = Math.floor(i / Math.ceil(dimensions.width / width));
-      return {
-        x: col * width + cx,
-        y: row * height + cy,
-        delay: Math.random() * 5,
-        duration: Math.random() * 3 + 2,
+    useEffect(() => {
+      const updateDimensions = (): void => {
+        if (!containerRef.current) {
+          return;
+        }
+
+        const rect = containerRef.current.getBoundingClientRect();
+        // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect -- resize observer style update is the hook's purpose
+        setDimensions({width: rect.width, height: rect.height});
       };
-    },
-  );
 
-  return (
-    <svg
-      ref={containerRef}
-      aria-hidden='true'
-      className={cn("pointer-events-none absolute inset-0 h-full w-full", className)}
-      {...props}>
-      <defs>
-        <radialGradient id={`${id}-gradient`}>
-          <stop
-            offset='0%'
-            stopColor='currentColor'
-            stopOpacity='1'
-          />
-          <stop
-            offset='100%'
-            stopColor='currentColor'
-            stopOpacity='0'
+      updateDimensions();
+      globalThis.window.addEventListener("resize", updateDimensions);
+      return () => globalThis.window.removeEventListener("resize", updateDimensions);
+    }, []);
+
+    const totalColumns = Math.ceil(dimensions.width / width);
+    const dots = Array.from(
+      {
+        length: totalColumns * Math.ceil(dimensions.height / height),
+      },
+      (_, index) => {
+        const column = index % Math.max(totalColumns, 1);
+        const row = Math.floor(index / Math.max(totalColumns, 1));
+        return {
+          x: x + column * width + cx,
+          y: y + row * height + cy,
+          delay: Math.random() * 5,
+          duration: Math.random() * 3 + 2,
+        };
+      },
+    );
+
+    return (
+      <svg
+        ref={setRefs}
+        aria-hidden='true'
+        className={cn(styles.root, className)}
+        {...props}>
+        <defs>
+          <radialGradient id={`${id}-gradient`}>
+            <stop
+              offset='0%'
+              stopColor='currentColor'
+              stopOpacity='1'
+            />
+            <stop
+              offset='100%'
+              stopColor='currentColor'
+              stopOpacity='0'
+            />
+          </radialGradient>
+        </defs>
+        {dots.map((dot) => (
+          <motion.circle
+            key={`${dot.x}-${dot.y}`}
+            cx={dot.x}
+            cy={dot.y}
+            r={cr}
+            fill={glow ? `url(#${id}-gradient)` : "currentColor"}
+            className={styles.dot}
+            initial={glow ? {opacity: 0.4, scale: 1} : {}}
+            animate={
+              glow
+                ? {
+                    opacity: [0.4, 1, 0.4],
+                    scale: [1, 1.5, 1],
+                  }
+                : {}
+            }
+            transition={
+              glow
+                ? {
+                    duration: dot.duration,
+                    repeat: Infinity,
+                    repeatType: "reverse",
+                    delay: dot.delay,
+                    ease: "easeInOut",
+                  }
+                : {}
+            }
           />
-        </radialGradient>
-      </defs>
-      {dots.map((dot) => (
-        <motion.circle
-          key={`${dot.x}-${dot.y}`}
-          cx={dot.x}
-          cy={dot.y}
-          r={cr}
-          fill={glow ? `url(#${id}-gradient)` : "currentColor"}
-          className='text-neutral-400/80'
-          initial={glow ? {opacity: 0.4, scale: 1} : {}}
-          animate={
-            glow
-              ? {
-                  opacity: [0.4, 1, 0.4],
-                  scale: [1, 1.5, 1],
-                }
-              : {}
-          }
-          transition={
-            glow
-              ? {
-                  duration: dot.duration,
-                  repeat: Infinity,
-                  repeatType: "reverse",
-                  delay: dot.delay,
-                  ease: "easeInOut",
-                }
-              : {}
-          }
-        />
-      ))}
-    </svg>
-  );
-}
+        ))}
+      </svg>
+    );
+  },
+);
+DotBackground.displayName = "DotBackground";
+
+export {DotBackground};

package/src/components/ui/drawer.module.css

@@ -0,0 +1,85 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 0.55);
+  transition: opacity var(--ac-transition-normal);
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+}
+
+.backdrop[data-starting-style],
+.backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.popup {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+  min-height: 10rem;
+  margin-top: 6rem;
+  padding: var(--ac-space-4) var(--ac-space-4) var(--ac-space-6);
+  border: 1px solid var(--ac-border);
+  border-bottom: 0;
+  border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0;
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 -16px 40px -16px rgb(0 0 0 / 0.35);
+  transition: transform var(--ac-transition-normal), opacity var(--ac-transition-normal);
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: translateY(1rem);
+}
+
+.handle {
+  width: 4rem;
+  height: 0.25rem;
+  margin: 0 auto;
+  border-radius: 999px;
+  background-color: var(--ac-border);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+}
+
+.header {
+  display: grid;
+  gap: var(--ac-space-1);
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-2);
+  margin-top: auto;
+}
+
+@media (min-width: 640px) {
+  .header {
+    text-align: left;
+  }
+}
+
+.title {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+}
+
+.description {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}