gbs-add-block 1.2.13 → 1.2.15

package/source/beta-components/checkbox/react/Checkbox.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  use,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+import type { CheckboxSize, CheckedState } from "../core/types";
+import { CheckboxGroupContext } from "./context";
+import { cx, type CheckboxSlot } from "./props";
+
+export interface CheckboxProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "type" | "size" | "checked" | "defaultChecked" | "onChange" | "value"
+  > {
+  /** `true`, `false` or `"indeterminate"` (controlled). */
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+  onCheckedChange?(checked: boolean): void;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Posted with the form when checked. Inside a CheckboxGroup, the value this box adds. */
+  value?: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  size?: CheckboxSize;
+  classNames?: Partial<Record<CheckboxSlot, string>>;
+  /** The `<input>` element. */
+  ref?: Ref<HTMLInputElement>;
+}
+
+/**
+ * A native checkbox, styled. It posts with forms, works with form libraries and
+ * reads as a checkbox to every assistive technology, including the mixed state.
+ */
+export function Checkbox(props: CheckboxProps) {
+  const {
+    ref,
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    onChange,
+    value,
+    label,
+    description,
+    error,
+    size,
+    className,
+    classNames,
+    style,
+    id: idProp,
+    disabled,
+    required,
+    name,
+    "aria-describedby": describedByProp,
+    ...inputProps
+  } = props;
+
+  const group = use(CheckboxGroupContext);
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
+  const [internal, setInternal] = useState<CheckedState>(defaultChecked);
+  const inGroup = group !== null && value !== undefined;
+  const state: CheckedState = inGroup ? group.values.includes(value) : (checkedProp ?? internal);
+
+  // "Indeterminate" exists only as a DOM property, not an attribute.
+  useLayoutEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = state === "indeterminate";
+  }, [state]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.checked;
+    if (inGroup) group.toggle(value, next);
+    else if (checkedProp === undefined) setInternal(next);
+    onChange?.(event);
+    onCheckedChange?.(next);
+  };
+
+  const invalid = Boolean(error) || (group?.invalid ?? false);
+  const describedBy =
+    cx(describedByProp, description ? `${id}-description` : "", error ? `${id}-error` : "") || undefined;
+
+  return (
+    <div
+      className={cx("ck-root", classNames?.root, className)}
+      style={style}
+      data-size={size ?? group?.size ?? "md"}
+      data-disabled={disabled || group?.disabled || undefined}
+      data-invalid={invalid ? "" : undefined}
+    >
+      <span className={cx("ck-control", classNames?.control)}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          id={id}
+          type="checkbox"
+          className={cx("ck-input", classNames?.input)}
+          checked={state === true}
+          value={value}
+          name={name ?? group?.name}
+          disabled={disabled}
+          required={required}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          onChange={handleChange}
+        />
+        <svg className="ck-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+          <path className="ck-check" d="M3.5 8.5 6.5 11.5 12.5 4.5" pathLength={1} />
+          <path className="ck-dash" d="M4 8h8" />
+        </svg>
+      </span>
+
+      {(label || description || error) && (
+        <span className="ck-text">
+          {label && (
+            <label htmlFor={id} className={cx("ck-label", classNames?.label)} data-required={required || undefined}>
+              {label}
+            </label>
+          )}
+          {description && (
+            <span id={`${id}-description`} className={cx("ck-description", classNames?.description)}>
+              {description}
+            </span>
+          )}
+          {error && (
+            <span id={`${id}-error`} className={cx("ck-error", classNames?.error)} role="alert">
+              {error}
+            </span>
+          )}
+        </span>
+      )}
+    </div>
+  );
+}

package/source/beta-components/checkbox/react/CheckboxGroup.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useId, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { groupState, toggleAll, toggleValue } from "../core/group";
+import type { CheckboxLocaleText, CheckboxOption, CheckboxSize } from "../core/types";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroupContext, type CheckboxGroupContextValue } from "./context";
+import { defaultCheckboxText } from "./locale";
+import { cx, type CheckboxGroupSlot } from "./props";
+
+export interface CheckboxGroupProps {
+  /** Checked values (controlled). */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?(values: string[]): void;
+  /** Render these options, or pass `<Checkbox value="…">` children. */
+  options?: readonly CheckboxOption[];
+  children?: ReactNode;
+  /** The group's name, shown as its legend. */
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  /** Form field name for every checkbox in the group. */
+  name?: string;
+  size?: CheckboxSize;
+  /** Default `vertical`. */
+  orientation?: "vertical" | "horizontal";
+  /** With `options`, a parent box that checks or clears them all. `true` uses the default label. */
+  selectAll?: boolean | ReactNode;
+  id?: string;
+  className?: string;
+  classNames?: Partial<Record<CheckboxGroupSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<CheckboxLocaleText>;
+}
+
+/** A labelled set of checkboxes sharing one array of values. */
+export function CheckboxGroup(props: CheckboxGroupProps) {
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    options,
+    children,
+    label,
+    description,
+    error,
+    required = false,
+    disabled = false,
+    name,
+    size,
+    orientation = "vertical",
+    selectAll,
+    id: idProp,
+    className,
+    classNames,
+    style,
+    localeText,
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const text = useMemo(() => ({ ...defaultCheckboxText, ...localeText }), [localeText]);
+  const [internal, setInternal] = useState<string[]>(defaultValue ?? []);
+  const values = value ?? internal;
+
+  const context = useMemo<CheckboxGroupContextValue>(() => {
+    const commit = (next: string[]) => {
+      if (value === undefined) setInternal(next);
+      onValueChange?.(next);
+    };
+    return {
+      values,
+      toggle: (item, checked) => commit(toggleValue(values, item, checked)),
+      name,
+      disabled,
+      invalid: Boolean(error),
+      size,
+    };
+  }, [values, value, onValueChange, name, disabled, error, size]);
+
+  const showSelectAll = Boolean(selectAll) && options !== undefined && options.length > 0;
+  const describedBy =
+    cx(description ? `${id}-description` : "", error ? `${id}-error` : "") || undefined;
+
+  return (
+    <fieldset
+      id={id}
+      className={cx("ck-group", classNames?.root, className)}
+      style={style}
+      // A disabled fieldset disables every control inside it natively.
+      disabled={disabled}
+      aria-describedby={describedBy}
+      data-orientation={orientation}
+      data-select-all={showSelectAll || undefined}
+      data-invalid={error ? "" : undefined}
+    >
+      {label && (
+        <legend className={cx("ck-legend", classNames?.legend)} data-required={required || undefined}>
+          {label}
+        </legend>
+      )}
+      {description && (
+        <span id={`${id}-description`} className={cx("ck-description", classNames?.description)}>
+          {description}
+        </span>
+      )}
+
+      {showSelectAll && (
+        <Checkbox
+          className="ck-select-all"
+          label={selectAll === true ? text.selectAll : selectAll}
+          size={size}
+          disabled={disabled}
+          checked={groupState(values, options)}
+          onCheckedChange={() => {
+            const next = toggleAll(values, options);
+            if (value === undefined) setInternal(next);
+            onValueChange?.(next);
+          }}
+        />
+      )}
+
+      <CheckboxGroupContext value={context}>
+        <div className={cx("ck-items", classNames?.items)}>
+          {options
+            ? options.map((option) => (
+                <Checkbox
+                  key={option.value}
+                  value={option.value}
+                  label={option.label}
+                  description={option.description}
+                  disabled={option.disabled}
+                />
+              ))
+            : children}
+        </div>
+      </CheckboxGroupContext>
+
+      {error && (
+        <span id={`${id}-error`} className={cx("ck-error", classNames?.error)} role="alert">
+          {error}
+        </span>
+      )}
+    </fieldset>
+  );
+}

package/source/beta-components/checkbox/react/context.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { createContext } from "react";
+import type { CheckboxSize } from "../core/types";
+
+export interface CheckboxGroupContextValue {
+  values: readonly string[];
+  toggle(value: string, checked: boolean): void;
+  name?: string;
+  disabled: boolean;
+  invalid: boolean;
+  size?: CheckboxSize;
+}
+
+/** Lets each Checkbox inside a CheckboxGroup read and change the group's values. */
+export const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);

package/source/beta-components/checkbox/react/locale.ts

@@ -0,0 +1,5 @@
+import type { CheckboxLocaleText } from "../core/types";
+
+export const defaultCheckboxText: CheckboxLocaleText = {
+  selectAll: "Select all",
+};

package/source/beta-components/checkbox/react/props.ts

@@ -0,0 +1,6 @@
+export type CheckboxSlot = "root" | "control" | "input" | "label" | "description" | "error";
+
+export type CheckboxGroupSlot = "root" | "legend" | "description" | "items" | "error";
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");

package/source/beta-components/checkbox/styles.css

@@ -0,0 +1,212 @@
+/*
+ * Checkbox and CheckboxGroup styles.
+ *
+ * The box is the native <input> with `appearance: none`, so it keeps native
+ * behavior. Tokens read the DataGrid's --dg-* variables when they are set on an
+ * ancestor. Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .ck-root,
+  .ck-group {
+    --ck-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --ck-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --ck-border: light-dark(#a1a1aa, #52525b);
+    --ck-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
+    --ck-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --ck-accent-fg: var(--dg-accent-fg, light-dark(#ffffff, #0b1220));
+    --ck-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --ck-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --ck-font-size: var(--dg-font-size, 13px);
+    --ck-size: 16px;
+    --ck-radius: 4px;
+
+    color-scheme: inherit;
+    font-size: var(--ck-font-size);
+    line-height: 1.4;
+    color: var(--ck-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) :is(.ck-root, .ck-group) {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) :is(.ck-root, .ck-group) {
+    color-scheme: light;
+  }
+
+  :where(.ck-root, .ck-group) *,
+  :where(.ck-root, .ck-group) *::before,
+  :where(.ck-root, .ck-group) *::after {
+    box-sizing: border-box;
+  }
+
+  .ck-root {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+  }
+  .ck-root[data-size="sm"] {
+    --ck-size: 14px;
+    --ck-font-size: 12px;
+  }
+  .ck-root[data-size="lg"] {
+    --ck-size: 20px;
+    --ck-font-size: 14px;
+    --ck-radius: 5px;
+  }
+
+  /* ---------------------------------------------------------------- box */
+
+  .ck-control {
+    position: relative;
+    display: grid;
+    flex: none;
+    width: var(--ck-size);
+    height: var(--ck-size);
+    /* Center the box on the first line of the label. */
+    margin-top: calc((1.4em - var(--ck-size)) / 2);
+  }
+
+  .ck-input {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    border: 1.5px solid var(--ck-border);
+    border-radius: var(--ck-radius);
+    background: var(--ck-input-bg);
+    cursor: pointer;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+  .ck-input:hover:not(:disabled) {
+    border-color: color-mix(in oklab, var(--ck-border), var(--ck-fg) 35%);
+  }
+  .ck-input:focus-visible {
+    outline: 2px solid var(--ck-focus);
+    outline-offset: 2px;
+  }
+  .ck-input:is(:checked, :indeterminate) {
+    border-color: var(--ck-accent);
+    background: var(--ck-accent);
+  }
+  .ck-root[data-invalid] .ck-input:not(:checked, :indeterminate) {
+    border-color: var(--ck-danger);
+  }
+  .ck-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ck-icon {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: var(--ck-accent-fg);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: none;
+  }
+  .ck-check {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    transition: stroke-dashoffset 160ms ease;
+  }
+  .ck-dash {
+    opacity: 0;
+  }
+  .ck-input:checked:not(:indeterminate) + .ck-icon .ck-check {
+    stroke-dashoffset: 0;
+  }
+  .ck-input:indeterminate + .ck-icon .ck-dash {
+    opacity: 1;
+  }
+
+  /* --------------------------------------------------------------- text */
+
+  .ck-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+  .ck-label {
+    cursor: pointer;
+  }
+  .ck-root[data-disabled] .ck-label {
+    color: var(--ck-muted);
+    cursor: not-allowed;
+  }
+  .ck-label[data-required]::after,
+  .ck-legend[data-required]::after {
+    content: " *";
+    color: var(--ck-danger);
+  }
+  .ck-description {
+    color: var(--ck-muted);
+    font-size: 0.92em;
+  }
+  .ck-error {
+    color: var(--ck-danger);
+    font-size: 0.92em;
+  }
+
+  /* -------------------------------------------------------------- group */
+
+  .ck-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .ck-legend {
+    /* A floated legend joins the flex gap like any other child. */
+    float: left;
+    width: 100%;
+    margin-bottom: 2px;
+    padding: 0;
+    font-weight: 500;
+  }
+  .ck-legend + * {
+    clear: both;
+  }
+  .ck-items {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .ck-group[data-orientation="horizontal"] .ck-items {
+    flex-flow: row wrap;
+    gap: 8px 20px;
+  }
+  .ck-group[data-select-all] .ck-items {
+    padding-inline-start: calc(var(--ck-size) + 8px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ck-input,
+    .ck-check {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ck-input:is(:checked, :indeterminate) {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    .ck-icon {
+      stroke: HighlightText;
+    }
+  }
+}

package/source/beta-components/dialog/README.md

@@ -0,0 +1,39 @@
+# Dialog
+
+Alert, confirm and prompt dialogs for React 19 that you can `await`, styled to
+match the rest of the library. No runtime dependencies besides React.
+
+## Setup
+
+```ts
+import { dialog, DialogHost } from "@/components/dialog";
+import "@/components/dialog/styles.css";
+```
+
+Mount `<DialogHost />` once near the root, then:
+
+```tsx
+if (await dialog.confirm({ title: "Delete 3 invoices?", intent: "danger", confirmLabel: "Delete" })) {
+  await deleteInvoices();
+}
+
+const name = await dialog.prompt({ title: "Rename", defaultValue: "report.pdf", required: true });
+await dialog.alert("Export finished");
+```
+
+- `alert` resolves when closed; `confirm` resolves `true`/`false`; `prompt` resolves the text or `null`.
+- `onConfirm` may be async: the dialog shows progress, and if it throws, shows the error and stays open.
+- Requests queue and show one at a time. Where there is no document (a server render) they resolve as canceled.
+- `<Dialog open onClose>` is the same dialog as a regular controlled component.
+
+## Options
+
+`title`, `description`, `intent` (`default` `info` `success` `warning` `danger`),
+`icon`, `confirmLabel`, `cancelLabel`, `dismissible`, `size` (`sm` `md`),
+`onConfirm`. Prompt adds `defaultValue`, `placeholder`, `inputLabel`, `inputType`,
+`required` and `validate`.
+
+## Headless use
+
+`createDialogStore()` and `createDialogApi(store)` build separate instances; pass
+the store to `<DialogHost store={store} />`. The core has no React imports.

package/source/beta-components/dialog/__tests__/core.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { createDialogApi } from "../core/api";
+import { dialog, dialogStore } from "../core/dialog";
+import { createDialogStore, resultFor } from "../core/store";
+
+describe("results", () => {
+  it("maps an answer to each kind's value", () => {
+    expect(resultFor("confirm", true)).toBe(true);
+    expect(resultFor("confirm", false)).toBe(false);
+    expect(resultFor("prompt", true, "Ada")).toBe("Ada");
+    expect(resultFor("prompt", true)).toBe("");
+    expect(resultFor("prompt", false, "ignored")).toBeNull();
+    expect(resultFor("alert", true)).toBeUndefined();
+  });
+});
+
+describe("queue", () => {
+  it("shows one dialog at a time, in order", async () => {
+    const store = createDialogStore();
+    const api = createDialogApi(store);
+
+    const first = api.confirm("Delete the file?");
+    const second = api.prompt({ title: "Rename", defaultValue: "report.pdf" });
+    const [a, b] = store.getSnapshot().queue;
+    expect(a).toMatchObject({ kind: "confirm", options: { title: "Delete the file?" } });
+    expect(b).toMatchObject({ kind: "prompt", options: { defaultValue: "report.pdf" } });
+
+    store.resolve(a.id, true);
+    expect(await first).toBe(true);
+    expect(store.getSnapshot().queue.map((item) => item.id)).toEqual([b.id]);
+
+    store.resolve(b.id, true, "summary.pdf");
+    expect(await second).toBe("summary.pdf");
+    expect(store.getSnapshot().queue).toHaveLength(0);
+  });
+
+  it("notifies subscribers and ignores unknown or repeated answers", async () => {
+    const store = createDialogStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    const answer = store.open("alert", { title: "Saved" });
+    const [request] = store.getSnapshot().queue;
+    store.resolve("dialog-404", true);
+    store.resolve(request.id, true);
+    store.resolve(request.id, false);
+
+    expect(await answer).toBeUndefined();
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+
+  it("cancels everything with dismissAll", async () => {
+    const store = createDialogStore();
+    const api = createDialogApi(store);
+    const results = Promise.all([api.confirm("One?"), api.prompt("Two?"), api.alert("Three")]);
+
+    api.dismissAll();
+    expect(await results).toEqual([false, null, undefined]);
+    expect(store.getSnapshot().queue).toHaveLength(0);
+  });
+
+  it("keeps the snapshot object until something changes", () => {
+    const store = createDialogStore();
+    const before = store.getSnapshot();
+    expect(store.getSnapshot()).toBe(before);
+    void store.open("alert", { title: "Hi" });
+    expect(store.getSnapshot()).not.toBe(before);
+  });
+});
+
+describe("where nothing can be shown", () => {
+  it("answers as a cancel at once", async () => {
+    const store = createDialogStore();
+    const api = createDialogApi(store, () => false);
+    expect(await api.confirm("Sure?")).toBe(false);
+    expect(await api.prompt("Name?")).toBeNull();
+    expect(await api.alert("Hi")).toBeUndefined();
+    expect(store.getSnapshot().queue).toHaveLength(0);
+  });
+
+  it("does so for the default dialog on a server, where there is no document", async () => {
+    expect(typeof document).toBe("undefined");
+    expect(await dialog.confirm("Rendered on the server")).toBe(false);
+    expect(dialogStore.getSnapshot().queue).toHaveLength(0);
+  });
+});

package/source/beta-components/dialog/core/api.ts

@@ -0,0 +1,34 @@
+import type { DialogStore } from "./store";
+import type { AlertOptions, ConfirmOptions, PromptOptions } from "./types";
+
+export interface DialogApi {
+  /** Resolves when the user presses OK (or dismisses it). */
+  alert(options: AlertOptions | string): Promise<void>;
+  /** Resolves `true` on Confirm, `false` on Cancel, Escape or a backdrop click. */
+  confirm(options: ConfirmOptions | string): Promise<boolean>;
+  /** Resolves with the entered text, or `null` when canceled. */
+  prompt(options: PromptOptions | string): Promise<string | null>;
+  dismissAll(): void;
+}
+
+/**
+ * The `dialog` API for a store. `canShow` lets the default instance answer
+ * right away where nobody could see a dialog, such as during a server render.
+ */
+export function createDialogApi(store: DialogStore, canShow: () => boolean = () => true): DialogApi {
+  return {
+    alert(options) {
+      if (!canShow()) return Promise.resolve();
+      return store.open("alert", typeof options === "string" ? { title: options } : options);
+    },
+    confirm(options) {
+      if (!canShow()) return Promise.resolve(false);
+      return store.open("confirm", typeof options === "string" ? { title: options } : options);
+    },
+    prompt(options) {
+      if (!canShow()) return Promise.resolve(null);
+      return store.open("prompt", typeof options === "string" ? { title: options } : options);
+    },
+    dismissAll: () => store.dismissAll(),
+  };
+}