@nanisoft/prism-llms 0.4.0 → 0.5.1

package/dist/md/components/popover.md

@@ -1,14 +1,102 @@
 # Popover
 
-antd Popover, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The anchored floating surface for content richer than a tooltip.
 
-```ts
-import { Popover } from '@nanisoft/prism-ui/components';
+```tsx
+import { Popover, PopoverTrigger, PopoverContent } from '@nanisoft/prism-ui/components/popover'
 ```
 
-`Popover` is antd's [Popover](https://ant.design/components/popover), re-exported unchanged.
+## Overview
 
-- Extends: antd **Popover** — for inherited props and demos, use the antd MCP (`antd_info Popover`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Popover is a floating surface opened by a trigger. It ships as `Popover`,
+`PopoverTrigger` and `PopoverContent`, all from the same module. It is
+positioned by the library, flips near an edge, closes on Escape or an outside
+press, and returns focus to the trigger when it closes.
 
-_No additional props beyond the antd base component._
+A Popover is richer than a Tooltip and lighter than a Dialog. It can hold a
+small form, a filter set, or a compact detail view without covering the page the
+way a modal does.
+
+## Guidelines
+
+### When to use
+
+Use a Popover for content that is more than a label but not a whole screen: a
+share form, a filter panel, a date range, a small preview. It keeps the reader
+in context while offering more than the page shows.
+
+### When not to use
+
+Do not use a Popover for a required decision. An outside press can close it, so
+a flow that must be completed needs a Dialog.
+
+Do not put a single short explanation in a Popover. That is a Tooltip, which
+needs no click.
+
+Do not use a Popover as a menu of commands. A DropdownMenu carries the menu
+semantics and the keyboard model a reader expects for actions.
+
+### Best practices
+
+- Use `side` and `align` to keep the panel near its trigger and clear of the
+  content it annotates, and let the library flip it near an edge.
+- Keep one task per Popover. If it needs its own tabs or steps, it has outgrown
+  the surface.
+- Use the trigger's `openOnHover` only when hovering is a convenience on top of
+  a click, never as the only way to open.
+- Because an outside press closes the popover, save or apply changes as they
+  happen, or ask before discarding.
+- Keep the trigger labelled. The popover's content does not name the trigger for
+  assistive technology.
+
+### Content guidelines
+
+- Lead with a short heading that names the panel, such as "Share this view".
+- Keep body copy to one or two sentences, and put detail in the form itself.
+- Use sentence case for the heading and no closing period on a fragment.
+
+**A popover holding a small share form.**
+
+```tsx
+'use client'
+
+import { Button } from '@nanisoft/prism-ui/components/button'
+import { Input } from '@nanisoft/prism-ui/components/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@nanisoft/prism-ui/components/popover'
+
+/** A popover holding a small share form. */
+export default function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger>Share</PopoverTrigger>
+      <PopoverContent>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium">Share this view</p>
+            <p className="text-muted-foreground text-sm">
+              Anyone with the link can read, not edit.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Input defaultValue="https://prism.nanisoft.com/themes" readOnly />
+            <Button variant="outline">Copy</Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Props
+
+**`open`** `boolean` · optional · default: — — The controlled open state.
+**`defaultOpen`** `boolean` · optional · default: — — The initially open state, for an uncontrolled popover.
+**`onOpenChange`** `(open: boolean) => void` · optional · default: — — Called when the open state changes.
+**`modal`** `boolean | 'trap-focus'` · optional · default: `false` — Whether the popover traps interaction while open.
+**`children`** `React.ReactNode` · optional · default: — — The trigger and content.
+**`openOnHover`** `boolean` · optional · default: — — Whether the trigger should also open the popover on hover.
+**`side`** `'top' | 'right' | 'bottom' | 'left'` · optional · default: `bottom` — Which side of the trigger the popover is placed on.
+**`align`** `'start' | 'center' | 'end'` · optional · default: `center` — How the popover aligns against the trigger.
+**`sideOffset`** `number` · optional · default: `4` — The distance in pixels between the trigger and the popover.
+**`alignOffset`** `number` · optional · default: `0` — The offset in pixels along the alignment axis.

package/dist/md/components/product-mark.md

@@ -0,0 +1,114 @@
+# ProductMark
+
+A product's two-part colour mark: a brand-ink ring around the pack's own fill, beside the product's name in the brand ink.
+
+```tsx
+import { ProductMark } from '@nanisoft/prism-ui/components/product-mark'
+```
+
+## Overview
+
+A ProductMark is a product's two-part colour mark: a ring in the brand ink around
+a core in the product's own pack fill, beside the product's name in the same
+brand ink. It is a server component and ships no client code.
+
+The mark is promoted to a component because a product row and a product switcher
+both need it, and two hand-written copies is the arrangement this design system
+exists to remove. One implementation also means one place where the two colour
+laws are applied, and those laws are not obvious:
+
+**The ring and the name are ink; the core is a fill.** A pastel brand value is a
+fill and never text, so the core takes `primary`. The ring and the name take
+`brand-ink`, which is the role for something that must read *as the brand*:
+gated at 4.5:1 against the page, a card and the accent surface, in both modes of
+all six packs, worst measured 5.57:1. Plain `foreground` is not a brand ink, and
+neither is a foreground paired with a fill, so a mark drawn in `primary` text is
+the wrong answer twice over.
+
+**A product with no pack wears the spectrum, not a colourless mark.** A mark with
+no `pack` is drawn as a conic sweep of all five chart steps. A colourless mark
+would take the reading page's accent and change per site, so a product with no
+single colour would be a different colour on every site that listed it. The one
+entry with no pack is the company root, and the spectrum says so once rather
+than five times.
+
+## Guidelines
+
+### When to use
+
+Use a ProductMark wherever a reader is being shown which product they are in, or
+which of a set of products a link goes to: a product row, a product switcher, a
+site header's brand lockup, a footer grid. Wherever a site draws the same mark
+twice, it should be drawing this.
+
+Pass the product's `id` as the key within the set it is distinguished in. It is
+carried on the DOM as `data-product`, and it is what makes two marks in the same
+view traceable to their product.
+
+### When not to use
+
+Do not use a ProductMark to colour a section, a surface or a heading. The mark
+identifies a member of a set, and the design system keeps mark and ground on
+separate axes for exactly that reason: a pack is a signal, never a ground.
+
+Do not put a boundary on a ProductMark's disc. A pack boundary moves the pack's
+corner radius as well as its colour, and the mark is a fully-rounded element, so
+a boundary on it changes nothing a reader can see. Carry the pack through `pack`
+instead, which is the axis the mark actually reads.
+
+Do not hand-write a second mark. If a surface needs a mark this component does
+not cover, extend this one.
+
+### Best practices
+
+- Give every product in a set a distinct pack, or let one wear the spectrum. A
+  set where two members share a pack has two marks that say the same thing.
+- Use one size across a row. `sm` beside a hairline row, `md` in body content,
+  `lg` only in a page header; a row of mixed sizes reads as a hierarchy that is
+  not there.
+- The mark is `aria-hidden` and the name beside it is the accessible content. Do
+  not put meaning in the ring's colour that is not also in the name.
+- Prefer `md`. It is the size that reads at body text, and a mark is a
+  co-occurrence with a name rather than a thing to look at.
+
+### Content guidelines
+
+- The name is the product's own name, in the case it uses everywhere else.
+- Keep the name to one or two words. The mark carries the identity; the name
+  carries the label.
+- Never abbreviate a product's name to fit beside its mark. Drop the mark, or
+  shorten the row, or let the name wrap.
+
+**The mark at each size, including one with no pack.**
+
+```tsx
+import { ProductMark } from '@nanisoft/prism-ui/components/product-mark'
+
+/**
+ * The mark at each size, including one with no pack.
+ *
+ * The last row is the case that matters: a product with no pack of its own wears
+ * the full spectrum rather than a colourless mark, because a colourless mark
+ * would take the reading page's accent and change per site.
+ */
+export default function ProductMarkDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col items-start gap-3">
+        <ProductMark id="nexus" name="Nexus" pack="lavender" size="lg" />
+        <ProductMark id="atlas" name="Atlas" pack="mint" size="md" />
+        <ProductMark id="alphalens" name="AlphaLens" pack="blush" size="sm" />
+      </div>
+      <ProductMark id="www" name="NaniSoft" size="md" />
+    </div>
+  )
+}
+```
+
+## Props
+
+**`id`** `string` · required · default: — — The product's key within the set it is distinguished in. It is carried on the markup as `data-product` so a test can name one mark rather than the first one, and so two marks in one document are individually addressable.
+**`name`** `string` · required · default: — — The product's name, which is the mark's second part and the word that carries the identity. The mark sets it in `brand-ink` rather than in `foreground`, which is DESIGN.md's Brand Ink Rule: a name that has to read as the brand reads `brand-ink`, and `foreground` is a tinted neutral with almost no chroma by design.
+**`pack`** `PackId | null` · optional · default: — — The product's pack, which is the mark's hue. Omit it, or pass `null`, for the one entry in a set that has no pack of its own: that entry is drawn as the full spectrum rather than as a colourless mark. See `SPECTRUM` above. `default` is a real answer and not the same as the empty one. The base pack is a pack a product can wear, and it is the absence of a `data-pack` attribute, so a product whose pack is `default` carries no attribute and its core resolves the base pack's `primary` from the page.
+**`size`** `ProductMarkSize` · optional · default: `'md'` — Which of the three drawn sizes to use.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited, and this Component spreads no other prop, so there is no second route to its ink.

package/dist/md/components/product-switcher.md

@@ -0,0 +1,88 @@
+# ProductSwitcher
+
+A switch between the members of a set of products, each drawn with its own ProductMark and the current one marked aria-current.
+
+```tsx
+import { ProductSwitcher } from '@nanisoft/prism-ui/components/product-switcher'
+```
+
+## Overview
+
+A ProductSwitcher is a switch between the members of a set of products. Each
+member is drawn with its own `ProductMark`, so the two parts of a product's
+identity - the ring in the brand ink and the core in its own pack fill - are the
+same two colours in a switcher, in a row and on a page header.
+
+All four NaniSoft sites need it and each one wrote it: the company's own site
+moves between its products from a row of coloured marks, and each product site
+names its siblings in its header.
+
+## Guidelines
+
+### When to use
+
+Use a ProductSwitcher where a reader can move between whole products rather than
+between pages of one: a site header, a footer, a page that lists the family.
+
+Use one size across the whole switcher. A set where one mark is larger than the
+rest reads as a hierarchy that is not there.
+
+### When not to use
+
+Do not use a ProductSwitcher to switch between pages of one product. That is
+`Pagination` or `Tabs`, and a set of product marks is a claim about where the
+reader is, not a position in a sequence.
+
+Do not use it for a set of one. Pass nothing rather than a switcher with a single
+member; a switcher with nothing to switch to is a heading.
+
+Do not use it as a menu. It renders every member at once. If you want a control
+that opens a list, compose `DropdownMenu` with the marks.
+
+### Best practices
+
+- Pass `currentId` on the page a member is showing, and omit it on a page that is
+  not one of the members.
+- The current member is marked with `aria-current="page"`, never with a colour
+  alone. There is no prop that overrides that marking, which is the reason this
+  is a component rather than a list of anchors you write yourself.
+- Leave `pack` off the one member that has no pack of its own. That member wears
+  the full spectrum, which says "no single colour" once rather than five times.
+- Pass `label` when the set is not a set of products. The default name is
+  `Products`, and a consumer whose set is not products should pass its own word.
+
+### Content guidelines
+
+- Use each product's own name, in the case it uses everywhere else.
+- Keep a name to one or two words. The mark carries the identity; the name carries
+  the label.
+- Never abbreviate a name to fit beside its mark. Drop the mark, shorten the row,
+  or let the name wrap.
+
+**Three members, with the one the reader is on marked, and one wearing the spectrum.**
+
+```tsx
+import { ProductSwitcher } from '@nanisoft/prism-ui/components/product-switcher'
+
+/** Three members, with the one the reader is on marked, and one wearing the spectrum. */
+export default function ProductSwitcherDemo() {
+  return (
+    <ProductSwitcher
+      currentId="nexus"
+      products={[
+        { id: 'nexus', name: 'Nexus', pack: 'lavender', href: '#nexus' },
+        { id: 'atlas', name: 'Atlas', pack: 'mint', href: '#atlas' },
+        { id: 'www', name: 'NaniSoft', href: '#www' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+**`products`** `readonly SwitcherProduct[]` · required · default: — — The set to move between, in the order a reader should meet it. Order is the caller's because it is a claim about which product matters first.
+**`currentId`** `string` · optional · default: — — The `id` of the member the reader is on. Marked `aria-current="page"`, which is how a reader and a screen reader both know where they are. Omit it when the switcher is rendered on a page that is not one of the members.
+**`size`** `ProductMarkSize` · optional · default: `'sm'` — The drawn size of every mark, so a set shows one size rather than a mix. See `ProductMarkSize`.
+**`label`** `string` · optional · default: — — A heading for the set, for a switcher that is not inside a landmark the reader can already name. Rendered as the navigation's accessible name and as no visible text, because the marks beside it are the labels.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited.

package/dist/md/components/progress.md

@@ -1,14 +1,95 @@
 # Progress
 
-antd Progress, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The bar that reports how far a task has progressed.
 
-```ts
-import { Progress } from '@nanisoft/prism-ui/components';
+```tsx
+import { Progress } from '@nanisoft/prism-ui/components/progress'
 ```
 
-`Progress` is antd's [Progress](https://ant.design/components/progress), re-exported unchanged.
+## Overview
 
-- Extends: antd **Progress** — for inherited props and demos, use the antd MCP (`antd_info Progress`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Progress bar reports how far a task has progressed. It exposes its value, its
+minimum and its maximum through ARIA, so a screen reader announces the position
+rather than the width of a coloured bar. Pass a number for a task of known
+length, or `value={null}` for a task whose end is unknown, which is announced as
+indeterminate.
 
-_No additional props beyond the antd base component._
+The bar is a status, not a control. The reader watches it; nothing about it is
+clickable or focusable. Decorative movement is deliberately absent: the bar
+changes width only when the value changes.
+
+## Guidelines
+
+### When to use
+
+Use Progress when a process has measurable steps and the reader benefits from
+knowing how much is left: an upload, a build, a migration, a batch import.
+
+### When not to use
+
+Do not use Progress for a short wait under about a second. A spinner or a
+disabled control is quieter and more honest.
+
+Do not use it as a loading placeholder for content whose shape you know. A
+Skeleton mirrors the layout that is coming and reduces the sense of waiting.
+
+Do not use an indeterminate bar for a task of known length. Showing a moving bar
+for a countable task hides real information.
+
+### Best practices
+
+- Give the bar an accessible name with `aria-label` or an adjacent heading, so
+  the value is announced against a subject.
+- Show the value as text next to the bar when the reader needs the number, and
+  keep it in step with the bar.
+- Use `value={null}` only while the length is genuinely unknown, and switch to a
+  number as soon as one is available.
+- Announce completion in the surrounding UI. A bar that disappears at 100
+  percent leaves the reader unsure whether it finished or failed.
+- For a task that fails partway, replace the bar with an Alert that names the
+  failure rather than leaving it frozen.
+
+### Content guidelines
+
+- Name the task in progress, not the component: "Uploading assets", "Preparing
+  preview".
+- Use sentence case and a verb ending in "ing" for the in-progress label.
+- Keep the completion message separate and past tense: "Upload complete".
+
+**Progress at a known value, an unknown length, and complete.**
+
+```tsx
+import { Progress } from '@nanisoft/prism-ui/components/progress'
+
+/** Progress at a known value, an unknown length, and complete. */
+export default function ProgressDemo() {
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-8">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between text-sm">
+          <span className="font-medium">Uploading assets</span>
+          <span className="text-muted-foreground">68%</span>
+        </div>
+        <Progress value={68} aria-label="Uploading assets" />
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="font-medium text-sm">Preparing preview</span>
+        <Progress value={null} aria-label="Preparing preview" />
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="font-medium text-sm">Build complete</span>
+        <Progress value={100} aria-label="Build complete" />
+      </div>
+    </div>
+  )
+}
+```
+
+## Props
+
+**`value`** `number | null` · required · default: — — The current value. Pass `null` for an indeterminate task. There is no default: a progress bar without a value is a claim, so the consumer states where the task is.
+**`max`** `number` · optional · default: `100` — The maximum value.
+**`min`** `number` · optional · default: `0` — The minimum value.
+**`format`** `Intl.NumberFormatOptions` · optional · default: — — Options passed to `Intl.NumberFormat` when the value is rendered.
+**`locale`** `Intl.LocalesArgument` · optional · default: — — The locale used when formatting the value.
+**`getAriaValueText`** `(formattedValue: string, value: number | null) => string` · optional · default: — — Returns the text alternative announced for a value.

package/dist/md/components/prose.md

@@ -0,0 +1,91 @@
+# Prose
+
+Consumer-authored body copy held to the reading measure and to the block rhythm, so a document does not restate either.
+
+```tsx
+import { Prose } from '@nanisoft/prism-ui/components/prose'
+```
+
+## Overview
+
+A Prose is a run of body copy you wrote, held to the reading measure and to the
+block rhythm so a document does not have to restate either. You pass the content
+as `children`; Prism owns the width, the spacing between blocks and the
+treatments.
+
+Every NaniSoft site publishes long-form pages, and each one re-derived the same
+answer: a column that stops growing, paragraphs that are too far apart or too
+close, and a link that is either an unstyled word or an over-decorated one. This
+is that answer once.
+
+## Guidelines
+
+### When to use
+
+Use a Prose wherever the content is authored somewhere else and Prism should own
+its presentation: a blog post body, a documentation page, a description that
+turned out to be three paragraphs.
+
+The treatments are child selectors, so your own elements are the ones styled.
+Writing a plain `<p>` and a plain `<h2>` gets the system treatment, and writing
+Prism's own `Heading` and `Text` gets the same result, because the two spellings
+converge on the same element.
+
+### When not to use
+
+Do not use a Prose for a supporting line under a heading. That is `Text`, and a
+measure around one sentence is a measure around one sentence.
+
+Do not use it to fix a width. The measure is the component's whole job, and a run
+set wider than the measure is the defect it exists to remove. `fullWidth` exists
+for the case where the prose genuinely is not a reading column, and it is opt-in
+on purpose.
+
+### Best practices
+
+- Pass plain semantic elements. Do not add class names of your own to size or
+  colour text; that is the override path this system does not have.
+- Keep heading levels consistent with the document. A Prose does not know what
+  surrounds it.
+- Use `size="lg"` for a marketing page's supporting copy and the default for a
+  document body. Do not mix the two on one page.
+
+### Content guidelines
+
+- Aim for a sentence or two per paragraph. A paragraph a reader scrolls past is a
+  paragraph that needed to be two.
+- Link the first mention of a term, not every mention.
+- Use a list when the items are peers. A list of sentences is a paragraph with
+  punctuation.
+
+**A run of prose, with the block treatments applied to the caller's own elements.**
+
+```tsx
+import { Prose } from '@nanisoft/prism-ui/components/prose'
+
+/** A run of prose, with the block treatments applied to the caller's own elements. */
+export default function ProseDemo() {
+  return (
+    <Prose>
+      <h2>A heading</h2>
+      <p>
+        A paragraph of body copy, held to the reading measure. The measure is the
+        emitted container-measure token, so a line stops growing at the same place
+        in every pack and in both modes.
+      </p>
+      <ul>
+        <li>Lists are styled as part of the run.</li>
+        <li>So are code, quotations, tables and headings.</li>
+      </ul>
+      <blockquote>A quotation keeps the muted ink and a left rule.</blockquote>
+    </Prose>
+  )
+}
+```
+
+## Props
+
+**`children`** `ReactNode` · required · default: — — The authored body. Any flow content: paragraphs, lists, headings, tables, code, images. The vertical rhythm and the treatments below apply to whatever is passed, so the caller writes plain elements and Prism styles them.
+**`size`** `ProseSize` · optional · default: `'base'` — The reading size. `base` is the document body; `lg` is the one step up a marketing page's supporting copy is set at.
+**`fullWidth`** `boolean` · optional · default: — — Drops the measure so the run fills the space it is given. The measure is the whole point of the component, so this is opt-in and not a prop a caller sets because the width looked wrong: a line longer than the measure is the defect this exists to remove.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited.

package/dist/md/components/radio-group.md

@@ -0,0 +1,111 @@
+# RadioGroup
+
+The control that chooses exactly one option from a small visible set.
+
+```tsx
+import { RadioGroup, RadioGroupItem } from '@nanisoft/prism-ui/components/radio-group'
+```
+
+## Overview
+
+A RadioGroup chooses exactly one option from a small set that stays visible. It
+ships as `RadioGroup` and `RadioGroupItem`. The group owns the value and the
+keyboard model; each item contributes one value.
+
+The group is a single Tab stop. Once focus is inside, the arrow keys move
+between items and select as they move, Home and End jump to the ends, and Space
+selects the focused item. The selected item is exposed through the native radio
+input beside each control.
+
+## Guidelines
+
+### When to use
+
+Use a RadioGroup when the options are mutually exclusive and few enough that
+showing them all at once helps the reader compare. Two to five options is the
+comfortable range.
+
+### When not to use
+
+Do not use a RadioGroup for a long list. Past roughly seven options, a Select
+keeps the form compact and adds typeahead.
+
+Do not use one when several answers may stand together. Checkboxes state that
+each choice is independent; radio items imply a single answer.
+
+### Best practices
+
+- Give the group a visible legend or an `aria-label`. The group's name is what
+  the reader hears when focus enters, so it must describe the question.
+- Put one item per row with the label beside its control, and point `FieldLabel`
+  at the item's `id` so the whole row is clickable.
+- Do not pre-check an option the reader has not chosen unless it is a genuine
+  default you would defend.
+- Use `disabled` only with nearby text that explains why, not to hide an option
+  that should not be offered.
+- Keep the item order stable across renders. Reordering radio items when a
+  value changes makes the group feel unpredictable.
+
+### Content guidelines
+
+- Keep option labels parallel in form and length, so the differences are easy
+  to weigh.
+- Use sentence case and no trailing periods on the option labels.
+- Put an explanation in a helper line under the label, not in the label itself.
+
+**A radio group with one option preselected and one disabled.**
+
+```tsx
+'use client'
+
+import { FieldLabel } from '@nanisoft/prism-ui/components/field'
+import { RadioGroup, RadioGroupItem } from '@nanisoft/prism-ui/components/radio-group'
+
+/** A radio group with one option preselected and one disabled. */
+export default function RadioGroupDemo() {
+  return (
+    <RadioGroup
+      defaultValue="daily"
+      aria-label="Notification frequency"
+      className="max-w-measure-narrow"
+    >
+      <div className="flex items-start gap-3">
+        <RadioGroupItem id="radio-daily" value="daily" className="mt-0.5" />
+        <div className="flex flex-col gap-1">
+          <FieldLabel htmlFor="radio-daily">Daily digest</FieldLabel>
+          <span className="text-muted-foreground text-sm">One message each morning.</span>
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <RadioGroupItem id="radio-weekly" value="weekly" className="mt-0.5" />
+        <div className="flex flex-col gap-1">
+          <FieldLabel htmlFor="radio-weekly">Weekly summary</FieldLabel>
+          <span className="text-muted-foreground text-sm">One message on Monday.</span>
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <RadioGroupItem id="radio-never" value="never" disabled className="mt-0.5" />
+        <div className="flex flex-col gap-1">
+          <FieldLabel htmlFor="radio-never" className="text-muted-foreground">
+            Never
+          </FieldLabel>
+          <span className="text-muted-foreground text-sm">
+            Disabled while an audit hold is active.
+          </span>
+        </div>
+      </div>
+    </RadioGroup>
+  )
+}
+```
+
+## Props
+
+**`value`** `string` · optional · default: — — The selected item's value, when the group is controlled.
+**`defaultValue`** `string` · optional · default: — — The item selected initially, for an uncontrolled group.
+**`onValueChange`** `(value: string) => void` · optional · default: — — Called when the selection changes.
+**`name`** `string` · optional · default: — — The form field name submitted with the form.
+**`form`** `string` · optional · default: — — Identifies the form that owns the hidden inputs.
+**`disabled`** `boolean` · optional · default: — — Whether every item ignores user interaction.
+**`readOnly`** `boolean` · optional · default: — — Whether the user may not change the selection.
+**`required`** `boolean` · optional · default: — — Whether a value must be chosen before the form submits.