gbs-add-block 1.2.13 → 1.2.14

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

@@ -0,0 +1,296 @@
+/*
+ * Input and OtpInput styles.
+ *
+ * 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 {
+  .in-root {
+    --in-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
+    --in-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --in-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --in-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --in-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
+    --in-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
+    --in-readonly-bg: light-dark(#fafafa, #0e0e12);
+    --in-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --in-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --in-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --in-radius: var(--dg-radius, 8px);
+    --in-font-size: var(--dg-font-size, 13px);
+    --in-height: 36px;
+    --in-px: 10px;
+    --in-cell: 42px;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    min-width: 0;
+    font-size: var(--in-font-size);
+    line-height: 1.4;
+    color: var(--in-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .in-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .in-root {
+    color-scheme: light;
+  }
+
+  :where(.in-root) *,
+  :where(.in-root) *::before,
+  :where(.in-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .in-root[data-size="sm"] {
+    --in-height: 30px;
+    --in-font-size: 12px;
+    --in-px: 8px;
+    --in-cell: 34px;
+  }
+  .in-root[data-size="lg"] {
+    --in-height: 44px;
+    --in-font-size: 14px;
+    --in-px: 12px;
+    --in-cell: 50px;
+  }
+
+  .in-label {
+    font-weight: 500;
+  }
+  .in-label[data-required]::after {
+    content: " *";
+    color: var(--in-danger);
+  }
+  .in-footer {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+  }
+  .in-description {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--in-muted);
+    font-size: 0.92em;
+  }
+  .in-count {
+    flex: none;
+    margin-inline-start: auto;
+    color: var(--in-muted);
+    font-size: 0.92em;
+    font-variant-numeric: tabular-nums;
+  }
+  .in-count[data-over] {
+    color: var(--in-danger);
+  }
+  .in-error {
+    color: var(--in-danger);
+    font-size: 0.92em;
+  }
+
+  /* --------------------------------------------------------------- input */
+
+  .in-control {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: var(--in-height);
+    padding: 0 calc(var(--in-px) - 4px) 0 var(--in-px);
+    border: 1px solid var(--in-border);
+    border-radius: var(--in-radius);
+    background: var(--in-input-bg);
+    cursor: text;
+  }
+  .in-control:hover:not([data-disabled]) {
+    border-color: color-mix(in oklab, var(--in-border), var(--in-fg) 25%);
+  }
+  .in-control:focus-within {
+    outline: 2px solid var(--in-focus);
+    outline-offset: -1px;
+  }
+  .in-control[data-invalid] {
+    border-color: var(--in-danger);
+    outline-color: var(--in-danger);
+  }
+  .in-control[data-readonly] {
+    background: var(--in-readonly-bg);
+  }
+  .in-control[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .in-input {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+  .in-input::placeholder {
+    color: var(--in-muted);
+  }
+  .in-input:disabled {
+    cursor: not-allowed;
+  }
+  /* Keep browser autofill from painting its own background over the field. */
+  .in-input:autofill {
+    box-shadow: 0 0 0 100px var(--in-input-bg) inset;
+    -webkit-text-fill-color: var(--in-fg);
+  }
+
+  .in-adornment {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--in-muted);
+    white-space: nowrap;
+  }
+  .in-adornment[data-side="trailing"] {
+    padding-inline-end: 4px;
+  }
+
+  .in-icon-button {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--in-muted);
+    cursor: pointer;
+  }
+  .in-icon-button:hover:not(:disabled) {
+    background: var(--in-hover);
+    color: var(--in-fg);
+  }
+  .in-icon-button:focus-visible {
+    outline: 2px solid var(--in-focus);
+    outline-offset: 1px;
+  }
+
+  /* ----------------------------------------------------------------- otp */
+
+  .in-otp {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: max-content;
+    max-width: 100%;
+  }
+  /*
+   * The real input covers the cells but draws nothing: the cells show its value,
+   * and it still receives typing, paste, autofill and assistive technology.
+   */
+  .in-otp-input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    font-size: 16px; /* 16px keeps iOS from zooming in on focus */
+    letter-spacing: 0;
+    cursor: text;
+  }
+  .in-otp-input::selection {
+    background: transparent;
+  }
+  .in-otp-input:autofill {
+    box-shadow: none;
+    -webkit-text-fill-color: transparent;
+  }
+  .in-otp-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .in-otp-cell {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--in-cell);
+    height: calc(var(--in-cell) * 1.15);
+    border: 1px solid var(--in-border);
+    border-radius: var(--in-radius);
+    background: var(--in-input-bg);
+    font-size: 1.35em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    transition: border-color 120ms ease;
+  }
+  .in-otp-cell[data-filled] {
+    border-color: color-mix(in oklab, var(--in-border), var(--in-fg) 30%);
+  }
+  .in-otp-cell[data-active] {
+    outline: 2px solid var(--in-focus);
+    outline-offset: -1px;
+  }
+  .in-otp[data-invalid] .in-otp-cell {
+    border-color: var(--in-danger);
+  }
+  .in-otp[data-invalid] .in-otp-cell[data-active] {
+    outline-color: var(--in-danger);
+  }
+  .in-otp[data-disabled] .in-otp-cell {
+    opacity: 0.55;
+  }
+
+  .in-otp-caret {
+    width: 1.5px;
+    height: 1.1em;
+    background: currentColor;
+    animation: in-caret 1s steps(2, jump-none) infinite;
+  }
+  @keyframes in-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  .in-otp-separator {
+    flex: none;
+    width: 10px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--in-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .in-otp-caret {
+      animation: none;
+    }
+    .in-otp-cell {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .in-otp-cell[data-active],
+    .in-control:focus-within {
+      outline-color: Highlight;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+# Modal
+
+A modal and drawer for React 19 on the native `<dialog>` element, styled to match
+the rest of the library. No runtime dependencies besides React.
+
+The browser provides the top layer, the inert page behind, the focus trap and
+focus return. The component adds controlled state, dismiss rules, an
+`onBeforeClose` guard, sizes, drawers and enter/exit animation.
+
+## Setup
+
+```ts
+import { Modal } from "@/components/modal";
+import "@/components/modal/styles.css";
+```
+
+## Usage
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<button onClick={() => setOpen(true)}>Edit</button>
+<Modal
+  open={open}
+  onOpenChange={setOpen}
+  title="Edit profile"
+  footer={({ close }) => <button onClick={close}>Done</button>}
+>
+  …
+</Modal>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` / `defaultOpen` / `onOpenChange` | `boolean` / `boolean` / `(open, reason?) => void` | — / `false` | Controlled or uncontrolled state. `reason`: `escape`, `backdrop`, `close-button`, `api`. |
+| `title`, `description`, `aria-label` | `ReactNode` / `string` | — | Header text; `aria-label` names an untitled modal. |
+| `children`, `footer` | `ReactNode \| ({ close }) => ReactNode` | — | Body and footer. |
+| `size` | `sm` \| `md` \| `lg` \| `xl` \| `full` | `md` | 400 / 520 / 720 / 960 px or the whole screen. |
+| `placement` | `center` \| `top` \| `left` \| `right` \| `bottom` | `center` | `left`, `right` and `bottom` are drawers. |
+| `closeButton`, `closeOnEscape`, `closeOnBackdrop` | `boolean` | `true` | Dismiss options. |
+| `onBeforeClose` | `(reason) => boolean \| Promise<boolean>` | — | Return `false` to stay open. |
+| `initialFocus` | `RefObject<HTMLElement>` | — | Otherwise `[data-autofocus]`, then the first focusable element. |
+| `keepMounted` | `boolean` | `false` | Keep the content's state while closed. |
+| `className`, `classNames`, `style`, `localeText`, `id`, `ref` | — | — | Slots: `root`, `header`, `title`, `description`, `close`, `body`, `footer`. `ref`: `open()`, `close()`, `getElement()`. |
+
+## Known limits
+
+- Exit animations need `transition-behavior: allow-discrete` (Chrome 117+, Safari 18+); elsewhere the modal closes instantly.
+- Page scrolling is locked with `:root:has(.md-root[open])`, which can shift content by the scrollbar's width.

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

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { canDismiss, confirmClose, isOutside } from "../core/dismiss";
+
+describe("dismiss rules", () => {
+  it("allows Escape and backdrop by default, and lets each be turned off", () => {
+    expect(canDismiss("escape")).toBe(true);
+    expect(canDismiss("backdrop")).toBe(true);
+    expect(canDismiss("escape", { closeOnEscape: false })).toBe(false);
+    expect(canDismiss("backdrop", { closeOnBackdrop: false })).toBe(false);
+  });
+
+  it("always allows the close button and code", () => {
+    const locked = { closeOnEscape: false, closeOnBackdrop: false };
+    expect(canDismiss("close-button", locked)).toBe(true);
+    expect(canDismiss("api", locked)).toBe(true);
+  });
+});
+
+describe("backdrop hit test", () => {
+  const rect = { left: 100, top: 50, right: 500, bottom: 350 };
+
+  it("treats points outside the box as the backdrop", () => {
+    expect(isOutside(rect, 50, 200)).toBe(true);
+    expect(isOutside(rect, 300, 400)).toBe(true);
+    expect(isOutside(rect, 300, 200)).toBe(false);
+  });
+
+  it("counts the edges as inside", () => {
+    expect(isOutside(rect, 100, 50)).toBe(false);
+    expect(isOutside(rect, 500, 350)).toBe(false);
+  });
+});
+
+describe("close guard", () => {
+  it("closes without a guard", async () => {
+    expect(await confirmClose(undefined, "escape")).toBe(true);
+  });
+
+  it("stays open only on an explicit false", async () => {
+    expect(await confirmClose(() => true, "escape")).toBe(true);
+    expect(await confirmClose(() => false, "escape")).toBe(false);
+    expect(await confirmClose(() => Promise.resolve(false), "backdrop")).toBe(false);
+    expect(await confirmClose(() => undefined as unknown as boolean, "api")).toBe(true);
+  });
+
+  it("passes the reason and stays open when the guard throws", async () => {
+    const reasons: string[] = [];
+    await confirmClose((reason) => {
+      reasons.push(reason);
+      return true;
+    }, "close-button");
+    expect(reasons).toEqual(["close-button"]);
+    expect(await confirmClose(() => Promise.reject(new Error("save failed")), "api")).toBe(false);
+  });
+});

package/source/beta-components/modal/core/dismiss.ts

@@ -0,0 +1,29 @@
+import type { CloseGuard, CloseReason, DismissOptions, Rect } from "./types";
+
+/** Whether a close request is allowed before asking `onBeforeClose`. Code and the close button always are. */
+export function canDismiss(reason: CloseReason, options: DismissOptions = {}): boolean {
+  if (reason === "escape") return options.closeOnEscape ?? true;
+  if (reason === "backdrop") return options.closeOnBackdrop ?? true;
+  return true;
+}
+
+/**
+ * A native `<dialog>` reports clicks on its backdrop as clicks on itself, so a
+ * click counts as "on the backdrop" when it lands outside the dialog's box.
+ */
+export function isOutside(rect: Rect, x: number, y: number): boolean {
+  return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+}
+
+/**
+ * Runs `onBeforeClose`. Only an explicit `false` (or a promise of it) keeps the
+ * modal open; a guard that throws keeps it open too, so unsaved work isn't lost.
+ */
+export async function confirmClose(guard: CloseGuard | undefined, reason: CloseReason): Promise<boolean> {
+  if (!guard) return true;
+  try {
+    return (await guard(reason)) !== false;
+  } catch {
+    return false;
+  }
+}

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

@@ -0,0 +1,3 @@
+// Framework-free: the dismiss rules the Modal uses, so they can be tested and reused.
+export { canDismiss, confirmClose, isOutside } from "./dismiss";
+export type * from "./types";

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

@@ -0,0 +1,27 @@
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+/** `center` and `top` are dialogs; `left`, `right` and `bottom` slide in as drawers. */
+export type ModalPlacement = "center" | "top" | "left" | "right" | "bottom";
+
+/** What asked the modal to close. */
+export type CloseReason = "escape" | "backdrop" | "close-button" | "api";
+
+export interface DismissOptions {
+  /** Default true. */
+  closeOnEscape?: boolean;
+  /** Default true. */
+  closeOnBackdrop?: boolean;
+}
+
+export interface Rect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export type CloseGuard = (reason: CloseReason) => boolean | Promise<boolean>;
+
+export interface ModalLocaleText {
+  close: string;
+}

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

@@ -0,0 +1,5 @@
+export { Modal } from "./react/Modal";
+export type { ModalProps } from "./react/Modal";
+export { defaultModalText } from "./react/locale";
+export type { ModalHandle, ModalRenderProps, ModalSlot } from "./react/props";
+export * from "./core";