prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,55 +0,0 @@
-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/features.tsx

@@ -1,45 +0,0 @@
-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/pricing-toggle.tsx

@@ -1,39 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/* 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/view-mode.tsx

@@ -1,52 +0,0 @@
-import { SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-type CatalogView = "list" | "grid" | "table";
-
-function isCatalogView(value: string): value is CatalogView {
-  return value === "list" || value === "grid" || value === "table";
-}
-
-/**
- * Catalog or dashboard view mode: mutually exclusive layout, state owned by the parent.
- */
-export default function ViewModeExample() {
-  const [view, setView] = React.useState<CatalogView>("list");
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-m)",
-          alignItems: "center",
-        }}
-      >
-        <Typography.Root as="span" variant="body-compact" tone="muted">
-          View
-        </Typography.Root>
-        <SegmentedControl.Root
-          value={view}
-          onValueChange={(v) => {
-            if (isCatalogView(v)) setView(v);
-          }}
-        >
-          <SegmentedControl.Item value="list">List</SegmentedControl.Item>
-          <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
-          <SegmentedControl.Item value="table">Table</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <Typography.Root as="p" variant="body-default" tone="muted">
-        Active layout: <strong>{view}</strong>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/segmented-progress-bar/COMPONENT.md

@@ -1,119 +0,0 @@
-# SegmentedProgressBar
-
-**Default `size`:** use **`m`** for the size axis unless the screen explicitly needs another tier.
-
-## Canonical
-
-- **`SegmentedProgressBar`** — proportional **stacked** bar: **`SegmentedProgressBar.Root`** only; one segment per category, width ∝ **`value`** (weight).
-- **`segments`:** each item has **`value`** (≥ 0, clamped), optional **`label`** (tooltip + assistive copy), optional **`tone`**: **`primary` | `success` | `warning` | `danger` | `neutral`** (default **`primary`**).
-- **`segmentGap`:** **`none`** (default, continuous bar) or **`hairline`** (1px separators via track background).
-- **`label`:** optional visible title above the track; when set, the track uses **`aria-labelledby`** + **`aria-describedby`** with a visually hidden distribution string; without **`label`**, **`aria-label`** is the distribution text.
-- **Not** a native **`<progress>`** — track is **`role="group"`**; use [ProgressBar](../progress-bar/COMPONENT.md) for a single determinate fraction.
-- **Not** for picking a segment — use [SegmentedControl](../segmented-control/COMPONENT.md); **not** for steps — use [Stepper](../stepper/COMPONENT.md).
-
-## Extended
-
-### About
-
-`SegmentedProgressBar` shows a part-to-whole breakdown: segment widths follow **`value[i] / sum(values)`** via **`flex-grow`**, so layout stays correct in shrink-to-fit parents. Percentages in the accessibility description are rounded to whole numbers.
-
-- **When to use** — status mixes (errors / pending / success), survey or poll shares, rollout phase allocation, storage or budget split by category.
-- **When to use** — **`segmentGap="none"`** for one solid bar; **`hairline`** when segments should read as separate columns.
-- **When to use** — per-segment **`label`** for tooltips and clearer **`aria-*`** distribution text.
-- **When not to use** — a single task completion percentage; use **ProgressBar**.
-- **When not to use** — interactive selection or toggles; use **SegmentedControl**.
-- **When not to use** — discrete wizard steps; use **Stepper**.
-
-### Composition
-
-- **`SegmentedProgressBar.Root`** — outer wrapper with **`data-size`**, **`data-segment-gap`**, optional visible **`label`**, optional visually hidden distribution **`span`** (when **`label`** is set), and a **`role="group"`** track with one **`div`** per segment (presentational fills).
-
-### Playground (`playground/sections/SegmentedProgressBarSection.tsx`)
-
-The section renders snippets from **`playground/snippets/progress/`** (segmented bar demos only):
-
-| Demo (section) | Snippet | What it shows |
-|----------------|---------|----------------|
-| Распределение | [`segmented-distribution.tsx`](../../../playground/snippets/progress/segmented-distribution.tsx) | Weights as shares of the sum (like percentages when the total is 100); visible **`label`** and per-segment **`label`** / **`tone`** (Russian copy in the snippet; **`previewLayout="stack"`**). |
-| Размеры | [`segmented-sizes.tsx`](../../../playground/snippets/progress/segmented-sizes.tsx) | **`size`** **`s`**, **`m`**, **`l`**, **`xl`** with the same weights (**`previewLayout="stack-center"`**). |
-| Зазор между сегментами | [`segmented-gap.tsx`](../../../playground/snippets/progress/segmented-gap.tsx) | Default **`segmentGap="none"`** vs **`hairline`** (1px separators); **`previewLayout="stack"`**. |
-
-`playground/snippets/segmented/*` is for **SegmentedControl**, not this component.
-
-### Example files in `examples/`
-
-Imports use **`"prime-ui-kit"`** so the same patterns work in an app. **`distribution-breakdown`**, **`size-ladder`**, and **`segment-gaps`** mirror the three playground frames above (same structure; English labels and copy where the snippets use Russian).
-
-| File | Scenario |
-|------|----------|
-| [`distribution-breakdown.tsx`](examples/distribution-breakdown.tsx) | **`label`** + weighted segments + **`tone`** (`snippets/progress/segmented-distribution.tsx`). |
-| [`size-ladder.tsx`](examples/size-ladder.tsx) | **`size`** ladder **`s`–`xl`** (`snippets/progress/segmented-sizes.tsx`; snippet wraps rows in **`stack`** + **`examplePreviewBleed`** for the playground). |
-| [`segment-gaps.tsx`](examples/segment-gaps.tsx) | **`segmentGap`** **`none`** vs **`hairline`** (`snippets/progress/segmented-gap.tsx`). |
-| [`multi-phase-rollout.tsx`](examples/multi-phase-rollout.tsx) | Phase mix (internal / beta / GA) with distinct **`tone`** values — not mounted in the section; extra recipe. |
-| [`storage-mix.tsx`](examples/storage-mix.tsx) | Category-style breakdown with **`hairline`** — not mounted in the section; extra recipe. |
-
-### Minimal example
-
-```tsx
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-export function Example() {
-  return (
-    <SegmentedProgressBar.Root
-      segments={[
-        { value: 30, label: "Errors", tone: "danger" },
-        { value: 25, label: "Pending", tone: "warning" },
-        { value: 35, label: "Success", tone: "success" },
-        { value: 10, label: "Other", tone: "neutral" },
-      ]}
-    />
-  );
-}
-```
-
-### Rules
-
-- **Weights** are non-negative; invalid numbers are treated as **`0`**. If the sum is **`0`**, the track shows no fills (track background only).
-- **Layout** uses **`flex-grow`** from weights, not `%` width, so proportions stay correct when the parent shrinks.
-- **`segmentGap`:** **`none`** — track background **`surface-accentSoft`**; **`hairline`** — **`gap: 1px`** on the track, background **`border-subtle`**, segments sit on top so a thin line shows between fills.
-- **`tone`** omitted → **`primary`**.
-- Segment **`label`** → native **`title`** on the segment **div**.
-
-## API
-
-### SegmentedProgressBar.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `segments` | `SegmentedProgressSegment[]` | — | Yes | Non-negative weights; layout is proportional to the sum. |
-| `label` | `string` | — | No | Text above the track; **`aria-labelledby`** + **`aria-describedby`** when set. |
-| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Track height and label typography (aligned with ProgressBar). |
-| `segmentGap` | `"none" \| "hairline"` | `"none"` | No | Gap between segment fills. |
-| `className` | `string` | — | No | Class on the outer wrapper. |
-| `ref` | `React.Ref<HTMLDivElement>` | — | No | Ref to the **`role="group"`** track element. |
-
-### SegmentedProgressSegment
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `value` | `number` | Yes | Weight ≥ 0; contributes to proportion. |
-| `label` | `string` | No | Tooltip and assistive segment label in the distribution string. |
-| `tone` | `"primary" \| "success" \| "warning" \| "danger" \| "neutral"` | No | Default **`primary`**. |
-
-## Related
-
-- [ProgressBar](../progress-bar/COMPONENT.md) — single determinate progress on **`<progress>`**.
-- [ProgressCircle](../progress-circle/COMPONENT.md) — circular fraction.
-- [Typography](../typography/COMPONENT.md) — headings and legends beside the bar.
-
-## LLM note
-
-- Playground source of truth for live demos: **`playground/sections/SegmentedProgressBarSection.tsx`** → **`playground/snippets/progress/segmented-{distribution,sizes,gap}.tsx`** (not **`snippets/segmented/`**, which is SegmentedControl).
-- Export: **`import { SegmentedProgressBar } from "prime-ui-kit"`** — public surface is **`SegmentedProgressBar.Root`** only (namespace object).
-- **`SegmentedProgressBarRootProps`:** **`segments`** (required), **`label?`**, **`size?`**, **`segmentGap?`**, **`className?`**; **`ref`** → track **`div`** (**`role="group"`**).
-- **`SegmentedProgressSegment`:** **`value`** (number), **`label?`**, **`tone?`** — **`tone`** literals: **`primary`**, **`success`**, **`warning`**, **`danger`**, **`neutral`**.
-- **`size`** literals: **`s`**, **`m`**, **`l`**, **`xl`** — default **`m`**.
-- **`segmentGap`** literals: **`none`**, **`hairline`** — default **`none`**.
-- Do not describe this as a native progress bar; it is **`role="group"`**, not **`role="progressbar"`**.
-- Do not suggest **SegmentedControl** or **Stepper** for the same job unless the UX is selection or steps, not a static breakdown.
-- For a single 0–100% task, recommend **ProgressBar** instead.

package/src/components/segmented-progress-bar/examples/distribution-breakdown.tsx

@@ -1,16 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Part-to-whole job outcomes with a visible title and per-segment labels for tooltips and SR distribution. */
-export default function DistributionBreakdownExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Pipeline results"
-      segments={[
-        { value: 30, label: "Failed", tone: "danger" },
-        { value: 25, label: "Queued", tone: "warning" },
-        { value: 35, label: "Succeeded", tone: "success" },
-        { value: 10, label: "Skipped", tone: "neutral" },
-      ]}
-    />
-  );
-}

package/src/components/segmented-progress-bar/examples/multi-phase-rollout.tsx

@@ -1,15 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Rollout mix by phase: weights reflect share of accounts or environments on each tier. */
-export default function MultiPhaseRolloutExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Feature rollout"
-      segments={[
-        { value: 15, label: "Internal", tone: "neutral" },
-        { value: 35, label: "Beta", tone: "warning" },
-        { value: 50, label: "General availability", tone: "success" },
-      ]}
-    />
-  );
-}

package/src/components/segmented-progress-bar/examples/segment-gaps.tsx

@@ -1,23 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-const segments = [
-  { value: 50, label: "Region A", tone: "primary" as const },
-  { value: 50, label: "Region B", tone: "neutral" as const },
-];
-
-/** Default continuous bar vs hairline separators — weights and tones are unchanged. */
-export default function SegmentGapsExample() {
-  return (
-    <>
-      <SegmentedProgressBar.Root
-        segments={segments}
-        label="Continuous (default, segmentGap none)"
-      />
-      <SegmentedProgressBar.Root
-        segmentGap="hairline"
-        segments={segments}
-        label="Hairline separators"
-      />
-    </>
-  );
-}

package/src/components/segmented-progress-bar/examples/size-ladder.tsx

@@ -1,19 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-const segments = [
-  { value: 40, tone: "danger" as const },
-  { value: 35, tone: "warning" as const },
-  { value: 25, tone: "success" as const },
-];
-
-/** Same weights across the control size scale (aligned with ProgressBar). */
-export default function SizeLadderExample() {
-  return (
-    <>
-      <SegmentedProgressBar.Root size="s" segments={segments} />
-      <SegmentedProgressBar.Root segments={segments} />
-      <SegmentedProgressBar.Root size="l" segments={segments} />
-      <SegmentedProgressBar.Root size="xl" segments={segments} />
-    </>
-  );
-}

package/src/components/segmented-progress-bar/examples/storage-mix.tsx

@@ -1,16 +0,0 @@
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-/** Non-status categories: tones differentiate segments without implying pass/fail. */
-export default function StorageMixExample() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Disk usage by type"
-      segmentGap="hairline"
-      segments={[
-        { value: 42, label: "Documents", tone: "primary" },
-        { value: 33, label: "Media", tone: "neutral" },
-        { value: 25, label: "Applications", tone: "warning" },
-      ]}
-    />
-  );
-}

package/src/components/select/examples/01-country.tsx

@@ -1,35 +0,0 @@
-import { Label, Select, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Shipping address: visible label + combobox; `Select.Trigger` has no public `id` — pair with
- * `aria-labelledby` on the trigger.
- */
-export default function SelectExampleCountry() {
-  const countryLabelId = React.useId();
-
-  return (
-    <div className={styles.stack}>
-      <Typography.Root as="p" variant="body-small" tone="muted" className={styles.caption}>
-        Select a country for tax and delivery estimates.
-      </Typography.Root>
-      <div className={styles.field}>
-        <Label.Root id={countryLabelId}>Country or region</Label.Root>
-        <Select.Root defaultValue="us" placeholder="Choose a country">
-          <Select.Trigger aria-labelledby={countryLabelId}>
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="us">United States</Select.Item>
-            <Select.Item value="ca">Canada</Select.Item>
-            <Select.Item value="gb">United Kingdom</Select.Item>
-            <Select.Item value="de">Germany</Select.Item>
-            <Select.Item value="jp">Japan</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/select/examples/02-controlled.tsx

@@ -1,33 +0,0 @@
-import { Label, Select, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Controlled `value` / `onChange`: parent owns the string; map enums or numbers yourself.
- */
-export default function SelectExampleControlled() {
-  const [tier, setTier] = React.useState("pro");
-  const tierLabelId = React.useId();
-
-  return (
-    <div className={styles.stack}>
-      <div className={styles.field}>
-        <Label.Root id={tierLabelId}>Subscription tier</Label.Root>
-        <Select.Root value={tier} onChange={setTier} placeholder="Choose a tier">
-          <Select.Trigger aria-labelledby={tierLabelId}>
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="free">Free</Select.Item>
-            <Select.Item value="pro">Pro</Select.Item>
-            <Select.Item value="team">Team</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </div>
-      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
-        Current value in React state: <span>{tier}</span>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/select/examples/03-groups.tsx

@@ -1,43 +0,0 @@
-import { Label, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Long lists: `Select.Group`, `Select.GroupLabel`, and `Select.Separator` inside `Select.Content`.
- */
-export default function SelectExampleGroups() {
-  const timezoneLabelId = React.useId();
-
-  return (
-    <div className={styles.field}>
-      <Label.Root id={timezoneLabelId}>Time zone</Label.Root>
-      <Select.Root defaultValue="utc" placeholder="Select time zone">
-        <Select.Trigger aria-labelledby={timezoneLabelId}>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Group>
-            <Select.GroupLabel>Americas</Select.GroupLabel>
-            <Select.Item value="et">Eastern Time</Select.Item>
-            <Select.Item value="ct">Central Time</Select.Item>
-            <Select.Item value="pt">Pacific Time</Select.Item>
-          </Select.Group>
-          <Select.Separator />
-          <Select.Group>
-            <Select.GroupLabel>Europe</Select.GroupLabel>
-            <Select.Item value="utc">UTC</Select.Item>
-            <Select.Item value="cet">Central European Time</Select.Item>
-            <Select.Item value="gmt">GMT (London)</Select.Item>
-          </Select.Group>
-          <Select.Separator />
-          <Select.Group>
-            <Select.GroupLabel>Asia Pacific</Select.GroupLabel>
-            <Select.Item value="jst">Japan (JST)</Select.Item>
-            <Select.Item value="aest">Sydney (AEST)</Select.Item>
-          </Select.Group>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

package/src/components/select/examples/04-full-width-form.tsx

@@ -1,47 +0,0 @@
-import { Label, Select, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Trigger is `width: 100%` in kit styles — put the field in a full-width column; no `fullWidth` prop on
- * `Select.Root`.
- */
-export default function SelectExampleFullWidthForm() {
-  const nameLabelId = React.useId();
-  const methodLabelId = React.useId();
-
-  return (
-    <div className={styles.form}>
-      <Typography.Root as="h3" variant="heading-subsection">
-        Delivery details
-      </Typography.Root>
-      <div className={styles.fieldFullBleed}>
-        <Label.Root id={nameLabelId}>Full name</Label.Root>
-        <Select.Root placeholder="How should we address the package?">
-          <Select.Trigger aria-labelledby={nameLabelId}>
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="home">Alex Morgan (home)</Select.Item>
-            <Select.Item value="work">Alex Morgan (office)</Select.Item>
-            <Select.Item value="gift">Gift recipient — leave at desk</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </div>
-      <div className={styles.fieldFullBleed}>
-        <Label.Root id={methodLabelId}>Shipping method</Label.Root>
-        <Select.Root defaultValue="standard" placeholder="Choose shipping">
-          <Select.Trigger aria-labelledby={methodLabelId}>
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="standard">Standard (5–7 days)</Select.Item>
-            <Select.Item value="express">Express (2–3 days)</Select.Item>
-            <Select.Item value="overnight">Overnight</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/select/examples/pattern-composition.tsx

@@ -1,40 +0,0 @@
-import { Select } from "@/components/select/Select";
-import { Icon } from "@/icons";
-
-import styles from "./examples.module.css";
-
-/** `TriggerIcon`, `ItemIcon`, and item `label` for trigger vs row text; mirrors `playground/snippets/select/composition.tsx`. */
-export default function SelectPatternCompositionExample() {
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root defaultValue="eur" placeholder="Report currency">
-        <Select.Trigger>
-          <Select.TriggerIcon>
-            <Icon name="nav.layoutGrid" size="s" tone="subtle" />
-          </Select.TriggerIcon>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="rub" label="RUB — Russian ruble">
-            <Select.ItemIcon>
-              <Icon name="nav.layoutGrid" size="s" tone="subtle" />
-            </Select.ItemIcon>
-            ₽ RUB
-          </Select.Item>
-          <Select.Item value="eur" label="EUR — Euro">
-            <Select.ItemIcon>
-              <Icon name="nav.layoutGrid" size="s" tone="subtle" />
-            </Select.ItemIcon>
-            € EUR
-          </Select.Item>
-          <Select.Item value="usd" label="USD — US dollar">
-            <Select.ItemIcon>
-              <Icon name="nav.layoutGrid" size="s" tone="subtle" />
-            </Select.ItemIcon>
-            $ USD
-          </Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}