gbs-add-block 1.2.14 → 1.2.16

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

@@ -0,0 +1,233 @@
+/*
+ * Button styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default 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(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --bt-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --bt-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --bt-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --bt-subtle: var(--gbs-subtle, light-dark(#f4f4f5, #1c1c20));
+    --bt-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --bt-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+    --bt-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --bt-danger-fg: var(--gbs-danger-fg, light-dark(#ffffff, #1c0606));
+    --bt-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --bt-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --bt-font-size: var(--gbs-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";

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

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  use,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { useControllableState } from "../../shared/react/useControllableState";
+import { describeField } from "../../shared/core/field";
+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 [own, setOwn] = useControllableState<CheckedState>(checkedProp, defaultChecked);
+  const inGroup = group !== null && value !== undefined;
+  // Inside a group the group owns the state, whoever owns it outside one.
+  const state: CheckedState = inGroup ? group.values.includes(value) : own;
+
+  // "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 setOwn(next);
+    onChange?.(event);
+    onCheckedChange?.(next);
+  };
+
+  const invalid = Boolean(error) || (group?.invalid ?? false);
+  const describedBy = describeField(id, { extra: describedByProp, description, error });
+
+  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, type CSSProperties, type ReactNode } from "react";
+import { useControllableState } from "../../shared/react/useControllableState";
+import { describeField } from "../../shared/core/field";
+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 [values, setValues] = useControllableState<string[]>(value, defaultValue ?? []);
+
+  const context = useMemo<CheckboxGroupContextValue>(() => {
+    const commit = (next: string[]) => {
+      setValues(next);
+      onValueChange?.(next);
+    };
+    return {
+      values,
+      toggle: (item, checked) => commit(toggleValue(values, item, checked)),
+      name,
+      disabled,
+      invalid: Boolean(error),
+      size,
+    };
+  }, [values, setValues, onValueChange, name, disabled, error, size]);
+
+  const showSelectAll = Boolean(selectAll) && options !== undefined && options.length > 0;
+  const describedBy = describeField(id, { description, error });
+
+  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);
+            setValues(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",
+};