zidane-ui 9.1.1 → 9.1.4

package/src/components/StepFrame.tsx

@@ -1,151 +0,0 @@
-/**
- * The page of a wizard step. It has an eyebrow, the title and one sentence
- * under it, the body, an optional side pane, and a footer. The side
- * pane (a live preview) sits beside the body on wide windows and under it on
- * narrow ones. The page is a group named by its title, not a landmark, so one
- * page can show several. `StepActions` is the footer that most steps want:
- * Back on the left, Skip and Continue on the right. Neither listens to the
- * keyboard. The flow owns Enter and Escape, and it finds the buttons by their
- * `data-step-back` and `data-step-continue` attributes.
- */
-import { useId, type CSSProperties, type ReactNode } from 'react';
-
-import { useLabels } from '../labels';
-import { buttonClass } from './button';
-
-/** Props for {@link StepFrame}. */
-export interface StepFrameProps {
-  /** Small uppercase label above the title, such as the step's name. */
-  eyebrow?: ReactNode;
-  /** The step's question or heading. */
-  title: ReactNode;
-  /** One sentence under the title. */
-  lede?: ReactNode;
-  /** A side pane, such as a live preview: beside the body from 1024px wide, pinned 48px below the top of the scroller as the body scrolls, and under the body below that width. */
-  aside?: ReactNode;
-  /** The footer, usually {@link StepActions}. */
-  footer?: ReactNode;
-  /** Extra classes on the page. */
-  className?: string;
-  /** The step's body. */
-  children?: ReactNode;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a wizard step's page: its heading, its body, an optional side pane, and a footer.
- *
- * @param props - Component props.
- */
-export function StepFrame({ eyebrow, title, lede, aside, footer, className = '', children, style }: StepFrameProps) {
-  const titleId = useId();
-  return (
-    <div role="group" aria-labelledby={titleId} className={`flex flex-col gap-10 min-w-0 ${className}`} style={style}>
-      <header className="flex flex-col gap-2 max-w-[640px]">
-        {eyebrow && <span className="zg-section-label">{eyebrow}</span>}
-        <h2
-          id={titleId}
-          className="m-0 text-zg-title leading-7 font-medium tracking-[-0.01em] text-[var(--zg-text)] text-balance"
-        >
-          {title}
-        </h2>
-        {lede && <p className="m-0 text-zg-ui text-[var(--zg-text-muted)] text-pretty">{lede}</p>}
-      </header>
-      {aside ? (
-        <div className="grid gap-10 lg:gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-start">
-          <div className="min-w-0">{children}</div>
-          {/* Pinned with the same gap the page starts with (the flow's pt-12), never against the scroller's edge. */}
-          <aside className="min-w-0 lg:sticky lg:top-12">{aside}</aside>
-        </div>
-      ) : (
-        children && <div className="min-w-0">{children}</div>
-      )}
-      {footer && <footer className="pt-2">{footer}</footer>}
-    </div>
-  );
-}
-
-/** Props for {@link StepActions}. */
-export interface StepActionsProps {
-  /** Goes to the previous step. Absent: no Back button. */
-  onBack?: () => void;
-  /** Leaves this step's choices as they were and moves on. Absent: no Skip button. */
-  onSkip?: () => void;
-  /** Text of the Skip button. Defaults to the `skip` label. */
-  skipLabel?: ReactNode;
-  /** Moves on. Absent: no Continue button. */
-  onContinue?: () => void;
-  /** Text of the Continue button. Defaults to the `continue` label. */
-  continueLabel?: ReactNode;
-  /** The user cannot press Continue yet, such as before a provider is ready. */
-  continueDisabled?: boolean;
-  /** Continue is working. It shows as pressed, and the user cannot press it again. */
-  busy?: boolean;
-  /** Muted text before the buttons on the right, such as why Continue is off. */
-  note?: ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The usual step footer: Back on the left, and Skip and Continue on the right. Continue has its
- * `↵` keycap. A missing handler hides its button.
- *
- * @param props - Component props.
- */
-export function StepActions({
-  onBack,
-  onSkip,
-  skipLabel,
-  onContinue,
-  continueLabel,
-  continueDisabled = false,
-  busy = false,
-  note,
-  className,
-  style,
-}: StepActionsProps) {
-  const labels = useLabels();
-  return (
-    <div className={['flex items-center gap-2', className].filter(Boolean).join(' ')} style={style}>
-      {onBack && (
-        <button
-          type="button"
-          data-step-back
-          onClick={onBack}
-          className={buttonClass({ variant: 'ghost', flush: 'start' })}
-        >
-          {labels.back}
-        </button>
-      )}
-      <div className="ml-auto flex items-center gap-2 min-w-0">
-        {note && (
-          <span className="min-w-0 text-right text-zg-label text-[var(--zg-text-muted)] text-pretty">{note}</span>
-        )}
-        {onSkip && (
-          <button type="button" onClick={onSkip} className={buttonClass({ variant: 'ghost' })}>
-            {skipLabel ?? labels.skip}
-          </button>
-        )}
-        {onContinue && (
-          <button
-            type="button"
-            data-step-continue
-            onClick={onContinue}
-            disabled={continueDisabled || busy}
-            aria-busy={busy || undefined}
-            className={buttonClass({ variant: 'solid' })}
-          >
-            {continueLabel ?? labels.continue}
-            <span aria-hidden className="text-zg-label opacity-60">
-              ↵
-            </span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Stepper.tsx

@@ -1,157 +0,0 @@
-/**
- * The progress of a wizard. `dots` draws one dot for each step, and the
- * current one as a longer pill. `rail` lists the step names in a column. The
- * steps before the current one are done. With `onSelect`, they are buttons
- * that go back.
- */
-import type { CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-
-/** One step of a {@link Stepper}. */
-export interface StepperStep {
-  /** Stable id, passed to `onSelect`. */
-  id: string;
-  /** Step name: the rail's text, the dot's tooltip and accessible name. */
-  label: string;
-}
-
-const DOT_BASE = 'zg-stepper-dot block h-1.5 rounded-full';
-
-/** Props for {@link Stepper}. */
-export interface StepperProps {
-  /** The steps, in order. */
-  steps: readonly StepperStep[];
-  /** Id of the current step. */
-  current: string;
-  /** Called with a done step's id when it is clicked. Absent: done steps are not buttons. */
-  onSelect?: (id: string) => void;
-  /**
-   * `dots` for a top bar, `rail` for a column of names.
-   * @default 'dots'
-   */
-  variant?: 'dots' | 'rail';
-  /** Accessible name of the navigation. Defaults to the `steps` label. */
-  label?: string;
-  /** Extra classes on the navigation. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the progress of a wizard as dots or as a rail of step names. The current step carries
- * `aria-current="step"`. When `onSelect` is set, done steps go back through it.
- *
- * @param props - Component props.
- */
-export function Stepper({ steps, current, onSelect, variant = 'dots', label, className = '', style }: StepperProps) {
-  const labels = useLabels();
-  const index = Math.max(
-    0,
-    steps.findIndex((step) => step.id === current),
-  );
-  return (
-    <nav aria-label={label ?? labels.steps} className={className} style={style}>
-      <ol className={`m-0 p-0 list-none ${variant === 'dots' ? 'flex items-center' : 'flex flex-col gap-0.5'}`}>
-        {steps.map((step, i) => {
-          const state = i < index ? 'done' : i === index ? 'current' : 'todo';
-          const back = onSelect && state === 'done' ? () => onSelect(step.id) : undefined;
-          return (
-            <li key={step.id} aria-current={state === 'current' ? 'step' : undefined} className="flex">
-              {variant === 'dots' ? (
-                <DotStep label={step.label} state={state} onBack={back} goTo={labels.goToStep(step.label)} />
-              ) : (
-                <RailStep label={step.label} state={state} onBack={back} goTo={labels.goToStep(step.label)} />
-              )}
-            </li>
-          );
-        })}
-      </ol>
-      {variant === 'dots' && <span className="sr-only">{labels.stepOf(index + 1, steps.length)}</span>}
-    </nav>
-  );
-}
-
-type StepState = 'done' | 'current' | 'todo';
-
-function DotStep({
-  label,
-  state,
-  onBack,
-  goTo,
-}: {
-  label: string;
-  state: StepState;
-  onBack?: () => void;
-  goTo: string;
-}) {
-  const dot = (
-    <span
-      aria-hidden
-      className={`${DOT_BASE} ${
-        state === 'current'
-          ? 'w-4 bg-[var(--zg-accent)]'
-          : state === 'done'
-            ? 'w-1.5 bg-[color-mix(in_srgb,var(--zg-accent)_55%,var(--zg-track))]'
-            : 'w-1.5 bg-[var(--zg-track)]'
-      }`}
-    />
-  );
-  // The padding is the gap between dots, so a done dot's button is a target bigger than the dot.
-  if (!onBack)
-    return (
-      <span title={label} className="flex items-center px-[3px] py-[5px]">
-        {dot}
-      </span>
-    );
-  return (
-    <button
-      type="button"
-      onClick={onBack}
-      aria-label={goTo}
-      title={label}
-      className="flex items-center px-[3px] py-[5px] border-0 bg-transparent cursor-pointer rounded-full zg-focus-ring"
-    >
-      {dot}
-    </button>
-  );
-}
-
-function RailStep({
-  label,
-  state,
-  onBack,
-  goTo,
-}: {
-  label: string;
-  state: StepState;
-  onBack?: () => void;
-  goTo: string;
-}) {
-  const glyph =
-    state === 'done'
-      ? 'i-ph-check-bold text-[var(--zg-accent)]'
-      : state === 'current'
-        ? 'i-ph-circle-fill text-[var(--zg-accent)]'
-        : 'i-ph-circle text-[var(--zg-text-subtle)]';
-  const text = state === 'current' ? 'text-[var(--zg-text)] font-medium' : 'text-[var(--zg-text-muted)]';
-  const content = (
-    <>
-      <span aria-hidden key={state} data-state={state} className={`${glyph} zg-stepper-glyph text-zg-meta shrink-0`} />
-      <span className="truncate">{label}</span>
-    </>
-  );
-  const row = `flex items-center gap-2 w-full h-7 px-2 rounded-zg-md text-zg-ui ${text}`;
-  if (!onBack) return <span className={row}>{content}</span>;
-  return (
-    <button
-      type="button"
-      onClick={onBack}
-      aria-label={goTo}
-      className={`${row} zg-press-subtle border-0 bg-transparent cursor-pointer text-left hover:before:bg-[var(--zg-row-hover)] zg-focus-ring`}
-    >
-      {content}
-    </button>
-  );
-}

package/src/components/Surface.tsx

@@ -1,191 +0,0 @@
-/**
- * Containers from the surface ladder. Use these instead of hand-built
- * `bg-[var(--zg-bg-elevated)] border` stacks:
- *   Tray      the bed: sections, wells for grouped rows, code, quiet cards
- *   Raised    a card or control lifted off its tray
- *   CodePanel monospace output / input, set into its surface
- *   EmptyState the one empty / placeholder block
- */
-import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-
-type Radius = 'sm' | 'md' | 'lg' | 'xl';
-const RADIUS: Record<Radius, string> = {
-  sm: 'rounded-zg-sm',
-  md: 'rounded-zg-md',
-  lg: 'rounded-zg-lg',
-  xl: 'rounded-zg-xl',
-};
-
-/** Props for {@link Tray}: a `radius` and the attributes of a `div`. */
-export interface TrayProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Corner radius: `sm`, `md`, `lg` or `xl`.
-   * @default 'lg'
-   */
-  radius?: Radius;
-}
-
-/**
- * Renders the bed of the surface ladder: sections, wells for grouped rows, code and quiet
- * cards. Accepts the attributes of a `div`.
- *
- * @param props - A `radius` and the attributes of a `div`.
- */
-export function Tray({ radius = 'lg', className = '', ...rest }: TrayProps) {
-  return <div className={`zg-tray ${RADIUS[radius]} ${className}`} {...rest} />;
-}
-
-/** Props for {@link Raised}: {@link TrayProps} plus `live`. */
-export interface RaisedProps extends TrayProps {
-  /** Lift the card one step with the live shadow, for something that is active right now. */
-  live?: boolean;
-}
-
-/**
- * Renders a card or control lifted off its tray, with a border and the raised shadow. Accepts
- * the attributes of a `div`.
- *
- * @param props - A `radius`, `live` and the attributes of a `div`.
- */
-export function Raised({ radius = 'lg', live = false, className = '', ...rest }: RaisedProps) {
-  return (
-    <div data-live={live ? '' : undefined} className={`zg-raised border ${RADIUS[radius]} ${className}`} {...rest} />
-  );
-}
-
-/** Props for {@link CodePanel}. */
-export interface CodePanelProps {
-  /** The text to show. */
-  children: ReactNode;
-  /** Extra classes on the `pre`. */
-  className?: string;
-  /**
-   * Wrap long lines. When off, the panel scrolls horizontally instead.
-   * @default true
-   */
-  wrap?: boolean;
-  /**
-   * Maximum height of the panel, as a CSS length or a number of pixels. The panel scrolls past it.
-   */
-  maxHeight?: number | string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders monospace output or input in a `pre`, set into its surface.
- *
- * @param props - Component props.
- */
-export function CodePanel({ children, className = '', wrap = true, maxHeight, style }: CodePanelProps) {
-  return (
-    <pre
-      className={`zg-code-panel m-0 px-3 py-2 font-mono text-zg-label leading-[1.55] overflow-auto ${
-        wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre'
-      } ${className}`}
-      style={maxHeight !== undefined ? { maxHeight, ...style } : style}
-    >
-      {children}
-    </pre>
-  );
-}
-
-/** Props for {@link EmptyState}. */
-export interface EmptyStateProps {
-  /** Icon class shown above the title. */
-  icon?: string;
-  /** Main message. */
-  title: ReactNode;
-  /** Secondary text under the title. */
-  hint?: ReactNode;
-  /** Control under the hint, such as a button. */
-  action?: ReactNode;
-  /** Set in a tray. Off inside a surface that is already tray-toned (the side panel): no tray on a tray. */
-  framed?: boolean;
-  /** Less vertical room, for a panel tab. */
-  compact?: boolean;
-  /** The title's element: a heading where the empty state is the page (a 404). */
-  titleAs?: 'div' | 'h1' | 'h2' | 'h3';
-  /** Extra classes on the wrapping element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the one empty or placeholder block: an optional icon, a title, a hint and an action,
- * centred, usually in a tray.
- *
- * @param props - Component props.
- */
-export function EmptyState({
-  icon,
-  title,
-  hint,
-  action,
-  framed = true,
-  compact = false,
-  titleAs: Title = 'div',
-  className = '',
-  style,
-}: EmptyStateProps) {
-  return (
-    <div
-      className={`${framed ? 'zg-tray rounded-zg-lg' : ''} flex flex-col items-center text-center gap-2 px-6 ${compact ? 'py-6' : 'py-8'} ${className}`}
-      style={style}
-    >
-      {icon && <span className={`${icon} text-xl text-[var(--zg-text-subtle)]`} aria-hidden />}
-      <Title className="m-0 text-zg-ui font-normal text-[var(--zg-text)]">{title}</Title>
-      {hint && <div className="text-zg-label text-[var(--zg-text-muted)] max-w-[28rem]">{hint}</div>}
-      {action && <div className="mt-1">{action}</div>}
-    </div>
-  );
-}
-
-/** Props for {@link SectionLabel}. */
-export interface SectionLabelProps {
-  /** The label text. */
-  children: ReactNode;
-  /** Extra classes on the label. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Uppercase label for a section of a panel, menu or form.
- *
- * @param props - Component props.
- */
-export function SectionLabel({ children, className = '', style }: SectionLabelProps) {
-  return (
-    <div className={`zg-section-label ${className}`} style={style}>
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link Meta}. */
-export interface MetaProps {
-  /** The value to show. */
-  children: ReactNode;
-  /** Extra classes on the text. */
-  className?: string;
-  /** Native tooltip. */
-  title?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The technical voice: mono, tabular, small, muted.
- *
- * @param props - Component props.
- */
-export function Meta({ children, className = '', title, style }: MetaProps) {
-  return (
-    <span className={`zg-meta ${className}`} style={style} title={title}>
-      {children}
-    </span>
-  );
-}

package/src/components/SwatchPicker.tsx

@@ -1,147 +0,0 @@
-/**
- * A pick among small swatches: colors as a row of dots, or images (app
- * icons) as a grid of tiles. A line under them names the swatch under the
- * pointer or the keyboard, else the pick, so a swatch needs no text of its
- * own. Radio semantics (APG radio group): one tab stop on the picked swatch,
- * and the arrows, Home and End move the pick.
- */
-import { useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react';
-
-/** One swatch of a {@link SwatchPicker}. */
-export interface Swatch<T extends string> {
-  /** The value reported to `onChange` when the swatch is picked. Unique among the swatches. */
-  value: T;
-  /** Name of the swatch: the caption and the accessible name. */
-  label: string;
-  /** What the swatch shows: a color that fills the dot, or an image for a tile. */
-  swatch: ReactNode;
-}
-
-const COLUMNS = { 4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6' } as const;
-
-const DOT =
-  'zg-press-subtle relative grid place-items-center w-7 h-7 shrink-0 p-0 rounded-full border-0 bg-transparent overflow-hidden cursor-pointer outline-offset-2 zg-focus-ring';
-const TILE =
-  'zg-press-subtle relative grid place-items-center aspect-square min-w-0 rounded-zg-md cursor-pointer transition-[background-color,box-shadow] zg-focus-ring';
-
-/** Props for {@link SwatchPicker}. */
-export interface SwatchPickerProps<T extends string> {
-  /** The value of the picked swatch. `undefined`: none is picked. */
-  value: T | undefined;
-  /** Called with the value of the swatch picked by click or keyboard. */
-  onChange: (value: T) => void;
-  /** The swatches, in order. */
-  options: readonly Swatch<T>[];
-  /** Accessible name of the radio group. */
-  ariaLabel: string;
-  /**
-   * `dot`: 28px circles in a row, for colors. `tile`: square tiles in a grid, for images.
-   * @default 'dot'
-   */
-  shape?: 'dot' | 'tile';
-  /**
-   * Tiles per row, for `tile`.
-   * @default 5
-   */
-  columns?: keyof typeof COLUMNS;
-  /** Formats the caption of a swatch. Defaults to its label. */
-  caption?: (option: Swatch<T>) => ReactNode;
-  /** A muted line under the caption, such as where the pick shows. */
-  note?: ReactNode;
-  /** Extra classes on the picker. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders swatches as a radio group, with a caption that names the swatch in view.
- *
- * @param props - Component props.
- */
-export function SwatchPicker<T extends string>({
-  value,
-  onChange,
-  options,
-  ariaLabel,
-  shape = 'dot',
-  columns = 5,
-  caption,
-  note,
-  className = '',
-  style,
-}: SwatchPickerProps<T>) {
-  const items = useRef<(HTMLButtonElement | null)[]>([]);
-  const [pointed, setPointed] = useState<T | null>(null);
-  const checked = options.findIndex((o) => o.value === value);
-  const stop = checked >= 0 ? checked : 0;
-  const named = options.find((o) => o.value === (pointed ?? value));
-
-  const pick = (index: number) => {
-    const option = options[index];
-    if (!option) return;
-    items.current[index]?.focus();
-    if (option.value !== value) onChange(option.value);
-  };
-
-  const onKeyDown = (e: KeyboardEvent, from: number) => {
-    let next: number | undefined;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (from + 1) % options.length;
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (from - 1 + options.length) % options.length;
-    else if (e.key === 'Home') next = 0;
-    else if (e.key === 'End') next = options.length - 1;
-    if (next === undefined) return;
-    e.preventDefault();
-    pick(next);
-  };
-
-  return (
-    <div className={`flex flex-col gap-2 min-w-0 ${className}`} style={style}>
-      <div
-        role="radiogroup"
-        aria-label={ariaLabel}
-        className={shape === 'tile' ? `grid gap-1.5 ${COLUMNS[columns]}` : 'flex flex-wrap items-center gap-2.5 p-1'}
-      >
-        {options.map((o, i) => {
-          const on = i === checked;
-          const look =
-            shape === 'tile'
-              ? `${TILE} ${
-                  on
-                    ? 'zg-raised border ring-1 ring-[color-mix(in_srgb,var(--zg-accent)_55%,transparent)]'
-                    : 'border border-transparent bg-transparent hover:before:bg-[var(--zg-row-hover)]'
-                }`
-              : `${DOT} ${on ? 'outline outline-2 outline-[var(--zg-text-muted)]' : ''}`;
-          return (
-            <button
-              key={o.value}
-              ref={(el) => {
-                items.current[i] = el;
-              }}
-              type="button"
-              role="radio"
-              aria-checked={on}
-              aria-label={o.label}
-              tabIndex={i === stop ? 0 : -1}
-              onClick={() => pick(i)}
-              onKeyDown={(e) => onKeyDown(e, i)}
-              onMouseEnter={() => setPointed(o.value)}
-              onMouseLeave={() => setPointed(null)}
-              onFocus={() => setPointed(o.value)}
-              onBlur={() => setPointed(null)}
-              className={look}
-            >
-              {o.swatch}
-            </button>
-          );
-        })}
-      </div>
-      {named && (
-        <p aria-live="polite" className="m-0 px-1 text-zg-label text-[var(--zg-text)]">
-          {caption ? caption(named) : named.label}
-        </p>
-      )}
-      {note && <p className="m-0 -mt-1.5 px-1 text-zg-label text-[var(--zg-text-muted)] text-pretty">{note}</p>}
-    </div>
-  );
-}