@tai42/studio-sdk 21.0.0 → 22.0.1

package/dist/components/chip-group.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `ChipGroup` — a tap-to-select grid of pill chips (`.tai-chip`), in two modes.
+ *
+ * `single` is a `role="radiogroup"` of `role="radio"` chips carrying `aria-checked`:
+ * exactly one value is selected, the arrow keys move the selection, and only the
+ * selected chip (or the first, when none is) sits in the tab order. `multi` is a
+ * group of toggle buttons carrying `aria-pressed`: any number are selected, the
+ * arrow keys move focus, and Space/Enter (the native button activation) toggles the
+ * focused chip.
+ *
+ * Roving tabindex and arrow-key movement are owned here — there is no multi-select
+ * primitive to borrow — so both modes share one keyboard model: ←/↑ to the previous
+ * chip, →/↓ to the next (wrapping), Home/End to the ends, skipping disabled chips.
+ * The handler rides each chip (a button, an interactive element) rather than the
+ * container, so no static element carries an interaction. Like `RadioGroup`, the
+ * group takes its accessible name from an enclosing group `Field`, not a label of
+ * its own.
+ */
+import type { ReactNode } from 'react';
+/** One selectable chip: its answer `value` and the visible `label`. */
+export interface ChipOption {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+export type ChipGroupProps = {
+    /** Exactly one value selected — a `radiogroup` of radios. */
+    readonly mode: 'single';
+    readonly options: readonly ChipOption[];
+    readonly value: string;
+    readonly onValueChange: (value: string) => void;
+    readonly disabled?: boolean;
+} | {
+    /** Any number selected — a group of `aria-pressed` toggle buttons. */
+    readonly mode: 'multi';
+    readonly options: readonly ChipOption[];
+    readonly value: readonly string[];
+    readonly onValueChange: (value: readonly string[]) => void;
+    readonly disabled?: boolean;
+};
+export declare function ChipGroup(props: ChipGroupProps): ReactNode;
+//# sourceMappingURL=chip-group.d.ts.map

package/dist/components/chip-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.d.ts","sourceRoot":"","sources":["../../src/components/chip-group.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,uEAAuE;AACvE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,MAAM,cAAc,GACtB;IACE,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B,GACD;IACE,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEN,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CA4G1D"}

package/dist/components/chip-group.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useFieldControl } from './field';
+export function ChipGroup(props) {
+    const { options, disabled = false } = props;
+    const field = useFieldControl();
+    const chipRefs = useRef([]);
+    const isSelected = (option) => props.mode === 'single' ? props.value === option.value : props.value.includes(option.value);
+    // The chip in the tab order: the (first) selected one, else the first enabled
+    // one — so Tab lands on the active choice and the arrows rove from there.
+    const [rovingIndex, setRovingIndex] = useState(() => {
+        const selected = options.findIndex(isSelected);
+        if (selected >= 0)
+            return selected;
+        const firstEnabled = options.findIndex((option) => option.disabled !== true);
+        return firstEnabled >= 0 ? firstEnabled : 0;
+    });
+    const enabledIndices = options
+        .map((option, index) => (option.disabled === true ? -1 : index))
+        .filter((index) => index >= 0);
+    const focusChip = (index) => {
+        setRovingIndex(index);
+        chipRefs.current[index]?.focus();
+    };
+    const select = (option) => {
+        if (props.mode === 'single') {
+            props.onValueChange(option.value);
+            return;
+        }
+        const chosen = new Set(props.value);
+        if (chosen.has(option.value))
+            chosen.delete(option.value);
+        else
+            chosen.add(option.value);
+        // Keep the OPTIONS' declared order, so the emitted array reads the way the form
+        // lists the choices rather than the order the chips were pressed.
+        props.onValueChange(options.map((candidate) => candidate.value).filter((v) => chosen.has(v)));
+    };
+    const onChipKeyDown = (event) => {
+        if (disabled || enabledIndices.length === 0)
+            return;
+        const position = enabledIndices.indexOf(rovingIndex);
+        let nextPosition;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextPosition = (position + 1) % enabledIndices.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextPosition = (position - 1 + enabledIndices.length) % enabledIndices.length;
+                break;
+            case 'Home':
+                nextPosition = 0;
+                break;
+            case 'End':
+                nextPosition = enabledIndices.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const nextIndex = enabledIndices[nextPosition];
+        if (nextIndex === undefined)
+            return;
+        const nextOption = options[nextIndex];
+        if (nextOption === undefined)
+            return;
+        focusChip(nextIndex);
+        // A radiogroup selects as it moves; a multi-select group only moves focus and
+        // leaves Space/Enter to toggle.
+        if (props.mode === 'single')
+            props.onValueChange(nextOption.value);
+    };
+    return (_jsx("div", { role: props.mode === 'single' ? 'radiogroup' : 'group', className: "tai-row", "aria-describedby": field['aria-describedby'], children: options.map((option, index) => {
+            const selected = isSelected(option);
+            return (_jsx("button", { ref: (element) => {
+                    chipRefs.current[index] = element;
+                }, type: "button", className: "tai-chip", role: props.mode === 'single' ? 'radio' : undefined, "aria-checked": props.mode === 'single' ? selected : undefined, "aria-pressed": props.mode === 'multi' ? selected : undefined, "aria-invalid": field['aria-invalid'], tabIndex: index === rovingIndex ? 0 : -1, disabled: disabled || option.disabled === true, onClick: () => {
+                    focusChip(index);
+                    select(option);
+                }, onKeyDown: onChipKeyDown, children: option.label }, option.value));
+        }) }));
+}
+//# sourceMappingURL=chip-group.js.map

package/dist/components/chip-group.js.map

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

package/dist/components/components.css

@@ -1061,11 +1061,16 @@
       color var(--tai-motion-fast) ease;
   }
 
-  .tai-chip:not(.tai-chip-static):not([aria-pressed='true']):hover:not(:disabled) {
+  .tai-chip:not(.tai-chip-static):not([aria-pressed='true']):not([aria-checked='true']):hover:not(
+      :disabled
+    ) {
     background: var(--tai-color-surface);
   }
 
-  .tai-chip[aria-pressed='true'] {
+  /* A selected chip, pressed (a multi-select toggle) OR checked (a single-select
+     radio chip): both wear the accent tint. */
+  .tai-chip[aria-pressed='true'],
+  .tai-chip[aria-checked='true'] {
     background: var(--tai-color-accent-tint);
     border-color: var(--tai-color-accent);
     color: var(--tai-color-accent-on-tint);
@@ -1073,7 +1078,8 @@
 
   /* A selected chip KEEPS its tint on hover and strengthens its border instead —
      the one part that moves in both themes (see the segment rule above). */
-  .tai-chip[aria-pressed='true']:hover:not(:disabled) {
+  .tai-chip[aria-pressed='true']:hover:not(:disabled),
+  .tai-chip[aria-checked='true']:hover:not(:disabled) {
     border-color: var(--tai-color-accent-hover);
   }