prime-ui-kit 0.0.1

package/src/components/radio/examples/settings-group.tsx

@@ -0,0 +1,30 @@
+import { Radio } from "prime-ui-kit";
+
+import styles from "./radio-examples.module.css";
+
+/** Settings screen: `fieldset` + `legend`, theme radios, one disabled tier-gated option. */
+export default function SettingsGroupExample() {
+  return (
+    <fieldset className={styles.fieldsetPlain}>
+      <legend className={styles.legend}>Appearance</legend>
+      <div className={styles.columnTight}>
+        <Radio.Root name="theme-example" value="light" defaultChecked>
+          <Radio.Label>Light</Radio.Label>
+          <Radio.Hint>Best for bright environments.</Radio.Hint>
+        </Radio.Root>
+        <Radio.Root name="theme-example" value="dark">
+          <Radio.Label>Dark</Radio.Label>
+          <Radio.Hint>Reduced glare in low light.</Radio.Hint>
+        </Radio.Root>
+        <Radio.Root name="theme-example" value="system">
+          <Radio.Label>Match system</Radio.Label>
+          <Radio.Hint>Follows your OS light/dark schedule.</Radio.Hint>
+        </Radio.Root>
+        <Radio.Root name="theme-example" value="contrast" disabled>
+          <Radio.Label>High contrast</Radio.Label>
+          <Radio.Hint>Available on Enterprise; contact sales to enable.</Radio.Hint>
+        </Radio.Root>
+      </div>
+    </fieldset>
+  );
+}

package/src/components/radio/examples/shipping-method.tsx

@@ -0,0 +1,26 @@
+import { Radio } from "prime-ui-kit";
+
+import styles from "./radio-examples.module.css";
+
+/** Checkout-style carrier choice: same `name`, short hints under each option. */
+export default function ShippingMethodExample() {
+  return (
+    <fieldset className={styles.fieldsetPlain}>
+      <legend className={styles.legend}>Shipping method</legend>
+      <div className={styles.columnTight}>
+        <Radio.Root name="shipping-example" value="standard" defaultChecked>
+          <Radio.Label>Standard (5–7 business days)</Radio.Label>
+          <Radio.Hint>Free on orders over $50.</Radio.Hint>
+        </Radio.Root>
+        <Radio.Root name="shipping-example" value="express">
+          <Radio.Label>Express (2 business days)</Radio.Label>
+          <Radio.Hint>Flat rate; tracking included.</Radio.Hint>
+        </Radio.Root>
+        <Radio.Root name="shipping-example" value="pickup">
+          <Radio.Label>Pick up in store</Radio.Label>
+          <Radio.Hint>Ready next day at your selected location.</Radio.Hint>
+        </Radio.Root>
+      </div>
+    </fieldset>
+  );
+}

package/src/components/segmented-control/COMPONENT.md

@@ -0,0 +1,121 @@
+# SegmentedControl
+
+**Проектирование по умолчанию:** при проектировании экранов и примеров изначально выбирай **`m`** для `size` (где есть ось размера), если явно не оговорено иное.
+
+## About
+
+A single-choice control: a horizontal `radiogroup` whose options are segment buttons, with a floating pill indicator under the active segment.
+
+- **Use** when there are few mutually exclusive options that should stay visible (period toggles, layout mode, compact filters).
+- **Use** with **`SegmentedControl.Icon`** plus visible or visually hidden text when a segment is icon-led.
+- **Do not use** for long lists or many options—prefer [Select](../select/COMPONENT.md) or a dropdown.
+- **Do not use** when each choice should show its own panel and tab keyboard model—prefer [Tabs](../tabs/COMPONENT.md).
+- **Do not use** for independent or multi-select actions—prefer [Button group](../button-group/COMPONENT.md) or other patterns.
+- **Do not use** expecting a vertical stack or orientation prop; layout is horizontal only.
+
+## Composition
+
+- **`SegmentedControl.Root`** — outer `div` with **`role="radiogroup"`**, **`data-size`**, focus and arrow-key handling, **`ControlSizeProvider`** for descendants, and a decorative indicator layer (`aria-hidden`).
+- **`SegmentedControl.Item`** — direct children of **`Root`** (and only in that role for correct behavior). Each item is a **`button`** with **`role="radio"`**; order in the tree is the visual order of segments.
+- **`SegmentedControl.Icon`** — optional **`span`** with **`aria-hidden="true"`** inside an **`Item`**; pair with visible label text or an accessible name in **`Item`** **`children`**.
+
+### Minimal example
+
+```tsx
+import { SegmentedControl } from "prime-ui-kit";
+
+export function Example() {
+  return (
+    <SegmentedControl.Root defaultValue="a">
+      <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+      <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+    </SegmentedControl.Root>
+  );
+}
+```
+
+### Canonical composition (reference)
+
+For a **single file** that combines **controlled mode**, **`SegmentedControl.Icon` + text**, **icon-only segments with visually hidden labels**, and layout notes (remember **`Root` does not forward `aria-label`**), see **`examples/canonical-composition.tsx`**. Imports use **`"prime-ui-kit"`** so the same patterns work in an app after installing the package.
+
+The **playground** (`playground/sections/SegmentedControlSection.tsx`) renders the same scenarios as **`playground/snippets/segmented/*.tsx`** (internal `@/` imports). The **`examples/`** files below mirror those snippets with **`"prime-ui-kit"`** imports.
+
+### Example files in `examples/`
+
+| File | Scenario (aligned with `playground/snippets/segmented/`) |
+|------|----------|
+| `sizes.tsx` | All four **`size`** values `s`–`xl` with identical segment labels |
+| `states.tsx` | Default group; **`disabled`** on one **`Item`**; **`disabled`** on **`Root`** |
+| `controlled.tsx` | **`value`** + **`onValueChange`** (no **`defaultValue`**) |
+| `composition.tsx` | **`Icon`** + label text; icon-only rows with visually hidden text in **`Item`** |
+| `full-width.tsx` | Narrow container; **`className`** overrides root **`width: fit-content`** so segments share width |
+| `features.tsx` | Two, three, and four segments; keyboard (**ArrowLeft** / **ArrowRight** on the group) |
+
+Additional English product-style recipes:
+
+| File | Scenario |
+|------|----------|
+| `canonical-composition.tsx` | Combined: icons, controlled period, icon-only (superset demo) |
+| `view-mode.tsx` | Catalog view: List / Grid / Table |
+| `pricing-toggle.tsx` | Billing: Monthly / Annual |
+| `catalog-filters.tsx` | Compact availability filter; **`size="s"`** |
+
+### Note for LLMs
+
+- **Imports:** `SegmentedControl`, `Icon`, and `Typography` from **`"prime-ui-kit"`** in **`examples/`**; paths are relative to `src/components/segmented-control/examples/`. Playground snippets use **`@/…`** but should stay behavior-identical to these files.
+- **Values are strings:** map `onValueChange` to app enums with a type guard or narrow union; **`Item` does not accept `aria-label`**—accessible names come from **visible** `children` and/or **visually hidden** text inside **`Item`**.
+- **`SegmentedControl.Icon`** is **`aria-hidden`**; always pair with visible text or a visually hidden span inside the same **`Item`**.
+- **`Root`** does **not** forward **`aria-label`**, **`aria-labelledby`**, or **`style`**: use a **wrapper** and visible copy, or **`aria-labelledby`** on a wrapper that references visible page text—not on **`Root`**.
+- **Keyboard:** **ArrowLeft** / **ArrowRight** move among **enabled** items; **`disabled`** on **`Item`** is skipped; **`defaultValue=""`** leaves no selection and **`Root`** is focusable until the user picks a segment.
+- **Many options or vertical layout:** prefer [Select](../select/COMPONENT.md); **tabbed panels** → [Tabs](../tabs/COMPONENT.md).
+
+## Rules
+
+- **Controlled:** pass **`value`** and handle changes with **`onValueChange`**. **Uncontrolled:** use **`defaultValue`** (defaults to **`""`**).
+- **`defaultValue=""`** (and no controlled **`value`**) means **no** segment is selected; **`Root`** gets **`tabIndex={0}`** so the group can be focused until a segment is chosen.
+- Values are **strings**; mapping to app enums or unions is the consumer’s responsibility.
+- **`disabled`** on **`Root`** sets **`aria-disabled`** on the group and **`data-disabled`**; all segments are inactive.
+- **`disabled`** on an **`Item`** skips that segment for **Left/Right** arrow navigation among enabled radios.
+- **Roving tabindex:** **Tab** focuses the group (when nothing is selected) or the checked segment; **ArrowLeft** / **ArrowRight** move selection and focus across enabled items.
+- **`SegmentedControl.Icon`** is **`aria-hidden`**; the segment’s accessible name must come from **`Item`** **`children`** (visible text and/or visually hidden text). **`Item`** does not forward extra attributes—there is no **`…rest`**—so you cannot set **`aria-label`** on the segment via props.
+- **No `asChild`** and no merging **`Root`** with an arbitrary element.
+- **`Root`** does **not** forward arbitrary HTML attributes (**`aria-label`**, **`style`**, etc.); wrap **`Root`** in another element when you need extra semantics or layout hooks.
+- The indicator position follows the active segment’s layout; updates use **`ResizeObserver`** and **`MutationObserver`** on the root—avoid unpredictable segment size changes without expecting a reflow/recalc.
+
+## API
+
+### SegmentedControl.Root
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| value | `string` | — | No | Selected value in controlled mode |
+| defaultValue | `string` | `""` | No | Initial value when uncontrolled; empty string means no segment selected |
+| onValueChange | `(value: string) => void` | — | No | Called when the selected value changes |
+| disabled | `boolean` | `false` | No | Disables the entire group |
+| size | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Segment dimensions and typography |
+| children | `React.ReactNode` | — | Yes | `Item` nodes (and their content) |
+| className | `string` | — | No | Extra class on the container (e.g. full-width override when the default **`width: fit-content`** is too narrow—see **`examples/full-width.tsx`**) |
+
+### SegmentedControl.Item
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| value | `string` | — | Yes | Segment identifier |
+| disabled | `boolean` | `false` | No | Disables this segment |
+| children | `React.ReactNode` | — | Yes | Label and/or `SegmentedControl.Icon` |
+| className | `string` | — | No | Extra class on the button |
+
+### SegmentedControl.Icon
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| children | `React.ReactNode` | — | Yes | Icon node |
+| className | `string` | — | No | Extra class on the `span` |
+| …rest | `Omit<React.HTMLAttributes<HTMLSpanElement>, "children">` | — | No | Other `span` attributes |
+
+## Related
+
+- [Tabs](../tabs/COMPONENT.md) — separate panels and tab keyboard model.
+- [Button group](../button-group/COMPONENT.md) — grouped actions, not a single required choice.
+- [Radio](../radio/COMPONENT.md) — standalone radio field primitive.
+- [Select](../select/COMPONENT.md) — many options or list in a dropdown.

package/src/components/segmented-control/examples/canonical-composition.tsx

@@ -0,0 +1,70 @@
+import { Icon, SegmentedControl, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./segmented-examples.module.css";
+
+/**
+ * Canonical composition: controlled group, icon + text, and icon-only segments with visually hidden labels.
+ */
+export default function CanonicalCompositionExample() {
+  const [period, setPeriod] = React.useState("week");
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-l)",
+        alignItems: "flex-start",
+      }}
+    >
+      <SegmentedControl.Root defaultValue="light">
+        <SegmentedControl.Item value="light">
+          <SegmentedControl.Icon>
+            <Icon name="theme.light" />
+          </SegmentedControl.Icon>
+          Light
+        </SegmentedControl.Item>
+        <SegmentedControl.Item value="dark">
+          <SegmentedControl.Icon>
+            <Icon name="theme.dark" />
+          </SegmentedControl.Icon>
+          Dark
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>
+
+      <SegmentedControl.Root value={period} onValueChange={setPeriod}>
+        <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+        <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+        <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+      </SegmentedControl.Root>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--prime-sys-spacing-s)",
+          alignItems: "flex-start",
+        }}
+      >
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Layout preview
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="grid">
+          <SegmentedControl.Item value="feed">
+            <SegmentedControl.Icon>
+              <Icon name="nav.home" />
+            </SegmentedControl.Icon>
+            <span className={styles.visuallyHidden}>Feed</span>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="grid">
+            <SegmentedControl.Icon>
+              <Icon name="nav.layoutGrid" />
+            </SegmentedControl.Icon>
+            <span className={styles.visuallyHidden}>Grid</span>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/catalog-filters.tsx

@@ -0,0 +1,41 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+type StockFilter = "all" | "in_stock" | "preorder";
+
+function isStockFilter(value: string): value is StockFilter {
+  return value === "all" || value === "in_stock" || value === "preorder";
+}
+
+/**
+ * Compact filter strip: few exclusive scopes above a product grid (pair with Select when options grow).
+ */
+export default function CatalogFiltersExample() {
+  const [stock, setStock] = React.useState<StockFilter>("all");
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-s)",
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Root as="span" variant="caption" tone="muted">
+        Availability
+      </Typography.Root>
+      <SegmentedControl.Root
+        value={stock}
+        onValueChange={(v) => {
+          if (isStockFilter(v)) setStock(v);
+        }}
+        size="s"
+      >
+        <SegmentedControl.Item value="all">All</SegmentedControl.Item>
+        <SegmentedControl.Item value="in_stock">In stock</SegmentedControl.Item>
+        <SegmentedControl.Item value="preorder">Pre-order</SegmentedControl.Item>
+      </SegmentedControl.Root>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/composition.tsx

@@ -0,0 +1,55 @@
+import { Icon, SegmentedControl, Typography } from "prime-ui-kit";
+
+import styles from "./segmented-examples.module.css";
+
+/** Icon + text and icon-only segments with visually hidden labels (mirrors playground/snippets/segmented/composition). */
+export default function SegmentedCompositionExample() {
+  return (
+    <div className={styles.demoStack}>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Icon and label
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="light">
+          <SegmentedControl.Item value="light">
+            <SegmentedControl.Icon>
+              <Icon name="theme.light" />
+            </SegmentedControl.Icon>
+            Light
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="dark">
+            <SegmentedControl.Icon>
+              <Icon name="theme.dark" />
+            </SegmentedControl.Icon>
+            Dark
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Icon-only + visually hidden text
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="grid">
+          <SegmentedControl.Item value="feed">
+            <SegmentedControl.Icon>
+              <Icon name="nav.home" />
+            </SegmentedControl.Icon>
+            <span className={styles.visuallyHidden}>Feed</span>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="grid">
+            <SegmentedControl.Icon>
+              <Icon name="nav.layoutGrid" />
+            </SegmentedControl.Icon>
+            <span className={styles.visuallyHidden}>Grid</span>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="compact">
+            <SegmentedControl.Icon>
+              <Icon name="theme.light" />
+            </SegmentedControl.Icon>
+            <span className={styles.visuallyHidden}>Compact</span>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/controlled.tsx

@@ -0,0 +1,23 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./segmented-examples.module.css";
+
+/** Controlled selection with `value` and `onValueChange` (mirrors playground/snippets/segmented/controlled). */
+export default function SegmentedControlledExample() {
+  const [controlled, setControlled] = React.useState("week");
+
+  return (
+    <div className={styles.demoStack}>
+      <SegmentedControl.Root value={controlled} onValueChange={setControlled}>
+        <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+        <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+        <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+      </SegmentedControl.Root>
+      <Typography.Root as="p" variant="body-compact" tone="muted" className={styles.demoCaption}>
+        Selected: <strong>{controlled}</strong> — state is held in React (<code>value</code> +{" "}
+        <code>onValueChange</code>).
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/features.tsx

@@ -0,0 +1,45 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+
+import styles from "./segmented-examples.module.css";
+
+/** Two, three, and four segments; arrow keys on the focused radiogroup (mirrors playground/snippets/segmented/features). */
+export default function SegmentedFeaturesExample() {
+  return (
+    <div className={styles.demoStack}>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Two segments
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="all">
+          <SegmentedControl.Item value="all">All tasks</SegmentedControl.Item>
+          <SegmentedControl.Item value="mine">Mine</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Three segments
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day">
+          <SegmentedControl.Item value="day">Today</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Four segments
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="q1">
+          <SegmentedControl.Item value="q1">Q1</SegmentedControl.Item>
+          <SegmentedControl.Item value="q2">Q2</SegmentedControl.Item>
+          <SegmentedControl.Item value="q3">Q3</SegmentedControl.Item>
+          <SegmentedControl.Item value="q4">Q4</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <Typography.Root as="p" variant="body-compact" tone="muted" className={styles.demoCaption}>
+        With focus on the <code>radiogroup</code>, ArrowLeft / ArrowRight move selection (disabled
+        items are skipped).
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/full-width.tsx

@@ -0,0 +1,16 @@
+import { SegmentedControl } from "prime-ui-kit";
+
+import styles from "./segmented-examples.module.css";
+
+/** Override root `width: fit-content` with a full-width class in a narrow shelf (mirrors playground/snippets/segmented/full-width). */
+export default function SegmentedFullWidthExample() {
+  return (
+    <div className={styles.fullWidthShelf}>
+      <SegmentedControl.Root defaultValue="day" className={styles.fullWidthRoot}>
+        <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+        <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+        <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+      </SegmentedControl.Root>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/pricing-toggle.tsx

@@ -0,0 +1,39 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+type BillingCycle = "monthly" | "annual";
+
+function isBillingCycle(value: string): value is BillingCycle {
+  return value === "monthly" || value === "annual";
+}
+
+/**
+ * SaaS-style billing cycle toggle: two clear options, often paired with price copy elsewhere.
+ */
+export default function PricingToggleExample() {
+  const [cycle, setCycle] = React.useState<BillingCycle>("monthly");
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "flex-start",
+      }}
+    >
+      <SegmentedControl.Root
+        value={cycle}
+        onValueChange={(v) => {
+          if (isBillingCycle(v)) setCycle(v);
+        }}
+      >
+        <SegmentedControl.Item value="monthly">Monthly</SegmentedControl.Item>
+        <SegmentedControl.Item value="annual">Annual</SegmentedControl.Item>
+      </SegmentedControl.Root>
+      <Typography.Root as="p" variant="body-compact" tone="muted">
+        Showing prices for <strong>{cycle === "monthly" ? "monthly" : "annual"}</strong> billing.
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/segmented-examples.module.css

@@ -0,0 +1,41 @@
+/* Visually hidden label for icon-only segments (accessible name). */
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Layout helpers aligned with playground/snippets/segmented demos */
+.demoRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.demoStack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.fullWidthShelf {
+  width: min(100%, 22rem);
+}
+
+/* Higher specificity than SegmentedControl `.root` (`width: fit-content`) without `!important`. */
+.fullWidthShelf .fullWidthRoot {
+  width: 100%;
+}
+
+.demoCaption {
+  margin-top: var(--prime-sys-spacing-s);
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  color: var(--prime-sys-color-content-muted);
+}

package/src/components/segmented-control/examples/sizes.tsx

@@ -0,0 +1,51 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+
+import styles from "./segmented-examples.module.css";
+
+/** Same segment labels across control sizes `s`–`xl` (mirrors playground/snippets/segmented/sizes). */
+export default function SegmentedSizesExample() {
+  return (
+    <div className={styles.demoStack}>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          SegmentedControl s
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day" size="s">
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          SegmentedControl m
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day" size="m">
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          SegmentedControl l
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day" size="l">
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          SegmentedControl xl
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day" size="xl">
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/segmented-control/examples/states.tsx

@@ -0,0 +1,43 @@
+import { SegmentedControl, Typography } from "prime-ui-kit";
+
+import styles from "./segmented-examples.module.css";
+
+/** Default group, one disabled item, entire group disabled (mirrors playground/snippets/segmented/states). */
+export default function SegmentedStatesExample() {
+  return (
+    <div className={styles.demoStack}>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Default
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day">
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          One segment disabled
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="active">
+          <SegmentedControl.Item value="active">Active</SegmentedControl.Item>
+          <SegmentedControl.Item value="paused" disabled>
+            Paused
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Archived</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+      <div className={styles.demoRow}>
+        <Typography.Root as="span" variant="body-compact" tone="muted">
+          Entire control disabled
+        </Typography.Root>
+        <SegmentedControl.Root defaultValue="day" disabled>
+          <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+          <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+          <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </div>
+    </div>
+  );
+}