); }; export ProgressWithValueDemo; `,__src__:"src/registry/default/example/extra-new/progress-with-value/progress-with-value-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useEffect, useState } from "react"; import { ProgressWithValue } from "@/components/ui/extension/progress-with-value"; const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100]; const ProgressWithValueDemo = () => { const [value, setValue] = useState(0); useEffect(() => { let index = 0; const interval = setInterval(() => { setValue(PERCENTAGE[index % PERCENTAGE.length]); index++; }, 1000); return () => clearInterval(interval); }, []); return (

); }; export ProgressWithValueDemo; `,__src__:"src/registry/default/example/extra-new/progress-with-value/progress-with-value-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React, { useEffect, useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { ProgressWithValue } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/progress-with-value"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"15"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"30"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"45"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"65"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"80"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"];"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" ProgressWithValueDemo"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" let"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" interval"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"[index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"length"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"++"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(interval);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, []);"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressWithValue"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"follow"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressWithValueDemo;"})]})]})})})}),` `,(0,e.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(p,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(r,{children:"Install the package if you do not have it."}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npm i @radix-ui/react-progress `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" @radix-ui/react-progress"})]})})})}),(0,e.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(a,{name:"progress-with-value",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import * as React from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; import { cn } from "@/lib/utils"; interface ProgressWithValueProps extends React.ComponentPropsWithoutRef { position?: "start" | "start-outside" | "follow" | "end" | "end-outside"; label?: (value?: number | null) => React.ReactNode; valueClassName?: string; } const ProgressWithValue = React.forwardRef< React.ElementRef, ProgressWithValueProps >( ( { className, valueClassName, value, position = "end", label, ...props }, ref, ) => { const valueCommonClass = cn( "absolute -top-0.5 left-0 h-fit px-4 w-full items-center hidden", ); const ProgressValue = () => ( {typeof label === "function" ? label(value) : \`\${value}%\`} ); return (

{position === "start-outside" && } {position === "follow" && } {(position === "start" || position === "end") && } {position === "end-outside" && }

); }, ); ProgressWithValue.displayName = "ProgressWithValue"; export { ProgressWithValue }; `,__src__:"src/registry/default/extension/progress-with-value.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; import { cn } from "@/lib/utils"; interface ProgressWithValueProps extends React.ComponentPropsWithoutRef { position?: "start" | "start-outside" | "follow" | "end" | "end-outside"; label?: (value?: number | null) => React.ReactNode; valueClassName?: string; } const ProgressWithValue = React.forwardRef< React.ElementRef, ProgressWithValueProps >( ( { className, valueClassName, value, position = "end", label, ...props }, ref, ) => { const valueCommonClass = cn( "absolute -top-0.5 left-0 h-fit px-4 w-full items-center hidden", ); const ProgressValue = () => ( {typeof label === "function" ? label(value) : \`\${value}%\`} ); return (

{position === "start-outside" && } {position === "follow" && } {(position === "start" || position === "end") && } {position === "end-outside" && }

); }, ); ProgressWithValue.displayName = "ProgressWithValue"; export { ProgressWithValue }; `,__src__:"src/registry/default/extension/progress-with-value.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@radix-ui/react-progress"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" ProgressWithValueProps"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" extends"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressPrimitive.Root> {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "follow"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end-outside"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" valueClassName"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" ProgressWithValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:""}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressWithValueProps"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { className, valueClassName, value, position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", label, "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"props },"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ref,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" valueCommonClass"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "absolute -top-0.5 left-0 h-fit px-4 w-full items-center hidden"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" ProgressValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "hidden"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "block text-primary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "follow"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(valueCommonClass, "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"flex justify-end text-primary-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(valueCommonClass, "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"flex justify-start text-primary-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(valueCommonClass, "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"flex justify-end text-primary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "block text-primary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" valueClassName,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {typeof"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" label "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "function"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(value) "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"}%`"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"flex items-center gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "relative h-5 w-full overflow-hidden rounded-full bg-secondary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},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:"#6CB6FF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"{ transform: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"`translateX(-${"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"}%)`"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "follow"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"ProgressWithValue.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "ProgressWithValue"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { ProgressWithValue };"})]})]})})})}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})}),(0,e.jsxs)(t,{value:"cli",children:[(0,e.jsx)(r,{children:"Run the following command "}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add progress-with-value `,__npmCommand__:`npx @shadext/cli add progress-with-value `,__yarnCommand__:`npx @shadext/cli add progress-with-value `,__pnpmCommand__:`pnpm dlx @shadext/cli add progress-with-value `,__bunCommand__:`bunx --bun @shadext/cli add progress-with-value `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" progress-with-value"})]})})})})]})]}),` `,(0,e.jsx)(l.h2,{id:"usage",children:"Usage"}),` `,(0,e.jsx)(l.h3,{id:"value-position",children:"Value Position"}),` `,(0,e.jsx)(s,{name:"progress-with-value-position",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useEffect, useState } from "react"; import { ProgressWithValue } from "@/components/ui/extension/progress-with-value"; const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100]; const DEMO: Array< "start" | "start-outside" | "follow" | "end" | "end-outside" > = ["follow", "start", "end", "start-outside", "end-outside"]; const ProgressWithValuePosition = () => { const [value, setValue] = useState(0); useEffect(() => { let index = 0; const interval = setInterval(() => { setValue(PERCENTAGE[index % PERCENTAGE.length]); index++; }, 1000); return () => clearInterval(interval); }, []); return (

{DEMO.map((position) => (

position: {position}

))}

); }; export ProgressWithValuePosition; `,__src__:"src/registry/default/example/extra-new/progress-with-value/usage/progress-with-value-position.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useEffect, useState } from "react"; import { ProgressWithValue } from "@/components/ui/extension/progress-with-value"; const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100]; const DEMO: Array< "start" | "start-outside" | "follow" | "end" | "end-outside" > = ["follow", "start", "end", "start-outside", "end-outside"]; const ProgressWithValuePosition = () => { const [value, setValue] = useState(0); useEffect(() => { let index = 0; const interval = setInterval(() => { setValue(PERCENTAGE[index % PERCENTAGE.length]); index++; }, 1000); return () => clearInterval(interval); }, []); return (

{DEMO.map((position) => (

position: {position}

))}

); }; export ProgressWithValuePosition; `,__src__:"src/registry/default/example/extra-new/progress-with-value/usage/progress-with-value-position.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React, { useEffect, useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { ProgressWithValue } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/progress-with-value"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"15"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"30"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"45"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"65"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"80"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"];"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" DEMO"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" Array"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "start-outside"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "follow"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "end-outside"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"> "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"follow"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"start"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"end"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"start-outside"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"end-outside"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"];"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" ProgressWithValuePosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" let"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" interval"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"[index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"length"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"++"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(interval);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full space-y-2 px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"DEMO"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" position: <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"text-blue-500"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressWithValue"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ))"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressWithValuePosition;"})]})]})})})}),` `,(0,e.jsx)(l.h3,{id:"custom-label",children:"Custom Label"}),` `,(0,e.jsx)(s,{name:"progress-with-value-label",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useEffect, useState } from "react"; import { ProgressWithValue } from "@/components/ui/extension/progress-with-value"; const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100]; const LABEL_DEMOS = [ { title: "No Label", label: () => null, }, { title: "Custom label", label: (value?: number | null) => ( current: {value}% ), }, ]; const ProgressWithValueLabel = () => { const [value, setValue] = useState(20); useEffect(() => { let index = 0; const interval = setInterval(() => { setValue(PERCENTAGE[index % PERCENTAGE.length]); index++; }, 1000); return () => clearInterval(interval); }, []); return (

{LABEL_DEMOS.map((demo) => (

{demo.title}

))}

); }; export ProgressWithValueLabel; `,__src__:"src/registry/default/example/extra-new/progress-with-value/usage/progress-with-value-label.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useEffect, useState } from "react"; import { ProgressWithValue } from "@/components/ui/extension/progress-with-value"; const PERCENTAGE = [0, 10, 15, 30, 45, 50, 65, 80, 90, 100]; const LABEL_DEMOS = [ { title: "No Label", label: () => null, }, { title: "Custom label", label: (value?: number | null) => ( current: {value}% ), }, ]; const ProgressWithValueLabel = () => { const [value, setValue] = useState(20); useEffect(() => { let index = 0; const interval = setInterval(() => { setValue(PERCENTAGE[index % PERCENTAGE.length]); index++; }, 1000); return () => clearInterval(interval); }, []); return (

{LABEL_DEMOS.map((demo) => (

{demo.title}

))}

); }; export ProgressWithValueLabel; `,__src__:"src/registry/default/example/extra-new/progress-with-value/usage/progress-with-value-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React, { useEffect, useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { ProgressWithValue } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/progress-with-value"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"15"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"30"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"45"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"65"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"80"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"];"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" LABEL_DEMOS"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"No Label"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:": () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"Custom label"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:": ("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"text-amber-400"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">current: "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"%"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ),"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"];"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" ProgressWithValueLabel"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" let"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" interval"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" setValue"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"[index "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" PERCENTAGE"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"length"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"++"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(interval);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full space-y-2 px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"LABEL_DEMOS"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"demo"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"demo.title"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"text-blue-500"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"demo.title"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"ProgressWithValue"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" position"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"follow"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"demo.label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ))"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ProgressWithValueLabel;"})]})]})})})})]})}function D(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(C,{...n})}):C(n)}function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return E(b);})(); ;return Component;

Progress With Value

Installation

Run the following command

Usage

Value Position

Custom Label

Table of Content

Github