{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-indeterminate",
  "title": "Indeterminate progress",
  "description": "Styled progress: the Indeterminate set. 5 decorative progress variations (BarSweepProgress, DualBarProgress, PulseTrackProgress, MarchProgress, CometProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/progress-indeterminate.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Indeterminate progress family: loading of unknown duration. It takes NO value, so there is no aria-valuenow. Colour comes ONLY from tokens. framer-motion drives the continuous sweep, march and trail; under reduced-motion the motion stops and a static partial bar is shown. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst track: Record<StyledSize, string> = {\n  sm: \"h-1\",\n  md: \"h-1.5\",\n  lg: \"h-2.5\",\n  xl: \"h-3.5\",\n}\n\nconst trackBase = \"relative w-56 max-w-full overflow-hidden rounded-full bg-secondary\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize; label?: string }\n\n/* BarSweep: tek token bar iz boyunca sola-saga gidip gelir. */\nexport function BarSweepProgress({ className, size = \"md\", label = \"Loading\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      {reduce ? (\n        <span className=\"absolute inset-y-0 left-0 w-2/5 rounded-full bg-primary\" />\n      ) : (\n        <motion.span\n          className=\"absolute inset-y-0 w-2/5 rounded-full bg-primary\"\n          animate={{ left: [\"0%\", \"60%\"] }}\n          transition={{ duration: 1.1, ease: \"easeInOut\", repeat: Infinity, repeatType: \"reverse\" }}\n        />\n      )}\n    </div>\n  )\n}\n\n/* DualBar: two token bars sweep offset from each other with different widths and delays. */\nexport function DualBarProgress({ className, size = \"md\", label = \"Loading\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      {reduce ? (\n        <span className=\"absolute inset-y-0 left-0 w-1/2 rounded-full bg-primary\" />\n      ) : (\n        <>\n          <motion.span\n            className=\"absolute inset-y-0 w-2/5 rounded-full bg-primary\"\n            animate={{ left: [\"-40%\", \"100%\"] }}\n            transition={{ duration: 1.4, ease: \"easeInOut\", repeat: Infinity }}\n          />\n          <motion.span\n            className=\"absolute inset-y-0 w-1/4 rounded-full bg-[color-mix(in_oklab,var(--color-primary)_55%,transparent)]\"\n            animate={{ left: [\"-25%\", \"100%\"] }}\n            transition={{ duration: 1.4, ease: \"easeInOut\", repeat: Infinity, delay: 0.55 }}\n          />\n        </>\n      )}\n    </div>\n  )\n}\n\n/* PulseTrack: tum iz boyunca token dolgu opaklik nabzi atar. */\nexport function PulseTrackProgress({ className, size = \"md\", label = \"Loading\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      {reduce ? (\n        <span className=\"absolute inset-0 rounded-full bg-[color-mix(in_oklab,var(--color-primary)_60%,transparent)]\" />\n      ) : (\n        <motion.span\n          className=\"absolute inset-0 rounded-full bg-primary\"\n          animate={{ opacity: [0.35, 1, 0.35] }}\n          transition={{ duration: 1.3, ease: \"easeInOut\", repeat: Infinity }}\n        />\n      )}\n    </div>\n  )\n}\n\n/* March: iz boyunca yuruyen token cizgiler (marching dashes). */\nexport function MarchProgress({ className, size = \"md\", label = \"Loading\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-0 [background-image:repeating-linear-gradient(90deg,var(--color-primary)_0,var(--color-primary)_6px,transparent_6px,transparent_12px)] [background-size:12px_100%]\"\n        animate={reduce ? undefined : { backgroundPositionX: [\"0px\", \"12px\"] }}\n        transition={reduce ? undefined : { duration: 0.6, ease: \"linear\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n\n/* Comet: token bir nokta + arkasinda solan kuyruk iz boyunca kosar. */\nexport function CometProgress({ className, size = \"md\", label = \"Loading\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      {reduce ? (\n        <span className=\"absolute inset-y-0 left-0 w-1/3 rounded-full [background-image:linear-gradient(90deg,transparent,var(--color-primary))]\" />\n      ) : (\n        <motion.span\n          className=\"absolute inset-y-0 w-1/3 rounded-full [background-image:linear-gradient(90deg,transparent,color-mix(in_oklab,var(--color-primary)_60%,transparent),var(--color-primary))]\"\n          animate={{ left: [\"-33%\", \"100%\"] }}\n          transition={{ duration: 1.5, ease: \"easeInOut\", repeat: Infinity }}\n        />\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/progress-indeterminate.tsx"
    }
  ],
  "categories": [
    "styled",
    "progress"
  ],
  "type": "registry:component"
}