bynana-ui 1.3.0 → 1.4.0

package/dist/infinite-scroll/index.js

@@ -0,0 +1,11 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function n(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function v({children:t,speed:o=30,direction:a="left",pauseOnHover:s=true,className:c}){let r=react.useRef(null),e=react.useRef(null);return react.useEffect(()=>{if(!r.current||!e.current)return;Array.from(e.current.children).forEach(f=>{let m=f.cloneNode(true);e.current&&e.current.appendChild(m);}),r.current.style.setProperty("--animation-duration",`${o}s`),r.current.style.setProperty("--animation-direction",a==="left"?"forwards":"reverse");},[o,a]),jsxRuntime.jsxs("div",{ref:r,className:n("group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",c),children:[jsxRuntime.jsx("div",{ref:e,className:n("flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap","animate-scroll",s&&"group-hover:[animation-play-state:paused]"),style:{animation:"scroll var(--animation-duration, 30s) var(--animation-direction, forwards) linear infinite"},children:t}),jsxRuntime.jsx("style",{jsx:true,children:`
+        @keyframes scroll {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(calc(-50% - 0.5rem));
+          }
+        }
+      `})]})}var R=v;exports.InfiniteScroll=v;exports.default=R;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/infinite-scroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/infinite-scroll/index.tsx"],"names":["cn","inputs","twMerge","clsx","InfiniteScroll","children","speed","direction","pauseOnHover","className","scrollerRef","useRef","scrollerInnerRef","useEffect","item","duplicatedItem","jsxs","jsx","infinite_scroll_default"],"mappings":"sMAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCQO,SAASG,CAAAA,CAAe,CAC7B,SAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CAAQ,EAAA,CACR,SAAA,CAAAC,CAAAA,CAAY,MAAA,CACZ,YAAA,CAAAC,EAAe,IAAA,CACf,SAAA,CAAAC,CACF,CAAA,CAAwB,CACtB,IAAMC,CAAAA,CAAcC,YAAAA,CAAuB,IAAI,EACzCC,CAAAA,CAAmBD,YAAAA,CAAuB,IAAI,CAAA,CAEpD,OAAAE,eAAAA,CAAU,IAAM,CACd,GAAI,CAACH,CAAAA,CAAY,OAAA,EAAW,CAACE,CAAAA,CAAiB,QAAS,OAE/B,KAAA,CAAM,IAAA,CAAKA,CAAAA,CAAiB,QAAQ,QAAQ,CAAA,CAEpD,OAAA,CAASE,CAAAA,EAAS,CAChC,IAAMC,CAAAA,CAAiBD,CAAAA,CAAK,UAAU,IAAI,CAAA,CACtCF,CAAAA,CAAiB,OAAA,EACnBA,EAAiB,OAAA,CAAQ,WAAA,CAAYG,CAAc,EAEvD,CAAC,CAAA,CAEDL,CAAAA,CAAY,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwB,CAAA,EAAGJ,CAAK,GAAG,CAAA,CACzEI,CAAAA,CAAY,OAAA,CAAQ,KAAA,CAAM,YACxB,uBAAA,CACAH,CAAAA,GAAc,MAAA,CAAS,UAAA,CAAa,SACtC,EACF,CAAA,CAAG,CAACD,CAAAA,CAAOC,CAAS,CAAC,CAAA,CAGnBS,eAAAA,CAAC,OACC,GAAA,CAAKN,CAAAA,CACL,SAAA,CAAWV,CAAAA,CACT,yHACAS,CACF,CAAA,CAEA,QAAA,CAAA,CAAAQ,cAAAA,CAAC,OACC,GAAA,CAAKL,CAAAA,CACL,SAAA,CAAWZ,CAAAA,CACT,wDACA,gBAAA,CACAQ,CAAAA,EAAgB,2CAClB,CAAA,CACA,MAAO,CACL,SAAA,CAAW,4FACb,CAAA,CAEC,SAAAH,CAAAA,CACH,CAAA,CACAY,cAAAA,CAAC,OAAA,CAAA,CAAM,IAAG,IAAA,CAAE,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAAA,CASV,CAAA,CAAA,CACJ,CAEJ,CAEA,IAAOC,CAAAA,CAAQd","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface InfiniteScrollProps {\r\n  children: ReactNode;\r\n  speed?: number;\r\n  direction?: \"left\" | \"right\";\r\n  pauseOnHover?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function InfiniteScroll({\r\n  children,\r\n  speed = 30,\r\n  direction = \"left\",\r\n  pauseOnHover = true,\r\n  className,\r\n}: InfiniteScrollProps) {\r\n  const scrollerRef = useRef<HTMLDivElement>(null);\r\n  const scrollerInnerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (!scrollerRef.current || !scrollerInnerRef.current) return;\r\n\r\n    const scrollerContent = Array.from(scrollerInnerRef.current.children);\r\n\r\n    scrollerContent.forEach((item) => {\r\n      const duplicatedItem = item.cloneNode(true);\r\n      if (scrollerInnerRef.current) {\r\n        scrollerInnerRef.current.appendChild(duplicatedItem);\r\n      }\r\n    });\r\n\r\n    scrollerRef.current.style.setProperty(\"--animation-duration\", `${speed}s`);\r\n    scrollerRef.current.style.setProperty(\r\n      \"--animation-direction\",\r\n      direction === \"left\" ? \"forwards\" : \"reverse\"\r\n    );\r\n  }, [speed, direction]);\r\n\r\n  return (\r\n    <div\r\n      ref={scrollerRef}\r\n      className={cn(\r\n        \"group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        ref={scrollerInnerRef}\r\n        className={cn(\r\n          \"flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap\",\r\n          \"animate-scroll\",\r\n          pauseOnHover && \"group-hover:[animation-play-state:paused]\"\r\n        )}\r\n        style={{\r\n          animation: `scroll var(--animation-duration, 30s) var(--animation-direction, forwards) linear infinite`,\r\n        }}\r\n      >\r\n        {children}\r\n      </div>\r\n      <style jsx>{`\r\n        @keyframes scroll {\r\n          from {\r\n            transform: translateX(0);\r\n          }\r\n          to {\r\n            transform: translateX(calc(-50% - 0.5rem));\r\n          }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default InfiniteScroll;\r\n"]}

package/dist/infinite-scroll/index.mjs

@@ -0,0 +1,11 @@
+import {useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function n(...t){return twMerge(clsx(t))}function v({children:t,speed:o=30,direction:a="left",pauseOnHover:s=true,className:c}){let r=useRef(null),e=useRef(null);return useEffect(()=>{if(!r.current||!e.current)return;Array.from(e.current.children).forEach(f=>{let m=f.cloneNode(true);e.current&&e.current.appendChild(m);}),r.current.style.setProperty("--animation-duration",`${o}s`),r.current.style.setProperty("--animation-direction",a==="left"?"forwards":"reverse");},[o,a]),jsxs("div",{ref:r,className:n("group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",c),children:[jsx("div",{ref:e,className:n("flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap","animate-scroll",s&&"group-hover:[animation-play-state:paused]"),style:{animation:"scroll var(--animation-duration, 30s) var(--animation-direction, forwards) linear infinite"},children:t}),jsx("style",{jsx:true,children:`
+        @keyframes scroll {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(calc(-50% - 0.5rem));
+          }
+        }
+      `})]})}var R=v;export{v as InfiniteScroll,R as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/infinite-scroll/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/infinite-scroll/index.tsx"],"names":["cn","inputs","twMerge","clsx","InfiniteScroll","children","speed","direction","pauseOnHover","className","scrollerRef","useRef","scrollerInnerRef","useEffect","item","duplicatedItem","jsxs","jsx","infinite_scroll_default"],"mappings":"2IAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCQO,SAASG,CAAAA,CAAe,CAC7B,SAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CAAQ,EAAA,CACR,SAAA,CAAAC,CAAAA,CAAY,MAAA,CACZ,YAAA,CAAAC,EAAe,IAAA,CACf,SAAA,CAAAC,CACF,CAAA,CAAwB,CACtB,IAAMC,CAAAA,CAAcC,MAAAA,CAAuB,IAAI,EACzCC,CAAAA,CAAmBD,MAAAA,CAAuB,IAAI,CAAA,CAEpD,OAAAE,SAAAA,CAAU,IAAM,CACd,GAAI,CAACH,CAAAA,CAAY,OAAA,EAAW,CAACE,CAAAA,CAAiB,QAAS,OAE/B,KAAA,CAAM,IAAA,CAAKA,CAAAA,CAAiB,QAAQ,QAAQ,CAAA,CAEpD,OAAA,CAASE,CAAAA,EAAS,CAChC,IAAMC,CAAAA,CAAiBD,CAAAA,CAAK,UAAU,IAAI,CAAA,CACtCF,CAAAA,CAAiB,OAAA,EACnBA,EAAiB,OAAA,CAAQ,WAAA,CAAYG,CAAc,EAEvD,CAAC,CAAA,CAEDL,CAAAA,CAAY,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwB,CAAA,EAAGJ,CAAK,GAAG,CAAA,CACzEI,CAAAA,CAAY,OAAA,CAAQ,KAAA,CAAM,YACxB,uBAAA,CACAH,CAAAA,GAAc,MAAA,CAAS,UAAA,CAAa,SACtC,EACF,CAAA,CAAG,CAACD,CAAAA,CAAOC,CAAS,CAAC,CAAA,CAGnBS,IAAAA,CAAC,OACC,GAAA,CAAKN,CAAAA,CACL,SAAA,CAAWV,CAAAA,CACT,yHACAS,CACF,CAAA,CAEA,QAAA,CAAA,CAAAQ,GAAAA,CAAC,OACC,GAAA,CAAKL,CAAAA,CACL,SAAA,CAAWZ,CAAAA,CACT,wDACA,gBAAA,CACAQ,CAAAA,EAAgB,2CAClB,CAAA,CACA,MAAO,CACL,SAAA,CAAW,4FACb,CAAA,CAEC,SAAAH,CAAAA,CACH,CAAA,CACAY,GAAAA,CAAC,OAAA,CAAA,CAAM,IAAG,IAAA,CAAE,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAAA,CASV,CAAA,CAAA,CACJ,CAEJ,CAEA,IAAOC,CAAAA,CAAQd","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface InfiniteScrollProps {\r\n  children: ReactNode;\r\n  speed?: number;\r\n  direction?: \"left\" | \"right\";\r\n  pauseOnHover?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function InfiniteScroll({\r\n  children,\r\n  speed = 30,\r\n  direction = \"left\",\r\n  pauseOnHover = true,\r\n  className,\r\n}: InfiniteScrollProps) {\r\n  const scrollerRef = useRef<HTMLDivElement>(null);\r\n  const scrollerInnerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (!scrollerRef.current || !scrollerInnerRef.current) return;\r\n\r\n    const scrollerContent = Array.from(scrollerInnerRef.current.children);\r\n\r\n    scrollerContent.forEach((item) => {\r\n      const duplicatedItem = item.cloneNode(true);\r\n      if (scrollerInnerRef.current) {\r\n        scrollerInnerRef.current.appendChild(duplicatedItem);\r\n      }\r\n    });\r\n\r\n    scrollerRef.current.style.setProperty(\"--animation-duration\", `${speed}s`);\r\n    scrollerRef.current.style.setProperty(\r\n      \"--animation-direction\",\r\n      direction === \"left\" ? \"forwards\" : \"reverse\"\r\n    );\r\n  }, [speed, direction]);\r\n\r\n  return (\r\n    <div\r\n      ref={scrollerRef}\r\n      className={cn(\r\n        \"group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        ref={scrollerInnerRef}\r\n        className={cn(\r\n          \"flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap\",\r\n          \"animate-scroll\",\r\n          pauseOnHover && \"group-hover:[animation-play-state:paused]\"\r\n        )}\r\n        style={{\r\n          animation: `scroll var(--animation-duration, 30s) var(--animation-direction, forwards) linear infinite`,\r\n        }}\r\n      >\r\n        {children}\r\n      </div>\r\n      <style jsx>{`\r\n        @keyframes scroll {\r\n          from {\r\n            transform: translateX(0);\r\n          }\r\n          to {\r\n            transform: translateX(calc(-50% - 0.5rem));\r\n          }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default InfiniteScroll;\r\n"]}

package/dist/input-otp/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function u(...n){return tailwindMerge.twMerge(clsx.clsx(n))}function z({maxLength:n=6,onComplete:l,onChange:a,className:m=""}){let[s,c]=react.useState(new Array(n).fill("")),o=react.useRef([]);react.useEffect(()=>{let e=s.join("");a?.(e),e.length===n&&l?.(e);},[s,n,a,l]);let b=(e,t)=>{if(t.length>1){let r=t.slice(0,n).split(""),f=[...s];r.forEach((h,i)=>{e+i<n&&(f[e+i]=h);}),c(f);let d=Math.min(e+r.length,n-1);o.current[d]?.focus();return}if(/^\d*$/.test(t)){let r=[...s];r[e]=t,c(r),t&&e<n-1&&o.current[e+1]?.focus();}},w=(e,t)=>{if(t.key==="Backspace")if(!s[e]&&e>0)o.current[e-1]?.focus();else {let r=[...s];r[e]="",c(r);}else t.key==="ArrowLeft"&&e>0?o.current[e-1]?.focus():t.key==="ArrowRight"&&e<n-1&&o.current[e+1]?.focus();},g=e=>{o.current[e]?.select();};return jsxRuntime.jsx("div",{className:u("flex items-center gap-2",m),children:s.map((e,t)=>jsxRuntime.jsx("input",{ref:r=>{o.current[t]=r;},type:"text",inputMode:"numeric",maxLength:1,value:e,onChange:r=>b(t,r.target.value),onKeyDown:r=>w(t,r),onFocus:()=>g(t),className:u("w-12 h-12 text-center text-lg font-semibold","border-2 border-zinc-300 dark:border-zinc-600 rounded-md","focus:border-zinc-900 dark:focus:border-white focus:outline-none","bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white","transition-colors")},t))})}var R=z;exports.InputOTP=z;exports.default=R;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/input-otp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/input-otp/index.tsx"],"names":["cn","inputs","twMerge","clsx","InputOTP","maxLength","onComplete","onChange","className","values","setValues","useState","inputRefs","useRef","useEffect","currentValue","handleChange","index","value","pastedValues","newValues","val","nextIndex","handleKeyDown","e","handleFocus","jsx","el","input_otp_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef, useEffect } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface InputOTPProps {\r\n  maxLength?: number;\r\n  onComplete?: (value: string) => void;\r\n  onChange?: (value: string) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function InputOTP({\r\n  maxLength = 6,\r\n  onComplete,\r\n  onChange,\r\n  className = \"\",\r\n}: InputOTPProps) {\r\n  const [values, setValues] = useState<string[]>(new Array(maxLength).fill(\"\"));\r\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    const currentValue = values.join(\"\");\r\n    onChange?.(currentValue);\r\n\r\n    if (currentValue.length === maxLength) {\r\n      onComplete?.(currentValue);\r\n    }\r\n  }, [values, maxLength, onChange, onComplete]);\r\n\r\n  const handleChange = (index: number, value: string) => {\r\n    if (value.length > 1) {\r\n      const pastedValues = value.slice(0, maxLength).split(\"\");\r\n      const newValues = [...values];\r\n      pastedValues.forEach((val, i) => {\r\n        if (index + i < maxLength) {\r\n          newValues[index + i] = val;\r\n        }\r\n      });\r\n      setValues(newValues);\r\n\r\n      const nextIndex = Math.min(index + pastedValues.length, maxLength - 1);\r\n      inputRefs.current[nextIndex]?.focus();\r\n      return;\r\n    }\r\n\r\n    if (/^\\d*$/.test(value)) {\r\n      const newValues = [...values];\r\n      newValues[index] = value;\r\n      setValues(newValues);\r\n\r\n      if (value && index < maxLength - 1) {\r\n        inputRefs.current[index + 1]?.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (\r\n    index: number,\r\n    e: React.KeyboardEvent<HTMLInputElement>\r\n  ) => {\r\n    if (e.key === \"Backspace\") {\r\n      if (!values[index] && index > 0) {\r\n        inputRefs.current[index - 1]?.focus();\r\n      } else {\r\n        const newValues = [...values];\r\n        newValues[index] = \"\";\r\n        setValues(newValues);\r\n      }\r\n    } else if (e.key === \"ArrowLeft\" && index > 0) {\r\n      inputRefs.current[index - 1]?.focus();\r\n    } else if (e.key === \"ArrowRight\" && index < maxLength - 1) {\r\n      inputRefs.current[index + 1]?.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (index: number) => {\r\n    inputRefs.current[index]?.select();\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"flex items-center gap-2\", className)}>\r\n      {values.map((value, index) => (\r\n        <input\r\n          key={index}\r\n          ref={(el) => {\r\n            inputRefs.current[index] = el;\r\n          }}\r\n          type=\"text\"\r\n          inputMode=\"numeric\"\r\n          maxLength={1}\r\n          value={value}\r\n          onChange={(e) => handleChange(index, e.target.value)}\r\n          onKeyDown={(e) => handleKeyDown(index, e)}\r\n          onFocus={() => handleFocus(index)}\r\n          className={cn(\r\n            \"w-12 h-12 text-center text-lg font-semibold\",\r\n            \"border-2 border-zinc-300 dark:border-zinc-600 rounded-md\",\r\n            \"focus:border-zinc-900 dark:focus:border-white focus:outline-none\",\r\n            \"bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white\",\r\n            \"transition-colors\"\r\n          )}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default InputOTP;\r\n"]}

package/dist/input-otp/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function u(...n){return twMerge(clsx(n))}function z({maxLength:n=6,onComplete:l,onChange:a,className:m=""}){let[s,c]=useState(new Array(n).fill("")),o=useRef([]);useEffect(()=>{let e=s.join("");a?.(e),e.length===n&&l?.(e);},[s,n,a,l]);let b=(e,t)=>{if(t.length>1){let r=t.slice(0,n).split(""),f=[...s];r.forEach((h,i)=>{e+i<n&&(f[e+i]=h);}),c(f);let d=Math.min(e+r.length,n-1);o.current[d]?.focus();return}if(/^\d*$/.test(t)){let r=[...s];r[e]=t,c(r),t&&e<n-1&&o.current[e+1]?.focus();}},w=(e,t)=>{if(t.key==="Backspace")if(!s[e]&&e>0)o.current[e-1]?.focus();else {let r=[...s];r[e]="",c(r);}else t.key==="ArrowLeft"&&e>0?o.current[e-1]?.focus():t.key==="ArrowRight"&&e<n-1&&o.current[e+1]?.focus();},g=e=>{o.current[e]?.select();};return jsx("div",{className:u("flex items-center gap-2",m),children:s.map((e,t)=>jsx("input",{ref:r=>{o.current[t]=r;},type:"text",inputMode:"numeric",maxLength:1,value:e,onChange:r=>b(t,r.target.value),onKeyDown:r=>w(t,r),onFocus:()=>g(t),className:u("w-12 h-12 text-center text-lg font-semibold","border-2 border-zinc-300 dark:border-zinc-600 rounded-md","focus:border-zinc-900 dark:focus:border-white focus:outline-none","bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white","transition-colors")},t))})}var R=z;export{z as InputOTP,R as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/input-otp/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/input-otp/index.tsx"],"names":["cn","inputs","twMerge","clsx","InputOTP","maxLength","onComplete","onChange","className","values","setValues","useState","inputRefs","useRef","useEffect","currentValue","handleChange","index","value","pastedValues","newValues","val","nextIndex","handleKeyDown","e","handleFocus","jsx","el","input_otp_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef, useEffect } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface InputOTPProps {\r\n  maxLength?: number;\r\n  onComplete?: (value: string) => void;\r\n  onChange?: (value: string) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function InputOTP({\r\n  maxLength = 6,\r\n  onComplete,\r\n  onChange,\r\n  className = \"\",\r\n}: InputOTPProps) {\r\n  const [values, setValues] = useState<string[]>(new Array(maxLength).fill(\"\"));\r\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    const currentValue = values.join(\"\");\r\n    onChange?.(currentValue);\r\n\r\n    if (currentValue.length === maxLength) {\r\n      onComplete?.(currentValue);\r\n    }\r\n  }, [values, maxLength, onChange, onComplete]);\r\n\r\n  const handleChange = (index: number, value: string) => {\r\n    if (value.length > 1) {\r\n      const pastedValues = value.slice(0, maxLength).split(\"\");\r\n      const newValues = [...values];\r\n      pastedValues.forEach((val, i) => {\r\n        if (index + i < maxLength) {\r\n          newValues[index + i] = val;\r\n        }\r\n      });\r\n      setValues(newValues);\r\n\r\n      const nextIndex = Math.min(index + pastedValues.length, maxLength - 1);\r\n      inputRefs.current[nextIndex]?.focus();\r\n      return;\r\n    }\r\n\r\n    if (/^\\d*$/.test(value)) {\r\n      const newValues = [...values];\r\n      newValues[index] = value;\r\n      setValues(newValues);\r\n\r\n      if (value && index < maxLength - 1) {\r\n        inputRefs.current[index + 1]?.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (\r\n    index: number,\r\n    e: React.KeyboardEvent<HTMLInputElement>\r\n  ) => {\r\n    if (e.key === \"Backspace\") {\r\n      if (!values[index] && index > 0) {\r\n        inputRefs.current[index - 1]?.focus();\r\n      } else {\r\n        const newValues = [...values];\r\n        newValues[index] = \"\";\r\n        setValues(newValues);\r\n      }\r\n    } else if (e.key === \"ArrowLeft\" && index > 0) {\r\n      inputRefs.current[index - 1]?.focus();\r\n    } else if (e.key === \"ArrowRight\" && index < maxLength - 1) {\r\n      inputRefs.current[index + 1]?.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (index: number) => {\r\n    inputRefs.current[index]?.select();\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"flex items-center gap-2\", className)}>\r\n      {values.map((value, index) => (\r\n        <input\r\n          key={index}\r\n          ref={(el) => {\r\n            inputRefs.current[index] = el;\r\n          }}\r\n          type=\"text\"\r\n          inputMode=\"numeric\"\r\n          maxLength={1}\r\n          value={value}\r\n          onChange={(e) => handleChange(index, e.target.value)}\r\n          onKeyDown={(e) => handleKeyDown(index, e)}\r\n          onFocus={() => handleFocus(index)}\r\n          className={cn(\r\n            \"w-12 h-12 text-center text-lg font-semibold\",\r\n            \"border-2 border-zinc-300 dark:border-zinc-600 rounded-md\",\r\n            \"focus:border-zinc-900 dark:focus:border-white focus:outline-none\",\r\n            \"bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white\",\r\n            \"transition-colors\"\r\n          )}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default InputOTP;\r\n"]}

package/dist/multi-step-loader/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function n(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function v({loadingStates:t,loading:a,duration:o=2e3,loop:l=true,className:u}){let[r,s]=react.useState(0);return react.useEffect(()=>{if(!a){s(0);return}let c=setInterval(()=>{s(i=>i===t.length-1?l?0:i:i+1);},o/t.length);return ()=>clearInterval(c)},[a,t.length,o,l]),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:a&&jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:n("fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm",u),children:jsxRuntime.jsx("div",{className:"bg-white dark:bg-zinc-900 rounded-lg p-8 shadow-2xl max-w-md w-full mx-4",children:jsxRuntime.jsxs("div",{className:"text-center",children:[jsxRuntime.jsx("div",{className:"mb-4",children:jsxRuntime.jsx("div",{className:"inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4",children:jsxRuntime.jsx("div",{className:"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"})})}),jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:jsxRuntime.jsx(framerMotion.motion.p,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},className:"text-lg font-medium text-zinc-900 dark:text-white",children:t[r]?.text},r)}),jsxRuntime.jsx("div",{className:"mt-6 flex justify-center",children:jsxRuntime.jsx("div",{className:"flex space-x-1",children:t.map((c,i)=>jsxRuntime.jsx("div",{className:n("h-2 w-2 rounded-full transition-colors duration-200",i===r?"bg-blue-600":i<r?"bg-green-500":"bg-zinc-300 dark:bg-zinc-600")},i))})})]})})})})}var L=v;exports.MultiStepLoader=v;exports.default=L;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/multi-step-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/multi-step-loader/index.tsx"],"names":["cn","inputs","twMerge","clsx","MultiStepLoader","loadingStates","loading","duration","loop","className","currentState","setCurrentState","useState","useEffect","interval","prevState","jsx","AnimatePresence","motion","jsxs","_","index","multi_step_loader_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface LoadingState {\r\n  text: string;\r\n}\r\n\r\ninterface MultiStepLoaderProps {\r\n  loadingStates: LoadingState[];\r\n  loading: boolean;\r\n  duration?: number;\r\n  loop?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function MultiStepLoader({\r\n  loadingStates,\r\n  loading,\r\n  duration = 2000,\r\n  loop = true,\r\n  className,\r\n}: MultiStepLoaderProps) {\r\n  const [currentState, setCurrentState] = useState(0);\r\n\r\n  useEffect(() => {\r\n    if (!loading) {\r\n      setCurrentState(0);\r\n      return;\r\n    }\r\n\r\n    const interval = setInterval(() => {\r\n      setCurrentState((prevState) => {\r\n        if (prevState === loadingStates.length - 1) {\r\n          return loop ? 0 : prevState;\r\n        }\r\n        return prevState + 1;\r\n      });\r\n    }, duration / loadingStates.length);\r\n\r\n    return () => clearInterval(interval);\r\n  }, [loading, loadingStates.length, duration, loop]);\r\n\r\n  return (\r\n    <AnimatePresence>\r\n      {loading && (\r\n        <motion.div\r\n          initial={{ opacity: 0 }}\r\n          animate={{ opacity: 1 }}\r\n          exit={{ opacity: 0 }}\r\n          className={cn(\r\n            \"fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm\",\r\n            className\r\n          )}\r\n        >\r\n          <div className=\"bg-white dark:bg-zinc-900 rounded-lg p-8 shadow-2xl max-w-md w-full mx-4\">\r\n            <div className=\"text-center\">\r\n              <div className=\"mb-4\">\r\n                <div className=\"inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4\">\r\n                  <div className=\"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin\" />\r\n                </div>\r\n              </div>\r\n\r\n              <AnimatePresence mode=\"wait\">\r\n                <motion.p\r\n                  key={currentState}\r\n                  initial={{ opacity: 0, y: 10 }}\r\n                  animate={{ opacity: 1, y: 0 }}\r\n                  exit={{ opacity: 0, y: -10 }}\r\n                  transition={{ duration: 0.2 }}\r\n                  className=\"text-lg font-medium text-zinc-900 dark:text-white\"\r\n                >\r\n                  {loadingStates[currentState]?.text}\r\n                </motion.p>\r\n              </AnimatePresence>\r\n\r\n              <div className=\"mt-6 flex justify-center\">\r\n                <div className=\"flex space-x-1\">\r\n                  {loadingStates.map((_, index) => (\r\n                    <div\r\n                      key={index}\r\n                      className={cn(\r\n                        \"h-2 w-2 rounded-full transition-colors duration-200\",\r\n                        index === currentState\r\n                          ? \"bg-blue-600\"\r\n                          : index < currentState\r\n                          ? \"bg-green-500\"\r\n                          : \"bg-zinc-300 dark:bg-zinc-600\"\r\n                      )}\r\n                    />\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>\r\n  );\r\n}\r\n\r\nexport default MultiStepLoader;\r\n"]}

package/dist/multi-step-loader/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useEffect}from'react';import {AnimatePresence,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function n(...t){return twMerge(clsx(t))}function v({loadingStates:t,loading:a,duration:o=2e3,loop:l=true,className:u}){let[r,s]=useState(0);return useEffect(()=>{if(!a){s(0);return}let c=setInterval(()=>{s(i=>i===t.length-1?l?0:i:i+1);},o/t.length);return ()=>clearInterval(c)},[a,t.length,o,l]),jsx(AnimatePresence,{children:a&&jsx(motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:n("fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm",u),children:jsx("div",{className:"bg-white dark:bg-zinc-900 rounded-lg p-8 shadow-2xl max-w-md w-full mx-4",children:jsxs("div",{className:"text-center",children:[jsx("div",{className:"mb-4",children:jsx("div",{className:"inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4",children:jsx("div",{className:"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"})})}),jsx(AnimatePresence,{mode:"wait",children:jsx(motion.p,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},className:"text-lg font-medium text-zinc-900 dark:text-white",children:t[r]?.text},r)}),jsx("div",{className:"mt-6 flex justify-center",children:jsx("div",{className:"flex space-x-1",children:t.map((c,i)=>jsx("div",{className:n("h-2 w-2 rounded-full transition-colors duration-200",i===r?"bg-blue-600":i<r?"bg-green-500":"bg-zinc-300 dark:bg-zinc-600")},i))})})]})})})})}var L=v;export{v as MultiStepLoader,L as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/multi-step-loader/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/multi-step-loader/index.tsx"],"names":["cn","inputs","twMerge","clsx","MultiStepLoader","loadingStates","loading","duration","loop","className","currentState","setCurrentState","useState","useEffect","interval","prevState","jsx","AnimatePresence","motion","jsxs","_","index","multi_step_loader_default"],"mappings":"gMAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCaO,SAASG,CAAAA,CAAgB,CAC9B,aAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CAAW,GAAA,CACX,IAAA,CAAAC,CAAAA,CAAO,IAAA,CACP,SAAA,CAAAC,CACF,CAAA,CAAyB,CACvB,GAAM,CAACC,CAAAA,CAAcC,CAAe,CAAA,CAAIC,QAAAA,CAAS,CAAC,CAAA,CAElD,OAAAC,SAAAA,CAAU,IAAM,CACd,GAAI,CAACP,CAAAA,CAAS,CACZK,CAAAA,CAAgB,CAAC,CAAA,CACjB,MACF,CAEA,IAAMG,CAAAA,CAAW,WAAA,CAAY,IAAM,CACjCH,CAAAA,CAAiBI,CAAAA,EACXA,CAAAA,GAAcV,CAAAA,CAAc,MAAA,CAAS,CAAA,CAChCG,CAAAA,CAAO,CAAA,CAAIO,CAAAA,CAEbA,CAAAA,CAAY,CACpB,EACH,CAAA,CAAGR,CAAAA,CAAWF,CAAAA,CAAc,MAAM,CAAA,CAElC,OAAO,IAAM,aAAA,CAAcS,CAAQ,CACrC,CAAA,CAAG,CAACR,CAAAA,CAASD,CAAAA,CAAc,MAAA,CAAQE,CAAAA,CAAUC,CAAI,CAAC,CAAA,CAGhDQ,GAAAA,CAACC,eAAAA,CAAA,CACE,QAAA,CAAAX,CAAAA,EACCU,GAAAA,CAACE,MAAAA,CAAO,GAAA,CAAP,CACC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAE,CAAA,CACtB,OAAA,CAAS,CAAE,OAAA,CAAS,CAAE,CAAA,CACtB,IAAA,CAAM,CAAE,OAAA,CAAS,CAAE,CAAA,CACnB,SAAA,CAAWlB,CAAAA,CACT,qFAAA,CACAS,CACF,CAAA,CAEA,QAAA,CAAAO,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,0EAAA,CACb,QAAA,CAAAG,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,aAAA,CACb,QAAA,CAAA,CAAAH,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,MAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,qGAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,iFAAA,CAAkF,CAAA,CACnG,CAAA,CACF,CAAA,CAEAA,GAAAA,CAACC,eAAAA,CAAA,CAAgB,IAAA,CAAK,MAAA,CACpB,QAAA,CAAAD,GAAAA,CAACE,MAAAA,CAAO,CAAA,CAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,EAAG,CAAA,CAC7B,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,CAAE,CAAA,CAC5B,IAAA,CAAM,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,GAAI,CAAA,CAC3B,UAAA,CAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAC5B,SAAA,CAAU,mDAAA,CAET,QAAA,CAAAb,CAAAA,CAAcK,CAAY,CAAA,EAAG,IAAA,CAAA,CAPzBA,CAQP,CAAA,CACF,CAAA,CAEAM,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,0BAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,gBAAA,CACZ,QAAA,CAAAX,CAAAA,CAAc,GAAA,CAAI,CAACe,CAAAA,CAAGC,CAAAA,GACrBL,GAAAA,CAAC,KAAA,CAAA,CAEC,SAAA,CAAWhB,CAAAA,CACT,qDAAA,CACAqB,CAAAA,GAAUX,CAAAA,CACN,aAAA,CACAW,CAAAA,CAAQX,CAAAA,CACR,cAAA,CACA,8BACN,CAAA,CAAA,CARKW,CASP,CACD,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CAEJ,CAEJ,CAEA,IAAOC,CAAAA,CAAQlB","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface LoadingState {\r\n  text: string;\r\n}\r\n\r\ninterface MultiStepLoaderProps {\r\n  loadingStates: LoadingState[];\r\n  loading: boolean;\r\n  duration?: number;\r\n  loop?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function MultiStepLoader({\r\n  loadingStates,\r\n  loading,\r\n  duration = 2000,\r\n  loop = true,\r\n  className,\r\n}: MultiStepLoaderProps) {\r\n  const [currentState, setCurrentState] = useState(0);\r\n\r\n  useEffect(() => {\r\n    if (!loading) {\r\n      setCurrentState(0);\r\n      return;\r\n    }\r\n\r\n    const interval = setInterval(() => {\r\n      setCurrentState((prevState) => {\r\n        if (prevState === loadingStates.length - 1) {\r\n          return loop ? 0 : prevState;\r\n        }\r\n        return prevState + 1;\r\n      });\r\n    }, duration / loadingStates.length);\r\n\r\n    return () => clearInterval(interval);\r\n  }, [loading, loadingStates.length, duration, loop]);\r\n\r\n  return (\r\n    <AnimatePresence>\r\n      {loading && (\r\n        <motion.div\r\n          initial={{ opacity: 0 }}\r\n          animate={{ opacity: 1 }}\r\n          exit={{ opacity: 0 }}\r\n          className={cn(\r\n            \"fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm\",\r\n            className\r\n          )}\r\n        >\r\n          <div className=\"bg-white dark:bg-zinc-900 rounded-lg p-8 shadow-2xl max-w-md w-full mx-4\">\r\n            <div className=\"text-center\">\r\n              <div className=\"mb-4\">\r\n                <div className=\"inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4\">\r\n                  <div className=\"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin\" />\r\n                </div>\r\n              </div>\r\n\r\n              <AnimatePresence mode=\"wait\">\r\n                <motion.p\r\n                  key={currentState}\r\n                  initial={{ opacity: 0, y: 10 }}\r\n                  animate={{ opacity: 1, y: 0 }}\r\n                  exit={{ opacity: 0, y: -10 }}\r\n                  transition={{ duration: 0.2 }}\r\n                  className=\"text-lg font-medium text-zinc-900 dark:text-white\"\r\n                >\r\n                  {loadingStates[currentState]?.text}\r\n                </motion.p>\r\n              </AnimatePresence>\r\n\r\n              <div className=\"mt-6 flex justify-center\">\r\n                <div className=\"flex space-x-1\">\r\n                  {loadingStates.map((_, index) => (\r\n                    <div\r\n                      key={index}\r\n                      className={cn(\r\n                        \"h-2 w-2 rounded-full transition-colors duration-200\",\r\n                        index === currentState\r\n                          ? \"bg-blue-600\"\r\n                          : index < currentState\r\n                          ? \"bg-green-500\"\r\n                          : \"bg-zinc-300 dark:bg-zinc-600\"\r\n                      )}\r\n                    />\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>\r\n  );\r\n}\r\n\r\nexport default MultiStepLoader;\r\n"]}

package/dist/pixel-card/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function H(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var M=class{constructor(t,l,p,g,S,w,o){this.width=t.width,this.height=t.height,this.ctx=l,this.x=p,this.y=g,this.color=S,this.speed=this.getRandomValue(.1,.9)*w,this.size=0,this.sizeStep=Math.random()*.4,this.minSize=.5,this.maxSizeInteger=2,this.maxSize=this.getRandomValue(this.minSize,this.maxSizeInteger),this.delay=o,this.counter=0,this.counterStep=Math.random()*4+(this.width+this.height)*.01,this.isIdle=false,this.isReverse=false,this.isShimmer=false;}getRandomValue(t,l){return Math.random()*(l-t)+t}draw(){let t=this.maxSizeInteger*.5-this.size*.5;this.ctx.fillStyle=this.color,this.ctx.fillRect(this.x+t,this.y+t,this.size,this.size);}appear(){if(this.isIdle=false,this.counter<=this.delay){this.counter+=this.counterStep;return}this.size>=this.maxSize&&(this.isShimmer=true),this.isShimmer?this.shimmer():this.size+=this.sizeStep,this.draw();}disappear(){if(this.isShimmer=false,this.counter=0,this.size<=0){this.isIdle=true;return}else this.size-=.1;this.draw();}shimmer(){this.size>=this.maxSize?this.isReverse=true:this.size<=this.minSize&&(this.isReverse=false),this.isReverse?this.size-=this.speed:this.size+=this.speed;}},L={default:{gap:5,speed:35,colors:"#71717a,#a1a1aa,#d4d4d8",noFocus:false},blue:{gap:10,speed:25,colors:"#0ea5e9,#38bdf8,#7dd3fc",noFocus:false},yellow:{gap:3,speed:20,colors:"#ca8a04,#eab308,#facc15",noFocus:false},pink:{gap:6,speed:80,colors:"#be123c,#e11d48,#f43f5e",noFocus:true}};function U(s,t){return s<=0||t?0:s>=100?100*.001:s*.001}function W({variant:s="default",gap:t,speed:l,colors:p,noFocus:g,className:S="",children:w}){let o=react.useRef(null),n=react.useRef(null),R=react.useRef([]),i=react.useRef(null),y=react.useRef(typeof performance<"u"?performance.now():0),F=react.useRef(typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false).current,b=L[s]||L.default,C=t??b.gap,I=l??b.speed,A=p??b.colors,x=g??b.noFocus,E=()=>{if(!o.current||!n.current)return;let e=o.current.getBoundingClientRect(),a=Math.floor(e.width)||300,c=Math.floor(e.height)||400,d=n.current.getContext("2d");if(!d)return;n.current.width=a,n.current.height=c,n.current.style.width=`${a}px`,n.current.style.height=`${c}px`;let m=A.split(",").map(r=>r.trim()),f=[],u=Math.max(parseInt(C.toString(),10),3);for(let r=0;r<a;r+=u)for(let v=0;v<c;v+=u){let O=m[Math.floor(Math.random()*m.length)],N=r-a/2,P=v-c/2,$=Math.sqrt(N*N+P*P),G=F?0:$;f.push(new M(n.current,d,r,v,O,U(I,F),G));}R.current=f;},T=e=>{i.current=requestAnimationFrame(()=>T(e));let a=performance.now(),c=a-y.current,d=1e3/60;if(c<d)return;y.current=a-c%d;let m=n.current?.getContext("2d");if(!m||!n.current)return;m.clearRect(0,0,n.current.width,n.current.height);let f=true;for(let u=0;u<R.current.length;u++){let r=R.current[u];r[e](),r.isIdle||(f=false);}f&&i.current&&cancelAnimationFrame(i.current);},z=e=>{i.current!==null&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>T(e));},D=()=>z("appear"),k=()=>z("disappear"),q=e=>{e.currentTarget.contains(e.relatedTarget)||z("appear");},B=e=>{e.currentTarget.contains(e.relatedTarget)||z("disappear");};return react.useEffect(()=>{E();let e=new ResizeObserver(()=>{E();});return o.current&&e.observe(o.current),()=>{e.disconnect(),i.current!==null&&cancelAnimationFrame(i.current);}},[C,I,A,x]),jsxRuntime.jsxs("div",{ref:o,className:H("relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900",S),onMouseEnter:D,onMouseLeave:k,onFocus:x?void 0:q,onBlur:x?void 0:B,tabIndex:x?-1:0,children:[jsxRuntime.jsx("canvas",{className:"absolute inset-0 w-full h-full pointer-events-none",ref:n}),jsxRuntime.jsx("div",{className:"relative z-10",children:w})]})}var ne=W;exports.PixelCard=W;exports.default=ne;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/pixel-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/pixel-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","Pixel","canvas","context","x","y","color","speed","delay","min","max","centerOffset","VARIANTS","getEffectiveSpeed","value","reducedMotion","PixelCard","variant","gap","colors","noFocus","className","children","containerRef","useRef","canvasRef","pixelsRef","animationRef","timePreviousRef","variantCfg","finalGap","finalSpeed","finalColors","finalNoFocus","initPixels","rect","width","height","ctx","colorsArray","c","pxs","gapValue","dx","dy","distance","doAnimate","fnName","timeNow","timePassed","timeInterval","allIdle","i","pixel","handleAnimation","name","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","observer","jsxs","jsx","pixel_card_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nclass Pixel {\r\n  width: number;\r\n  height: number;\r\n  ctx: CanvasRenderingContext2D;\r\n  x: number;\r\n  y: number;\r\n  color: string;\r\n  speed: number;\r\n  size: number;\r\n  sizeStep: number;\r\n  minSize: number;\r\n  maxSizeInteger: number;\r\n  maxSize: number;\r\n  delay: number;\r\n  counter: number;\r\n  counterStep: number;\r\n  isIdle: boolean;\r\n  isReverse: boolean;\r\n  isShimmer: boolean;\r\n\r\n  constructor(\r\n    canvas: HTMLCanvasElement,\r\n    context: CanvasRenderingContext2D,\r\n    x: number,\r\n    y: number,\r\n    color: string,\r\n    speed: number,\r\n    delay: number\r\n  ) {\r\n    this.width = canvas.width;\r\n    this.height = canvas.height;\r\n    this.ctx = context;\r\n    this.x = x;\r\n    this.y = y;\r\n    this.color = color;\r\n    this.speed = this.getRandomValue(0.1, 0.9) * speed;\r\n    this.size = 0;\r\n    this.sizeStep = Math.random() * 0.4;\r\n    this.minSize = 0.5;\r\n    this.maxSizeInteger = 2;\r\n    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);\r\n    this.delay = delay;\r\n    this.counter = 0;\r\n    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;\r\n    this.isIdle = false;\r\n    this.isReverse = false;\r\n    this.isShimmer = false;\r\n  }\r\n\r\n  getRandomValue(min: number, max: number) {\r\n    return Math.random() * (max - min) + min;\r\n  }\r\n\r\n  draw() {\r\n    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;\r\n    this.ctx.fillStyle = this.color;\r\n    this.ctx.fillRect(\r\n      this.x + centerOffset,\r\n      this.y + centerOffset,\r\n      this.size,\r\n      this.size\r\n    );\r\n  }\r\n\r\n  appear() {\r\n    this.isIdle = false;\r\n    if (this.counter <= this.delay) {\r\n      this.counter += this.counterStep;\r\n      return;\r\n    }\r\n    if (this.size >= this.maxSize) {\r\n      this.isShimmer = true;\r\n    }\r\n    if (this.isShimmer) {\r\n      this.shimmer();\r\n    } else {\r\n      this.size += this.sizeStep;\r\n    }\r\n    this.draw();\r\n  }\r\n\r\n  disappear() {\r\n    this.isShimmer = false;\r\n    this.counter = 0;\r\n    if (this.size <= 0) {\r\n      this.isIdle = true;\r\n      return;\r\n    } else {\r\n      this.size -= 0.1;\r\n    }\r\n    this.draw();\r\n  }\r\n\r\n  shimmer() {\r\n    if (this.size >= this.maxSize) {\r\n      this.isReverse = true;\r\n    } else if (this.size <= this.minSize) {\r\n      this.isReverse = false;\r\n    }\r\n    if (this.isReverse) {\r\n      this.size -= this.speed;\r\n    } else {\r\n      this.size += this.speed;\r\n    }\r\n  }\r\n}\r\n\r\nconst VARIANTS = {\r\n  default: {\r\n    gap: 5,\r\n    speed: 35,\r\n    colors: \"#71717a,#a1a1aa,#d4d4d8\",\r\n    noFocus: false,\r\n  },\r\n  blue: {\r\n    gap: 10,\r\n    speed: 25,\r\n    colors: \"#0ea5e9,#38bdf8,#7dd3fc\",\r\n    noFocus: false,\r\n  },\r\n  yellow: {\r\n    gap: 3,\r\n    speed: 20,\r\n    colors: \"#ca8a04,#eab308,#facc15\",\r\n    noFocus: false,\r\n  },\r\n  pink: {\r\n    gap: 6,\r\n    speed: 80,\r\n    colors: \"#be123c,#e11d48,#f43f5e\",\r\n    noFocus: true,\r\n  },\r\n};\r\n\r\ninterface PixelCardProps {\r\n  variant?: \"default\" | \"blue\" | \"yellow\" | \"pink\";\r\n  gap?: number;\r\n  speed?: number;\r\n  colors?: string;\r\n  noFocus?: boolean;\r\n  className?: string;\r\n  children: ReactNode;\r\n}\r\n\r\nfunction getEffectiveSpeed(value: number, reducedMotion: boolean) {\r\n  const min = 0;\r\n  const max = 100;\r\n  const throttle = 0.001;\r\n\r\n  if (value <= min || reducedMotion) {\r\n    return min;\r\n  } else if (value >= max) {\r\n    return max * throttle;\r\n  } else {\r\n    return value * throttle;\r\n  }\r\n}\r\n\r\nexport function PixelCard({\r\n  variant = \"default\",\r\n  gap,\r\n  speed,\r\n  colors,\r\n  noFocus,\r\n  className = \"\",\r\n  children,\r\n}: PixelCardProps) {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const pixelsRef = useRef<Pixel[]>([]);\r\n  const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(\r\n    null\r\n  );\r\n  const timePreviousRef = useRef(\r\n    typeof performance !== \"undefined\" ? performance.now() : 0\r\n  );\r\n  const reducedMotion = useRef(\r\n    typeof window !== \"undefined\"\r\n      ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n      : false\r\n  ).current;\r\n\r\n  const variantCfg = VARIANTS[variant] || VARIANTS.default;\r\n  const finalGap = gap ?? variantCfg.gap;\r\n  const finalSpeed = speed ?? variantCfg.speed;\r\n  const finalColors = colors ?? variantCfg.colors;\r\n  const finalNoFocus = noFocus ?? variantCfg.noFocus;\r\n\r\n  const initPixels = () => {\r\n    if (!containerRef.current || !canvasRef.current) return;\r\n\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const width = Math.floor(rect.width) || 300;\r\n    const height = Math.floor(rect.height) || 400;\r\n    const ctx = canvasRef.current.getContext(\"2d\");\r\n    if (!ctx) return;\r\n\r\n    canvasRef.current.width = width;\r\n    canvasRef.current.height = height;\r\n    canvasRef.current.style.width = `${width}px`;\r\n    canvasRef.current.style.height = `${height}px`;\r\n\r\n    const colorsArray = finalColors.split(\",\").map((c) => c.trim());\r\n    const pxs: Pixel[] = [];\r\n    const gapValue = Math.max(parseInt(finalGap.toString(), 10), 3);\r\n\r\n    for (let x = 0; x < width; x += gapValue) {\r\n      for (let y = 0; y < height; y += gapValue) {\r\n        const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];\r\n        const dx = x - width / 2;\r\n        const dy = y - height / 2;\r\n        const distance = Math.sqrt(dx * dx + dy * dy);\r\n        const delay = reducedMotion ? 0 : distance;\r\n        pxs.push(\r\n          new Pixel(\r\n            canvasRef.current!,\r\n            ctx,\r\n            x,\r\n            y,\r\n            color,\r\n            getEffectiveSpeed(finalSpeed, reducedMotion),\r\n            delay\r\n          )\r\n        );\r\n      }\r\n    }\r\n    pixelsRef.current = pxs;\r\n  };\r\n\r\n  const doAnimate = (fnName: \"appear\" | \"disappear\") => {\r\n    animationRef.current = requestAnimationFrame(() => doAnimate(fnName));\r\n    const timeNow = performance.now();\r\n    const timePassed = timeNow - timePreviousRef.current;\r\n    const timeInterval = 1000 / 60;\r\n\r\n    if (timePassed < timeInterval) return;\r\n    timePreviousRef.current = timeNow - (timePassed % timeInterval);\r\n\r\n    const ctx = canvasRef.current?.getContext(\"2d\");\r\n    if (!ctx || !canvasRef.current) return;\r\n\r\n    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);\r\n\r\n    let allIdle = true;\r\n    for (let i = 0; i < pixelsRef.current.length; i++) {\r\n      const pixel = pixelsRef.current[i];\r\n      pixel[fnName]();\r\n      if (!pixel.isIdle) {\r\n        allIdle = false;\r\n      }\r\n    }\r\n    if (allIdle && animationRef.current) {\r\n      cancelAnimationFrame(animationRef.current);\r\n    }\r\n  };\r\n\r\n  const handleAnimation = (name: \"appear\" | \"disappear\") => {\r\n    if (animationRef.current !== null) {\r\n      cancelAnimationFrame(animationRef.current);\r\n    }\r\n    animationRef.current = requestAnimationFrame(() => doAnimate(name));\r\n  };\r\n\r\n  const onMouseEnter = () => handleAnimation(\"appear\");\r\n  const onMouseLeave = () => handleAnimation(\"disappear\");\r\n  const onFocus: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n    if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n    handleAnimation(\"appear\");\r\n  };\r\n  const onBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n    if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n    handleAnimation(\"disappear\");\r\n  };\r\n\r\n  useEffect(() => {\r\n    initPixels();\r\n    const observer = new ResizeObserver(() => {\r\n      initPixels();\r\n    });\r\n    if (containerRef.current) {\r\n      observer.observe(containerRef.current);\r\n    }\r\n    return () => {\r\n      observer.disconnect();\r\n      if (animationRef.current !== null) {\r\n        cancelAnimationFrame(animationRef.current);\r\n      }\r\n    };\r\n  }, [finalGap, finalSpeed, finalColors, finalNoFocus]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={cn(\r\n        \"relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900\",\r\n        className\r\n      )}\r\n      onMouseEnter={onMouseEnter}\r\n      onMouseLeave={onMouseLeave}\r\n      onFocus={finalNoFocus ? undefined : onFocus}\r\n      onBlur={finalNoFocus ? undefined : onBlur}\r\n      tabIndex={finalNoFocus ? -1 : 0}\r\n    >\r\n      <canvas\r\n        className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n        ref={canvasRef}\r\n      />\r\n      <div className=\"relative z-10\">{children}</div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default PixelCard;\r\n"]}

package/dist/pixel-card/index.mjs

@@ -0,0 +1,2 @@
+import {useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function H(...s){return twMerge(clsx(s))}var M=class{constructor(t,l,p,g,S,w,o){this.width=t.width,this.height=t.height,this.ctx=l,this.x=p,this.y=g,this.color=S,this.speed=this.getRandomValue(.1,.9)*w,this.size=0,this.sizeStep=Math.random()*.4,this.minSize=.5,this.maxSizeInteger=2,this.maxSize=this.getRandomValue(this.minSize,this.maxSizeInteger),this.delay=o,this.counter=0,this.counterStep=Math.random()*4+(this.width+this.height)*.01,this.isIdle=false,this.isReverse=false,this.isShimmer=false;}getRandomValue(t,l){return Math.random()*(l-t)+t}draw(){let t=this.maxSizeInteger*.5-this.size*.5;this.ctx.fillStyle=this.color,this.ctx.fillRect(this.x+t,this.y+t,this.size,this.size);}appear(){if(this.isIdle=false,this.counter<=this.delay){this.counter+=this.counterStep;return}this.size>=this.maxSize&&(this.isShimmer=true),this.isShimmer?this.shimmer():this.size+=this.sizeStep,this.draw();}disappear(){if(this.isShimmer=false,this.counter=0,this.size<=0){this.isIdle=true;return}else this.size-=.1;this.draw();}shimmer(){this.size>=this.maxSize?this.isReverse=true:this.size<=this.minSize&&(this.isReverse=false),this.isReverse?this.size-=this.speed:this.size+=this.speed;}},L={default:{gap:5,speed:35,colors:"#71717a,#a1a1aa,#d4d4d8",noFocus:false},blue:{gap:10,speed:25,colors:"#0ea5e9,#38bdf8,#7dd3fc",noFocus:false},yellow:{gap:3,speed:20,colors:"#ca8a04,#eab308,#facc15",noFocus:false},pink:{gap:6,speed:80,colors:"#be123c,#e11d48,#f43f5e",noFocus:true}};function U(s,t){return s<=0||t?0:s>=100?100*.001:s*.001}function W({variant:s="default",gap:t,speed:l,colors:p,noFocus:g,className:S="",children:w}){let o=useRef(null),n=useRef(null),R=useRef([]),i=useRef(null),y=useRef(typeof performance<"u"?performance.now():0),F=useRef(typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false).current,b=L[s]||L.default,C=t??b.gap,I=l??b.speed,A=p??b.colors,x=g??b.noFocus,E=()=>{if(!o.current||!n.current)return;let e=o.current.getBoundingClientRect(),a=Math.floor(e.width)||300,c=Math.floor(e.height)||400,d=n.current.getContext("2d");if(!d)return;n.current.width=a,n.current.height=c,n.current.style.width=`${a}px`,n.current.style.height=`${c}px`;let m=A.split(",").map(r=>r.trim()),f=[],u=Math.max(parseInt(C.toString(),10),3);for(let r=0;r<a;r+=u)for(let v=0;v<c;v+=u){let O=m[Math.floor(Math.random()*m.length)],N=r-a/2,P=v-c/2,$=Math.sqrt(N*N+P*P),G=F?0:$;f.push(new M(n.current,d,r,v,O,U(I,F),G));}R.current=f;},T=e=>{i.current=requestAnimationFrame(()=>T(e));let a=performance.now(),c=a-y.current,d=1e3/60;if(c<d)return;y.current=a-c%d;let m=n.current?.getContext("2d");if(!m||!n.current)return;m.clearRect(0,0,n.current.width,n.current.height);let f=true;for(let u=0;u<R.current.length;u++){let r=R.current[u];r[e](),r.isIdle||(f=false);}f&&i.current&&cancelAnimationFrame(i.current);},z=e=>{i.current!==null&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>T(e));},D=()=>z("appear"),k=()=>z("disappear"),q=e=>{e.currentTarget.contains(e.relatedTarget)||z("appear");},B=e=>{e.currentTarget.contains(e.relatedTarget)||z("disappear");};return useEffect(()=>{E();let e=new ResizeObserver(()=>{E();});return o.current&&e.observe(o.current),()=>{e.disconnect(),i.current!==null&&cancelAnimationFrame(i.current);}},[C,I,A,x]),jsxs("div",{ref:o,className:H("relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900",S),onMouseEnter:D,onMouseLeave:k,onFocus:x?void 0:q,onBlur:x?void 0:B,tabIndex:x?-1:0,children:[jsx("canvas",{className:"absolute inset-0 w-full h-full pointer-events-none",ref:n}),jsx("div",{className:"relative z-10",children:w})]})}var ne=W;export{W as PixelCard,ne as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/pixel-card/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/pixel-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","Pixel","canvas","context","x","y","color","speed","delay","min","max","centerOffset","VARIANTS","getEffectiveSpeed","value","reducedMotion","PixelCard","variant","gap","colors","noFocus","className","children","containerRef","useRef","canvasRef","pixelsRef","animationRef","timePreviousRef","variantCfg","finalGap","finalSpeed","finalColors","finalNoFocus","initPixels","rect","width","height","ctx","colorsArray","c","pxs","gapValue","dx","dy","distance","doAnimate","fnName","timeNow","timePassed","timeInterval","allIdle","i","pixel","handleAnimation","name","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","observer","jsxs","jsx","pixel_card_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nclass Pixel {\r\n  width: number;\r\n  height: number;\r\n  ctx: CanvasRenderingContext2D;\r\n  x: number;\r\n  y: number;\r\n  color: string;\r\n  speed: number;\r\n  size: number;\r\n  sizeStep: number;\r\n  minSize: number;\r\n  maxSizeInteger: number;\r\n  maxSize: number;\r\n  delay: number;\r\n  counter: number;\r\n  counterStep: number;\r\n  isIdle: boolean;\r\n  isReverse: boolean;\r\n  isShimmer: boolean;\r\n\r\n  constructor(\r\n    canvas: HTMLCanvasElement,\r\n    context: CanvasRenderingContext2D,\r\n    x: number,\r\n    y: number,\r\n    color: string,\r\n    speed: number,\r\n    delay: number\r\n  ) {\r\n    this.width = canvas.width;\r\n    this.height = canvas.height;\r\n    this.ctx = context;\r\n    this.x = x;\r\n    this.y = y;\r\n    this.color = color;\r\n    this.speed = this.getRandomValue(0.1, 0.9) * speed;\r\n    this.size = 0;\r\n    this.sizeStep = Math.random() * 0.4;\r\n    this.minSize = 0.5;\r\n    this.maxSizeInteger = 2;\r\n    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);\r\n    this.delay = delay;\r\n    this.counter = 0;\r\n    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;\r\n    this.isIdle = false;\r\n    this.isReverse = false;\r\n    this.isShimmer = false;\r\n  }\r\n\r\n  getRandomValue(min: number, max: number) {\r\n    return Math.random() * (max - min) + min;\r\n  }\r\n\r\n  draw() {\r\n    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;\r\n    this.ctx.fillStyle = this.color;\r\n    this.ctx.fillRect(\r\n      this.x + centerOffset,\r\n      this.y + centerOffset,\r\n      this.size,\r\n      this.size\r\n    );\r\n  }\r\n\r\n  appear() {\r\n    this.isIdle = false;\r\n    if (this.counter <= this.delay) {\r\n      this.counter += this.counterStep;\r\n      return;\r\n    }\r\n    if (this.size >= this.maxSize) {\r\n      this.isShimmer = true;\r\n    }\r\n    if (this.isShimmer) {\r\n      this.shimmer();\r\n    } else {\r\n      this.size += this.sizeStep;\r\n    }\r\n    this.draw();\r\n  }\r\n\r\n  disappear() {\r\n    this.isShimmer = false;\r\n    this.counter = 0;\r\n    if (this.size <= 0) {\r\n      this.isIdle = true;\r\n      return;\r\n    } else {\r\n      this.size -= 0.1;\r\n    }\r\n    this.draw();\r\n  }\r\n\r\n  shimmer() {\r\n    if (this.size >= this.maxSize) {\r\n      this.isReverse = true;\r\n    } else if (this.size <= this.minSize) {\r\n      this.isReverse = false;\r\n    }\r\n    if (this.isReverse) {\r\n      this.size -= this.speed;\r\n    } else {\r\n      this.size += this.speed;\r\n    }\r\n  }\r\n}\r\n\r\nconst VARIANTS = {\r\n  default: {\r\n    gap: 5,\r\n    speed: 35,\r\n    colors: \"#71717a,#a1a1aa,#d4d4d8\",\r\n    noFocus: false,\r\n  },\r\n  blue: {\r\n    gap: 10,\r\n    speed: 25,\r\n    colors: \"#0ea5e9,#38bdf8,#7dd3fc\",\r\n    noFocus: false,\r\n  },\r\n  yellow: {\r\n    gap: 3,\r\n    speed: 20,\r\n    colors: \"#ca8a04,#eab308,#facc15\",\r\n    noFocus: false,\r\n  },\r\n  pink: {\r\n    gap: 6,\r\n    speed: 80,\r\n    colors: \"#be123c,#e11d48,#f43f5e\",\r\n    noFocus: true,\r\n  },\r\n};\r\n\r\ninterface PixelCardProps {\r\n  variant?: \"default\" | \"blue\" | \"yellow\" | \"pink\";\r\n  gap?: number;\r\n  speed?: number;\r\n  colors?: string;\r\n  noFocus?: boolean;\r\n  className?: string;\r\n  children: ReactNode;\r\n}\r\n\r\nfunction getEffectiveSpeed(value: number, reducedMotion: boolean) {\r\n  const min = 0;\r\n  const max = 100;\r\n  const throttle = 0.001;\r\n\r\n  if (value <= min || reducedMotion) {\r\n    return min;\r\n  } else if (value >= max) {\r\n    return max * throttle;\r\n  } else {\r\n    return value * throttle;\r\n  }\r\n}\r\n\r\nexport function PixelCard({\r\n  variant = \"default\",\r\n  gap,\r\n  speed,\r\n  colors,\r\n  noFocus,\r\n  className = \"\",\r\n  children,\r\n}: PixelCardProps) {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const pixelsRef = useRef<Pixel[]>([]);\r\n  const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(\r\n    null\r\n  );\r\n  const timePreviousRef = useRef(\r\n    typeof performance !== \"undefined\" ? performance.now() : 0\r\n  );\r\n  const reducedMotion = useRef(\r\n    typeof window !== \"undefined\"\r\n      ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n      : false\r\n  ).current;\r\n\r\n  const variantCfg = VARIANTS[variant] || VARIANTS.default;\r\n  const finalGap = gap ?? variantCfg.gap;\r\n  const finalSpeed = speed ?? variantCfg.speed;\r\n  const finalColors = colors ?? variantCfg.colors;\r\n  const finalNoFocus = noFocus ?? variantCfg.noFocus;\r\n\r\n  const initPixels = () => {\r\n    if (!containerRef.current || !canvasRef.current) return;\r\n\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const width = Math.floor(rect.width) || 300;\r\n    const height = Math.floor(rect.height) || 400;\r\n    const ctx = canvasRef.current.getContext(\"2d\");\r\n    if (!ctx) return;\r\n\r\n    canvasRef.current.width = width;\r\n    canvasRef.current.height = height;\r\n    canvasRef.current.style.width = `${width}px`;\r\n    canvasRef.current.style.height = `${height}px`;\r\n\r\n    const colorsArray = finalColors.split(\",\").map((c) => c.trim());\r\n    const pxs: Pixel[] = [];\r\n    const gapValue = Math.max(parseInt(finalGap.toString(), 10), 3);\r\n\r\n    for (let x = 0; x < width; x += gapValue) {\r\n      for (let y = 0; y < height; y += gapValue) {\r\n        const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];\r\n        const dx = x - width / 2;\r\n        const dy = y - height / 2;\r\n        const distance = Math.sqrt(dx * dx + dy * dy);\r\n        const delay = reducedMotion ? 0 : distance;\r\n        pxs.push(\r\n          new Pixel(\r\n            canvasRef.current!,\r\n            ctx,\r\n            x,\r\n            y,\r\n            color,\r\n            getEffectiveSpeed(finalSpeed, reducedMotion),\r\n            delay\r\n          )\r\n        );\r\n      }\r\n    }\r\n    pixelsRef.current = pxs;\r\n  };\r\n\r\n  const doAnimate = (fnName: \"appear\" | \"disappear\") => {\r\n    animationRef.current = requestAnimationFrame(() => doAnimate(fnName));\r\n    const timeNow = performance.now();\r\n    const timePassed = timeNow - timePreviousRef.current;\r\n    const timeInterval = 1000 / 60;\r\n\r\n    if (timePassed < timeInterval) return;\r\n    timePreviousRef.current = timeNow - (timePassed % timeInterval);\r\n\r\n    const ctx = canvasRef.current?.getContext(\"2d\");\r\n    if (!ctx || !canvasRef.current) return;\r\n\r\n    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);\r\n\r\n    let allIdle = true;\r\n    for (let i = 0; i < pixelsRef.current.length; i++) {\r\n      const pixel = pixelsRef.current[i];\r\n      pixel[fnName]();\r\n      if (!pixel.isIdle) {\r\n        allIdle = false;\r\n      }\r\n    }\r\n    if (allIdle && animationRef.current) {\r\n      cancelAnimationFrame(animationRef.current);\r\n    }\r\n  };\r\n\r\n  const handleAnimation = (name: \"appear\" | \"disappear\") => {\r\n    if (animationRef.current !== null) {\r\n      cancelAnimationFrame(animationRef.current);\r\n    }\r\n    animationRef.current = requestAnimationFrame(() => doAnimate(name));\r\n  };\r\n\r\n  const onMouseEnter = () => handleAnimation(\"appear\");\r\n  const onMouseLeave = () => handleAnimation(\"disappear\");\r\n  const onFocus: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n    if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n    handleAnimation(\"appear\");\r\n  };\r\n  const onBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n    if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n    handleAnimation(\"disappear\");\r\n  };\r\n\r\n  useEffect(() => {\r\n    initPixels();\r\n    const observer = new ResizeObserver(() => {\r\n      initPixels();\r\n    });\r\n    if (containerRef.current) {\r\n      observer.observe(containerRef.current);\r\n    }\r\n    return () => {\r\n      observer.disconnect();\r\n      if (animationRef.current !== null) {\r\n        cancelAnimationFrame(animationRef.current);\r\n      }\r\n    };\r\n  }, [finalGap, finalSpeed, finalColors, finalNoFocus]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={cn(\r\n        \"relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900\",\r\n        className\r\n      )}\r\n      onMouseEnter={onMouseEnter}\r\n      onMouseLeave={onMouseLeave}\r\n      onFocus={finalNoFocus ? undefined : onFocus}\r\n      onBlur={finalNoFocus ? undefined : onBlur}\r\n      tabIndex={finalNoFocus ? -1 : 0}\r\n    >\r\n      <canvas\r\n        className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n        ref={canvasRef}\r\n      />\r\n      <div className=\"relative z-10\">{children}</div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default PixelCard;\r\n"]}

package/dist/smooth-cursor/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function c(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function S({className:e}){let[l,t]=react.useState(false),o=framerMotion.useMotionValue(-100),s=framerMotion.useMotionValue(-100),n={damping:25,stiffness:700},p=framerMotion.useSpring(o,n),a=framerMotion.useSpring(s,n);return react.useEffect(()=>{let r=u=>{o.set(u.clientX-16),s.set(u.clientY-16),t(true);},i=()=>{t(false);};return window.addEventListener("mousemove",r),window.addEventListener("mouseleave",i),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseleave",i);}},[o,s]),jsxRuntime.jsx(framerMotion.motion.div,{className:c("pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference",l?"opacity-100":"opacity-0",e),style:{x:p,y:a},transition:{type:"spring",stiffness:500,damping:28}})}var M=S;exports.SmoothCursor=S;exports.default=M;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/smooth-cursor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/smooth-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","SmoothCursor","className","isVisible","setIsVisible","useState","cursorX","useMotionValue","cursorY","springConfig","cursorXSpring","useSpring","cursorYSpring","useEffect","moveCursor","e","hideCursor","jsx","motion","smooth_cursor_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,sBAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAa,CAAE,SAAA,CAAAC,CAAU,CAAA,CAAsB,CAC7D,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,eAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAUC,2BAAAA,CAAe,IAAI,CAAA,CAC7BC,CAAAA,CAAUD,4BAAe,IAAI,CAAA,CAE7BE,EAAe,CAAE,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAAA,CAC7CC,CAAAA,CAAgBC,uBAAUL,CAAAA,CAASG,CAAY,EAC/CG,CAAAA,CAAgBD,sBAAAA,CAAUH,CAAAA,CAASC,CAAY,EAErD,OAAAI,eAAAA,CAAU,IAAM,CACd,IAAMC,EAAcC,CAAAA,EAAkB,CACpCT,CAAAA,CAAQ,GAAA,CAAIS,EAAE,OAAA,CAAU,EAAE,CAAA,CAC1BP,CAAAA,CAAQ,IAAIO,CAAAA,CAAE,OAAA,CAAU,EAAE,CAAA,CAC1BX,EAAa,IAAI,EACnB,EAEMY,CAAAA,CAAa,IAAM,CACvBZ,CAAAA,CAAa,KAAK,EACpB,CAAA,CAEA,cAAO,gBAAA,CAAiB,WAAA,CAAaU,CAAU,CAAA,CAC/C,OAAO,gBAAA,CAAiB,YAAA,CAAcE,CAAU,CAAA,CAEzC,IAAM,CACX,MAAA,CAAO,oBAAoB,WAAA,CAAaF,CAAU,EAClD,MAAA,CAAO,mBAAA,CAAoB,YAAA,CAAcE,CAAU,EACrD,CACF,CAAA,CAAG,CAACV,CAAAA,CAASE,CAAO,CAAC,CAAA,CAGnBS,cAAAA,CAACC,mBAAAA,CAAO,IAAP,CACC,SAAA,CAAWrB,EACT,mGAAA,CACAM,CAAAA,CAAY,cAAgB,WAAA,CAC5BD,CACF,CAAA,CACA,KAAA,CAAO,CACL,CAAA,CAAGQ,CAAAA,CACH,EAAGE,CACL,CAAA,CACA,WAAY,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,IACX,OAAA,CAAS,EACX,EACF,CAEJ,KAEOO,CAAAA,CAAQlB","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SmoothCursorProps {\r\n  className?: string;\r\n}\r\n\r\nexport function SmoothCursor({ className }: SmoothCursorProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const cursorX = useMotionValue(-100);\r\n  const cursorY = useMotionValue(-100);\r\n\r\n  const springConfig = { damping: 25, stiffness: 700 };\r\n  const cursorXSpring = useSpring(cursorX, springConfig);\r\n  const cursorYSpring = useSpring(cursorY, springConfig);\r\n\r\n  useEffect(() => {\r\n    const moveCursor = (e: MouseEvent) => {\r\n      cursorX.set(e.clientX - 16);\r\n      cursorY.set(e.clientY - 16);\r\n      setIsVisible(true);\r\n    };\r\n\r\n    const hideCursor = () => {\r\n      setIsVisible(false);\r\n    };\r\n\r\n    window.addEventListener(\"mousemove\", moveCursor);\r\n    window.addEventListener(\"mouseleave\", hideCursor);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"mousemove\", moveCursor);\r\n      window.removeEventListener(\"mouseleave\", hideCursor);\r\n    };\r\n  }, [cursorX, cursorY]);\r\n\r\n  return (\r\n    <motion.div\r\n      className={cn(\r\n        \"pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference\",\r\n        isVisible ? \"opacity-100\" : \"opacity-0\",\r\n        className\r\n      )}\r\n      style={{\r\n        x: cursorXSpring,\r\n        y: cursorYSpring,\r\n      }}\r\n      transition={{\r\n        type: \"spring\",\r\n        stiffness: 500,\r\n        damping: 28,\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\nexport default SmoothCursor;\r\n"]}

package/dist/smooth-cursor/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useEffect}from'react';import {useMotionValue,useSpring,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function c(...e){return twMerge(clsx(e))}function S({className:e}){let[l,t]=useState(false),o=useMotionValue(-100),s=useMotionValue(-100),n={damping:25,stiffness:700},p=useSpring(o,n),a=useSpring(s,n);return useEffect(()=>{let r=u=>{o.set(u.clientX-16),s.set(u.clientY-16),t(true);},i=()=>{t(false);};return window.addEventListener("mousemove",r),window.addEventListener("mouseleave",i),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseleave",i);}},[o,s]),jsx(motion.div,{className:c("pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference",l?"opacity-100":"opacity-0",e),style:{x:p,y:a},transition:{type:"spring",stiffness:500,damping:28}})}var M=S;export{S as SmoothCursor,M as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/smooth-cursor/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/smooth-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","SmoothCursor","className","isVisible","setIsVisible","useState","cursorX","useMotionValue","cursorY","springConfig","cursorXSpring","useSpring","cursorYSpring","useEffect","moveCursor","e","hideCursor","jsx","motion","smooth_cursor_default"],"mappings":"oMAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,QAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAa,CAAE,SAAA,CAAAC,CAAU,CAAA,CAAsB,CAC7D,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,SAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAUC,cAAAA,CAAe,IAAI,CAAA,CAC7BC,CAAAA,CAAUD,eAAe,IAAI,CAAA,CAE7BE,EAAe,CAAE,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAAA,CAC7CC,CAAAA,CAAgBC,UAAUL,CAAAA,CAASG,CAAY,EAC/CG,CAAAA,CAAgBD,SAAAA,CAAUH,CAAAA,CAASC,CAAY,EAErD,OAAAI,SAAAA,CAAU,IAAM,CACd,IAAMC,EAAcC,CAAAA,EAAkB,CACpCT,CAAAA,CAAQ,GAAA,CAAIS,EAAE,OAAA,CAAU,EAAE,CAAA,CAC1BP,CAAAA,CAAQ,IAAIO,CAAAA,CAAE,OAAA,CAAU,EAAE,CAAA,CAC1BX,EAAa,IAAI,EACnB,EAEMY,CAAAA,CAAa,IAAM,CACvBZ,CAAAA,CAAa,KAAK,EACpB,CAAA,CAEA,cAAO,gBAAA,CAAiB,WAAA,CAAaU,CAAU,CAAA,CAC/C,OAAO,gBAAA,CAAiB,YAAA,CAAcE,CAAU,CAAA,CAEzC,IAAM,CACX,MAAA,CAAO,oBAAoB,WAAA,CAAaF,CAAU,EAClD,MAAA,CAAO,mBAAA,CAAoB,YAAA,CAAcE,CAAU,EACrD,CACF,CAAA,CAAG,CAACV,CAAAA,CAASE,CAAO,CAAC,CAAA,CAGnBS,GAAAA,CAACC,MAAAA,CAAO,IAAP,CACC,SAAA,CAAWrB,EACT,mGAAA,CACAM,CAAAA,CAAY,cAAgB,WAAA,CAC5BD,CACF,CAAA,CACA,KAAA,CAAO,CACL,CAAA,CAAGQ,CAAAA,CACH,EAAGE,CACL,CAAA,CACA,WAAY,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,IACX,OAAA,CAAS,EACX,EACF,CAEJ,KAEOO,CAAAA,CAAQlB","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SmoothCursorProps {\r\n  className?: string;\r\n}\r\n\r\nexport function SmoothCursor({ className }: SmoothCursorProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const cursorX = useMotionValue(-100);\r\n  const cursorY = useMotionValue(-100);\r\n\r\n  const springConfig = { damping: 25, stiffness: 700 };\r\n  const cursorXSpring = useSpring(cursorX, springConfig);\r\n  const cursorYSpring = useSpring(cursorY, springConfig);\r\n\r\n  useEffect(() => {\r\n    const moveCursor = (e: MouseEvent) => {\r\n      cursorX.set(e.clientX - 16);\r\n      cursorY.set(e.clientY - 16);\r\n      setIsVisible(true);\r\n    };\r\n\r\n    const hideCursor = () => {\r\n      setIsVisible(false);\r\n    };\r\n\r\n    window.addEventListener(\"mousemove\", moveCursor);\r\n    window.addEventListener(\"mouseleave\", hideCursor);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"mousemove\", moveCursor);\r\n      window.removeEventListener(\"mouseleave\", hideCursor);\r\n    };\r\n  }, [cursorX, cursorY]);\r\n\r\n  return (\r\n    <motion.div\r\n      className={cn(\r\n        \"pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference\",\r\n        isVisible ? \"opacity-100\" : \"opacity-0\",\r\n        className\r\n      )}\r\n      style={{\r\n        x: cursorXSpring,\r\n        y: cursorYSpring,\r\n      }}\r\n      transition={{\r\n        type: \"spring\",\r\n        stiffness: 500,\r\n        damping: 28,\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\nexport default SmoothCursor;\r\n"]}

package/dist/tilted-card/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function y(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=react.useRef(null),x=framerMotion.useMotionValue(0),S=framerMotion.useMotionValue(0),l=framerMotion.useSpring(framerMotion.useMotionValue(0),m),c=framerMotion.useSpring(framerMotion.useMotionValue(0),m),u=framerMotion.useSpring(1,m),d=framerMotion.useSpring(0),p=framerMotion.useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=react.useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxRuntime.jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsxRuntime.jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxRuntime.jsxs(framerMotion.motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsxRuntime.jsx(framerMotion.motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsxRuntime.jsx(framerMotion.motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;exports.TiltedCard=G;exports.default=te;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tilted-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n  imageSrc: string;\r\n  altText?: string;\r\n  captionText?: string;\r\n  containerHeight?: CSSProperties[\"height\"];\r\n  containerWidth?: CSSProperties[\"width\"];\r\n  imageHeight?: CSSProperties[\"height\"];\r\n  imageWidth?: CSSProperties[\"width\"];\r\n  scaleOnHover?: number;\r\n  rotateAmplitude?: number;\r\n  showMobileWarning?: boolean;\r\n  showTooltip?: boolean;\r\n  overlayContent?: ReactNode;\r\n  displayOverlayContent?: boolean;\r\n  className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n  damping: 30,\r\n  stiffness: 100,\r\n  mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n  imageSrc,\r\n  altText = \"Tilted card image\",\r\n  captionText = \"\",\r\n  containerHeight = \"300px\",\r\n  containerWidth = \"100%\",\r\n  imageHeight = \"300px\",\r\n  imageWidth = \"300px\",\r\n  scaleOnHover = 1.1,\r\n  rotateAmplitude = 14,\r\n  showMobileWarning = false,\r\n  showTooltip = true,\r\n  overlayContent = null,\r\n  displayOverlayContent = false,\r\n  className,\r\n}: TiltedCardProps) {\r\n  const ref = useRef<HTMLElement>(null);\r\n\r\n  const x = useMotionValue(0);\r\n  const y = useMotionValue(0);\r\n  const rotateX = useSpring(useMotionValue(0), springValues);\r\n  const rotateY = useSpring(useMotionValue(0), springValues);\r\n  const scale = useSpring(1, springValues);\r\n  const opacity = useSpring(0);\r\n  const rotateFigcaption = useSpring(0, {\r\n    stiffness: 350,\r\n    damping: 30,\r\n    mass: 1,\r\n  });\r\n\r\n  const [lastY, setLastY] = useState<number>(0);\r\n\r\n  function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n    if (!ref.current) return;\r\n\r\n    const rect = ref.current.getBoundingClientRect();\r\n    const offsetX = e.clientX - rect.left - rect.width / 2;\r\n    const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n    rotateX.set(rotationX);\r\n    rotateY.set(rotationY);\r\n\r\n    x.set(e.clientX - rect.left);\r\n    y.set(e.clientY - rect.top);\r\n\r\n    const velocityY = offsetY - lastY;\r\n    rotateFigcaption.set(-velocityY * 0.6);\r\n    setLastY(offsetY);\r\n  }\r\n\r\n  function handleMouseEnter() {\r\n    scale.set(scaleOnHover);\r\n    opacity.set(1);\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    opacity.set(0);\r\n    scale.set(1);\r\n    rotateX.set(0);\r\n    rotateY.set(0);\r\n    rotateFigcaption.set(0);\r\n  }\r\n\r\n  return (\r\n    <figure\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex items-center justify-center [perspective:800px]\",\r\n        className\r\n      )}\r\n      style={{\r\n        height: containerHeight,\r\n        width: containerWidth,\r\n      }}\r\n      onMouseMove={handleMouse}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {showMobileWarning && (\r\n        <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n          Best viewed on desktop\r\n        </div>\r\n      )}\r\n\r\n      <motion.div\r\n        className=\"relative [transform-style:preserve-3d]\"\r\n        style={{\r\n          width: imageWidth,\r\n          height: imageHeight,\r\n          rotateX,\r\n          rotateY,\r\n          scale,\r\n        }}\r\n      >\r\n        <motion.img\r\n          src={imageSrc}\r\n          alt={altText}\r\n          className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n          style={{\r\n            width: imageWidth,\r\n            height: imageHeight,\r\n          }}\r\n        />\r\n\r\n        {displayOverlayContent && overlayContent && (\r\n          <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n            {overlayContent}\r\n          </motion.div>\r\n        )}\r\n      </motion.div>\r\n\r\n      {showTooltip && captionText && (\r\n        <motion.figcaption\r\n          className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n          style={{\r\n            x,\r\n            y,\r\n            opacity,\r\n            rotate: rotateFigcaption,\r\n          }}\r\n        >\r\n          {captionText}\r\n        </motion.figcaption>\r\n      )}\r\n    </figure>\r\n  );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}

package/dist/tilted-card/index.mjs

@@ -0,0 +1,2 @@
+import {useRef,useState}from'react';import {useMotionValue,useSpring,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function y(...r){return twMerge(clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=useRef(null),x=useMotionValue(0),S=useMotionValue(0),l=useSpring(useMotionValue(0),m),c=useSpring(useMotionValue(0),m),u=useSpring(1,m),d=useSpring(0),p=useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxs(motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsx(motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsx(motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsx(motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;export{G as TiltedCard,te as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/tilted-card/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n  imageSrc: string;\r\n  altText?: string;\r\n  captionText?: string;\r\n  containerHeight?: CSSProperties[\"height\"];\r\n  containerWidth?: CSSProperties[\"width\"];\r\n  imageHeight?: CSSProperties[\"height\"];\r\n  imageWidth?: CSSProperties[\"width\"];\r\n  scaleOnHover?: number;\r\n  rotateAmplitude?: number;\r\n  showMobileWarning?: boolean;\r\n  showTooltip?: boolean;\r\n  overlayContent?: ReactNode;\r\n  displayOverlayContent?: boolean;\r\n  className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n  damping: 30,\r\n  stiffness: 100,\r\n  mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n  imageSrc,\r\n  altText = \"Tilted card image\",\r\n  captionText = \"\",\r\n  containerHeight = \"300px\",\r\n  containerWidth = \"100%\",\r\n  imageHeight = \"300px\",\r\n  imageWidth = \"300px\",\r\n  scaleOnHover = 1.1,\r\n  rotateAmplitude = 14,\r\n  showMobileWarning = false,\r\n  showTooltip = true,\r\n  overlayContent = null,\r\n  displayOverlayContent = false,\r\n  className,\r\n}: TiltedCardProps) {\r\n  const ref = useRef<HTMLElement>(null);\r\n\r\n  const x = useMotionValue(0);\r\n  const y = useMotionValue(0);\r\n  const rotateX = useSpring(useMotionValue(0), springValues);\r\n  const rotateY = useSpring(useMotionValue(0), springValues);\r\n  const scale = useSpring(1, springValues);\r\n  const opacity = useSpring(0);\r\n  const rotateFigcaption = useSpring(0, {\r\n    stiffness: 350,\r\n    damping: 30,\r\n    mass: 1,\r\n  });\r\n\r\n  const [lastY, setLastY] = useState<number>(0);\r\n\r\n  function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n    if (!ref.current) return;\r\n\r\n    const rect = ref.current.getBoundingClientRect();\r\n    const offsetX = e.clientX - rect.left - rect.width / 2;\r\n    const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n    rotateX.set(rotationX);\r\n    rotateY.set(rotationY);\r\n\r\n    x.set(e.clientX - rect.left);\r\n    y.set(e.clientY - rect.top);\r\n\r\n    const velocityY = offsetY - lastY;\r\n    rotateFigcaption.set(-velocityY * 0.6);\r\n    setLastY(offsetY);\r\n  }\r\n\r\n  function handleMouseEnter() {\r\n    scale.set(scaleOnHover);\r\n    opacity.set(1);\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    opacity.set(0);\r\n    scale.set(1);\r\n    rotateX.set(0);\r\n    rotateY.set(0);\r\n    rotateFigcaption.set(0);\r\n  }\r\n\r\n  return (\r\n    <figure\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex items-center justify-center [perspective:800px]\",\r\n        className\r\n      )}\r\n      style={{\r\n        height: containerHeight,\r\n        width: containerWidth,\r\n      }}\r\n      onMouseMove={handleMouse}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {showMobileWarning && (\r\n        <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n          Best viewed on desktop\r\n        </div>\r\n      )}\r\n\r\n      <motion.div\r\n        className=\"relative [transform-style:preserve-3d]\"\r\n        style={{\r\n          width: imageWidth,\r\n          height: imageHeight,\r\n          rotateX,\r\n          rotateY,\r\n          scale,\r\n        }}\r\n      >\r\n        <motion.img\r\n          src={imageSrc}\r\n          alt={altText}\r\n          className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n          style={{\r\n            width: imageWidth,\r\n            height: imageHeight,\r\n          }}\r\n        />\r\n\r\n        {displayOverlayContent && overlayContent && (\r\n          <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n            {overlayContent}\r\n          </motion.div>\r\n        )}\r\n      </motion.div>\r\n\r\n      {showTooltip && captionText && (\r\n        <motion.figcaption\r\n          className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n          style={{\r\n            x,\r\n            y,\r\n            opacity,\r\n            rotate: rotateFigcaption,\r\n          }}\r\n        >\r\n          {captionText}\r\n        </motion.figcaption>\r\n      )}\r\n    </figure>\r\n  );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bynana-ui",
-  "version": "1.3.0",
-  "description": "90+ Beautiful React UI components built with Tailwind CSS and Framer Motion",
+  "version": "1.4.0",
+  "description": "105+ Beautiful React UI components built with Tailwind CSS and Framer Motion",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -97,6 +97,20 @@
     "./checkbox": { "import": "./dist/checkbox/index.mjs", "require": "./dist/checkbox/index.js", "types": "./dist/checkbox/index.d.ts" },
     "./radio": { "import": "./dist/radio/index.mjs", "require": "./dist/radio/index.js", "types": "./dist/radio/index.d.ts" },
     "./select": { "import": "./dist/select/index.mjs", "require": "./dist/select/index.js", "types": "./dist/select/index.d.ts" },
+    "./input-otp": { "import": "./dist/input-otp/index.mjs", "require": "./dist/input-otp/index.js", "types": "./dist/input-otp/index.d.ts" },
+    "./hamburger-basic": { "import": "./dist/hamburger-basic/index.mjs", "require": "./dist/hamburger-basic/index.js", "types": "./dist/hamburger-basic/index.d.ts" },
+    "./hamburger-spin": { "import": "./dist/hamburger-spin/index.mjs", "require": "./dist/hamburger-spin/index.js", "types": "./dist/hamburger-spin/index.d.ts" },
+    "./click-spark": { "import": "./dist/click-spark/index.mjs", "require": "./dist/click-spark/index.js", "types": "./dist/click-spark/index.d.ts" },
+    "./smooth-cursor": { "import": "./dist/smooth-cursor/index.mjs", "require": "./dist/smooth-cursor/index.js", "types": "./dist/smooth-cursor/index.d.ts" },
+    "./float-effect": { "import": "./dist/float-effect/index.mjs", "require": "./dist/float-effect/index.js", "types": "./dist/float-effect/index.d.ts" },
+    "./glow-effect": { "import": "./dist/glow-effect/index.mjs", "require": "./dist/glow-effect/index.js", "types": "./dist/glow-effect/index.d.ts" },
+    "./blur-fade": { "import": "./dist/blur-fade/index.mjs", "require": "./dist/blur-fade/index.js", "types": "./dist/blur-fade/index.d.ts" },
+    "./pixel-card": { "import": "./dist/pixel-card/index.mjs", "require": "./dist/pixel-card/index.js", "types": "./dist/pixel-card/index.d.ts" },
+    "./tilted-card": { "import": "./dist/tilted-card/index.mjs", "require": "./dist/tilted-card/index.js", "types": "./dist/tilted-card/index.d.ts" },
+    "./infinite-scroll": { "import": "./dist/infinite-scroll/index.mjs", "require": "./dist/infinite-scroll/index.js", "types": "./dist/infinite-scroll/index.d.ts" },
+    "./multi-step-loader": { "import": "./dist/multi-step-loader/index.mjs", "require": "./dist/multi-step-loader/index.js", "types": "./dist/multi-step-loader/index.d.ts" },
+    "./ascii-text": { "import": "./dist/ascii-text/index.mjs", "require": "./dist/ascii-text/index.js", "types": "./dist/ascii-text/index.d.ts" },
+    "./falling-text": { "import": "./dist/falling-text/index.mjs", "require": "./dist/falling-text/index.js", "types": "./dist/falling-text/index.d.ts" },
     "./styles.css": "./dist/styles.css"
   },
   "files": ["dist", "README.md"],