gbs-add-block 1.2.13 → 1.2.14

package/source/beta-components/dialog/react/DialogHost.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useSyncExternalStore, type CSSProperties } from "react";
+import { dialogStore } from "../core/dialog";
+import type { DialogStore } from "../core/store";
+import type { DialogLocaleText, DialogRequest } from "../core/types";
+import { Dialog } from "./Dialog";
+import type { DialogSlot } from "./props";
+
+export interface DialogHostProps {
+  /** A store from `createDialogStore()`. Defaults to the one behind `dialog`. */
+  store?: DialogStore;
+  /** Applied to every dialog this host shows. */
+  className?: string;
+  classNames?: Partial<Record<DialogSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<DialogLocaleText>;
+}
+
+/** Mount once. Shows the dialogs requested through `dialog.alert/confirm/prompt`, one at a time. */
+export function DialogHost({ store = dialogStore, ...shared }: DialogHostProps) {
+  const { queue } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  const current = queue[0];
+
+  // Keep the last dialog rendered while it animates out.
+  const [shown, setShown] = useState<DialogRequest | undefined>(current);
+  if (current && current !== shown) setShown(current);
+
+  if (!shown) return null;
+
+  return (
+    <Dialog
+      key={shown.id}
+      {...shown.options}
+      {...shared}
+      open={shown === current}
+      kind={shown.kind}
+      onConfirm={shown.options.onConfirm}
+      onClose={(action, value) => store.resolve(shown.id, action === "confirm", value)}
+      onExited={() => {
+        if (store.getSnapshot().queue.length === 0) setShown(undefined);
+      }}
+    />
+  );
+}

package/source/beta-components/dialog/react/icons.tsx

@@ -0,0 +1,51 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function Svg(props: IconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    />
+  );
+}
+
+export const InfoIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 11v5M12 7.5h.01" />
+  </Svg>
+);
+export const SuccessIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="m8 12.5 2.5 2.5L16 9.5" />
+  </Svg>
+);
+export const WarningIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <path d="M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+    <path d="M12 9v4M12 17h.01" />
+  </Svg>
+);
+export const DangerIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7.5v5.5M12 16.5h.01" />
+  </Svg>
+);
+export const SpinnerIcon = (p: IconProps) => (
+  <Svg width={14} height={14} {...p} className="dl-spinner">
+    <path d="M12 3a9 9 0 1 0 9 9" />
+  </Svg>
+);

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

@@ -0,0 +1,8 @@
+import type { DialogLocaleText } from "../core/types";
+
+export const defaultDialogText: DialogLocaleText = {
+  ok: "OK",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  required: "Please fill in this field",
+};

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

@@ -0,0 +1,13 @@
+export type DialogSlot =
+  | "root"
+  | "body"
+  | "icon"
+  | "title"
+  | "description"
+  | "input"
+  | "actions"
+  | "confirm"
+  | "cancel";
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");

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

@@ -0,0 +1,278 @@
+/*
+ * Dialog styles (alert, confirm and prompt).
+ *
+ * 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 {
+  .dl-root {
+    --dl-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
+    --dl-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --dl-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --dl-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --dl-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
+    --dl-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
+    --dl-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --dl-accent-fg: var(--dg-accent-fg, light-dark(#ffffff, #0b1220));
+    --dl-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --dl-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --dl-danger-fg: light-dark(#ffffff, #1c0606);
+    --dl-success: light-dark(#16a34a, #4ade80);
+    --dl-warning: light-dark(#d97706, #fbbf24);
+    --dl-info: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --dl-shadow: 0 24px 64px -16px light-dark(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.8));
+    --dl-backdrop: light-dark(rgb(9 9 11 / 0.45), rgb(0 0 0 / 0.65));
+    --dl-radius: var(--dg-radius, 12px);
+    --dl-font-size: var(--dg-font-size, 13px);
+    --dl-width: 420px;
+    --dl-intent: transparent;
+    --dl-duration: 200ms;
+
+    color-scheme: inherit;
+    box-sizing: border-box;
+    width: min(var(--dl-width), 100vw - 32px);
+    max-width: none;
+    max-height: calc(100dvh - 32px);
+    margin: auto;
+    padding: 0;
+    overflow: auto;
+    border: 1px solid var(--dl-border);
+    border-radius: var(--dl-radius);
+    background: var(--dl-bg);
+    color: var(--dl-fg);
+    box-shadow: var(--dl-shadow);
+    font-size: var(--dl-font-size);
+    line-height: 1.5;
+    opacity: 0;
+    scale: 0.96;
+    transition:
+      opacity var(--dl-duration) ease,
+      scale var(--dl-duration) ease,
+      overlay var(--dl-duration) allow-discrete,
+      display var(--dl-duration) allow-discrete;
+  }
+  .dl-root[open] {
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .dl-root[open] {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
+
+  .dl-root::backdrop {
+    background: var(--dl-backdrop, rgb(9 9 11 / 0.45));
+    opacity: 0;
+    transition:
+      opacity var(--dl-duration) ease,
+      overlay var(--dl-duration) allow-discrete,
+      display var(--dl-duration) allow-discrete;
+  }
+  .dl-root[open]::backdrop {
+    opacity: 1;
+  }
+  @starting-style {
+    .dl-root[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  :where(.dark, [data-theme="dark"]) .dl-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .dl-root {
+    color-scheme: light;
+  }
+
+  :where(.dl-root) *,
+  :where(.dl-root) *::before,
+  :where(.dl-root) *::after {
+    box-sizing: border-box;
+  }
+
+  :root:has(.dl-root[open]) {
+    overflow: hidden;
+  }
+
+  .dl-root[data-size="md"] {
+    --dl-width: 540px;
+  }
+  .dl-root[data-intent="info"] {
+    --dl-intent: var(--dl-info);
+  }
+  .dl-root[data-intent="success"] {
+    --dl-intent: var(--dl-success);
+  }
+  .dl-root[data-intent="warning"] {
+    --dl-intent: var(--dl-warning);
+  }
+  .dl-root[data-intent="danger"] {
+    --dl-intent: var(--dl-danger);
+  }
+
+  /* ------------------------------------------------------------ content */
+
+  .dl-body {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px 20px 16px;
+  }
+  .dl-icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: color-mix(in oklab, var(--dl-intent), transparent 86%);
+    color: var(--dl-intent);
+  }
+  .dl-text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+  .dl-title {
+    margin: 0;
+    font-size: 1.15em;
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+  .dl-description {
+    color: var(--dl-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .dl-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 6px;
+  }
+  .dl-label {
+    font-weight: 500;
+  }
+  .dl-input {
+    width: 100%;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid var(--dl-border);
+    border-radius: 8px;
+    background: var(--dl-input-bg);
+    color: inherit;
+    font: inherit;
+  }
+  .dl-input:focus-visible {
+    outline: 2px solid var(--dl-focus);
+    outline-offset: -1px;
+  }
+  .dl-input[aria-invalid="true"] {
+    border-color: var(--dl-danger);
+    outline-color: var(--dl-danger);
+  }
+  .dl-error {
+    margin: 0;
+    color: var(--dl-danger);
+    font-size: 0.92em;
+  }
+
+  /* ------------------------------------------------------------ actions */
+
+  .dl-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 20px;
+    border-top: 1px solid var(--dl-border);
+    background: var(--dg-header-bg, light-dark(#fafafa, #111114));
+  }
+  .dl-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 80px;
+    height: 34px;
+    padding: 0 14px;
+    border: 1px solid var(--dl-border);
+    border-radius: 8px;
+    background: var(--dl-bg);
+    color: inherit;
+    font: inherit;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .dl-button:hover:not([aria-disabled="true"]) {
+    background: var(--dl-hover);
+  }
+  .dl-button[data-variant="primary"] {
+    border-color: var(--dl-accent);
+    background: var(--dl-accent);
+    color: var(--dl-accent-fg);
+  }
+  .dl-button[data-variant="danger"] {
+    border-color: var(--dl-danger);
+    background: var(--dl-danger);
+    color: var(--dl-danger-fg);
+  }
+  .dl-button[data-variant="primary"]:hover:not([aria-disabled="true"]) {
+    background: color-mix(in oklab, var(--dl-accent), var(--dl-fg) 12%);
+  }
+  .dl-button[data-variant="danger"]:hover:not([aria-disabled="true"]) {
+    background: color-mix(in oklab, var(--dl-danger), var(--dl-fg) 12%);
+  }
+  .dl-button:focus-visible {
+    outline: 2px solid var(--dl-focus);
+    outline-offset: 2px;
+  }
+  .dl-button[aria-disabled="true"] {
+    opacity: 0.65;
+    cursor: progress;
+  }
+
+  .dl-spinner {
+    animation: dl-spin 0.7s linear infinite;
+  }
+  @keyframes dl-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .dl-actions {
+      flex-direction: column-reverse;
+    }
+    .dl-button {
+      width: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dl-root,
+    .dl-root::backdrop {
+      transition-duration: 0s;
+    }
+    .dl-spinner {
+      animation-duration: 2s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .dl-root {
+      border: 1px solid CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+# Input and OtpInput
+
+Text fields for React 19, styled to match the rest of the library. No runtime
+dependencies besides React.
+
+- **`<Input>`** — label, hint, error, leading/trailing adornments, clear button,
+  password reveal and a character counter. Every other prop goes to the `<input>`.
+- **`<OtpInput>`** — one-time codes. A single real `<input>` drawn as cells, so SMS
+  autofill (`autocomplete="one-time-code"`), paste and screen readers work as for
+  one field.
+
+## Setup
+
+```ts
+import { Input, OtpInput } from "@/components/input";
+import "@/components/input/styles.css";
+```
+
+## Usage
+
+```tsx
+<Input label="Email" type="email" value={email} onValueChange={setEmail} clearable />
+<Input label="Password" type="password" name="password" required />
+<OtpInput label="Code" groups={[3, 3]} onComplete={verify} />
+```
+
+## Props
+
+`Input`: all `<input>` attributes plus `value`, `defaultValue`, `onValueChange`,
+`label`, `description`, `error`, `size` (`sm` `md` `lg`), `leading`, `trailing`,
+`clearable`, `revealPassword` (default `true`), `showCount`, `classNames`
+(`root` `label` `control` `input` `description` `error` `count`), `localeText`,
+and `ref` (the `<input>`).
+
+`OtpInput`: `length` (6), `mode` (`numeric` `alphanumeric` `alphabetic`),
+`uppercase`, `value`, `defaultValue`, `onValueChange`, `onComplete`, `groups`,
+`mask`, `label`, `description`, `error`, `size`, `name`, `required`, `disabled`,
+`classNames` (`root` `label` `cells` `cell` `separator` `description` `error`),
+`localeText`, and `ref` (the `<input>`).
+
+## Headless use
+
+`sanitizeOtp`, `otpPattern`, `otpInputMode`, `separatorsAfter`, `activeCell`,
+`cellAt` and `countCharacters` are exported from the framework-free `core`.

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

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { countCharacters } from "../core/count";
+import {
+  activeCell,
+  cellAt,
+  otpInputMode,
+  otpPattern,
+  sanitizeOtp,
+  separatorsAfter,
+} from "../core/otp";
+
+describe("character count", () => {
+  it("counts what a person sees, not UTF-16 units", () => {
+    expect(countCharacters("")).toBe(0);
+    expect(countCharacters("hello")).toBe(5);
+    expect("👍🏽".length).toBe(4);
+    expect(countCharacters("👍🏽")).toBe(1);
+    expect(countCharacters("é")).toBe(1);
+    expect(countCharacters("👨‍👩‍👧 ok")).toBe(4);
+  });
+});
+
+describe("otp sanitizing", () => {
+  it("keeps digits only, up to the length", () => {
+    expect(sanitizeOtp("12a3", 6)).toBe("123");
+    expect(sanitizeOtp("Your code: 123-456", 6)).toBe("123456");
+    expect(sanitizeOtp("1234567890", 6)).toBe("123456");
+  });
+
+  it("supports letters, with optional uppercasing", () => {
+    expect(sanitizeOtp("ab-12 cd", 6, "alphanumeric")).toBe("ab12cd");
+    expect(sanitizeOtp("ab-12 cd", 6, "alphanumeric", true)).toBe("AB12CD");
+    expect(sanitizeOtp("a1b2c3", 6, "alphabetic")).toBe("abc");
+    expect(sanitizeOtp("é1", 6, "alphanumeric")).toBe("1");
+  });
+
+  it("describes the field for keyboards and native validation", () => {
+    expect(otpInputMode("numeric")).toBe("numeric");
+    expect(otpInputMode("alphanumeric")).toBe("text");
+    expect(otpPattern("numeric", 6)).toBe("\\d{6}");
+    expect(new RegExp(`^${otpPattern("alphanumeric", 4)}$`).test("aZ09")).toBe(true);
+    expect(new RegExp(`^${otpPattern("alphabetic", 4)}$`).test("ab1c")).toBe(false);
+  });
+});
+
+describe("otp layout", () => {
+  it("places separators between groups", () => {
+    expect([...separatorsAfter([3, 3], 6)]).toEqual([2]);
+    expect([...separatorsAfter([2, 2, 2], 6)]).toEqual([1, 3]);
+    expect([...separatorsAfter(undefined, 6)]).toEqual([]);
+    expect([...separatorsAfter([6], 6)]).toEqual([]);
+  });
+
+  it("puts the caret where the next character goes, or on the last cell when full", () => {
+    expect(activeCell(0, 6, 0)).toBe(0);
+    expect(activeCell(3, 6, 3)).toBe(3);
+    expect(activeCell(3, 6, 1)).toBe(1);
+    expect(activeCell(3, 6, 5)).toBe(3);
+    expect(activeCell(6, 6, 6)).toBe(5);
+    expect(activeCell(6, 6, 2)).toBe(2);
+  });
+
+  it("finds the cell under the pointer", () => {
+    const cells = [
+      { left: 0, right: 40 },
+      { left: 48, right: 88 },
+      { left: 96, right: 136 },
+    ];
+    expect(cellAt(cells, 10)).toBe(0);
+    expect(cellAt(cells, 44)).toBe(1);
+    expect(cellAt(cells, 120)).toBe(2);
+    expect(cellAt(cells, 500)).toBe(2);
+    expect(cellAt([], 10)).toBe(0);
+  });
+});

package/source/beta-components/input/core/count.ts

@@ -0,0 +1,14 @@
+let segmenter: Intl.Segmenter | null | undefined;
+
+/**
+ * Characters as a person counts them. `"👍🏽".length` is 4 and `"é"` can be 2,
+ * but each is one character here. Falls back to code points where
+ * `Intl.Segmenter` is missing.
+ */
+export function countCharacters(value: string): number {
+  if (!value) return 0;
+  if (segmenter === undefined) {
+    segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter() : null;
+  }
+  return segmenter ? Array.from(segmenter.segment(value)).length : Array.from(value).length;
+}

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

@@ -0,0 +1,11 @@
+// Framework-free: character counting and the OTP rules the components use.
+export { countCharacters } from "./count";
+export {
+  activeCell,
+  cellAt,
+  otpInputMode,
+  otpPattern,
+  sanitizeOtp,
+  separatorsAfter,
+} from "./otp";
+export type * from "./types";

package/source/beta-components/input/core/otp.ts

@@ -0,0 +1,64 @@
+import type { OtpMode } from "./types";
+
+const ALLOWED: Record<OtpMode, RegExp> = {
+  numeric: /^\d$/,
+  alphanumeric: /^[a-z0-9]$/i,
+  alphabetic: /^[a-z]$/i,
+};
+
+/**
+ * Keeps the characters a code may contain, up to `length`. Pasting
+ * `"Your code: 123-456"` into a numeric field gives `"123456"`.
+ */
+export function sanitizeOtp(
+  input: string,
+  length: number,
+  mode: OtpMode = "numeric",
+  uppercase = false,
+): string {
+  let result = "";
+  for (const char of input) {
+    if (result.length >= length) break;
+    if (ALLOWED[mode].test(char)) result += uppercase ? char.toUpperCase() : char;
+  }
+  return result;
+}
+
+/** Numeric codes get the phone's number pad. */
+export const otpInputMode = (mode: OtpMode): "numeric" | "text" =>
+  mode === "numeric" ? "numeric" : "text";
+
+/** A `pattern` attribute, so native form validation knows a complete code. */
+export function otpPattern(mode: OtpMode, length: number): string {
+  const characters =
+    mode === "numeric" ? "\\d" : mode === "alphabetic" ? "[A-Za-z]" : "[A-Za-z0-9]";
+  return `${characters}{${length}}`;
+}
+
+/** Cell indexes followed by a separator, from group sizes such as `[3, 3]`. */
+export function separatorsAfter(groups: readonly number[] | undefined, length: number): Set<number> {
+  const result = new Set<number>();
+  if (!groups) return result;
+  let position = 0;
+  for (const size of groups.slice(0, -1)) {
+    position += size;
+    if (position > 0 && position < length) result.add(position - 1);
+  }
+  return result;
+}
+
+/**
+ * The cell showing the caret: where the next character goes, or, once the code
+ * is full, the character that typing will replace.
+ */
+export function activeCell(valueLength: number, length: number, caret: number): number {
+  return Math.max(0, Math.min(caret, valueLength, length - 1));
+}
+
+/** The cell under a horizontal position, given each cell's left and right edges. */
+export function cellAt(bounds: readonly { left: number; right: number }[], x: number): number {
+  for (let index = 0; index < bounds.length; index++) {
+    if (x <= bounds[index].right) return index;
+  }
+  return Math.max(0, bounds.length - 1);
+}

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

@@ -0,0 +1,14 @@
+export type FieldSize = "sm" | "md" | "lg";
+
+/** Which characters an OTP cell accepts. */
+export type OtpMode = "numeric" | "alphanumeric" | "alphabetic";
+
+export interface InputLocaleText {
+  clear: string;
+  showPassword: string;
+  hidePassword: string;
+  /** `max` is set when the field has a `maxLength`. */
+  characterCount(count: string, max?: string): string;
+  /** Accessible name of the code field when no `label` is given. */
+  otpLabel: string;
+}

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

@@ -0,0 +1,8 @@
+export { Input } from "./react/Input";
+export type { InputProps } from "./react/Input";
+export { OtpInput } from "./react/OtpInput";
+export type { OtpInputProps } from "./react/OtpInput";
+export { defaultInputText } from "./react/locale";
+export { setNativeValue } from "./react/dom";
+export type { InputSlot, OtpSlot } from "./react/props";
+export * from "./core";