@tai42/studio-sdk 0.2.0

package/dist/components/select.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `Select` — a design-system wrapper over Radix Select (an accessible listbox with
+ * a `combobox` trigger). Options are passed declaratively — either a flat
+ * `options` run or labelled `groups`, never both — and the trigger auto-wires to
+ * an enclosing `Field`.
+ *
+ * Every surface is a class — `tai-select-trigger` for the control, and
+ * `tai-select-content` / `tai-select-item` for the popup, which is where the
+ * shared keyboard-highlight rule lives. The disclosure mark is the design
+ * system's `ChevronDownIcon`, decorative behind the trigger's own name.
+ */
+import * as RadixSelect from '@radix-ui/react-select';
+import { SELECT_TRIGGER_CLASS } from './control-styles';
+import { useFieldControl } from './field';
+import { CheckIcon, ChevronDownIcon } from './icons';
+function OptionItem({ option }) {
+    return (_jsxs(RadixSelect.Item, { className: "tai-select-item", value: option.value, disabled: option.disabled, children: [_jsx(RadixSelect.ItemText, { children: option.label }), _jsx(RadixSelect.ItemIndicator, { className: "tai-select-item-indicator", children: _jsx(CheckIcon, {}) })] }));
+}
+export function Select(props) {
+    const { value, defaultValue, onValueChange, placeholder = 'Select…', disabled, name, 'aria-label': ariaLabel, } = props;
+    const field = useFieldControl();
+    // Untyped JavaScript is the only caller that reaches this. Rendering one list
+    // and dropping the other would lose every entry in the discarded one silently,
+    // and an empty listbox reads as "there is nothing to choose".
+    if ((props.options === undefined) === (props.groups === undefined)) {
+        throw new Error('Select renders exactly one of `options` or `groups`; it was given both, or neither.');
+    }
+    return (_jsxs(RadixSelect.Root, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, name: name, children: [_jsxs(RadixSelect.Trigger, { id: field.id, className: SELECT_TRIGGER_CLASS, "aria-label": field.id === undefined ? ariaLabel : undefined, "aria-describedby": field['aria-describedby'], "aria-invalid": field['aria-invalid'], children: [_jsx(RadixSelect.Value, { placeholder: placeholder }), _jsx(RadixSelect.Icon, { "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) })] }), _jsx(RadixSelect.Portal, { children: _jsx(RadixSelect.Content, { className: "tai-select-content", position: "popper", sideOffset: 4, children: _jsx(RadixSelect.Viewport, { className: "tai-select-viewport", children: props.groups !== undefined
+                            ? props.groups.map((group) => (_jsxs(RadixSelect.Group, { children: [_jsx(RadixSelect.Label, { className: "tai-select-group-label tai-label", children: group.label }), group.options.map((option) => (_jsx(OptionItem, { option: option }, option.value)))] }, group.label)))
+                            : props.options.map((option) => _jsx(OptionItem, { option: option }, option.value)) }) }) })] }));
+}
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwDrD,SAAS,UAAU,CAAC,EAAE,MAAM,EAA4B;IACtD,OAAO,CACL,MAAC,WAAW,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,aAC1F,KAAC,WAAW,CAAC,QAAQ,cAAE,MAAM,CAAC,KAAK,GAAwB,EAK3D,KAAC,WAAW,CAAC,aAAa,IAAC,SAAS,EAAC,2BAA2B,YAC9D,KAAC,SAAS,KAAG,GACa,IACX,CACpB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,SAAS,EACvB,QAAQ,EACR,IAAI,EACJ,YAAY,EAAE,SAAS,GACxB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,8EAA8E;IAC9E,+EAA+E;IAC/E,8DAA8D;IAC9D,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,EAAE,CAAC;QACnE,MAAM,IAAI,KAAK,CACb,qFAAqF,CACtF,CAAC;IACJ,CAAC;IACD,OAAO,CACL,MAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,aAEV,MAAC,WAAW,CAAC,OAAO,IAClB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,oBAAoB,gBAInB,KAAK,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBACxC,KAAK,CAAC,kBAAkB,CAAC,kBAC7B,KAAK,CAAC,cAAc,CAAC,aAEnC,KAAC,WAAW,CAAC,KAAK,IAAC,WAAW,EAAE,WAAW,GAAI,EAC/C,KAAC,WAAW,CAAC,IAAI,mBAAa,MAAM,YAClC,KAAC,eAAe,KAAG,GACF,IACC,EACtB,KAAC,WAAW,CAAC,MAAM,cACjB,KAAC,WAAW,CAAC,OAAO,IAAC,SAAS,EAAC,oBAAoB,EAAC,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAE,CAAC,YACjF,KAAC,WAAW,CAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,YAClD,KAAK,CAAC,MAAM,KAAK,SAAS;4BACzB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,MAAC,WAAW,CAAC,KAAK,eAChB,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,kCAAkC,YAC5D,KAAK,CAAC,KAAK,GACM,EACnB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,KAAC,UAAU,IAAoB,MAAM,EAAE,MAAM,IAA5B,MAAM,CAAC,KAAK,CAAoB,CAClD,CAAC,KANoB,KAAK,CAAC,KAAK,CAOf,CACrB,CAAC;4BACJ,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,UAAU,IAAoB,MAAM,EAAE,MAAM,IAA5B,MAAM,CAAC,KAAK,CAAoB,CAAC,GAC/D,GACH,GACH,IACJ,CACpB,CAAC;AACJ,CAAC"}

package/dist/components/table.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Semantic table primitives — thin wrappers over the native table elements.
+ * They keep the real `table`/`row`/`columnheader`/`cell` roles so assistive
+ * tech and tests read a proper table. Only the root carries a class: the header
+ * and cell rules in the stylesheet are descendants of `.tai-table`, so a cell
+ * cannot drift out of the system by forgetting one.
+ *
+ * A numeric column opts in with `numeric`, which stamps `data-numeric="true"` —
+ * the hook the stylesheet right-aligns on tabular figures so digits line up.
+ *
+ * Each wrapper FORWARDS a consumer `ref` to the native element it renders — the
+ * attribute spread carries it, the same way it carries every other native prop —
+ * so a caller that has to measure or scroll a cell is not forced back to a raw
+ * `<td>` and out of the system.
+ */
+import type { HTMLAttributes, Ref, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    readonly children?: ReactNode;
+    /** A consumer ref for the `<table>` itself. */
+    readonly ref?: Ref<HTMLTableElement>;
+}
+export declare function Table({ children, className, ...props }: TableProps): import("react").JSX.Element;
+/** `<thead>` and `<tbody>` take the same surface: the native one. */
+export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {
+    readonly children?: ReactNode;
+    /** A consumer ref for the section element itself. */
+    readonly ref?: Ref<HTMLTableSectionElement>;
+}
+export declare function THead({ children, ...props }: TableSectionProps): import("react").JSX.Element;
+export declare function TBody({ children, ...props }: TableSectionProps): import("react").JSX.Element;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    readonly children?: ReactNode;
+    /** A consumer ref for the `<tr>` itself. */
+    readonly ref?: Ref<HTMLTableRowElement>;
+}
+export declare function TR({ children, ...props }: TableRowProps): import("react").JSX.Element;
+/** Right-align a column of digits on tabular figures. */
+export interface NumericColumnProps {
+    readonly numeric?: boolean;
+}
+/**
+ * A header cell. `scope` defaults to `col` because that is what a `<th>` in the
+ * header row IS, and without it nothing associates the cell with the column
+ * below it: a screen reader announcing a data cell has no header to name it.
+ * A row header — the leading cell of a body row — passes `scope="row"`.
+ */
+export interface THProps extends ThHTMLAttributes<HTMLTableCellElement>, NumericColumnProps {
+    readonly children?: ReactNode;
+    /** A consumer ref for the `<th>` itself. */
+    readonly ref?: Ref<HTMLTableCellElement>;
+}
+export declare function TH({ children, numeric, scope, ...props }: THProps): import("react").JSX.Element;
+export interface TDProps extends TdHTMLAttributes<HTMLTableCellElement>, NumericColumnProps {
+    readonly children?: ReactNode;
+    /** A consumer ref for the `<td>` itself. */
+    readonly ref?: Ref<HTMLTableCellElement>;
+}
+export declare function TD({ children, numeric, ...props }: TDProps): import("react").JSX.Element;
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEhG,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAMlE;AAED,qEAAqE;AACrE,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IAChF,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,uBAAuB,CAAC,CAAC;CAC7C;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAE9D;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAE9D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACzC;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAEvD;AAED,yDAAyD;AACzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;GAKG;AACH,MAAM,WAAW,OAAQ,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,kBAAkB;IACzF,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CAC1C;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAe,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,+BAMjF;AAED,MAAM,WAAW,OAAQ,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,kBAAkB;IACzF,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CAC1C;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,+BAMlE"}

package/dist/components/table.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Table({ children, className, ...props }) {
+    return (_jsx("table", { ...props, className: className === undefined ? 'tai-table' : `tai-table ${className}`, children: children }));
+}
+export function THead({ children, ...props }) {
+    return _jsx("thead", { ...props, children: children });
+}
+export function TBody({ children, ...props }) {
+    return _jsx("tbody", { ...props, children: children });
+}
+export function TR({ children, ...props }) {
+    return _jsx("tr", { ...props, children: children });
+}
+export function TH({ children, numeric = false, scope = 'col', ...props }) {
+    return (_jsx("th", { ...props, scope: scope, "data-numeric": numeric ? 'true' : undefined, children: children }));
+}
+export function TD({ children, numeric = false, ...props }) {
+    return (_jsx("td", { ...props, "data-numeric": numeric ? 'true' : undefined, children: children }));
+}
+//# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/components/table.tsx"],"names":[],"mappings":";AAuBA,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IACjE,OAAO,CACL,mBAAW,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,YAC1F,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AASD,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAqB;IAC7D,OAAO,mBAAW,KAAK,YAAG,QAAQ,GAAS,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAqB;IAC7D,OAAO,mBAAW,KAAK,YAAG,QAAQ,GAAS,CAAC;AAC9C,CAAC;AAQD,MAAM,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACtD,OAAO,gBAAQ,KAAK,YAAG,QAAQ,GAAM,CAAC;AACxC,CAAC;AAmBD,MAAM,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAW;IAChF,OAAO,CACL,gBAAQ,KAAK,EAAE,KAAK,EAAE,KAAK,kBAAgB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACpE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAW;IACjE,OAAO,CACL,gBAAQ,KAAK,kBAAgB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACtD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}

package/dist/components/tabs.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface TabItem {
+    readonly value: string;
+    readonly label: string;
+    readonly content: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface TabsProps {
+    readonly items: readonly TabItem[];
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onValueChange?: (value: string) => void;
+}
+export declare function Tabs({ items, value, defaultValue, onValueChange }: TabsProps): import("react").JSX.Element;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,SAAS,+BA2B5E"}

package/dist/components/tabs.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `Tabs` — a wrapper over Radix Tabs (roles `tablist` / `tab` / `tabpanel`,
+ * arrow-key roving focus). Panels are declared inline per item. The selected
+ * tab's accent rail and heavier label come from `.tai-tab[data-state='active']`
+ * in the stylesheet, keyed off the `data-state` Radix stamps on each trigger.
+ */
+import * as RadixTabs from '@radix-ui/react-tabs';
+export function Tabs({ items, value, defaultValue, onValueChange }) {
+    const firstValue = items[0]?.value;
+    return (_jsxs(RadixTabs.Root, { value: value, defaultValue: defaultValue ?? firstValue, onValueChange: onValueChange, children: [_jsx(RadixTabs.List, { className: "tai-tablist", children: items.map((item) => (_jsx(RadixTabs.Trigger, { value: item.value, disabled: item.disabled, className: "tai-tab", children: item.label }, item.value))) }), items.map((item) => (_jsx(RadixTabs.Content, { value: item.value, className: "tai-tabpanel", children: item.content }, item.value)))] }));
+}
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAiBlD,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAa;IAC3E,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IACnC,OAAO,CACL,MAAC,SAAS,CAAC,IAAI,IACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,IAAI,UAAU,EACxC,aAAa,EAAE,aAAa,aAE5B,KAAC,SAAS,CAAC,IAAI,IAAC,SAAS,EAAC,aAAa,YACpC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,CAAC,OAAO,IAEhB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,SAAS,YAElB,IAAI,CAAC,KAAK,IALN,IAAI,CAAC,KAAK,CAMG,CACrB,CAAC,GACa,EAChB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,CAAC,OAAO,IAAkB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,cAAc,YAC5E,IAAI,CAAC,OAAO,IADS,IAAI,CAAC,KAAK,CAEd,CACrB,CAAC,IACa,CAClB,CAAC;AACJ,CAAC"}

package/dist/components/tags.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Tag rendering + authoring, shared across features. `TagChips` displays a list of
+ * labels as escaped chips (server strings are arbitrary — React escapes every one,
+ * never an HTML sink). `TagsInput` is the controlled add/remove editor.
+ *
+ * A tag is a `tai-chip tai-chip-static`: it reads, it is not a control. The
+ * control beside it is the `tai-icon-btn` that removes it, which carries the
+ * accessible name ("Remove tag <tag>") because its `CloseIcon` is decorative.
+ *
+ * These live in the SDK because more than one feature (presets, agents, and the
+ * version-history panel's per-version tag editor) needs the same control; a single
+ * canonical copy keeps the affordance identical everywhere.
+ */
+import { type ReactNode } from 'react';
+export interface TagChipsProps {
+    readonly tags: readonly string[];
+}
+/** Read-only chips for a list of tags. Renders nothing when there are none. */
+export declare function TagChips({ tags }: TagChipsProps): ReactNode;
+export interface TagsInputProps {
+    readonly value: readonly string[];
+    readonly onChange: (next: string[]) => void;
+    readonly disabled?: boolean;
+    /**
+     * The draft input's accessible name when no enclosing `Field` supplies one.
+     * Forwarded to the input as a native attribute — see the docblock below.
+     */
+    readonly 'aria-label'?: string;
+}
+/**
+ * Controlled tag editor. The caller owns the `value` list; `onChange` receives the
+ * next list on every add/remove. A blank or duplicate entry is ignored (never a
+ * silent duplicate chip). Enter or comma commits the draft chip.
+ *
+ * The draft input is a NATIVE-ATTRIBUTE PASS-THROUGH (the family `inputs.tsx`
+ * documents): inside a `Field` it renders the SDK's `TextInput`, which spreads
+ * `useFieldControl()` and so claims the Field's control id, taking the Field's
+ * visible label as its name; mounted OUTSIDE a `Field` it is named by a caller
+ * `aria-label`, which the editor forwards to that same input. Without one a bare
+ * editor is unnamed — the published component owns the naming route rather than
+ * assuming a `Field` is always present. When a `Field` DOES name it, a caller
+ * `aria-label` still has to CONTAIN that visible label (WCAG 2.5.3, Label in
+ * Name); `components/field-group.test.ts` enforces that at every call site.
+ */
+export declare function TagsInput({ value, onChange, disabled, 'aria-label': ariaLabel, }: TagsInputProps): ReactNode;
+//# sourceMappingURL=tags.d.ts.map

package/dist/components/tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../src/components/tags.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASrE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CAClC;AAED,+EAA+E;AAC/E,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,aAAa,GAAG,SAAS,CAW3D;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,GAAG,SAAS,CAiE5B"}

package/dist/components/tags.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tag rendering + authoring, shared across features. `TagChips` displays a list of
+ * labels as escaped chips (server strings are arbitrary — React escapes every one,
+ * never an HTML sink). `TagsInput` is the controlled add/remove editor.
+ *
+ * A tag is a `tai-chip tai-chip-static`: it reads, it is not a control. The
+ * control beside it is the `tai-icon-btn` that removes it, which carries the
+ * accessible name ("Remove tag <tag>") because its `CloseIcon` is decorative.
+ *
+ * These live in the SDK because more than one feature (presets, agents, and the
+ * version-history panel's per-version tag editor) needs the same control; a single
+ * canonical copy keeps the affordance identical everywhere.
+ */
+import { useState } from 'react';
+import { CloseIcon } from './icons';
+import { Button } from './primitives';
+import { TextInput } from './inputs';
+/** A tag and its remove control read as one unit, tighter than the row default. */
+const tagGroupStyle = { gap: 'var(--tai-space-1)' };
+/** Read-only chips for a list of tags. Renders nothing when there are none. */
+export function TagChips({ tags }) {
+    if (tags.length === 0)
+        return null;
+    return (_jsx("span", { className: "tai-row", style: tagGroupStyle, children: tags.map((tag) => (_jsx("span", { className: "tai-chip tai-chip-static", children: tag }, tag))) }));
+}
+/**
+ * Controlled tag editor. The caller owns the `value` list; `onChange` receives the
+ * next list on every add/remove. A blank or duplicate entry is ignored (never a
+ * silent duplicate chip). Enter or comma commits the draft chip.
+ *
+ * The draft input is a NATIVE-ATTRIBUTE PASS-THROUGH (the family `inputs.tsx`
+ * documents): inside a `Field` it renders the SDK's `TextInput`, which spreads
+ * `useFieldControl()` and so claims the Field's control id, taking the Field's
+ * visible label as its name; mounted OUTSIDE a `Field` it is named by a caller
+ * `aria-label`, which the editor forwards to that same input. Without one a bare
+ * editor is unnamed — the published component owns the naming route rather than
+ * assuming a `Field` is always present. When a `Field` DOES name it, a caller
+ * `aria-label` still has to CONTAIN that visible label (WCAG 2.5.3, Label in
+ * Name); `components/field-group.test.ts` enforces that at every call site.
+ */
+export function TagsInput({ value, onChange, disabled, 'aria-label': ariaLabel, }) {
+    const [draft, setDraft] = useState('');
+    const add = () => {
+        const tag = draft.trim();
+        if (tag === '' || value.includes(tag)) {
+            setDraft('');
+            return;
+        }
+        onChange([...value, tag]);
+        setDraft('');
+    };
+    const remove = (tag) => {
+        onChange(value.filter((existing) => existing !== tag));
+    };
+    return (_jsxs("div", { className: "tai-stack tai-stack-2", children: [_jsxs("div", { className: "tai-row", children: [_jsx("div", { style: { flex: 1 }, children: _jsx(TextInput, { value: draft, onChange: (event) => {
+                                setDraft(event.target.value);
+                            }, onKeyDown: (event) => {
+                                // Enter or comma commits the draft chip.
+                                if (event.key === 'Enter' || event.key === ',') {
+                                    event.preventDefault();
+                                    add();
+                                }
+                            }, placeholder: "Add a tag\u2026", "aria-label": ariaLabel, disabled: disabled }) }), _jsx(Button, { type: "button", onClick: add, disabled: disabled, children: "Add tag" })] }), value.length > 0 ? (_jsx("div", { className: "tai-row", children: value.map((tag) => (_jsxs("span", { className: "tai-row", style: tagGroupStyle, children: [_jsx("span", { className: "tai-chip tai-chip-static", children: tag }), _jsx("button", { type: "button", className: "tai-icon-btn", "aria-label": `Remove tag ${tag}`, onClick: () => {
+                                remove(tag);
+                            }, disabled: disabled, children: _jsx(CloseIcon, {}) })] }, tag))) })) : null] }));
+}
+//# sourceMappingURL=tags.js.map

package/dist/components/tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/components/tags.tsx"],"names":[],"mappings":"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"}