{
  "version": 3,
  "sources": ["../src/index.ts", "../src/components/RollingNumber.tsx", "../src/components/Digit.tsx", "../src/utils/index.ts"],
  "sourcesContent": ["/** @module rolling-number */\nexport { default as RollingNumber } from './components/RollingNumber';\n", "import React, { type ReactNode } from 'react';\n\nimport { css } from '@emotion/css';\n\nimport Digit from './Digit';\nimport { formatDigit } from '../utils';\n\ninterface Props {\n  number: number;\n  length?: number;\n  height?: number;\n  width?: number;\n  duration?: number;\n  divider?: string;\n  formatter?: (digit: string) => ReactNode;\n}\n\n/**\n * \uC785\uB825\uB41C \uC22B\uC790\uAC00 \uB864\uB9C1 \uC560\uB2C8\uBA54\uC774\uC158\uC73C\uB85C \uB098\uD0C0\uB098\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4.\n *\n * @param number \uB864\uB9C1 \uC560\uB2C8\uBA54\uC774\uC158\uC73C\uB85C \uB098\uD0C0\uB0A0 \uC22B\uC790.\n * @param length \uC804\uCCB4 \uC22B\uC790\uC758 \uAE38\uC774. number\uC758 \uAE38\uC774\uBCF4\uB2E4 \uB354 \uAE34 \uAC12\uC774 \uC785\uB825\uB41C \uACBD\uC6B0 \uC55E\uCABD\uC73C\uB85C 0\uC744 \uD328\uB529\uD55C\uB2E4.\n * @param height \uC22B\uC790\uAC00 \uBCF4\uC5EC\uC9C8 \uC5D8\uB9AC\uBA3C\uD2B8 \uD55C \uCE78\uC758 \uB192\uC774. formatter\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAE00\uC790\uC758 \uD06C\uAE30\uB97C \uC870\uC815\uD55C \uACBD\uC6B0, height\uB3C4 \uAC19\uC774 \uC870\uC815\uD574\uC918\uC57C\uD55C\uB2E4.\n * @param width \uC22B\uC790\uAC00 \uBCF4\uC5EC\uC9C8 \uC5D8\uB9AC\uBA3C\uD2B8 \uD55C \uCE78\uC758 \uB113\uC774.\n * @param divider \uC22B\uC790\uB97C 3\uC790\uB9AC\uB9C8\uB2E4 \uB098\uB20C \uB54C \uC0AC\uC6A9\uD560 \uAD6C\uBD84\uC790. \uAE30\uBCF8\uAC12\uC740 ,(\uCF64\uB9C8).\n * @param duration \uC560\uB2C8\uBA54\uC774\uC158\uC774 \uC2E4\uD589\uB420 \uC2DC\uAC04. \uB2E8\uC704\uB294 \uCD08(s)\n * @param formatter \uC22B\uC790\uB97C \uBCF4\uC5EC\uC904 \uB54C \uC0AC\uC6A9\uD560 \uD3EC\uB9F7\uD130. \uC22B\uC790\uB97C \uBCF4\uC5EC\uC904 \uB54C \uC0AC\uC6A9\uD560 \uD3EC\uB9F7\uD130\uB97C \uC9C0\uC815\uD558\uC9C0 \uC54A\uC73C\uBA74, \uC22B\uC790 \uADF8\uB300\uB85C\uB97C \uBCF4\uC5EC\uC900\uB2E4.\n *\n * @example\n * ```tsx\n * <RollingNumber number={1234} />\n *\n * // QDS\uC758 Txt \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC870\uD569\uD558\uC5EC \uC0AC\uC6A9\uD560 \uC218\uB3C4 \uC788\uC2B5\uB2C8\uB2E4.\n * <RollingNumber\n *   number={10000000}\n *   height={24}\n *   formatter={(digit) => (\n *     <Txt size={24} weight=\"bold\">\n *       {digit}\n *     </Txt>\n *   )}\n *   duration={0.8}\n * />\n * ```\n */\nconst RollingNumber = ({\n  number,\n  length = String(number).length,\n  width,\n  height = 16,\n  divider = ',',\n  duration = 1,\n  formatter,\n}: Props) => {\n  const digits = formatDigit({\n    number,\n    length,\n    divider,\n  });\n\n  return (\n    <div\n      className={css`\n        display: flex;\n      `}\n    >\n      <div\n        className={css`\n          display: flex;\n          flex-direction: row-reverse;\n          overflow-y: hidden;\n          height: ${height}px;\n        `}\n      >\n        {digits.map((d, index) => {\n          if (index % 4 === 3) {\n            return <Divider key={index} divider={divider} height={height} formatter={formatter} />;\n          }\n\n          const delayWeight = index * 0.1;\n          return (\n            <Digit\n              key={index}\n              digit={d}\n              height={height}\n              width={width}\n              duration={duration + delayWeight}\n              formatter={formatter}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default RollingNumber;\n\nconst Divider = ({\n  divider,\n  height,\n  formatter,\n}: {\n  divider: string;\n  height: number;\n  formatter?: (divider: string) => ReactNode;\n}) => (\n  <div\n    className={css`\n      display: flex;\n      align-items: center;\n      padding: 0 2px;\n      height: ${height}px;\n    `}\n  >\n    {formatter?.(divider) ?? divider}\n  </div>\n);\n", "import React, { type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { css } from '@emotion/css';\nimport { usePreviousState } from '@quotalab/react';\n\nimport { getArr } from '../utils';\n\nlet rendered = false;\nlet isAnimating = false;\n\ninterface Props {\n  digit: string;\n  width?: number;\n  height: number;\n  duration: number;\n  formatter?: (digit: string) => ReactNode;\n}\nconst Digit = ({ digit, width, height, duration, formatter }: Props) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [offset, setOffset] = useState(0);\n  const prevDigitState = usePreviousState(digit);\n  const prevDigit = rendered ? prevDigitState : digit === '0' ? '1' : '0';\n\n  const [numbers, setNumbers] = useState<string[]>([]);\n\n  useEffect(() => {\n    rendered = true;\n    isAnimating = true;\n    setOffset(-digit * height);\n\n    return () => {\n      rendered = false;\n      setOffset(0);\n      isAnimating = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    const diff = Number(digit) - Number(prevDigit);\n    const offset = diff > 0 ? -diff * height : -(diff + 10) * height;\n\n    setOffset(offset);\n    isAnimating = true;\n  }, [digit, height]);\n\n  useEffect(() => {\n    setNumbers(getArr(Number(prevDigit), Number(digit)).map(String));\n  }, [digit]);\n\n  useEffect(() => {\n    wrapperRef.current?.addEventListener('transitionend', () => {\n      rendered = false;\n      isAnimating = false;\n      setNumbers((prev) => [digit, ...prev]);\n      setOffset(0);\n    });\n  }, [digit]);\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={css`\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n        margin-top: ${offset}px;\n        transition: ${isAnimating\n          ? `margin-top ${duration}s cubic-bezier(0.08, 0.9, 0.64, 0.99)`\n          : ''};\n      `}\n    >\n      {numbers.map((d, index) => (\n        <div\n          key={index}\n          className={css`\n            display: flex;\n            flex: none;\n            justify-content: center;\n            align-items: center;\n            box-sizing: border-box;\n            height: ${height}px;\n            width: ${width == null ? 'auto' : `${width}px`};\n          `}\n        >\n          {formatter?.(d) ?? d}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Digit;\n", "export const formatDigit = ({\n  number,\n  length,\n  divider,\n}: {\n  number: number;\n  length?: number;\n  divider: string;\n}) => {\n  const stringified = String(number);\n  const inputLength = stringified.length;\n  const fullLength = Math.max(length ?? 0, inputLength);\n\n  const arr = stringified.padStart(fullLength, '0').split('').reverse();\n  for (let i = arr.length - 1; i > 0; i--) {\n    if (i % 3 === 0) {\n      arr.splice(i, 0, divider);\n    }\n  }\n\n  return arr;\n};\n\nconst _getArr = (a: number, b: number) => new Array(b - a + 1).fill(0).map((_, index) => a + index);\nexport const getArr = (x: number, y: number) => {\n  const a = Math.floor(x);\n  const b = Math.floor(y);\n\n  if (a === b) {\n    return [a];\n  }\n  if (a < b) {\n    return _getArr(a, b);\n  }\n  if (a >= b) {\n    return [..._getArr(a, 9), ..._getArr(0, b)];\n  }\n\n  return [];\n};\n"],
  "mappings": "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",
  "names": ["src_exports", "__export", "RollingNumber_default", "__toCommonJS", "import_css", "import_react", "import_css", "formatDigit", "number", "length", "divider", "stringified", "inputLength", "fullLength", "arr", "i", "_getArr", "a", "b", "_", "index", "getArr", "x", "y", "import_jsx_runtime", "rendered", "isAnimating", "Digit", "digit", "width", "height", "duration", "formatter", "wrapperRef", "offset", "setOffset", "prevDigitState", "prevDigit", "numbers", "setNumbers", "diff", "getArr", "_a", "prev", "d", "index", "Digit_default", "import_jsx_runtime", "RollingNumber", "number", "length", "width", "height", "divider", "duration", "formatter", "digits", "formatDigit", "d", "index", "Divider", "delayWeight", "Digit_default", "RollingNumber_default", "_a"]
}