@alkimi.org/ui-kit 0.1.18 → 0.1.19

package/dist/chunk-AXL7HSZW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/TextDecoder.tsx"],"sourcesContent":["\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n  useState,\n  useEffect,\n  useMemo,\n  useRef,\n  Suspense,\n  ReactNode,\n} from \"react\"\n\n// The symbols to use for the scrambling effect (moved outside to avoid recreation)\nconst SYMBOLS = [\"\\\\\", \"-\", \"?\", \"/\", \"#\", \"!\", \"_\", \"+\", \"<\", \">\"]\nconst MAX_ITERATIONS = 3 // How many times to scramble\nconst SPEED = 200 // Speed in milliseconds between scrambles\n\n// Helper function moved outside component to avoid recreation\nconst scrambleText = (input: string): string => {\n  if (!input) return \"\"\n\n  return input\n    .split(\" \")\n    .map((word: string) => {\n      if (!word) return \"\"\n      const randomSymbol = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]\n      return randomSymbol.repeat(word.length)\n    })\n    .join(\" \")\n}\n\n// Extract text content from React nodes recursively\n// Also checks common text props like 'text', 'label', 'title', etc.\nconst extractText = (node: ReactNode): string => {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    return String(node)\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(extractText).join(\"\")\n  }\n\n  if (React.isValidElement(node)) {\n    const props = node.props as {\n      children?: ReactNode\n      text?: string\n      label?: string\n      title?: string\n      [key: string]: unknown\n    }\n\n    let result = \"\"\n\n    // Extract text from props first (in order: text, label, title)\n    if (typeof props.text === \"string\") {\n      result += props.text\n    }\n    if (typeof props.label === \"string\") {\n      result += props.label\n    }\n    if (typeof props.title === \"string\") {\n      result += props.title\n    }\n\n    // Then extract from children\n    if (props.children) {\n      result += extractText(props.children)\n    }\n\n    return result\n  }\n\n  return \"\"\n}\n\n// Clone React nodes and replace text content with scrambled text\n// This function maps scrambled text back to the original structure\nconst scrambleReactNode = (\n  node: ReactNode,\n  scrambledText: string,\n  textStartIndex: { current: number }\n): ReactNode => {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    const text = String(node)\n    // For each character in the original text, take the corresponding scrambled character\n    // This preserves the length and structure\n    let scrambled = \"\"\n    for (let i = 0; i < text.length; i++) {\n      if (textStartIndex.current < scrambledText.length) {\n        scrambled += scrambledText[textStartIndex.current]\n        textStartIndex.current++\n      } else {\n        // Fallback if scrambled text is shorter (shouldn't happen, but safety check)\n        scrambled += text[i]\n      }\n    }\n    return scrambled\n  }\n\n  if (Array.isArray(node)) {\n    return node.map((child, index) => {\n      const scrambledChild = scrambleReactNode(\n        child,\n        scrambledText,\n        textStartIndex\n      )\n      // Preserve original key if it exists, otherwise add one for React elements\n      if (React.isValidElement(scrambledChild)) {\n        const originalKey = React.isValidElement(child) ? child.key : null\n        if (scrambledChild.key == null && originalKey == null) {\n          return React.cloneElement(scrambledChild, { key: `decoded-${index}` })\n        }\n        // If original had a key but scrambled doesn't, preserve it\n        if (scrambledChild.key == null && originalKey != null) {\n          return React.cloneElement(scrambledChild, { key: originalKey })\n        }\n      }\n      return scrambledChild\n    })\n  }\n\n  if (React.isValidElement(node)) {\n    // Regular element handling - works for all components\n    const props = node.props as {\n      children?: ReactNode\n      text?: string\n      label?: string\n      title?: string\n      [key: string]: unknown\n    }\n    const newProps = { ...props }\n\n    // Handle text props in the same order as extraction (text, label, title)\n    if (typeof props.text === \"string\") {\n      const text = props.text\n      let scrambled = \"\"\n      for (let i = 0; i < text.length; i++) {\n        if (textStartIndex.current < scrambledText.length) {\n          scrambled += scrambledText[textStartIndex.current]\n          textStartIndex.current++\n        } else {\n          scrambled += text[i]\n        }\n      }\n      newProps.text = scrambled\n    }\n\n    if (typeof props.label === \"string\") {\n      const label = props.label\n      let scrambled = \"\"\n      for (let i = 0; i < label.length; i++) {\n        if (textStartIndex.current < scrambledText.length) {\n          scrambled += scrambledText[textStartIndex.current]\n          textStartIndex.current++\n        } else {\n          scrambled += label[i]\n        }\n      }\n      newProps.label = scrambled\n    }\n\n    if (typeof props.title === \"string\") {\n      const title = props.title\n      let scrambled = \"\"\n      for (let i = 0; i < title.length; i++) {\n        if (textStartIndex.current < scrambledText.length) {\n          scrambled += scrambledText[textStartIndex.current]\n          textStartIndex.current++\n        } else {\n          scrambled += title[i]\n        }\n      }\n      newProps.title = scrambled\n    }\n\n    // Handle children after props\n    if (props.children) {\n      newProps.children = scrambleReactNode(\n        props.children,\n        scrambledText,\n        textStartIndex\n      )\n    }\n    return React.cloneElement(node, newProps)\n  }\n\n  return node\n}\n\nexport interface TextDecoderProps {\n  children: ReactNode\n  className?: string\n  delay?: number // Delay in milliseconds before starting animation\n}\n\nconst TextDecoder = ({ children, className, delay = 0 }: TextDecoderProps) => {\n  const [displayContent, setDisplayContent] = useState<ReactNode>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n  const [showDecoded, setShowDecoded] = useState(true)\n  const elementRef = useRef<HTMLSpanElement>(null)\n\n  // Extract full text for scrambling\n  const fullText = useMemo(() => extractText(children), [children])\n\n  // Memoize initial scrambled text\n  const initialScrambled = useMemo(() => scrambleText(fullText), [fullText])\n\n  // Initialize with scrambled content to prevent layout shift\n  useEffect(() => {\n    if (!hasAnimated && fullText) {\n      const textStartIndex = { current: 0 }\n      const scrambledContent = scrambleReactNode(\n        children,\n        initialScrambled,\n        textStartIndex\n      )\n      setDisplayContent(scrambledContent)\n      setShowDecoded(true)\n    }\n  }, [children, initialScrambled, hasAnimated, fullText])\n\n  useEffect(() => {\n    if (!fullText) {\n      setDisplayContent(null)\n      setShowDecoded(false)\n      return\n    }\n\n    // If already animated, hide decoded and show children\n    if (hasAnimated) {\n      setShowDecoded(false)\n      return\n    }\n\n    const element = elementRef.current\n    if (!element) return\n\n    let iteration = 0\n    let intervalId: NodeJS.Timeout | null = null\n    let delayTimeoutId: NodeJS.Timeout | null = null\n\n    // Intersection Observer to detect when element is visible\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0]\n        if (entry.isIntersecting && !hasAnimated) {\n          // Start animation after delay\n          delayTimeoutId = setTimeout(() => {\n            // 1. Initial scramble\n            const textStartIndex = { current: 0 }\n            const scrambledContent = scrambleReactNode(\n              children,\n              initialScrambled,\n              textStartIndex\n            )\n            setDisplayContent(scrambledContent)\n            setShowDecoded(true)\n\n            // 2. Set up the interval\n            intervalId = setInterval(() => {\n              iteration++\n\n              if (iteration >= MAX_ITERATIONS) {\n                // Stop scrambling, fade out decoded and fade in children\n                setHasAnimated(true)\n                setShowDecoded(false)\n                if (intervalId) clearInterval(intervalId)\n              } else {\n                // Continue scrambling\n                const newScrambled = scrambleText(fullText)\n                const textStartIndex = { current: 0 }\n                const scrambledContent = scrambleReactNode(\n                  children,\n                  newScrambled,\n                  textStartIndex\n                )\n                setDisplayContent(scrambledContent)\n              }\n            }, SPEED)\n          }, delay)\n\n          // Disconnect observer once animation starts\n          observer.disconnect()\n        }\n      },\n      {\n        threshold: 0.1, // Trigger when 10% of the element is visible\n      }\n    )\n\n    observer.observe(element)\n\n    // Cleanup function\n    return () => {\n      observer.disconnect()\n      if (intervalId) clearInterval(intervalId)\n      if (delayTimeoutId) clearTimeout(delayTimeoutId)\n    }\n  }, [children, fullText, initialScrambled, hasAnimated, delay])\n\n  const ariaLabel = useMemo(() => extractText(children), [children])\n\n  return (\n    <span\n      ref={elementRef}\n      aria-label={ariaLabel} // Accessibility: Screen readers read the real text\n      className={cn(\"grid *:col-start-1 *:row-start-1\", className)}\n    >\n      {/* Both elements in the same grid cell - prevents width changes */}\n      <span\n        className={cn(\n          \"transition-opacity duration-300\",\n          hasAnimated ? \"opacity-100\" : \"opacity-0\"\n        )}\n      >\n        {children}\n      </span>\n      {/* Decoded animation overlay in the same grid cell */}\n      {showDecoded && displayContent && (\n        <span className=\"transition-opacity duration-300\">\n          {displayContent}\n        </span>\n      )}\n    </span>\n  )\n}\n\nconst SuspenseDecodedText = (props: TextDecoderProps) => {\n  return (\n    <Suspense\n      fallback={\n        <span className={cn(\"opacity-0\", props.className)}>\n          {props.children}\n        </span>\n      }\n    >\n      <TextDecoder {...props} />\n    </Suspense>\n  )\n}\n\nexport default SuspenseDecodedText\n"],"mappings":";yCAEA,OAAOA,GACL,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,MAEK,QAqSH,OAME,OAAAC,EANF,QAAAC,MAAA,oBAlSJ,IAAMC,EAAU,CAAC,KAAM,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,GAAG,EAC5DC,EAAiB,EACjBC,EAAQ,IAGRC,EAAgBC,GACfA,EAEEA,EACJ,MAAM,GAAG,EACT,IAAKC,GACCA,EACgBL,EAAQ,KAAK,MAAM,KAAK,OAAO,EAAIA,EAAQ,MAAM,CAAC,EACnD,OAAOK,EAAK,MAAM,EAFpB,EAGnB,EACA,KAAK,GAAG,EATQ,GAcfC,EAAeC,GAA4B,CAC/C,GAAI,OAAOA,GAAS,UAAY,OAAOA,GAAS,SAC9C,OAAO,OAAOA,CAAI,EAGpB,GAAI,MAAM,QAAQA,CAAI,EACpB,OAAOA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,EAGtC,GAAId,EAAM,eAAee,CAAI,EAAG,CAC9B,IAAMC,EAAQD,EAAK,MAQfE,EAAS,GAGb,OAAI,OAAOD,EAAM,MAAS,WACxBC,GAAUD,EAAM,MAEd,OAAOA,EAAM,OAAU,WACzBC,GAAUD,EAAM,OAEd,OAAOA,EAAM,OAAU,WACzBC,GAAUD,EAAM,OAIdA,EAAM,WACRC,GAAUH,EAAYE,EAAM,QAAQ,GAG/BC,CACT,CAEA,MAAO,EACT,EAIMC,EAAoB,CACxBH,EACAI,EACAC,IACc,CACd,GAAI,OAAOL,GAAS,UAAY,OAAOA,GAAS,SAAU,CACxD,IAAMM,EAAO,OAAON,CAAI,EAGpBO,EAAY,GAChB,QAASC,EAAI,EAAGA,EAAIF,EAAK,OAAQE,IAC3BH,EAAe,QAAUD,EAAc,QACzCG,GAAaH,EAAcC,EAAe,OAAO,EACjDA,EAAe,WAGfE,GAAaD,EAAKE,CAAC,EAGvB,OAAOD,CACT,CAEA,GAAI,MAAM,QAAQP,CAAI,EACpB,OAAOA,EAAK,IAAI,CAACS,EAAOC,IAAU,CAChC,IAAMC,EAAiBR,EACrBM,EACAL,EACAC,CACF,EAEA,GAAIpB,EAAM,eAAe0B,CAAc,EAAG,CACxC,IAAMC,EAAc3B,EAAM,eAAewB,CAAK,EAAIA,EAAM,IAAM,KAC9D,GAAIE,EAAe,KAAO,MAAQC,GAAe,KAC/C,OAAO3B,EAAM,aAAa0B,EAAgB,CAAE,IAAK,WAAWD,CAAK,EAAG,CAAC,EAGvE,GAAIC,EAAe,KAAO,MAAQC,GAAe,KAC/C,OAAO3B,EAAM,aAAa0B,EAAgB,CAAE,IAAKC,CAAY,CAAC,CAElE,CACA,OAAOD,CACT,CAAC,EAGH,GAAI1B,EAAM,eAAee,CAAI,EAAG,CAE9B,IAAMC,EAAQD,EAAK,MAOba,EAAW,CAAE,GAAGZ,CAAM,EAG5B,GAAI,OAAOA,EAAM,MAAS,SAAU,CAClC,IAAMK,EAAOL,EAAM,KACfM,EAAY,GAChB,QAASC,EAAI,EAAGA,EAAIF,EAAK,OAAQE,IAC3BH,EAAe,QAAUD,EAAc,QACzCG,GAAaH,EAAcC,EAAe,OAAO,EACjDA,EAAe,WAEfE,GAAaD,EAAKE,CAAC,EAGvBK,EAAS,KAAON,CAClB,CAEA,GAAI,OAAON,EAAM,OAAU,SAAU,CACnC,IAAMa,EAAQb,EAAM,MAChBM,EAAY,GAChB,QAASC,EAAI,EAAGA,EAAIM,EAAM,OAAQN,IAC5BH,EAAe,QAAUD,EAAc,QACzCG,GAAaH,EAAcC,EAAe,OAAO,EACjDA,EAAe,WAEfE,GAAaO,EAAMN,CAAC,EAGxBK,EAAS,MAAQN,CACnB,CAEA,GAAI,OAAON,EAAM,OAAU,SAAU,CACnC,IAAMc,EAAQd,EAAM,MAChBM,EAAY,GAChB,QAASC,EAAI,EAAGA,EAAIO,EAAM,OAAQP,IAC5BH,EAAe,QAAUD,EAAc,QACzCG,GAAaH,EAAcC,EAAe,OAAO,EACjDA,EAAe,WAEfE,GAAaQ,EAAMP,CAAC,EAGxBK,EAAS,MAAQN,CACnB,CAGA,OAAIN,EAAM,WACRY,EAAS,SAAWV,EAClBF,EAAM,SACNG,EACAC,CACF,GAEKpB,EAAM,aAAae,EAAMa,CAAQ,CAC1C,CAEA,OAAOb,CACT,EAQMgB,EAAc,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,CAAE,IAAwB,CAC5E,GAAM,CAACC,EAAgBC,CAAiB,EAAInC,EAAoB,IAAI,EAC9D,CAACoC,EAAaC,CAAc,EAAIrC,EAAS,EAAK,EAC9C,CAACsC,EAAaC,CAAc,EAAIvC,EAAS,EAAI,EAC7CwC,EAAarC,EAAwB,IAAI,EAGzCsC,EAAWvC,EAAQ,IAAMW,EAAYkB,CAAQ,EAAG,CAACA,CAAQ,CAAC,EAG1DW,EAAmBxC,EAAQ,IAAMQ,EAAa+B,CAAQ,EAAG,CAACA,CAAQ,CAAC,EAGzExC,EAAU,IAAM,CACd,GAAI,CAACmC,GAAeK,EAAU,CAE5B,IAAME,EAAmB1B,EACvBc,EACAW,EAHqB,CAAE,QAAS,CAAE,CAKpC,EACAP,EAAkBQ,CAAgB,EAClCJ,EAAe,EAAI,CACrB,CACF,EAAG,CAACR,EAAUW,EAAkBN,EAAaK,CAAQ,CAAC,EAEtDxC,EAAU,IAAM,CACd,GAAI,CAACwC,EAAU,CACbN,EAAkB,IAAI,EACtBI,EAAe,EAAK,EACpB,MACF,CAGA,GAAIH,EAAa,CACfG,EAAe,EAAK,EACpB,MACF,CAEA,IAAMK,EAAUJ,EAAW,QAC3B,GAAI,CAACI,EAAS,OAEd,IAAIC,EAAY,EACZC,EAAoC,KACpCC,EAAwC,KAGtCC,EAAW,IAAI,qBAClBC,GAAY,CACGA,EAAQ,CAAC,EACb,gBAAkB,CAACb,IAE3BW,EAAiB,WAAW,IAAM,CAGhC,IAAMJ,EAAmB1B,EACvBc,EACAW,EAHqB,CAAE,QAAS,CAAE,CAKpC,EACAP,EAAkBQ,CAAgB,EAClCJ,EAAe,EAAI,EAGnBO,EAAa,YAAY,IAAM,CAG7B,GAFAD,IAEIA,GAAarC,EAEf6B,EAAe,EAAI,EACnBE,EAAe,EAAK,EAChBO,GAAY,cAAcA,CAAU,MACnC,CAEL,IAAMI,EAAexC,EAAa+B,CAAQ,EAEpCE,EAAmB1B,EACvBc,EACAmB,EAHqB,CAAE,QAAS,CAAE,CAKpC,EACAf,EAAkBQ,CAAgB,CACpC,CACF,EAAGlC,CAAK,CACV,EAAGwB,CAAK,EAGRe,EAAS,WAAW,EAExB,EACA,CACE,UAAW,EACb,CACF,EAEA,OAAAA,EAAS,QAAQJ,CAAO,EAGjB,IAAM,CACXI,EAAS,WAAW,EAChBF,GAAY,cAAcA,CAAU,EACpCC,GAAgB,aAAaA,CAAc,CACjD,CACF,EAAG,CAAChB,EAAUU,EAAUC,EAAkBN,EAAaH,CAAK,CAAC,EAE7D,IAAMkB,EAAYjD,EAAQ,IAAMW,EAAYkB,CAAQ,EAAG,CAACA,CAAQ,CAAC,EAEjE,OACEzB,EAAC,QACC,IAAKkC,EACL,aAAYW,EACZ,UAAWC,EAAG,mCAAoCpB,CAAS,EAG3D,UAAA3B,EAAC,QACC,UAAW+C,EACT,kCACAhB,EAAc,cAAgB,WAChC,EAEC,SAAAL,EACH,EAECO,GAAeJ,GACd7B,EAAC,QAAK,UAAU,kCACb,SAAA6B,EACH,GAEJ,CAEJ,EAEMmB,EAAuBtC,GAEzBV,EAACD,EAAA,CACC,SACEC,EAAC,QAAK,UAAW+C,EAAG,YAAarC,EAAM,SAAS,EAC7C,SAAAA,EAAM,SACT,EAGF,SAAAV,EAACyB,EAAA,CAAa,GAAGf,EAAO,EAC1B,EAIGuC,EAAQD","names":["React","useState","useEffect","useMemo","useRef","Suspense","jsx","jsxs","SYMBOLS","MAX_ITERATIONS","SPEED","scrambleText","input","word","extractText","node","props","result","scrambleReactNode","scrambledText","textStartIndex","text","scrambled","i","child","index","scrambledChild","originalKey","newProps","label","title","TextDecoder","children","className","delay","displayContent","setDisplayContent","hasAnimated","setHasAnimated","showDecoded","setShowDecoded","elementRef","fullText","initialScrambled","scrambledContent","element","iteration","intervalId","delayTimeoutId","observer","entries","newScrambled","ariaLabel","cn","SuspenseDecodedText","TextDecoder_default"]}