prime-ui-kit 0.0.1

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

@@ -0,0 +1,47 @@
+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/examples.module.css

@@ -0,0 +1,48 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-s);
+}
+
+.stackNarrow {
+  width: 100%;
+  max-width: calc(var(--prime-sys-unit-1rem) * 22);
+}
+
+.fullWidthShell {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: calc(var(--prime-sys-unit-1rem) * 20);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-xs);
+  width: 100%;
+  max-width: calc(var(--prime-sys-unit-1rem) * 22);
+  min-width: 0;
+}
+
+.fieldFullBleed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-xs);
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-m);
+  width: 100%;
+  max-width: calc(var(--prime-sys-unit-1rem) * 28);
+  min-width: 0;
+}
+
+.caption {
+  margin: 0;
+  color: var(--prime-sys-color-content-secondary);
+}

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

@@ -0,0 +1,40 @@
+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>
+  );
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { Select } from "@/components/select/Select";
+import { Typography } from "@/components/typography/Typography";
+
+import styles from "./examples.module.css";
+
+/** Controlled `value` / `onChange`; mirrors `playground/snippets/select/controlled.tsx`. */
+export default function SelectPatternControlledExample() {
+  const [tier, setTier] = React.useState("pro");
+
+  return (
+    <div className={`${styles.stack} ${styles.stackNarrow}`}>
+      <Select.Root value={tier} onChange={setTier} placeholder="Tier">
+        <Select.Trigger aria-label="Subscription tier">
+          <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>
+      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
+        Current value in parent state: <code>{tier}</code>
+      </Typography.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Select } from "@/components/select/Select";
+
+const ZONES = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "K"] as const;
+
+/** Groups, labels, separator, disabled item, long scrollable list; mirrors `playground/snippets/select/features.tsx`. */
+export default function SelectPatternFeaturesExample() {
+  return (
+    <Select.Root placeholder="Zones and groups">
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          <Select.GroupLabel>Available now</Select.GroupLabel>
+          <Select.Item value="east-1">East — node 1</Select.Item>
+          <Select.Item value="east-2">East — node 2</Select.Item>
+        </Select.Group>
+        <Select.Separator />
+        <Select.Group>
+          <Select.GroupLabel>Planned</Select.GroupLabel>
+          <Select.Item value="west-1" disabled>
+            West — node 1 (reserved)
+          </Select.Item>
+          {ZONES.map((z, i) => (
+            <Select.Item key={z} value={`zone-${i}`}>
+              Reserve {z}
+            </Select.Item>
+          ))}
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/components/select/examples/pattern-full-width.tsx

@@ -0,0 +1,21 @@
+import { Select } from "@/components/select/Select";
+
+import styles from "./examples.module.css";
+
+/** Narrow column shows trigger `width: 100%`; mirrors `playground/snippets/select/full-width.tsx`. */
+export default function SelectPatternFullWidthExample() {
+  return (
+    <div className={styles.fullWidthShell}>
+      <Select.Root defaultValue="ship" placeholder="Shipping method">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="pickup">Pickup</Select.Item>
+          <Select.Item value="ship">Courier</Select.Item>
+          <Select.Item value="post">Post</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Select } from "@/components/select/Select";
+
+/** Native `<select>` via `native`; optional `Select.Content` wrapper; mirrors `playground/snippets/select/native.tsx`. */
+export default function SelectPatternNativeExample() {
+  return (
+    <Select.Root native placeholder="Mode">
+      <Select.Content>
+        <Select.Item value="auto">Auto</Select.Item>
+        <Select.Item value="light">Light</Select.Item>
+        <Select.Item value="dark">Dark</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Select } from "@/components/select/Select";
+
+import styles from "./examples.module.css";
+
+/** `size` ladder `s`–`xl`; mirrors `playground/snippets/select/sizes.tsx`. */
+export default function SelectPatternSizesExample() {
+  return (
+    <div className={`${styles.stack} ${styles.stackNarrow}`}>
+      <Select.Root size="s" placeholder="Size s">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+          <Select.Item value="b">B</Select.Item>
+          <Select.Item value="c">C</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root size="m" placeholder="Size m">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+          <Select.Item value="b">B</Select.Item>
+          <Select.Item value="c">C</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root size="l" placeholder="Size l">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+          <Select.Item value="b">B</Select.Item>
+          <Select.Item value="c">C</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root size="xl" placeholder="Size xl">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+          <Select.Item value="b">B</Select.Item>
+          <Select.Item value="c">C</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { Select } from "@/components/select/Select";
+
+import styles from "./examples.module.css";
+
+/** Placeholder, `defaultValue`, root `disabled`, `hasError`; mirrors `playground/snippets/select/states.tsx`. */
+export default function SelectPatternStatesExample() {
+  return (
+    <div className={`${styles.stack} ${styles.stackNarrow}`}>
+      <Select.Root placeholder="Placeholder only">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">Option A</Select.Item>
+          <Select.Item value="b">Option B</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root defaultValue="b" placeholder="With default value">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">Option A</Select.Item>
+          <Select.Item value="b">Option B</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root defaultValue="on" disabled placeholder="Disabled">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="off">Off</Select.Item>
+          <Select.Item value="on">On</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root hasError placeholder="Validation error">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="1">Item 1</Select.Item>
+          <Select.Item value="2">Item 2</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/slider/COMPONENT.md

@@ -0,0 +1,86 @@
+# Slider
+
+**Default sizing:** when designing screens and examples, start with **`m`** for `size` wherever a size axis exists unless the scenario explicitly needs another value.
+
+## About
+
+A horizontal range control built on the native `input type="range"`, with optional text label and kit sizing (`s`–`xl`).
+
+**When to use**
+
+- Picking a number along a continuous or stepped interval: volume, brightness, percentages, temperature bands, or filter caps (for example a maximum price).
+- When native range keyboard and pointer behavior is enough and you want minimal custom logic.
+
+**When not to use**
+
+- Vertical sliders — the implementation is horizontal only.
+- When you need thumb labels, icons, or other slots on the track — compose with surrounding layout and text.
+- Built-in error, required, loading, or read-only modes — use form primitives and hints around the control.
+- A small set of fixed choices — prefer radio or segmented controls instead of a continuous range.
+
+## Composition
+
+- **`Slider`** is a single-part API: **`Slider.Root`** wraps **`ControlSizeProvider`**, an optional **`label`** (linked to the input with `htmlFor` / `id`), and one styled **`input type="range"`**.
+- The root `div` carries **`data-size`** from **`size`**; there are no other exported subcomponents.
+
+### Canonical example
+
+```tsx
+import { Slider } from "prime-ui-kit";
+
+export function Example() {
+  return (
+    <Slider.Root label="Output level" min={0} max={100} step={1} defaultValue={50} />
+  );
+}
+```
+
+### Playground-aligned examples
+
+**`playground/sections/SliderSection.tsx`** and **`playground/snippets/slider/`** define the demo order and code shown in the playground (Russian UI copy in snippets). Matching runnable package examples (imports from **`"prime-ui-kit"`**) live next to this file:
+
+| Playground block | Snippet | Example file |
+|------------------|---------|--------------|
+| Sizes | `sizes.tsx` | `sizes.tsx` |
+| States | `states.tsx` | `states.tsx` |
+| Controlled | `controlled.tsx` | `controlled.tsx` |
+| Composition | `composition.tsx` | `composition.tsx` |
+| Full width | `full-width.tsx` | `full-width.tsx` |
+| Features (range / step) | `features.tsx` | `features.tsx` |
+
+Shared layout for controlled and full-width demos: **`examples/examples.module.css`**.
+
+**LLM note:** Prefer reading the runnable files under `./examples/*.tsx` for full scenarios and prop combinations; this page keeps the contract (rules + API tables) authoritative.
+
+## Rules
+
+- **Controlled:** pass **`value`** and **`onChange`**. **Uncontrolled:** pass **`defaultValue`**, or omit both value props — the effective initial value is **`min`**, clamped to **`[min, max]`**.
+- **`min`**, **`max`**, and **`step`** default to **`0`**, **`100`**, and **`1`**; fractional **`step`** values are allowed.
+- Displayed value is **clamped** to **`[min, max]`**; non-numeric input updates are ignored.
+- With **`label`**, the visible label is associated via **`id`** / **`htmlFor`**. Without **`label`**, set **`aria-label`** (or an external accessible name) so assistive technologies get a proper name.
+- **`disabled`** sets the native **`disabled`** state on the range input.
+- There is no **`asChild`** or portal behavior; focus and **`focus-visible`** styling follow the native control and theme.
+
+## API
+
+### Slider.Root
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| value | `number` | — | No | Controlled value; use with **`onChange`** for external state |
+| defaultValue | `number` | — | No | Initial value when uncontrolled; clamped to **`[min, max]`**; if omitted, the internal initial value is **`min`** |
+| min | `number` | `0` | No | Minimum for the native `type="range"` |
+| max | `number` | `100` | No | Maximum for the native `type="range"` |
+| step | `number` | `1` | No | Step increment (may be fractional) |
+| disabled | `boolean` | — | No | Blocks input and lowers track opacity |
+| onChange | `(value: number) => void` | — | No | Fires when the value changes after user input (pointer, touch, or native range keys) |
+| label | `string` | — | No | Text above the track; creates an associated **`label`** with **`htmlFor`** on the input |
+| size | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Track height, thumb, and label type scale from one control token tier |
+| className | `string` | — | No | Extra class on the root container |
+| aria-label | `string` | — | No | Accessible name when there is no visible **`label`** |
+
+## Related
+
+- [Label](../label/COMPONENT.md)
+- [Hint](../hint/COMPONENT.md)
+- [DigitInput](../digit-input/COMPONENT.md)

package/src/components/slider/examples/composition.tsx

@@ -0,0 +1,14 @@
+import { Slider } from "prime-ui-kit";
+
+/**
+ * Visible `label` (linked `label` / `htmlFor` to the input) vs no visible label — then set `aria-label`
+ * for screen readers (fractional step for “layer opacity”).
+ */
+export default function SliderCompositionExample() {
+  return (
+    <>
+      <Slider.Root label="Screen brightness" defaultValue={55} />
+      <Slider.Root defaultValue={20} min={0} max={1} step={0.05} aria-label="Layer opacity" />
+    </>
+  );
+}

package/src/components/slider/examples/controlled.tsx

@@ -0,0 +1,23 @@
+import { Slider } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+/** Controlled pair `value` + `onChange`; mirror the current value in adjacent copy. */
+export default function SliderControlledExample() {
+  const [level, setLevel] = React.useState(62);
+
+  return (
+    <div className={styles.controlledColumn}>
+      <Slider.Root
+        label="Reserve level"
+        value={level}
+        onChange={setLevel}
+        min={0}
+        max={100}
+        step={1}
+      />
+      <span className={styles.valueHint}>Current value: {level}%</span>
+    </div>
+  );
+}

package/src/components/slider/examples/examples.module.css

@@ -0,0 +1,37 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.muted {
+  margin: 0;
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.controlledColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  max-width: 20rem;
+  box-sizing: border-box;
+}
+
+.valueHint {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-xs);
+  line-height: var(--prime-sys-typography-lineHeightScale-xs);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.narrowColumn {
+  width: min(12rem, 100%);
+}

package/src/components/slider/examples/features.tsx

@@ -0,0 +1,17 @@
+import { Slider } from "prime-ui-kit";
+
+/** Custom range and stepping: `min` / `max` / `step` — e.g. whole degrees or coarse percentage stops. */
+export default function SliderFeaturesExample() {
+  return (
+    <>
+      <Slider.Root label="Temperature, °C" min={16} max={30} step={1} defaultValue={22} />
+      <Slider.Root
+        label="Position by quarters (step 25)"
+        min={0}
+        max={100}
+        step={25}
+        defaultValue={50}
+      />
+    </>
+  );
+}

package/src/components/slider/examples/full-width.tsx

@@ -0,0 +1,12 @@
+import { Slider } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Root stretches to the parent width — in a narrow column the track grows with the column. */
+export default function SliderFullWidthExample() {
+  return (
+    <div className={styles.narrowColumn}>
+      <Slider.Root label="Width inside a narrow column" defaultValue={40} />
+    </div>
+  );
+}

package/src/components/slider/examples/sizes.tsx

@@ -0,0 +1,15 @@
+import { Slider } from "prime-ui-kit";
+
+/**
+ * Four `size` values (`s`–`xl`): track height, thumb, and label type ramp stay on one control token tier.
+ */
+export default function SliderSizesExample() {
+  return (
+    <>
+      <Slider.Root size="s" label="Size s" defaultValue={30} />
+      <Slider.Root size="m" label="Size m" defaultValue={40} />
+      <Slider.Root size="l" label="Size l" defaultValue={50} />
+      <Slider.Root size="xl" label="Size xl" defaultValue={60} />
+    </>
+  );
+}

package/src/components/slider/examples/states.tsx

@@ -0,0 +1,11 @@
+import { Slider } from "prime-ui-kit";
+
+/** Default interaction vs `disabled`: lower opacity and no pointer/keyboard input on the range control. */
+export default function SliderStatesExample() {
+  return (
+    <>
+      <Slider.Root label="Volume" defaultValue={45} />
+      <Slider.Root label="Disabled example" defaultValue={35} disabled />
+    </>
+  );
+}