gbs-add-block 1.2.15 → 1.2.16

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

@@ -1,146 +1,147 @@
-"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>
-  );
-}
+"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

@@ -1,6 +1,8 @@
 "use client";
 
-import { useId, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+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";
@@ -63,12 +65,11 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
   const reactId = useId();
   const id = idProp ?? reactId;
   const text = useMemo(() => ({ ...defaultCheckboxText, ...localeText }), [localeText]);
-  const [internal, setInternal] = useState<string[]>(defaultValue ?? []);
-  const values = value ?? internal;
+  const [values, setValues] = useControllableState<string[]>(value, defaultValue ?? []);
 
   const context = useMemo<CheckboxGroupContextValue>(() => {
     const commit = (next: string[]) => {
-      if (value === undefined) setInternal(next);
+      setValues(next);
       onValueChange?.(next);
     };
     return {
@@ -79,11 +80,10 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
       invalid: Boolean(error),
       size,
     };
-  }, [values, value, onValueChange, name, disabled, error, size]);
+  }, [values, setValues, onValueChange, name, disabled, error, size]);
 
   const showSelectAll = Boolean(selectAll) && options !== undefined && options.length > 0;
-  const describedBy =
-    cx(description ? `${id}-description` : "", error ? `${id}-error` : "") || undefined;
+  const describedBy = describeField(id, { description, error });
 
   return (
     <fieldset
@@ -117,7 +117,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
           checked={groupState(values, options)}
           onCheckedChange={() => {
             const next = toggleAll(values, options);
-            if (value === undefined) setInternal(next);
+            setValues(next);
             onValueChange?.(next);
           }}
         />

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

@@ -2,5 +2,5 @@ export type CheckboxSlot = "root" | "control" | "input" | "label" | "description
 
 export type CheckboxGroupSlot = "root" | "legend" | "description" | "items" | "error";
 
-export const cx = (...names: (string | false | null | undefined)[]) =>
-  names.filter(Boolean).join(" ");
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

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

@@ -2,8 +2,8 @@
  * 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
+ * behavior. 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;
@@ -11,15 +11,15 @@
 @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-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --ck-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --ck-border: var(--gbs-border-control, light-dark(#a1a1aa, #52525b));
+    --ck-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+    --ck-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --ck-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+    --ck-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --ck-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --ck-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
     --ck-size: 16px;
     --ck-radius: 4px;
 

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

@@ -17,9 +17,9 @@ import { MultiSelect, Select } from "@/components/combobox";
 import "@/components/combobox/styles.css";
 ```
 
-The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
-loaded, so both components share a theme, and falls back to the same palette
-when used on its own.
+The stylesheet reads the shared `--gbs-*` variables when you set them on
+`:root`, so every component in the library shares one theme, and falls back to
+the same default palette otherwise.
 
 ## Basic usage