const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(s){const r={a:"a",code:"code",div:"div",h2:"h2",pre:"pre",span:"span",...s.components},{ComponentPreview:c,ComponentSource:o,Step:a,Steps:i,Tabs:t,TabsContent:d,TabsList:p,TabsTrigger:h}=r;return c||_missingMdxReference("ComponentPreview",!0),o||_missingMdxReference("ComponentSource",!0),a||_missingMdxReference("Step",!0),i||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),d||_missingMdxReference("TabsContent",!0),p||_missingMdxReference("TabsList",!0),h||_missingMdxReference("TabsTrigger",!0),n(e,{children:[l(c,{name:"progress-1",description:"A progress bar component.",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"'use client'\n \nimport { Button } from '~/components/button'\nimport { Input } from '~/components/input'\nimport { Label } from '~/components/label'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '~/components/sheet'\n \nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n \ntype SheetSide = (typeof SHEET_SIDES)[number]\n \nexport function SheetSide() {\n return (\n

\n {SHEET_SIDES.map((side) => (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n

\n \n Name\n \n \n

\n \n Username\n \n \n

\n \n \n \n \n \n \n \n ))}\n

\n )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Button "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/button'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Input "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/input'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" Sheet"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetClose"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetContent"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetDescription"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetFooter"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetHeader"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetTitle"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" SheetTrigger"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/sheet'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"const"}),l(r.span,{style:{color:"#FAB387"},children:" SHEET_SIDES"}),l(r.span,{style:{color:"#94E2D5"},children:" ="}),l(r.span,{style:{color:"#CDD6F4"},children:" ["}),l(r.span,{style:{color:"#A6E3A1"},children:"'top'"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#A6E3A1"},children:" 'right'"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#A6E3A1"},children:" 'bottom'"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#A6E3A1"},children:" 'left'"}),l(r.span,{style:{color:"#CDD6F4"},children:"] "}),l(r.span,{style:{color:"#CBA6F7"},children:"as"}),l(r.span,{style:{color:"#CBA6F7"},children:" const"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"type"}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" SheetSide "}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" ("}),l(r.span,{style:{color:"#94E2D5"},children:"typeof"}),l(r.span,{style:{color:"#FAB387",fontStyle:"italic"},children:" SHEET_SIDES"}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:")["}),l(r.span,{style:{color:"#CBA6F7"},children:"number"}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"]"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SheetSide"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:" return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid grid-cols-2 gap-2'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#FAB387"},children:"SHEET_SIDES"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"map"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#9399B2"},children:"("}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"side"}),l(r.span,{style:{color:"#9399B2"},children:")"}),l(r.span,{style:{color:"#CBA6F7"},children:" =>"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Sheet"}),l(r.span,{style:{color:"#F9E2AF"},children:" key"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"side"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetTrigger"}),l(r.span,{style:{color:"#F9E2AF"},children:" asChild"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Button"}),l(r.span,{style:{color:"#F9E2AF"},children:" variant"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'outline'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"side"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetContent"}),l(r.span,{style:{color:"#F9E2AF"},children:" side"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"side"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetHeader"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetTitle"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Edit profile"}),l(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetDescription"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:" Make changes to your profile here. Click save when you're done."})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid gap-4 py-4'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid grid-cols-4 items-center gap-4'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'name'"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'text-right'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:" Name"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Input"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'name'"}),l(r.span,{style:{color:"#F9E2AF"},children:" value"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Pedro Duarte'"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'col-span-3'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid grid-cols-4 items-center gap-4'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'username'"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'text-right'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:" Username"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Input"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'username'"}),l(r.span,{style:{color:"#F9E2AF"},children:" value"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'@peduarte'"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'col-span-3'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetFooter"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"SheetClose"}),l(r.span,{style:{color:"#F9E2AF"},children:" asChild"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Button"}),l(r.span,{style:{color:"#F9E2AF"},children:" type"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'submit'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Save changes"}),l(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" ))"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"'use client'\n \nimport { Button } from '~/components/button'\nimport { Input } from '~/components/input'\nimport { Label } from '~/components/label'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '~/components/sheet'\n \nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n \ntype SheetSide = (typeof SHEET_SIDES)[number]\n \nexport function SheetSide() {\n return (\n

\n {SHEET_SIDES.map((side) => (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n

\n \n Name\n \n \n

\n \n Username\n \n \n

\n \n \n \n \n \n \n \n ))}\n

\n )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Button } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/button'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Input } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/input'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" Sheet,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetClose,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetContent,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetDescription,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetFooter,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetHeader,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetTitle,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" SheetTrigger,"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"} "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/sheet'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"const"}),l(r.span,{style:{color:"#005CC5"},children:" SHEET_SIDES"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#24292E"},children:" ["}),l(r.span,{style:{color:"#032F62"},children:"'top'"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#032F62"},children:"'right'"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#032F62"},children:"'bottom'"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#032F62"},children:"'left'"}),l(r.span,{style:{color:"#24292E"},children:"] "}),l(r.span,{style:{color:"#D73A49"},children:"as"}),l(r.span,{style:{color:"#D73A49"},children:" const"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"type"}),l(r.span,{style:{color:"#6F42C1"},children:" SheetSide"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#24292E"},children:" ("}),l(r.span,{style:{color:"#D73A49"},children:"typeof"}),l(r.span,{style:{color:"#005CC5"},children:" SHEET_SIDES"}),l(r.span,{style:{color:"#24292E"},children:")["}),l(r.span,{style:{color:"#005CC5"},children:"number"}),l(r.span,{style:{color:"#24292E"},children:"]"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" SheetSide"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:" return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid grid-cols-2 gap-2'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" {"}),l(r.span,{style:{color:"#005CC5"},children:"SHEET_SIDES"}),l(r.span,{style:{color:"#24292E"},children:"."}),l(r.span,{style:{color:"#6F42C1"},children:"map"}),l(r.span,{style:{color:"#24292E"},children:"(("}),l(r.span,{style:{color:"#E36209"},children:"side"}),l(r.span,{style:{color:"#24292E"},children:") "}),l(r.span,{style:{color:"#D73A49"},children:"=>"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Sheet"}),l(r.span,{style:{color:"#6F42C1"},children:" key"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{side}>"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetTrigger"}),l(r.span,{style:{color:"#6F42C1"},children:" asChild"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Button"}),l(r.span,{style:{color:"#6F42C1"},children:" variant"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'outline'"}),l(r.span,{style:{color:"#24292E"},children:">{side}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetContent"}),l(r.span,{style:{color:"#6F42C1"},children:" side"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{side}>"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetHeader"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetTitle"}),l(r.span,{style:{color:"#24292E"},children:">Edit profile"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetDescription"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" Make changes to your profile here. Click save when you're done."})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid gap-4 py-4'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid grid-cols-4 items-center gap-4'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'name'"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'text-right'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" Name"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Input"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'name'"}),l(r.span,{style:{color:"#6F42C1"},children:" value"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Pedro Duarte'"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'col-span-3'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid grid-cols-4 items-center gap-4'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'username'"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'text-right'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" Username"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Input"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'username'"}),l(r.span,{style:{color:"#6F42C1"},children:" value"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'@peduarte'"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'col-span-3'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetFooter"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"SheetClose"}),l(r.span,{style:{color:"#6F42C1"},children:" asChild"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Button"}),l(r.span,{style:{color:"#6F42C1"},children:" type"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'submit'"}),l(r.span,{style:{color:"#24292E"},children:">Save changes"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" ))}"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h2,{id:"installation",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:l(r.span,{className:"icon icon-link"})}),"Installation"]}),"\n",n(t,{children:[n(p,{children:[l(h,{value:"cli",children:"CLI"}),l(h,{value:"manual",children:"Manual"})]}),l(d,{value:"cli",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npx shadcn@latest add progress",__npmCommand__:"npx shadcn@latest add progress",__yarnCommand__:"npx shadcn@latest add progress",__pnpmCommand__:"pnpm dlx shadcn@latest add progress",__bunCommand__:"bunx --bun shadcn@latest add progress",children:l(r.code,{"data-language":"bash","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npx"}),l(r.span,{style:{color:"#A6E3A1"},children:" shadcn@latest"}),l(r.span,{style:{color:"#A6E3A1"},children:" add"}),l(r.span,{style:{color:"#A6E3A1"},children:" progress"})]})})}),l(r.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npx shadcn@latest add progress",__npmCommand__:"npx shadcn@latest add progress",__yarnCommand__:"npx shadcn@latest add progress",__pnpmCommand__:"pnpm dlx shadcn@latest add progress",__bunCommand__:"bunx --bun shadcn@latest add progress",children:l(r.code,{"data-language":"bash","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"npx"}),l(r.span,{style:{color:"#032F62"},children:" shadcn@latest"}),l(r.span,{style:{color:"#032F62"},children:" add"}),l(r.span,{style:{color:"#032F62"},children:" progress"})]})})})]})}),l(d,{value:"manual",children:n(i,{children:[l(a,{children:"Install the following dependencies:"}),n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npm install @radix-ui/react-progress",__npmCommand__:"npm install @radix-ui/react-progress",__yarnCommand__:"yarn add @radix-ui/react-progress",__pnpmCommand__:"pnpm add @radix-ui/react-progress",__bunCommand__:"bun add @radix-ui/react-progress",children:l(r.code,{"data-language":"bash","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npm"}),l(r.span,{style:{color:"#A6E3A1"},children:" install"}),l(r.span,{style:{color:"#A6E3A1"},children:" @radix-ui/react-progress"})]})})}),l(r.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npm install @radix-ui/react-progress",__npmCommand__:"npm install @radix-ui/react-progress",__yarnCommand__:"yarn add @radix-ui/react-progress",__pnpmCommand__:"pnpm add @radix-ui/react-progress",__bunCommand__:"bun add @radix-ui/react-progress",children:l(r.code,{"data-language":"bash","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"npm"}),l(r.span,{style:{color:"#032F62"},children:" install"}),l(r.span,{style:{color:"#032F62"},children:" @radix-ui/react-progress"})]})})})]}),l(a,{children:"Copy and paste the following code into your project."}),n(o,{name:"progress",children:[n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// index.ts\n \nexport * from './progress'",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// index.ts"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#F38BA8"},children:" *"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" './progress'"})]})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// index.ts\n \nexport * from './progress'",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6A737D"},children:"// index.ts"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#005CC5"},children:" *"}),l(r.span,{style:{color:"#D73A49"},children:" from"}),l(r.span,{style:{color:"#032F62"},children:" './progress'"})]})]})})]}),n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// progress.tsx\n \n'use client'\n \nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Progress = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, value, ...props }, ref) => (\n \n \n \n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n \nexport { Progress }",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// progress.tsx"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#F38BA8"},children:" *"}),l(r.span,{style:{color:"#CBA6F7"},children:" as"}),l(r.span,{style:{color:"#CDD6F4"},children:" React "}),l(r.span,{style:{color:"#CBA6F7"},children:"from"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#F38BA8"},children:" *"}),l(r.span,{style:{color:"#CBA6F7"},children:" as"}),l(r.span,{style:{color:"#CDD6F4"},children:" ProgressPrimitive "}),l(r.span,{style:{color:"#CBA6F7"},children:"from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '@radix-ui/react-progress'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" cn "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"const"}),l(r.span,{style:{color:"#FAB387"},children:" Progress"}),l(r.span,{style:{color:"#94E2D5"},children:" ="}),l(r.span,{style:{color:"#CDD6F4"},children:" React"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"forwardRef"}),l(r.span,{style:{color:"#94E2D5"},children:"<"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" React"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"ElementRef"}),l(r.span,{style:{color:"#94E2D5"},children:""}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" React"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"ComponentPropsWithoutRef"}),l(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#9399B2"},children:"({"}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" className"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" value"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#94E2D5"},children:" ..."}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"props"}),l(r.span,{style:{color:"#9399B2"},children:" },"}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" ref"}),l(r.span,{style:{color:"#9399B2"},children:")"}),l(r.span,{style:{color:"#CBA6F7"},children:" =>"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"ProgressPrimitive.Root"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:" ref"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"ref"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),l(r.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#A6E3A1"},children:" 'relative h-4 w-full overflow-hidden rounded-full bg-secondary'"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:" className"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:" )"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#94E2D5"},children:"..."}),l(r.span,{style:{color:"#CDD6F4"},children:"props"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#94E2D5"},children:" >"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"ProgressPrimitive.Indicator"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'h-full w-full flex-1 bg-primary transition-all'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:" style"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{{"}),l(r.span,{style:{color:"#CDD6F4"},children:" transform"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#A6E3A1"},children:" `translateX(-"}),l(r.span,{style:{color:"#9399B2"},children:"${"}),l(r.span,{style:{color:"#FAB387"},children:"100"}),l(r.span,{style:{color:"#94E2D5"},children:" -"}),l(r.span,{style:{color:"#A6E3A1"},children:" ("}),l(r.span,{style:{color:"#CDD6F4"},children:"value"}),l(r.span,{style:{color:"#94E2D5"},children:" ||"}),l(r.span,{style:{color:"#FAB387"},children:" 0"}),l(r.span,{style:{color:"#A6E3A1"},children:")"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#A6E3A1"},children:"%)`"}),l(r.span,{style:{color:"#9399B2"},children:" }}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"))"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"Progress"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"displayName "}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#CDD6F4"},children:" ProgressPrimitive"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"Root"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"displayName"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Progress "}),l(r.span,{style:{color:"#9399B2"},children:"}"})]})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// progress.tsx\n \n'use client'\n \nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Progress = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, value, ...props }, ref) => (\n \n \n \n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n \nexport { Progress }",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6A737D"},children:"// progress.tsx"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#005CC5"},children:" *"}),l(r.span,{style:{color:"#D73A49"},children:" as"}),l(r.span,{style:{color:"#24292E"},children:" React "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" 'react'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#005CC5"},children:" *"}),l(r.span,{style:{color:"#D73A49"},children:" as"}),l(r.span,{style:{color:"#24292E"},children:" ProgressPrimitive "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '@radix-ui/react-progress'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { cn } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"const"}),l(r.span,{style:{color:"#005CC5"},children:" Progress"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#24292E"},children:" React.forwardRef"}),l(r.span,{style:{color:"#D73A49"},children:"<"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" React.ElementRef"}),l(r.span,{style:{color:"#D73A49"},children:""}),l(r.span,{style:{color:"#24292E"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" React.ComponentPropsWithoutRef"}),l(r.span,{style:{color:"#D73A49"},children:""})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:">"}),l(r.span,{style:{color:"#24292E"},children:"(({ "}),l(r.span,{style:{color:"#E36209"},children:"className"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#E36209"},children:"value"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#E36209"},children:"props"}),l(r.span,{style:{color:"#24292E"},children:" }, "}),l(r.span,{style:{color:"#E36209"},children:"ref"}),l(r.span,{style:{color:"#24292E"},children:") "}),l(r.span,{style:{color:"#D73A49"},children:"=>"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"ProgressPrimitive.Root"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:" ref"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{"}),l(r.span,{style:{color:"#6F42C1"},children:"cn"}),l(r.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#032F62"},children:" 'relative h-4 w-full overflow-hidden rounded-full bg-secondary'"}),l(r.span,{style:{color:"#24292E"},children:","})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" className"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" )}"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" {"}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#24292E"},children:"props}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" >"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"ProgressPrimitive.Indicator"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'h-full w-full flex-1 bg-primary transition-all'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:" style"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{{ transform: "}),l(r.span,{style:{color:"#032F62"},children:"`translateX(-${"}),l(r.span,{style:{color:"#005CC5"},children:"100"}),l(r.span,{style:{color:"#D73A49"},children:" -"}),l(r.span,{style:{color:"#032F62"},children:" ("}),l(r.span,{style:{color:"#24292E"},children:"value"}),l(r.span,{style:{color:"#D73A49"},children:" ||"}),l(r.span,{style:{color:"#005CC5"},children:" 0"}),l(r.span,{style:{color:"#032F62"},children:")"}),l(r.span,{style:{color:"#032F62"},children:"}%)`"}),l(r.span,{style:{color:"#24292E"},children:" }}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"))"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"Progress.displayName "}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:" ProgressPrimitive.Root.displayName"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#24292E"},children:" { Progress }"})]})]})})]})]}),l(a,{children:"Update the import paths to match your project setup."})]})})]}),"\n",n(r.h2,{id:"usage",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:l(r.span,{className:"icon icon-link"})}),"Usage"]}),"\n",n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:'import { Progress } from "@/components/ui/progress"',children:l(r.code,{"data-language":"tsx","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Progress "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:' "@/components/ui/progress"'})]})})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:'import { Progress } from "@/components/ui/progress"',children:l(r.code,{"data-language":"tsx","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Progress } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:' "@/components/ui/progress"'})]})})})]}),"\n",n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"",children:l(r.code,{"data-language":"tsx","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"<"}),l(r.span,{style:{color:"#F5C2E7"},children:"Progress"}),l(r.span,{style:{color:"#F9E2AF"},children:" value"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#FAB387"},children:"33"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]})})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"",children:l(r.code,{"data-language":"tsx","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"<"}),l(r.span,{style:{color:"#005CC5"},children:"Progress"}),l(r.span,{style:{color:"#6F42C1"},children:" value"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{"}),l(r.span,{style:{color:"#005CC5"},children:"33"}),l(r.span,{style:{color:"#24292E"},children:"} />"})]})})})]})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}