gbs-add-block 1.2.14 → 1.2.16

package/source/beta-components/{datagrid → data-grid}/styles.css

@@ -11,30 +11,30 @@
 
 @layer components {
   .dg-root {
-    --dg-font-size: 13px;
-    --dg-bg: light-dark(#ffffff, #0b0b0e);
-    --dg-fg: light-dark(#18181b, #f4f4f5);
-    --dg-muted: light-dark(#71717a, #a1a1aa);
-    --dg-border: light-dark(#e4e4e7, #27272a);
-    --dg-border-subtle: light-dark(#f0f0f2, #1c1c20);
-    --dg-header-bg: light-dark(#fafafa, #111114);
-    --dg-header-fg: light-dark(#3f3f46, #d4d4d8);
-    --dg-row-alt: light-dark(#fcfcfd, #0e0e12);
-    --dg-row-hover: light-dark(#f4f4f5, #18181c);
-    --dg-row-selected: light-dark(#eef4ff, #14213d);
-    --dg-row-selected-hover: light-dark(#e2ecff, #1a2a4d);
-    --dg-hover: light-dark(#f4f4f5, #1f1f23);
-    --dg-input-bg: light-dark(#ffffff, #121216);
-    --dg-accent: light-dark(#2563eb, #60a5fa);
-    --dg-accent-fg: light-dark(#ffffff, #0b1220);
-    --dg-accent-soft: light-dark(#eff6ff, #172554);
-    --dg-accent-strong: light-dark(#1d4ed8, #bfdbfe);
-    --dg-focus: light-dark(#2563eb, #60a5fa);
-    --dg-danger: light-dark(#dc2626, #f87171);
-    --dg-pin-shadow: light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5));
-    --dg-shadow: 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6));
-    --dg-radius: 8px;
-    --dg-cell-px: 12px;
+    --dg-font-size: var(--gbs-font-size, 13px);
+    --dg-bg: var(--gbs-bg, light-dark(#ffffff, #0b0b0e));
+    --dg-fg: var(--gbs-fg, light-dark(#18181b, #f4f4f5));
+    --dg-muted: var(--gbs-muted, light-dark(#71717a, #a1a1aa));
+    --dg-border: var(--gbs-border, light-dark(#e4e4e7, #27272a));
+    --dg-border-subtle: var(--gbs-border-subtle, light-dark(#f0f0f2, #1c1c20));
+    --dg-header-bg: var(--gbs-header-bg, light-dark(#fafafa, #111114));
+    --dg-header-fg: var(--gbs-header-fg, light-dark(#3f3f46, #d4d4d8));
+    --dg-row-alt: var(--gbs-row-alt, light-dark(#fcfcfd, #0e0e12));
+    --dg-row-hover: var(--gbs-row-hover, light-dark(#f4f4f5, #18181c));
+    --dg-row-selected: var(--gbs-row-selected, light-dark(#eef4ff, #14213d));
+    --dg-row-selected-hover: var(--gbs-row-selected-hover, light-dark(#e2ecff, #1a2a4d));
+    --dg-hover: var(--gbs-hover, light-dark(#f4f4f5, #1f1f23));
+    --dg-input-bg: var(--gbs-input-bg, light-dark(#ffffff, #121216));
+    --dg-accent: var(--gbs-accent, light-dark(#2563eb, #60a5fa));
+    --dg-accent-fg: var(--gbs-accent-fg, light-dark(#ffffff, #0b1220));
+    --dg-accent-soft: var(--gbs-accent-soft, light-dark(#eff6ff, #172554));
+    --dg-accent-strong: var(--gbs-accent-strong, light-dark(#1d4ed8, #bfdbfe));
+    --dg-focus: var(--gbs-focus, light-dark(#2563eb, #60a5fa));
+    --dg-danger: var(--gbs-danger, light-dark(#dc2626, #f87171));
+    --dg-pin-shadow: var(--gbs-pin-shadow, light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5)));
+    --dg-shadow: var(--gbs-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6)));
+    --dg-radius: var(--gbs-radius, 8px);
+    --dg-cell-px: var(--gbs-cell-px, 12px);
 
     color-scheme: inherit;
     position: relative;

package/source/beta-components/{datepicker → date-picker}/README.md

@@ -17,9 +17,9 @@ import { DatePicker, DateRangePicker } from "@/components/date-picker";
 import "@/components/date-picker/styles.css";
 ```
 
-The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
-loaded, so every component shares 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
 

package/source/beta-components/{datepicker → date-picker}/react/DatePicker.tsx

@@ -1,249 +1,249 @@
-"use client";
-
-import {
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type Ref,
-} from "react";
-import { toDate, toISODate } from "../core/calendar";
-import { inputPlaceholder } from "../core/format";
-import type { DateInput, DateRange } from "../core/types";
-import { CalendarPanel } from "./CalendarPanel";
-import { CalendarIcon, XIcon } from "./icons";
-import { defaultDatePickerText } from "./locale";
-import { DatePickerPopover } from "./Popover";
-import { cx, type DatePickerHandle, type DatePickerSharedProps } from "./props";
-import { useDatePicker } from "./useDatePicker";
-
-export interface DatePickerProps extends DatePickerSharedProps {
-  value?: DateInput | null;
-  defaultValue?: DateInput | null;
-  onChange?(date: Date | null): void;
-  /** Close the calendar after choosing a date. Default true. */
-  closeOnSelect?: boolean;
-  ref?: Ref<DatePickerHandle<Date | null>>;
-}
-
-/** A single date field with a calendar, typed entry and full keyboard control. */
-export function DatePicker(props: DatePickerProps) {
-  const {
-    ref,
-    value,
-    defaultValue,
-    onChange,
-    closeOnSelect = true,
-    min,
-    max,
-    isDateDisabled,
-    locale,
-    weekStartsOn,
-    format,
-    numberOfMonths = 1,
-    showWeekNumbers = false,
-    showToday = true,
-    allowInput = true,
-    fixedWeeks = true,
-    label,
-    description,
-    error,
-    placeholder,
-    required = false,
-    disabled = false,
-    readOnly = false,
-    clearable = true,
-    size = "md",
-    name,
-    id: idProp,
-    className,
-    classNames,
-    style,
-    localeText,
-    onOpenChange,
-  } = props;
-
-  const reactId = useId();
-  const id = idProp ?? reactId;
-  const inputId = `${id}-input`;
-  const popoverId = `${id}-popover`;
-  const text = useMemo(() => ({ ...defaultDatePickerText, ...localeText }), [localeText]);
-
-  const controlRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const minDate = useMemo(() => toDate(min), [min]);
-  const maxDate = useMemo(() => toDate(max), [max]);
-  const selection = useMemo<DateRange | undefined>(
-    () => (value === undefined ? undefined : { start: toDate(value), end: null }),
-    [value],
-  );
-  // Read once: later changes to `defaultValue` are ignored, as for any uncontrolled input.
-  const [initial] = useState<DateRange>(() => ({ start: toDate(defaultValue), end: null }));
-
-  const picker = useDatePicker({
-    range: false,
-    value: selection,
-    defaultValue: initial,
-    onSelectionChange: (next) => onChange?.(next.start),
-    min: minDate,
-    max: maxDate,
-    isDateDisabled,
-    locale,
-    weekStartsOn,
-    numberOfMonths,
-    fixedWeeks,
-    disabled,
-    readOnly,
-    closeOnSelect,
-    format,
-    text,
-    controlRef,
-    triggerRef,
-    onOpenChange,
-  });
-
-  const selected = picker.selection.start;
-  const message = error ?? picker.inputError;
-  const invalid = Boolean(message);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      open: () => picker.setOpen(true),
-      close: () => picker.setOpen(false),
-      toggle: () => picker.setOpen(!picker.open),
-      focus: () => inputRef.current?.focus({ preventScroll: true }),
-      clear: picker.clear,
-      getValue: () => picker.selection.start,
-    }),
-    [picker],
-  );
-
-  const onInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "ArrowDown" || (event.key === "Enter" && !picker.open)) {
-      event.preventDefault();
-      picker.setOpen(true);
-    } else if (event.key === "Escape" && picker.open) {
-      picker.setOpen(false);
-    }
-  };
-
-  const describedBy =
-    cx(description ? `${id}-description` : "", message ? `${id}-error` : "") || undefined;
-
-  return (
-    <div
-      className={cx("dp-root", classNames?.root, className)}
-      style={style}
-      data-size={size}
-      data-state={picker.open ? "open" : "closed"}
-      data-invalid={invalid ? "" : undefined}
-    >
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cx("dp-label", classNames?.label)}
-          data-required={required || undefined}
-        >
-          {label}
-        </label>
-      )}
-
-      <div
-        ref={controlRef}
-        className={cx("dp-control", classNames?.control)}
-        data-disabled={disabled || undefined}
-        data-invalid={invalid ? "" : undefined}
-      >
-        <input
-          ref={inputRef}
-          id={inputId}
-          className={cx("dp-input", classNames?.input)}
-          value={picker.inputValue("start")}
-          placeholder={placeholder ?? inputPlaceholder(locale)}
-          disabled={disabled}
-          readOnly={readOnly || !allowInput}
-          required={required}
-          autoComplete="off"
-          spellCheck={false}
-          aria-invalid={invalid || undefined}
-          aria-describedby={describedBy}
-          onChange={(event) => picker.onInputChange("start", event.target.value)}
-          onBlur={() => picker.onInputBlur("start")}
-          onKeyDown={onInputKeyDown}
-          onClick={allowInput ? undefined : () => !disabled && picker.setOpen(true)}
-        />
-
-        <span className="dp-actions">
-          {clearable && selected && !disabled && !readOnly && (
-            <button
-              type="button"
-              tabIndex={-1}
-              className="dp-icon-button"
-              aria-label={text.clear}
-              onClick={picker.clear}
-            >
-              <XIcon width={14} height={14} />
-            </button>
-          )}
-          <button
-            ref={triggerRef}
-            type="button"
-            className="dp-icon-button dp-trigger"
-            aria-label={text.openCalendar}
-            aria-haspopup="dialog"
-            aria-expanded={picker.open}
-            aria-controls={picker.open ? popoverId : undefined}
-            disabled={disabled}
-            onPointerDown={picker.onTriggerPointerDown}
-            onClick={picker.onTriggerClick}
-          >
-            <CalendarIcon />
-          </button>
-        </span>
-      </div>
-
-      {name && <input type="hidden" name={name} value={selected ? toISODate(selected) : ""} />}
-      {description && (
-        <span id={`${id}-description`} className="dp-description">
-          {description}
-        </span>
-      )}
-      {message && (
-        <span id={`${id}-error`} className="dp-error" role="alert">
-          {message}
-        </span>
-      )}
-
-      {picker.anchor && (
-        <DatePickerPopover
-          anchor={picker.anchor}
-          onClose={picker.onPopoverClose}
-          label={text.calendarLabel}
-          id={popoverId}
-          autoFocus={picker.gridFocus}
-          className={classNames?.popover}
-        >
-          <CalendarPanel
-            picker={picker}
-            text={text}
-            locale={locale}
-            showWeekNumbers={showWeekNumbers}
-            showToday={showToday}
-            clearable={clearable}
-            hasValue={selected !== null}
-            classNames={classNames}
-          />
-        </DatePickerPopover>
-      )}
-
-      <span className="dp-sr-only" role="status">
-        {selected ? text.selectedDate(picker.formatValue(selected)) : ""}
-      </span>
-    </div>
-  );
-}
+"use client";
+
+import {
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type Ref,
+} from "react";
+import { describeField } from "../../shared/core/field";
+import { toDate, toISODate } from "../core/calendar";
+import { inputPlaceholder } from "../core/format";
+import type { DateInput, DateRange } from "../core/types";
+import { CalendarPanel } from "./CalendarPanel";
+import { CalendarIcon, XIcon } from "./icons";
+import { defaultDatePickerText } from "./locale";
+import { DatePickerPopover } from "./Popover";
+import { cx, type DatePickerHandle, type DatePickerSharedProps } from "./props";
+import { useDatePicker } from "./useDatePicker";
+
+export interface DatePickerProps extends DatePickerSharedProps {
+  value?: DateInput | null;
+  defaultValue?: DateInput | null;
+  onChange?(date: Date | null): void;
+  /** Close the calendar after choosing a date. Default true. */
+  closeOnSelect?: boolean;
+  ref?: Ref<DatePickerHandle<Date | null>>;
+}
+
+/** A single date field with a calendar, typed entry and full keyboard control. */
+export function DatePicker(props: DatePickerProps) {
+  const {
+    ref,
+    value,
+    defaultValue,
+    onChange,
+    closeOnSelect = true,
+    min,
+    max,
+    isDateDisabled,
+    locale,
+    weekStartsOn,
+    format,
+    numberOfMonths = 1,
+    showWeekNumbers = false,
+    showToday = true,
+    allowInput = true,
+    fixedWeeks = true,
+    label,
+    description,
+    error,
+    placeholder,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    clearable = true,
+    size = "md",
+    name,
+    id: idProp,
+    className,
+    classNames,
+    style,
+    localeText,
+    onOpenChange,
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const inputId = `${id}-input`;
+  const popoverId = `${id}-popover`;
+  const text = useMemo(() => ({ ...defaultDatePickerText, ...localeText }), [localeText]);
+
+  const controlRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const minDate = useMemo(() => toDate(min), [min]);
+  const maxDate = useMemo(() => toDate(max), [max]);
+  const selection = useMemo<DateRange | undefined>(
+    () => (value === undefined ? undefined : { start: toDate(value), end: null }),
+    [value],
+  );
+  // Read once: later changes to `defaultValue` are ignored, as for any uncontrolled input.
+  const [initial] = useState<DateRange>(() => ({ start: toDate(defaultValue), end: null }));
+
+  const picker = useDatePicker({
+    range: false,
+    value: selection,
+    defaultValue: initial,
+    onSelectionChange: (next) => onChange?.(next.start),
+    min: minDate,
+    max: maxDate,
+    isDateDisabled,
+    locale,
+    weekStartsOn,
+    numberOfMonths,
+    fixedWeeks,
+    disabled,
+    readOnly,
+    closeOnSelect,
+    format,
+    text,
+    controlRef,
+    triggerRef,
+    onOpenChange,
+  });
+
+  const selected = picker.selection.start;
+  const message = error ?? picker.inputError;
+  const invalid = Boolean(message);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => picker.setOpen(true),
+      close: () => picker.setOpen(false),
+      toggle: () => picker.setOpen(!picker.open),
+      focus: () => inputRef.current?.focus({ preventScroll: true }),
+      clear: picker.clear,
+      getValue: () => picker.selection.start,
+    }),
+    [picker],
+  );
+
+  const onInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown" || (event.key === "Enter" && !picker.open)) {
+      event.preventDefault();
+      picker.setOpen(true);
+    } else if (event.key === "Escape" && picker.open) {
+      picker.setOpen(false);
+    }
+  };
+
+  const describedBy = describeField(id, { description, error: message });
+
+  return (
+    <div
+      className={cx("dp-root", classNames?.root, className)}
+      style={style}
+      data-size={size}
+      data-state={picker.open ? "open" : "closed"}
+      data-invalid={invalid ? "" : undefined}
+    >
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cx("dp-label", classNames?.label)}
+          data-required={required || undefined}
+        >
+          {label}
+        </label>
+      )}
+
+      <div
+        ref={controlRef}
+        className={cx("dp-control", classNames?.control)}
+        data-disabled={disabled || undefined}
+        data-invalid={invalid ? "" : undefined}
+      >
+        <input
+          ref={inputRef}
+          id={inputId}
+          className={cx("dp-input", classNames?.input)}
+          value={picker.inputValue("start")}
+          placeholder={placeholder ?? inputPlaceholder(locale)}
+          disabled={disabled}
+          readOnly={readOnly || !allowInput}
+          required={required}
+          autoComplete="off"
+          spellCheck={false}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          onChange={(event) => picker.onInputChange("start", event.target.value)}
+          onBlur={() => picker.onInputBlur("start")}
+          onKeyDown={onInputKeyDown}
+          onClick={allowInput ? undefined : () => !disabled && picker.setOpen(true)}
+        />
+
+        <span className="dp-actions">
+          {clearable && selected && !disabled && !readOnly && (
+            <button
+              type="button"
+              tabIndex={-1}
+              className="dp-icon-button"
+              aria-label={text.clear}
+              onClick={picker.clear}
+            >
+              <XIcon width={14} height={14} />
+            </button>
+          )}
+          <button
+            ref={triggerRef}
+            type="button"
+            className="dp-icon-button dp-trigger"
+            aria-label={text.openCalendar}
+            aria-haspopup="dialog"
+            aria-expanded={picker.open}
+            aria-controls={picker.open ? popoverId : undefined}
+            disabled={disabled}
+            onPointerDown={picker.onTriggerPointerDown}
+            onClick={picker.onTriggerClick}
+          >
+            <CalendarIcon />
+          </button>
+        </span>
+      </div>
+
+      {name && <input type="hidden" name={name} value={selected ? toISODate(selected) : ""} />}
+      {description && (
+        <span id={`${id}-description`} className="dp-description">
+          {description}
+        </span>
+      )}
+      {message && (
+        <span id={`${id}-error`} className="dp-error" role="alert">
+          {message}
+        </span>
+      )}
+
+      {picker.anchor && (
+        <DatePickerPopover
+          anchor={picker.anchor}
+          onClose={picker.onPopoverClose}
+          label={text.calendarLabel}
+          id={popoverId}
+          autoFocus={picker.gridFocus}
+          className={classNames?.popover}
+        >
+          <CalendarPanel
+            picker={picker}
+            text={text}
+            locale={locale}
+            showWeekNumbers={showWeekNumbers}
+            showToday={showToday}
+            clearable={clearable}
+            hasValue={selected !== null}
+            classNames={classNames}
+          />
+        </DatePickerPopover>
+      )}
+
+      <span className="dp-sr-only" role="status">
+        {selected ? text.selectedDate(picker.formatValue(selected)) : ""}
+      </span>
+    </div>
+  );
+}