ProgressBar

1"use client";2
3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ progress: { width: 256 } });6
7export function Basic() {8  return (9    <ProgressBar aria-label="Loading" xstyle={styles.progress} value={60}>10      <ProgressBar.Label>Loading</ProgressBar.Label>11      <ProgressBar.Output />12      <ProgressBar.Track>13        <ProgressBar.Fill />14      </ProgressBar.Track>15    </ProgressBar>16  );17}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },7});8export function Sizes() {9  return (10    <div {...stylex.props(styles.column)}>11      <ProgressBar aria-label="Small" size="sm" value={40}>12        <ProgressBar.Label>Small</ProgressBar.Label>13        <ProgressBar.Output />14        <ProgressBar.Track>15          <ProgressBar.Fill />16        </ProgressBar.Track>17      </ProgressBar>18      <ProgressBar aria-label="Medium" size="md" value={60}>19        <ProgressBar.Label>Medium</ProgressBar.Label>20        <ProgressBar.Output />21        <ProgressBar.Track>22          <ProgressBar.Fill />23        </ProgressBar.Track>24      </ProgressBar>25      <ProgressBar aria-label="Large" size="lg" value={80}>26        <ProgressBar.Label>Large</ProgressBar.Label>27        <ProgressBar.Output />28        <ProgressBar.Track>29          <ProgressBar.Fill />30        </ProgressBar.Track>31      </ProgressBar>32    </div>33  );34}35export default Sizes;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },7});8export function Colors() {9  return (10    <div {...stylex.props(styles.column)}>11      {(["default", "accent", "success", "warning", "danger"] as const).map((color) => (12        <ProgressBar key={color} color={color} value={50}>13          <ProgressBar.Label>14            {color[0]?.toUpperCase()}15            {color.slice(1)}16          </ProgressBar.Label>17          <ProgressBar.Output />18          <ProgressBar.Track>19            <ProgressBar.Fill />20          </ProgressBar.Track>21        </ProgressBar>22      ))}23    </div>24  );25}26export default Colors;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ progress: { width: 256 } });6export function WithoutLabel() {7  return (8    <ProgressBar aria-label="Loading progress" xstyle={styles.progress} value={45}>9      <ProgressBar.Track>10        <ProgressBar.Fill />11      </ProgressBar.Track>12    </ProgressBar>13  );14}15export default WithoutLabel;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0); null is Base UI's indeterminate value.3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ progress: { width: 256 } });6export function Indeterminate() {7  return (8    <ProgressBar aria-label="Loading" xstyle={styles.progress} value={null}>9      <ProgressBar.Label>Loading...</ProgressBar.Label>10      <ProgressBar.Track>11        <ProgressBar.Fill />12      </ProgressBar.Track>13    </ProgressBar>14  );15}16export default Indeterminate;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0); native Base UI range and selection contracts.3import { NumberField, ProgressBar, Select, Separator } from "@lenso/ui";4import { useId, useState } from "react";5import * as stylex from "@stylexjs/stylex";6const formatStyleOptions = [7  { label: "Currency", value: "currency" },8  { label: "Percent", value: "percent" },9  { label: "Decimal", value: "decimal" },10  { label: "Unit", value: "unit" },11];12const formatOptionsMap: Record<string, Intl.NumberFormatOptions> = {13  currency: { currency: "USD", style: "currency" },14  decimal: { style: "decimal" },15  percent: { style: "percent" },16  unit: { style: "unit", unit: "mile" },17};18const styles = stylex.create({19  root: {20    display: "flex",21    width: "100%",22    flexDirection: { default: "column", "@media (min-width: 768px)": "row" },23    alignItems: { default: "stretch", "@media (min-width: 768px)": "center" },24    gap: { default: 24, "@media (min-width: 768px)": 40 },25  },26  preview: { display: "flex", width: "100%", maxWidth: 448, flex: 1, justifyContent: "center" },27  progress: { width: "100%", maxWidth: 208 },28  horizontal: { display: { default: "block", "@media (min-width: 768px)": "none" } },29  vertical: { display: { default: "none", "@media (min-width: 768px)": "block" } },30  options: { display: "flex", maxWidth: 208, flexDirection: "column", gap: 12 },31  caption: { fontSize: 12, lineHeight: "16px", fontWeight: 500, color: "var(--muted)" },32  field: { display: "flex", flexDirection: "column", gap: 4 },33  label: { fontSize: 14, lineHeight: "20px", fontWeight: 500 },34});35export function CustomValue() {36  const valueId = useId();37  const minId = useId();38  const maxId = useId();39  const [value, setValue] = useState(750);40  const [minValue, setMinValue] = useState(0);41  const [maxValue, setMaxValue] = useState(1000);42  const [format, setFormat] = useState("percent");43  return (44    <div {...stylex.props(styles.root)}>45      <div {...stylex.props(styles.preview)}>46        <ProgressBar47          aria-label="Revenue"48          xstyle={styles.progress}49          format={formatOptionsMap[format]}50          max={maxValue}51          min={minValue}52          value={value}53        >54          <ProgressBar.Label>Progress</ProgressBar.Label>55          <ProgressBar.Output />56          <ProgressBar.Track>57            <ProgressBar.Fill />58          </ProgressBar.Track>59        </ProgressBar>60      </div>61      <Separator xstyle={styles.horizontal} />62      <Separator xstyle={styles.vertical} orientation="vertical" />63      <div {...stylex.props(styles.options)}>64        <p {...stylex.props(styles.caption)}>Options</p>65        <NumberField66          id={valueId}67          min={minValue}68          max={maxValue}69          value={value}70          variant="secondary"71          onValueChange={(next) => {72            if (next !== null) setValue(next);73          }}74        >75          <label htmlFor={valueId} {...stylex.props(styles.label)}>76            Value77          </label>78          <NumberField.Group>79            <NumberField.DecrementButton />80            <NumberField.Input />81            <NumberField.IncrementButton />82          </NumberField.Group>83        </NumberField>84        <NumberField85          id={minId}86          min={0}87          max={maxValue - 1}88          value={minValue}89          variant="secondary"90          onValueChange={(next) => {91            if (next === null) return;92            setMinValue(next);93            setValue((current) => Math.max(next, current));94          }}95        >96          <label htmlFor={minId} {...stylex.props(styles.label)}>97            Min Value98          </label>99          <NumberField.Group>100            <NumberField.DecrementButton />101            <NumberField.Input />102            <NumberField.IncrementButton />103          </NumberField.Group>104        </NumberField>105        <NumberField106          id={maxId}107          min={minValue + 1}108          max={2000}109          value={maxValue}110          variant="secondary"111          onValueChange={(next) => {112            if (next === null) return;113            setMaxValue(next);114            setValue((current) => Math.min(next, current));115          }}116        >117          <label htmlFor={maxId} {...stylex.props(styles.label)}>118            Max Value119          </label>120          <NumberField.Group>121            <NumberField.DecrementButton />122            <NumberField.Input />123            <NumberField.IncrementButton />124          </NumberField.Group>125        </NumberField>126        <div {...stylex.props(styles.field)}>127          <Select128            variant="secondary"129            value={format}130            items={formatStyleOptions}131            onValueChange={(next) => {132              if (next !== null) setFormat(next);133            }}134          >135            <Select.Label>Format</Select.Label>136            <Select.Trigger>137              <Select.Value />138              <Select.Indicator />139            </Select.Trigger>140            <Select.Portal>141              <Select.Positioner>142                <Select.Popover>143                  <Select.List>144                    {formatStyleOptions.map((option) => (145                      <Select.Item key={option.value} value={option.value}>146                        <Select.ItemText>{option.label}</Select.ItemText>147                        <Select.ItemIndicator />148                      </Select.Item>149                    ))}150                  </Select.List>151                </Select.Popover>152              </Select.Positioner>153            </Select.Portal>154          </Select>155        </div>156      </div>157    </div>158  );159}160export default CustomValue;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  progress: { width: 256 },7  label: { fontWeight: 500, color: "var(--foreground)" },8  output: {9    fontSize: 12,10    lineHeight: "16px",11    color: "var(--muted)",12    fontVariantNumeric: "tabular-nums",13  },14  track: { borderRadius: 9999, backgroundColor: "var(--default)" },15  fill: { borderRadius: 9999, backgroundColor: "var(--accent)" },16});17export function CustomStyles() {18  return (19    <ProgressBar aria-label="Upload progress" xstyle={styles.progress} value={45}>20      <ProgressBar.Label xstyle={styles.label}>Uploading resume.pdf</ProgressBar.Label>21      <ProgressBar.Output xstyle={styles.output} />22      <ProgressBar.Track xstyle={styles.track}>23        <ProgressBar.Fill xstyle={styles.fill} />24      </ProgressBar.Track>25    </ProgressBar>26  );27}28export default CustomStyles;