zidane-ui 9.1.1 → 9.1.3

package/src/components/Form.tsx

@@ -1,593 +0,0 @@
-/**
- * Form sections, rows and controls: a section is a labelled tray; plain rows
- * sit flat in it with the row-hover wash; entity cards (a server, a provider)
- * sit raised in it (`FormCard`). Toggle rows flip on click, choice rows cycle
- * to the next option, nav rows navigate. A row whose one control sits among
- * other buttons (a picker with Test and clear, a select) is a `HostRow`: it
- * washes and answers a click like a row button. Rows of several controls
- * (segments, sliders, inputs) leave the input to them. Inputs are wells
- * (`INPUT_CLASS`).
- */
-import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import { Segmented } from './Segmented';
-import { Raised, SectionLabel, Tray } from './Surface';
-import { SwitchGlyph } from './SwitchGlyph';
-
-const FOCUS_RING =
-  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]';
-
-/** A whole-row button inside a section tray: flat, washed on hover. */
-export const ROW_BUTTON_CLASS = `zg-press-subtle flex items-center gap-3 w-full text-left px-3 py-2 rounded-zg-md bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] transition-colors disabled:opacity-zg-disabled disabled:cursor-default disabled:hover:before:bg-transparent ${FOCUS_RING}`;
-
-/** A static row whose control (segment, slider, input) takes the input. */
-export const ROW_CLASS = 'flex items-center gap-3 px-3 py-2';
-
-/** A {@link HostRow}'s surface: a row button's wash, giving with the control inside (`zg-press-host`). */
-export const ROW_HOST_CLASS = `zg-press-host ${ROW_CLASS} rounded-zg-md`;
-
-/** The control of a {@link HostRow} that takes the row's width: a picker's trigger, holding the label and the value. */
-export const ROW_TRIGGER_CLASS = `zg-press-subtle flex items-center gap-3 flex-1 min-w-0 text-left bg-transparent border-0 p-0 cursor-pointer text-[var(--zg-text)] rounded-zg-sm disabled:cursor-default ${FOCUS_RING}`;
-
-/** What answers a click on a host row by itself. */
-const ROW_OWN_TARGETS = 'button, a, input, select, textarea, label';
-
-/** Single-line text input: a well set into its surface. */
-export const INPUT_CLASS =
-  'zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled';
-
-/** Multi-line / code input. */
-export const TEXTAREA_CLASS =
-  'zg-well w-full px-2.5 py-2 text-zg-label font-mono leading-relaxed placeholder:text-[var(--zg-text-subtle)] resize-y';
-
-/** Label above a form field. */
-export const FIELD_LABEL_CLASS = 'block text-xs text-[var(--zg-text-muted)] mb-1';
-
-/** An inline add / install form: a raised card above the list it feeds. */
-export const FORM_CARD_CLASS = 'zg-raised border rounded-zg-lg p-4 space-y-3';
-
-/** Props for {@link ErrorNote}. */
-export interface ErrorNoteProps {
-  /** The error message. */
-  children: ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A failure worth reading: a soft danger wash, no border.
- *
- * @param props - Component props.
- */
-export function ErrorNote({ children, className, style }: ErrorNoteProps) {
-  return (
-    <div
-      role="alert"
-      className={['px-3 py-2 rounded-zg-md bg-zg-danger/10 text-xs text-zg-danger break-words', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link OpLine}. */
-export interface OpLineProps {
-  /**
-   * Tone of the line: `busy` and `notice` are muted (a result worth a quiet line,
-   * never a celebration: a success that shows elsewhere needs no line at all), and
-   * `error` is danger-coloured and announced as an alert.
-   */
-  kind: 'busy' | 'notice' | 'error';
-  /** The feedback text. */
-  children: ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * One-line feedback for a lifecycle op (install / update / remove).
- *
- * @param props - Component props.
- */
-export function OpLine({ kind, children, className, style }: OpLineProps) {
-  return (
-    <div
-      role={kind === 'error' ? 'alert' : undefined}
-      className={[
-        `px-1 text-xs break-words ${kind === 'error' ? 'text-zg-danger' : 'text-[var(--zg-text-muted)]'}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link FormSection}. */
-export interface FormSectionProps {
-  /**
-   * Label above the section. The label line is omitted when neither `title` nor `trailing` is set.
-   */
-  title?: ReactNode;
-  /** Right side of the label line: a count, a small action. */
-  trailing?: ReactNode;
-  /**
-   * `rows` hosts flat rows; `cards` spaces raised {@link FormCard}s apart.
-   * @default 'rows'
-   */
-  layout?: 'rows' | 'cards';
-  /** Extra classes on the section. */
-  className?: string;
-  /** The rows or cards. */
-  children: ReactNode;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A labelled group. `rows` (default) hosts flat rows; `cards` spaces raised
- * `FormCard`s apart on the same tray.
- *
- * @param props - Component props.
- */
-export function FormSection({ title, trailing, layout = 'rows', className = '', children, style }: FormSectionProps) {
-  return (
-    <section className={className} style={style}>
-      {(title || trailing) && (
-        // Over rows, the label starts where their text does and its trailing control ends where theirs do
-        // (the tray's 4px and a row's 12px); cards set their own insets.
-        <div
-          className={`flex items-center justify-between gap-2 min-h-5 ${layout === 'rows' ? 'px-4' : 'px-1'} mb-1.5`}
-        >
-          {title ? <SectionLabel>{title}</SectionLabel> : <span />}
-          {trailing}
-        </div>
-      )}
-      <Tray radius="lg" className={layout === 'cards' ? 'p-1.5 flex flex-col gap-1.5' : 'p-1 flex flex-col'}>
-        {children}
-      </Tray>
-    </section>
-  );
-}
-
-/** Props for {@link FormCard}. */
-export interface FormCardProps {
-  /** Extra classes on the card. */
-  className?: string;
-  /** The card's content. */
-  children: ReactNode;
-  /** Test id for the card element. */
-  'data-testid'?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * An entity card lifted off its section tray (server, provider, environment).
- *
- * @param props - Component props.
- */
-export function FormCard({ className = '', children, ...rest }: FormCardProps) {
-  return (
-    <Raised radius="md" className={`overflow-hidden ${className}`} {...rest}>
-      {children}
-    </Raised>
-  );
-}
-
-/** Props for {@link RowText}. */
-export interface RowTextProps {
-  /** The row's main text. */
-  label: ReactNode;
-  /** Muted text under the label. */
-  description?: ReactNode;
-  /**
-   * Cut the description to one line with an ellipsis. When off, it wraps.
-   * @default true
-   */
-  truncate?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Label over an optional muted description, the left half of every row.
- *
- * @param props - Component props.
- */
-export function RowText({ label, description, truncate = true, className, style }: RowTextProps) {
-  return (
-    <div className={['flex-1 min-w-0', className].filter(Boolean).join(' ')} style={style}>
-      <div className="text-sm text-[var(--zg-text)]">{label}</div>
-      {description && (
-        <div className={`text-xs text-[var(--zg-text-muted)] ${truncate ? 'truncate' : 'zg-pretty'}`}>
-          {description}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** Props for {@link MetaChip}. */
-export interface MetaChipProps {
-  /**
-   * Text colour of the chip.
-   * @default 'muted'
-   */
-  tone?: 'muted' | 'text' | 'accent' | 'success' | 'warn' | 'danger' | 'info';
-  /** Native tooltip. */
-  title?: string;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** The chip's content. */
-  children: ReactNode;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A status or value chip set into its surface: track tone, meta voice.
- *
- * @param props - Component props.
- */
-export function MetaChip({ tone = 'muted', title, className = '', children, style }: MetaChipProps) {
-  return (
-    <span
-      title={title}
-      className={`zg-track-chip zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 shrink-0 whitespace-nowrap ${CHIP_TONE[tone]} ${className}`}
-      style={style}
-    >
-      {children}
-    </span>
-  );
-}
-
-const CHIP_TONE = {
-  muted: '',
-  text: '!text-[var(--zg-text)]',
-  accent: '!text-[var(--zg-accent)]',
-  success: '!text-zg-success',
-  warn: '!text-zg-warn',
-  danger: '!text-zg-danger',
-  info: '!text-zg-info',
-} as const;
-
-/** Props for {@link Switch}. */
-export interface SwitchProps {
-  /** Whether the switch is on. */
-  on: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The settings-row switch glyph (`SwitchGlyph` md); the row around it is the control.
- *
- * @param props - Component props.
- */
-export function Switch({ on, className, style }: SwitchProps) {
-  return <SwitchGlyph on={on} size="md" className={className} style={style} />;
-}
-
-/** Props for {@link Checkbox}. */
-export interface CheckboxProps {
-  /** Whether the box is ticked. */
-  checked: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The checkbox glyph for multi-select lists; the row around it is the control.
- *
- * @param props - Component props.
- */
-export function Checkbox({ checked, className, style }: CheckboxProps) {
-  return (
-    <span
-      aria-hidden
-      className={[
-        `mt-0.5 w-4 h-4 rounded-zg-sm shrink-0 flex items-center justify-center transition-colors ${
-          checked
-            ? 'bg-[var(--zg-accent-fill)]'
-            : 'bg-[var(--zg-track)] shadow-[inset_0_0_0_1px_var(--zg-border-strong)]'
-        }`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {checked && <span className="i-ph-check-bold text-zg-label text-zg-accent-fill-fg" />}
-    </span>
-  );
-}
-
-/** Props for {@link ToggleSwitch}. */
-export interface ToggleSwitchProps {
-  /** Whether the switch is on. */
-  on: boolean;
-  /** Called with the new state when the switch is clicked. */
-  onChange: (on: boolean) => void;
-  /** Accessible name of the switch. It has no visible text. */
-  label: string;
-  /** Native tooltip. */
-  title?: string;
-  /**
-   * Grey the switch out and ignore clicks.
-   * @default false
-   */
-  disabled?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A standalone switch control, for rows that host other buttons too.
- *
- * @param props - Component props.
- */
-export function ToggleSwitch({ on, onChange, label, title, disabled = false, className, style }: ToggleSwitchProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={on}
-      aria-label={label}
-      title={title}
-      disabled={disabled}
-      onClick={() => onChange(!on)}
-      className={[
-        `zg-press-soft inline-flex shrink-0 rounded-full border-0 p-0 bg-transparent cursor-pointer disabled:opacity-zg-disabled disabled:cursor-default ${FOCUS_RING}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <Switch on={on} />
-    </button>
-  );
-}
-
-/** Props for {@link NavRow}. */
-export interface NavRowProps {
-  /**
-   * The row: its `label`, `description` and `icon` class, and `onSelect`, called when the row is
-   * clicked.
-   */
-  action: { label: string; description: string; icon: string; onSelect: () => void };
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A row that navigates somewhere (another modal, a sub-surface).
- *
- * @param props - Component props.
- */
-export function NavRow({ action, className, style }: NavRowProps) {
-  return (
-    <button
-      type="button"
-      onClick={action.onSelect}
-      className={[ROW_BUTTON_CLASS, className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <span className={`${action.icon} text-base text-[var(--zg-text-muted)] shrink-0`} aria-hidden />
-      <RowText label={action.label} description={action.description} />
-      <span className="i-ph-caret-right text-zg-meta text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-    </button>
-  );
-}
-
-/** Props for {@link HostRow}: the row's `div` attributes, `children` and `disabled`. */
-export interface HostRowProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The control can't be used now: no wash, no forwarding.
-   * @default false
-   */
-  disabled?: boolean;
-  /** The row's content, the control marked `data-row-control` among it. */
-  children: ReactNode;
-}
-
-/**
- * A row whose one control sits among other buttons (a picker with Test and
- * clear, a select, a switch beside a note): it washes on hover like a row
- * button, and a click anywhere on it but on a button or a field works the
- * control, the element marked `data-row-control` (or the button, select or
- * input inside it; a select opens its list). Keyboard users reach the
- * control itself.
- *
- * @param props - The row's `div` attributes, `children` and `disabled`.
- */
-export function HostRow({ disabled = false, className = '', children, ...rest }: HostRowProps) {
-  return (
-    // A pointer convenience, like a label: the keyboard reaches the control itself, which this hands a click to.
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
-      {...rest}
-      className={`${ROW_HOST_CLASS} ${disabled ? '' : 'cursor-pointer hover:before:bg-[var(--zg-row-hover)]'} transition-colors ${className}`}
-      onClick={(e) => {
-        rest.onClick?.(e);
-        if (disabled || e.defaultPrevented) return;
-        const row = e.currentTarget;
-        const target = e.target as Element;
-        // What it opened (a portaled menu) and its own buttons and fields answer for themselves.
-        const own = target.closest(ROW_OWN_TARGETS);
-        if (!row.contains(target) || (own && row.contains(own))) return;
-        const marked = row.querySelector<HTMLElement>('[data-row-control]');
-        const control = marked?.matches('button, select, input')
-          ? marked
-          : marked?.querySelector<HTMLElement>('button, select, input');
-        if (!control || (control as HTMLButtonElement).disabled) return;
-        control.focus({ preventScroll: true });
-        if (control instanceof HTMLSelectElement)
-          (control as HTMLSelectElement & { showPicker?: () => void }).showPicker?.();
-        else control.click();
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link SwitchRow}. */
-export interface SwitchRowProps {
-  /** The row's main text. */
-  label: string;
-  /** Muted text under the label. It wraps. */
-  description?: string;
-  /** Whether the option is on. */
-  on: boolean;
-  /** Called when the row is clicked. */
-  onToggle: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Plain on/off row for store-backed booleans (not the vendored settings table).
- *
- * @param props - Component props.
- */
-export function SwitchRow({ label, description, on, onToggle, className, style }: SwitchRowProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      onClick={onToggle}
-      aria-checked={on}
-      className={[ROW_BUTTON_CLASS, className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <RowText label={label} description={description} truncate={false} />
-      <Switch on={on} />
-    </button>
-  );
-}
-
-/** Props for {@link SegmentedRow}. */
-export interface SegmentedRowProps<T extends string> {
-  /** The row's main text. It also names the choice group. */
-  label: string;
-  /** Muted text under the label. It wraps. */
-  description?: string;
-  /** The value of the selected option. */
-  value: T;
-  /** Called with the new value when an option is picked. */
-  onChange: (v: T) => void;
-  /** The choices, as {@link SegmentedOption}s with a string `label`. */
-  options: { value: T; label: string; icon?: string; title?: string; disabled?: boolean }[];
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Label + description on the left, a Segmented picker on the right.
- *
- * @param props - Component props.
- */
-export function SegmentedRow<T extends string>({
-  label,
-  description,
-  value,
-  onChange,
-  options,
-  className,
-  style,
-}: SegmentedRowProps<T>) {
-  return (
-    <div className={[ROW_CLASS, className].filter(Boolean).join(' ')} style={style}>
-      <RowText label={label} description={description} truncate={false} />
-      <Segmented value={value} onChange={onChange} options={options} ariaLabel={label} className="shrink-0" />
-    </div>
-  );
-}
-
-/** Props for {@link SliderRow}. */
-export interface SliderRowProps {
-  /** The row's main text. It also names the slider. */
-  label: string;
-  /** Muted text under the label. It wraps. */
-  description?: string;
-  /** Current value. */
-  value: number;
-  /** Lowest value. */
-  min: number;
-  /** Highest value. */
-  max: number;
-  /** Increment between values. */
-  step: number;
-  /** Formats the value for the readout beside the slider. */
-  format: (v: number) => string;
-  /** Called with the new value while the slider moves. */
-  onChange: (v: number) => void;
-  /** Called when the slider is double-clicked, to restore the default value. */
-  onReset?: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Labelled range input with a value readout and a reset.
- *
- * @param props - Component props.
- */
-export function SliderRow({
-  label,
-  description,
-  value,
-  min,
-  max,
-  step,
-  format,
-  onChange,
-  onReset,
-  className,
-  style,
-}: SliderRowProps) {
-  return (
-    <div className={[ROW_CLASS, className].filter(Boolean).join(' ')} style={style}>
-      <RowText label={label} description={description} truncate={false} />
-      <input
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-        onDoubleClick={onReset}
-        className="zg-range w-36 shrink-0"
-        aria-label={label}
-      />
-      <span className="zg-meta w-12 text-right shrink-0">{format(value)}</span>
-    </div>
-  );
-}

package/src/components/Highlighted.tsx

@@ -1,68 +0,0 @@
-import type { CSSProperties } from 'react';
-
-/** Props for {@link Highlighted}. */
-export interface HighlightedProps {
-  /** The full text to render. */
-  text: string;
-  /**
-   * UTF-16 offsets in `text` of the characters to highlight, as a string matcher reports
-   * them. An empty list renders `text` plain.
-   */
-  indices: readonly number[];
-  /** Extra classes on the wrapping `span`. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * `text` with the characters at `indices` (a search match) in the accent. One
- * inline box, so a flex or grid parent lays it out as one item, not one per run.
- * Offsets are UTF-16 positions, and an emoji counts as matched when either of its units is.
- *
- * @param props - Component props.
- */
-export function Highlighted({ text, indices, className = '', style }: HighlightedProps) {
-  if (indices.length === 0)
-    return (
-      <span className={className} style={style}>
-        {text}
-      </span>
-    );
-  const set = new Set(indices);
-  const out: React.ReactNode[] = [];
-  let run = '';
-  let inMatch = false;
-  const flush = (key: number) => {
-    if (!run) return;
-    out.push(
-      inMatch ? (
-        <mark key={key} className="bg-transparent text-[var(--zg-accent)] font-medium">
-          {run}
-        </mark>
-      ) : (
-        run
-      ),
-    );
-    run = '';
-  };
-  // `indices` are UTF-16 offsets (what string matchers produce). Walk whole
-  // code points so an emoji is never split into two lone surrogates; it is
-  // matched when either of its units is.
-  let i = 0;
-  for (const ch of text) {
-    const m = set.has(i) || (ch.length > 1 && set.has(i + 1));
-    if (m !== inMatch) {
-      flush(i);
-      inMatch = m;
-    }
-    run += ch;
-    i += ch.length;
-  }
-  flush(text.length);
-  return (
-    <span className={className} style={style}>
-      {out}
-    </span>
-  );
-}