@yamada-ui/react/dist/cjs/components/loading/audio.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"audio.cjs","names":["withContext","Icon","index","styled","initialProps","superProps"],"sources":["../../../../src/components/loading/audio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { LoadingProps } from \"./loading\"\nimport { styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { Icon } from \"../icon\"\nimport { initialProps, superProps, withContext } from \"./loading\"\n\nexport interface AudioProps extends LoadingProps {}\n\n/**\n * `Loading` is a component displayed during waiting times, such as when data is being loaded.\n *\n * @see https://yamada-ui.com/docs/components/feedback/loading\n */\nexport const Audio = withContext<\"svg\", AudioProps>(\n  ({ dur = \"1.4s\", ...rest }) => {\n    dur = isString(dur) ? parseFloat(dur) : dur\n\n    return (\n      <Icon fill=\"currentColor\" viewBox=\"0 0 55 80\" {...rest}>\n        <g transform=\"matrix(1 0 0 -1 0 80)\">\n          {[\n            {\n              factor: 3,\n              values: [\n                20, 45, 57, 80, 64, 32, 66, 45, 64, 23, 66, 13, 64, 56, 34, 34,\n                2, 23, 76, 79, 20,\n              ],\n              x: \"0px\",\n            },\n            {\n              factor: 1.4,\n              values: [80, 55, 33, 5, 75, 23, 73, 33, 12, 14, 60, 80],\n              x: \"15px\",\n            },\n            {\n              factor: 1,\n              values: [50, 34, 78, 23, 56, 23, 34, 76, 80, 54, 21, 50],\n              x: \"30px\",\n            },\n            {\n              factor: 1.4,\n              values: [30, 45, 13, 80, 56, 72, 45, 76, 34, 23, 67, 30],\n              x: \"45px\",\n            },\n          ].map(({ factor, values, ...props }, index) => {\n            const length = values.length\n\n            const keyframes = values.reduce<Dict>((acc, value, index) => {\n              const percent = `${Math.round((index / (length - 1)) * 100)}%`\n\n              acc[percent] = { transform: `scaleY(${value / 80})` }\n\n              return acc\n            }, {})\n\n            return (\n              <styled.rect\n                key={index}\n                {...props}\n                animationDuration={`${dur * factor}s`}\n                animationIterationCount=\"infinite\"\n                animationTimingFunction=\"linear\"\n                h=\"80px\"\n                rx=\"3px\"\n                w=\"10px\"\n                _keyframes={keyframes}\n              />\n            )\n          })}\n        </g>\n      </Icon>\n    )\n  },\n)(initialProps, superProps)\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,QAAQA,6BAClB,EAAE,MAAM,OAAQ,GAAG,WAAW;AAC7B,uDAAe,IAAI,GAAG,WAAW,IAAI,GAAG;AAExC,QACE,2CAACC;EAAK,MAAK;EAAe,SAAQ;EAAY,GAAI;YAChD,2CAAC;GAAE,WAAU;aACV;IACC;KACE,QAAQ;KACR,QAAQ;MACN;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAC5D;MAAG;MAAI;MAAI;MAAI;MAChB;KACD,GAAG;KACJ;IACD;KACE,QAAQ;KACR,QAAQ;MAAC;MAAI;MAAI;MAAI;MAAG;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAG;KACvD,GAAG;KACJ;IACD;KACE,QAAQ;KACR,QAAQ;MAAC;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAG;KACxD,GAAG;KACJ;IACD;KACE,QAAQ;KACR,QAAQ;MAAC;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAI;MAAG;KACxD,GAAG;KACJ;IACF,CAAC,KAAK,EAAE,QAAQ,OAAQ,GAAG,SAAS,UAAU;IAC7C,MAAM,SAAS,OAAO;IAEtB,MAAM,YAAY,OAAO,QAAc,KAAK,OAAO,YAAU;KAC3D,MAAM,UAAU,GAAG,KAAK,MAAOC,WAAS,SAAS,KAAM,IAAI,CAAC;AAE5D,SAAI,WAAW,EAAE,WAAW,UAAU,QAAQ,GAAG,IAAI;AAErD,YAAO;OACN,EAAE,CAAC;AAEN,WACE,2CAACC,uBAAO;KAEN,GAAI;KACJ,mBAAmB,GAAG,MAAM,OAAO;KACnC,yBAAwB;KACxB,yBAAwB;KACxB,GAAE;KACF,IAAG;KACH,GAAE;KACF,YAAY;OARP,MASL;KAEJ;IACA;GACC;EAGZ,CAACC,8BAAcC,2BAAW"}