@proteos/ui 0.57.1 → 0.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.57.1",
+  "version": "0.58.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -56,7 +56,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
-    "@proteos/sdk": "0.57.1"
+    "@proteos/sdk": "0.58.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
@@ -78,8 +78,8 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vitest": "^3.2.4",
-    "@proteos/biome-config": "0.0.0",
-    "@proteos/tsconfig": "0.0.0"
+    "@proteos/tsconfig": "0.0.0",
+    "@proteos/biome-config": "0.0.0"
   },
   "scripts": {
     "lint": "biome check .",

package/src/components/badge-multi-select/badge-multi-select.tsx

@@ -206,7 +206,7 @@ export function BadgeMultiSelect<T extends Key>({
   }
 
   return (
-    <div className={cn('grid grid-cols-1 gap-1.5', className)}>
+    <div className={cn('grid grid-cols-1 gap-1.5 content-start', className)}>
       {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
 
       <div

package/src/components/checkbox/checkbox-group.tsx

@@ -36,7 +36,10 @@ export function CheckboxGroup({
     <AriaCheckboxGroup
       {...props}
       className={(renderProps) =>
-        cn('grid gap-2', typeof className === 'function' ? className(renderProps) : className)
+        cn(
+          'grid gap-2 content-start',
+          typeof className === 'function' ? className(renderProps) : className,
+        )
       }
     >
       {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}

package/src/components/color-input/color-input.tsx

@@ -139,7 +139,7 @@ export function ColorInput({
       // Canonical formatting once the user leaves: "ABC" → "#aabbcc".
       onBlur={settle}
       {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
-      className={cn('grid grid-cols-1 gap-1.5', className)}
+      className={cn('grid grid-cols-1 gap-1.5 content-start', className)}
     >
       {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
 

package/src/components/combobox/combobox.tsx

@@ -91,7 +91,7 @@ export function Combobox<T extends Key>({
       allowsEmptyCollection={allowsEmptyCollection}
       className={(renderProps) =>
         cn(
-          'grid grid-cols-1 gap-1.5',
+          'grid grid-cols-1 gap-1.5 content-start',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/command/command-hint.tsx

@@ -30,10 +30,7 @@ export function CommandHint({ combo, tone = 'subtle', className }: CommandHintPr
   const label = platform === 'mac' ? `${modSymbol}${keyLabel}` : `${modSymbol}+${keyLabel}`
   return (
     <Kbd
-      className={cn(
-        tone === 'prominent' && 'bg-ink text-surface border-transparent',
-        className,
-      )}
+      className={cn(tone === 'prominent' && 'bg-ink text-surface border-transparent', className)}
     >
       {label}
     </Kbd>

package/src/components/command/command.stories.tsx

@@ -35,8 +35,8 @@ export const Basic: Story = {
       return (
         <div className="flex flex-col items-start gap-3">
           <p className="text-[13px] text-ink-3">
-            Press <strong>Cmd+J</strong> (or hold <strong>Cmd+Shift</strong> to peek the
-            shortcut, then press <strong>J</strong>).
+            Press <strong>Cmd+J</strong> (or hold <strong>Cmd+Shift</strong> to peek the shortcut,
+            then press <strong>J</strong>).
           </p>
           <Command combo="mod+j">
             <Button onPress={() => setCount((c) => c + 1)}>Increment ({count})</Button>

package/src/components/command/command.test.tsx

@@ -1,10 +1,9 @@
 import { act, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { Button } from '../button'
 import { _resetDiscovery } from '../../lib/commands/discovery-store'
 import { _setPlatformForTests } from '../../lib/commands/platform'
-import { _resetRegistry } from '../../lib/commands/registry'
+import { _resetRegistry, listActiveCommands } from '../../lib/commands/registry'
+import { Button } from '../button'
 
 import { Command } from './command'
 
@@ -100,3 +99,66 @@ describe('Command', () => {
     expect(onPress).not.toHaveBeenCalled()
   })
 })
+
+describe('Command — palette actions', () => {
+  beforeEach(() => {
+    _setPlatformForTests('mac')
+    _resetRegistry()
+    _resetDiscovery()
+  })
+  afterEach(() => {
+    _setPlatformForTests(undefined)
+  })
+
+  it("registers the wrapped control's accessible name as the action label", () => {
+    const onPress = vi.fn()
+    render(
+      <>
+        <Command combo="mod+s">
+          <Button onPress={onPress}>Save</Button>
+        </Command>
+        <Command combo="mod+f">
+          <Button aria-label="Filter records">🔍</Button>
+        </Command>
+        <Command combo="mod+e" label="Edit record">
+          <Button>Edit</Button>
+        </Command>
+      </>,
+    )
+    const actions = listActiveCommands()
+    expect(actions.map((a) => [a.combo.raw, a.label])).toEqual([
+      ['mod+s', 'Save'],
+      ['mod+f', 'Filter records'],
+      ['mod+e', 'Edit record'],
+    ])
+
+    actions[0]?.invoke()
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('advertises the New shortcut as ⌘B on mac', () => {
+    render(
+      <Command combo="mod+b">
+        <Button>New</Button>
+      </Command>,
+    )
+    holdCmdShift()
+    expect(screen.getByText('⌘B')).toBeInTheDocument()
+    expect(listActiveCommands().map((a) => [a.combo.raw, a.label])).toEqual([['mod+b', 'New']])
+  })
+
+  it('separates adjacent text pieces and skips aria-hidden decorations', () => {
+    render(
+      <Command combo="mod+f">
+        <Button>
+          <svg aria-hidden="true">
+            <title>funnel</title>
+          </svg>
+          Filter
+          <span>1</span>
+        </Button>
+      </Command>,
+    )
+    expect(listActiveCommands().map((a) => a.label)).toEqual(['Filter 1'])
+  })
+})

package/src/components/command/command.tsx

@@ -3,8 +3,8 @@
 import { type ReactNode, useRef } from 'react'
 
 import { cn } from '../../lib/cn'
-import { useCommand } from '../../lib/commands/use-command'
 import { useDiscoveryActive } from '../../lib/commands/discovery-store'
+import { useCommand } from '../../lib/commands/use-command'
 
 import { CommandHint } from './command-hint'
 
@@ -33,6 +33,11 @@ import { CommandHint } from './command-hint'
    call sites where the wrapper needs to participate in a flex/grid layout.
    The wrapper stays `relative` either way so the discovery overlay can
    absolute-position against it.
+
+   The binding is registered WITH a label — `label` when given, else the
+   target control's accessible name (aria-label, then its text) read when the
+   list is built — so the command palette can list it under "Actions" and
+   trigger it without the keyboard (`useActiveCommands`).
    ========================================================================= */
 
 export type CommandProps = {
@@ -42,21 +47,31 @@ export type CommandProps = {
   target?: string
   /** Layout overrides for the wrapper. `relative` is always applied. */
   className?: string
+  /** Name shown for this binding in the command palette. Defaults to the
+   *  target control's accessible name. */
+  label?: string
   children: ReactNode
 }
 
-export function Command({ combo, target, className, children }: CommandProps) {
+export function Command({ combo, target, className, label, children }: CommandProps) {
   const wrapperRef = useRef<HTMLDivElement>(null)
   const discoveryActive = useDiscoveryActive()
 
-  useCommand(combo, () => {
+  const resolveTarget = (): HTMLElement | null => {
     const root = wrapperRef.current
-    if (!root) return
-    const el = target
+    if (!root) return null
+    return target
       ? root.querySelector<HTMLElement>(target)
       : (root.firstElementChild as HTMLElement | null)
-    el?.click()
-  })
+  }
+
+  useCommand(
+    combo,
+    () => {
+      resolveTarget()?.click()
+    },
+    { label: () => label ?? accessibleName(resolveTarget()) },
+  )
 
   return (
     <div ref={wrapperRef} className={cn('relative inline-block', className)}>
@@ -74,3 +89,33 @@ export function Command({ combo, target, className, children }: CommandProps) {
     </div>
   )
 }
+
+/** The control's name as assistive tech would read it: an explicit aria-label
+ *  first, else its visible text — each text piece separated by a space (so
+ *  "Filter" next to a count chip reads "Filter 1", not "Filter1"), with
+ *  `aria-hidden` decorations (icons) left out. */
+function accessibleName(el: HTMLElement | null): string | undefined {
+  if (!el) return undefined
+  const aria = el.getAttribute('aria-label')?.trim()
+  if (aria) return aria
+  const pieces: string[] = []
+  const walk = (node: Node): void => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent?.trim()
+      if (text) pieces.push(text)
+      return
+    }
+    // `Element`, not `HTMLElement`: an inline SVG icon is an SVGElement.
+    if (node instanceof Element) {
+      if (node.getAttribute('aria-hidden') === 'true') return
+      const own = node.getAttribute('aria-label')?.trim()
+      if (own) {
+        pieces.push(own)
+        return
+      }
+    }
+    for (const child of node.childNodes) walk(child)
+  }
+  walk(el)
+  return pieces.length > 0 ? pieces.join(' ') : undefined
+}

package/src/components/command/index.ts

@@ -1,16 +1,24 @@
-export type { CommandProps } from './command'
-export { Command } from './command'
-export type { CommandHintProps, CommandHintTone } from './command-hint'
-export { CommandHint } from './command-hint'
-
 // Re-export the command-system primitives so consumers can `import { useCommand,
-// useEscapeKey, parseCombo, useDiscoveryActive } from '@proteos/ui'`.
-export type { KeyCombo, UseCommandOptions, UseEscapeKeyOptions } from '../../lib/commands'
+// useEscapeKey, parseCombo, useDiscoveryActive, useActiveCommands, getPlatform } from '@proteos/ui'`.
+export type {
+  ActiveCommand,
+  CommandLabel,
+  KeyCombo,
+  Platform,
+  UseCommandOptions,
+  UseEscapeKeyOptions,
+} from '../../lib/commands'
 export {
+  getPlatform,
   isEditableTarget,
-  parseCombo,
   PROTECTED_COMBOS,
+  parseCombo,
+  useActiveCommands,
   useCommand,
   useDiscoveryActive,
   useEscapeKey,
 } from '../../lib/commands'
+export type { CommandProps } from './command'
+export { Command } from './command'
+export type { CommandHintProps, CommandHintTone } from './command-hint'
+export { CommandHint } from './command-hint'

package/src/components/currency-input/currency-input.tsx

@@ -101,7 +101,7 @@ export function CurrencyInput({
       : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
 
   return (
-    <div className={cn('grid grid-cols-1 gap-1.5', className)}>
+    <div className={cn('grid grid-cols-1 gap-1.5 content-start', className)}>
       <div className={cn(styles.box(), 'flex items-center gap-1 pr-1', focusWithin)}>
         <input
           className={cn(

package/src/components/date-picker/date-picker.tsx

@@ -53,7 +53,7 @@ export function DatePicker<T extends DateValue>({
       {...props}
       className={(renderProps) =>
         cn(
-          'grid grid-cols-1 gap-1.5',
+          'grid grid-cols-1 gap-1.5 content-start',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/date-time-picker/date-time-picker.tsx

@@ -123,7 +123,7 @@ export function DateTimePicker<T extends DateValue>({
       shouldCloseOnSelect={shouldCloseOnSelect}
       className={(renderProps) =>
         cn(
-          'grid grid-cols-1 gap-1.5',
+          'grid grid-cols-1 gap-1.5 content-start',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/field/field.tsx

@@ -127,6 +127,12 @@ export const fieldChipPadding: Record<FieldSize, string> = {
    Label / hint / error text styles — applied to RAC's Label / Text / FieldError
    components inside each form control. Strings rather than components so the
    existing monolithic APIs can keep their inline composition.
+
+   Every control stacks them on a `grid grid-cols-1 gap-1.5 content-start`
+   root (groups: `grid gap-2 content-start`). `content-start` matters: a
+   consumer grid stretches its cells, and without it the auto rows of a
+   field with no hint absorb the extra height — its label drifts and its box
+   grows to match a sibling that has one. Copy the recipe for new controls.
    ========================================================================= */
 
 export const fieldLabelStyles = 'font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4'

package/src/components/icon-picker/icon-picker.tsx

@@ -157,7 +157,7 @@ export function IconPicker({
   }
 
   return (
-    <div className={cn('grid grid-cols-1 gap-1.5', className)}>
+    <div className={cn('grid grid-cols-1 gap-1.5 content-start', className)}>
       {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
 
       {compact ? (

package/src/components/input/input.tsx

@@ -56,7 +56,7 @@ export function Input({
       {...props}
       className={(renderProps) =>
         cn(
-          'grid grid-cols-1 gap-1.5',
+          'grid grid-cols-1 gap-1.5 content-start',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/multi-select/multi-select.tsx

@@ -123,7 +123,7 @@ export function MultiSelect<T extends Key>({
   }
 
   return (
-    <div className={cn('grid grid-cols-1 gap-1.5', className)}>
+    <div className={cn('grid grid-cols-1 gap-1.5 content-start', className)}>
       {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
 
       <div

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<typeof ProgressBar> = {
   argTypes: {
     size: {
       control: { type: 'inline-radio' },
-      options: ['sm', 'md'],
+      options: ['xs', 'sm', 'md'],
     },
     isIndeterminate: { control: { type: 'boolean' } },
     value: { control: { type: 'number', min: 0, max: 100 } },
@@ -66,6 +66,8 @@ export const Sizes: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (
     <div className="grid grid-cols-[80px_1fr] items-center gap-x-6 gap-y-4 w-[360px]">
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">xs</div>
+      <ProgressBar value={60} size="xs" aria-label="Progress xs" />
       <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">sm</div>
       <ProgressBar value={60} size="sm" aria-label="Progress sm" />
       <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">md</div>

package/src/components/progress-bar/progress-bar.tsx

@@ -23,6 +23,8 @@ export const progressBarStyles = tv({
   },
   variants: {
     size: {
+      // 2px hairline — an edge meter along a card's bottom, positioned by the consumer.
+      xs: { track: 'h-0.5' },
       sm: { track: 'h-1' },
       md: { track: 'h-2' },
     },

package/src/components/progress-ring/index.ts

@@ -0,0 +1,2 @@
+export type { ProgressRingProps, ProgressRingVariants } from './progress-ring'
+export { ProgressRing, progressRingStyles } from './progress-ring'

package/src/components/progress-ring/progress-ring.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ProgressRing } from './progress-ring'
+
+const meta: Meta<typeof ProgressRing> = {
+  title: 'Components/ProgressRing',
+  component: ProgressRing,
+  tags: ['autodocs'],
+  args: {
+    'aria-label': 'Confidence',
+    size: 'sm',
+    value: 82,
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['xs', 'sm', 'md'],
+    },
+    isIndeterminate: { control: { type: 'boolean' } },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ProgressRing>
+
+export const Playground: Story = {}
+
+export const Sizes: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid grid-cols-[80px_auto] items-center gap-x-6 gap-y-4">
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">xs</div>
+      <ProgressRing value={82} size="xs" aria-label="Confidence xs" />
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">sm</div>
+      <ProgressRing value={82} size="sm" aria-label="Confidence sm" />
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">md</div>
+      <ProgressRing value={82} size="md" aria-label="Confidence md" />
+    </div>
+  ),
+}
+
+export const Values: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-center gap-4">
+      {[0, 33, 82, 100].map((value) => (
+        <ProgressRing key={value} value={value} size="md" aria-label={`${value} percent`} />
+      ))}
+    </div>
+  ),
+}
+
+export const InARow: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-col gap-1 w-[320px] rounded-md border border-rule-2 px-2.5 py-2">
+      <div className="flex items-start gap-2">
+        <p className="flex-1 min-w-0 text-[12.5px] text-ink-2">
+          <span className="font-medium text-ink">Pricing mentioned</span>
+        </p>
+        <ProgressRing
+          size="xs"
+          className="mt-0.5"
+          value={82}
+          aria-label="Pricing mentioned confidence"
+        />
+      </div>
+      <p className="text-[12px] leading-[1.45] text-ink-2">Asked about the annual plan.</p>
+    </div>
+  ),
+}
+
+export const Indeterminate: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-center gap-4">
+      <ProgressRing isIndeterminate aria-label="Evaluating" />
+      <ProgressRing isIndeterminate size="md" aria-label="Evaluating md" />
+    </div>
+  ),
+}

package/src/components/progress-ring/progress-ring.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ProgressRing } from './progress-ring'
+
+describe('ProgressRing', () => {
+  it('renders with the progressbar role and accessible name', () => {
+    render(<ProgressRing value={40} aria-label="Confidence" />)
+    expect(screen.getByRole('progressbar', { name: 'Confidence' })).toBeInTheDocument()
+  })
+
+  it('reflects the value in aria-valuenow and centres the percent text', () => {
+    render(<ProgressRing value={82} aria-label="Confidence" />)
+    expect(screen.getByRole('progressbar', { name: 'Confidence' })).toHaveAttribute(
+      'aria-valuenow',
+      '82',
+    )
+    expect(screen.getByText('82%')).toBeInTheDocument()
+  })
+
+  it('shows a custom valueLabel instead of the percent', () => {
+    render(<ProgressRing value={4} maxValue={5} valueLabel="4/5" aria-label="Steps" />)
+    expect(screen.getByText('4/5')).toBeInTheDocument()
+    expect(screen.queryByText('80%')).not.toBeInTheDocument()
+  })
+
+  it('omits aria-valuenow and the value text when indeterminate', () => {
+    render(<ProgressRing isIndeterminate aria-label="Evaluating" />)
+    const ring = screen.getByRole('progressbar', { name: 'Evaluating' })
+    expect(ring).not.toHaveAttribute('aria-valuenow')
+    expect(ring).toHaveTextContent('')
+  })
+
+  it('sets the value beside a 14px xs ring', () => {
+    render(<ProgressRing size="xs" value={82} aria-label="Confidence" />)
+    const ring = screen.getByRole('progressbar', { name: 'Confidence' })
+    expect(ring).toHaveAttribute('aria-valuenow', '82')
+    expect(ring.querySelector('svg')).toHaveAttribute('viewBox', '0 0 14 14')
+    expect(screen.getByText('82%')).toBeInTheDocument()
+  })
+
+  it('still renders the value at zero', () => {
+    render(<ProgressRing value={0} aria-label="Empty" />)
+    expect(screen.getByRole('progressbar', { name: 'Empty' })).toHaveAttribute('aria-valuenow', '0')
+    expect(screen.getByText('0%')).toBeInTheDocument()
+  })
+})

package/src/components/progress-ring/progress-ring.tsx

@@ -0,0 +1,112 @@
+import {
+  ProgressBar as AriaProgressBar,
+  type ProgressBarProps as AriaProgressBarProps,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   ProgressRing — the circular sibling of ProgressBar: RAC's headless
+   ProgressBar (state + ARIA) around an SVG track + arc, with the formatted
+   value (RAC's `valueText`, percent by default) set beside or inside the
+   ring. For the compact "how sure / how far" read beside a title — a
+   confidence, a quota, a completion — where a full-width bar would
+   dominate the row.
+
+   Sizes: `xs` is a 14px glyph with the value in mono BESIDE it (digits
+   cannot live inside a ring that small); `sm` (28px) and `md` (40px) centre
+   the value inside. Determinate (`value`) draws the arc clockwise from
+   12 o'clock; both circles carry `pathLength={100}` so the dash length IS
+   the percentage. Indeterminate (`isIndeterminate`) spins a quarter arc
+   and hides the value. `aria-label` (or `aria-labelledby`) is required —
+   the ring has no visible label of its own.
+   ========================================================================= */
+
+export const progressRingStyles = tv({
+  slots: {
+    root: 'shrink-0 align-middle',
+    svg: 'block shrink-0 -rotate-90',
+    track: 'fill-none',
+    arc: 'fill-none stroke-accent transition-[stroke-dasharray] duration-300 ease-out',
+    value: 'font-mono tabular-nums leading-none',
+  },
+  variants: {
+    size: {
+      xs: {
+        root: 'inline-flex items-center gap-1.5',
+        svg: 'size-3.5',
+        // A hair darker than the larger rings' track: a 2px hairline on a
+        // tinted card vanishes at surface-2.
+        track: 'stroke-surface-3',
+        value: 'text-[11px] text-ink-4',
+      },
+      sm: {
+        root: 'relative inline-grid place-items-center size-7',
+        svg: 'col-start-1 row-start-1 size-full',
+        track: 'stroke-surface-2',
+        value: 'col-start-1 row-start-1 text-[8.5px] text-ink-2',
+      },
+      md: {
+        root: 'relative inline-grid place-items-center size-10',
+        svg: 'col-start-1 row-start-1 size-full',
+        track: 'stroke-surface-2',
+        value: 'col-start-1 row-start-1 text-[10px] text-ink-2',
+      },
+    },
+  },
+  defaultVariants: { size: 'sm' },
+})
+
+/** Pixel geometry per size — tv() carries classes, the SVG needs numbers. */
+const GEOMETRY = {
+  xs: { box: 14, stroke: 2 },
+  sm: { box: 28, stroke: 2.5 },
+  md: { box: 40, stroke: 3 },
+} as const
+
+export type ProgressRingVariants = VariantProps<typeof progressRingStyles>
+export type ProgressRingProps = Omit<AriaProgressBarProps, 'children' | 'className'> &
+  ProgressRingVariants & {
+    className?: string
+  }
+
+export function ProgressRing({ size, className, ...props }: ProgressRingProps) {
+  const resolvedSize = size ?? 'sm'
+  const { root, svg, track, arc, value } = progressRingStyles({ size: resolvedSize })
+  const { box, stroke } = GEOMETRY[resolvedSize]
+  const center = box / 2
+  const radius = (box - stroke) / 2
+  return (
+    <AriaProgressBar {...props} className={cn(root(), className)}>
+      {({ percentage, valueText, isIndeterminate }) => {
+        const shown = isIndeterminate ? 25 : Math.max(0, Math.min(100, percentage ?? 0))
+        return (
+          <>
+            <svg
+              aria-hidden
+              viewBox={`0 0 ${box} ${box}`}
+              className={cn(svg(), isIndeterminate && 'animate-spin')}
+            >
+              <circle cx={center} cy={center} r={radius} strokeWidth={stroke} className={track()} />
+              {/* A zero-length dash with round caps would still paint a dot. */}
+              {shown > 0 ? (
+                <circle
+                  cx={center}
+                  cy={center}
+                  r={radius}
+                  strokeWidth={stroke}
+                  strokeLinecap="round"
+                  pathLength={100}
+                  strokeDasharray={`${shown} 100`}
+                  className={arc()}
+                />
+              ) : null}
+            </svg>
+            {isIndeterminate ? null : <span className={value()}>{valueText}</span>}
+          </>
+        )
+      }}
+    </AriaProgressBar>
+  )
+}