prime-ui-kit 0.7.11 → 0.9.0

package/src/components/tabs/examples/03-tab-triggers-with-icons.tsx

@@ -1,62 +0,0 @@
-import { Icon, Tabs, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Multiple `Tabs.Icon` slots per trigger (left/right of `Tabs.Label`) and two icons in one tab —
- * matches `playground/snippets/tabs/with-icons.tsx`. Keep a visible `Tabs.Label` for the accessible
- * name.
- */
-export default function TabsExampleTriggersWithIcons() {
-  return (
-    <Tabs.Root defaultValue="overview">
-      <Tabs.List>
-        <Tabs.Tab value="overview">
-          <Tabs.Icon>
-            <Icon name="nav.layoutGrid" tone="subtle" />
-          </Tabs.Icon>
-          <Tabs.Label>Overview</Tabs.Label>
-          <Tabs.Icon>
-            <Icon name="nav.chevronRight" tone="subtle" />
-          </Tabs.Icon>
-        </Tabs.Tab>
-        <Tabs.Tab value="dashboard">
-          <Tabs.Icon>
-            <Icon name="nav.layoutGrid" tone="subtle" />
-          </Tabs.Icon>
-          <Tabs.Label>Dashboard</Tabs.Label>
-          <Tabs.Icon>
-            <Icon name="nav.chevronRight" tone="subtle" />
-          </Tabs.Icon>
-        </Tabs.Tab>
-        <Tabs.Tab value="settings">
-          <Tabs.Icon>
-            <Icon name="nav.layoutGrid" tone="subtle" />
-          </Tabs.Icon>
-          <Tabs.Icon>
-            <Icon name="field.email" tone="subtle" />
-          </Tabs.Icon>
-          <Tabs.Label>Settings</Tabs.Label>
-          <Tabs.Icon>
-            <Icon name="nav.chevronRight" tone="subtle" />
-          </Tabs.Icon>
-        </Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="overview">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Overview content.
-        </Typography.Root>
-      </Tabs.Panel>
-      <Tabs.Panel value="dashboard">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Dashboard content.
-        </Typography.Root>
-      </Tabs.Panel>
-      <Tabs.Panel value="settings">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Settings content.
-        </Typography.Root>
-      </Tabs.Panel>
-    </Tabs.Root>
-  );
-}

package/src/components/tabs/examples/04-long-labels-narrow.tsx

@@ -1,35 +0,0 @@
-import { Tabs, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Long tab labels: `Tabs.Label` supports shrinking and ellipsis in cramped horizontal space—keep a
- * narrow `min-width: 0` chain on ancestors so truncation can apply.
- */
-export default function TabsExampleLongLabelsNarrow() {
-  return (
-    <div className={styles.narrowShell}>
-      <Tabs.Root defaultValue="short">
-        <Tabs.List>
-          <Tabs.Tab value="short">
-            <Tabs.Label>Summary</Tabs.Label>
-          </Tabs.Tab>
-          <Tabs.Tab value="long">
-            <Tabs.Label>Regulatory reporting &amp; compliance documentation workspace</Tabs.Label>
-          </Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="short">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Short label tab content.
-          </Typography.Root>
-        </Tabs.Panel>
-        <Tabs.Panel value="long">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            The trigger text truncates with an ellipsis when the list is narrower than the full
-            string.
-          </Typography.Root>
-        </Tabs.Panel>
-      </Tabs.Root>
-    </div>
-  );
-}

package/src/components/tabs/examples/05-controlled-active-tab.tsx

@@ -1,48 +0,0 @@
-import { Tabs, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Controlled mode: drive `value` / `onValueChange` from routing, query params, or store so the
- * active tab matches shareable URL state.
- */
-export default function TabsExampleControlledActiveTab() {
-  const [active, setActive] = React.useState("details");
-
-  return (
-    <>
-      <Tabs.Root value={active} onValueChange={setActive}>
-        <Tabs.List>
-          <Tabs.Tab value="details">
-            <Tabs.Label>Details</Tabs.Label>
-          </Tabs.Tab>
-          <Tabs.Tab value="shipping">
-            <Tabs.Label>Shipping</Tabs.Label>
-          </Tabs.Tab>
-          <Tabs.Tab value="history">
-            <Tabs.Label>History</Tabs.Label>
-          </Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="details">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            SKU, price, and merchandising copy for this line item.
-          </Typography.Root>
-        </Tabs.Panel>
-        <Tabs.Panel value="shipping">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Carrier, service level, and estimated delivery window.
-          </Typography.Root>
-        </Tabs.Panel>
-        <Tabs.Panel value="history">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Status changes and notes from fulfillment.
-          </Typography.Root>
-        </Tabs.Panel>
-      </Tabs.Root>
-      <p className={styles.controlledCaption}>
-        Active tab id (for example sync with <code>?tab=</code>): <strong>{active}</strong>
-      </p>
-    </>
-  );
-}

package/src/components/tabs/examples/06-sizes-s-m-l-xl.tsx

@@ -1,58 +0,0 @@
-import { Icon, Tabs, type TabsSize, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const sizes: readonly TabsSize[] = ["s", "m", "l", "xl"];
-
-function TabsSizeGroup({ size }: { size: TabsSize }) {
-  return (
-    <div className={styles.sizesGroup}>
-      <p className={styles.sizesLabel}>{`size="${size}"`}</p>
-      <Tabs.Root defaultValue="a" size={size}>
-        <Tabs.List>
-          <Tabs.Tab value="a">
-            <Tabs.Icon>
-              <Icon name="nav.layoutGrid" tone="subtle" />
-            </Tabs.Icon>
-            <Tabs.Label>Alpha</Tabs.Label>
-          </Tabs.Tab>
-          <Tabs.Tab value="b">
-            <Tabs.Label>Beta</Tabs.Label>
-          </Tabs.Tab>
-          <Tabs.Tab value="c">
-            <Tabs.Label>Gamma</Tabs.Label>
-          </Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="a">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Panel A — same structure at each size; only the control token tier changes.
-          </Typography.Root>
-        </Tabs.Panel>
-        <Tabs.Panel value="b">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Panel B.
-          </Typography.Root>
-        </Tabs.Panel>
-        <Tabs.Panel value="c">
-          <Typography.Root as="p" variant="body-default" className={styles.body}>
-            Panel C.
-          </Typography.Root>
-        </Tabs.Panel>
-      </Tabs.Root>
-    </div>
-  );
-}
-
-/**
- * Four `size` rungs (`s`–`xl`): one tab row per size; first tab uses `Tabs.Icon` + `Tabs.Label`,
- * the rest labels only (matches `playground/snippets/tabs/sizes.tsx`).
- */
-export default function TabsExampleSizesLadder() {
-  return (
-    <div className={styles.sizesRow}>
-      {sizes.map((s) => (
-        <TabsSizeGroup key={s} size={s} />
-      ))}
-    </div>
-  );
-}

package/src/components/tabs/examples/07-horizontal-disabled.tsx

@@ -1,40 +0,0 @@
-import { Tabs, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Disabled `Tabs.Tab`: not clickable, skipped in arrow-key roving; panel exists but is unreachable
- * until the tab could be enabled (matches `playground/snippets/tabs/horizontal-disabled.tsx`).
- */
-export default function TabsExampleHorizontalDisabled() {
-  return (
-    <Tabs.Root defaultValue="overview">
-      <Tabs.List>
-        <Tabs.Tab value="overview">
-          <Tabs.Label>Overview</Tabs.Label>
-        </Tabs.Tab>
-        <Tabs.Tab value="analytics">
-          <Tabs.Label>Analytics</Tabs.Label>
-        </Tabs.Tab>
-        <Tabs.Tab value="reports" disabled>
-          <Tabs.Label>Reports</Tabs.Label>
-        </Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="overview">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Overview panel content.
-        </Typography.Root>
-      </Tabs.Panel>
-      <Tabs.Panel value="analytics">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Analytics panel content.
-        </Typography.Root>
-      </Tabs.Panel>
-      <Tabs.Panel value="reports">
-        <Typography.Root as="p" variant="body-default" className={styles.body}>
-          Reports panel content (shown only if this tab becomes enabled).
-        </Typography.Root>
-      </Tabs.Panel>
-    </Tabs.Root>
-  );
-}

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/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-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>
-  );
-}