var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!u.call(n,o)&&o!==r&&t(n,o,{get:()=>e[o],enumerable:!(s=F(e,o))||s.enumerable});return n};var g=(n,e,r)=>(r=n!=null?h(E(n)):{},a(e||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),C=n=>a(t({},"__esModule",{value:!0}),n);var d=f((R,i)=>{i.exports=_jsx_runtime});var _={};m(_,{default:()=>D,frontmatter:()=>P});var l=g(d()),P={title:"Progress",description:"Let's you users know how long to wait.",lastUpdated:"05 Apr, 2025",links:{api_reference:"https://www.radix-ui.com/docs/primitives/components/progress#api-reference",source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Progress.tsx"}};function p(n){let e=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",h4:"h4",h3:"h3"},n.components),{ComponentShowcase:r,ComponentInstall:s,ComponentSource:o}=e;return s||c("ComponentInstall",!0),s.Cli||c("ComponentInstall.Cli",!0),s.Manual||c("ComponentInstall.Manual",!0),r||c("ComponentShowcase",!0),o||c("ComponentSource",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r,{name:"progress-style-default",children:(0,l.jsx)(e.figure,{__src__:"preview/components/progress-style-default.tsx",__rawString__:`"use client"; import * as React from "react"; import { Progress } from "@/components/retroui/Progress"; export default function ProgressDemo() { const [progress, setProgress] = React.useState(13); React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500); return () => clearTimeout(timer); }, []); return ; } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Progress"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" [progress, setProgress] "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" timer "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(timer);"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, []);"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{progress} "}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"w-[60%]"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,l.jsxs)(s,{children:[(0,l.jsx)(s.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/progress.json'"}),(0,l.jsxs)(s.Manual,{children:[(0,l.jsx)(e.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(e.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-progress"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" lucide-react"})]})})})}),(0,l.jsx)("br",{}),(0,l.jsx)(e.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,l.jsx)(o,{name:"progress",children:(0,l.jsx)(e.figure,{__src__:"/vercel/path0/components/retroui/Progress.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ProgressPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-progress"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Progress "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ProgressPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"relative h-4 w-full overflow-hidden bg-background border-2"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-full w-full flex-1 bg-primary transition-all"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" style"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{{ transform"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" `translateX(-"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"${"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" -"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" (value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" ||"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"%)`"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"Progress.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ProgressPrimitive.Root.displayName;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Progress };"})]})]})})})})]})]}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h2,{id:"examples",children:"Examples"}),` `,(0,l.jsx)(e.h3,{id:"default",children:"Default"}),` `,(0,l.jsx)(r,{name:"progress-style-default",children:(0,l.jsx)(e.figure,{__src__:"preview/components/progress-style-default.tsx",__rawString__:`"use client"; import * as React from "react"; import { Progress } from "@/components/retroui/Progress"; export default function ProgressDemo() { const [progress, setProgress] = React.useState(13); React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500); return () => clearTimeout(timer); }, []); return ; } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Progress"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" [progress, setProgress] "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" timer "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(timer);"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, []);"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{progress} "}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"w-[60%]"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(p,n)})):p(n)}var D=x;function c(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(_);})(); ;return Component;