@yarcl/react 0.1.0 → 0.2.0

package/src/components/Modal.tsx

@@ -1,164 +0,0 @@
-import {
-  cloneElement,
-  useEffect,
-  useId,
-  useRef,
-  type MouseEvent,
-  type ReactElement,
-  type ReactNode,
-  type SyntheticEvent,
-} from 'react';
-import { cx, radiusClass, typeClass } from '../classes';
-import { useControllable } from '../hooks';
-import type { ModalSize, Radius } from '../types';
-import { useConfig } from '../runtime';
-
-/** Props shared by {@link Dialog} and {@link Drawer}. */
-export interface ModalProps {
-  /** Heading of the dialog. Also its accessible name. */
-  title: ReactNode;
-  /** Supporting text below the title. Also its accessible description. */
-  description?: ReactNode;
-  /** Body content. Scrolls when it doesn't fit. */
-  children?: ReactNode;
-  /** Actions shown at the bottom, e.g. Cancel and Confirm buttons. */
-  footer?: ReactNode;
-  /** An element that opens the dialog when clicked, e.g. a {@link Button}. Optional when controlled. */
-  trigger?: ReactElement<{ onClick?: (event: MouseEvent) => void }>;
-  /** Controlled open state. */
-  open?: boolean;
-  /**
-   * Initial open state when uncontrolled.
-   * @default false
-   */
-  defaultOpen?: boolean;
-  /** Called when the dialog opens or closes, including by Esc, the close button or a backdrop click. */
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * Closes when the backdrop is clicked.
-   * @default true
-   */
-  closeOnBackdrop?: boolean;
-  /**
-   * Width, from the `modalSizes` config. Height follows the content, up to the viewport.
-   * @default config.defaults.modalSize (Drawer: its component default, `sm` in the library defaults)
-   */
-  size?: ModalSize;
-}
-
-const openModals: HTMLDialogElement[] = [];
-
-function syncBackdrops() {
-  openModals.forEach((dialog, i) => dialog.toggleAttribute('data-yarcl-covered', i < openModals.length - 1));
-}
-
-function removeOpenModal(dialog: HTMLDialogElement) {
-  const index = openModals.indexOf(dialog);
-  if (index === -1) return;
-  openModals.splice(index, 1);
-  dialog.removeAttribute('data-yarcl-covered');
-  syncBackdrops();
-}
-
-function CloseIcon() {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-      <path d="M6 6l12 12M18 6 6 18" />
-    </svg>
-  );
-}
-
-export function useModalDialog(open: boolean, setOpen: (open: boolean) => void, closeOnBackdrop = true) {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = ref.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-      openModals.push(dialog);
-      syncBackdrops();
-    } else if (!open) {
-      if (dialog.open) dialog.close();
-      removeOpenModal(dialog);
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const dialog = ref.current;
-    return () => {
-      if (dialog) removeOpenModal(dialog);
-    };
-  }, []);
-
-  return {
-    ref,
-    onClose(event: SyntheticEvent<HTMLDialogElement>) {
-      if (event.target === event.currentTarget && open) setOpen(false);
-    },
-    onClick(event: MouseEvent<HTMLDialogElement>) {
-      if (closeOnBackdrop && event.target === event.currentTarget) setOpen(false);
-    },
-  };
-}
-
-export function Modal({
-  title,
-  description,
-  children,
-  footer,
-  trigger,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  closeOnBackdrop = true,
-  size,
-  className,
-  radius,
-}: ModalProps & { className: string; radius?: Radius }) {
-  const config = useConfig();
-  const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
-  const dialogProps = useModalDialog(open, setOpen, closeOnBackdrop);
-  const titleId = useId();
-  const descriptionId = useId();
-
-  return (
-    <>
-      {trigger &&
-        cloneElement(trigger, {
-          onClick(event: MouseEvent) {
-            trigger.props.onClick?.(event);
-            setOpen(true);
-          },
-        })}
-      <dialog
-        {...dialogProps}
-        className={cx('yarcl-modal', `yarcl-modal-size-${size ?? config.defaults.modalSize}`, radiusClass(radius), className)}
-        aria-labelledby={titleId}
-        aria-describedby={description != null ? descriptionId : undefined}
-      >
-        {open && (
-          <div className="yarcl-modal-content">
-            <div className="yarcl-modal-header">
-              <div className="yarcl-modal-heading">
-                <h2 id={titleId} className={cx('yarcl-modal-title', typeClass(config.typography.headings.h2))}>
-                  {title}
-                </h2>
-                {description != null && (
-                  <p id={descriptionId} className="yarcl-modal-description">
-                    {description}
-                  </p>
-                )}
-              </div>
-              <button type="button" className="yarcl-modal-close" aria-label="Close" onClick={() => setOpen(false)}>
-                <CloseIcon />
-              </button>
-            </div>
-            {children != null && <div className="yarcl-modal-body">{children}</div>}
-            {footer != null && <div className="yarcl-modal-footer">{footer}</div>}
-          </div>
-        )}
-      </dialog>
-    </>
-  );
-}

package/src/components/NumberInput.tsx

@@ -1,208 +0,0 @@
-import { useId, useState, type ComponentProps, type KeyboardEvent, type FocusEvent } from 'react';
-import { colorClass, cx, radiusClass, sizeClass } from '../classes';
-import { useFieldProps } from '../field-context';
-import { ChevronIcon } from '../floating';
-import { useControllable } from '../hooks';
-import type { TokenProps } from '../types';
-import { useDefaults } from '../runtime';
-
-/**
- * Props for {@link NumberInput}. Native `<input>` attributes go to the inner input;
- * `className` and `style` go to the outer box.
- */
-export interface NumberInputProps
-  extends TokenProps,
-    Omit<ComponentProps<'input'>, 'color' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
-  /** Controlled value. `null` means the input is empty. */
-  value?: number | null;
-  /**
-   * Initial value when uncontrolled.
-   * @default null
-   */
-  defaultValue?: number | null;
-  /** Called with the new value after a step, or when typed text is committed on blur or Enter. */
-  onValueChange?: (value: number | null) => void;
-  /** Lowest allowed value. Typed values are clamped to it, and `Home` jumps to it. */
-  min?: number;
-  /** Highest allowed value. Typed values are clamped to it, and `End` jumps to it. */
-  max?: number;
-  /**
-   * Amount added or removed by the stepper buttons and the arrow keys. `PageUp` and `PageDown` step ten times as far.
-   * @default 1
-   */
-  step?: number;
-  /**
-   * Accessible label of the increment button.
-   * @default 'Increase'
-   */
-  incrementLabel?: string;
-  /**
-   * Accessible label of the decrement button.
-   * @default 'Decrease'
-   */
-  decrementLabel?: string;
-}
-
-function decimals(n: number): number {
-  const text = String(n);
-  const exp = text.match(/e-(\d+)$/);
-  if (exp) return Number(exp[1]);
-  return text.split('.')[1]?.length ?? 0;
-}
-
-function parse(text: string): number | null | undefined {
-  const trimmed = text.trim();
-  if (trimmed === '') return null;
-  const n = Number(trimmed);
-  return Number.isFinite(n) ? n : undefined;
-}
-
-/**
- * A numeric input with increment and decrement buttons, exposed as a `spinbutton`.
- * Arrow keys step by `step`, `PageUp` and `PageDown` by ten steps, `Home` and `End` jump to `min` and `max`.
- * Shares the size scale with {@link Input}, so both have the same height at the same size. Works inside a {@link Field}.
- *
- * @example
- * ```tsx
- * <Field label="Guests">
- *   <NumberInput min={1} max={10} defaultValue={2} onValueChange={setGuests} />
- * </Field>
- * ```
- */
-export function NumberInput(props: NumberInputProps) {
-  const own = useDefaults('NumberInput');
-  const fallbackId = useId();
-  const {
-    value: valueProp,
-    defaultValue = null,
-    onValueChange,
-    min,
-    max,
-    step = 1,
-    incrementLabel = 'Increase',
-    decrementLabel = 'Decrease',
-    size,
-    radius,
-    color,
-    className,
-    style,
-    id = fallbackId,
-    disabled,
-    readOnly,
-    onBlur,
-    onKeyDown,
-    ...rest
-  } = useFieldProps(props);
-  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
-  const [draft, setDraft] = useState<string | null>(null);
-
-  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
-  const locked = disabled || readOnly;
-
-  function update(next: number | null) {
-    setDraft(null);
-    if (next !== value) setValue(next);
-  }
-
-  function current(): number | null {
-    if (draft === null) return value;
-    const parsed = parse(draft);
-    return parsed === undefined ? value : parsed === null ? null : clamp(parsed);
-  }
-
-  function stepBy(amount: number) {
-    if (locked) return;
-    const base = current();
-    if (base === null) {
-      update(clamp(amount > 0 ? (min ?? 0) : (max ?? 0)));
-      return;
-    }
-    const precision = Math.max(decimals(base), decimals(step));
-    update(clamp(Number((base + amount).toFixed(precision))));
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    onKeyDown?.(event);
-    if (event.defaultPrevented) return;
-    const actions: Record<string, (() => void) | undefined> = {
-      ArrowUp: () => stepBy(step),
-      ArrowDown: () => stepBy(-step),
-      PageUp: () => stepBy(step * 10),
-      PageDown: () => stepBy(-step * 10),
-      Home: min === undefined || locked ? undefined : () => update(min),
-      End: max === undefined || locked ? undefined : () => update(max),
-      Enter: draft === null ? undefined : () => update(current()),
-    };
-    const action = actions[event.key];
-    if (!action) return;
-    if (event.key !== 'Enter') event.preventDefault();
-    action();
-  }
-
-  function handleBlur(event: FocusEvent<HTMLInputElement>) {
-    onBlur?.(event);
-    if (draft !== null) update(current());
-  }
-
-  const shown = current();
-  const canIncrement = !locked && (shown === null || max === undefined || shown < max);
-  const canDecrement = !locked && (shown === null || min === undefined || shown > min);
-
-  return (
-    <div
-      className={cx(
-        'yarcl-number-input',
-        sizeClass(size ?? own.size),
-        radiusClass(radius ?? own.radius, size ?? own.size),
-        colorClass(color ?? own.color),
-        className,
-      )}
-      style={style}
-    >
-      <input
-        {...rest}
-        id={id}
-        type="text"
-        inputMode="decimal"
-        autoComplete="off"
-        role="spinbutton"
-        aria-valuenow={value ?? undefined}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        className="yarcl-input yarcl-number-input-field"
-        value={draft ?? (value === null ? '' : String(value))}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={(event) => setDraft(event.target.value)}
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-      />
-      <div className="yarcl-number-input-steppers">
-        <button
-          type="button"
-          tabIndex={-1}
-          className="yarcl-number-input-stepper yarcl-number-input-increment"
-          aria-label={incrementLabel}
-          aria-controls={id}
-          disabled={!canIncrement}
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={() => stepBy(step)}
-        >
-          <ChevronIcon />
-        </button>
-        <button
-          type="button"
-          tabIndex={-1}
-          className="yarcl-number-input-stepper yarcl-number-input-decrement"
-          aria-label={decrementLabel}
-          aria-controls={id}
-          disabled={!canDecrement}
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={() => stepBy(-step)}
-        >
-          <ChevronIcon />
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/Pagination.tsx

@@ -1,227 +0,0 @@
-import type { ComponentProps, KeyboardEvent } from 'react';
-import { colorClass, cx, radiusClass, sizeClass, variantClass } from '../classes';
-import { useControllable } from '../hooks';
-import type { Color, Radius, Size, Variant } from '../types';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
-import { useConfig, useDefaults } from '../runtime';
-
-/** Props for {@link Pagination}. */
-export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'color' | 'onChange'> {
-  /**
-   * Total number of pages.
-   * @example
-   * ```tsx
-   * <Pagination count={Math.ceil(total / perPage)} />
-   * ```
-   */
-  count: number;
-  /** Controlled current page, starting at 1. */
-  page?: number;
-  /**
-   * Initial page when uncontrolled.
-   * @default 1
-   */
-  defaultPage?: number;
-  /** Called with the new page when the user picks one. */
-  onPageChange?: (page: number) => void;
-  /**
-   * Pages shown on each side of the current page.
-   * @default 1
-   */
-  siblings?: number;
-  /**
-   * Pages always shown at the start and end.
-   * @default 1
-   */
-  boundaries?: number;
-  /** Size of every button, from the `sizes` config. */
-  size?: Size;
-  /** Color of every button, from the `colors` config. */
-  color?: Color;
-  /** Radius of every button, from the `radii` config, or `'size'` to match the button size. */
-  radius?: Radius | 'size';
-  /**
-   * Variant of the other pages and the previous and next buttons, from the `variants` config.
-   * @default config.defaults.softVariant
-   */
-  variant?: Variant;
-  /**
-   * Variant of the current page, from the `variants` config.
-   * @default config.defaults.variant
-   */
-  selectedVariant?: Variant;
-  /**
-   * Joins the buttons into one control with shared borders.
-   * @default false
-   */
-  attached?: boolean;
-  /** Disables every button. */
-  disabled?: boolean;
-  /**
-   * Accessible name of the navigation landmark.
-   * @default 'Pagination'
-   */
-  'aria-label'?: string;
-  /**
-   * Accessible name of the previous button.
-   * @default 'Previous page'
-   */
-  previousLabel?: string;
-  /**
-   * Accessible name of the next button.
-   * @default 'Next page'
-   */
-  nextLabel?: string;
-  /**
-   * Accessible name of each page button.
-   * @default (page) => `Page ${page}`
-   */
-  pageLabel?: (page: number) => string;
-}
-
-type Item = number | 'start-ellipsis' | 'end-ellipsis';
-
-const range = (start: number, end: number) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
-
-function pageItems(page: number, count: number, siblings: number, boundaries: number): Item[] {
-  const startPages = range(1, Math.min(boundaries, count));
-  const endPages = range(Math.max(count - boundaries + 1, boundaries + 1), count);
-  const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
-  const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
-  const items: Item[] = [...startPages];
-  if (siblingsStart > boundaries + 2) items.push('start-ellipsis');
-  else if (boundaries + 1 < count - boundaries) items.push(boundaries + 1);
-  items.push(...range(siblingsStart, siblingsEnd));
-  if (siblingsEnd < count - boundaries - 1) items.push('end-ellipsis');
-  else if (count - boundaries > boundaries) items.push(count - boundaries);
-  items.push(...endPages);
-  return items.filter((item, i) => typeof item !== 'number' || (item >= 1 && item <= count && items.indexOf(item) === i));
-}
-
-const Chevron = ({ d }: { d: string }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-    <path d={d} />
-  </svg>
-);
-
-/**
- * Navigation between pages of results: previous and next buttons, the pages around the current one,
- * and the first and last pages with an ellipsis for the gaps. Renders a `<nav>` landmark; the current
- * page has `aria-current="page"`. Arrow keys, <kbd>Home</kbd> and <kbd>End</kbd> move focus between buttons.
- *
- * @example
- * ```tsx
- * <Pagination count={20} page={page} onPageChange={setPage} aria-label="Search results" />
- * ```
- */
-export function Pagination({
-  count,
-  page,
-  defaultPage = 1,
-  onPageChange,
-  siblings = 1,
-  boundaries = 1,
-  size,
-  color,
-  radius,
-  variant,
-  selectedVariant,
-  attached = false,
-  disabled,
-  previousLabel = 'Previous page',
-  nextLabel = 'Next page',
-  pageLabel = (n) => `Page ${n}`,
-  'aria-label': ariaLabel = 'Pagination',
-  className,
-  onKeyDown,
-  ...props
-}: PaginationProps) {
-  const config = useConfig();
-  const own = useDefaults('Pagination');
-  const resolvedSize = size ?? own.size ?? config.defaults.size;
-  const resolvedRadius = radius ?? own.radius ?? config.defaults.radius;
-  const resolvedColor = color ?? own.color ?? config.defaults.color;
-  const resolvedVariant = variant ?? own.variant ?? config.defaults.softVariant;
-  const resolvedSelected = selectedVariant ?? own.selectedVariant ?? config.defaults.variant;
-
-  const total = Math.max(0, Math.floor(count));
-  const [current, setCurrent] = useControllable(page, defaultPage, onPageChange);
-  const active = Math.min(Math.max(1, current), Math.max(1, total));
-  const items = pageItems(active, total, Math.max(0, siblings), Math.max(0, boundaries));
-
-  const go = (next: number) => {
-    if (disabled || next === active || next < 1 || next > total) return;
-    setCurrent(next);
-  };
-
-  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {
-    onKeyDown?.(event);
-    const buttons = [...event.currentTarget.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')];
-    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);
-    if (index === -1) return;
-    const next = {
-      ArrowRight: Math.min(index + 1, buttons.length - 1),
-      ArrowLeft: Math.max(index - 1, 0),
-      Home: 0,
-      End: buttons.length - 1,
-    }[event.key];
-    if (next === undefined) return;
-    event.preventDefault();
-    buttons[next].focus();
-  }
-
-  const shared = { size: resolvedSize, radius: resolvedRadius, color: resolvedColor, disabled };
-  const edge = (label: string, target: number, d: string) => {
-    const unavailable = target < 1 || target > total;
-    return (
-      <IconButton
-        {...shared}
-        variant={resolvedVariant}
-        aria-label={label}
-        aria-disabled={unavailable || undefined}
-        onClick={() => go(target)}
-      >
-        <Chevron d={d} />
-      </IconButton>
-    );
-  };
-
-  return (
-    <nav aria-label={ariaLabel} className={cx('yarcl-pagination', className)} onKeyDown={handleKeyDown} {...props}>
-      <div className={cx('yarcl-button-group yarcl-button-group-horizontal', attached && 'yarcl-button-group-attached')}>
-        {edge(previousLabel, active - 1, 'm15 18-6-6 6-6')}
-        {items.map((item) =>
-          typeof item === 'number' ? (
-            <Button
-              key={item}
-              {...shared}
-              variant={item === active ? resolvedSelected : resolvedVariant}
-              className="yarcl-pagination-page"
-              aria-label={pageLabel(item)}
-              aria-current={item === active ? 'page' : undefined}
-              onClick={() => go(item)}
-            >
-              {item}
-            </Button>
-          ) : (
-            <span
-              key={item}
-              aria-hidden="true"
-              className={cx(
-                'yarcl-button yarcl-pagination-ellipsis',
-                sizeClass(resolvedSize),
-                radiusClass(resolvedRadius, resolvedSize),
-                colorClass(resolvedColor),
-                variantClass(resolvedVariant),
-              )}
-            >
-              …
-            </span>
-          ),
-        )}
-        {edge(nextLabel, active + 1, 'm9 18 6-6-6-6')}
-      </div>
-    </nav>
-  );
-}