المقياس

import { Meter } from 'topclassui/meter'

/** The docs sample: the visible text names the meter, which reads 60 of 0 to 100. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-2">
      <span id="battery-label" className="text-sm">Battery</span>
      <Meter value={60} aria-labelledby="battery-label" />
    </div>
  )
}

import { Meter } from 'topclassui/meter'

/** A range of its own: 512 of 1024 GB fills half the track, and the value text says it in units. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-2">
      <span id="disk-label" className="text-sm">Disk: 512 GB of 1 TB</span>
      <Meter min={0} max={1024} value={512} aria-valuetext="512 GB of 1 TB" aria-labelledby="disk-label" />
    </div>
  )
}

import { Meter } from 'topclassui/meter'

export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter tone="primary" value={60} aria-label="Primary" />
      <Meter tone="neutral" value={60} aria-label="Neutral" />
      <Meter tone="success" value={60} aria-label="Success" />
      <Meter tone="warning" value={60} aria-label="Warning" />
      <Meter tone="danger" value={60} aria-label="Danger" />
      <Meter tone="info" value={60} aria-label="Info" />
    </div>
  )
}

import { Meter } from 'topclassui/meter'

/** The track height follows padding-y: 2, 4, 6, 8 and 10 px at density 1. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter size="xs" value={60} aria-label="Extra small" />
      <Meter size="sm" value={60} aria-label="Small" />
      <Meter size="md" value={60} aria-label="Medium" />
      <Meter size="lg" value={60} aria-label="Large" />
      <Meter size="xl" value={60} aria-label="Extra large" />
    </div>
  )
}

import { Meter } from 'topclassui/meter'

/** custom emits no height, so the caller's own class sets it. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter value={40} aria-label="On the scale" />
      <Meter size="custom" value={40} className="h-3" aria-label="Your own height" />
    </div>
  )
}

import { Meter } from 'topclassui/meter'

/** The bar grows from the right, the inline start, with no class of its own for it. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="grid max-w-sm gap-4">
      <div className="grid gap-1">
        <span id="disk-ar" className="text-sm">القرص: ٥١٢ غيغابايت من ١ تيرابايت</span>
        <Meter min={0} max={1024} value={512} aria-valuetext="٥١٢ غيغابايت من ١ تيرابايت" aria-labelledby="disk-ar" />
      </div>
      <Meter value={30} tone="success" aria-label="البطارية" />
    </div>
  )
}