prime-ui-kit 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/tag-select/COMPONENT.md

@@ -19,28 +19,63 @@ A multi-select field: selected values appear as removable chips (styled like [Ta
 
 ## Composition
 
-- **`TagSelect.Root`** — owns **`options`**, **`value`** / **`defaultValue`**, **`onValueChange`**, **`creatable`**, **`onCreated`**, **`placeholder`**, **`hint`**, **`size`** (same [`Select`](../select) size axis as **`Select.Root`**), **`disabled`**, **`hasError`**, **`aria-label`** / **`aria-labelledby`**. Renders the chip row + input, a portaled listbox when open, and optional **`ScrollContainer`** for the option list.
+- **`TagSelect.Root`** — owns **`options`**, **`value`** / **`defaultValue`**, **`onValueChange`**, **`creatable`**, **`onCreated`**, **`optionManagement`** (опционально: меню «⋯» у строки — переименование, палитра цветов, удаление из справочника), **`placeholder`**, **`hint`**, **`size`** (same [`Select`](../select) size axis as **`Select.Root`**), **`disabled`**, **`hasError`**, **`aria-label`** / **`aria-labelledby`**. Renders the chip row + input, a portaled listbox when open, and optional **`ScrollContainer`** for the option list.
 
 ### Canonical example
 
+Controlled **`options`**, **`creatable`**, and **`optionManagement`**: keep **`options`** in React state; in **`onUpdate`**, append a row when **`tagValue`** is not found (covers tags created in-session before the parent list includes them).
+
 ```tsx
 import * as React from "react";
+import type { TagSelectOption } from "prime-ui-kit";
 import { TagSelect } from "prime-ui-kit";
 
+const initialOptions: TagSelectOption[] = [
+  { value: "telegram", label: "Telegram", color: "blue" },
+  { value: "whatsapp", label: "WhatsApp", color: "green" },
+];
+
 export function Example() {
-  const [value, setValue] = React.useState<string[]>(["eng"]);
+  const [value, setValue] = React.useState<string[]>([]);
+  const [options, setOptions] = React.useState<TagSelectOption[]>(initialOptions);
 
   return (
     <TagSelect.Root
-      options={[
-        { value: "eng", label: "Engineering", color: "blue" },
-        { value: "design", label: "Design", color: "purple" },
-        { value: "sales", label: "Sales", color: "green" },
-      ]}
+      options={options}
       value={value}
       onValueChange={setValue}
-      placeholder="Add team…"
-      aria-label="Teams"
+      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));
+        },
+      }}
+      placeholder="Channel…"
+      aria-label="Contact channels"
     />
   );
 }
@@ -50,12 +85,12 @@ export function Example() {
 
 | File | Intent |
 |------|--------|
-| [`examples/pattern-canonical.tsx`](./examples/pattern-canonical.tsx) | Controlled multi-select from **`options`** (`prime-ui-kit` import). |
-| [`examples/pattern-features.tsx`](./examples/pattern-features.tsx) | **`creatable`** + filter; mirrors [`playground/snippets/tag-select/features.tsx`](../../../playground/snippets/tag-select/features.tsx). |
+| [`examples/pattern-canonical.tsx`](./examples/pattern-canonical.tsx) | Full stack: **`creatable`**, **`optionManagement`** (⋯), controlled **`options`**; **`prime-ui-kit`** import. |
+| [`examples/pattern-features.tsx`](./examples/pattern-features.tsx) | Same as canonical with **`@/`** imports; mirrors [`playground/snippets/tag-select/features.tsx`](../../../playground/snippets/tag-select/features.tsx). |
 
 ### Playground
 
-Live demo: **`playground/sections/TagSelectSection.tsx`** — snippet **`playground/snippets/tag-select/features.tsx`**.
+Live demo: **`playground/sections/TagSelectSection.tsx`** — snippet **`playground/snippets/tag-select/features.tsx`** (same behavior as the canonical example).
 
 **LLM note:** Prefer runnable files under **`./examples/*.tsx`** for prop combinations; this page keeps the contract (rules + API) authoritative.
 
@@ -86,6 +121,7 @@ Live demo: **`playground/sections/TagSelectSection.tsx`** — snippet **`playgro
 | placeholder | `string` | `""` | No | Input placeholder |
 | hasError | `boolean` | `false` | No | Error styling |
 | size | `SelectSize` | `"m"` | No | Same size axis as **`Select.Root`** |
+| optionManagement | `TagSelectOptionManagement` | — | No | Меню редактирования опции в списке (⋯): **`onUpdate`**, **`onDelete`**, опционально подписи |
 | id | `string` | — | No | Root id (listbox and input ids are derived) |
 | className | `string` | — | No | Extra class on the root |
 | aria-label | `string` | — | No | Accessible name |
@@ -100,6 +136,16 @@ Live demo: **`playground/sections/TagSelectSection.tsx`** — snippet **`playgro
 | color | `BadgeColor` | No | **`Badge`** **`filled`** color in the list |
 | disabled | `boolean` | No | Option not selectable |
 
+### TagSelectOptionManagement
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| onUpdate | `(value: string, updates: { label?: string; color?: BadgeColor }) => void` | Yes | Обновить подпись и/или цвет; **`value`** опции не меняется |
+| onDelete | `(value: string) => void` | Yes | Удалить опцию из справочника; выбранные значения с этим **`value`** снимаются |
+| colorsSectionLabel | `string` | No | Заголовок блока цветов (по умолчанию «Colors») |
+| deleteLabel | `string` | No | Подпись кнопки удаления (по умолчанию «Delete») |
+| editMenuAriaLabelPrefix | `string` | No | Префикс **`aria-label`** кнопки ⋯ (по умолчанию «Edit tag») |
+
 ## Related
 
 - [Select](../select/COMPONENT.md)

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

@@ -1,27 +1,68 @@
+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";
 
-/** Controlled multi-select from `options`; `prime-ui-kit` import for published consumers. */
+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[]>(["eng"]);
+  const [value, setValue] = React.useState<string[]>([]);
+  const [options, setOptions] = React.useState<TagSelectOption[]>(initialOptions);
 
   return (
     <div className={`${styles.stack} ${styles.stackNarrow}`}>
       <TagSelect.Root
-        options={[
-          { value: "eng", label: "Engineering", color: "blue" },
-          { value: "design", label: "Design", color: "purple" },
-          { value: "sales", label: "Sales", color: "green" },
-        ]}
+        options={options}
         value={value}
         onValueChange={setValue}
-        placeholder="Add team…"
-        aria-label="Teams"
+        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}>
-        Selected: <code>{value.join(", ") || "—"}</code>
+        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,31 +1,67 @@
 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";
 
-/** `creatable` + filter; mirrors `playground/snippets/tag-select/features.tsx`. */
+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={[
-          { value: "telegram", label: "telegram", color: "blue" },
-          { value: "whatsapp", label: "whatsapp", color: "green" },
-          { value: "facebook", label: "facebook", color: "purple" },
-          { value: "viber", label: "viber", color: "pink" },
-        ]}
+        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}>
-        Type to filter; add a new channel if it is not in the list.
+        Filter, create tags, use ⋯ to rename, pick a color, or remove from the list. Selected:{" "}
+        <code>{value.join(", ") || "—"}</code>
       </Typography.Root>
     </div>
   );