prime-ui-kit 0.7.13 → 0.9.1

package/src/components/tag/COMPONENT.md

@@ -1,97 +0,0 @@
-# Tag
-
-**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 compact chip-style label: optional leading icon (`Tag.Icon`), optional removable close control when `onRemove` is set. Root is a `span` with `data-size` / `data-disabled`; the inner body wraps children in `ControlSizeProvider` so nested icons pick up the same control size tier.
-
-**When to use**
-
-- Filter chips and applied facets where each selection should be dismissible in one click.
-- Selected values (recipients, skills, topics) with optional removal.
-- Tight metadata labels (environment, version, channel) when a pill shape reads better than body text; add `Tag.Icon` when a small glyph clarifies meaning.
-
-**When not to use**
-
-- As a toggle or single-choice control — prefer [Checkbox](../checkbox/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), or [Select](../select/COMPONENT.md).
-- When the whole chip must navigate or submit a primary action — prefer [Button](../button/COMPONENT.md) or [LinkButton](../link-button/COMPONENT.md).
-- Expecting localized copy for the remove control without wrapping — the built-in remove `aria-label` is fixed to `"Remove"` in source; name the surrounding group (`aria-label` / `aria-labelledby`) for context.
-- As a numeric or status **badge** — prefer [Badge](../badge/COMPONENT.md) when the UI is count-only or notification-style.
-
-## Composition
-
-- **`Tag.Root`** — outer `span`; holds a **`span`** body with **`ControlSizeProvider`** around **`children`**, then an optional remove **`button`** when **`onRemove`** is defined. Put plain text, **`Tag.Icon`**, or other nodes inside **`Tag.Root`**; place **`Tag.Icon`** before text when both are used so the icon sits on the left.
-- **`Tag.Icon`** — wrapper **`span`** for the icon node; inherits size from the surrounding **`Tag.Root`** context.
-
-### Canonical example
-
-```tsx
-import { Tag } from "prime-ui-kit";
-
-export function Example() {
-  return <Tag.Root>Design systems</Tag.Root>;
-}
-```
-
-### Scenarios (playground + `examples/`)
-
-Live demos use **`playground/snippets/tag/*.tsx`** (see **`playground/sections/TagSection.tsx`**). The table lists the same scenarios with package-oriented copies under **`examples/`** (aligned with those snippets; playground uses `@/` imports and shared `playground.css` layout classes).
-
-| Scenario | Snippet | Package example |
-|----------|---------|-----------------|
-| Sizes | [`playground/snippets/tag/sizes.tsx`](../../../playground/snippets/tag/sizes.tsx) | [`examples/sizes.tsx`](./examples/sizes.tsx) |
-| States | [`playground/snippets/tag/states.tsx`](../../../playground/snippets/tag/states.tsx) | [`examples/states.tsx`](./examples/states.tsx) |
-| Composition | [`playground/snippets/tag/composition.tsx`](../../../playground/snippets/tag/composition.tsx) | [`examples/composition.tsx`](./examples/composition.tsx) |
-| Basic | [`playground/snippets/tag/basic.tsx`](../../../playground/snippets/tag/basic.tsx) | [`examples/basic.tsx`](./examples/basic.tsx) |
-| Removable (dismiss + restore) | [`playground/snippets/tag/removable.tsx`](../../../playground/snippets/tag/removable.tsx) | [`examples/removable.tsx`](./examples/removable.tsx) |
-| With icon | [`playground/snippets/tag/with-icon.tsx`](../../../playground/snippets/tag/with-icon.tsx) | [`examples/with-icon.tsx`](./examples/with-icon.tsx) |
-| Controlled list | [`playground/snippets/tag/controlled.tsx`](../../../playground/snippets/tag/controlled.tsx) | [`examples/controlled.tsx`](./examples/controlled.tsx) |
-| Disabled | [`playground/snippets/tag/disabled.tsx`](../../../playground/snippets/tag/disabled.tsx) | [`examples/disabled.tsx`](./examples/disabled.tsx) |
-| Context `size` | [`playground/snippets/tag/context-size.tsx`](../../../playground/snippets/tag/context-size.tsx) | [`examples/context-size.tsx`](./examples/context-size.tsx) |
-
-**Additional extended examples** (richer layout / copy, same building blocks):
-
-- [`./examples/01-filter-chips.tsx`](./examples/01-filter-chips.tsx) — Catalog filters: applied facets as removable chips backed by a `Set` in state (`fieldset` + `legend`).
-- [`./examples/02-removable-selected-values.tsx`](./examples/02-removable-selected-values.tsx) — Selected skills: removable tags in a named group for remove-button context.
-- [`./examples/03-status-metadata.tsx`](./examples/03-status-metadata.tsx) — Release-style metadata: read-only chips with `Tag.Icon` + text, no `onRemove`.
-
-**LLM note:** Prefer reading runnable files under `./examples/*.tsx` and matching `playground/snippets/tag/*.tsx` for prop combinations; this page keeps the contract (rules + API tables) authoritative.
-
-## Rules
-
-- Omit **`size`** to follow the nearest ancestor **`ControlSizeProvider`**; context **`xs`** maps to tag size **`s`**. With no provider and no **`size`**, the effective size is **`m`**.
-- **`onRemove`** is optional; when present, a **`type="button"`** remove control is rendered with **`aria-label="Remove"`** and **`aria-hidden`** on the cross SVG. **`disabled`** sets **`aria-disabled`** on the root and disables the remove button.
-- Without **`onRemove`**, there is no focusable control inside the tag; the root is not a button or link.
-- For lists of removable tags, name the group so “Remove” has context — e.g. **`fieldset`** + **`legend`** (as in `./examples`) or **`aria-label`** / **`aria-labelledby`** on a suitable wrapper.
-- **`Tag.Icon`** does not force **`aria-hidden`** on icons; if the icon is decorative, rely on adjacent text or set **`aria-hidden`** on the icon content yourself.
-- There is no **`variant`** prop; appearance follows **`size`** and whether removal is enabled.
-
-## API
-
-### Tag.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| size | `"s" \| "m" \| "l" \| "xl"` | `"m"` or from `ControlSizeProvider` | No | Visual tier for height, radius, text, and nested icon scale |
-| onRemove | `() => void` | — | No | When set, renders the remove button on the right |
-| disabled | `boolean` | — | No | Disables removal and sets `aria-disabled` on the root |
-| children | `React.ReactNode` | — | No | Text, `Tag.Icon`, or other nodes |
-| className | `string` | — | No | Extra class on the root `span` |
-| …rest | `React.HTMLAttributes<HTMLSpanElement>` | — | No | Other root attributes (`data-*`, `aria-*`, etc.) |
-
-### Tag.Icon
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| children | `React.ReactNode` | — | Yes | Icon or other content |
-| className | `string` | — | No | Extra class on the wrapper |
-
-## Related
-
-- [Badge](../badge/COMPONENT.md)
-- [Button](../button/COMPONENT.md)
-- [Input](../input/COMPONENT.md)
-- [Select](../select/COMPONENT.md)
-- [LinkButton](../link-button/COMPONENT.md)
-- [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/tag/examples/01-filter-chips.tsx

@@ -1,36 +0,0 @@
-import { Tag } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const FILTER_IDS = ["In stock", "Ships today", "4+ stars", "Under $50"] as const;
-
-/**
- * Catalog-style active filters: each chip removes itself from the applied set via `onRemove`.
- */
-export default function TagExampleFilterChips() {
-  const [applied, setApplied] = React.useState<Set<string>>(
-    () => new Set(["In stock", "4+ stars"]),
-  );
-
-  const remove = (id: string) => {
-    setApplied((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
-  };
-
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Active filters</legend>
-      <div className={styles.chipRow}>
-        {FILTER_IDS.filter((id) => applied.has(id)).map((id) => (
-          <Tag.Root key={id} onRemove={() => remove(id)}>
-            {id}
-          </Tag.Root>
-        ))}
-      </div>
-    </fieldset>
-  );
-}

package/src/components/tag/examples/02-removable-selected-values.tsx

@@ -1,33 +0,0 @@
-import { Tag } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Selected values (skills, recipients): removable chips in a named group so the fixed
- * remove control `aria-label` has context from the page.
- */
-export default function TagExampleRemovableSelectedValues() {
-  const [skills, setSkills] = React.useState<string[]>([
-    "Design systems",
-    "React",
-    "Accessibility",
-  ]);
-
-  const removeSkill = (label: string) => {
-    setSkills((prev) => prev.filter((s) => s !== label));
-  };
-
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Required skills</legend>
-      <div className={styles.chipRow}>
-        {skills.map((label) => (
-          <Tag.Root key={label} onRemove={() => removeSkill(label)}>
-            {label}
-          </Tag.Root>
-        ))}
-      </div>
-    </fieldset>
-  );
-}

package/src/components/tag/examples/03-status-metadata.tsx

@@ -1,24 +0,0 @@
-import { Icon, Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Read-only metadata and status: no `onRemove`, optional leading icon via `Tag.Icon`.
- */
-export default function TagExampleStatusMetadata() {
-  return (
-    <fieldset className={styles.fieldsetPlain}>
-      <legend className={styles.legend}>Release</legend>
-      <div className={styles.chipRow}>
-        <Tag.Root>
-          <Tag.Icon>
-            <Icon name="status.locked" aria-hidden />
-          </Tag.Icon>
-          <span>Production</span>
-        </Tag.Root>
-        <Tag.Root>v2.4.1</Tag.Root>
-        <Tag.Root>Stable</Tag.Root>
-      </div>
-    </fieldset>
-  );
-}

package/src/components/tag/examples/basic.tsx

@@ -1,14 +0,0 @@
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Static labels without icon or `onRemove` — typical tech stack or category chips. */
-export default function TagExampleBasic() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root>React</Tag.Root>
-      <Tag.Root>TypeScript</Tag.Root>
-      <Tag.Root>prime-ui-kit</Tag.Root>
-    </div>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { Icon, Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Leading `Tag.Icon`, label-only, and label with `onRemove`; icon scale follows `size` via context. */
-export default function TagExampleComposition() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root>
-        <Tag.Icon>
-          <Icon name="field.email" />
-        </Tag.Icon>
-        <span>Newsletter</span>
-      </Tag.Root>
-      <Tag.Root>Label only</Tag.Root>
-      <Tag.Root onRemove={() => undefined}>Removable</Tag.Root>
-    </div>
-  );
-}

package/src/components/tag/examples/context-size.tsx

@@ -1,17 +0,0 @@
-import { ControlSizeProvider, Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Omit `size` on `Tag.Root` to inherit from `ControlSizeProvider`. */
-export default function TagExampleContextSize() {
-  return (
-    <div className={styles.chipRow}>
-      <ControlSizeProvider value="s">
-        <Tag.Root>No size — from context s</Tag.Root>
-      </ControlSizeProvider>
-      <ControlSizeProvider value="l">
-        <Tag.Root>No size — from context l</Tag.Root>
-      </ControlSizeProvider>
-    </div>
-  );
-}

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

@@ -1,26 +0,0 @@
-import { Button, Tag } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const INITIAL = ["Photo", "Video", "Documents"] as const;
-
-/** Removable tags driven by array state; empty state shows a reset button. */
-export default function TagExampleControlled() {
-  const [active, setActive] = React.useState<string[]>([...INITIAL]);
-
-  return (
-    <div className={styles.chipRow}>
-      {active.map((label) => (
-        <Tag.Root key={label} onRemove={() => setActive((prev) => prev.filter((x) => x !== label))}>
-          {label}
-        </Tag.Root>
-      ))}
-      {active.length === 0 ? (
-        <Button.Root variant="neutral" mode="stroke" onClick={() => setActive([...INITIAL])}>
-          Reset filters
-        </Button.Root>
-      ) : null}
-    </div>
-  );
-}

package/src/components/tag/examples/disabled.tsx

@@ -1,15 +0,0 @@
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** `disabled` alone and with `onRemove` (remove control is not actionable). */
-export default function TagExampleDisabled() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root disabled>Read-only</Tag.Root>
-      <Tag.Root disabled onRemove={() => undefined}>
-        Cannot remove
-      </Tag.Root>
-    </div>
-  );
-}

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

@@ -1,20 +0,0 @@
-.fieldsetPlain {
-  margin: 0;
-  padding: 0;
-  border: none;
-  min-width: 0;
-}
-
-.legend {
-  margin: 0 0 var(--prime-sys-spacing-s);
-  padding: 0;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.chipRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-s);
-  align-items: center;
-}

package/src/components/tag/examples/removable.tsx

@@ -1,22 +0,0 @@
-import { Button, Tag } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/** One tag dismisses from state; a stroke button restores it; second row shows static remove UI. */
-export default function TagExampleRemovable() {
-  const [withRemove, setWithRemove] = React.useState(true);
-
-  return (
-    <div className={styles.chipRow}>
-      {withRemove ? (
-        <Tag.Root onRemove={() => setWithRemove(false)}>Dismiss me</Tag.Root>
-      ) : (
-        <Button.Root variant="neutral" mode="stroke" onClick={() => setWithRemove(true)}>
-          Show tag again
-        </Button.Root>
-      )}
-      <Tag.Root onRemove={() => undefined}>Static remove UI</Tag.Root>
-    </div>
-  );
-}

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

@@ -1,15 +0,0 @@
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Size ladder `s` → `xl`; height, radius, type, and icon tier follow control tokens. */
-export default function TagExampleSizes() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root size="s">Tag s</Tag.Root>
-      <Tag.Root size="m">Tag m</Tag.Root>
-      <Tag.Root size="l">Tag l</Tag.Root>
-      <Tag.Root size="xl">Tag xl</Tag.Root>
-    </div>
-  );
-}

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

@@ -1,17 +0,0 @@
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Default, removable (`onRemove`), `disabled`, and disabled with remove (inactive close control). */
-export default function TagExampleStates() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root>Default</Tag.Root>
-      <Tag.Root onRemove={() => undefined}>With remove</Tag.Root>
-      <Tag.Root disabled>Disabled</Tag.Root>
-      <Tag.Root disabled onRemove={() => undefined}>
-        Disabled, remove inactive
-      </Tag.Root>
-    </div>
-  );
-}

package/src/components/tag/examples/with-icon.tsx

@@ -1,23 +0,0 @@
-import { Icon, Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Two tags with leading icons and text. */
-export default function TagExampleWithIcon() {
-  return (
-    <div className={styles.chipRow}>
-      <Tag.Root>
-        <Tag.Icon>
-          <Icon name="status.locked" />
-        </Tag.Icon>
-        <span>Secured</span>
-      </Tag.Root>
-      <Tag.Root>
-        <Tag.Icon>
-          <Icon name="field.email" />
-        </Tag.Icon>
-        <span>Newsletter</span>
-      </Tag.Root>
-    </div>
-  );
-}

package/src/components/tag-select/examples/pattern-canonical.tsx

@@ -1,69 +0,0 @@
-import type { TagSelectOption } from "prime-ui-kit";
-import { TagSelect, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const initialOptions: TagSelectOption[] = [
-  { value: "telegram", label: "Telegram", color: "blue" },
-  { value: "whatsapp", label: "WhatsApp", color: "green" },
-  { value: "facebook", label: "Facebook", color: "purple" },
-  { value: "viber", label: "Viber", color: "pink" },
-];
-
-/**
- * Full surface: controlled **`options`**, **`creatable`**, **`optionManagement`** (⋯ rename, colors, delete).
- * New tags stay in the list until refresh; **`onUpdate`** must append when **`value`** is not yet in **`options`**.
- */
-export default function TagSelectPatternCanonicalExample() {
-  const [value, setValue] = React.useState<string[]>([]);
-  const [options, setOptions] = React.useState<TagSelectOption[]>(initialOptions);
-
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <TagSelect.Root
-        options={options}
-        value={value}
-        onValueChange={setValue}
-        creatable
-        optionManagement={{
-          onUpdate: (tagValue, updates) => {
-            setOptions((prev) => {
-              const i = prev.findIndex((o) => o.value === tagValue);
-              if (i === -1) {
-                return [
-                  ...prev,
-                  {
-                    value: tagValue,
-                    label: updates.label ?? tagValue,
-                    color: updates.color ?? "gray",
-                  },
-                ];
-              }
-              return prev.map((o) =>
-                o.value === tagValue
-                  ? {
-                      ...o,
-                      ...(updates.label !== undefined ? { label: updates.label } : {}),
-                      ...(updates.color !== undefined ? { color: updates.color } : {}),
-                    }
-                  : o,
-              );
-            });
-          },
-          onDelete: (tagValue) => {
-            setOptions((prev) => prev.filter((o) => o.value !== tagValue));
-          },
-          colorsSectionLabel: "Colors",
-          deleteLabel: "Delete",
-        }}
-        placeholder="Channel…"
-        aria-label="Contact channels"
-      />
-      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
-        Filter, create tags, use ⋯ to rename, pick a color, or remove from the list. Selected:{" "}
-        <code>{value.join(", ") || "—"}</code>
-      </Typography.Root>
-    </div>
-  );
-}

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

@@ -1,68 +0,0 @@
-import * as React from "react";
-
-import type { TagSelectOption } from "@/components/tag-select/TagSelect";
-import { TagSelect } from "@/components/tag-select/TagSelect";
-import { Typography } from "@/components/typography/Typography";
-
-import styles from "./examples.module.css";
-
-const initialOptions: TagSelectOption[] = [
-  { value: "telegram", label: "Telegram", color: "blue" },
-  { value: "whatsapp", label: "WhatsApp", color: "green" },
-  { value: "facebook", label: "Facebook", color: "purple" },
-  { value: "viber", label: "Viber", color: "pink" },
-];
-
-/** Same as `pattern-canonical.tsx` but `@/` imports; mirrors `playground/snippets/tag-select/features.tsx`. */
-export default function TagSelectPatternFeaturesExample() {
-  const [value, setValue] = React.useState<string[]>([]);
-  const [options, setOptions] = React.useState<TagSelectOption[]>(initialOptions);
-
-  return (
-    <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <TagSelect.Root
-        options={options}
-        value={value}
-        onValueChange={setValue}
-        creatable
-        optionManagement={{
-          onUpdate: (tagValue, updates) => {
-            setOptions((prev) => {
-              const i = prev.findIndex((o) => o.value === tagValue);
-              if (i === -1) {
-                return [
-                  ...prev,
-                  {
-                    value: tagValue,
-                    label: updates.label ?? tagValue,
-                    color: updates.color ?? "gray",
-                  },
-                ];
-              }
-              return prev.map((o) =>
-                o.value === tagValue
-                  ? {
-                      ...o,
-                      ...(updates.label !== undefined ? { label: updates.label } : {}),
-                      ...(updates.color !== undefined ? { color: updates.color } : {}),
-                    }
-                  : o,
-              );
-            });
-          },
-          onDelete: (tagValue) => {
-            setOptions((prev) => prev.filter((o) => o.value !== tagValue));
-          },
-          colorsSectionLabel: "Colors",
-          deleteLabel: "Delete",
-        }}
-        placeholder="Channel…"
-        aria-label="Contact channels"
-      />
-      <Typography.Root as="p" variant="caption" tone="muted" className={styles.caption}>
-        Filter, create tags, use ⋯ to rename, pick a color, or remove from the list. Selected:{" "}
-        <code>{value.join(", ") || "—"}</code>
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/textarea/examples/01-support-ticket.tsx

@@ -1,34 +0,0 @@
-import { Textarea } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const MAX = 2000;
-
-/**
- * Support ticket: long description with counter, hint, and a hard cap via maxLength.
- */
-export default function TextareaExampleSupportTicket() {
-  const [text, setText] = React.useState("");
-
-  return (
-    <div className={styles.stack}>
-      <Textarea.Root
-        id="support-description"
-        name="description"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        maxLength={MAX}
-        placeholder="Describe what happened, steps to reproduce, and what you expected instead."
-        rows={4}
-        required
-        aria-label="Support ticket description"
-      >
-        <Textarea.CharCounter current={text.length} max={MAX} />
-        <Textarea.Hint>
-          We typically reply within one business day. Avoid sharing passwords or full card numbers.
-        </Textarea.Hint>
-      </Textarea.Root>
-    </div>
-  );
-}

package/src/components/textarea/examples/02-comment.tsx

@@ -1,34 +0,0 @@
-import { Label, Textarea } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const FIELD_ID = "order-comment";
-const MAX = 240;
-
-/**
- * Order comment: caption above the field chrome via Label + shared id on Textarea.Root.
- */
-export default function TextareaExampleComment() {
-  const [comment, setComment] = React.useState("");
-
-  return (
-    <div className={styles.labelBlock}>
-      <Label.Root htmlFor={FIELD_ID}>
-        Comment for the courier
-        <Label.Sub>Optional — visible to logistics until the order ships.</Label.Sub>
-      </Label.Root>
-      <Textarea.Root
-        id={FIELD_ID}
-        name="courierComment"
-        value={comment}
-        onChange={(e) => setComment(e.target.value)}
-        maxLength={MAX}
-        placeholder="Gate code, safe drop spot, or delivery window"
-      >
-        <Textarea.CharCounter current={comment.length} max={MAX} />
-        <Textarea.Hint>Keep it short; the driver sees this on the handheld.</Textarea.Hint>
-      </Textarea.Root>
-    </div>
-  );
-}

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

@@ -1,21 +0,0 @@
-import { Textarea, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Section title via `Typography`, counter + hint, and a second field with `Textarea.Error`. */
-export default function TextareaCompositionExample() {
-  return (
-    <div className={styles.compositionStack}>
-      <Typography.Root variant="body-small" weight="medium" as="div">
-        Order comment
-      </Typography.Root>
-      <Textarea.Root placeholder="Delivery notes or time window">
-        <Textarea.CharCounter current={0} max={240} />
-        <Textarea.Hint>Logistics sees this until the order ships.</Textarea.Hint>
-      </Textarea.Root>
-      <Textarea.Root variant="error" placeholder="Describe the return reason">
-        <Textarea.Error>A description is required to submit</Textarea.Error>
-      </Textarea.Root>
-    </div>
-  );
-}