@arolariu/components 0.4.2 → 1.0.0

package/dist/components/ui/ripple-button_module.css

@@ -0,0 +1,38 @@
+.button-IxGPjV {
+  background: var(--ac-primary);
+  border-radius: var(--ac-radius-lg);
+  color: var(--ac-primary-foreground);
+  cursor: pointer;
+  font-size: var(--ac-text-sm);
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  height: 2.5rem;
+  padding: .5rem 1rem;
+  font-weight: 500;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.button-IxGPjV:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.content-yAWmOo {
+  z-index: 1;
+  position: relative;
+}
+
+.ripple-GAek8g {
+  background: var(--ac-primary-foreground);
+  pointer-events: none;
+  border-radius: 9999px;
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+}
+
+
+/*# sourceMappingURL=ripple-button_module.css.map */

package/dist/components/ui/ripple-button_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/ripple-button.module.css","webpack://./src/components/ui/ripple-button.module.css"],"names":[],"mappings":"AADA;ECEE,6BAA6B;EAC7B,kCAAkC;EAClC,mCAAmC;EACnC,eAAe;EACf,4BAA4B;EAC5B,SAAS;EACT,uBAAuB;EACvB,mBAAmB;EACnB,cAAc;EACd,mBAAmB;EACnB,gBAAgB;EAChB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,iCAAiC;EACjC,mBAAmB;AACrB;;AAEA;EACE,UAAU;EACV,kBAAkB;AACpB;;AAEA;EACE,wCAAwC;EACxC,oBAAoB;EACpB,qBAAqB;EACrB,cAAc;EACd,eAAe;EACf,kBAAkB;AACpB","sourcesContent":[".button{align-items:center;background:var(--ac-primary);border:0;border-radius:var(--ac-radius-lg);color:var(--ac-primary-foreground);cursor:pointer;display:inline-flex;font-size:var(--ac-text-sm);font-weight:500;height:2.5rem;justify-content:center;overflow:hidden;padding:.5rem 1rem;position:relative}.button:focus-visible{outline:2px solid var(--ac-ring);outline-offset:2px}.content{position:relative;z-index:1}.ripple{background:var(--ac-primary-foreground);border-radius:9999px;height:1.25rem;pointer-events:none;position:absolute;width:1.25rem}",".button {\n  background: var(--ac-primary);\n  border-radius: var(--ac-radius-lg);\n  color: var(--ac-primary-foreground);\n  cursor: pointer;\n  font-size: var(--ac-text-sm);\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  height: 2.5rem;\n  padding: .5rem 1rem;\n  font-weight: 500;\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--ac-ring);\n  outline-offset: 2px;\n}\n\n.content {\n  z-index: 1;\n  position: relative;\n}\n\n.ripple {\n  background: var(--ac-primary-foreground);\n  pointer-events: none;\n  border-radius: 9999px;\n  width: 1.25rem;\n  height: 1.25rem;\n  position: absolute;\n}\n"],"sourceRoot":""}

package/dist/components/ui/scratcher.d.ts

@@ -1,13 +1,36 @@
 import React from "react";
-interface ScratcherProps {
+/** Props accepted by {@link Scratcher}. */
+export interface ScratcherProps {
+    /** Content revealed after the overlay is scratched away. @default undefined */
     children: React.ReactNode;
+    /** Width of the scratch card surface in pixels. @default undefined */
     width: number;
+    /** Height of the scratch card surface in pixels. @default undefined */
     height: number;
+    /** Percentage of cleared pixels required before completion fires. @default 50 */
     minScratchPercentage?: number;
+    /** Additional CSS classes merged with the scratch card container. @default undefined */
     className?: string;
+    /** Callback invoked once the scratch completion threshold is reached. @default undefined */
     onComplete?: () => void;
+    /** Three-stop gradient used for the scratchable overlay. @default ["#A97CF8", "#F38CB8", "#FDCC92"] */
     gradientColors?: [string, string, string];
 }
+/**
+ * Renders a scratch-card reveal surface with animated completion feedback.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element containing a `<canvas>`
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <Scratcher width={320} height={180}>Prize unlocked</Scratcher>
+ * ```
+ *
+ * @see {@link ScratcherProps} for available props
+ */
 export declare const Scratcher: React.FC<ScratcherProps>;
-export {};
 //# sourceMappingURL=scratcher.d.ts.map

package/dist/components/ui/scratcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scratcher.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scratcher.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoJ9C,CAAC"}
+{"version":3,"file":"scratcher.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scratcher.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,2CAA2C;AAC3C,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uGAAuG;IACvG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C;AAKD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqJ9C,CAAC"}

package/dist/components/ui/scratcher.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utilities.js";
 import { motion, useAnimation } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+import react, { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/utilities.js";
+import scratcher_module from "./scratcher.module.js";
 const defaultGradientColors = [
     "#A97CF8",
     "#F38CB8",
     "#FDCC92"
 ];
+const ignoreAnimationError = ()=>null;
 const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, children, className, gradientColors = defaultGradientColors })=>{
     const canvasRef = useRef(null);
     const [isScratching, setIsScratching] = useState(false);
@@ -15,74 +17,32 @@ const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, child
     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);
-        }
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) return;
+        context.fillStyle = "#ccc";
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
+        gradient.addColorStop(0, gradientColors[0]);
+        gradient.addColorStop(0.5, gradientColors[1]);
+        gradient.addColorStop(1, gradientColors[2]);
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
     }, [
         gradientColors
     ]);
-    useEffect(()=>{
-        const handleDocumentMouseMove = (event)=>{
-            if (!isScratching) return;
-            scratch(event.clientX, event.clientY);
-        };
-        const handleDocumentTouchMove = (event)=>{
-            if (!isScratching) return;
-            const [touch] = event.touches;
-            if (!touch) return;
-            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, clientY)=>{
+    const scratch = react.useCallback((clientX, clientY)=>{
         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, 2 * Math.PI);
-            ctx.fill();
-        }
-    };
-    const startAnimation = async ()=>{
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) return;
+        const rect = canvas.getBoundingClientRect();
+        const x = clientX - rect.left + 16;
+        const y = clientY - rect.top + 16;
+        context.globalCompositeOperation = "destination-out";
+        context.beginPath();
+        context.arc(x, y, 30, 0, 2 * Math.PI);
+        context.fill();
+    }, []);
+    const startAnimation = react.useCallback(async ()=>{
         await controls.start({
             scale: [
                 1,
@@ -101,28 +61,65 @@ const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, child
                 duration: 0.5
             }
         });
-        if (onComplete) onComplete();
-    };
-    const checkCompletion = ()=>{
+        onComplete?.();
+    }, [
+        controls,
+        onComplete
+    ]);
+    const checkCompletion = react.useCallback(()=>{
         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 (0 === pixels[i]) clearPixels++;
-            const percentage = clearPixels / totalPixels * 100;
-            if (percentage >= minScratchPercentage) {
-                setIsComplete(true);
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                startAnimation();
-            }
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) return;
+        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const pixels = imageData.data;
+        const totalPixels = pixels.length / 4;
+        let clearPixels = 0;
+        for(let index = 3; index < pixels.length; index += 4)if (0 === pixels[index]) clearPixels += 1;
+        const percentage = clearPixels / totalPixels * 100;
+        if (percentage >= minScratchPercentage) {
+            setIsComplete(true);
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            startAnimation().catch(ignoreAnimationError);
         }
-    };
+    }, [
+        isComplete,
+        minScratchPercentage,
+        startAnimation
+    ]);
+    useEffect(()=>{
+        const handleDocumentMouseMove = (event)=>{
+            if (isScratching) scratch(event.clientX, event.clientY);
+        };
+        const handleDocumentTouchMove = (event)=>{
+            if (!isScratching) return;
+            const [touch] = event.touches;
+            if (!touch) return;
+            scratch(touch.clientX, touch.clientY);
+        };
+        const handleDocumentPointerEnd = ()=>{
+            setIsScratching(false);
+            checkCompletion();
+        };
+        globalThis.document.addEventListener("mousemove", handleDocumentMouseMove);
+        globalThis.document.addEventListener("touchmove", handleDocumentTouchMove);
+        globalThis.document.addEventListener("mouseup", handleDocumentPointerEnd);
+        globalThis.document.addEventListener("touchend", handleDocumentPointerEnd);
+        globalThis.document.addEventListener("touchcancel", handleDocumentPointerEnd);
+        return ()=>{
+            globalThis.document.removeEventListener("mousemove", handleDocumentMouseMove);
+            globalThis.document.removeEventListener("touchmove", handleDocumentTouchMove);
+            globalThis.document.removeEventListener("mouseup", handleDocumentPointerEnd);
+            globalThis.document.removeEventListener("touchend", handleDocumentPointerEnd);
+            globalThis.document.removeEventListener("touchcancel", handleDocumentPointerEnd);
+        };
+    }, [
+        checkCompletion,
+        isScratching,
+        scratch
+    ]);
     return /*#__PURE__*/ jsxs(motion.div, {
-        className: cn("relative select-none", className),
+        className: cn(scratcher_module.root, className),
         style: {
             width,
             height,
@@ -134,14 +131,15 @@ const Scratcher = ({ width, height, minScratchPercentage = 50, onComplete, child
                 ref: canvasRef,
                 width: width,
                 height: height,
-                className: "absolute top-0 left-0",
-                onMouseDown: handleMouseDown,
-                onTouchStart: handleTouchStart
+                className: scratcher_module.canvas,
+                onMouseDown: ()=>setIsScratching(true),
+                onTouchStart: ()=>setIsScratching(true)
             }),
             children
         ]
     });
 };
+Scratcher.displayName = "Scratcher";
 export { Scratcher };
 
 //# sourceMappingURL=scratcher.js.map

package/dist/components/ui/scratcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/scratcher.js","sources":["../../../src/components/ui/scratcher.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {motion, useAnimation} from \"motion/react\";\r\nimport React, {useEffect, useRef, useState} from \"react\";\r\n\r\ninterface ScratcherProps {\r\n  children: React.ReactNode;\r\n  width: number;\r\n  height: number;\r\n  minScratchPercentage?: number;\r\n  className?: string;\r\n  onComplete?: () => void;\r\n  gradientColors?: [string, string, string];\r\n}\r\n\r\nconst defaultGradientColors: [string, string, string] = [\"#A97CF8\", \"#F38CB8\", \"#FDCC92\"];\r\n\r\nexport const Scratcher: React.FC<ScratcherProps> = ({\r\n  width,\r\n  height,\r\n  minScratchPercentage = 50,\r\n  onComplete,\r\n  children,\r\n  className,\r\n  gradientColors = defaultGradientColors,\r\n}) => {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const [isScratching, setIsScratching] = useState(false);\r\n  const [isComplete, setIsComplete] = useState(false);\r\n\r\n  const controls = useAnimation();\r\n\r\n  useEffect(() => {\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      ctx.fillStyle = \"#ccc\";\r\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);\r\n      gradient.addColorStop(0, gradientColors[0]);\r\n      gradient.addColorStop(0.5, gradientColors[1]);\r\n      gradient.addColorStop(1, gradientColors[2]);\r\n      ctx.fillStyle = gradient;\r\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n    }\r\n  }, [gradientColors]);\r\n\r\n  useEffect(() => {\r\n    const handleDocumentMouseMove = (event: MouseEvent) => {\r\n      if (!isScratching) return;\r\n      scratch(event.clientX, event.clientY);\r\n    };\r\n\r\n    const handleDocumentTouchMove = (event: TouchEvent) => {\r\n      if (!isScratching) return;\r\n      const [touch] = event.touches;\r\n      if (!touch) return;\r\n      scratch(touch.clientX, touch.clientY);\r\n    };\r\n\r\n    const handleDocumentMouseUp = () => {\r\n      setIsScratching(false);\r\n      checkCompletion();\r\n    };\r\n\r\n    const handleDocumentTouchEnd = () => {\r\n      setIsScratching(false);\r\n      checkCompletion();\r\n    };\r\n\r\n    document.addEventListener(\"mousedown\", handleDocumentMouseMove);\r\n    document.addEventListener(\"mousemove\", handleDocumentMouseMove);\r\n    document.addEventListener(\"touchstart\", handleDocumentTouchMove);\r\n    document.addEventListener(\"touchmove\", handleDocumentTouchMove);\r\n    document.addEventListener(\"mouseup\", handleDocumentMouseUp);\r\n    document.addEventListener(\"touchend\", handleDocumentTouchEnd);\r\n    document.addEventListener(\"touchcancel\", handleDocumentTouchEnd);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", handleDocumentMouseMove);\r\n      document.removeEventListener(\"mousemove\", handleDocumentMouseMove);\r\n      document.removeEventListener(\"touchstart\", handleDocumentTouchMove);\r\n      document.removeEventListener(\"touchmove\", handleDocumentTouchMove);\r\n      document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\r\n      document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\r\n      document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd);\r\n    };\r\n  }, [isScratching]);\r\n\r\n  const handleMouseDown = () => setIsScratching(true);\r\n\r\n  const handleTouchStart = () => setIsScratching(true);\r\n\r\n  const scratch = (clientX: number, clientY: number) => {\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      const rect = canvas.getBoundingClientRect();\r\n      const x = clientX - rect.left + 16;\r\n      const y = clientY - rect.top + 16;\r\n      ctx.globalCompositeOperation = \"destination-out\";\r\n      ctx.beginPath();\r\n      ctx.arc(x, y, 30, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    }\r\n  };\r\n\r\n  const startAnimation = async () => {\r\n    await controls.start({\r\n      scale: [1, 1.5, 1],\r\n      rotate: [0, 10, -10, 10, -10, 0],\r\n      transition: {duration: 0.5},\r\n    });\r\n\r\n    // Call onComplete after animation finishes\r\n    if (onComplete) {\r\n      onComplete();\r\n    }\r\n  };\r\n\r\n  const checkCompletion = () => {\r\n    if (isComplete) return;\r\n\r\n    const canvas = canvasRef.current;\r\n    const ctx = canvas?.getContext(\"2d\");\r\n    if (canvas && ctx) {\r\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\r\n      const pixels = imageData.data;\r\n      const totalPixels = pixels.length / 4;\r\n      let clearPixels = 0;\r\n\r\n      for (let i = 3; i < pixels.length; i += 4) {\r\n        if (pixels[i] === 0) clearPixels++;\r\n      }\r\n\r\n      const percentage = (clearPixels / totalPixels) * 100;\r\n\r\n      if (percentage >= minScratchPercentage) {\r\n        setIsComplete(true);\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        startAnimation();\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <motion.div\r\n      className={cn(\"relative select-none\", className)}\r\n      style={{\r\n        width,\r\n        height,\r\n        cursor:\r\n          \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\r\n      }}\r\n      animate={controls}>\r\n      <canvas\r\n        ref={canvasRef}\r\n        width={width}\r\n        height={height}\r\n        className='absolute top-0 left-0'\r\n        onMouseDown={handleMouseDown}\r\n        onTouchStart={handleTouchStart}></canvas>\r\n      {children}\r\n    </motion.div>\r\n  );\r\n};\r\n"],"names":["defaultGradientColors","Scratcher","width","height","minScratchPercentage","onComplete","children","className","gradientColors","canvasRef","useRef","isScratching","setIsScratching","useState","isComplete","setIsComplete","controls","useAnimation","useEffect","canvas","ctx","gradient","handleDocumentMouseMove","event","scratch","handleDocumentTouchMove","touch","handleDocumentMouseUp","checkCompletion","handleDocumentTouchEnd","document","handleMouseDown","handleTouchStart","clientX","clientY","rect","x","y","Math","startAnimation","imageData","pixels","totalPixels","clearPixels","i","percentage","motion","cn"],"mappings":"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"}
+{"version":3,"file":"components/ui/scratcher.js","sources":["../../../src/components/ui/scratcher.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, useAnimation} from \"motion/react\";\r\nimport React, {useEffect, useRef, useState} from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./scratcher.module.css\";\r\n\r\n/** Props accepted by {@link Scratcher}. */\r\nexport interface ScratcherProps {\r\n  /** Content revealed after the overlay is scratched away. @default undefined */\r\n  children: React.ReactNode;\r\n  /** Width of the scratch card surface in pixels. @default undefined */\r\n  width: number;\r\n  /** Height of the scratch card surface in pixels. @default undefined */\r\n  height: number;\r\n  /** Percentage of cleared pixels required before completion fires. @default 50 */\r\n  minScratchPercentage?: number;\r\n  /** Additional CSS classes merged with the scratch card container. @default undefined */\r\n  className?: string;\r\n  /** Callback invoked once the scratch completion threshold is reached. @default undefined */\r\n  onComplete?: () => void;\r\n  /** Three-stop gradient used for the scratchable overlay. @default [\"#A97CF8\", \"#F38CB8\", \"#FDCC92\"] */\r\n  gradientColors?: [string, string, string];\r\n}\r\n\r\nconst defaultGradientColors: [string, string, string] = [\"#A97CF8\", \"#F38CB8\", \"#FDCC92\"];\r\nconst ignoreAnimationError = (): null => null;\r\n\r\n/**\r\n * Renders a scratch-card reveal surface with animated completion feedback.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element containing a `<canvas>`\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <Scratcher width={320} height={180}>Prize unlocked</Scratcher>\r\n * ```\r\n *\r\n * @see {@link ScratcherProps} for available props\r\n */\r\nexport const Scratcher: React.FC<ScratcherProps> = ({\r\n  width,\r\n  height,\r\n  minScratchPercentage = 50,\r\n  onComplete,\r\n  children,\r\n  className,\r\n  gradientColors = defaultGradientColors,\r\n}): React.JSX.Element => {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const [isScratching, setIsScratching] = useState(false);\r\n  const [isComplete, setIsComplete] = useState(false);\r\n\r\n  const controls = useAnimation();\r\n\r\n  useEffect(() => {\r\n    const canvas = canvasRef.current;\r\n    const context = canvas?.getContext(\"2d\");\r\n    if (!canvas || !context) {\r\n      return;\r\n    }\r\n\r\n    context.fillStyle = \"#ccc\";\r\n    context.fillRect(0, 0, canvas.width, canvas.height);\r\n    const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);\r\n    gradient.addColorStop(0, gradientColors[0]);\r\n    gradient.addColorStop(0.5, gradientColors[1]);\r\n    gradient.addColorStop(1, gradientColors[2]);\r\n    context.fillStyle = gradient;\r\n    context.fillRect(0, 0, canvas.width, canvas.height);\r\n  }, [gradientColors]);\r\n\r\n  const scratch = React.useCallback((clientX: number, clientY: number): void => {\r\n    const canvas = canvasRef.current;\r\n    const context = canvas?.getContext(\"2d\");\r\n    if (!canvas || !context) {\r\n      return;\r\n    }\r\n\r\n    const rect = canvas.getBoundingClientRect();\r\n    const x = clientX - rect.left + 16;\r\n    const y = clientY - rect.top + 16;\r\n    context.globalCompositeOperation = \"destination-out\";\r\n    context.beginPath();\r\n    context.arc(x, y, 30, 0, Math.PI * 2);\r\n    context.fill();\r\n  }, []);\r\n\r\n  const startAnimation = React.useCallback(async (): Promise<void> => {\r\n    await controls.start({\r\n      scale: [1, 1.5, 1],\r\n      rotate: [0, 10, -10, 10, -10, 0],\r\n      transition: {duration: 0.5},\r\n    });\r\n\r\n    onComplete?.();\r\n  }, [controls, onComplete]);\r\n\r\n  const checkCompletion = React.useCallback((): void => {\r\n    if (isComplete) {\r\n      return;\r\n    }\r\n\r\n    const canvas = canvasRef.current;\r\n    const context = canvas?.getContext(\"2d\");\r\n    if (!canvas || !context) {\r\n      return;\r\n    }\r\n\r\n    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);\r\n    const pixels = imageData.data;\r\n    const totalPixels = pixels.length / 4;\r\n    let clearPixels = 0;\r\n\r\n    for (let index = 3; index < pixels.length; index += 4) {\r\n      if (pixels[index] === 0) {\r\n        clearPixels += 1;\r\n      }\r\n    }\r\n\r\n    const percentage = (clearPixels / totalPixels) * 100;\r\n    if (percentage >= minScratchPercentage) {\r\n      setIsComplete(true);\r\n      context.clearRect(0, 0, canvas.width, canvas.height);\r\n      startAnimation().catch(ignoreAnimationError);\r\n    }\r\n  }, [isComplete, minScratchPercentage, startAnimation]);\r\n\r\n  useEffect(() => {\r\n    const handleDocumentMouseMove = (event: MouseEvent): void => {\r\n      if (isScratching) {\r\n        scratch(event.clientX, event.clientY);\r\n      }\r\n    };\r\n\r\n    const handleDocumentTouchMove = (event: TouchEvent): void => {\r\n      if (!isScratching) {\r\n        return;\r\n      }\r\n\r\n      const [touch] = event.touches;\r\n      if (!touch) {\r\n        return;\r\n      }\r\n\r\n      scratch(touch.clientX, touch.clientY);\r\n    };\r\n\r\n    const handleDocumentPointerEnd = (): void => {\r\n      setIsScratching(false);\r\n      checkCompletion();\r\n    };\r\n\r\n    globalThis.document.addEventListener(\"mousemove\", handleDocumentMouseMove);\r\n    globalThis.document.addEventListener(\"touchmove\", handleDocumentTouchMove);\r\n    globalThis.document.addEventListener(\"mouseup\", handleDocumentPointerEnd);\r\n    globalThis.document.addEventListener(\"touchend\", handleDocumentPointerEnd);\r\n    globalThis.document.addEventListener(\"touchcancel\", handleDocumentPointerEnd);\r\n\r\n    return () => {\r\n      globalThis.document.removeEventListener(\"mousemove\", handleDocumentMouseMove);\r\n      globalThis.document.removeEventListener(\"touchmove\", handleDocumentTouchMove);\r\n      globalThis.document.removeEventListener(\"mouseup\", handleDocumentPointerEnd);\r\n      globalThis.document.removeEventListener(\"touchend\", handleDocumentPointerEnd);\r\n      globalThis.document.removeEventListener(\"touchcancel\", handleDocumentPointerEnd);\r\n    };\r\n  }, [checkCompletion, isScratching, scratch]);\r\n\r\n  return (\r\n    <motion.div\r\n      className={cn(styles.root, className)}\r\n      style={{\r\n        width,\r\n        height,\r\n        cursor:\r\n          \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto\",\r\n      }}\r\n      animate={controls}>\r\n      <canvas\r\n        ref={canvasRef}\r\n        width={width}\r\n        height={height}\r\n        className={styles.canvas}\r\n        onMouseDown={() => setIsScratching(true)}\r\n        onTouchStart={() => setIsScratching(true)}\r\n      />\r\n      {children}\r\n    </motion.div>\r\n  );\r\n};\r\n\r\nScratcher.displayName = \"Scratcher\";\r\n"],"names":["defaultGradientColors","ignoreAnimationError","Scratcher","width","height","minScratchPercentage","onComplete","children","className","gradientColors","canvasRef","useRef","isScratching","setIsScratching","useState","isComplete","setIsComplete","controls","useAnimation","useEffect","canvas","context","gradient","scratch","React","clientX","clientY","rect","x","y","Math","startAnimation","checkCompletion","imageData","pixels","totalPixels","clearPixels","index","percentage","handleDocumentMouseMove","event","handleDocumentTouchMove","touch","handleDocumentPointerEnd","globalThis","motion","cn","styles"],"mappings":"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"}

package/dist/components/ui/scratcher.module.js

@@ -0,0 +1,8 @@
+import "./scratcher_module.css";
+const scratcher_module = {
+    root: "root-x61Fm1",
+    canvas: "canvas-RvA1s5"
+};
+export default scratcher_module;
+
+//# sourceMappingURL=scratcher.module.js.map

package/dist/components/ui/scratcher.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/scratcher.module.js","sources":["../../../src/components/ui/scratcher.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./scratcher_module.css\"\nexport default {\"root\":\"root-x61Fm1\",\"canvas\":\"canvas-RvA1s5\"};"],"names":[],"mappings":";AAEA,yBAAe;IAAC,MAAO;IAAc,QAAS;AAAe"}

package/dist/components/ui/scratcher_module.css

@@ -0,0 +1,13 @@
+.root-x61Fm1 {
+  -webkit-user-select: none;
+  user-select: none;
+  position: relative;
+}
+
+.canvas-RvA1s5 {
+  position: absolute;
+  inset: 0;
+}
+
+
+/*# sourceMappingURL=scratcher_module.css.map */

package/dist/components/ui/scratcher_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/scratcher.module.css","webpack://./src/components/ui/scratcher.module.css"],"names":[],"mappings":"AADA;ECEE,yBAAyB;EACzB,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,QAAQ;AACV","sourcesContent":[".root{position:relative;user-select:none}.canvas{inset:0;position:absolute}",".root {\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n}\n\n.canvas {\n  position: absolute;\n  inset: 0;\n}\n"],"sourceRoot":""}

package/dist/components/ui/scroll-area.d.ts

@@ -1,6 +1,49 @@
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import * as React from "react";
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ScrollAreaProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>;
+type ScrollBarProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Scrollbar>;
+/**
+ * Coordinates scroll area layout and scrolling behavior.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>Content</ScrollArea>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the scroll bar.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <ScrollBar>Content</ScrollBar>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}
+ */
+declare function ScrollBar(props: Readonly<ScrollBar.Props>): React.ReactElement;
+declare namespace ScrollBar {
+    var displayName: string;
+}
+declare namespace ScrollArea {
+    type Props = ScrollAreaProps;
+    type State = BaseScrollArea.Root.State;
+}
+declare namespace ScrollBar {
+    type Props = ScrollBarProps;
+    type State = BaseScrollArea.Scrollbar.State;
+}
 export { ScrollArea, ScrollBar };
 //# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,UAAU,+JAYd,CAAC;AAGH,QAAA,MAAM,SAAS,wKAgBb,CAAC;AAGH,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,IAAI,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAExE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,eAAe,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC/E,KAAK,cAAc,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,CAAC;AAEnF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU,qLAqBf,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAoBvE;kBApBQ,SAAS;;;AAuBlB,kBAAU,UAAU,CAAC;IACnB,KAAY,KAAK,GAAG,eAAe,CAAC;IACpC,KAAY,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;CAC/C;AAGD,kBAAU,SAAS,CAAC;IAClB,KAAY,KAAK,GAAG,cAAc,CAAC;IACnC,KAAY,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;CACpD;AAKD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,CAAC"}

package/dist/components/ui/scroll-area.js

@@ -1,32 +1,57 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Corner, Root, ScrollAreaScrollbar, ScrollAreaThumb, Viewport } from "@radix-ui/react-scroll-area";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import { useRender } from "@base-ui/react/use-render";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-const ScrollArea = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(Root, {
+import scroll_area_module from "./scroll-area.module.js";
+const scroll_area_ScrollArea = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsxs(ScrollArea.Root, {
         ref: ref,
-        className: cn("relative overflow-hidden", className),
-        ...props,
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(scroll_area_module.root, className)
+            }, {})
+        }),
         children: [
-            /*#__PURE__*/ jsx(Viewport, {
-                className: "h-full w-full rounded-[inherit]",
-                children: children
+            /*#__PURE__*/ jsx(ScrollArea.Viewport, {
+                className: scroll_area_module.viewport,
+                children: /*#__PURE__*/ jsx(ScrollArea.Content, {
+                    className: scroll_area_module.content,
+                    children: children
+                })
             }),
             /*#__PURE__*/ jsx(ScrollBar, {}),
-            /*#__PURE__*/ jsx(Corner, {})
+            /*#__PURE__*/ jsx(ScrollArea.Corner, {
+                className: scroll_area_module.corner
+            })
         ]
-    }));
-ScrollArea.displayName = Root.displayName;
-const ScrollBar = /*#__PURE__*/ forwardRef(({ className, orientation = "vertical", ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaScrollbar, {
-        ref: ref,
+    });
+});
+function ScrollBar(props) {
+    const { className, orientation = "vertical", render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
         orientation: orientation,
-        className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-2.5 border-l border-l-transparent p-[1px]", "horizontal" === orientation && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
-        ...props,
-        children: /*#__PURE__*/ jsx(ScrollAreaThumb, {
-            className: "relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800"
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(scroll_area_module.scrollbar, "vertical" === orientation ? scroll_area_module.vertical : scroll_area_module.horizontal, className)
+            }, {})
+        }),
+        children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
+            className: scroll_area_module.thumb
         })
-    }));
-ScrollBar.displayName = ScrollAreaScrollbar.displayName;
-export { ScrollArea, ScrollBar };
+    });
+}
+scroll_area_ScrollArea.displayName = "ScrollArea";
+ScrollBar.displayName = "ScrollBar";
+export { ScrollBar, scroll_area_ScrollArea as ScrollArea };
 
 //# sourceMappingURL=scroll-area.js.map

package/dist/components/ui/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/scroll-area.js","sources":["../../../src/components/ui/scroll-area.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst ScrollArea = React.forwardRef<\r\n  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\r\n>(({className, children, ...props}, ref) => (\r\n  <ScrollAreaPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\"relative overflow-hidden\", className)}\r\n    {...props}>\r\n    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>{children}</ScrollAreaPrimitive.Viewport>\r\n    <ScrollBar />\r\n    <ScrollAreaPrimitive.Corner />\r\n  </ScrollAreaPrimitive.Root>\r\n));\r\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\r\n\r\nconst ScrollBar = React.forwardRef<\r\n  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\r\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\r\n>(({className, orientation = \"vertical\", ...props}, ref) => (\r\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\r\n    ref={ref}\r\n    orientation={orientation}\r\n    className={cn(\r\n      \"flex touch-none transition-colors select-none\",\r\n      orientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\r\n      orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\r\n      className,\r\n    )}\r\n    {...props}>\r\n    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800' />\r\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\r\n));\r\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\r\n\r\nexport {ScrollArea, ScrollBar};\r\n"],"names":["ScrollArea","React","className","children","props","ref","ScrollAreaPrimitive","cn","ScrollBar","orientation"],"mappings":";;;;;AAOA,MAAMA,aAAa,WAAbA,GAAaC,WAGjB,CAAC,EAACC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GAClC,KAACC,MAAwB;QACvB,KAAKD;QACL,WAAWE,GAAG,4BAA4BL;QACzC,GAAGE,KAAK;;0BACT,IAACE,UAA4B;gBAAC,WAAU;0BAAmCH;;0BAC3E,IAACK,WAAAA,CAAAA;0BACD,IAACF,QAA0B;;;AAG/BN,WAAW,WAAW,GAAGM,KAAAA,WAAoC;AAE7D,MAAME,YAAY,WAAZA,GAAYP,WAGhB,CAAC,EAACC,SAAS,EAAEO,cAAc,UAAU,EAAE,GAAGL,OAAM,EAAEC,MAAAA,WAAAA,GAClD,IAACC,qBAAuC;QACtC,KAAKD;QACL,aAAaI;QACb,WAAWF,GACT,iDACAE,AAAgB,eAAhBA,eAA8B,sDAC9BA,AAAgB,iBAAhBA,eAAgC,wDAChCP;QAED,GAAGE,KAAK;kBACT,kBAACE,iBAAmC;YAAC,WAAU;;;AAGnDE,UAAU,WAAW,GAAGF,oBAAAA,WAAmD"}
+{"version":3,"file":"components/ui/scroll-area.js","sources":["../../../src/components/ui/scroll-area.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {ScrollArea as BaseScrollArea} from \"@base-ui/react/scroll-area\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./scroll-area.module.css\";\r\n\r\ntype ScrollAreaProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>;\r\ntype ScrollBarProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Scrollbar>;\r\n\r\n/**\r\n * Coordinates scroll area layout and scrolling behavior.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <ScrollArea>Content</ScrollArea>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}\r\n */\r\nconst ScrollArea = React.forwardRef<React.ComponentRef<typeof BaseScrollArea.Root>, ScrollArea.Props>(\r\n  (props: Readonly<ScrollArea.Props>, ref): React.ReactElement => {\r\n    const {className, children, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <BaseScrollArea.Root\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"div\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.root, className)}, {}),\r\n        })}>\r\n        <BaseScrollArea.Viewport className={styles.viewport}>\r\n          <BaseScrollArea.Content className={styles.content}>{children}</BaseScrollArea.Content>\r\n        </BaseScrollArea.Viewport>\r\n        <ScrollBar />\r\n        <BaseScrollArea.Corner className={styles.corner} />\r\n      </BaseScrollArea.Root>\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Renders the scroll bar.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <ScrollBar>Content</ScrollBar>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}\r\n */\r\nfunction ScrollBar(props: Readonly<ScrollBar.Props>): React.ReactElement {\r\n  const {className, orientation = \"vertical\", render, ...otherProps} = props;\r\n\r\n  return (\r\n    <BaseScrollArea.Scrollbar\r\n      orientation={orientation}\r\n      {...otherProps}\r\n      render={useRender({\r\n        defaultTagName: \"div\",\r\n        render: render as never,\r\n        props: mergeProps(\r\n          {\r\n            className: cn(styles.scrollbar, orientation === \"vertical\" ? styles.vertical : styles.horizontal, className),\r\n          },\r\n          {},\r\n        ),\r\n      })}>\r\n      <BaseScrollArea.Thumb className={styles.thumb} />\r\n    </BaseScrollArea.Scrollbar>\r\n  );\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ScrollArea {\r\n  export type Props = ScrollAreaProps;\r\n  export type State = BaseScrollArea.Root.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ScrollBar {\r\n  export type Props = ScrollBarProps;\r\n  export type State = BaseScrollArea.Scrollbar.State;\r\n}\r\n\r\nScrollArea.displayName = \"ScrollArea\";\r\nScrollBar.displayName = \"ScrollBar\";\r\n\r\nexport {ScrollArea, ScrollBar};\r\n"],"names":["ScrollArea","React","props","ref","className","children","render","otherProps","BaseScrollArea","useRender","mergeProps","cn","styles","ScrollBar","orientation"],"mappings":";;;;;;;;AA4BA,MAAMA,yBAAa,WAAHA,GAAGC,WACjB,CAACC,OAAmCC;IAClC,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGL;IAErD,OAAO,WAAP,GACE,KAACM,WAAAA,IAAmB;QAClB,KAAKL;QACJ,GAAGI,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,IAAW,EAAER;YAAU,GAAG,CAAC;QAC9D;;0BACA,IAACI,WAAAA,QAAuB;gBAAC,WAAWI,mBAAAA,QAAe;0BACjD,kBAACJ,WAAAA,OAAsB;oBAAC,WAAWI,mBAAAA,OAAc;8BAAGP;;;0BAEtD,IAACQ,WAASA,CAAAA;0BACV,IAACL,WAAAA,MAAqB;gBAAC,WAAWI,mBAAAA,MAAa;;;;AAGrD;AAkBF,SAASC,UAAUX,KAAgC;IACjD,MAAM,EAACE,SAAS,EAAEU,cAAc,UAAU,EAAER,MAAM,EAAE,GAAGC,YAAW,GAAGL;IAErE,OAAO,WAAP,GACE,IAACM,WAAAA,SAAwB;QACvB,aAAaM;QACZ,GAAGP,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WACL;gBACE,WAAWC,GAAGC,mBAAAA,SAAgB,EAAEE,AAAgB,eAAhBA,cAA6BF,mBAAAA,QAAe,GAAGA,mBAAAA,UAAiB,EAAER;YACpG,GACA,CAAC;QAEL;kBACA,kBAACI,WAAAA,KAAoB;YAAC,WAAWI,mBAAAA,KAAY;;;AAGnD;AAcAZ,uBAAW,WAAW,GAAG;AACzBa,UAAU,WAAW,GAAG"}

package/dist/components/ui/scroll-area.module.js

@@ -0,0 +1,14 @@
+import "./scroll-area_module.css";
+const scroll_area_module = {
+    root: "root-PHMnj2",
+    viewport: "viewport-gb0rys",
+    content: "content-NurFf1",
+    scrollbar: "scrollbar-DRWGyJ",
+    vertical: "vertical-JL0pek",
+    horizontal: "horizontal-Njbt1v",
+    thumb: "thumb-sOMmuA",
+    corner: "corner-u_EeOP"
+};
+export default scroll_area_module;
+
+//# sourceMappingURL=scroll-area.module.js.map

package/dist/components/ui/scroll-area.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/scroll-area.module.js","sources":["../../../src/components/ui/scroll-area.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./scroll-area_module.css\"\nexport default {\"root\":\"root-PHMnj2\",\"viewport\":\"viewport-gb0rys\",\"content\":\"content-NurFf1\",\"scrollbar\":\"scrollbar-DRWGyJ\",\"vertical\":\"vertical-JL0pek\",\"horizontal\":\"horizontal-Njbt1v\",\"thumb\":\"thumb-sOMmuA\",\"corner\":\"corner-u_EeOP\"};"],"names":[],"mappings":";AAEA,2BAAe;IAAC,MAAO;IAAc,UAAW;IAAkB,SAAU;IAAiB,WAAY;IAAmB,UAAW;IAAkB,YAAa;IAAoB,OAAQ;IAAe,QAAS;AAAe"}

package/dist/components/ui/scroll-area_module.css

@@ -0,0 +1,51 @@
+.root-PHMnj2 {
+  position: relative;
+  overflow: hidden;
+}
+
+.viewport-gb0rys {
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.content-NurFf1 {
+  min-width: 100%;
+}
+
+.scrollbar-DRWGyJ {
+  touch-action: none;
+  transition: background-color var(--ac-transition-fast);
+  -webkit-user-select: none;
+  user-select: none;
+  display: flex;
+}
+
+.vertical-JL0pek {
+  border-left: 1px solid #0000;
+  width: .625rem;
+  height: 100%;
+  padding: 1px;
+}
+
+.horizontal-Njbt1v {
+  border-top: 1px solid #0000;
+  flex-direction: column;
+  width: 100%;
+  height: .625rem;
+  padding: 1px;
+}
+
+.thumb-sOMmuA {
+  background-color: var(--ac-border);
+  border-radius: 999px;
+  flex: 1;
+  position: relative;
+}
+
+.corner-u_EeOP {
+  background-color: #0000;
+}
+
+
+/*# sourceMappingURL=scroll-area_module.css.map */