var Component=(()=>{var D=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var b=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var r in l)a(n,r,{get:l[r],enumerable:!0})},p=(n,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of C(l))!P.call(n,s)&&s!==r&&a(n,s,{get:()=>l[s],enumerable:!(o=f(l,s))||o.enumerable});return n};var A=(n,l,r)=>(r=n!=null?D(B(n)):{},p(l||!n||!n.__esModule?a(r,"default",{value:n,enumerable:!0}):r,n)),R=n=>p(a({},"__esModule",{value:!0}),n);var g=b((k,y)=>{y.exports=_jsx_runtime});var v={};x(v,{default:()=>m});var e=A(g());function u(n){let l={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...n.components},{ComponentPreview:r,ComponentSource:o,Step:s,Steps:i,Tabs:d,TabsContent:F,TabsList:h,TabsTrigger:t}=l;return r||c("ComponentPreview",!0),o||c("ComponentSource",!0),s||c("Step",!0),i||c("Steps",!0),d||c("Tabs",!0),F||c("TabsContent",!0),h||c("TabsList",!0),t||c("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(r,{name:"progress-demo",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/example/progress-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" ProgressDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"13"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" timer"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"66"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"500"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" clearTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(timer);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Progress"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-[60%]"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/example/progress-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" ProgressDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"13"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" timer"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"66"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"500"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" clearTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(timer);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Progress"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-[60%]"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/example/progress-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" ProgressDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"13"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" timer"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" setProgress"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"66"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"500"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" clearTimeout"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(timer);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Progress"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-[60%]"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(F,{value:"cli",children:(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"bunx"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" --bun"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @uplusion23/forge-ui"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" progress"})]})})})})}),(0,e.jsx)(F,{value:"manual",children:(0,e.jsxs)(i,{children:[(0,e.jsx)(s,{children:"Install the following dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @radix-ui/react-progress"})]})})})}),(0,e.jsx)(s,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(o,{name:"progress",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/ui/progress.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative h-4 w-full overflow-hidden rounded-full bg-secondary"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"h-full w-full flex-1 bg-primary transition-all"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"{ transform: "}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"`translateX(-${"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"}%)`"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Progress.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/ui/progress.tsx",__style__:"austin","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative h-2 w-full overflow-hidden rounded-full bg-primary/20"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"h-full w-full flex-1 bg-primary transition-all"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"{ transform: "}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"`translateX(-${"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"}%)`"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Progress.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/ui/progress.tsx",__style__:"dc","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-progress"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Progress"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative h-2 w-full overflow-hidden rounded-full bg-primary/20"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"h-full w-full flex-1 bg-primary transition-all"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"{ transform: "}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"`translateX(-${"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:"}%)`"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Progress.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ProgressPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress };"})]})]})})})]}),(0,e.jsx)(s,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Progress } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/progress"'})]})})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Progress"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:"33"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]})})})})]})}function m(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return R(v);})(); ;return Component;