{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-styled",
  "title": "Progress essentials",
  "description": "Styled progress: the essentials set. 5 decorative progress variations (StripedProgress, GradientProgress, GlowProgress, SegmentedProgress, ShimmerProgress) 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-styled.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/* Progress family: 5 decorative progress bars. Colour comes ONLY from tokens (alpha via color-mix). Size = the track height. value is 0-100 (Shimmer is indeterminate and takes no value). framer-motion drives the fill width and the sweeps; under reduced-motion the fill snaps into place and the sweeps stop. */\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; value?: number; label?: string }\n\nfunction clamp(v: number) {\n  return Math.max(0, Math.min(100, v))\n}\n\n/* Striped: token cizgili dolgu, cizgiler surekli kayar. */\nexport function StripedProgress({ className, size = \"md\", value = 60, label = \"Progress\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  const v = clamp(value)\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-valuenow={v}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-y-0 left-0 bg-primary [background-image:repeating-linear-gradient(45deg,color-mix(in_oklab,var(--primary-foreground)_25%,transparent)_0,color-mix(in_oklab,var(--primary-foreground)_25%,transparent)_6px,transparent_6px,transparent_12px)] [background-size:17px_100%]\"\n        initial={reduce ? false : { width: 0 }}\n        animate={reduce ? { width: `${v}%` } : { width: `${v}%`, backgroundPositionX: [\"0px\", \"17px\"] }}\n        transition={\n          reduce\n            ? undefined\n            : { width: { duration: 0.8, ease: \"easeOut\" }, backgroundPositionX: { duration: 0.6, ease: \"linear\", repeat: Infinity } }\n        }\n      />\n    </div>\n  )\n}\n\n/* Gradient: cok tonlu token gradyan dolgu. */\nexport function GradientProgress({ className, size = \"md\", value = 60, label = \"Progress\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  const v = clamp(value)\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-valuenow={v}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-y-0 left-0 rounded-full [background-image:linear-gradient(90deg,var(--info),var(--brand),var(--success))]\"\n        initial={reduce ? false : { width: 0 }}\n        animate={{ width: `${v}%` }}\n        transition={reduce ? undefined : { duration: 0.8, ease: \"easeOut\" }}\n      />\n    </div>\n  )\n}\n\n/* Glow: token dolgu, ilerledikce isir (box-shadow). */\nexport function GlowProgress({ className, size = \"md\", value = 60, label = \"Progress\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  const v = clamp(value)\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-valuenow={v}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n      className={cn(trackBase, track[size], className)}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-y-0 left-0 rounded-full bg-info shadow-[0_0_10px_0_var(--info)]\"\n        initial={reduce ? false : { width: 0 }}\n        animate={{ width: `${v}%` }}\n        transition={reduce ? undefined : { duration: 0.8, ease: \"easeOut\" }}\n      />\n    </div>\n  )\n}\n\n/* Segmented: ayrik token bloklar; dolu olanlar value orant. */\nexport function SegmentedProgress({ className, size = \"md\", value = 60, label = \"Progress\", ...props }: Props) {\n  const v = clamp(value)\n  const total = 10\n  const filled = Math.round((v / 100) * total)\n  return (\n    <div\n      data-slot=\"styled-progress\"\n      role=\"progressbar\"\n      aria-valuenow={v}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n      className={cn(\"flex w-56 max-w-full gap-1\", track[size], className)}\n      {...props}\n    >\n      {Array.from({ length: total }).map((_, i) => (\n        <span key={i} className={cn(\"h-full flex-1 rounded-full\", i < filled ? \"bg-primary\" : \"bg-secondary\")} />\n      ))}\n    </div>\n  )\n}\n\n/* Shimmer: belirsiz durum - token parlama iz boyunca surekli supurur. */\nexport function ShimmerProgress({ className, size = \"md\", label = \"Loading\", ...props }: Omit<Props, \"value\">) {\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: [\"-40%\", \"100%\"] }}\n          transition={{ duration: 1.3, ease: \"easeInOut\", repeat: Infinity }}\n        />\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/progress-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "progress"
  ],
  "type": "registry:component"
}