@nanisoft/prism-llms 0.4.0 → 0.5.1

package/dist/md/components/section.md

@@ -0,0 +1,91 @@
+# Section
+
+The container and heading primitives every Block composes for rhythm.
+
+```tsx
+import { Section, SectionHeading } from '@nanisoft/prism-ui/components/section'
+```
+
+## Overview
+
+`Section` is the container primitive every Block composes. It owns the page
+container width and the vertical rhythm (`py-16 sm:py-24`), so one page keeps one
+rhythm instead of each block re-deriving its own padding.
+
+`SectionHeading` is the heading that sits inside it: an optional eyebrow, a
+title, and an optional description. Its `as` prop selects the heading level, and
+it defaults to `h2` because a Block is composed rather than a page.
+
+## Guidelines
+
+### When to use
+
+Use `Section` for any full-width band of a page, and `SectionHeading` for the
+heading that introduces it. A Block uses both, and a page composition uses them
+between blocks to keep the rhythm continuous.
+
+Use `SectionHeading` with `as="h1"` when the section is the page's primary
+heading, and with a deeper level when the document already names the content.
+
+### When not to use
+
+Do not use `Section` for a card or an inline group. It is a page-level band, and
+its padding is the page's vertical rhythm; nesting it produces uneven spacing.
+
+Do not re-declare the container width or the section padding at a call site. If
+a band needs a different width, that is a token or a component change, not a
+`max-w-*` on the section.
+
+### Best practices
+
+- One `h1` per page. Every other heading nests under it, and `SectionHeading`'s
+  default `h2` is the level below the page title.
+- Pass `headingLevel` or `as` at the call site when a Block sits under a heading
+  the document already owns, so the outline stays single-rooted.
+- Keep `eyebrow` opt-in. It has no default, because a hardcoded eyebrow makes
+  every consumer inherit a claim about their product.
+- Use `align="left"` for data sections and the centered default for hero and
+  closing sections, and keep the choice consistent within a page.
+
+### Content guidelines
+
+- A heading is a noun phrase in sentence case.
+- A description is one or two sentences and states the section's job.
+- An eyebrow is a short label, three words at most, and it never repeats the
+  heading.
+
+**A section band with a heading, at a heading level the demo owns.**
+
+```tsx
+import { Section, SectionHeading } from '@nanisoft/prism-ui/components/section'
+
+/** A section band with a heading, at a heading level the demo owns. */
+export default function SectionDemo() {
+  return (
+    <Section className="bg-muted/30 rounded-xl">
+      <SectionHeading
+        as="h3"
+        eyebrow="Release 2.4"
+        title="What changed"
+        description="Three fixes and one new block. No token changes."
+        align="left"
+        className="mb-6"
+      />
+      <p className="text-muted-foreground text-sm">
+        The section owns the container width and the vertical rhythm, so this
+        band keeps the page&apos;s spacing without re-declaring it.
+      </p>
+    </Section>
+  )
+}
+```
+
+## Props
+
+**`index`** `string` · optional · default: — — A short ordinal for the section: "01", "02", "7". It is rendered in the mono face above the title, because a section's position in a sequence is machine notation rather than a word, and the mono stack is what this repository annotates machine-readable values with. It is a separate prop from `eyebrow` and not a default value of it, because the two say different things: an eyebrow is a word a reader reads, and an index is a number that is only meaningful beside the section it counts. All four NaniSoft sites render one of these above every section heading, and three of them render it beside a label rather than above a title, which is the same fact in a different arrangement.
+**`eyebrow`** `ReactNode` · optional · default: —
+**`title`** `ReactNode` · required · default: —
+**`description`** `ReactNode` · optional · default: —
+**`align`** `'center' | 'left'` · optional · default: —
+**`as`** `HeadingLevel` · optional · default: — — Heading level. Defaults to `h2` because blocks compose under a page heading. A page that renders a block as its primary heading passes `as="h1"`; a document with no `h1` gives screen-reader and search engines no top-level entry point.
+**`className`** `string` · optional · default: —

package/dist/md/components/select.md

@@ -1,14 +1,150 @@
 # Select
 
-antd Select, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The control that chooses one option from a list that opens on demand.
 
-```ts
-import { Select } from '@nanisoft/prism-ui/components';
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from '@nanisoft/prism-ui/components/select'
 ```
 
-`Select` is antd's [Select](https://ant.design/components/select), re-exported unchanged.
+## Overview
 
-- Extends: antd **Select** — for inherited props and demos, use the antd MCP (`antd_info Select`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Select chooses one option from a list that opens on demand. It ships as
+`Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`,
+`SelectGroup`, `SelectLabel` and `SelectSeparator`. `Select` holds the value,
+`SelectTrigger` shows the current choice, and `SelectContent` carries the
+options. Pass the options to the root as `items` too, so the trigger can render
+a label before any option has mounted.
 
-_No additional props beyond the antd base component._
+The trigger is a button with a combobox role, so it is reachable by Tab. In the
+open popup the arrow keys move through the options, typing letters jumps to a
+match, Enter chooses, and Escape closes without changing the value.
+
+## Guidelines
+
+### When to use
+
+Use a Select when the option set is long enough that a radio group would
+overwhelm the form, or when only the chosen value needs to stay visible. It fits
+settings and filters where the reader picks one value from a known list.
+
+### When not to use
+
+Do not use a Select for two or three mutually exclusive options. A RadioGroup
+shows every choice at once and needs no opening click.
+
+Do not use it when the reader may choose more than one value, or for navigation.
+Checkboxes state independence; a link handles a route change.
+
+### Best practices
+
+- Pair the Select with a `FieldLabel` whose `htmlFor` matches the trigger's
+  `id`. The value shows in the trigger, so the label names the field.
+- Pass `items` so the trigger can resolve a label before an option has mounted.
+  Without it, Base UI falls back to the raw value.
+- Give `SelectValue` a placeholder that says what to do, such as "Choose a
+  region", rather than naming a default the reader did not choose.
+- Add `SelectGroup` and `SelectLabel` once a list passes roughly eight options,
+  so the reader can scan by group.
+- A disabled option is still readable. Explain why it cannot be chosen in
+  adjacent text rather than leaving a dead row unexplained.
+
+### Content guidelines
+
+- Write option labels as sentence-case nouns: "Europe West", not "EUROPE WEST".
+- Order options by the reader's expectation: size, plan, region, or product.
+- Reserve the first option for a real choice. Do not add an empty "Select one"
+  row when the placeholder already asks the question.
+
+**A labelled Select with a grouped option list and a controlled value.**
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+
+import { Field, FieldLabel } from '@nanisoft/prism-ui/components/field'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@nanisoft/prism-ui/components/select'
+
+/** A labelled Select with a grouped option list and a controlled value. */
+export default function SelectDemo() {
+  const [role, setRole] = useState('editor')
+
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-6">
+      <Field>
+        <FieldLabel htmlFor="select-role">Role</FieldLabel>
+        <Select
+          value={role}
+          onValueChange={(value) => setRole(value ?? '')}
+          items={{ viewer: 'Viewer', editor: 'Editor', admin: 'Admin' }}
+        >
+          <SelectTrigger id="select-role" className="w-full">
+            <SelectValue placeholder="Choose a role" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Team roles</SelectLabel>
+              <SelectItem value="viewer">Viewer</SelectItem>
+              <SelectItem value="editor">Editor</SelectItem>
+              <SelectItem value="admin">Admin</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="select-region">Region</FieldLabel>
+        <Select
+          defaultValue="eu-west"
+          items={{
+            'eu-west': 'Europe West',
+            'us-east': 'US East',
+            'ap-south': 'Asia South',
+          }}
+        >
+          <SelectTrigger id="select-region" className="w-full">
+            <SelectValue placeholder="Choose a region" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="eu-west">Europe West</SelectItem>
+            <SelectItem value="us-east">US East</SelectItem>
+            <SelectItem value="ap-south" disabled>
+              Asia South (paused)
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+    </div>
+  )
+}
+```
+
+## Props
+
+**`value`** `string` · optional · default: — — The selected value, when the select is controlled.
+**`defaultValue`** `string` · optional · default: — — The value selected initially, for an uncontrolled select.
+**`onValueChange`** `(value: string | null) => void` · optional · default: — — Called when the selected value changes.
+**`open`** `boolean` · optional · default: — — The controlled open state of the popup.
+**`defaultOpen`** `boolean` · optional · default: — — The initially open state of the popup.
+**`onOpenChange`** `(open: boolean) => void` · optional · default: — — Called when the popup opens or closes.
+**`name`** `string` · optional · default: — — The form field name submitted with the form.
+**`form`** `string` · optional · default: — — Identifies the form that owns the hidden input.
+**`required`** `boolean` · optional · default: — — Whether a value must be chosen before the form submits.
+**`disabled`** `boolean` · optional · default: — — Whether the select ignores user interaction.
+**`readOnly`** `boolean` · optional · default: — — Whether the user may open the popup but not change the value.
+**`items`** `Record<string, React.ReactNode> | ReadonlyArray<{ label: React.ReactNode; value: string; }>` · optional · default: — — The options, keyed by value, so the trigger can render a label before any item has mounted. Without it, `SelectValue` shows the raw value.
+**`itemToStringLabel`** `(value: string) => string` · optional · default: — — Converts an item value to the label shown in the trigger.
+**`children`** `React.ReactNode` · optional · default: — — The trigger and the popup content.
+**`size`** `'sm' | 'default'` · optional · default: `default` — The trigger's height.
+**`placeholder`** `React.ReactNode` · optional · default: — — Shown when no value is selected.
+**`side`** `'top' | 'right' | 'bottom' | 'left'` · optional · default: `bottom` — Which side of the trigger the list is placed on.
+**`align`** `'start' | 'center' | 'end'` · optional · default: `center` — How the list aligns against the trigger.
+**`sideOffset`** `number` · optional · default: `4` — The distance in pixels between the trigger and the list.
+**`label`** `string` · optional · default: — — A text label used for keyboard typeahead when the option text differs.

package/dist/md/components/separator.md

@@ -0,0 +1,77 @@
+# Separator
+
+A hairline rule that divides content, horizontally or vertically.
+
+```tsx
+import { Separator } from '@nanisoft/prism-ui/components/separator'
+```
+
+## Overview
+
+A Separator is a hairline rule that divides content. It renders a single
+`<div>` at either `horizontal` or `vertical` orientation, drawn with the border
+token.
+
+The rule is decorative by default, so it is hidden from assistive technology and
+does not enter the reading order. Pass `decorative={false}` when the rule marks a
+real separation in a set of controls, such as between groups in a toolbar, and
+it becomes an ARIA separator with a matching orientation.
+
+## Guidelines
+
+### When to use
+
+Use a Separator to divide two groups of content in a stack, or two items inside
+a horizontal row such as a toolbar or a breadcrumb-style meta line.
+
+### When not to use
+
+Do not use a Separator where whitespace would do. A rule between two paragraphs
+adds ink without adding structure; space already separates them.
+
+Do not use one as a card border or a panel edge. A surface boundary is a border
+on the surface itself, not a rule placed beside it.
+
+Do not use a Separator as decoration. A rule that does not divide anything is
+noise the reader has to interpret.
+
+### Best practices
+
+- Keep the default `horizontal` orientation for stacked content and switch to
+  `vertical` only inside a row.
+- Give a vertical Separator a height through its parent. It fills the parent's
+  height, so a parent with no height collapses the rule to nothing.
+- Leave the rule decorative unless it marks a boundary a screen reader needs,
+  and pass `decorative={false}` only in that case.
+- Use one orientation per region. Mixing rules in a single stack reads as two
+  different structures.
+- Prefer the token's hairline and colour. A thicker or tinted rule is a second
+  visual language for the same job.
+
+**A horizontal rule between rows, and vertical rules inside one row.**
+
+```tsx
+import { Separator } from '@nanisoft/prism-ui/components/separator'
+
+/** A horizontal rule between rows, and vertical rules inside one row. */
+export default function SeparatorDemo() {
+  return (
+    <div className="flex max-w-measure flex-col gap-4">
+      <p className="text-muted-foreground text-sm">Account</p>
+      <Separator />
+      <p className="text-muted-foreground text-sm">Notifications</p>
+      <div className="flex h-5 items-center gap-4">
+        <span className="text-sm">Draft</span>
+        <Separator orientation="vertical" />
+        <span className="text-sm">Review</span>
+        <Separator orientation="vertical" />
+        <span className="text-sm">Published</span>
+      </div>
+    </div>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<div>` element. No additional Prism-specific props.

package/dist/md/components/skeleton.md

@@ -1,14 +1,78 @@
 # Skeleton
 
-antd Skeleton, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+A placeholder surface that mirrors the shape of content while it loads.
 
-```ts
-import { Skeleton } from '@nanisoft/prism-ui/components';
+```tsx
+import { Skeleton } from '@nanisoft/prism-ui/components/skeleton'
 ```
 
-`Skeleton` is antd's [Skeleton](https://ant.design/components/skeleton), re-exported unchanged.
+## Overview
 
-- Extends: antd **Skeleton** — for inherited props and demos, use the antd MCP (`antd_info Skeleton`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Skeleton is a placeholder surface that mirrors the shape of content while it
+loads. It renders a single muted `<div>` whose size comes from `className`, so
+one component stands in for a title, a line of text, an avatar or an action.
 
-_No additional props beyond the antd base component._
+It ships without a shimmer on purpose. Prism authors no keyframes, so the
+placeholder is static and the shape, not a pulse, is what tells the reader that
+content is coming. The element is hidden from assistive technology, so a screen
+reader hears the finished content when it arrives rather than an empty box.
+
+## Guidelines
+
+### When to use
+
+Use a Skeleton when content is loading into a layout the reader already knows,
+such as a list, a card grid or a detail panel that reloads in place. The
+placeholder keeps the page from jumping when the content lands.
+
+### When not to use
+
+Do not use a Skeleton for work the reader has just started. A button that is
+submitting shows its own loading state; a placeholder elsewhere on the page
+implies a different region is loading.
+
+Do not use a Skeleton as a loading indicator for the whole application. A
+first paint with no known layout is better served by a spinner or a simple
+progress bar.
+
+Do not use one when the load is near instant. A placeholder that appears and
+disappears within a frame reads as a glitch.
+
+### Best practices
+
+- Match the final shape and size. A skeleton smaller than the content it
+  replaces causes a layout shift, which is the problem it exists to prevent.
+- Group the placeholders of one region into a single block, and mirror the real
+  structure: a title line, two body lines, an action.
+- Keep the surrounding layout identical to the loaded state, so only the content
+  changes.
+- Render the same number of placeholder rows as the content the layout will
+  hold. A grid that collapses from six boxes to two is a lie in both states.
+- Do not add a spinner inside a skeleton. One loading signal per region is
+  enough.
+- Keep the placeholder decorative. The live region around it, or the arriving
+  content, should carry the announcement.
+
+**A card-shaped placeholder: title, two body lines and an action.**
+
+```tsx
+import { Skeleton } from '@nanisoft/prism-ui/components/skeleton'
+
+/** A card-shaped placeholder: title, two body lines and an action. */
+export default function SkeletonDemo() {
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-4">
+      <Skeleton className="h-5 w-40" />
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-4/5" />
+      </div>
+      <Skeleton className="h-9 w-28" />
+    </div>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<div>` element. No additional Prism-specific props.

package/dist/md/components/slider.md

@@ -1,14 +1,97 @@
 # Slider
 
-antd Slider, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The control that chooses a number along a range.
 
-```ts
-import { Slider } from '@nanisoft/prism-ui/components';
+```tsx
+import { Slider } from '@nanisoft/prism-ui/components/slider'
 ```
 
-`Slider` is antd's [Slider](https://ant.design/components/slider), re-exported unchanged.
+## Overview
 
-- Extends: antd **Slider** — for inherited props and demos, use the antd MCP (`antd_info Slider`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Slider chooses a number along a range. It renders a styled track with a real
+range input beside it, so it is reachable by Tab and moved by the arrow keys,
+with Home and End jumping to the ends. The current value is exposed to assistive
+technology through the input's range semantics.
 
-_No additional props beyond the antd base component._
+Use the `min`, `max` and `step` props to describe the range, and give the
+control an `aria-label` or a visible label, because a slider with no name tells
+a screen reader nothing about what it changes.
+
+## Guidelines
+
+### When to use
+
+Use a Slider when the value is approximate and the reader benefits from seeing
+where it sits in a range: volume, opacity, a threshold, a size with a sensible
+middle.
+
+### When not to use
+
+Do not use a Slider when the exact number matters. An Input of type number lets
+the reader type or step to the value and is easier to make precise.
+
+Do not use one for a range with only two or three meaningful positions. A
+RadioGroup or a Select names each choice; a slider makes the reader hunt.
+
+Do not use a Slider for a value you cannot plot, such as a colour name. Pick the
+control that matches the kind of value.
+
+### Best practices
+
+- Pair the control with a visible label and an `aria-label`. The label names the
+  quantity; the value is read from the control.
+- Snap the range to meaningful steps. `step` should divide the span from `min`
+  to `max` evenly, so every reachable value is one the reader would want.
+- Show the current value near the slider when precision matters, and update it
+  as the value changes.
+- Set sensible `min` and `max` for the task. An unbounded slider invites values
+  the rest of the product cannot use.
+- Use the disabled state with a nearby reason, as with any other control.
+
+### Content guidelines
+
+- Name the quantity, not the control: "Opacity", "Export size".
+- Keep units out of the label when they can live in the value readout, and
+  include them in the readout when they are needed.
+- Avoid phrasing the label as a question. State the value being set.
+
+**Sliders for an adjustable value, a stepped value and a disabled one.**
+
+```tsx
+'use client'
+
+import { Slider } from '@nanisoft/prism-ui/components/slider'
+
+/** Sliders for an adjustable value, a stepped value and a disabled one. */
+export default function SliderDemo() {
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-8">
+      <div className="flex flex-col gap-3">
+        <p className="text-sm font-medium">Opacity</p>
+        <Slider defaultValue={75} aria-label="Opacity" />
+      </div>
+      <div className="flex flex-col gap-3">
+        <p className="text-sm font-medium">Export size</p>
+        <Slider defaultValue={40} aria-label="Export size" min={0} max={100} step={10} />
+      </div>
+      <div className="flex flex-col gap-3">
+        <p className="text-muted-foreground text-sm font-medium">Frame rate</p>
+        <Slider defaultValue={60} aria-label="Frame rate" disabled />
+      </div>
+    </div>
+  )
+}
+```
+
+## Props
+
+**`value`** `number` · optional · default: — — The current value, when the slider is controlled.
+**`defaultValue`** `number` · optional · default: — — The value the slider starts at, for an uncontrolled slider.
+**`min`** `number` · optional · default: `0` — The minimum allowed value.
+**`max`** `number` · optional · default: `100` — The maximum allowed value.
+**`step`** `number` · optional · default: `1` — The granularity the slider steps by.
+**`disabled`** `boolean` · optional · default: — — Whether the slider ignores user interaction.
+**`orientation`** `'horizontal' | 'vertical'` · optional · default: `horizontal` — The axis the slider moves along.
+**`name`** `string` · optional · default: — — The form field name submitted with the form.
+**`form`** `string` · optional · default: — — Identifies the form that owns the hidden input.
+**`onValueChange`** `(value: number) => void` · optional · default: — — Called as the value changes.

package/dist/md/components/switch.md

@@ -1,14 +1,111 @@
 # Switch
 
-antd Switch, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The control that turns a setting on or off immediately.
 
-```ts
-import { Switch } from '@nanisoft/prism-ui/components';
+```tsx
+import { Switch } from '@nanisoft/prism-ui/components/switch'
 ```
 
-`Switch` is antd's [Switch](https://ant.design/components/switch), re-exported unchanged.
+## Overview
 
-- Extends: antd **Switch** — for inherited props and demos, use the antd MCP (`antd_info Switch`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Switch turns a single setting on or off, and the change takes effect at once.
+It renders a styled track with a hidden native checkbox beside it, so it submits
+with a form while reading as a physical toggle. Space toggles the focused
+control, and its on and off states are announced to assistive technology.
 
-_No additional props beyond the antd base component._
+The difference from a Checkbox is timing, not shape. A Switch is a setting that
+is already in force; a Checkbox is a choice collected before a save.
+
+## Guidelines
+
+### When to use
+
+Use a Switch when flipping the control applies the change immediately and the
+reader expects no further step: enabling notifications, publishing a preview, or
+turning a feature on.
+
+### When not to use
+
+Do not use a Switch inside a form that still needs a Save action. If the change
+is pending a submit, a Checkbox is the honest control.
+
+Do not use one to choose between two named options, such as Light and Dark. That
+is a choice between values, and a RadioGroup or a Select names both.
+
+Do not use a Switch for an action that cannot be undone with the same control. A
+one-way action is a Button.
+
+### Best practices
+
+- Label the setting, not the state. The label describes what the switch
+  controls; the on and off positions are conveyed by the control itself.
+- Pair each Switch with a `FieldLabel` and `htmlFor`, and put the consequence in
+  an adjacent helper line rather than in the label.
+- For a change that affects a shared resource, confirm or offer an undo. An
+  immediate setting with wide effect is easy to flip by accident.
+- Keep the on state visually distinct beyond position alone, so the state is
+  legible to a reader who cannot rely on the thumb's movement.
+- Use `disabled` with a reason in reach, and prefer an explanatory line over a
+  silent greyed row.
+
+### Content guidelines
+
+- Write the label as the thing being controlled, in sentence case: "Release
+  notifications", "Preview builds".
+- Keep helper text to one sentence that states the effect, including who is
+  affected when it is shared.
+- Avoid "Enable" or "Turn on" in the label; the control already says that.
+
+**Switches that take effect immediately, one of them already on.**
+
+```tsx
+'use client'
+
+import { FieldLabel } from '@nanisoft/prism-ui/components/field'
+import { Switch } from '@nanisoft/prism-ui/components/switch'
+
+/** Switches that take effect immediately, one of them already on. */
+export default function SwitchDemo() {
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-5">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <FieldLabel htmlFor="switch-notifications">Release notifications</FieldLabel>
+          <span className="text-muted-foreground text-sm">
+            A message when a new version is published.
+          </span>
+        </div>
+        <Switch id="switch-notifications" defaultChecked />
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <FieldLabel htmlFor="switch-preview">Preview builds</FieldLabel>
+          <span className="text-muted-foreground text-sm">
+            Build every pull request on the free plan.
+          </span>
+        </div>
+        <Switch id="switch-preview" />
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <FieldLabel htmlFor="switch-sso" className="text-muted-foreground">
+          Single sign-on
+        </FieldLabel>
+        <Switch id="switch-sso" disabled />
+      </div>
+    </div>
+  )
+}
+```
+
+## Props
+
+**`checked`** `boolean` · optional · default: — — The controlled active state.
+**`defaultChecked`** `boolean` · optional · default: — — The initially active state, for an uncontrolled switch.
+**`disabled`** `boolean` · optional · default: — — Whether the control ignores user interaction.
+**`readOnly`** `boolean` · optional · default: — — Whether the user may not change the state.
+**`required`** `boolean` · optional · default: — — Whether the state must be active before the form submits.
+**`name`** `string` · optional · default: — — The form field name submitted with the form.
+**`value`** `string` · optional · default: — — The value submitted when the switch is on.
+**`uncheckedValue`** `string` · optional · default: — — The value submitted when the switch is off.
+**`form`** `string` · optional · default: — — Identifies the form that owns the hidden input.
+**`onCheckedChange`** `(checked: boolean) => void` · optional · default: — — Called when the active state changes.