@tai42/studio-sdk 0.2.0

package/src/components/radio-group.tsx

@@ -0,0 +1,160 @@
+/**
+ * `RadioGroup` — a design-system wrapper over Radix RadioGroup (role `radiogroup`
+ * with `radio` items), in two shapes.
+ *
+ * `list` (the default) renders one row per option: a dot indicator inside a
+ * linked `<label>`, so the option text is the radio's accessible name.
+ * `segmented` renders each option AS a segment — the Radix item itself is the
+ * control, carrying its icon and its label with no dot — which is the shape a
+ * compact single-choice control (a light / dark / system switcher) needs.
+ *
+ * The group takes its accessible name from a `label` it renders itself or from
+ * `aria-label`. It does NOT read one from an enclosing `Field`: a group `Field`
+ * renders its own named `role="group"` container around this component, so the
+ * name lives one level up and this component would otherwise duplicate it. A
+ * `Field` WITHOUT `group` around a RadioGroup is a mistake — the field's
+ * `<label for>` dangles at an id no element carries and neither element ends up
+ * named — and `field-group.test.ts` fails the build on it.
+ *
+ * Roving tabindex and arrow-key movement belong to Radix; this component only
+ * chooses the layout that matches `orientation` and passes the prop straight
+ * through, so a caller that names no orientation keeps Radix's both-axes default
+ * rather than being pinned to one.
+ */
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { useId } from 'react';
+import type { ReactNode } from 'react';
+
+import { useFieldControl } from './field';
+
+export interface RadioOption {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+  /** Mark rendered alongside the label. Decorative — the label carries the name. */
+  readonly icon?: ReactNode;
+  /** Render the label for screen readers only; it stays the option's accessible name. */
+  readonly visuallyHiddenLabel?: boolean;
+}
+
+export interface RadioGroupProps {
+  readonly options: readonly RadioOption[];
+  readonly value?: string;
+  readonly defaultValue?: string;
+  readonly onValueChange?: (value: string) => void;
+  readonly disabled?: boolean;
+  readonly name?: string;
+  /** Visible group label, rendered above the options and wired as the group's name. */
+  readonly label?: string;
+  /**
+   * Accessible group name when `label` supplies none. `label` wins where both are
+   * given — it names the group from visible text, and emitting both would leave
+   * this string computed by nothing.
+   */
+  readonly 'aria-label'?: string;
+  /**
+   * Layout, and — when given — the arrow-key axis. Omitted, the options stack
+   * and BOTH axes move between them, which is what Radix does with no
+   * orientation and what every caller that never passed one already had. Pass a
+   * value only to pin the axis as well.
+   */
+  readonly orientation?: 'horizontal' | 'vertical';
+  /** `list` is a stack of labelled radios; `segmented` is a compact segment strip. */
+  readonly variant?: 'list' | 'segmented';
+}
+
+/** The option's name text, hidden from sight but not from assistive tech on request. */
+function OptionLabel({ option }: { readonly option: RadioOption }): ReactNode {
+  return (
+    <span className={option.visuallyHiddenLabel === true ? 'tai-visually-hidden' : undefined}>
+      {option.label}
+    </span>
+  );
+}
+
+export function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  name,
+  label,
+  'aria-label': ariaLabel,
+  orientation,
+  variant = 'list',
+}: RadioGroupProps) {
+  const field = useFieldControl();
+  const baseId = useId();
+  const ownLabelId = `${baseId}-label`;
+  // `label` is the STANDALONE fallback name. Inside a group `Field`, the Field
+  // renders the named `role="group"` container itself, so this component neither
+  // knows nor needs the field's label id — the group is named by construction.
+  const labelledBy = label === undefined ? undefined : ownLabelId;
+
+  const rootClassName =
+    variant === 'segmented'
+      ? 'tai-segmented'
+      : orientation === 'horizontal'
+        ? 'tai-row'
+        : 'tai-stack tai-stack-2';
+
+  const group = (
+    <RadixRadioGroup.Root
+      className={rootClassName}
+      aria-labelledby={labelledBy}
+      // The accessible-name computation takes `aria-labelledby` over `aria-label`,
+      // so emitting both would ship a caller string that nothing ever reads.
+      aria-label={labelledBy === undefined ? ariaLabel : undefined}
+      aria-describedby={field['aria-describedby']}
+      aria-invalid={field['aria-invalid']}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      name={name}
+      orientation={orientation}
+    >
+      {options.map((option) => {
+        if (variant === 'segmented') {
+          return (
+            <RadixRadioGroup.Item
+              key={option.value}
+              className="tai-segment"
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.icon}
+              <OptionLabel option={option} />
+            </RadixRadioGroup.Item>
+          );
+        }
+        const itemId = `${baseId}-${option.value}`;
+        return (
+          <label key={option.value} htmlFor={itemId} className="tai-choice">
+            <RadixRadioGroup.Item
+              id={itemId}
+              className="tai-radio"
+              value={option.value}
+              disabled={option.disabled}
+            >
+              <RadixRadioGroup.Indicator className="tai-radio-indicator" />
+            </RadixRadioGroup.Item>
+            {option.icon}
+            <OptionLabel option={option} />
+          </label>
+        );
+      })}
+    </RadixRadioGroup.Root>
+  );
+
+  if (label === undefined) return group;
+  return (
+    <div className="tai-stack tai-stack-2">
+      <span id={ownLabelId} className="tai-field-label">
+        {label}
+      </span>
+      {group}
+    </div>
+  );
+}

package/src/components/reveal-input.tsx

@@ -0,0 +1,87 @@
+/**
+ * `RevealInput` — a controlled text input whose value is MASKED by default with a
+ * reveal-on-click eye toggle. The masking is native (`type="password"` when
+ * hidden, `type="text"` when revealed) so editing never corrupts the value; it is
+ * purely visual — the real value always lives in the input's `value`. When
+ * `onChange` is omitted or `readOnly` is set the field is read-only but still
+ * revealable. The value is never logged.
+ *
+ * The field is a `tai-input` and the toggle a `tai-icon-btn` whose accessible name
+ * ("Show value" / "Hide value") states the action; the eye mark itself is
+ * decorative.
+ */
+import { useState } from 'react';
+
+import { Field } from './field';
+import { EyeIcon, EyeOffIcon } from './icons';
+import { TextInput } from './inputs';
+
+export interface RevealInputProps {
+  readonly value: string;
+  readonly onChange?: (value: string) => void;
+  readonly readOnly?: boolean;
+  readonly disabled?: boolean;
+  readonly idPrefix?: string;
+  readonly label?: string;
+  readonly placeholder?: string;
+  /** Accessible name for the inner input when no visual `label` is rendered. */
+  readonly 'aria-label'?: string;
+}
+
+export function RevealInput({
+  value,
+  onChange,
+  readOnly,
+  disabled,
+  idPrefix = 'reveal-input',
+  label,
+  placeholder,
+  'aria-label': ariaLabel,
+}: RevealInputProps) {
+  const [revealed, setRevealed] = useState(false);
+  const isReadOnly = readOnly === true || onChange === undefined;
+  const toggleLabel = revealed ? 'Hide value' : 'Show value';
+
+  const control = (
+    <div className="tai-row">
+      {/* The field takes the row; the toggle keeps its square icon-button size. */}
+      <div style={{ flex: 1 }}>
+        <TextInput
+          type={revealed ? 'text' : 'password'}
+          aria-label={ariaLabel}
+          value={value}
+          onChange={
+            isReadOnly
+              ? undefined
+              : (event) => {
+                  onChange(event.target.value);
+                }
+          }
+          readOnly={isReadOnly}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+      <button
+        type="button"
+        className="tai-icon-btn"
+        aria-label={toggleLabel}
+        data-testid={`${idPrefix}-toggle`}
+        disabled={disabled}
+        onClick={() => {
+          setRevealed((prev) => !prev);
+        }}
+      >
+        {revealed ? <EyeOffIcon /> : <EyeIcon />}
+      </button>
+    </div>
+  );
+
+  return (
+    <div data-testid={idPrefix}>
+      {label !== undefined ? <Field label={label}>{control}</Field> : control}
+    </div>
+  );
+}