gbs-add-block 1.2.18 → 1.2.19

package/source/beta-components/number-input/styles.css

@@ -0,0 +1,231 @@
+/*
+ * NumberInput styles.
+ *
+ * The field is a text input, so it looks and sizes exactly like the Input
+ * component; the spinner is two buttons the stylesheet owns rather than the
+ * browser's, which cannot be styled. Tokens read the shared --gbs-* variables
+ * when they are set on an ancestor (set them on :root to theme every component
+ * at once). Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .nm-root {
+    --nm-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --nm-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --nm-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --nm-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+    --nm-readonly-bg: var(--gbs-readonly-bg, light-dark(#fafafa, #0e0e12));
+    --nm-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --nm-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --nm-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --nm-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --nm-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --nm-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+    --nm-height: 36px;
+    --nm-px: 10px;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    font-size: var(--nm-font-size);
+    line-height: 1.4;
+    color: var(--nm-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .nm-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .nm-root {
+    color-scheme: light;
+  }
+
+  :where(.nm-root) *,
+  :where(.nm-root) *::before,
+  :where(.nm-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .nm-root[data-size="sm"] {
+    --nm-height: 30px;
+    --nm-px: 8px;
+    --nm-font-size: 12px;
+  }
+  .nm-root[data-size="lg"] {
+    --nm-height: 44px;
+    --nm-px: 12px;
+    --nm-font-size: 14px;
+  }
+
+  .nm-label {
+    font-weight: 500;
+  }
+  .nm-label[data-required]::after {
+    content: " *";
+    color: var(--nm-danger);
+  }
+
+  /* -------------------------------------------------------------- control */
+
+  .nm-control {
+    display: flex;
+    align-items: stretch;
+    gap: 6px;
+    min-width: 0;
+    height: var(--nm-height);
+    padding-inline-start: var(--nm-px);
+    border: 1px solid var(--nm-border);
+    border-radius: var(--nm-radius);
+    background: var(--nm-input-bg);
+    transition:
+      border-color 120ms ease,
+      box-shadow 120ms ease;
+  }
+  .nm-control:hover:not([data-disabled]) {
+    border-color: color-mix(in oklab, var(--nm-border) 60%, var(--nm-fg));
+  }
+  .nm-control:has(.nm-input:focus-visible) {
+    border-color: var(--nm-focus);
+    box-shadow: 0 0 0 1px var(--nm-focus);
+  }
+  .nm-control[data-invalid] {
+    border-color: var(--nm-danger);
+  }
+  .nm-control[data-invalid]:has(.nm-input:focus-visible) {
+    box-shadow: 0 0 0 1px var(--nm-danger);
+  }
+  .nm-control[data-disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .nm-control[data-readonly] {
+    background: var(--nm-readonly-bg);
+  }
+
+  .nm-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    padding-inline-end: var(--nm-px);
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    /* Figures of the same width, so a column of amounts lines up and the
+       number does not jitter as it is typed. */
+    font-variant-numeric: tabular-nums;
+    outline: none;
+  }
+  .nm-input::placeholder {
+    color: var(--nm-muted);
+  }
+  .nm-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .nm-adornment {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--nm-muted);
+    white-space: nowrap;
+  }
+  .nm-adornment[data-side="trailing"] {
+    padding-inline-end: 2px;
+  }
+
+  .nm-icon-button {
+    display: inline-flex;
+    flex: none;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: var(--nm-muted);
+    cursor: pointer;
+  }
+  .nm-icon-button:hover {
+    background: var(--nm-hover);
+    color: var(--nm-fg);
+  }
+
+  /* -------------------------------------------------------------- stepper */
+
+  .nm-stepper {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    width: 22px;
+    border-inline-start: 1px solid var(--nm-border);
+  }
+
+  .nm-step {
+    display: flex;
+    flex: 1 1 50%;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--nm-muted);
+    cursor: pointer;
+    /* The buttons repeat while held, so the browser must not read the hold as
+       a scroll gesture or a text selection. */
+    touch-action: none;
+    user-select: none;
+  }
+  .nm-step:first-child {
+    border-start-end-radius: calc(var(--nm-radius) - 1px);
+    border-block-end: 1px solid var(--nm-border);
+  }
+  .nm-step:last-child {
+    border-end-end-radius: calc(var(--nm-radius) - 1px);
+  }
+  .nm-step:hover:not(:disabled) {
+    background: var(--nm-hover);
+    color: var(--nm-fg);
+  }
+  .nm-step:active:not(:disabled) {
+    background: color-mix(in oklab, var(--nm-hover) 70%, var(--nm-accent));
+  }
+  .nm-step:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* ----------------------------------------------------------------- text */
+
+  .nm-description {
+    color: var(--nm-muted);
+    text-wrap: pretty;
+  }
+  .nm-error {
+    color: var(--nm-danger);
+    text-wrap: pretty;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-control {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .nm-control {
+      border: 1px solid CanvasText;
+    }
+    .nm-stepper,
+    .nm-step:first-child {
+      border-color: CanvasText;
+    }
+  }
+}

package/source/beta-components/radio-group/README.md

@@ -0,0 +1,58 @@
+# Radio and RadioGroup
+
+One choice out of a few, for React 19, styled to match the rest of the library.
+The buttons are real `<input type="radio">` elements sharing a `name`, so the
+arrow keys roam the group, the group is one tab stop, and the browser validates
+it as one required field — without a line of JavaScript. No runtime
+dependencies besides React.
+
+```ts
+import { Radio, RadioGroup } from "@/components/radio-group";
+import "@/components/radio-group/styles.css";
+```
+
+```tsx
+<RadioGroup
+  label="Send the report"
+  name="frequency"
+  options={["Daily", "Weekly", "Monthly"]}
+  value={frequency}
+  onValueChange={setFrequency}
+/>
+
+{/* Tiles, for choices that need explaining. */}
+<RadioGroup
+  label="Plan"
+  variant="card"
+  orientation="horizontal"
+  options={[
+    { value: "starter", label: "Starter", description: "Up to 3 projects" },
+    { value: "team", label: "Team", description: "Unlimited projects and members" },
+  ]}
+  defaultValue="team"
+/>
+
+{/* Or compose them, when each choice needs its own markup. */}
+<RadioGroup label="Delivery" name="delivery">
+  <Radio value="standard" label="Standard" description="3–5 days" />
+  <Radio value="express" label="Express" description="Tomorrow" disabled />
+</RadioGroup>
+```
+
+**RadioGroup:** `value` / `defaultValue` / `onValueChange` (`string | null`),
+`options` (plain strings or full options) or `<Radio value>` children, `label`
+(legend), `description`, `error`, `required`, `disabled`, `name`, `size`,
+`orientation`, `variant` (`default` `card`), `clearable`, `classNames` (`root`
+`legend` `description` `items` `clear` `error`), `localeText`.
+
+**Radio:** `value`, `label`, `description`, `error`, `size`, `disabled`,
+`classNames` (`root` `control` `input` `label` `description` `error`), `ref`
+(the `<input>`), and every `<input>` attribute.
+
+A radio cannot be unselected by clicking or by keyboard — that is what the
+control is — so an optional question needs either `clearable`, which offers a
+button that empties the group, or a "None" option of its own.
+
+`normalizeOptions`, `resolveValue` and `hasEnabledOption` are exported from the
+framework-free `core`. `resolveValue` is what makes a value the group does not
+offer select nothing, rather than guessing at an option the record never chose.

package/source/beta-components/radio-group/__tests__/core.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { hasEnabledOption, normalizeOptions, resolveValue } from "../core/group";
+
+describe("normalizeOptions", () => {
+  it("turns plain strings into options labelled with themselves", () => {
+    expect(normalizeOptions(["daily", "weekly"])).toEqual([
+      { value: "daily", label: "daily" },
+      { value: "weekly", label: "weekly" },
+    ]);
+  });
+
+  it("leaves full options as they are, mixed in with strings", () => {
+    const options = normalizeOptions([
+      "daily",
+      { value: "weekly", label: "Every week", description: "On Mondays", disabled: true },
+    ]);
+    expect(options[1]).toEqual({
+      value: "weekly",
+      label: "Every week",
+      description: "On Mondays",
+      disabled: true,
+    });
+  });
+});
+
+describe("resolveValue", () => {
+  const options = normalizeOptions([
+    "email",
+    { value: "sms", label: "SMS", disabled: true },
+  ]);
+
+  it("selects the matching option", () => {
+    expect(resolveValue(options, "email")).toBe("email");
+  });
+
+  it("selects a disabled option, because a locked-in choice still has to show", () => {
+    expect(resolveValue(options, "sms")).toBe("sms");
+  });
+
+  it("selects nothing for a value the group does not offer", () => {
+    // A stale value from a record: picking some other option instead would
+    // claim a choice that was never made.
+    expect(resolveValue(options, "pigeon")).toBeNull();
+  });
+
+  it("selects nothing for no value at all", () => {
+    expect(resolveValue(options, null)).toBeNull();
+    expect(resolveValue(options, undefined)).toBeNull();
+  });
+});
+
+describe("hasEnabledOption", () => {
+  const options = normalizeOptions(["email", { value: "sms", label: "SMS", disabled: true }]);
+
+  it("is true while something can still be chosen", () => {
+    expect(hasEnabledOption(options, false)).toBe(true);
+  });
+
+  it("is false when the group is disabled or has nothing to offer", () => {
+    expect(hasEnabledOption(options, true)).toBe(false);
+    expect(hasEnabledOption(normalizeOptions([{ value: "sms", label: "SMS", disabled: true }]), false)).toBe(false);
+    expect(hasEnabledOption([], false)).toBe(false);
+  });
+});

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

@@ -0,0 +1,36 @@
+import type { RadioOption } from "./types";
+
+/**
+ * Accepts `["daily", "weekly"]` as well as the full option objects, because a
+ * list of plain values is the common case and writing `{ value: x, label: x }`
+ * for each one adds nothing.
+ */
+export function normalizeOptions(
+  options: readonly (string | RadioOption)[],
+): RadioOption[] {
+  return options.map((option) =>
+    typeof option === "string" ? { value: option, label: option } : option,
+  );
+}
+
+/**
+ * The value the group should actually show as selected.
+ *
+ * A value that matches no option selects nothing, which is what native radios
+ * do and the right answer for a stale value from a server: showing an arbitrary
+ * option instead would claim a choice the record never made. A *disabled*
+ * option still counts — a locked-in choice has to be visible, or the group
+ * would look empty while refusing to let anything be chosen.
+ */
+export function resolveValue(
+  options: readonly RadioOption[],
+  value: string | null | undefined,
+): string | null {
+  if (value === null || value === undefined) return null;
+  return options.some((option) => option.value === value) ? value : null;
+}
+
+/** Whether anything in the group can still be chosen, for a `clear` button. */
+export function hasEnabledOption(options: readonly RadioOption[], disabled: boolean): boolean {
+  return !disabled && options.some((option) => !option.disabled);
+}

package/source/beta-components/radio-group/core/index.ts

@@ -0,0 +1,2 @@
+export { hasEnabledOption, normalizeOptions, resolveValue } from "./group";
+export type * from "./types";

package/source/beta-components/radio-group/core/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export type RadioSize = "sm" | "md" | "lg";
+
+/** `card` draws each choice as a bordered tile, for choices that carry detail. */
+export type RadioVariant = "default" | "card";
+
+export type RadioOrientation = "vertical" | "horizontal";
+
+export interface RadioOption {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface RadioGroupLocaleText {
+  /** The button that empties a `clearable` group. */
+  clear: string;
+}

package/source/beta-components/radio-group/index.ts

@@ -0,0 +1,9 @@
+export { Radio } from "./react/Radio";
+export type { RadioProps } from "./react/Radio";
+export { RadioGroup } from "./react/RadioGroup";
+export type { RadioGroupProps } from "./react/RadioGroup";
+export { RadioGroupContext } from "./react/context";
+export type { RadioGroupContextValue } from "./react/context";
+export { defaultRadioGroupText } from "./react/locale";
+export type { RadioGroupSlot, RadioSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/radio-group/react/Radio.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  use,
+  useId,
+  useImperativeHandle,
+  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 { RadioSize } from "../core/types";
+import { RadioGroupContext } from "./context";
+import { cx, type RadioSlot } from "./props";
+
+export interface RadioProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "type" | "size" | "checked" | "defaultChecked" | "onChange"
+  > {
+  /** The value this choice contributes to its group. */
+  value: string;
+  /** Selected (controlled). Inside a RadioGroup the group decides instead. */
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?(checked: boolean): void;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  size?: RadioSize;
+  classNames?: Partial<Record<RadioSlot, string>>;
+  /** The `<input>` element. */
+  ref?: Ref<HTMLInputElement>;
+}
+
+/**
+ * One choice, as a native radio. Inside a `RadioGroup` the group owns the
+ * value; on its own it behaves like any other radio sharing a `name`.
+ *
+ * Nothing here manages focus: radios that share a `name` already roam with the
+ * arrow keys, skip the disabled ones, wrap around and leave one tab stop for
+ * the whole group — in every browser, and without JavaScript.
+ */
+export function Radio(props: RadioProps) {
+  const {
+    ref,
+    value,
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    onChange,
+    label,
+    description,
+    error,
+    size,
+    className,
+    classNames,
+    style,
+    id: idProp,
+    disabled,
+    required,
+    name,
+    "aria-describedby": describedByProp,
+    ...inputProps
+  } = props;
+
+  const group = use(RadioGroupContext);
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
+  const [own, setOwn] = useControllableState(checkedProp, defaultChecked);
+  const checked = group !== null ? group.value === value : own;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (group !== null) group.select(value);
+    else setOwn(event.target.checked);
+    onChange?.(event);
+    onCheckedChange?.(event.target.checked);
+  };
+
+  const isDisabled = disabled ?? group?.disabled;
+  const invalid = Boolean(error) || (group?.invalid ?? false);
+  const describedBy = describeField(id, { extra: describedByProp, description, error });
+
+  return (
+    <div
+      className={cx("rd-root", classNames?.root, className)}
+      style={style}
+      data-size={size ?? group?.size ?? "md"}
+      data-variant={group?.variant ?? "default"}
+      data-checked={checked || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={invalid ? "" : undefined}
+    >
+      <span className={cx("rd-control", classNames?.control)}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          id={id}
+          type="radio"
+          className={cx("rd-input", classNames?.input)}
+          checked={checked}
+          value={value}
+          name={name ?? group?.name}
+          disabled={isDisabled}
+          // Every radio in a group carries `required`, which is how a browser
+          // validates the group as a whole rather than one button in it.
+          required={required ?? group?.required}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          onChange={handleChange}
+        />
+        <span className="rd-dot" aria-hidden="true" />
+      </span>
+
+      {(label || description || error) && (
+        <span className="rd-text">
+          {label && (
+            <label htmlFor={id} className={cx("rd-label", classNames?.label)}>
+              {label}
+            </label>
+          )}
+          {description && (
+            <span id={`${id}-description`} className={cx("rd-description", classNames?.description)}>
+              {description}
+            </span>
+          )}
+          {error && (
+            <span id={`${id}-error`} className={cx("rd-error", classNames?.error)} role="alert">
+              {error}
+            </span>
+          )}
+        </span>
+      )}
+    </div>
+  );
+}