Progress

import { Progress } from "@/components/progress"export function ProgressValues() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-4">        <Progress value={0} />        <Progress value={25} className="w-full" />        <Progress value={50} />        <Progress value={75} />        <Progress value={100} />      </div>    </div>  )}

import { Field, FieldLabel } from "@/components/field"import { Progress } from "@/components/progress"export function ProgressWithLabel() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="progress-upload">          <span>Upload progress</span>          <span className="ml-auto">66%</span>        </FieldLabel>        <Progress value={66} className="w-full" id="progress-upload" />      </Field>    </div>  )}

import * as React from "react"import { Progress } from "@/components/progress"import { Slider } from "@/components/slider"export function ProgressControlled() {  const [value, setValue] = React.useState([50])  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-4">        <Progress value={value[0]} className="w-full" />        <Slider          value={value}          onValueChange={setValue}          min={0}          max={100}          step={1}        />      </div>    </div>  )}

import * as React from "react"import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "@/components/item"import { Progress } from "@/components/progress"import { FileIcon } from "lucide-react"export function FileUploadList() {  const files = React.useMemo(    () => [      {        id: "1",        name: "document.pdf",        progress: 45,        timeRemaining: "2m 30s",      },      {        id: "2",        name: "presentation.pptx",        progress: 78,        timeRemaining: "45s",      },      {        id: "3",        name: "spreadsheet.xlsx",        progress: 12,        timeRemaining: "5m 12s",      },      {        id: "4",        name: "image.jpg",        progress: 100,        timeRemaining: "Complete",      },    ],    []  )  return (    <div className="flex flex-col gap-6">      <ItemGroup>        {files.map((file) => (          <Item key={file.id} size="xs" className="px-0">            <ItemMedia variant="icon">              <FileIcon className="size-5" />            </ItemMedia>            <ItemContent className="inline-block truncate">              <ItemTitle className="inline">{file.name}</ItemTitle>            </ItemContent>            <ItemContent>              <Progress value={file.progress} className="w-32" />            </ItemContent>            <ItemActions className="w-16 justify-end">              <span className="text-sm text-muted-foreground">                {file.timeRemaining}              </span>            </ItemActions>          </Item>        ))}      </ItemGroup>    </div>  )}