{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "description": "36 animated spinner variants ported from react-spinners-kit with pixel-perfect CSS keyframe animations",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "styled-components",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "src/spinner.tsx",
      "content": "import { cva } from \"class-variance-authority\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"./lib/utils\";\nimport { renderBall } from \"./spinners/ball\";\nimport { renderBars } from \"./spinners/bars\";\nimport { renderCircle } from \"./spinners/circle\";\nimport { renderClap } from \"./spinners/clap\";\nimport { renderClassic } from \"./spinners/classic\";\nimport { renderComb } from \"./spinners/comb\";\nimport { renderCube } from \"./spinners/cube\";\nimport { renderDomino } from \"./spinners/domino\";\nimport { renderFill } from \"./spinners/fill\";\nimport { renderFirework } from \"./spinners/firework\";\nimport { renderFlag } from \"./spinners/flag\";\nimport { renderFlapper } from \"./spinners/flapper\";\nimport { renderGoo } from \"./spinners/goo\";\nimport { renderGrid } from \"./spinners/grid\";\nimport { renderGuard } from \"./spinners/guard\";\nimport { renderHeart } from \"./spinners/heart\";\nimport { renderHoop } from \"./spinners/hoop\";\nimport { renderImpulse } from \"./spinners/impulse\";\nimport { renderJellyfish } from \"./spinners/jellyfish\";\nimport { renderMagic } from \"./spinners/magic\";\nimport { renderMetro } from \"./spinners/metro\";\nimport { renderPong } from \"./spinners/pong\";\nimport { renderPulse } from \"./spinners/pulse\";\nimport { renderPush } from \"./spinners/push\";\nimport { renderRainbow } from \"./spinners/rainbow\";\nimport { renderRing } from \"./spinners/ring\";\nimport { renderRotate } from \"./spinners/rotate\";\nimport { renderSequence } from \"./spinners/sequence\";\nimport { renderSphere } from \"./spinners/sphere\";\nimport { renderSpiral } from \"./spinners/spiral\";\nimport { renderStage } from \"./spinners/stage\";\nimport { renderSwap } from \"./spinners/swap\";\nimport { renderSwish } from \"./spinners/swish\";\nimport { renderTrace } from \"./spinners/trace\";\nimport { renderWave } from \"./spinners/wave\";\nimport { renderWhisper } from \"./spinners/whisper\";\nimport type { InternalRenderProps, SpinnerProps, SpinnerVariant } from \"./types\";\n\nconst spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n  variants: {\n    size: {\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst renderers: Record<SpinnerVariant, (props: InternalRenderProps) => ReactNode> = {\n  ball: renderBall,\n  grid: renderGrid,\n  swap: renderSwap,\n  bars: renderBars,\n  wave: renderWave,\n  push: renderPush,\n  firework: renderFirework,\n  stage: renderStage,\n  heart: renderHeart,\n  guard: renderGuard,\n  circle: renderCircle,\n  spiral: renderSpiral,\n  pulse: renderPulse,\n  sequence: renderSequence,\n  domino: renderDomino,\n  impulse: renderImpulse,\n  cube: renderCube,\n  fill: renderFill,\n  sphere: renderSphere,\n  flag: renderFlag,\n  clap: renderClap,\n  rotate: renderRotate,\n  swish: renderSwish,\n  goo: renderGoo,\n  comb: renderComb,\n  pong: renderPong,\n  rainbow: renderRainbow,\n  ring: renderRing,\n  hoop: renderHoop,\n  flapper: renderFlapper,\n  magic: renderMagic,\n  jellyfish: renderJellyfish,\n  trace: renderTrace,\n  classic: renderClassic,\n  whisper: renderWhisper,\n  metro: renderMetro,\n};\n\nexport function Spinner({\n  variant,\n  size = \"md\",\n  loading = true,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Loading\",\n  ...props\n}: SpinnerProps) {\n  if (!loading) {\n    return null;\n  }\n\n  const sizeMap: Record<string, number> = { sm: 20, md: 40, lg: 60, xl: 80 };\n  const resolvedSize = typeof size === \"number\" ? size : sizeMap[size] ?? 40;\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={ariaLabel}\n      className={cn(\"inline-flex items-center justify-center\", className)}\n      style={style}\n      {...props}\n    >\n      {renderers[variant]({ size: resolvedSize })}\n    </div>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinner.tsx"
    },
    {
      "path": "src/types.ts",
      "content": "export type SpinnerVariant =\n  | \"ball\"\n  | \"grid\"\n  | \"swap\"\n  | \"bars\"\n  | \"wave\"\n  | \"push\"\n  | \"firework\"\n  | \"stage\"\n  | \"heart\"\n  | \"guard\"\n  | \"circle\"\n  | \"spiral\"\n  | \"pulse\"\n  | \"sequence\"\n  | \"domino\"\n  | \"impulse\"\n  | \"cube\"\n  | \"fill\"\n  | \"sphere\"\n  | \"flag\"\n  | \"clap\"\n  | \"rotate\"\n  | \"swish\"\n  | \"goo\"\n  | \"comb\"\n  | \"pong\"\n  | \"rainbow\"\n  | \"ring\"\n  | \"hoop\"\n  | \"flapper\"\n  | \"magic\"\n  | \"jellyfish\"\n  | \"trace\"\n  | \"classic\"\n  | \"whisper\"\n  | \"metro\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant: SpinnerVariant;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n  loading?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport interface InternalRenderProps {\n  size?: number;\n}",
      "type": "registry:file",
      "target": "components/ui/types.ts"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}",
      "type": "registry:lib",
      "target": "components/ui/lib/utils.ts"
    },
    {
      "path": "src/spinners/ball.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    transform: translateX(0) scale(1);\n  }\n  25% {\n    transform: translateX(${props.size / 2}${props.sizeUnit}) scale(0.25);\n  }\n  50% {\n    transform: translateX(0) scale(1);\n  }\n  75% {\n    transform: translateX(${-props.size / 2}${props.sizeUnit}) scale(0.25);\n  }\n  100% {\n    transform: translateX(0) scale(1);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 2}${props.sizeUnit}`};\n`;\n\nconst Ball = styled.div<any>`\n  width: ${(props) => `${props.size / 3}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 3}${props.sizeUnit}`};\n  border-radius: 50%;\n  background-color: ${(props) => props.color};\n  animation: ${(props) => motion(props)} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n`;\n\nexport function renderBall({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #00ff89)\";\n\n  return (\n    <Wrapper size={s} sizeUnit=\"px\">\n      <Ball color={color} size={s} sizeUnit=\"px\" />\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/ball.tsx"
    },
    {
      "path": "src/spinners/bars.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    width: ${props.size / 20}${props.sizeUnit}\n  }\n  50% {\n    width: ${props.size / 6}${props.sizeUnit}\n  }\n  100% {\n    width: ${props.size / 20}${props.sizeUnit}\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n`;\n\nconst Bar = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 20}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n  animation-delay: ${(props) => props.index * 0.15}s;\n`;\n\nconst getBars = (countBars: number, color: string, size: number, sizeUnit: string) => {\n  const bars = [];\n  for (let i = 0; i < countBars; i++) {\n    bars.push(\n      <Bar\n        color={color}\n        size={size}\n        sizeUnit={sizeUnit}\n        x={i * (size / 5 + size / 25) - size / 12}\n        key={i.toString()}\n        index={i}\n      />,\n    );\n  }\n  return bars;\n};\n\nexport function renderBars({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #00ff89)\";\n  const countBars = 5;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBars(countBars, color, s, \"px\")}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/bars.tsx"
    },
    {
      "path": "src/spinners/circle.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  border: ${(props) => `${props.size / 5}${props.sizeUnit}`} solid ${(props) => props.color};\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: ${rotate} 0.75s linear infinite;\n`;\n\nexport function renderCircle({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 30;\n  const color = \"var(--spinner-color, #fff)\";\n\n  return <Wrapper size={s} color={color} sizeUnit=\"px\" />;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/circle.tsx"
    },
    {
      "path": "src/spinners/clap.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n    50% {\n        transform: rotate(180deg) scale(1.125);\n    }\n    100%{\n        transform: rotate(360deg);\n    }\n`;\n\nconst move = (props: any) => keyframes`\n    0% {\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${\n    props.sizeUnit\n}) scale(1.25) ;\n    }\n    5% {\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${\n    props.sizeUnit\n}) scale(1.75);\n    }\n    50% {\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(.25);\n    }\n    55% {\n        background-color: ${props.backColor};\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1) ;\n    }\n`;\n\nconst getBalls = ({ countBalls, radius, angle, frontColor, backColor, size, ballSize, sizeUnit }: any) => {\n  const balls = [];\n  const offset = ballSize / 2;\n  for (let i = 0; i < countBalls; i++) {\n    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset;\n    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset;\n    balls.push(\n      <Ball\n        frontColor={frontColor}\n        backColor={backColor}\n        ballSize={ballSize}\n        size={size}\n        sizeUnit={sizeUnit}\n        x={y}\n        y={x}\n        key={i.toString()}\n        index={i}\n      />,\n    );\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    animation: ${rotate} 1.5s linear infinite;\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).size / 2}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).size / 2}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    border-radius: 50%;\n    background-color: ${props => (props as any).frontColor};\n    transform: translateX(${props => `${(props as any).x}${(props as any).sizeUnit}`})\n        translateY(${props => `${(props as any).y}${(props as any).sizeUnit}`});\n    animation: ${props => move(props)} 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;\n    animation-delay: ${props => (props as any).index * 0.2}s;\n`;\n\nexport function renderClap({ size }: InternalRenderProps) {\n  const s = size ?? 30;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #686769)\";\n  const radius = s / 2;\n  const countBalls = 7;\n  const ballSize = s / 5;\n  const angle = 360 / countBalls;\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls, radius, angle, frontColor, backColor, size: s, ballSize, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/clap.tsx"
    },
    {
      "path": "src/spinners/classic.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst fade = keyframes`\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n`;\n\nconst Bar = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.size / 10}px`};\n  height: ${(props: any) => `${props.size / 4}px`};\n  background-color: ${(props: any) => props.color};\n  opacity: 0.05;\n  transform: ${(props: any) => `rotate(${props.rotate}deg)`}\n    ${(props: any) => `translate(0, ${props.translate}px)`};\n  animation: ${fade} ${(props: any) => props.countBars * 0.06}s linear infinite;\n  animation-delay: ${(props: any) => props.index * 0.06}s;\n`;\n\nexport function renderClassic({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 30;\n  const countBars = 16;\n  const color = \"var(--spinner-color, #fff)\";\n  const bars: React.ReactNode[] = [];\n\n  for (let i = 0; i < countBars; i++) {\n    const rotate = (360 / countBars) * i;\n    const translate = -(spinnerSize / 2);\n    bars.push(\n      <Bar\n        countBars={countBars}\n        color={color}\n        size={spinnerSize}\n        rotate={rotate}\n        translate={translate}\n        key={i.toString()}\n        index={i}\n      />,\n    );\n  }\n\n  return <Wrapper size={spinnerSize}>{bars}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/classic.tsx"
    },
    {
      "path": "src/spinners/comb.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = () => keyframes`\n  to {\n    transform: rotate(450deg);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size / 5}px`};\n`;\n\nconst Bar = styled.div`\n  position: absolute;\n  left: 0;\n  width: ${(props: any) => `${props.size / 60}px`};\n  height: ${(props: any) => `${props.size / 5}px`};\n  left: ${(props: any) => `${props.index * 9}px`};\n  transform-origin: center bottom;\n  transform: rotate(-90deg);\n  background-color: ${(props: any) => props.color};\n  animation: ${rotate} 3s ease infinite;\n  animation-delay: ${(props: any) => props.index * 0.05}s;\n`;\n\nexport function renderComb({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 100;\n  const countBars = spinnerSize / 9;\n  const color = \"var(--spinner-color, #fff)\";\n  const bars: React.ReactNode[] = [];\n\n  for (let i = 0; i < countBars; i++) {\n    bars.push(<Bar color={color} size={spinnerSize} key={i.toString()} index={i} />);\n  }\n\n  return <Wrapper size={spinnerSize}>{bars}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/comb.tsx"
    },
    {
      "path": "src/spinners/cube.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n    from { transform: rotateX(0) rotateY(0); }\n    to   { transform: rotateX(360deg) rotateY(360deg); }\n`;\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    perspective: ${props => `${(props as any).size * 4}${(props as any).sizeUnit}`};\n`;\n\nconst CubeWrapper = styled.div`\n    sposition: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: inherit;\n    height: inherit;\n`;\n\nconst Cube = styled.div`\n    position: relative;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    transform-style: preserve-3d;\n    animation: ${rotate} 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n`;\n\nconst rotateXCube = (props: any) => {\n  if (props.top) {\n    return 90;\n  }\n  if (props.bottom) {\n    return -90;\n  }\n  return 0;\n};\n\nconst rotateYCube = (props: any) => {\n  if (props.left) {\n    return 90;\n  }\n  if (props.right) {\n    return -90;\n  }\n  if (props.back) {\n    return 180;\n  }\n  return 0;\n};\n\nconst Side = styled.div`\n    backface-visibility: hidden;\n    display: block;\n    position: absolute;\n    width: inherit;\n    height: inherit;\n    background-color: ${props => (props as any).color};\n    transform: rotateX(${props => rotateXCube(props)}deg) rotateY(${props => rotateYCube(props)}deg)\n        translateZ(${props => `${(props as any).size / 2}${(props as any).sizeUnit}`});\n`;\n\nexport function renderCube({ size }: InternalRenderProps) {\n  const s = size ?? 25;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #4b4c56)\";\n  return (\n    <Wrapper size={s} sizeUnit=\"px\">\n      <CubeWrapper x={0} y={0} sizeUnit=\"px\">\n        <Cube size={s} sizeUnit=\"px\">\n          <Side front={true} size={s} color={frontColor} sizeUnit=\"px\" />\n          <Side back={true} size={s} color={frontColor} sizeUnit=\"px\" />\n          <Side bottom={true} size={s} color={backColor} sizeUnit=\"px\" />\n          <Side top={true} size={s} color={backColor} sizeUnit=\"px\" />\n          <Side left={true} size={s} color={backColor} sizeUnit=\"px\" />\n          <Side right={true} size={s} color={backColor} sizeUnit=\"px\" />\n        </Cube>\n      </CubeWrapper>\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/cube.tsx"
    },
    {
      "path": "src/spinners/domino.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst fall = (props: any) => keyframes`\n    0% {\n        transform: translateX(${props.translatesPoints[0]}${props.sizeUnit}) rotate(0deg);\n        opacity: 0;\n    }\n    14.28% {\n        transform: translateX(${props.translatesPoints[1]}${props.sizeUnit}) rotate(0deg);\n        opacity: 1;\n    }\n    28.56% {\n        transform: translateX(${props.translatesPoints[2]}${props.sizeUnit}) rotate(0deg);\n        opacity: 1;\n    }\n    37.12% {\n        transform: translateX(${props.translatesPoints[3]}${props.sizeUnit}) rotate(0deg);\n        opacity: 1;\n    }\n    42.84% {\n        transform: translateX(${props.translatesPoints[4]}${props.sizeUnit}) rotate(10deg);\n        opacity: 1;\n    }\n    57.12% {\n        transform: translateX(${props.translatesPoints[5]}${props.sizeUnit}) rotate(40deg);\n        opacity: 1;\n    }\n    71.4% {\n        transform: translateX(${props.translatesPoints[6]}${props.sizeUnit}) rotate(62deg);\n        opacity: 1;\n    }\n    85.68% {\n        transform: translateX(${props.translatesPoints[7]}${props.sizeUnit}) rotate(72deg);\n        opacity: 1;\n    }\n    100% {\n        transform: translateX(${props.translatesPoints[8]}${props.sizeUnit}) rotate(74deg);\n        opacity: 0;\n    }\n`;\n\nconst getTranslatePositions = (countBars: number, size: number) => {\n  const translates = [];\n  for (let i = 0; i <= countBars + 1; i++) {\n    translates.push(-i * (size / 8));\n  }\n  return translates;\n};\n\nconst getBars = ({ countBars, rotatesPoints, translatesPoints, color, size, sizeUnit }: any) => {\n  const bars = [];\n  for (let i = 0; i < countBars; i++) {\n    bars.push(\n      <Bar\n        color={color}\n        size={size}\n        translatesPoints={translatesPoints}\n        rotate={rotatesPoints[i]}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return bars;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n`;\n\nconst Bar = styled.div`\n    position: absolute;\n    right: 0;\n    width: ${props => `${(props as any).size / 30}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    transform-origin: 50% 100%;\n    background-color: ${props => (props as any).color};\n    animation: ${fall} 3s linear infinite;\n    animation-delay: ${props => (props as any).index * -0.42}s;\n    transform: translateX(${props => `${(props as any).size - (props as any).index * 15}${(props as any).sizeUnit}`})\n        rotate(${props => (props as any).rotate}deg);\n    &:nth-child(1) {\n        opacity: 0.22;\n    }\n`;\n\nexport function renderDomino({ size }: InternalRenderProps) {\n  const s = size ?? 100;\n  const color = \"var(--spinner-color, #686769)\";\n  const countBars = 7;\n  const rotatesPoints = [0, 0, 0, 10, 40, 60, 70];\n  const translatesPoints = getTranslatePositions(countBars, s);\n  return <Wrapper size={s} sizeUnit=\"px\">{getBars({ countBars, rotatesPoints, translatesPoints, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/domino.tsx"
    },
    {
      "path": "src/spinners/fill.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n    0% {\n        transform: rotate(0deg);\n    }\n    25% {\n        transform: rotate(180deg);\n    }\n    50% {\n        transform: rotate(180deg);\n    }\n    75% {\n        transform: rotate(360deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst fill = keyframes`\n    0% {\n        height: 0%;\n    }\n    25% {\n        height: 0%;\n    }\n    50% {\n        height: 100%;\n    }\n    75% {\n        height: 100%;\n    }\n    100% {\n        height: 0%;\n    }\n`;\n\nconst Wrapper = styled.div`\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    border: ${props => `${(props as any).size / 8}${(props as any).sizeUnit}`} solid ${props => (props as any).color};\n    animation: ${rotate} 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;\n`;\n\nconst Plane = styled.div`\n    width: 100%;\n    background-color: ${props => (props as any).color};\n    animation: ${fill} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n`;\n\nexport function renderFill({ size }: InternalRenderProps) {\n  const s = size ?? 20;\n  const color = \"var(--spinner-color, #686769)\";\n  return <Wrapper size={s} color={color} sizeUnit=\"px\"><Plane color={color} size={s} sizeUnit=\"px\" /></Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/fill.tsx"
    },
    {
      "path": "src/spinners/firework.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst fire = keyframes`\n  0% {\n    opacity: 1;\n    transform: scale(0.1);\n  }\n  25% {\n    opacity: 0.85;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  border: ${(props) => `${props.size / 10}${props.sizeUnit}`} dotted ${(props) => props.color};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  border-radius: 50%;\n  animation: ${fire} 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n`;\n\nexport function renderFirework({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #fff)\";\n\n  return <Wrapper size={s} color={color} sizeUnit=\"px\" />;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/firework.tsx"
    },
    {
      "path": "src/spinners/flag.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst wave = (props: any) => keyframes`\n    0% {\n        transform: translateY(0);\n        opacity: 1;\n    }\n    50% {\n        transform: translateY(${-props.size / 5}${props.sizeUnit});\n        opacity: 0.25;\n    }\n    100% {\n        transform: translateY(0);\n        opacity: 1;\n    }\n`;\n\nconst getPlanes = ({ countPlaneInLine, color, size, sizeUnit }: any) => {\n  const lines = [];\n  const planes = [];\n  let keyValue = 0;\n  for (let i = 0; i < countPlaneInLine; i++) {\n    for (let j = 0; j < countPlaneInLine; j++) {\n      planes.push(\n        <Plane\n          color={color}\n          size={size}\n          x={i * (size / 6 + size / 9)}\n          y={j * (size / 6 + size / 9) + size / 10}\n          key={i + j.toString()}\n          index={keyValue}\n          sizeUnit={sizeUnit}\n        />,\n      );\n      keyValue++;\n    }\n    lines.push(\n      <Line index={keyValue} key={keyValue.toString()} size={size} sizeUnit={sizeUnit}>\n        {[...planes]}\n      </Line>,\n    );\n    planes.length = 0;\n  }\n  return lines;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n`;\n\nconst Line = styled.div`\n    position: absolute;\n    left: 0;\n    top: 0;\n    animation: ${wave} 1.5s cubic-bezier(0.86, 0, 0.07, 1) infinite;\n    animation-delay: ${props => (props as any).index * 0.05}s;\n`;\n\nconst Plane = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).size / 6}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 6}${(props as any).sizeUnit}`};\n    background-color: ${props => (props as any).color};\n`;\n\nexport function renderFlag({ size }: InternalRenderProps) {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #fff)\";\n  return <Wrapper size={s} sizeUnit=\"px\">{getPlanes({ countPlaneInLine: 4, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/flag.tsx"
    },
    {
      "path": "src/spinners/flapper.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst move = (props: any) => keyframes`\n  100% {\n    opacity: 0;\n    transform: translateX(${props.x}px)\n      translateY(${props.y}px) scale(1);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  top: ${(props: any) => `${props.size / 2}px`};\n  left: ${(props: any) => `${props.size / 2}px`};\n  width: ${(props: any) => `${props.ballSize}px`};\n  height: ${(props: any) => `${props.ballSize}px`};\n  border-radius: 50%;\n  background-color: ${(props: any) => props.color};\n  transform: translateX(${(props: any) => `${props.x}px`})\n    translateY(${(props: any) => `${props.y}px`}) scale(0);\n  animation: ${(props: any) => move(props)} 0.8s linear infinite;\n  animation-delay: ${(props: any) => props.index * 0.1}s;\n`;\n\nexport function renderFlapper({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 30;\n  const radius = spinnerSize / 2;\n  const countBalls = 7;\n  const ballSize = spinnerSize / 1.5;\n  const angle = 360 / countBalls;\n  const color = \"var(--spinner-color, #00ff89)\";\n  const balls: React.ReactNode[] = [];\n  const offset = ballSize / 2;\n\n  for (let i = 0; i < countBalls; i++) {\n    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset;\n    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset;\n    balls.push(\n      <Ball\n        color={color}\n        ballSize={ballSize}\n        size={spinnerSize}\n        x={y}\n        y={x}\n        key={i.toString()}\n        index={i}\n      />,\n    );\n  }\n\n  return <Wrapper size={spinnerSize}>{balls}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/flapper.tsx"
    },
    {
      "path": "src/spinners/goo.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = () => keyframes`\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst move = (props: any) => keyframes`\n    0%{\n        transform: translateY(0) scale(1);\n    }\n    50%{\n        transform: translateY(${props.translateTo}${props.sizeUnit}) scale(0.8);\n    }\n    100%{\n        transform: translateY(0) scale(1);\n    }\n`;\n\nconst getBalls = ({ countBalls, color, size, sizeUnit }: any) => {\n  const balls = [];\n  const center = size / 4;\n  const ballsTranslatePositions = [-center, center];\n  for (let i = 0; i < countBalls; i++) {\n    balls.push(\n      <Ball\n        color={color}\n        size={size}\n        x={size / 2 - size / 6}\n        y={size / 2 - size / 6}\n        key={i.toString()}\n        translateTo={ballsTranslatePositions[i]}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    filter: url(\"#goo\");\n`;\n\nconst BallsWrapper = styled.div`\n    position: relative;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    animation: ${rotate} 1.7s linear infinite;\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).size / 3}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 3}${(props as any).sizeUnit}`};\n    border-radius: 50%;\n    background-color: ${props => (props as any).color};\n    animation: ${move} 1.5s ease-in-out infinite;\n`;\n\nexport function renderGoo({ size }: InternalRenderProps) {\n  const s = size ?? 55;\n  const color = \"var(--spinner-color, #4b4c56)\";\n  return (\n    <Wrapper size={s} sizeUnit=\"px\">\n      <BallsWrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls: 2, color, size: s, sizeUnit: \"px\" })}</BallsWrapper>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n        <defs>\n          <filter id=\"goo\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 15 -5\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/goo.tsx"
    },
    {
      "path": "src/spinners/grid.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    top: ${props.y}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n  }\n  50% {\n    width: ${props.size / 4}${props.sizeUnit};\n    height: ${props.size / 4}${props.sizeUnit};\n    top: ${props.size / 2 - props.size / 8}${props.sizeUnit};\n    left: ${props.size / 2 - props.size / 8}${props.sizeUnit};\n  }\n  100% {\n    top: ${props.y}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n`;\n\nconst Ball = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 6}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 6}${props.sizeUnit}`};\n  border-radius: 50%;\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n`;\n\nconst getBalls = ({ countBallsInLine, color, size, sizeUnit }: any) => {\n  const balls = [];\n  let keyValue = 0;\n\n  for (let i = 0; i < countBallsInLine; i++) {\n    for (let j = 0; j < countBallsInLine; j++) {\n      balls.push(\n        <Ball\n          color={color}\n          size={size}\n          x={i * (size / 3 + size / 12)}\n          y={j * (size / 3 + size / 12)}\n          key={keyValue.toString()}\n          sizeUnit={sizeUnit}\n        />,\n      );\n      keyValue++;\n    }\n  }\n\n  return balls;\n};\n\nexport function renderGrid({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #fff)\";\n  const countBallsInLine = 3;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBallsInLine, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/grid.tsx"
    },
    {
      "path": "src/spinners/guard.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n  0% {\n    transform: rotateY(90deg);\n  }\n  50% {\n    transform: rotateY(0deg);\n  }\n  100% {\n    transform: rotateY(90deg);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  perspective: ${(props) => `${props.size * 3}${props.sizeUnit}`};\n`;\n\nconst CubeWrapper = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n`;\n\nconst Cube = styled.div<any>`\n  position: relative;\n  width: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  transform-style: preserve-3d;\n  animation: ${rotate} 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n  animation-delay: ${(props) => props.index * 0.125}s;\n`;\n\nconst Side = styled.div<any>`\n  display: block;\n  position: absolute;\n  width: inherit;\n  height: inherit;\n  background-color: ${(props) => props.color};\n  transform: rotateY(${(props) => (props.front ? 0 : -90)}deg)\n    translateZ(${(props) => `${props.size / 8}${props.sizeUnit}`});\n`;\n\nconst getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }: any) => {\n  const cubes = [];\n  let keyValue = 0;\n\n  for (let i = 0; i < countCubesInLine; i++) {\n    for (let j = 0; j < countCubesInLine; j++) {\n      cubes.push(\n        <CubeWrapper\n          size={size}\n          x={i * (size / 4 + size / 8)}\n          y={j * (size / 4 + size / 8)}\n          key={keyValue.toString()}\n          sizeUnit={sizeUnit}\n        >\n          <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>\n            <Side front={true} size={size} color={frontColor} sizeUnit={sizeUnit} />\n            <Side left={true} size={size} color={backColor} sizeUnit={sizeUnit} />\n          </Cube>\n        </CubeWrapper>,\n      );\n      keyValue++;\n    }\n  }\n\n  return cubes;\n};\n\nexport function renderGuard({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #686769)\";\n  const countCubesInLine = 3;\n\n  return (\n    <Wrapper size={s} sizeUnit=\"px\">\n      {getCubes({ countCubesInLine, backColor, frontColor, size: s, sizeUnit: \"px\" })}\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/guard.tsx"
    },
    {
      "path": "src/spinners/heart.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst resize = keyframes`\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(0.75);\n  }\n  50% {\n    transform: scale(1);\n  }\n  65% {\n    transform: scale(1);\n  }\n  80% {\n    transform: scale(0.75);\n  }\n  100% {\n    transform: scale(1);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size - props.size / 10}${props.sizeUnit}`};\n  animation: ${resize} 1s ease-in-out infinite;\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: ${(props) => `${props.size / 20}${props.sizeUnit}`};\n    left: ${(props) => `${props.size / 2}${props.sizeUnit}`};\n    width: ${(props) => `${props.size / 2}${props.sizeUnit}`};\n    height: ${(props) => `${props.size - props.size / 5}${props.sizeUnit}`};\n    background-color: ${(props) => props.color};\n    border-radius: ${(props) => `${props.size / 2}${props.sizeUnit}`}\n      ${(props) => `${props.size / 2}${props.sizeUnit}`} 0 0;\n    transform: rotate(-45deg);\n    transform-origin: 0 100%;\n  }\n  &::after {\n    left: 0;\n    transform: rotate(45deg);\n    transform-origin: 100% 100%;\n  }\n`;\n\nexport function renderHeart({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #686769)\";\n\n  return <Wrapper size={s} color={color} sizeUnit=\"px\" />;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/heart.tsx"
    },
    {
      "path": "src/spinners/hoop.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    opacity: 0;\n    border-color: ${props.color};\n    transform: rotateX(65deg) rotateY(45deg) translateZ(-${props.size * 1.5}px) scale(0.1);\n  }\n  40% {\n    opacity: 1;\n    transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: rotateX(65deg) rotateY(-45deg) translateZ(-${props.size * 1.5}px) scale(0.1);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  perspective: 600px;\n  transform-style: perserve-3d;\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.size / 1.5}px`};\n  height: ${(props: any) => `${props.size / 1.5}px`};\n  border: ${(props: any) => `${props.size / 5}px`} solid ${(props: any) => props.color};\n  border-radius: 50%;\n  background-color: transparent;\n  transform-style: perserve-3d;\n  transform: scale(0) rotateX(60deg);\n  opacity: ${(props: any) => 1 - props.index * 0.2};\n  animation: ${(props: any) => motion(props)} 3s cubic-bezier(0.67, 0.08, 0.46, 1.5) infinite;\n  animation-delay: ${(props: any) => props.index * 200}ms;\n`;\n\nexport function renderHoop({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 45;\n  const countBallsInLine = 6;\n  const color = \"var(--spinner-color, #4b4c56)\";\n  const balls: React.ReactNode[] = [];\n  let keyValue = 0;\n\n  for (let i = 0; i < countBallsInLine; i++) {\n    balls.push(\n      <Ball color={color} size={spinnerSize} key={keyValue.toString()} index={i} />,\n    );\n    keyValue++;\n  }\n\n  return <Wrapper size={spinnerSize}>{balls}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/hoop.tsx"
    },
    {
      "path": "src/spinners/impulse.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst impulse = (props: any) => keyframes`\n    0% {\n        background: ${props.backColor};\n        transform: scale(1);\n        animation-timing-function: cubic-bezier(1,0,0.7,1);\n    }\n    40% {\n        background: ${props.frontColor};\n        transform: scale(1.5);\n        animation-timing-function: cubic-bezier(0.3,0,0,1);\n    }\n    72.5% {\n        background:${props.backColor};\n        transform: scale(1);\n        animation-timing-function: linear;\n    }\n    100% {\n        background: ${props.backColor};\n        transform: scale(1);\n    }\n`;\n\nconst getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }: any) => {\n  const balls = [];\n  for (let i = 0; i < countBalls; i++) {\n    balls.push(\n      <Ball\n        frontColor={frontColor}\n        backColor={backColor}\n        size={size}\n        x={i * (size / 5 + size / 5)}\n        y={0}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    border-radius: 50%;\n    background-color: ${props => (props as any).frontColor};\n    animation: ${impulse} 1.25s linear infinite;\n    animation-delay: ${props => (props as any).index * 0.125}s;\n`;\n\nexport function renderImpulse({ size }: InternalRenderProps) {\n  const s = size ?? 40;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #4b4c56)\";\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls: 3, frontColor, backColor, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/impulse.tsx"
    },
    {
      "path": "src/spinners/jellyfish.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    transform: translateY(${-props.size / 5}px);\n  }\n  50% {\n    transform: translateY(${props.size / 4}px);\n  }\n  100% {\n    transform: translateY(${-props.size / 5}px);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n`;\n\nconst Ring = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.index * (props.size / props.countRings)}px`};\n  height: ${(props: any) => `${(props.index * (props.size / props.countRings)) / 2}px`};\n  border: 2px solid ${(props: any) => props.color};\n  border-radius: 50%;\n  background-color: transparent;\n  animation: ${(props: any) => motion(props)} 2.5s ease infinite;\n  animation-delay: ${(props: any) => props.index * 100}ms;\n`;\n\nexport function renderJellyfish({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 60;\n  const countRings = 6;\n  const color = \"var(--spinner-color, #4b4c56)\";\n  const rings: React.ReactNode[] = [];\n  let keyValue = 0;\n\n  for (let i = 0; i < countRings; i++) {\n    rings.push(\n      <Ring\n        color={color}\n        size={spinnerSize}\n        countRings={countRings}\n        key={keyValue.toString()}\n        index={i}\n      />,\n    );\n    keyValue++;\n  }\n\n  return <Wrapper size={spinnerSize}>{rings}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/jellyfish.tsx"
    },
    {
      "path": "src/spinners/magic.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = () => keyframes`\n  100% {\n    transform: translateX(-50%) translateY(-50%) rotate(360deg);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  overflow: hidden;\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%) rotate(0deg);\n  width: ${(props: any) => `${props.index * (props.size / props.countBalls)}px`};\n  height: ${(props: any) => `${props.index * (props.size / props.countBalls)}px`};\n  border-radius: 50%;\n  background-color: transparent;\n  border: 2px solid transparent;\n  border-top-color: ${(props: any) => props.color};\n  animation: ${rotate} 2s cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;\n  animation-delay: ${(props: any) => props.index * 0.05}s;\n`;\n\nexport function renderMagic({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 70;\n  const countBalls = spinnerSize / 12;\n  const color = \"var(--spinner-color, #fff)\";\n  const balls: React.ReactNode[] = [];\n\n  for (let i = 0; i < countBalls; i++) {\n    balls.push(\n      <Ball\n        color={color}\n        countBalls={countBalls}\n        size={spinnerSize}\n        key={i.toString()}\n        index={i}\n      />,\n    );\n  }\n\n  return <Wrapper size={spinnerSize}>{balls}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/magic.tsx"
    },
    {
      "path": "src/spinners/metro.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(-360deg);\n  }\n`;\n\nconst rotateBall = (props: any) => keyframes`\n  ${(((props.size / 2 / props.countBalls) * (props.index - 1)) / props.size) * 100}% {\n    opacity: 0;\n  }\n  ${(((props.size / 2 / props.countBalls + 0.0001) * (props.index - 1)) / props.size) * 100}% {\n    opacity: 1;\n    transform: rotate(${0 - (360 / props.countBalls) * (props.index - 2)}deg);\n  }\n  ${(((props.size / 2 / props.countBalls) * (props.index - 0) + 2) / props.size) * 100}% {\n    transform: rotate(${0 - (360 / props.countBalls) * (props.index - 1)}deg);\n  }\n  ${((props.size / 2 + (props.size / 2 / props.countBalls) * (props.index - 0) + 2) / props.size) * 100}% {\n    transform: rotate(${0 - (360 / props.countBalls) * (props.index - 1)}deg);\n  }\n  100% {\n    transform: rotate(${0 - (360 / props.countBalls) * (props.countBalls - 1)}deg);\n    opacity: 1;\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  animation: ${rotate} 3s infinite ease-in;\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  animation: ${(props: any) => rotateBall(props)} 2s infinite linear;\n  transform: ${(props: any) => `rotate(${(360 / props.countBalls) * props.index}deg)`};\n  opacity: 0;\n  &:before {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 0%;\n    width: ${(props: any) => `${props.ballSize}px`};\n    height: ${(props: any) => `${props.ballSize}px`};\n    background-color: ${(props: any) => `${props.color}`};\n    transform: translateX(-50%);\n    border-radius: 50%;\n  }\n`;\n\nexport function renderMetro({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 40;\n  const radius = spinnerSize / 2;\n  const countBalls = 9;\n  const ballSize = spinnerSize / 8;\n  const angle = 360 / countBalls;\n  const color = \"var(--spinner-color, #fff)\";\n  const balls: React.ReactNode[] = [];\n  const offset = ballSize / 2;\n\n  for (let i = 0; i < countBalls; i++) {\n    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset;\n    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset;\n    balls.push(\n      <Ball\n        countBalls={countBalls}\n        color={color}\n        ballSize={ballSize}\n        size={spinnerSize}\n        x={y}\n        y={x}\n        key={i.toString()}\n        index={i + 1}\n      />,\n    );\n  }\n\n  return <Wrapper size={spinnerSize}>{balls}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/metro.tsx"
    },
    {
      "path": "src/spinners/pong.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motionPlayer = (props: any) => keyframes`\n  0% {\n    top: ${props.left ? 0 : props.size / 3.5}px;\n  }\n  50% {\n    top: ${props.left ? props.size / 3.5 : 0}px;\n  }\n  100% {\n    top: ${props.left ? 0 : props.size / 3.5}px;\n  }\n`;\n\nconst motionBall = (props: any) => keyframes`\n  0% {\n    top: ${props.size / 3.5 - props.size / 8}px;\n    left: ${props.size / 12}px;\n  }\n  25% {\n    top: ${props.size / 3.5}px;\n    left: ${props.size - props.size / 8}px;\n  }\n  50% {\n    top: ${props.size / 1.75 - props.size / 8}px;\n    left: ${props.size / 12}px;\n  }\n  75% {\n    top: ${props.size / 3.5}px;\n    left: ${props.size - props.size / 8}px;\n  }\n  100% {\n    top: ${props.size / 3.5 - props.size / 8}px;\n    left: ${props.size / 12}px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size / 1.75}px`};\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.size / 8}px`};\n  height: ${(props: any) => `${props.size / 8}px`};\n  border-radius: 50%;\n  background-color: ${(props: any) => props.color};\n  animation: ${(props: any) => motionBall(props)} 2s linear infinite;\n`;\n\nconst Player = styled.div`\n  position: absolute;\n  width: ${(props: any) => `${props.size / 12}px`};\n  height: ${(props: any) => `${props.size / 3}px`};\n  background-color: ${(props: any) => props.color};\n  left: ${(props: any) => (props.left ? 0 : props.size)};\n  right: ${(props: any) => (props.right ? 0 : props.size)};\n  border-radius: 4px;\n  animation: ${(props: any) => motionPlayer(props)} 2s linear infinite;\n`;\n\nexport function renderPong({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 60;\n  const color = \"var(--spinner-color, #4b4c56)\";\n\n  return (\n    <Wrapper size={spinnerSize}>\n      <Player left color={color} size={spinnerSize} />\n      <Ball color={color} size={spinnerSize} />\n      <Player right color={color} size={spinnerSize} />\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/pong.tsx"
    },
    {
      "path": "src/spinners/pulse.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = keyframes`\n    0% {\n        opacity: 1;\n    }\n    50% {\n        opacity: 0;\n    }\n    100% {\n        opacity: 1;\n    }\n`;\n\nconst getCubes = ({ countCubeInLine, color, size, sizeUnit }: any) => {\n  const cubes = [];\n  let keyValue = 0;\n  for (let i = 0; i < countCubeInLine; i++) {\n    cubes.push(\n      <Cube\n        color={color}\n        size={size}\n        x={i * (size / 3 + size / 15)}\n        y={0}\n        key={keyValue.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n    keyValue++;\n  }\n  return cubes;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 2.5}${(props as any).sizeUnit}`};\n`;\n\nconst Cube = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 2.5}${(props as any).sizeUnit}`};\n    background-color: ${props => (props as any).color};\n    animation: ${motion} 1.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite;\n    animation-delay: ${props => (props as any).index * 0.15}s;\n`;\n\nexport function renderPulse({ size }: InternalRenderProps) {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #fff)\";\n  return <Wrapper size={s} sizeUnit=\"px\">{getCubes({ countCubeInLine: 3, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/pulse.tsx"
    },
    {
      "path": "src/spinners/push.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  15% {\n    transform: scaleY(1) translateX(10${props.sizeUnit});\n  }\n  90% {\n    transform: scaleY(0.05) translateX(-5${props.sizeUnit});\n  }\n  100%{\n    transform: scaleY(0.05) translateX(-5${props.sizeUnit});\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size * 2.5}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  overflow: hidden;\n`;\n\nconst Bar = styled.div<any>`\n  position: absolute;\n  top: 0;\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 5}${props.sizeUnit}`};\n  height: 100%;\n  transform: scaleY(0.05) translateX(-5px);\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1.25s ease-in-out infinite;\n  animation-delay: ${(props) => props.index * 0.15}s;\n`;\n\nconst getBars = ({ countBars, color, size, sizeUnit }: any) => {\n  const bars = [];\n  for (let i = 0; i < countBars; i++) {\n    bars.push(\n      <Bar\n        color={color}\n        size={size}\n        x={i * (size / 5 + (size / 15 - size / 100))}\n        y={0}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return bars;\n};\n\nexport function renderPush({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 30;\n  const color = \"var(--spinner-color, #686769)\";\n  const countBars = 10;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBars({ countBars, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/push.tsx"
    },
    {
      "path": "src/spinners/rainbow.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = () => keyframes`\n  0% {\n    border-width: 10px;\n  }\n  25% {\n    border-width: 3px;\n  }\n  50% {\n    transform: rotate(115deg);\n    border-width: 10px;\n  }\n  75% {\n    border-width: 3px;\n  }\n  100% {\n    border-width: 10px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size / 2}px`};\n  overflow: hidden;\n`;\n\nconst Line = styled.div`\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  border-radius: 50%;\n  border-style: solid;\n  border-top-color: ${(props: any) => props.color};\n  border-right-color: ${(props: any) => props.color};\n  border-left-color: transparent;\n  border-bottom-color: transparent;\n  box-sizing: border-box;\n  transform: rotate(-200deg);\n  animation: ${rotate} 3s ease-in-out infinite;\n`;\n\nexport function renderRainbow({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 50;\n  const color = \"var(--spinner-color, #fff)\";\n\n  return (\n    <Wrapper size={spinnerSize}>\n      <Line size={spinnerSize} color={color} />\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/rainbow.tsx"
    },
    {
      "path": "src/spinners/ring.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst firstPulse = (props: any) => keyframes`\n  0% {\n    box-shadow: inset 0 0 0 ${props.size / 10}px ${props.color};\n    opacity: 1;\n  }\n  50%, 100% {\n    box-shadow: inset 0 0 0 0 ${props.color};\n    opacity: 0;\n  }\n`;\n\nconst secondPulse = (props: any) => keyframes`\n  0%, 50% {\n    box-shadow: inset 0 0 0 0 ${props.color};\n    opacity: 0;\n  }\n  100% {\n    box-shadow: inset 0 0 0 ${props.size / 10}px ${props.color};\n    opacity: 1;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n`;\n\nconst Circle = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  &:before,\n  &:after {\n    width: 100%;\n    height: 100%;\n    content: \"\";\n    position: absolute;\n    border-radius: 50%;\n    animation-duration: 2s;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n  }\n  &:before {\n    box-shadow: ${(props: any) => `inset 0 0 0 ${props.size / 10}px ${props.color}`};\n    animation-name: ${firstPulse};\n  }\n  &:after {\n    box-shadow: 0 0 0 0 ${(props: any) => props.color};\n    animation-name: ${secondPulse};\n  }\n`;\n\nexport function renderRing({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 30;\n  const color = \"var(--spinner-color, #00ff89)\";\n\n  return (\n    <Wrapper size={spinnerSize}>\n      <Circle size={spinnerSize} color={color} />\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/ring.tsx"
    },
    {
      "path": "src/spinners/rotate.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n    0% {\n        transform: rotate(0deg);\n    }\n    100% { \n        transform: rotate(1440deg); \n        opacity: 0.05;\n    }\n`;\n\nconst getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit }: any) => {\n  const balls = [];\n  const offset = ballSize / 2;\n  for (let i = 0; i < countBalls; i++) {\n    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset;\n    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset;\n    balls.push(\n      <Ball\n        color={color}\n        ballSize={ballSize}\n        size={size}\n        x={y}\n        y={x}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    left: 50%;\n    top: 0%;\n    width: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    border-radius: 50%;\n    background-color: ${props => (props as any).color};\n    transform: translateX(-50%) translateY(100%);\n    transform-origin: 0 250% 0;\n    animation: ${rotate} 4s both infinite;\n    animation-timing-function: cubic-bezier(0.5, ${props => (props as any).index * 0.3}, 0.9, 0.9);\n`;\n\nexport function renderRotate({ size }: InternalRenderProps) {\n  const s = size ?? 45;\n  const color = \"var(--spinner-color, #00ff89)\";\n  const radius = s / 2;\n  const countBalls = 8;\n  const ballSize = s / 5;\n  const angle = 360 / countBalls;\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls, radius, angle, color, size: s, ballSize, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/rotate.tsx"
    },
    {
      "path": "src/spinners/sequence.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = (props: any) => keyframes`\n    0% {\n        top: ${props.size}${props.sizeUnit};\n        transform: rotateY(0deg);\n    }\n    30%{\n        top: 0;\n        transform: rotateY(90deg);\n    }\n    100% {\n        transform: rotateY(0deg);\n        top: -${props.size}${props.sizeUnit};\n    }\n`;\n\nconst getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }: any) => {\n  const cubes = [];\n  let keyValue = 0;\n  for (let i = 0; i < countCubesInLine; i++) {\n    cubes.push(\n      <CubeWrapper x={i * (size / 8 + size / 11)} y={0} key={keyValue.toString()} sizeUnit={sizeUnit}>\n        <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>\n          <Side front={true} size={size} color={frontColor} sizeUnit={sizeUnit} />\n          <Side left={true} size={size} color={backColor} sizeUnit={sizeUnit} />\n        </Cube>\n      </CubeWrapper>,\n    );\n    keyValue++;\n  }\n  return cubes;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 1.75}${(props as any).sizeUnit}`};\n    perspective: ${props => `${(props as any).size * 3}${(props as any).sizeUnit}`};\n    overflow: hidden;\n    transform: rotateY(20deg);\n`;\n\nconst CubeWrapper = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: inherit;\n    height: inherit;\n`;\n\nconst Cube = styled.div`\n    position: relative;\n    width: ${props => `${(props as any).size / 8}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 1.75}${(props as any).sizeUnit}`};\n    transform-style: preserve-3d;\n    animation: ${rotate} 1.75s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation-delay: ${props => (props as any).index * 0.1}s;\n`;\n\nconst Side = styled.div`\n    backface-visibility: hidden;\n    display: block;\n    position: absolute;\n    width: inherit;\n    height: inherit;\n    background-color: ${props => (props as any).color};\n    transform: rotateY(${props => ((props as any).front ? 0 : -90)}deg)\n        translateZ(${props => `${(props as any).size / 16}${(props as any).sizeUnit}`});\n`;\n\nexport function renderSequence({ size }: InternalRenderProps) {\n  const s = size ?? 40;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #686769)\";\n  return <Wrapper size={s} sizeUnit=\"px\">{getCubes({ countCubesInLine: 5, backColor, frontColor, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/sequence.tsx"
    },
    {
      "path": "src/spinners/sphere.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n    to{\n        transform: rotate(360deg);\n    }\n`;\n\nconst move = (props: any) => keyframes`\n    0% {\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1) ;\n    }\n    5% {\n        transform: translateX(-${props.size / 12}${props.sizeUnit}) translateY(-${props.size / 12}${\n    props.sizeUnit\n}) scale(0);\n    }\n    50% {\n        transform: translateX(-${props.size / 12}${props.sizeUnit}) translateY(-${props.size / 12}${\n    props.sizeUnit\n}) scale(0);\n    }\n    55% {\n        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1) ;\n    }\n`;\n\nconst getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit }: any) => {\n  const balls = [];\n  const offset = ballSize / 2;\n  for (let i = 0; i < countBalls; i++) {\n    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset;\n    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset;\n    balls.push(\n      <Ball\n        color={color}\n        ballSize={ballSize}\n        size={size}\n        x={y}\n        y={x}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    animation: ${rotate} 8s linear infinite;\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).size / 2}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).size / 2}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).ballSize}${(props as any).sizeUnit}`};\n    border-radius: 50%;\n    background-color: ${props => (props as any).color};\n    transform: translateX(${props => `${(props as any).x}${(props as any).sizeUnit}`})\n        translateY(${props => `${(props as any).y}${(props as any).sizeUnit}`});\n    animation: ${props => move(props)} 5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation-delay: ${props => (props as any).index * 0.3}s;\n`;\n\nexport function renderSphere({ size }: InternalRenderProps) {\n  const s = size ?? 30;\n  const color = \"var(--spinner-color, #fff)\";\n  const radius = s / 2;\n  const countBalls = 7;\n  const ballSize = s / 5;\n  const angle = 360 / countBalls;\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls, radius, angle, color, size: s, ballSize, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/sphere.tsx"
    },
    {
      "path": "src/spinners/spiral.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst rotate = keyframes`\n  0% {\n    transform: rotateX(0deg);\n  }\n  25% {\n    transform: rotateX(-90deg);\n  }\n  50% {\n    transform: rotateX(-180deg);\n  }\n  75% {\n    transform: rotateX(-270deg);\n  }\n  100% {\n    transform: rotateX(-360deg);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  perspective: ${(props) => `${props.size * 3}${props.sizeUnit}`};\n`;\n\nconst CubeWrapper = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: inherit;\n  height: inherit;\n`;\n\nconst Cube = styled.div<any>`\n  position: relative;\n  width: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  transform-style: preserve-3d;\n  animation: ${rotate} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n  animation-delay: ${(props) => props.index * 0.15}s;\n`;\n\nconst rotateCube = (props: any) => {\n  if (props.top) {\n    return 90;\n  }\n  if (props.bottom) {\n    return -90;\n  }\n  return 0;\n};\n\nconst Side = styled.div<any>`\n  backface-visibility: hidden;\n  display: block;\n  position: absolute;\n  width: inherit;\n  height: inherit;\n  background-color: ${(props) => props.color};\n  transform: rotateX(${(props) => rotateCube(props)}deg) rotateY(${(props) => (props.back ? 180 : 0)}deg)\n    translateZ(${(props) => `${props.size / 8}${props.sizeUnit}`});\n`;\n\nconst getCubes = ({ countCubesInLine, backColor, frontColor, size, sizeUnit }: any) => {\n  const cubes = [];\n  let keyValue = 0;\n  for (let i = 0; i < countCubesInLine; i++) {\n    cubes.push(\n      <CubeWrapper x={i * (size / 4)} y={0} key={keyValue.toString()} sizeUnit={sizeUnit}>\n        <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>\n          <Side front={true} size={size} color={frontColor} sizeUnit={sizeUnit} />\n          <Side back={true} size={size} color={frontColor} sizeUnit={sizeUnit} />\n          <Side bottom={true} size={size} color={backColor} sizeUnit={sizeUnit} />\n          <Side top={true} size={size} color={backColor} sizeUnit={sizeUnit} />\n        </Cube>\n      </CubeWrapper>,\n    );\n    keyValue++;\n  }\n  return cubes;\n};\n\nexport function renderSpiral({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #686769)\";\n  const countCubesInLine = 4;\n\n  return (\n    <Wrapper size={s} sizeUnit=\"px\">\n      {getCubes({ countCubesInLine, backColor, frontColor, size: s, sizeUnit: \"px\" })}\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/spiral.tsx"
    },
    {
      "path": "src/spinners/stage.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    top: ${props.y}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n  }\n  25% {\n    top: ${props.y}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n    opacity: 0;\n  }\n  50% {\n    top: ${props.y + props.size / 2}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n    opacity: 0;\n  }\n  100% {\n    top: ${props.y}${props.sizeUnit};\n    left: ${props.x}${props.sizeUnit};\n    opacity: 1;\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n`;\n\nconst Ball = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 5}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 5}${props.sizeUnit}`};\n  border-radius: 50%;\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1s ease-in-out infinite;\n  animation-delay: ${(props) => props.index * 0.2}s;\n`;\n\nconst getBalls = ({ countBalls, color, size, sizeUnit }: any) => {\n  const balls = [];\n  let keyValue = 0;\n  for (let i = 0; i < countBalls; i++) {\n    balls.push(\n      <Ball\n        color={color}\n        size={size}\n        index={i}\n        x={i * (size / 2.5)}\n        y={size / 2 - size / 10}\n        key={keyValue.toString()}\n        sizeUnit={sizeUnit}\n      />,\n    );\n    keyValue++;\n  }\n  return balls;\n};\n\nexport function renderStage({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #fff)\";\n  const countBalls = 3;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/stage.tsx"
    },
    {
      "path": "src/spinners/swap.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst animationLeftPostions = (props: any) => {\n  switch (props.index) {\n    case 0:\n      return {\n        x: props.size - props.size / 4,\n        y: props.y,\n      };\n    case 1:\n      return {\n        x: props.x,\n        y: props.y - props.size / 2 + props.size / 8,\n      };\n    case 2:\n      return {\n        x: 0,\n        y: props.y,\n      };\n  }\n};\n\nconst motion = (props: any) => keyframes`\n  0% {\n    top: ${props.y}px;\n    left: ${props.x}px;\n  }\n  50%{\n    top: ${animationLeftPostions(props).y}px;\n    left: ${animationLeftPostions(props).x}px;\n  }\n  100% {\n    top: ${props.y}px;\n    left: ${props.x}px;\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 2 + props.size / 8}${props.sizeUnit}`};\n`;\n\nconst Ball = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 4}${props.sizeUnit}`};\n  border-radius: 50%;\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n  &:nth-child(2) {\n    animation-timing-function: cubic-bezier(1, 0, 0, 1);\n    animation-duration: 1.5s;\n  }\n`;\n\nconst getBalls = ({ countBalls, color, size, sizeUnit }: any) => {\n  const balls = [];\n  for (let i = 0; i < countBalls; i++) {\n    balls.push(\n      <Ball\n        color={color}\n        size={size}\n        x={i * (size / 4 + size / 8)}\n        y={size / 2 - size / 8}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return balls;\n};\n\nexport function renderSwap({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 40;\n  const color = \"var(--spinner-color, #686769)\";\n  const countBalls = 3;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBalls, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/swap.tsx"
    },
    {
      "path": "src/spinners/swish.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n    50% {\n        transform: scale(0);\n        background-color: ${props.backColor};\n    }\n`;\n\nconst getBalls = ({ countBallsInLine, frontColor, backColor, size, sizeUnit }: any) => {\n  const balls = [];\n  let keyValue = 0;\n  for (let i = 0; i < countBallsInLine; i++) {\n    for (let j = 0; j < countBallsInLine; j++) {\n      balls.push(\n        <Ball\n          frontColor={frontColor}\n          backColor={backColor}\n          size={size}\n          x={i * (size / 3 + size / 15)}\n          y={j * (size / 3 + size / 15)}\n          key={keyValue.toString()}\n          index={keyValue}\n          sizeUnit={sizeUnit}\n        />,\n      );\n      keyValue++;\n    }\n  }\n  return balls;\n};\n\nconst Wrapper = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size}${(props as any).sizeUnit}`};\n`;\n\nconst Ball = styled.div`\n    position: absolute;\n    top: ${props => `${(props as any).y}${(props as any).sizeUnit}`};\n    left: ${props => `${(props as any).x}${(props as any).sizeUnit}`};\n    width: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    height: ${props => `${(props as any).size / 5}${(props as any).sizeUnit}`};\n    border-radius: 3px;\n    background-color: ${props => (props as any).frontColor};\n    animation: ${motion} 0.9s ease infinite;\n    transition: all 0.3s ease;\n    animation-delay: ${props => (props as any).index * 0.1}s;\n`;\n\nexport function renderSwish({ size }: InternalRenderProps) {\n  const s = size ?? 40;\n  const frontColor = \"var(--spinner-color, #4b4c56)\";\n  const backColor = \"var(--spinner-secondary-color, #fff)\";\n  return <Wrapper size={s} sizeUnit=\"px\">{getBalls({ countBallsInLine: 3, frontColor, backColor, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/swish.tsx"
    },
    {
      "path": "src/spinners/trace.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst trace = (props: any) => keyframes`\n  0% {\n    border: ${props.size / 10}px solid ${props.backColor};\n  }\n  25% {\n    border: ${props.size / 10}px solid ${props.frontColor};\n  }\n  50% {\n    border: ${props.size / 10}px solid ${props.backColor};\n  }\n  100% {\n    border: ${props.size / 10}px solid ${props.backColor};\n  }\n`;\n\nconst motion = (props: any) => keyframes`\n  25% {\n    transform: translate(${props.size / 2 + props.size / 10}px, 0);\n  }\n  50% {\n    transform: translate(${props.size / 2 + props.size / 10}px, ${props.size / 2 + props.size / 10}px);\n  }\n  75% {\n    transform: translate(0, ${props.size / 2 + props.size / 10}px);\n  }\n  100% {\n    transform: translate(0, 0);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  transform: rotate(45deg);\n`;\n\nconst Ball = styled.div`\n  position: absolute;\n  top: ${(props: any) => `${props.y}px`};\n  left: ${(props: any) => `${props.x}px`};\n  width: ${(props: any) => `${props.size / 5}px`};\n  height: ${(props: any) => `${props.size / 5}px`};\n  border-radius: 50%;\n  background-color: transparent;\n  border: ${(props: any) => `${props.size / 10}px`} solid ${(props: any) => props.backColor};\n  animation: ${(props: any) => trace(props)} 4s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n  animation-delay: ${(props: any) => props.index * 1}s;\n`;\n\nconst MovedBall = styled(Ball)`\n  top: 0;\n  left: 0;\n  border-color: ${(props: any) => props.frontColor};\n  background-color: ${(props: any) => props.frontColor};\n  animation: ${(props: any) => motion(props)} 4s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n  z-index: 10;\n`;\n\nexport function renderTrace({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 35;\n  const countBalls = 4;\n  const frontColor = \"var(--spinner-color, #00ff89)\";\n  const backColor = \"var(--spinner-secondary-color, #4b4c56)\";\n  const balls: React.ReactNode[] = [];\n  const indexes = [0, 1, 3, 2];\n  let counter = 0;\n\n  for (let i = 0; i < countBalls / 2; i++) {\n    for (let j = 0; j < countBalls / 2; j++) {\n      balls.push(\n        <Ball\n          frontColor={frontColor}\n          backColor={backColor}\n          size={spinnerSize}\n          x={j * (spinnerSize / 2 + spinnerSize / 10)}\n          y={i * (spinnerSize / 2 + spinnerSize / 10)}\n          key={indexes[counter].toString()}\n          index={indexes[counter]}\n        />,\n      );\n      counter++;\n    }\n  }\n\n  return (\n    <Wrapper size={spinnerSize}>\n      {balls}\n      <MovedBall frontColor={frontColor} backColor={backColor} size={spinnerSize} />\n    </Wrapper>\n  );\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/trace.tsx"
    },
    {
      "path": "src/spinners/wave.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = keyframes`\n  25% {\n    transform: skewY(25deg);\n  }\n  50% {\n    height: 100%;\n    margin-top: 0;\n  }\n  75% {\n    transform: skewY(-25deg);\n  }\n`;\n\nconst Wrapper = styled.div<any>`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => `${props.size * 2.5}${props.sizeUnit}`};\n  height: ${(props) => `${props.size}${props.sizeUnit}`};\n  overflow: hidden;\n`;\n\nconst Bar = styled.div<any>`\n  position: absolute;\n  top: ${(props) => `${props.y + props.size / 10}${props.sizeUnit}`};\n  left: ${(props) => `${props.x}${props.sizeUnit}`};\n  width: ${(props) => `${props.size / 5}${props.sizeUnit}`};\n  height: ${(props) => `${props.size / 10}${props.sizeUnit}`};\n  margin-top: ${(props) => `${props.size - props.size / 10}${props.sizeUnit}`};\n  transform: skewY(0deg);\n  background-color: ${(props) => props.color};\n  animation: ${motion} 1.25s ease-in-out infinite;\n  animation-delay: ${(props) => props.index * 0.15}s;\n`;\n\nconst getBars = ({ countBars, color, size, sizeUnit }: any) => {\n  const bars = [];\n  for (let i = 0; i < countBars; i++) {\n    bars.push(\n      <Bar\n        color={color}\n        size={size}\n        x={i * (size / 5 + (size / 15 - size / 100))}\n        y={0}\n        key={i.toString()}\n        index={i}\n        sizeUnit={sizeUnit}\n      />,\n    );\n  }\n  return bars;\n};\n\nexport function renderWave({ size }: InternalRenderProps): React.ReactNode {\n  const s = size ?? 30;\n  const color = \"var(--spinner-color, #fff)\";\n  const countBars = 10;\n\n  return <Wrapper size={s} sizeUnit=\"px\">{getBars({ countBars, color, size: s, sizeUnit: \"px\" })}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/wave.tsx"
    },
    {
      "path": "src/spinners/whisper.tsx",
      "content": "import styled, { keyframes } from \"styled-components\";\nimport type { InternalRenderProps } from \"../types\";\n\nconst motion = (props: any) => keyframes`\n  0% {\n    transform: scale(1, 1);\n    opacity: 1;\n    background-color: ${props.backColor};\n  }\n  100% {\n    transform: scale(0, 0);\n    opacity: 0;\n    background-color: ${props.frontColor};\n  }\n`;\n\nconst spin = () => keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(90deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  75% {\n    transform: rotate(270deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: ${(props: any) => `${props.size}px`};\n  height: ${(props: any) => `${props.size}px`};\n  animation: ${spin} 10s infinite;\n`;\n\nconst Ball = styled.div`\n  float: left;\n  clear: right;\n  margin: ${(props: any) => `${props.size / 15}px`};\n  width: ${(props: any) => `${props.size / 5}px`};\n  height: ${(props: any) => `${props.size / 5}px`};\n  border-radius: 2px;\n  background-color: ${(props: any) => props.frontColor};\n  animation-name: ${motion};\n  animation-direction: alternate;\n  animation-duration: 800ms;\n  animation-iteration-count: infinite;\n  &:nth-child(1) {\n    animation-delay: 200ms;\n  }\n  &:nth-child(2) {\n    animation-delay: 400ms;\n  }\n  &:nth-child(3) {\n    animation-delay: 600ms;\n  }\n  &:nth-child(4) {\n    animation-delay: 400ms;\n  }\n  &:nth-child(5) {\n    animation-delay: 600ms;\n  }\n  &:nth-child(6) {\n    animation-delay: 800ms;\n  }\n  &:nth-child(7) {\n    animation-delay: 600ms;\n  }\n  &:nth-child(8) {\n    animation-delay: 800ms;\n  }\n  &:nth-child(9) {\n    animation-delay: 1s;\n  }\n`;\n\nexport function renderWhisper({ size }: InternalRenderProps): React.ReactNode {\n  const spinnerSize = size ?? 50;\n  const countBallsInLine = 3;\n  const frontColor = \"var(--spinner-color, #4b4c56)\";\n  const backColor = \"var(--spinner-secondary-color, #00ff89)\";\n  const balls: React.ReactNode[] = [];\n  let keyValue = 0;\n\n  for (let i = 0; i < countBallsInLine; i++) {\n    for (let j = 0; j < countBallsInLine; j++) {\n      balls.push(\n        <Ball\n          frontColor={frontColor}\n          backColor={backColor}\n          size={spinnerSize}\n          key={keyValue.toString()}\n          index={keyValue}\n        />,\n      );\n      keyValue++;\n    }\n  }\n\n  return <Wrapper size={spinnerSize}>{balls}</Wrapper>;\n}",
      "type": "registry:component",
      "target": "components/ui/spinners/whisper.tsx"
    },
    {
      "path": "src/styles.css",
      "content": "@keyframes spinner-ball {\n  0% {\n    transform: translateX(0) scale(1);\n  }\n  25% {\n    transform: translateX(calc(var(--spinner-size, 40px) / 2)) scale(0.25);\n  }\n  50% {\n    transform: translateX(0) scale(1);\n  }\n  75% {\n    transform: translateX(calc(var(--spinner-size, 40px) / -2)) scale(0.25);\n  }\n  100% {\n    transform: translateX(0) scale(1);\n  }\n}\n\n@keyframes spinner-grid {\n  0% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n  }\n  50% {\n    width: calc(var(--spinner-size, 40px) / 4);\n    height: calc(var(--spinner-size, 40px) / 4);\n    top: calc(var(--spinner-size, 40px) / 2 - var(--spinner-size, 40px) / 8);\n    left: calc(var(--spinner-size, 40px) / 2 - var(--spinner-size, 40px) / 8);\n  }\n  100% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n  }\n}\n\n@keyframes spinner-swap {\n  0% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n  }\n  50% {\n    top: var(--spinner-swap-mid-y, 0px);\n    left: var(--spinner-swap-mid-x, 0px);\n  }\n  100% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n  }\n}\n\n@keyframes spinner-bars {\n  0% {\n    width: calc(var(--spinner-size, 40px) / 20);\n  }\n  50% {\n    width: calc(var(--spinner-size, 40px) / 6);\n  }\n  100% {\n    width: calc(var(--spinner-size, 40px) / 20);\n  }\n}\n\n@keyframes spinner-wave {\n  25% {\n    transform: skewY(25deg);\n  }\n  50% {\n    height: 100%;\n    margin-top: 0;\n  }\n  75% {\n    transform: skewY(-25deg);\n  }\n}\n\n@keyframes spinner-push {\n  15% {\n    transform: scaleY(1) translateX(calc(10 * var(--spinner-size-unit, 1px)));\n  }\n  90% {\n    transform: scaleY(0.05) translateX(calc(-5 * var(--spinner-size-unit, 1px)));\n  }\n  100% {\n    transform: scaleY(0.05) translateX(calc(-5 * var(--spinner-size-unit, 1px)));\n  }\n}\n\n@keyframes spinner-firework {\n  0% {\n    opacity: 1;\n    transform: scale(0.1);\n  }\n  25% {\n    opacity: 0.85;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n\n@keyframes spinner-stage {\n  0% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n  }\n  25% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n    opacity: 0;\n  }\n  50% {\n    top: calc(var(--spinner-y, 0px) + var(--spinner-size, 40px) / 2);\n    left: var(--spinner-x, 0px);\n    opacity: 0;\n  }\n  100% {\n    top: var(--spinner-y, 0px);\n    left: var(--spinner-x, 0px);\n    opacity: 1;\n  }\n}\n\n@keyframes spinner-heart {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(0.75);\n  }\n  50% {\n    transform: scale(1);\n  }\n  65% {\n    transform: scale(1);\n  }\n  80% {\n    transform: scale(0.75);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes spinner-guard {\n  0% {\n    transform: rotateY(90deg);\n  }\n  50% {\n    transform: rotateY(0deg);\n  }\n  100% {\n    transform: rotateY(90deg);\n  }\n}\n\n@keyframes spinner-circle {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-spiral {\n  0% {\n    transform: rotateX(0deg);\n  }\n  25% {\n    transform: rotateX(-90deg);\n  }\n  50% {\n    transform: rotateX(-180deg);\n  }\n  75% {\n    transform: rotateX(-270deg);\n  }\n  100% {\n    transform: rotateX(-360deg);\n  }\n}\n\n@keyframes spinner-pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes spinner-sequence {\n  0% {\n    top: var(--spinner-size, 40px);\n    transform: rotateY(0deg);\n  }\n  30% {\n    top: 0;\n    transform: rotateY(90deg);\n  }\n  100% {\n    transform: rotateY(0deg);\n    top: calc(var(--spinner-size, 40px) * -1);\n  }\n}\n\n@keyframes spinner-domino {\n  0% {\n    transform: translateX(var(--spinner-domino-t0, 0px)) rotate(0deg);\n    opacity: 0;\n  }\n  14.28% {\n    transform: translateX(var(--spinner-domino-t1, 0px)) rotate(0deg);\n    opacity: 1;\n  }\n  28.56% {\n    transform: translateX(var(--spinner-domino-t2, 0px)) rotate(0deg);\n    opacity: 1;\n  }\n  37.12% {\n    transform: translateX(var(--spinner-domino-t3, 0px)) rotate(0deg);\n    opacity: 1;\n  }\n  42.84% {\n    transform: translateX(var(--spinner-domino-t4, 0px)) rotate(10deg);\n    opacity: 1;\n  }\n  57.12% {\n    transform: translateX(var(--spinner-domino-t5, 0px)) rotate(40deg);\n    opacity: 1;\n  }\n  71.4% {\n    transform: translateX(var(--spinner-domino-t6, 0px)) rotate(62deg);\n    opacity: 1;\n  }\n  85.68% {\n    transform: translateX(var(--spinner-domino-t7, 0px)) rotate(72deg);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(var(--spinner-domino-t8, 0px)) rotate(74deg);\n    opacity: 0;\n  }\n}\n\n@keyframes spinner-impulse {\n  0% {\n    background: var(--spinner-back-color, currentColor);\n    transform: scale(1);\n    animation-timing-function: cubic-bezier(1, 0, 0.7, 1);\n  }\n  40% {\n    background: var(--spinner-front-color, currentColor);\n    transform: scale(1.5);\n    animation-timing-function: cubic-bezier(0.3, 0, 0, 1);\n  }\n  72.5% {\n    background: var(--spinner-back-color, currentColor);\n    transform: scale(1);\n    animation-timing-function: linear;\n  }\n  100% {\n    background: var(--spinner-back-color, currentColor);\n    transform: scale(1);\n  }\n}\n\n@keyframes spinner-cube {\n  from {\n    transform: rotateX(0) rotateY(0);\n  }\n  to {\n    transform: rotateX(360deg) rotateY(360deg);\n  }\n}\n\n@keyframes spinner-fill-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(180deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  75% {\n    transform: rotate(360deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-fill {\n  0% {\n    height: 0%;\n  }\n  25% {\n    height: 0%;\n  }\n  50% {\n    height: 100%;\n  }\n  75% {\n    height: 100%;\n  }\n  100% {\n    height: 0%;\n  }\n}\n\n@keyframes spinner-sphere-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-sphere {\n  0% {\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1);\n  }\n  5% {\n    transform: translateX(calc(var(--spinner-size, 30px) / -12)) translateY(calc(var(--spinner-size, 30px) / -12)) scale(0);\n  }\n  50% {\n    transform: translateX(calc(var(--spinner-size, 30px) / -12)) translateY(calc(var(--spinner-size, 30px) / -12)) scale(0);\n  }\n  55% {\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1);\n  }\n}\n\n@keyframes spinner-flag {\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  50% {\n    transform: translateY(calc(var(--spinner-size, 40px) / -5));\n    opacity: 0.25;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes spinner-clap-rotate {\n  50% {\n    transform: rotate(180deg) scale(1.125);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-clap {\n  0% {\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1.25);\n  }\n  5% {\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1.75);\n  }\n  50% {\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(0.25);\n  }\n  55% {\n    background-color: var(--spinner-back-color, currentColor);\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1);\n  }\n}\n\n@keyframes spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(1440deg);\n    opacity: 0.05;\n  }\n}\n\n@keyframes spinner-swish {\n  50% {\n    transform: scale(0);\n    background-color: var(--spinner-back-color, currentColor);\n  }\n}\n\n@keyframes spinner-goo-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-goo {\n  0% {\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    transform: translateY(var(--spinner-translate-to, 0px)) scale(0.8);\n  }\n  100% {\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes spinner-comb {\n  to {\n    transform: rotate(450deg);\n  }\n}\n\n@keyframes spinner-pong-player {\n  0% {\n    top: var(--spinner-pong-player-top-a, 0px);\n  }\n  50% {\n    top: var(--spinner-pong-player-top-b, 0px);\n  }\n  100% {\n    top: var(--spinner-pong-player-top-a, 0px);\n  }\n}\n\n@keyframes spinner-pong-ball {\n  0% {\n    top: calc(var(--spinner-size, 60px) / 3.5 - var(--spinner-size, 60px) / 8);\n    left: calc(var(--spinner-size, 60px) / 12);\n  }\n  25% {\n    top: calc(var(--spinner-size, 60px) / 3.5);\n    left: calc(var(--spinner-size, 60px) - var(--spinner-size, 60px) / 8);\n  }\n  50% {\n    top: calc(var(--spinner-size, 60px) / 1.75 - var(--spinner-size, 60px) / 8);\n    left: calc(var(--spinner-size, 60px) / 12);\n  }\n  75% {\n    top: calc(var(--spinner-size, 60px) / 3.5);\n    left: calc(var(--spinner-size, 60px) - var(--spinner-size, 60px) / 8);\n  }\n  100% {\n    top: calc(var(--spinner-size, 60px) / 3.5 - var(--spinner-size, 60px) / 8);\n    left: calc(var(--spinner-size, 60px) / 12);\n  }\n}\n\n@keyframes spinner-rainbow {\n  0% {\n    border-width: calc(10 * var(--spinner-size-unit, 1px));\n  }\n  25% {\n    border-width: calc(3 * var(--spinner-size-unit, 1px));\n  }\n  50% {\n    transform: rotate(115deg);\n    border-width: calc(10 * var(--spinner-size-unit, 1px));\n  }\n  75% {\n    border-width: calc(3 * var(--spinner-size-unit, 1px));\n  }\n  100% {\n    border-width: calc(10 * var(--spinner-size-unit, 1px));\n  }\n}\n\n@keyframes spinner-ring-first {\n  0% {\n    box-shadow: inset 0 0 0 calc(var(--spinner-size, 30px) / 10) var(--spinner-color, currentColor);\n    opacity: 1;\n  }\n  50%,\n  100% {\n    box-shadow: inset 0 0 0 0 var(--spinner-color, currentColor);\n    opacity: 0;\n  }\n}\n\n@keyframes spinner-ring-second {\n  0%,\n  50% {\n    box-shadow: inset 0 0 0 0 var(--spinner-color, currentColor);\n    opacity: 0;\n  }\n  100% {\n    box-shadow: inset 0 0 0 calc(var(--spinner-size, 30px) / 10) var(--spinner-color, currentColor);\n    opacity: 1;\n  }\n}\n\n@keyframes spinner-hoop {\n  0% {\n    opacity: 0;\n    border-color: var(--spinner-color, currentColor);\n    transform: rotateX(65deg) rotateY(45deg) translateZ(calc(var(--spinner-size, 45px) * -1.5)) scale(0.1);\n  }\n  40% {\n    opacity: 1;\n    transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: rotateX(65deg) rotateY(-45deg) translateZ(calc(var(--spinner-size, 45px) * -1.5)) scale(0.1);\n  }\n}\n\n@keyframes spinner-flapper {\n  100% {\n    opacity: 0;\n    transform: translateX(var(--spinner-x, 0px)) translateY(var(--spinner-y, 0px)) scale(1);\n  }\n}\n\n@keyframes spinner-magic {\n  100% {\n    transform: translateX(-50%) translateY(-50%) rotate(360deg);\n  }\n}\n\n@keyframes spinner-jellyfish {\n  0% {\n    transform: translateY(calc(var(--spinner-size, 60px) / -5));\n  }\n  50% {\n    transform: translateY(calc(var(--spinner-size, 60px) / 4));\n  }\n  100% {\n    transform: translateY(calc(var(--spinner-size, 60px) / -5));\n  }\n}\n\n@keyframes spinner-trace {\n  0% {\n    border: calc(var(--spinner-size, 35px) / 10) solid var(--spinner-back-color, currentColor);\n  }\n  25% {\n    border: calc(var(--spinner-size, 35px) / 10) solid var(--spinner-front-color, currentColor);\n  }\n  50% {\n    border: calc(var(--spinner-size, 35px) / 10) solid var(--spinner-back-color, currentColor);\n  }\n  100% {\n    border: calc(var(--spinner-size, 35px) / 10) solid var(--spinner-back-color, currentColor);\n  }\n}\n\n@keyframes spinner-trace-move {\n  25% {\n    transform: translate(calc(var(--spinner-size, 35px) / 2 + var(--spinner-size, 35px) / 10), 0);\n  }\n  50% {\n    transform: translate(\n      calc(var(--spinner-size, 35px) / 2 + var(--spinner-size, 35px) / 10),\n      calc(var(--spinner-size, 35px) / 2 + var(--spinner-size, 35px) / 10)\n    );\n  }\n  75% {\n    transform: translate(0, calc(var(--spinner-size, 35px) / 2 + var(--spinner-size, 35px) / 10));\n  }\n  100% {\n    transform: translate(0, 0);\n  }\n}\n\n@keyframes spinner-classic {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes spinner-whisper {\n  0% {\n    transform: scale(1, 1);\n    opacity: 1;\n    background-color: var(--spinner-back-color, currentColor);\n  }\n  100% {\n    transform: scale(0, 0);\n    opacity: 0;\n    background-color: var(--spinner-front-color, currentColor);\n  }\n}\n\n@keyframes spinner-whisper-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(90deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  75% {\n    transform: rotate(270deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinner-metro-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(-360deg);\n  }\n}\n\n@keyframes spinner-metro-ball {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.spinner-delay-0 {\n  animation-delay: 0s;\n}\n\n.spinner-delay-1 {\n  animation-delay: 0.05s;\n}\n\n.spinner-delay-2 {\n  animation-delay: 0.1s;\n}\n\n.spinner-delay-3 {\n  animation-delay: 0.15s;\n}\n\n.spinner-delay-4 {\n  animation-delay: 0.2s;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [role=\"status\"] * {\n    animation-duration: 0s !important;\n    animation-play-state: paused !important;\n  }\n}",
      "type": "registry:file",
      "target": "components/ui/styles.css"
    }
  ],
  "type": "registry:ui"
}