@shipfox/react-ui 0.6.0 → 0.7.0

package/.storybook/main.ts

@@ -1,17 +1,24 @@
-import {resolve} from 'node:path';
 import type {StorybookConfig} from '@storybook/react-vite';
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
 
 const config: StorybookConfig = {
   framework: '@storybook/react-vite',
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['storybook-addon-pseudo-states', '@storybook/addon-vitest'],
-  viteFinal: (config) => {
-    config.plugins = config.plugins ?? [];
+  viteFinal: async (config) => {
+    const [{default: react}, {default: tailwindcss}, {fileURLToPath}, {dirname, resolve}] =
+      await Promise.all([
+        import('@vitejs/plugin-react'),
+        import('@tailwindcss/vite'),
+        import('node:url'),
+        import('node:path'),
+      ]);
 
+    config.plugins = config.plugins ?? [];
     config.plugins.push(react(), tailwindcss());
 
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+
     config.resolve = config.resolve ?? {};
     config.resolve.alias = {
       ...config.resolve.alias,

package/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.6.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.7.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
 > swc && pnpm run build:css
 
-Successfully compiled: 114 files with swc (419.67ms)
+Successfully compiled: 116 files with swc (406.75ms)
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.6.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.7.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
 > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
 
 vite v7.2.2 building client environment for production...
@@ -14,6 +14,6 @@ transforming...
 ✓ 2 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/styles.css    84.61 kB │ gzip: 13.44 kB
+dist/styles.css    84.62 kB │ gzip: 13.44 kB
 dist/css-entry.js   0.00 kB │ gzip:  0.02 kB
-✓ built in 1.97s
+✓ built in 745ms

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.6.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.7.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 133 files in 500ms. No fixes applied.
+Checked 135 files in 240ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.6.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.7.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @shipfox/react-ui
 
+## 0.7.0
+
+### Minor Changes
+
+- 6054e39: Add Dot-grid component
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/components/dot-grid/dot-grid.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface DotGridProps {
+    dotSize?: number;
+    gap?: number;
+    baseColor?: string;
+    activeColor?: string;
+    proximity?: number;
+    speedTrigger?: number;
+    shockRadius?: number;
+    shockStrength?: number;
+    maxSpeed?: number;
+    resistance?: number;
+    returnDuration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DotGrid({ dotSize, gap, baseColor, activeColor, proximity, speedTrigger, shockRadius, shockStrength, maxSpeed, resistance, returnDuration, className, style, }: DotGridProps): React.JSX.Element;
+//# sourceMappingURL=dot-grid.d.ts.map

package/dist/components/dot-grid/dot-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot-grid.d.ts","sourceRoot":"","sources":["../../../src/components/dot-grid/dot-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkBD,wBAAgB,OAAO,CAAC,EACtB,OAAY,EACZ,GAAQ,EACR,SAAqB,EACrB,WAAuB,EACvB,SAAe,EACf,YAAkB,EAClB,WAAiB,EACjB,aAAiB,EACjB,QAAe,EACf,UAAgB,EAChB,cAAoB,EACpB,SAAc,EACd,KAAK,GACN,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyPlC"}

package/dist/components/dot-grid/dot-grid.js

@@ -0,0 +1,295 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { gsap } from 'gsap';
+import { InertiaPlugin } from 'gsap/InertiaPlugin';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { cn } from '../../utils/index.js';
+gsap.registerPlugin(InertiaPlugin);
+const HEX_COLOR_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+const throttle = (func, limit)=>{
+    let lastCall = 0;
+    return (...args)=>{
+        const now = performance.now();
+        if (now - lastCall >= limit) {
+            lastCall = now;
+            func(...args);
+        }
+    };
+};
+function hexToRgb(hex) {
+    const m = hex.match(HEX_COLOR_REGEX);
+    if (!m) return {
+        r: 0,
+        g: 0,
+        b: 0
+    };
+    return {
+        r: parseInt(m[1], 16),
+        g: parseInt(m[2], 16),
+        b: parseInt(m[3], 16)
+    };
+}
+export function DotGrid({ dotSize = 16, gap = 32, baseColor = '#5227FF', activeColor = '#5227FF', proximity = 150, speedTrigger = 100, shockRadius = 250, shockStrength = 5, maxSpeed = 5000, resistance = 750, returnDuration = 1.5, className = '', style }) {
+    const wrapperRef = useRef(null);
+    const canvasRef = useRef(null);
+    const dotsRef = useRef([]);
+    const pointerRef = useRef({
+        x: 0,
+        y: 0,
+        vx: 0,
+        vy: 0,
+        speed: 0,
+        lastTime: 0,
+        lastX: 0,
+        lastY: 0
+    });
+    const baseRgb = useMemo(()=>hexToRgb(baseColor), [
+        baseColor
+    ]);
+    const activeRgb = useMemo(()=>hexToRgb(activeColor), [
+        activeColor
+    ]);
+    const colorGradient = useMemo(()=>{
+        const gradient = new Array(256);
+        for(let i = 0; i < 256; i++){
+            const normalizedSqDist = i / 255;
+            const normalizedDist = Math.sqrt(normalizedSqDist);
+            const t = 1 - normalizedDist;
+            const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);
+            const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);
+            const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);
+            gradient[i] = `rgb(${r},${g},${b})`;
+        }
+        return gradient;
+    }, [
+        baseRgb,
+        activeRgb
+    ]);
+    const circlePath = useMemo(()=>{
+        if (typeof window === 'undefined' || !window.Path2D) return null;
+        const p = new Path2D();
+        p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);
+        return p;
+    }, [
+        dotSize
+    ]);
+    const buildGrid = useCallback(()=>{
+        const wrap = wrapperRef.current;
+        const canvas = canvasRef.current;
+        if (!wrap || !canvas) return;
+        const { width, height } = wrap.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        const ctx = canvas.getContext('2d');
+        if (ctx) ctx.scale(dpr, dpr);
+        const cols = Math.floor((width + gap) / (dotSize + gap));
+        const rows = Math.floor((height + gap) / (dotSize + gap));
+        const cell = dotSize + gap;
+        const gridW = cell * cols - gap;
+        const gridH = cell * rows - gap;
+        const extraX = width - gridW;
+        const extraY = height - gridH;
+        const startX = extraX / 2 + dotSize / 2;
+        const startY = extraY / 2 + dotSize / 2;
+        const dots = [];
+        for(let y = 0; y < rows; y++){
+            for(let x = 0; x < cols; x++){
+                const cx = startX + x * cell;
+                const cy = startY + y * cell;
+                dots.push({
+                    cx,
+                    cy,
+                    xOffset: 0,
+                    yOffset: 0,
+                    _inertiaApplied: false
+                });
+            }
+        }
+        dotsRef.current = dots;
+    }, [
+        dotSize,
+        gap
+    ]);
+    useEffect(()=>{
+        if (!circlePath) return;
+        let rafId;
+        const proxSq = proximity * proximity;
+        const draw = ()=>{
+            const canvas = canvasRef.current;
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const { x: px, y: py } = pointerRef.current;
+            for (const dot of dotsRef.current){
+                const ox = dot.cx + dot.xOffset;
+                const oy = dot.cy + dot.yOffset;
+                const dx = dot.cx - px;
+                const dy = dot.cy - py;
+                const dsq = dx * dx + dy * dy;
+                let fillColor = baseColor;
+                if (dsq <= proxSq) {
+                    const normalizedSqDist = dsq / proxSq;
+                    const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));
+                    fillColor = colorGradient[index];
+                }
+                ctx.save();
+                ctx.translate(ox, oy);
+                ctx.fillStyle = fillColor;
+                ctx.fill(circlePath);
+                ctx.restore();
+            }
+            rafId = requestAnimationFrame(draw);
+        };
+        draw();
+        return ()=>cancelAnimationFrame(rafId);
+    }, [
+        proximity,
+        baseColor,
+        colorGradient,
+        circlePath
+    ]);
+    useEffect(()=>{
+        buildGrid();
+        let ro = null;
+        if ('ResizeObserver' in window) {
+            ro = new ResizeObserver(buildGrid);
+            wrapperRef.current && ro.observe(wrapperRef.current);
+        } else {
+            window.addEventListener('resize', buildGrid);
+        }
+        return ()=>{
+            if (ro) ro.disconnect();
+            else window.removeEventListener('resize', buildGrid);
+        };
+    }, [
+        buildGrid
+    ]);
+    useEffect(()=>{
+        const onMove = (e)=>{
+            const now = performance.now();
+            const pr = pointerRef.current;
+            const dt = pr.lastTime ? now - pr.lastTime : 16;
+            const dx = e.clientX - pr.lastX;
+            const dy = e.clientY - pr.lastY;
+            let vx = dx / dt * 1000;
+            let vy = dy / dt * 1000;
+            let speed = Math.hypot(vx, vy);
+            if (speed > maxSpeed) {
+                const scale = maxSpeed / speed;
+                vx *= scale;
+                vy *= scale;
+                speed = maxSpeed;
+            }
+            pr.lastTime = now;
+            pr.lastX = e.clientX;
+            pr.lastY = e.clientY;
+            pr.vx = vx;
+            pr.vy = vy;
+            pr.speed = speed;
+            const canvas = canvasRef.current;
+            if (!canvas) return;
+            const rect = canvas.getBoundingClientRect();
+            pr.x = e.clientX - rect.left;
+            pr.y = e.clientY - rect.top;
+            for (const dot of dotsRef.current){
+                const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);
+                if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {
+                    dot._inertiaApplied = true;
+                    gsap.killTweensOf(dot);
+                    const pushX = dot.cx - pr.x + vx * 0.005;
+                    const pushY = dot.cy - pr.y + vy * 0.005;
+                    gsap.to(dot, {
+                        inertia: {
+                            xOffset: pushX,
+                            yOffset: pushY,
+                            resistance
+                        },
+                        onComplete: ()=>{
+                            gsap.to(dot, {
+                                xOffset: 0,
+                                yOffset: 0,
+                                duration: returnDuration,
+                                ease: 'elastic.out(1,0.75)'
+                            });
+                            dot._inertiaApplied = false;
+                        }
+                    });
+                }
+            }
+        };
+        const onClick = (e)=>{
+            const canvas = canvasRef.current;
+            if (!canvas) return;
+            const rect = canvas.getBoundingClientRect();
+            const cx = e.clientX - rect.left;
+            const cy = e.clientY - rect.top;
+            for (const dot of dotsRef.current){
+                const dist = Math.hypot(dot.cx - cx, dot.cy - cy);
+                if (dist < shockRadius && !dot._inertiaApplied) {
+                    dot._inertiaApplied = true;
+                    gsap.killTweensOf(dot);
+                    const falloff = Math.max(0, 1 - dist / shockRadius);
+                    const pushX = (dot.cx - cx) * shockStrength * falloff;
+                    const pushY = (dot.cy - cy) * shockStrength * falloff;
+                    gsap.to(dot, {
+                        inertia: {
+                            xOffset: pushX,
+                            yOffset: pushY,
+                            resistance
+                        },
+                        onComplete: ()=>{
+                            gsap.to(dot, {
+                                xOffset: 0,
+                                yOffset: 0,
+                                duration: returnDuration,
+                                ease: 'elastic.out(1,0.75)'
+                            });
+                            dot._inertiaApplied = false;
+                        }
+                    });
+                }
+            }
+        };
+        const throttledMove = throttle(onMove, 50);
+        const wrapper = wrapperRef.current;
+        if (wrapper) {
+            wrapper.addEventListener('mousemove', throttledMove, {
+                passive: true
+            });
+            wrapper.addEventListener('click', onClick);
+        }
+        return ()=>{
+            if (wrapper) {
+                wrapper.removeEventListener('mousemove', throttledMove);
+                wrapper.removeEventListener('click', onClick);
+            }
+        };
+    }, [
+        maxSpeed,
+        speedTrigger,
+        proximity,
+        resistance,
+        returnDuration,
+        shockRadius,
+        shockStrength
+    ]);
+    return /*#__PURE__*/ _jsx("section", {
+        className: cn('p-4 flex items-center justify-center h-full w-full relative', className),
+        style: style,
+        role: "presentation",
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: wrapperRef,
+            className: "w-full h-full relative",
+            children: /*#__PURE__*/ _jsx("canvas", {
+                ref: canvasRef,
+                className: "absolute inset-0 w-full h-full pointer-events-none",
+                "aria-hidden": "true"
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=dot-grid.js.map

package/dist/components/dot-grid/dot-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dot-grid/dot-grid.tsx"],"sourcesContent":["import {gsap} from 'gsap';\nimport {InertiaPlugin} from 'gsap/InertiaPlugin';\nimport type React from 'react';\nimport {useCallback, useEffect, useMemo, useRef} from 'react';\nimport {cn} from 'utils';\n\ngsap.registerPlugin(InertiaPlugin);\n\nconst HEX_COLOR_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nconst throttle = <T extends (...args: never[]) => void>(func: T, limit: number): T => {\n  let lastCall = 0;\n  return ((...args: Parameters<T>) => {\n    const now = performance.now();\n    if (now - lastCall >= limit) {\n      lastCall = now;\n      func(...args);\n    }\n  }) as T;\n};\n\ninterface Dot {\n  cx: number;\n  cy: number;\n  xOffset: number;\n  yOffset: number;\n  _inertiaApplied: boolean;\n}\n\nexport interface DotGridProps {\n  dotSize?: number;\n  gap?: number;\n  baseColor?: string;\n  activeColor?: string;\n  proximity?: number;\n  speedTrigger?: number;\n  shockRadius?: number;\n  shockStrength?: number;\n  maxSpeed?: number;\n  resistance?: number;\n  returnDuration?: number;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\ntype RgbColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nfunction hexToRgb(hex: string): RgbColor {\n  const m = hex.match(HEX_COLOR_REGEX);\n  if (!m) return {r: 0, g: 0, b: 0};\n  return {\n    r: parseInt(m[1], 16),\n    g: parseInt(m[2], 16),\n    b: parseInt(m[3], 16),\n  };\n}\n\nexport function DotGrid({\n  dotSize = 16,\n  gap = 32,\n  baseColor = '#5227FF',\n  activeColor = '#5227FF',\n  proximity = 150,\n  speedTrigger = 100,\n  shockRadius = 250,\n  shockStrength = 5,\n  maxSpeed = 5000,\n  resistance = 750,\n  returnDuration = 1.5,\n  className = '',\n  style,\n}: DotGridProps): React.JSX.Element {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const dotsRef = useRef<Dot[]>([]);\n  const pointerRef = useRef({\n    x: 0,\n    y: 0,\n    vx: 0,\n    vy: 0,\n    speed: 0,\n    lastTime: 0,\n    lastX: 0,\n    lastY: 0,\n  });\n\n  const baseRgb = useMemo(() => hexToRgb(baseColor), [baseColor]);\n  const activeRgb = useMemo(() => hexToRgb(activeColor), [activeColor]);\n\n  const colorGradient = useMemo(() => {\n    const gradient: string[] = new Array(256);\n    for (let i = 0; i < 256; i++) {\n      const normalizedSqDist = i / 255;\n      const normalizedDist = Math.sqrt(normalizedSqDist);\n      const t = 1 - normalizedDist;\n      const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);\n      const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);\n      const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);\n      gradient[i] = `rgb(${r},${g},${b})`;\n    }\n    return gradient;\n  }, [baseRgb, activeRgb]);\n\n  const circlePath = useMemo(() => {\n    if (typeof window === 'undefined' || !window.Path2D) return null;\n\n    const p = new Path2D();\n    p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);\n    return p;\n  }, [dotSize]);\n\n  const buildGrid = useCallback(() => {\n    const wrap = wrapperRef.current;\n    const canvas = canvasRef.current;\n    if (!wrap || !canvas) return;\n\n    const {width, height} = wrap.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n\n    canvas.width = width * dpr;\n    canvas.height = height * dpr;\n    canvas.style.width = `${width}px`;\n    canvas.style.height = `${height}px`;\n    const ctx = canvas.getContext('2d');\n    if (ctx) ctx.scale(dpr, dpr);\n\n    const cols = Math.floor((width + gap) / (dotSize + gap));\n    const rows = Math.floor((height + gap) / (dotSize + gap));\n    const cell = dotSize + gap;\n\n    const gridW = cell * cols - gap;\n    const gridH = cell * rows - gap;\n\n    const extraX = width - gridW;\n    const extraY = height - gridH;\n\n    const startX = extraX / 2 + dotSize / 2;\n    const startY = extraY / 2 + dotSize / 2;\n\n    const dots: Dot[] = [];\n    for (let y = 0; y < rows; y++) {\n      for (let x = 0; x < cols; x++) {\n        const cx = startX + x * cell;\n        const cy = startY + y * cell;\n        dots.push({cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false});\n      }\n    }\n    dotsRef.current = dots;\n  }, [dotSize, gap]);\n\n  useEffect(() => {\n    if (!circlePath) return;\n\n    let rafId: number;\n    const proxSq = proximity * proximity;\n\n    const draw = () => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      const {x: px, y: py} = pointerRef.current;\n\n      for (const dot of dotsRef.current) {\n        const ox = dot.cx + dot.xOffset;\n        const oy = dot.cy + dot.yOffset;\n        const dx = dot.cx - px;\n        const dy = dot.cy - py;\n        const dsq = dx * dx + dy * dy;\n\n        let fillColor = baseColor;\n        if (dsq <= proxSq) {\n          const normalizedSqDist = dsq / proxSq;\n          const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));\n          fillColor = colorGradient[index];\n        }\n\n        ctx.save();\n        ctx.translate(ox, oy);\n        ctx.fillStyle = fillColor;\n        ctx.fill(circlePath);\n        ctx.restore();\n      }\n\n      rafId = requestAnimationFrame(draw);\n    };\n\n    draw();\n    return () => cancelAnimationFrame(rafId);\n  }, [proximity, baseColor, colorGradient, circlePath]);\n\n  useEffect(() => {\n    buildGrid();\n    let ro: ResizeObserver | null = null;\n    if ('ResizeObserver' in window) {\n      ro = new ResizeObserver(buildGrid);\n      wrapperRef.current && ro.observe(wrapperRef.current);\n    } else {\n      (window as Window).addEventListener('resize', buildGrid);\n    }\n    return () => {\n      if (ro) ro.disconnect();\n      else window.removeEventListener('resize', buildGrid);\n    };\n  }, [buildGrid]);\n\n  useEffect(() => {\n    const onMove = (e: MouseEvent) => {\n      const now = performance.now();\n      const pr = pointerRef.current;\n      const dt = pr.lastTime ? now - pr.lastTime : 16;\n      const dx = e.clientX - pr.lastX;\n      const dy = e.clientY - pr.lastY;\n      let vx = (dx / dt) * 1000;\n      let vy = (dy / dt) * 1000;\n      let speed = Math.hypot(vx, vy);\n      if (speed > maxSpeed) {\n        const scale = maxSpeed / speed;\n        vx *= scale;\n        vy *= scale;\n        speed = maxSpeed;\n      }\n      pr.lastTime = now;\n      pr.lastX = e.clientX;\n      pr.lastY = e.clientY;\n      pr.vx = vx;\n      pr.vy = vy;\n      pr.speed = speed;\n\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const rect = canvas.getBoundingClientRect();\n      pr.x = e.clientX - rect.left;\n      pr.y = e.clientY - rect.top;\n\n      for (const dot of dotsRef.current) {\n        const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);\n        if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {\n          dot._inertiaApplied = true;\n          gsap.killTweensOf(dot);\n          const pushX = dot.cx - pr.x + vx * 0.005;\n          const pushY = dot.cy - pr.y + vy * 0.005;\n          gsap.to(dot, {\n            inertia: {xOffset: pushX, yOffset: pushY, resistance},\n            onComplete: () => {\n              gsap.to(dot, {\n                xOffset: 0,\n                yOffset: 0,\n                duration: returnDuration,\n                ease: 'elastic.out(1,0.75)',\n              });\n              dot._inertiaApplied = false;\n            },\n          });\n        }\n      }\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const rect = canvas.getBoundingClientRect();\n      const cx = e.clientX - rect.left;\n      const cy = e.clientY - rect.top;\n      for (const dot of dotsRef.current) {\n        const dist = Math.hypot(dot.cx - cx, dot.cy - cy);\n        if (dist < shockRadius && !dot._inertiaApplied) {\n          dot._inertiaApplied = true;\n          gsap.killTweensOf(dot);\n          const falloff = Math.max(0, 1 - dist / shockRadius);\n          const pushX = (dot.cx - cx) * shockStrength * falloff;\n          const pushY = (dot.cy - cy) * shockStrength * falloff;\n          gsap.to(dot, {\n            inertia: {xOffset: pushX, yOffset: pushY, resistance},\n            onComplete: () => {\n              gsap.to(dot, {\n                xOffset: 0,\n                yOffset: 0,\n                duration: returnDuration,\n                ease: 'elastic.out(1,0.75)',\n              });\n              dot._inertiaApplied = false;\n            },\n          });\n        }\n      }\n    };\n\n    const throttledMove = throttle(onMove, 50) as (e: MouseEvent) => void;\n    const wrapper = wrapperRef.current;\n    if (wrapper) {\n      wrapper.addEventListener('mousemove', throttledMove, {passive: true});\n      wrapper.addEventListener('click', onClick);\n    }\n    return () => {\n      if (wrapper) {\n        wrapper.removeEventListener('mousemove', throttledMove);\n        wrapper.removeEventListener('click', onClick);\n      }\n    };\n  }, [maxSpeed, speedTrigger, proximity, resistance, returnDuration, shockRadius, shockStrength]);\n\n  return (\n    <section\n      className={cn('p-4 flex items-center justify-center h-full w-full relative', className)}\n      style={style}\n      role=\"presentation\"\n    >\n      <div ref={wrapperRef} className=\"w-full h-full relative\">\n        {/** biome-ignore lint/a11y/noAriaHiddenOnFocusable: <canvas is not focusable> */}\n        <canvas\n          ref={canvasRef}\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </section>\n  );\n}\n"],"names":["gsap","InertiaPlugin","useCallback","useEffect","useMemo","useRef","cn","registerPlugin","HEX_COLOR_REGEX","throttle","func","limit","lastCall","args","now","performance","hexToRgb","hex","m","match","r","g","b","parseInt","DotGrid","dotSize","gap","baseColor","activeColor","proximity","speedTrigger","shockRadius","shockStrength","maxSpeed","resistance","returnDuration","className","style","wrapperRef","canvasRef","dotsRef","pointerRef","x","y","vx","vy","speed","lastTime","lastX","lastY","baseRgb","activeRgb","colorGradient","gradient","Array","i","normalizedSqDist","normalizedDist","Math","sqrt","t","round","circlePath","window","Path2D","p","arc","PI","buildGrid","wrap","current","canvas","width","height","getBoundingClientRect","dpr","devicePixelRatio","ctx","getContext","scale","cols","floor","rows","cell","gridW","gridH","extraX","extraY","startX","startY","dots","cx","cy","push","xOffset","yOffset","_inertiaApplied","rafId","proxSq","draw","clearRect","px","py","dot","ox","oy","dx","dy","dsq","fillColor","index","min","max","save","translate","fillStyle","fill","restore","requestAnimationFrame","cancelAnimationFrame","ro","ResizeObserver","observe","addEventListener","disconnect","removeEventListener","onMove","e","pr","dt","clientX","clientY","hypot","rect","left","top","dist","killTweensOf","pushX","pushY","to","inertia","onComplete","duration","ease","onClick","falloff","throttledMove","wrapper","passive","section","role","div","ref","aria-hidden"],"mappings":";AAAA,SAAQA,IAAI,QAAO,OAAO;AAC1B,SAAQC,aAAa,QAAO,qBAAqB;AAEjD,SAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAO,QAAQ;AAC9D,SAAQC,EAAE,QAAO,QAAQ;AAEzBN,KAAKO,cAAc,CAACN;AAEpB,MAAMO,kBAAkB;AAExB,MAAMC,WAAW,CAAuCC,MAASC;IAC/D,IAAIC,WAAW;IACf,OAAQ,CAAC,GAAGC;QACV,MAAMC,MAAMC,YAAYD,GAAG;QAC3B,IAAIA,MAAMF,YAAYD,OAAO;YAC3BC,WAAWE;YACXJ,QAAQG;QACV;IACF;AACF;AAgCA,SAASG,SAASC,GAAW;IAC3B,MAAMC,IAAID,IAAIE,KAAK,CAACX;IACpB,IAAI,CAACU,GAAG,OAAO;QAACE,GAAG;QAAGC,GAAG;QAAGC,GAAG;IAAC;IAChC,OAAO;QACLF,GAAGG,SAASL,CAAC,CAAC,EAAE,EAAE;QAClBG,GAAGE,SAASL,CAAC,CAAC,EAAE,EAAE;QAClBI,GAAGC,SAASL,CAAC,CAAC,EAAE,EAAE;IACpB;AACF;AAEA,OAAO,SAASM,QAAQ,EACtBC,UAAU,EAAE,EACZC,MAAM,EAAE,EACRC,YAAY,SAAS,EACrBC,cAAc,SAAS,EACvBC,YAAY,GAAG,EACfC,eAAe,GAAG,EAClBC,cAAc,GAAG,EACjBC,gBAAgB,CAAC,EACjBC,WAAW,IAAI,EACfC,aAAa,GAAG,EAChBC,iBAAiB,GAAG,EACpBC,YAAY,EAAE,EACdC,KAAK,EACQ;IACb,MAAMC,aAAajC,OAAuB;IAC1C,MAAMkC,YAAYlC,OAA0B;IAC5C,MAAMmC,UAAUnC,OAAc,EAAE;IAChC,MAAMoC,aAAapC,OAAO;QACxBqC,GAAG;QACHC,GAAG;QACHC,IAAI;QACJC,IAAI;QACJC,OAAO;QACPC,UAAU;QACVC,OAAO;QACPC,OAAO;IACT;IAEA,MAAMC,UAAU9C,QAAQ,IAAMY,SAASW,YAAY;QAACA;KAAU;IAC9D,MAAMwB,YAAY/C,QAAQ,IAAMY,SAASY,cAAc;QAACA;KAAY;IAEpE,MAAMwB,gBAAgBhD,QAAQ;QAC5B,MAAMiD,WAAqB,IAAIC,MAAM;QACrC,IAAK,IAAIC,IAAI,GAAGA,IAAI,KAAKA,IAAK;YAC5B,MAAMC,mBAAmBD,IAAI;YAC7B,MAAME,iBAAiBC,KAAKC,IAAI,CAACH;YACjC,MAAMI,IAAI,IAAIH;YACd,MAAMrC,IAAIsC,KAAKG,KAAK,CAACX,QAAQ9B,CAAC,GAAG,AAAC+B,CAAAA,UAAU/B,CAAC,GAAG8B,QAAQ9B,CAAC,AAADA,IAAKwC;YAC7D,MAAMvC,IAAIqC,KAAKG,KAAK,CAACX,QAAQ7B,CAAC,GAAG,AAAC8B,CAAAA,UAAU9B,CAAC,GAAG6B,QAAQ7B,CAAC,AAADA,IAAKuC;YAC7D,MAAMtC,IAAIoC,KAAKG,KAAK,CAACX,QAAQ5B,CAAC,GAAG,AAAC6B,CAAAA,UAAU7B,CAAC,GAAG4B,QAAQ5B,CAAC,AAADA,IAAKsC;YAC7DP,QAAQ,CAACE,EAAE,GAAG,CAAC,IAAI,EAAEnC,EAAE,CAAC,EAAEC,EAAE,CAAC,EAAEC,EAAE,CAAC,CAAC;QACrC;QACA,OAAO+B;IACT,GAAG;QAACH;QAASC;KAAU;IAEvB,MAAMW,aAAa1D,QAAQ;QACzB,IAAI,OAAO2D,WAAW,eAAe,CAACA,OAAOC,MAAM,EAAE,OAAO;QAE5D,MAAMC,IAAI,IAAID;QACdC,EAAEC,GAAG,CAAC,GAAG,GAAGzC,UAAU,GAAG,GAAGiC,KAAKS,EAAE,GAAG;QACtC,OAAOF;IACT,GAAG;QAACxC;KAAQ;IAEZ,MAAM2C,YAAYlE,YAAY;QAC5B,MAAMmE,OAAO/B,WAAWgC,OAAO;QAC/B,MAAMC,SAAShC,UAAU+B,OAAO;QAChC,IAAI,CAACD,QAAQ,CAACE,QAAQ;QAEtB,MAAM,EAACC,KAAK,EAAEC,MAAM,EAAC,GAAGJ,KAAKK,qBAAqB;QAClD,MAAMC,MAAMZ,OAAOa,gBAAgB,IAAI;QAEvCL,OAAOC,KAAK,GAAGA,QAAQG;QACvBJ,OAAOE,MAAM,GAAGA,SAASE;QACzBJ,OAAOlC,KAAK,CAACmC,KAAK,GAAG,GAAGA,MAAM,EAAE,CAAC;QACjCD,OAAOlC,KAAK,CAACoC,MAAM,GAAG,GAAGA,OAAO,EAAE,CAAC;QACnC,MAAMI,MAAMN,OAAOO,UAAU,CAAC;QAC9B,IAAID,KAAKA,IAAIE,KAAK,CAACJ,KAAKA;QAExB,MAAMK,OAAOtB,KAAKuB,KAAK,CAAC,AAACT,CAAAA,QAAQ9C,GAAE,IAAMD,CAAAA,UAAUC,GAAE;QACrD,MAAMwD,OAAOxB,KAAKuB,KAAK,CAAC,AAACR,CAAAA,SAAS/C,GAAE,IAAMD,CAAAA,UAAUC,GAAE;QACtD,MAAMyD,OAAO1D,UAAUC;QAEvB,MAAM0D,QAAQD,OAAOH,OAAOtD;QAC5B,MAAM2D,QAAQF,OAAOD,OAAOxD;QAE5B,MAAM4D,SAASd,QAAQY;QACvB,MAAMG,SAASd,SAASY;QAExB,MAAMG,SAASF,SAAS,IAAI7D,UAAU;QACtC,MAAMgE,SAASF,SAAS,IAAI9D,UAAU;QAEtC,MAAMiE,OAAc,EAAE;QACtB,IAAK,IAAI/C,IAAI,GAAGA,IAAIuC,MAAMvC,IAAK;YAC7B,IAAK,IAAID,IAAI,GAAGA,IAAIsC,MAAMtC,IAAK;gBAC7B,MAAMiD,KAAKH,SAAS9C,IAAIyC;gBACxB,MAAMS,KAAKH,SAAS9C,IAAIwC;gBACxBO,KAAKG,IAAI,CAAC;oBAACF;oBAAIC;oBAAIE,SAAS;oBAAGC,SAAS;oBAAGC,iBAAiB;gBAAK;YACnE;QACF;QACAxD,QAAQ8B,OAAO,GAAGoB;IACpB,GAAG;QAACjE;QAASC;KAAI;IAEjBvB,UAAU;QACR,IAAI,CAAC2D,YAAY;QAEjB,IAAImC;QACJ,MAAMC,SAASrE,YAAYA;QAE3B,MAAMsE,OAAO;YACX,MAAM5B,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAMM,MAAMN,OAAOO,UAAU,CAAC;YAC9B,IAAI,CAACD,KAAK;YACVA,IAAIuB,SAAS,CAAC,GAAG,GAAG7B,OAAOC,KAAK,EAAED,OAAOE,MAAM;YAE/C,MAAM,EAAC/B,GAAG2D,EAAE,EAAE1D,GAAG2D,EAAE,EAAC,GAAG7D,WAAW6B,OAAO;YAEzC,KAAK,MAAMiC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkC,KAAKD,IAAIZ,EAAE,GAAGY,IAAIT,OAAO;gBAC/B,MAAMW,KAAKF,IAAIX,EAAE,GAAGW,IAAIR,OAAO;gBAC/B,MAAMW,KAAKH,IAAIZ,EAAE,GAAGU;gBACpB,MAAMM,KAAKJ,IAAIX,EAAE,GAAGU;gBACpB,MAAMM,MAAMF,KAAKA,KAAKC,KAAKA;gBAE3B,IAAIE,YAAYlF;gBAChB,IAAIiF,OAAOV,QAAQ;oBACjB,MAAM1C,mBAAmBoD,MAAMV;oBAC/B,MAAMY,QAAQpD,KAAKqD,GAAG,CAAC,KAAKrD,KAAKsD,GAAG,CAAC,GAAGtD,KAAKG,KAAK,CAACL,mBAAmB;oBACtEqD,YAAYzD,aAAa,CAAC0D,MAAM;gBAClC;gBAEAjC,IAAIoC,IAAI;gBACRpC,IAAIqC,SAAS,CAACV,IAAIC;gBAClB5B,IAAIsC,SAAS,GAAGN;gBAChBhC,IAAIuC,IAAI,CAACtD;gBACTe,IAAIwC,OAAO;YACb;YAEApB,QAAQqB,sBAAsBnB;QAChC;QAEAA;QACA,OAAO,IAAMoB,qBAAqBtB;IACpC,GAAG;QAACpE;QAAWF;QAAWyB;QAAeU;KAAW;IAEpD3D,UAAU;QACRiE;QACA,IAAIoD,KAA4B;QAChC,IAAI,oBAAoBzD,QAAQ;YAC9ByD,KAAK,IAAIC,eAAerD;YACxB9B,WAAWgC,OAAO,IAAIkD,GAAGE,OAAO,CAACpF,WAAWgC,OAAO;QACrD,OAAO;YACJP,OAAkB4D,gBAAgB,CAAC,UAAUvD;QAChD;QACA,OAAO;YACL,IAAIoD,IAAIA,GAAGI,UAAU;iBAChB7D,OAAO8D,mBAAmB,CAAC,UAAUzD;QAC5C;IACF,GAAG;QAACA;KAAU;IAEdjE,UAAU;QACR,MAAM2H,SAAS,CAACC;YACd,MAAMjH,MAAMC,YAAYD,GAAG;YAC3B,MAAMkH,KAAKvF,WAAW6B,OAAO;YAC7B,MAAM2D,KAAKD,GAAGjF,QAAQ,GAAGjC,MAAMkH,GAAGjF,QAAQ,GAAG;YAC7C,MAAM2D,KAAKqB,EAAEG,OAAO,GAAGF,GAAGhF,KAAK;YAC/B,MAAM2D,KAAKoB,EAAEI,OAAO,GAAGH,GAAG/E,KAAK;YAC/B,IAAIL,KAAK,AAAC8D,KAAKuB,KAAM;YACrB,IAAIpF,KAAK,AAAC8D,KAAKsB,KAAM;YACrB,IAAInF,QAAQY,KAAK0E,KAAK,CAACxF,IAAIC;YAC3B,IAAIC,QAAQb,UAAU;gBACpB,MAAM8C,QAAQ9C,WAAWa;gBACzBF,MAAMmC;gBACNlC,MAAMkC;gBACNjC,QAAQb;YACV;YACA+F,GAAGjF,QAAQ,GAAGjC;YACdkH,GAAGhF,KAAK,GAAG+E,EAAEG,OAAO;YACpBF,GAAG/E,KAAK,GAAG8E,EAAEI,OAAO;YACpBH,GAAGpF,EAAE,GAAGA;YACRoF,GAAGnF,EAAE,GAAGA;YACRmF,GAAGlF,KAAK,GAAGA;YAEX,MAAMyB,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAM8D,OAAO9D,OAAOG,qBAAqB;YACzCsD,GAAGtF,CAAC,GAAGqF,EAAEG,OAAO,GAAGG,KAAKC,IAAI;YAC5BN,GAAGrF,CAAC,GAAGoF,EAAEI,OAAO,GAAGE,KAAKE,GAAG;YAE3B,KAAK,MAAMhC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkE,OAAO9E,KAAK0E,KAAK,CAAC7B,IAAIZ,EAAE,GAAGqC,GAAGtF,CAAC,EAAE6D,IAAIX,EAAE,GAAGoC,GAAGrF,CAAC;gBACpD,IAAIG,QAAQhB,gBAAgB0G,OAAO3G,aAAa,CAAC0E,IAAIP,eAAe,EAAE;oBACpEO,IAAIP,eAAe,GAAG;oBACtBhG,KAAKyI,YAAY,CAAClC;oBAClB,MAAMmC,QAAQnC,IAAIZ,EAAE,GAAGqC,GAAGtF,CAAC,GAAGE,KAAK;oBACnC,MAAM+F,QAAQpC,IAAIX,EAAE,GAAGoC,GAAGrF,CAAC,GAAGE,KAAK;oBACnC7C,KAAK4I,EAAE,CAACrC,KAAK;wBACXsC,SAAS;4BAAC/C,SAAS4C;4BAAO3C,SAAS4C;4BAAOzG;wBAAU;wBACpD4G,YAAY;4BACV9I,KAAK4I,EAAE,CAACrC,KAAK;gCACXT,SAAS;gCACTC,SAAS;gCACTgD,UAAU5G;gCACV6G,MAAM;4BACR;4BACAzC,IAAIP,eAAe,GAAG;wBACxB;oBACF;gBACF;YACF;QACF;QAEA,MAAMiD,UAAU,CAAClB;YACf,MAAMxD,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAM8D,OAAO9D,OAAOG,qBAAqB;YACzC,MAAMiB,KAAKoC,EAAEG,OAAO,GAAGG,KAAKC,IAAI;YAChC,MAAM1C,KAAKmC,EAAEI,OAAO,GAAGE,KAAKE,GAAG;YAC/B,KAAK,MAAMhC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkE,OAAO9E,KAAK0E,KAAK,CAAC7B,IAAIZ,EAAE,GAAGA,IAAIY,IAAIX,EAAE,GAAGA;gBAC9C,IAAI4C,OAAOzG,eAAe,CAACwE,IAAIP,eAAe,EAAE;oBAC9CO,IAAIP,eAAe,GAAG;oBACtBhG,KAAKyI,YAAY,CAAClC;oBAClB,MAAM2C,UAAUxF,KAAKsD,GAAG,CAAC,GAAG,IAAIwB,OAAOzG;oBACvC,MAAM2G,QAAQ,AAACnC,CAAAA,IAAIZ,EAAE,GAAGA,EAAC,IAAK3D,gBAAgBkH;oBAC9C,MAAMP,QAAQ,AAACpC,CAAAA,IAAIX,EAAE,GAAGA,EAAC,IAAK5D,gBAAgBkH;oBAC9ClJ,KAAK4I,EAAE,CAACrC,KAAK;wBACXsC,SAAS;4BAAC/C,SAAS4C;4BAAO3C,SAAS4C;4BAAOzG;wBAAU;wBACpD4G,YAAY;4BACV9I,KAAK4I,EAAE,CAACrC,KAAK;gCACXT,SAAS;gCACTC,SAAS;gCACTgD,UAAU5G;gCACV6G,MAAM;4BACR;4BACAzC,IAAIP,eAAe,GAAG;wBACxB;oBACF;gBACF;YACF;QACF;QAEA,MAAMmD,gBAAgB1I,SAASqH,QAAQ;QACvC,MAAMsB,UAAU9G,WAAWgC,OAAO;QAClC,IAAI8E,SAAS;YACXA,QAAQzB,gBAAgB,CAAC,aAAawB,eAAe;gBAACE,SAAS;YAAI;YACnED,QAAQzB,gBAAgB,CAAC,SAASsB;QACpC;QACA,OAAO;YACL,IAAIG,SAAS;gBACXA,QAAQvB,mBAAmB,CAAC,aAAasB;gBACzCC,QAAQvB,mBAAmB,CAAC,SAASoB;YACvC;QACF;IACF,GAAG;QAAChH;QAAUH;QAAcD;QAAWK;QAAYC;QAAgBJ;QAAaC;KAAc;IAE9F,qBACE,KAACsH;QACClH,WAAW9B,GAAG,+DAA+D8B;QAC7EC,OAAOA;QACPkH,MAAK;kBAEL,cAAA,KAACC;YAAIC,KAAKnH;YAAYF,WAAU;sBAE9B,cAAA,KAACmC;gBACCkF,KAAKlH;gBACLH,WAAU;gBACVsH,eAAY;;;;AAKtB"}

package/dist/components/dot-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dot-grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dot-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dot-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/dot-grid/index.js

@@ -0,0 +1,3 @@
+export * from './dot-grid.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dot-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dot-grid/index.ts"],"sourcesContent":["export * from './dot-grid';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './badge';
 export * from './button';
 export * from './checkbox';
 export * from './code-block';
+export * from './dot-grid';
 export * from './dynamic-item';
 export * from './icon';
 export * from './inline-tips';
@@ -14,5 +15,6 @@ export * from './modal';
 export * from './textarea';
 export * from './theme';
 export * from './toast';
+export * from './tooltip';
 export * from './typography';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -4,6 +4,7 @@ export * from './badge/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
+export * from './dot-grid/index.js';
 export * from './dynamic-item/index.js';
 export * from './icon/index.js';
 export * from './inline-tips/index.js';
@@ -14,6 +15,7 @@ export * from './modal/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './toast/index.js';
+export * from './tooltip/index.js';
 export * from './typography/index.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dynamic-item';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dot-grid';\nexport * from './dynamic-item';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}

package/dist/onboarding/sign-in.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { argosScreenshot } from '@argos-ci/storybook/vitest';
 import { Avatar } from '../components/avatar/index.js';
 import { Button } from '../components/button/index.js';
+import { DotGrid } from '../components/dot-grid/index.js';
 import { Header, Text } from '../components/typography/index.js';
 const meta = {
     title: 'Onboarding/Signin',
@@ -19,14 +20,21 @@ export const Default = {
             className: "flex min-h-screen items-center justify-center bg-background-subtle-base",
             children: [
                 /*#__PURE__*/ _jsx("div", {
-                    className: "pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]",
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: "h-[332px] w-[800px] opacity-20",
-                        style: {
-                            backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,
-                            backgroundSize: '24px 24px',
-                            backgroundPosition: '-80px 31px'
-                        }
+                    className: "absolute w-[800px] max-w-[800px] h-[400px] top-0 left-1/2 -translate-x-1/2 translate-y-[-145px]",
+                    style: {
+                        maskImage: 'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',
+                        WebkitMaskImage: 'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)'
+                    },
+                    children: /*#__PURE__*/ _jsx(DotGrid, {
+                        dotSize: 2,
+                        gap: 20,
+                        baseColor: "#e63e00",
+                        activeColor: "#FF0076",
+                        proximity: 100,
+                        shockRadius: 8,
+                        shockStrength: 100,
+                        resistance: 500,
+                        returnDuration: 1.5
                     })
                 }),
                 /*#__PURE__*/ _jsxs("div", {

package/dist/onboarding/sign-in.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/onboarding/sign-in.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Avatar} from 'components/avatar';\nimport {Button} from 'components/button';\nimport {Header, Text} from 'components/typography';\n\nconst meta = {\n  title: 'Onboarding/Signin',\n  parameters: {\n    layout: 'fullscreen',\n  },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    await argosScreenshot(ctx, 'example-screenshot');\n  },\n  render: () => {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-background-subtle-base\">\n        {/* Background illustration - simplified decorative element */}\n        <div className=\"pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]\">\n          <div\n            className=\"h-[332px] w-[800px] opacity-20\"\n            style={{\n              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,\n              backgroundSize: '24px 24px',\n              backgroundPosition: '-80px 31px',\n            }}\n          />\n        </div>\n\n        {/* Main content */}\n        <div className=\"relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24\">\n          {/* Logo and title section */}\n          <div className=\"flex flex-col items-center gap-16\">\n            <Avatar content=\"logo\" size=\"xl\" radius=\"rounded\" logoName=\"shipfox\" />\n            <div className=\"flex min-w-[128px] flex-col items-center gap-4 text-center\">\n              <Header\n                variant=\"h1\"\n                className=\"text-[28px] font-medium leading-[44px] text-foreground-neutral-base\"\n              >\n                Connect to Shipfox\n              </Header>\n              <Text\n                size=\"sm\"\n                className=\"text-sm font-normal leading-[24px] text-foreground-neutral-subtle\"\n              >\n                Log in to access Shipfox.\n              </Text>\n            </div>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex w-full flex-col gap-20\">\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"google\" className=\"w-full\">\n              Continue with Google\n            </Button>\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"microsoft\" className=\"w-full\">\n              Continue with Microsoft\n            </Button>\n            <Button variant=\"transparent\" size=\"md\" className=\"w-full\">\n              Connect with Enterprise SSO\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","Avatar","Button","Header","Text","meta","title","parameters","layout","Default","play","ctx","render","div","className","style","backgroundImage","backgroundSize","backgroundPosition","content","size","radius","logoName","variant","iconLeft"],"mappings":";AAAA,SAAQA,eAAe,QAAO,6BAA6B;AAE3D,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,EAAEC,IAAI,QAAO,wBAAwB;AAEnD,MAAMC,OAAO;IACXC,OAAO;IACPC,YAAY;QACVC,QAAQ;IACV;AACF;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,UAAiB;IAC5BC,MAAM,OAAOC;QACX,MAAMX,gBAAgBW,KAAK;IAC7B;IACAC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BAEb,KAACD;oBAAIC,WAAU;8BACb,cAAA,KAACD;wBACCC,WAAU;wBACVC,OAAO;4BACLC,iBAAiB,CAAC,mEAAmE,CAAC;4BACtFC,gBAAgB;4BAChBC,oBAAoB;wBACtB;;;8BAKJ,MAACL;oBAAIC,WAAU;;sCAEb,MAACD;4BAAIC,WAAU;;8CACb,KAACb;oCAAOkB,SAAQ;oCAAOC,MAAK;oCAAKC,QAAO;oCAAUC,UAAS;;8CAC3D,MAACT;oCAAIC,WAAU;;sDACb,KAACX;4CACCoB,SAAQ;4CACRT,WAAU;sDACX;;sDAGD,KAACV;4CACCgB,MAAK;4CACLN,WAAU;sDACX;;;;;;sCAOL,MAACD;4BAAIC,WAAU;;8CACb,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAASV,WAAU;8CAAS;;8CAGzE,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAAYV,WAAU;8CAAS;;8CAG5E,KAACZ;oCAAOqB,SAAQ;oCAAcH,MAAK;oCAAKN,WAAU;8CAAS;;;;;;;;IAOrE;AACF,EAAE"}
+{"version":3,"sources":["../../src/onboarding/sign-in.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Avatar} from 'components/avatar';\nimport {Button} from 'components/button';\nimport {DotGrid} from 'components/dot-grid';\nimport {Header, Text} from 'components/typography';\n\nconst meta = {\n  title: 'Onboarding/Signin',\n  parameters: {\n    layout: 'fullscreen',\n  },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    await argosScreenshot(ctx, 'example-screenshot');\n  },\n  render: () => {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-background-subtle-base\">\n        {/* Background illustration - simplified decorative element */}\n        <div\n          className=\"absolute w-[800px] max-w-[800px] h-[400px] top-0 left-1/2 -translate-x-1/2 translate-y-[-145px]\"\n          style={{\n            maskImage:\n              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',\n            WebkitMaskImage:\n              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',\n          }}\n        >\n          <DotGrid\n            dotSize={2}\n            gap={20}\n            baseColor=\"#e63e00\"\n            activeColor=\"#FF0076\"\n            proximity={100}\n            shockRadius={8}\n            shockStrength={100}\n            resistance={500}\n            returnDuration={1.5}\n          />\n        </div>\n\n        {/* Main content */}\n        <div className=\"relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24\">\n          {/* Logo and title section */}\n          <div className=\"flex flex-col items-center gap-16\">\n            <Avatar content=\"logo\" size=\"xl\" radius=\"rounded\" logoName=\"shipfox\" />\n            <div className=\"flex min-w-[128px] flex-col items-center gap-4 text-center\">\n              <Header\n                variant=\"h1\"\n                className=\"text-[28px] font-medium leading-[44px] text-foreground-neutral-base\"\n              >\n                Connect to Shipfox\n              </Header>\n              <Text\n                size=\"sm\"\n                className=\"text-sm font-normal leading-[24px] text-foreground-neutral-subtle\"\n              >\n                Log in to access Shipfox.\n              </Text>\n            </div>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex w-full flex-col gap-20\">\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"google\" className=\"w-full\">\n              Continue with Google\n            </Button>\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"microsoft\" className=\"w-full\">\n              Continue with Microsoft\n            </Button>\n            <Button variant=\"transparent\" size=\"md\" className=\"w-full\">\n              Connect with Enterprise SSO\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","Avatar","Button","DotGrid","Header","Text","meta","title","parameters","layout","Default","play","ctx","render","div","className","style","maskImage","WebkitMaskImage","dotSize","gap","baseColor","activeColor","proximity","shockRadius","shockStrength","resistance","returnDuration","content","size","radius","logoName","variant","iconLeft"],"mappings":";AAAA,SAAQA,eAAe,QAAO,6BAA6B;AAE3D,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,OAAO,QAAO,sBAAsB;AAC5C,SAAQC,MAAM,EAAEC,IAAI,QAAO,wBAAwB;AAEnD,MAAMC,OAAO;IACXC,OAAO;IACPC,YAAY;QACVC,QAAQ;IACV;AACF;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,UAAiB;IAC5BC,MAAM,OAAOC;QACX,MAAMZ,gBAAgBY,KAAK;IAC7B;IACAC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BAEb,KAACD;oBACCC,WAAU;oBACVC,OAAO;wBACLC,WACE;wBACFC,iBACE;oBACJ;8BAEA,cAAA,KAACf;wBACCgB,SAAS;wBACTC,KAAK;wBACLC,WAAU;wBACVC,aAAY;wBACZC,WAAW;wBACXC,aAAa;wBACbC,eAAe;wBACfC,YAAY;wBACZC,gBAAgB;;;8BAKpB,MAACb;oBAAIC,WAAU;;sCAEb,MAACD;4BAAIC,WAAU;;8CACb,KAACd;oCAAO2B,SAAQ;oCAAOC,MAAK;oCAAKC,QAAO;oCAAUC,UAAS;;8CAC3D,MAACjB;oCAAIC,WAAU;;sDACb,KAACX;4CACC4B,SAAQ;4CACRjB,WAAU;sDACX;;sDAGD,KAACV;4CACCwB,MAAK;4CACLd,WAAU;sDACX;;;;;;sCAOL,MAACD;4BAAIC,WAAU;;8CACb,KAACb;oCAAO8B,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAASlB,WAAU;8CAAS;;8CAGzE,KAACb;oCAAO8B,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAAYlB,WAAU;8CAAS;;8CAG5E,KAACb;oCAAO8B,SAAQ;oCAAcH,MAAK;oCAAKd,WAAU;8CAAS;;;;;;;;IAOrE;AACF,EAAE"}