gbs-add-block 1.2.13 → 1.2.15

package/source/beta-components/button/index.ts

@@ -0,0 +1,5 @@
+export { Button } from "./react/Button";
+export type { ButtonProps } from "./react/Button";
+export { defaultButtonText } from "./react/locale";
+export type { ButtonRenderProps, ButtonSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/button/react/Button.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import {
+  useMemo,
+  useState,
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { useFormStatus } from "react-dom";
+import { buttonState, isPromiseLike } from "../core/state";
+import type { ButtonLocaleText, ButtonSize, ButtonVariant } from "../core/types";
+import { defaultButtonText } from "./locale";
+import { cx, type ButtonRenderProps, type ButtonSlot } from "./props";
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+  /** Default `primary`. */
+  variant?: ButtonVariant;
+  /** Default `md`. */
+  size?: ButtonSize;
+  /** Show a spinner and ignore clicks, while keeping focus and the button's width. */
+  loading?: boolean;
+  /** Text shown next to the spinner while busy, instead of keeping the label. */
+  loadingText?: ReactNode;
+  /** Icon before the label. */
+  leading?: ReactNode;
+  /** Icon after the label. */
+  trailing?: ReactNode;
+  /** An icon-only button. Give it an `aria-label`. */
+  icon?: ReactNode;
+  fullWidth?: boolean;
+  /** Return a promise to show the loading state until it settles. */
+  onClick?(event: MouseEvent<HTMLElement>): unknown;
+  /**
+   * Render another element with the button's look and behavior, e.g. a router
+   * link: `render={(props) => <Link href="/billing" {...props} />}`.
+   */
+  render?(props: ButtonRenderProps): ReactElement;
+  classNames?: Partial<Record<ButtonSlot, string>>;
+  localeText?: Partial<ButtonLocaleText>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+/** Attributes that only mean something on a `<button>`, left off a `render`ed element. */
+const BUTTON_ONLY = new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value", "type"]);
+
+const Spinner = () => (
+  <svg className="bt-spinner-ring" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <circle cx="12" cy="12" r="9" pathLength={100} />
+  </svg>
+);
+
+/**
+ * A button with variants, sizes, icons and a loading state. An async `onClick`
+ * shows progress by itself, and a submit button shows progress while its form's
+ * Server Action runs.
+ */
+export function Button(props: ButtonProps) {
+  const {
+    ref,
+    variant = "primary",
+    size = "md",
+    type = "button",
+    loading = false,
+    loadingText,
+    leading,
+    trailing,
+    icon,
+    fullWidth = false,
+    disabled = false,
+    onClick,
+    render,
+    className,
+    classNames,
+    localeText,
+    children,
+    ...rest
+  } = props;
+
+  const text = useMemo(() => ({ ...defaultButtonText, ...localeText }), [localeText]);
+  // Pending while the surrounding <form action={…}> is submitting (React 19).
+  const { pending: formPending } = useFormStatus();
+  const [clickPending, setClickPending] = useState(false);
+  const state = buttonState({
+    disabled,
+    loading,
+    pending: clickPending || (type === "submit" && formPending),
+  });
+  const iconOnly = icon !== undefined && (children === undefined || children === null);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    // aria-disabled doesn't stop a click or a form submit on its own.
+    if (state.inactive) {
+      event.preventDefault();
+      return;
+    }
+    const result = onClick?.(event);
+    if (!isPromiseLike(result)) return;
+    setClickPending(true);
+    const done = () => setClickPending(false);
+    Promise.resolve(result).then(done, (error: unknown) => {
+      done();
+      // Keep the failure visible instead of swallowing it.
+      throw error;
+    });
+  };
+
+  const content = (
+    <>
+      <span
+        className={cx("bt-content", classNames?.content)}
+        // Hidden, not removed, so the button keeps its width while busy.
+        data-hidden={state.busy ? "" : undefined}
+      >
+        {leading && (
+          <span className={cx("bt-icon", classNames?.icon)} aria-hidden="true">
+            {leading}
+          </span>
+        )}
+        {iconOnly ? <span className={cx("bt-icon", classNames?.icon)}>{icon}</span> : children}
+        {trailing && (
+          <span className={cx("bt-icon", classNames?.icon)} aria-hidden="true">
+            {trailing}
+          </span>
+        )}
+      </span>
+      {state.busy && (
+        <span className={cx("bt-spinner", classNames?.spinner)}>
+          <Spinner />
+          {loadingText ?? <span className="bt-sr-only">{text.loading}</span>}
+        </span>
+      )}
+    </>
+  );
+
+  const shared = {
+    className: cx("bt-root", classNames?.root, className),
+    "data-variant": variant,
+    "data-size": size,
+    "data-busy": state.busy ? ("" as const) : undefined,
+    "data-icon-only": iconOnly ? ("" as const) : undefined,
+    "data-full-width": fullWidth ? ("" as const) : undefined,
+    "data-loading-text": state.busy && loadingText ? "" : undefined,
+    "aria-busy": state.busy || undefined,
+  };
+
+  if (render) {
+    const attributes = Object.fromEntries(Object.entries(rest).filter(([key]) => !BUTTON_ONLY.has(key)));
+    return render({
+      ...attributes,
+      ...shared,
+      "aria-disabled": state.inactive || undefined,
+      onClick: handleClick,
+      children: content,
+    });
+  }
+
+  return (
+    <button
+      {...rest}
+      {...shared}
+      ref={ref}
+      type={type}
+      disabled={state.nativeDisabled}
+      aria-disabled={state.inactive && !state.nativeDisabled ? true : undefined}
+      onClick={handleClick}
+    >
+      {content}
+    </button>
+  );
+}

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

@@ -0,0 +1,5 @@
+import type { ButtonLocaleText } from "../core/types";
+
+export const defaultButtonText: ButtonLocaleText = {
+  loading: "Loading",
+};

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

@@ -0,0 +1,23 @@
+import type { CSSProperties, MouseEvent, ReactNode } from "react";
+import type { ButtonSize, ButtonVariant } from "../core/types";
+
+export type ButtonSlot = "root" | "content" | "spinner" | "icon";
+
+/** Handed to `render`, to put the button's look and behavior on another element. */
+export interface ButtonRenderProps {
+  className: string;
+  style?: CSSProperties;
+  children: ReactNode;
+  onClick(event: MouseEvent<HTMLElement>): void;
+  "data-variant": ButtonVariant;
+  "data-size": ButtonSize;
+  "data-busy"?: "";
+  "data-icon-only"?: "";
+  "data-full-width"?: "";
+  "aria-busy"?: boolean;
+  "aria-disabled"?: boolean;
+  [attribute: string]: unknown;
+}
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");

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

@@ -0,0 +1,233 @@
+/*
+ * Button styles.
+ *
+ * Tokens read the DataGrid's --dg-* variables when they are set on an ancestor
+ * (set them on :root to share one theme) and fall back to the same palette
+ * otherwise. Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .bt-root {
+    --bt-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
+    --bt-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --bt-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --bt-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
+    --bt-subtle: light-dark(#f4f4f5, #1c1c20);
+    --bt-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --bt-accent-fg: var(--dg-accent-fg, light-dark(#ffffff, #0b1220));
+    --bt-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --bt-danger-fg: light-dark(#ffffff, #1c0606);
+    --bt-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --bt-radius: var(--dg-radius, 8px);
+    --bt-font-size: var(--dg-font-size, 13px);
+    --bt-height: 36px;
+    --bt-px: 14px;
+    --bt-gap: 8px;
+
+    /* Per variant. */
+    --bt-fill: var(--bt-accent);
+    --bt-fill-hover: color-mix(in oklab, var(--bt-accent), var(--bt-fg) 12%);
+    --bt-ink: var(--bt-accent-fg);
+    --bt-line: var(--bt-accent);
+
+    color-scheme: inherit;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    height: var(--bt-height);
+    padding: 0 var(--bt-px);
+    border: 1px solid var(--bt-line);
+    border-radius: var(--bt-radius);
+    background: var(--bt-fill);
+    color: var(--bt-ink);
+    font: inherit;
+    font-size: var(--bt-font-size);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease,
+      scale 120ms ease;
+  }
+
+  :where(.dark, [data-theme="dark"]) .bt-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .bt-root {
+    color-scheme: light;
+  }
+
+  :where(.bt-root) *,
+  :where(.bt-root) *::before,
+  :where(.bt-root) *::after {
+    box-sizing: border-box;
+  }
+
+  /* ------------------------------------------------------------ variants */
+
+  .bt-root[data-variant="secondary"] {
+    --bt-fill: var(--bt-subtle);
+    --bt-fill-hover: color-mix(in oklab, var(--bt-subtle), var(--bt-fg) 8%);
+    --bt-ink: var(--bt-fg);
+    --bt-line: transparent;
+  }
+  .bt-root[data-variant="outline"] {
+    --bt-fill: var(--bt-bg);
+    --bt-fill-hover: var(--bt-hover);
+    --bt-ink: var(--bt-fg);
+    --bt-line: var(--bt-border);
+  }
+  .bt-root[data-variant="ghost"] {
+    --bt-fill: transparent;
+    --bt-fill-hover: var(--bt-hover);
+    --bt-ink: var(--bt-fg);
+    --bt-line: transparent;
+  }
+  .bt-root[data-variant="danger"] {
+    --bt-fill: var(--bt-danger);
+    --bt-fill-hover: color-mix(in oklab, var(--bt-danger), var(--bt-fg) 12%);
+    --bt-ink: var(--bt-danger-fg);
+    --bt-line: var(--bt-danger);
+  }
+  .bt-root[data-variant="link"] {
+    --bt-fill: transparent;
+    --bt-fill-hover: transparent;
+    --bt-ink: var(--bt-accent);
+    --bt-line: transparent;
+    --bt-px: 0px;
+    height: auto;
+    text-underline-offset: 3px;
+  }
+  .bt-root[data-variant="link"]:hover:not([aria-disabled="true"], :disabled) {
+    text-decoration: underline;
+  }
+
+  /* --------------------------------------------------------------- sizes */
+
+  .bt-root[data-size="sm"] {
+    --bt-height: 30px;
+    --bt-px: 10px;
+    --bt-gap: 6px;
+    --bt-font-size: 12px;
+  }
+  .bt-root[data-size="lg"] {
+    --bt-height: 44px;
+    --bt-px: 18px;
+    --bt-gap: 10px;
+    --bt-font-size: 14px;
+  }
+
+  /* -------------------------------------------------------------- states */
+
+  .bt-root:hover:not([aria-disabled="true"], :disabled) {
+    background: var(--bt-fill-hover);
+  }
+  .bt-root:active:not([aria-disabled="true"], :disabled) {
+    scale: 0.98;
+  }
+  .bt-root:focus-visible {
+    outline: 2px solid var(--bt-focus);
+    outline-offset: 2px;
+  }
+  .bt-root:disabled,
+  .bt-root[aria-disabled="true"]:not([data-busy]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .bt-root[data-busy] {
+    cursor: progress;
+  }
+
+  .bt-root[data-icon-only] {
+    width: var(--bt-height);
+    padding: 0;
+  }
+  .bt-root[data-full-width] {
+    width: 100%;
+  }
+
+  /* ------------------------------------------------------------- content */
+
+  .bt-content,
+  .bt-spinner {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bt-gap);
+    min-width: 0;
+  }
+  /* The label keeps its space while the spinner sits on top… */
+  .bt-content[data-hidden] {
+    visibility: hidden;
+  }
+  /* …unless loading text replaces it. */
+  .bt-root[data-loading-text] .bt-content {
+    display: none;
+  }
+
+  .bt-icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .bt-icon > svg {
+    width: 1.15em;
+    height: 1.15em;
+  }
+
+  .bt-spinner-ring {
+    width: 1.15em;
+    height: 1.15em;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-dasharray: 30 100;
+    animation: bt-rotate 0.8s linear infinite;
+  }
+  @keyframes bt-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .bt-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bt-root {
+      transition: none;
+    }
+    .bt-root:active:not([aria-disabled="true"], :disabled) {
+      scale: none;
+    }
+    .bt-spinner-ring {
+      animation-duration: 2.4s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .bt-root {
+      border-color: ButtonText;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+# Checkbox and CheckboxGroup
+
+Checkboxes for React 19, styled to match the rest of the library. The box is a
+real `<input type="checkbox">`, so forms, form libraries and assistive
+technology work as they do natively. No runtime dependencies besides React.
+
+```ts
+import { Checkbox, CheckboxGroup } from "@/components/checkbox";
+import "@/components/checkbox/styles.css";
+```
+
+```tsx
+<Checkbox label="Remember me" name="remember" checked={remember} onCheckedChange={setRemember} />
+
+<CheckboxGroup
+  label="Notify me by"
+  name="channels"
+  options={[{ value: "email", label: "Email" }, { value: "sms", label: "SMS" }]}
+  value={channels}
+  onValueChange={setChannels}
+  selectAll
+/>
+```
+
+**Checkbox:** `checked` / `defaultChecked` (`true`, `false`, `"indeterminate"`),
+`onCheckedChange`, `value`, `label`, `description`, `error`, `size`, `classNames`
+(`root` `control` `input` `label` `description` `error`), `ref` (the `<input>`), and
+every `<input>` attribute.
+
+**CheckboxGroup:** `value` / `defaultValue` / `onValueChange` (string arrays),
+`options` or `<Checkbox value>` children, `label` (legend), `description`,
+`error`, `required`, `disabled`, `name`, `size`, `orientation`, `selectAll`,
+`classNames` (`root` `legend` `description` `items` `error`), `localeText`.
+
+`toggleValue`, `groupState` and `toggleAll` are exported from the
+framework-free `core`.

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

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { groupState, toggleAll, toggleValue } from "../core/group";
+
+const options = [
+  { value: "email" },
+  { value: "sms" },
+  { value: "push", disabled: true },
+];
+
+describe("toggling one value", () => {
+  it("adds and removes without duplicates", () => {
+    expect(toggleValue(["email"], "sms", true)).toEqual(["email", "sms"]);
+    expect(toggleValue(["email"], "email", true)).toEqual(["email"]);
+    expect(toggleValue(["email", "sms"], "email", false)).toEqual(["sms"]);
+    expect(toggleValue([], "email", false)).toEqual([]);
+  });
+});
+
+describe("select all", () => {
+  it("reports none, some or all", () => {
+    expect(groupState([], options)).toBe(false);
+    expect(groupState(["sms"], options)).toBe("indeterminate");
+    expect(groupState(["email", "sms", "push"], options)).toBe(true);
+    expect(groupState(["email"], [])).toBe(false);
+  });
+
+  it("selects every enabled option, leaving disabled ones alone", () => {
+    expect(toggleAll(["sms"], options)).toEqual(["sms", "email"]);
+    expect(toggleAll([], options)).toEqual(["email", "sms"]);
+  });
+
+  it("clears enabled options once they are all selected", () => {
+    expect(toggleAll(["email", "sms"], options)).toEqual([]);
+    expect(toggleAll(["push", "email", "sms"], options)).toEqual(["push"]);
+  });
+
+  it("keeps values that aren't options", () => {
+    expect(toggleAll(["legacy"], options)).toEqual(["legacy", "email", "sms"]);
+  });
+});

package/source/beta-components/checkbox/core/group.ts

@@ -0,0 +1,30 @@
+import type { CheckedState } from "./types";
+
+/** Adds or removes one value, keeping the order values were selected in. */
+export function toggleValue(values: readonly string[], value: string, checked: boolean): string[] {
+  const has = values.includes(value);
+  if (checked) return has ? [...values] : [...values, value];
+  return values.filter((item) => item !== value);
+}
+
+/** A "select all" box's state for the options in a group. */
+export function groupState(values: readonly string[], options: readonly { value: string }[]): CheckedState {
+  if (options.length === 0) return false;
+  const selected = options.filter((option) => values.includes(option.value)).length;
+  if (selected === 0) return false;
+  return selected === options.length ? true : "indeterminate";
+}
+
+/**
+ * What "select all" does: when every enabled option is already selected, clear
+ * them; otherwise select them all. Disabled options keep their state either way.
+ */
+export function toggleAll(
+  values: readonly string[],
+  options: readonly { value: string; disabled?: boolean }[],
+): string[] {
+  const enabled = options.filter((option) => !option.disabled).map((option) => option.value);
+  const allOn = enabled.every((value) => values.includes(value));
+  if (allOn) return values.filter((value) => !enabled.includes(value));
+  return [...values, ...enabled.filter((value) => !values.includes(value))];
+}

package/source/beta-components/checkbox/core/index.ts

@@ -0,0 +1,3 @@
+// Framework-free: selection rules for checkbox groups.
+export { groupState, toggleAll, toggleValue } from "./group";
+export type * from "./types";

package/source/beta-components/checkbox/core/types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export type CheckboxSize = "sm" | "md" | "lg";
+
+/** `true`, `false`, or partly checked. */
+export type CheckedState = boolean | "indeterminate";
+
+export interface CheckboxOption {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface CheckboxLocaleText {
+  selectAll: string;
+}

package/source/beta-components/checkbox/index.ts

@@ -0,0 +1,9 @@
+export { Checkbox } from "./react/Checkbox";
+export type { CheckboxProps } from "./react/Checkbox";
+export { CheckboxGroup } from "./react/CheckboxGroup";
+export type { CheckboxGroupProps } from "./react/CheckboxGroup";
+export { CheckboxGroupContext } from "./react/context";
+export type { CheckboxGroupContextValue } from "./react/context";
+export { defaultCheckboxText } from "./react/locale";
+export type { CheckboxGroupSlot, CheckboxSlot } from "./react/props";
+export * from "./core";