{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-threed",
  "title": "3D progress",
  "description": "Styled progress: the 3D set. 5 decorative progress variations (RaisedProgress, TubeProgress, BevelProgress, GlossProgress, InsetProgress) 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-threed.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/* 3D progress family: 5 fills carrying a depth illusion (highlight plus shadow). Colour comes ONLY from tokens (alpha via color-mix, oklab). value is 0-100, clamped. framer-motion drives the fill width; the fill settles instantly under reduced-motion. */\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/* Raised: dolgu ustte highlight, altta golge ile kabarik gorunur. */\nexport function RaisedProgress({ 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-primary shadow-[inset_0_1.5px_0_color-mix(in_oklab,var(--color-primary-foreground)_45%,transparent),inset_0_-2px_2px_color-mix(in_oklab,var(--color-foreground)_30%,transparent)]\"\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/* Tube: the impression of a cylinder/tube - a vertical light-dark token gradient\n   over the fill. */\nexport function TubeProgress({ 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-primary [background-image:linear-gradient(to_bottom,color-mix(in_oklab,var(--color-primary-foreground)_42%,transparent)_0%,transparent_45%,color-mix(in_oklab,var(--color-foreground)_28%,transparent)_100%)]\"\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/* Bevel: capraz inset highlight/golge ile pahli (beveled) kenar. */\nexport function BevelProgress({ 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(\"relative w-56 max-w-full overflow-hidden rounded-sm bg-secondary\", track[size], className)}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-y-0 left-0 rounded-sm bg-primary shadow-[inset_1.5px_1.5px_0_color-mix(in_oklab,var(--color-primary-foreground)_40%,transparent),inset_-1.5px_-1.5px_0_color-mix(in_oklab,var(--color-foreground)_32%,transparent)]\"\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/* Gloss: dolgunun ustunde parlak cam serit (ust yariyi kaplayan token highlight). */\nexport function GlossProgress({ 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 overflow-hidden rounded-full bg-primary\"\n        initial={reduce ? false : { width: 0 }}\n        animate={{ width: `${v}%` }}\n        transition={reduce ? undefined : { duration: 0.8, ease: \"easeOut\" }}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-full [background-image:linear-gradient(to_bottom,color-mix(in_oklab,var(--color-primary-foreground)_55%,transparent),transparent)]\"\n        />\n      </motion.span>\n    </div>\n  )\n}\n\n/* Inset: the track looks carved and the fill sits raised on top of it. */\nexport function InsetProgress({ 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(\n        trackBase,\n        track[size],\n        \"shadow-[inset_0_1.5px_2px_color-mix(in_oklab,var(--color-foreground)_25%,transparent)]\",\n        className\n      )}\n      {...props}\n    >\n      <motion.span\n        className=\"absolute inset-y-0 left-0 rounded-full bg-primary shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-primary-foreground)_40%,transparent),0_1px_2px_color-mix(in_oklab,var(--color-foreground)_25%,transparent)]\"\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",
      "type": "registry:component",
      "target": "components/ui/progress-threed.tsx"
    }
  ],
  "categories": [
    "styled",
    "progress"
  ],
  "type": "registry:component"
}