ProgressCircle

import { ProgressCircle } from '@bindshq/stance-react';

export function Basic() {
  return <ProgressCircle aria-label="Profile completeness" value={75} showValue />;
}

import { ProgressCircle } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <ProgressCircle aria-label="Small" value={40} size="sm" />
      <ProgressCircle aria-label="Medium" value={60} size="md" showValue />
      <ProgressCircle aria-label="Large" value={80} size="lg" showValue />
    </div>
  );
}

import { ProgressCircle } from '@bindshq/stance-react';

export function Custom() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <ProgressCircle
        aria-label="Seats used"
        value={46}
        max={50}
        size={96}
        tone="warning"
        formatValue={(v, m) => `${v} of ${m} seats`}
      >
        46/50
      </ProgressCircle>
      <ProgressCircle
        aria-label="Deployment complete"
        value={100}
        size="lg"
        tone="success"
        showValue
      />
    </div>
  );
}

import { ProgressCircle } from '@bindshq/stance-react';

export function Indeterminate() {
  return <ProgressCircle aria-label="Verifying domain" />;
}