@arolariu/components 0.0.40 → 0.1.1

package/src/components/ui/input.tsx

@@ -1,22 +1,22 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-neutral-950 placeholder:text-neutral-500 selection:bg-neutral-900 selection:text-neutral-50 dark:bg-neutral-200/30 border-neutral-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800",
-        "focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
-        "aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-neutral-950 placeholder:text-neutral-500 selection:bg-neutral-900 selection:text-neutral-50 dark:bg-neutral-200/30 border-neutral-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800",
+        "focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
+        "aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/ui/ripple-button.tsx

@@ -1,111 +1,111 @@
-"use client";
-
-import * as React from "react";
-import { type HTMLMotionProps, motion, type Transition } from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface Ripple {
-  id: number;
-  x: number;
-  y: number;
-}
-
-interface RippleButtonProps extends HTMLMotionProps<"button"> {
-  children: React.ReactNode;
-  rippleClassName?: string;
-  scale?: number;
-  transition?: Transition;
-}
-
-const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
-  (
-    {
-      children,
-      onClick,
-      className,
-      rippleClassName,
-      scale = 10,
-      transition = { duration: 0.6, ease: "easeOut" },
-      ...props
-    },
-    ref,
-  ) => {
-    const [ripples, setRipples] = React.useState<Ripple[]>([]);
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-    React.useImperativeHandle(
-      ref,
-      () => buttonRef.current as HTMLButtonElement,
-    );
-
-    const createRipple = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        const button = buttonRef.current;
-        if (!button) return;
-
-        const rect = button.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-
-        const newRipple: Ripple = {
-          id: Date.now(),
-          x,
-          y,
-        };
-
-        setRipples((prev) => [...prev, newRipple]);
-
-        setTimeout(() => {
-          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
-        }, 600);
-      },
-      [],
-    );
-
-    const handleClick = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        createRipple(event);
-        if (onClick) {
-          onClick(event);
-        }
-      },
-      [createRipple, onClick],
-    );
-
-    return (
-      <motion.button
-        ref={buttonRef}
-        onClick={handleClick}
-        whileTap={{ scale: 0.95 }}
-        whileHover={{ scale: 1.05 }}
-        className={cn(
-          "relative h-10 px-4 py-2 text-sm font-medium text-primary-foreground overflow-hidden bg-primary cursor-pointer rounded-lg focus:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {ripples.map((ripple) => (
-          <motion.span
-            key={ripple.id}
-            initial={{ scale: 0, opacity: 0.5 }}
-            animate={{ scale, opacity: 0 }}
-            transition={transition}
-            className={cn(
-              "absolute bg-primary-foreground rounded-full size-5 pointer-events-none",
-              rippleClassName,
-            )}
-            style={{
-              top: ripple.y - 10,
-              left: ripple.x - 10,
-            }}
-          />
-        ))}
-      </motion.button>
-    );
-  },
-);
-
-RippleButton.displayName = "RippleButton";
-
-export { RippleButton, type RippleButtonProps };
+"use client";
+
+import * as React from "react";
+import { type HTMLMotionProps, motion, type Transition } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface Ripple {
+  id: number;
+  x: number;
+  y: number;
+}
+
+interface RippleButtonProps extends HTMLMotionProps<"button"> {
+  children: React.ReactNode;
+  rippleClassName?: string;
+  scale?: number;
+  transition?: Transition;
+}
+
+const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
+  (
+    {
+      children,
+      onClick,
+      className,
+      rippleClassName,
+      scale = 10,
+      transition = { duration: 0.6, ease: "easeOut" },
+      ...props
+    },
+    ref,
+  ) => {
+    const [ripples, setRipples] = React.useState<Ripple[]>([]);
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    React.useImperativeHandle(
+      ref,
+      () => buttonRef.current as HTMLButtonElement,
+    );
+
+    const createRipple = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        const button = buttonRef.current;
+        if (!button) return;
+
+        const rect = button.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        const newRipple: Ripple = {
+          id: Date.now(),
+          x,
+          y,
+        };
+
+        setRipples((prev) => [...prev, newRipple]);
+
+        setTimeout(() => {
+          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+        }, 600);
+      },
+      [],
+    );
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        createRipple(event);
+        if (onClick) {
+          onClick(event);
+        }
+      },
+      [createRipple, onClick],
+    );
+
+    return (
+      <motion.button
+        ref={buttonRef}
+        onClick={handleClick}
+        whileTap={{ scale: 0.95 }}
+        whileHover={{ scale: 1.05 }}
+        className={cn(
+          "relative h-10 px-4 py-2 text-sm font-medium text-primary-foreground overflow-hidden bg-primary cursor-pointer rounded-lg focus:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {ripples.map((ripple) => (
+          <motion.span
+            key={ripple.id}
+            initial={{ scale: 0, opacity: 0.5 }}
+            animate={{ scale, opacity: 0 }}
+            transition={transition}
+            className={cn(
+              "absolute bg-primary-foreground rounded-full size-5 pointer-events-none",
+              rippleClassName,
+            )}
+            style={{
+              top: ripple.y - 10,
+              left: ripple.x - 10,
+            }}
+          />
+        ))}
+      </motion.button>
+    );
+  },
+);
+
+RippleButton.displayName = "RippleButton";
+
+export { RippleButton, type RippleButtonProps };

package/src/components/ui/scratcher.tsx

@@ -1,171 +1,171 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { motion, useAnimation } from "motion/react";
-import React, { useEffect, useRef, useState } from "react";
-
-interface ScratcherProps {
-  children: React.ReactNode;
-  width: number;
-  height: number;
-  minScratchPercentage?: number;
-  className?: string;
-  onComplete?: () => void;
-  gradientColors?: [string, string, string];
-}
-
-export const Scratcher: React.FC<ScratcherProps> = ({
-  width,
-  height,
-  minScratchPercentage = 50,
-  onComplete,
-  children,
-  className,
-  gradientColors = ["#A97CF8", "#F38CB8", "#FDCC92"],
-}) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [isScratching, setIsScratching] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-
-  const controls = useAnimation();
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      ctx.fillStyle = "#ccc";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      const gradient = ctx.createLinearGradient(
-        0,
-        0,
-        canvas.width,
-        canvas.height,
-      );
-      gradient.addColorStop(0, gradientColors[0]);
-      gradient.addColorStop(0.5, gradientColors[1]);
-      gradient.addColorStop(1, gradientColors[2]);
-      ctx.fillStyle = gradient;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-    }
-  }, [gradientColors]);
-
-  useEffect(() => {
-    const handleDocumentMouseMove = (event: MouseEvent) => {
-      if (!isScratching) return;
-      scratch(event.clientX, event.clientY);
-    };
-
-    const handleDocumentTouchMove = (event: TouchEvent) => {
-      if (!isScratching) return;
-      const touch = event.touches[0];
-      scratch(touch.clientX, touch.clientY);
-    };
-
-    const handleDocumentMouseUp = () => {
-      setIsScratching(false);
-      checkCompletion();
-    };
-
-    const handleDocumentTouchEnd = () => {
-      setIsScratching(false);
-      checkCompletion();
-    };
-
-    document.addEventListener("mousedown", handleDocumentMouseMove);
-    document.addEventListener("mousemove", handleDocumentMouseMove);
-    document.addEventListener("touchstart", handleDocumentTouchMove);
-    document.addEventListener("touchmove", handleDocumentTouchMove);
-    document.addEventListener("mouseup", handleDocumentMouseUp);
-    document.addEventListener("touchend", handleDocumentTouchEnd);
-    document.addEventListener("touchcancel", handleDocumentTouchEnd);
-
-    return () => {
-      document.removeEventListener("mousedown", handleDocumentMouseMove);
-      document.removeEventListener("mousemove", handleDocumentMouseMove);
-      document.removeEventListener("touchstart", handleDocumentTouchMove);
-      document.removeEventListener("touchmove", handleDocumentTouchMove);
-      document.removeEventListener("mouseup", handleDocumentMouseUp);
-      document.removeEventListener("touchend", handleDocumentTouchEnd);
-      document.removeEventListener("touchcancel", handleDocumentTouchEnd);
-    };
-  }, [isScratching]);
-
-  const handleMouseDown = () => setIsScratching(true);
-
-  const handleTouchStart = () => setIsScratching(true);
-
-  const scratch = (clientX: number, clientY: number) => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      const rect = canvas.getBoundingClientRect();
-      const x = clientX - rect.left + 16;
-      const y = clientY - rect.top + 16;
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.beginPath();
-      ctx.arc(x, y, 30, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  };
-
-  const startAnimation = async () => {
-    await controls.start({
-      scale: [1, 1.5, 1],
-      rotate: [0, 10, -10, 10, -10, 0],
-      transition: { duration: 0.5 },
-    });
-
-    // Call onComplete after animation finishes
-    if (onComplete) {
-      onComplete();
-    }
-  };
-
-  const checkCompletion = () => {
-    if (isComplete) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (canvas && ctx) {
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      const pixels = imageData.data;
-      const totalPixels = pixels.length / 4;
-      let clearPixels = 0;
-
-      for (let i = 3; i < pixels.length; i += 4) {
-        if (pixels[i] === 0) clearPixels++;
-      }
-
-      const percentage = (clearPixels / totalPixels) * 100;
-
-      if (percentage >= minScratchPercentage) {
-        setIsComplete(true);
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        startAnimation();
-      }
-    }
-  };
-
-  return (
-    <motion.div
-      className={cn("relative select-none", className)}
-      style={{
-        width,
-        height,
-        cursor:
-          "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto",
-      }}
-      animate={controls}
-    >
-      <canvas
-        ref={canvasRef}
-        width={width}
-        height={height}
-        className="absolute left-0 top-0"
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}
-      ></canvas>
-      {children}
-    </motion.div>
-  );
-};
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion, useAnimation } from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+
+interface ScratcherProps {
+  children: React.ReactNode;
+  width: number;
+  height: number;
+  minScratchPercentage?: number;
+  className?: string;
+  onComplete?: () => void;
+  gradientColors?: [string, string, string];
+}
+
+export const Scratcher: React.FC<ScratcherProps> = ({
+  width,
+  height,
+  minScratchPercentage = 50,
+  onComplete,
+  children,
+  className,
+  gradientColors = ["#A97CF8", "#F38CB8", "#FDCC92"],
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isScratching, setIsScratching] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const controls = useAnimation();
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (canvas && ctx) {
+      ctx.fillStyle = "#ccc";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      const gradient = ctx.createLinearGradient(
+        0,
+        0,
+        canvas.width,
+        canvas.height,
+      );
+      gradient.addColorStop(0, gradientColors[0]);
+      gradient.addColorStop(0.5, gradientColors[1]);
+      gradient.addColorStop(1, gradientColors[2]);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }, [gradientColors]);
+
+  useEffect(() => {
+    const handleDocumentMouseMove = (event: MouseEvent) => {
+      if (!isScratching) return;
+      scratch(event.clientX, event.clientY);
+    };
+
+    const handleDocumentTouchMove = (event: TouchEvent) => {
+      if (!isScratching) return;
+      const touch = event.touches[0];
+      scratch(touch.clientX, touch.clientY);
+    };
+
+    const handleDocumentMouseUp = () => {
+      setIsScratching(false);
+      checkCompletion();
+    };
+
+    const handleDocumentTouchEnd = () => {
+      setIsScratching(false);
+      checkCompletion();
+    };
+
+    document.addEventListener("mousedown", handleDocumentMouseMove);
+    document.addEventListener("mousemove", handleDocumentMouseMove);
+    document.addEventListener("touchstart", handleDocumentTouchMove);
+    document.addEventListener("touchmove", handleDocumentTouchMove);
+    document.addEventListener("mouseup", handleDocumentMouseUp);
+    document.addEventListener("touchend", handleDocumentTouchEnd);
+    document.addEventListener("touchcancel", handleDocumentTouchEnd);
+
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentMouseMove);
+      document.removeEventListener("mousemove", handleDocumentMouseMove);
+      document.removeEventListener("touchstart", handleDocumentTouchMove);
+      document.removeEventListener("touchmove", handleDocumentTouchMove);
+      document.removeEventListener("mouseup", handleDocumentMouseUp);
+      document.removeEventListener("touchend", handleDocumentTouchEnd);
+      document.removeEventListener("touchcancel", handleDocumentTouchEnd);
+    };
+  }, [isScratching]);
+
+  const handleMouseDown = () => setIsScratching(true);
+
+  const handleTouchStart = () => setIsScratching(true);
+
+  const scratch = (clientX: number, clientY: number) => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (canvas && ctx) {
+      const rect = canvas.getBoundingClientRect();
+      const x = clientX - rect.left + 16;
+      const y = clientY - rect.top + 16;
+      ctx.globalCompositeOperation = "destination-out";
+      ctx.beginPath();
+      ctx.arc(x, y, 30, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  };
+
+  const startAnimation = async () => {
+    await controls.start({
+      scale: [1, 1.5, 1],
+      rotate: [0, 10, -10, 10, -10, 0],
+      transition: { duration: 0.5 },
+    });
+
+    // Call onComplete after animation finishes
+    if (onComplete) {
+      onComplete();
+    }
+  };
+
+  const checkCompletion = () => {
+    if (isComplete) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (canvas && ctx) {
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const pixels = imageData.data;
+      const totalPixels = pixels.length / 4;
+      let clearPixels = 0;
+
+      for (let i = 3; i < pixels.length; i += 4) {
+        if (pixels[i] === 0) clearPixels++;
+      }
+
+      const percentage = (clearPixels / totalPixels) * 100;
+
+      if (percentage >= minScratchPercentage) {
+        setIsComplete(true);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        startAnimation();
+      }
+    }
+  };
+
+  return (
+    <motion.div
+      className={cn("relative select-none", className)}
+      style={{
+        width,
+        height,
+        cursor:
+          "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto",
+      }}
+      animate={controls}
+    >
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="absolute left-0 top-0"
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+      ></canvas>
+      {children}
+    </motion.div>
+  );
+};