var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},y=(n,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of _(e))!P.call(n,s)&&s!==r&&c(n,s,{get:()=>e[s],enumerable:!(a=f(e,s))||a.enumerable});return n};var R=(n,e,r)=>(r=n!=null?u(B(n)):{},y(e||!n||!n.__esModule?c(r,"default",{value:n,enumerable:!0}):r,n)),C=n=>y(c({},"__esModule",{value:!0}),n);var F=x((w,E)=>{E.exports=_jsx_runtime});var v={};b(v,{default:()=>m});var l=R(F());function g(n){let e={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...n.components},{ComponentPreview:r,ComponentSource:a,Step:s,Steps:d,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return r||o("ComponentPreview",!0),a||o("ComponentSource",!0),s||o("Step",!0),d||o("Steps",!0),p||o("Tabs",!0),t||o("TabsContent",!0),h||o("TabsList",!0),i||o("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(r,{name:"progress-demo",children:[(0,l.jsx)(e.figure,{__src__:"registry/miami/example/progress-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import { Progress } from '~/components/ui/progress' export function ProgressDemo() { const [progress, setProgress] = React.useState(13) React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500) return () => clearTimeout(timer) }, []) return } `,__src__:"registry/miami/example/progress-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/progress'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" timer"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(timer)"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{progress} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-3/5"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(e.figure,{__src__:"registry/default/example/progress-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import { Progress } from '~/components/ui/progress' export function ProgressDemo() { const [progress, setProgress] = React.useState(13) React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500) return () => clearTimeout(timer) }, []) return } `,__src__:"registry/default/example/progress-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/progress'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" timer"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(timer)"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{progress} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-3/5"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add progress `,__npmCommand__:`npx nyxb@latest add progress `,__yarnCommand__:`npx nyxb@latest add progress `,__pnpmCommand__:`pnpm dlx nyxb@latest add progress `,__bunCommand__:`bunx --bun nyxb@latest add progress `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" progress"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(s,{children:"Install the following dependencies:"}),(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:` @radix-ui/react-progress `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" @radix-ui/react-progress"})})})})}),(0,l.jsx)(s,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(a,{name:"progress",children:[(0,l.jsx)(e.figure,{__src__:"registry/miami/ui/progress.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import * as ProgressPrimitive from '@radix-ui/react-progress' import { ny } from '~/lib/utils' const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } `,__src__:"registry/miami/ui/progress.tsx",__style__:"miami",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ProgressPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-progress'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" Progress"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProgressPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'bg-secondary relative h-4 w-full overflow-hidden rounded-full'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-primary size-full flex-1 transition-all"'})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ transform: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`translateX(-${"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" -"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}%)`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Progress.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Progress }"})]})]})})}),(0,l.jsx)(e.figure,{__src__:"registry/default/ui/progress.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import * as ProgressPrimitive from '@radix-ui/react-progress' import { ny } from '~/lib/utils' const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } `,__src__:"registry/default/ui/progress.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ProgressPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-progress'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" Progress"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProgressPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'bg-secondary relative h-4 w-full overflow-hidden rounded-full'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-primary size-full flex-1 transition-all"'})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ transform: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`translateX(-${"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" -"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}%)`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Progress.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Progress }"})]})]})})})]}),(0,l.jsx)(s,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Progress } from "~/components/ui/progress" `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "~/components/ui/progress"'})]})})})}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"33"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]})})})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(g,{...n})}):g(n)}function o(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})(); ;return Component;