gbs-add-block 1.2.18 → 1.3.0

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

@@ -0,0 +1,208 @@
+/*
+ * Accordion styles.
+ *
+ * Each section is a native <details>, so the marker has to be taken off (two
+ * ways: `list-item` display in Firefox, the WebKit pseudo-element elsewhere)
+ * before a chevron of our own goes on. 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 {
+  .ac-root {
+    --ac-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --ac-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --ac-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --ac-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --ac-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --ac-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --ac-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --ac-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+    --ac-px: 14px;
+    --ac-py: 12px;
+    --ac-duration: 180ms;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    font-size: var(--ac-font-size);
+    line-height: 1.5;
+    color: var(--ac-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .ac-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .ac-root {
+    color-scheme: light;
+  }
+
+  :where(.ac-root) *,
+  :where(.ac-root) *::before,
+  :where(.ac-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .ac-root[data-size="sm"] {
+    --ac-px: 10px;
+    --ac-py: 8px;
+    --ac-font-size: 12px;
+  }
+  .ac-root[data-size="lg"] {
+    --ac-px: 18px;
+    --ac-py: 16px;
+    --ac-font-size: 14px;
+  }
+
+  /* ---------------------------------------------------------------- item */
+
+  .ac-item {
+    min-width: 0;
+    border: 1px solid var(--ac-border);
+    border-radius: var(--ac-radius);
+    background: var(--ac-bg);
+  }
+
+  /* Contained: one block with dividers instead of separate cards. */
+  .ac-root[data-variant="contained"] {
+    gap: 0;
+    border: 1px solid var(--ac-border);
+    border-radius: var(--ac-radius);
+    overflow: hidden;
+  }
+  .ac-root[data-variant="contained"] .ac-item {
+    border: 0;
+    border-block-end: 1px solid var(--ac-border);
+    border-radius: 0;
+  }
+  .ac-root[data-variant="contained"] .ac-item:last-child {
+    border-block-end: 0;
+  }
+
+  /* Plain: rules only, for a sidebar or a FAQ. */
+  .ac-root[data-variant="plain"] {
+    gap: 0;
+  }
+  .ac-root[data-variant="plain"] .ac-item {
+    border: 0;
+    border-block-end: 1px solid var(--ac-border);
+    border-radius: 0;
+    background: none;
+  }
+  .ac-root[data-variant="plain"] .ac-header {
+    padding-inline: 0;
+  }
+  .ac-root[data-variant="plain"] .ac-body {
+    padding-inline: 0;
+  }
+
+  /* -------------------------------------------------------------- header */
+
+  .ac-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: var(--ac-py) var(--ac-px);
+    border-radius: inherit;
+    cursor: pointer;
+    user-select: none;
+    /* Firefox draws the triangle through `display: list-item`. */
+    list-style: none;
+  }
+  .ac-header::-webkit-details-marker {
+    display: none;
+  }
+  .ac-header:hover {
+    background: var(--ac-hover);
+  }
+  .ac-header:focus-visible {
+    outline: 2px solid var(--ac-focus);
+    outline-offset: -2px;
+  }
+  .ac-item[data-disabled] .ac-header {
+    cursor: not-allowed;
+  }
+  .ac-item[data-disabled] .ac-title {
+    color: var(--ac-muted);
+  }
+
+  .ac-heading {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+  .ac-title {
+    font-weight: 600;
+  }
+  .ac-description {
+    color: var(--ac-muted);
+    font-weight: 400;
+  }
+  .ac-meta {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    color: var(--ac-muted);
+  }
+
+  .ac-icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--ac-muted);
+    transition: rotate var(--ac-duration) ease;
+  }
+  .ac-icon > svg {
+    width: 16px;
+    height: 16px;
+  }
+  .ac-item[open] > .ac-header .ac-icon {
+    rotate: 180deg;
+  }
+
+  /* ------------------------------------------------------------- content */
+
+  .ac-body {
+    padding: 0 var(--ac-px) var(--ac-py);
+  }
+
+  /*
+   * Opening animates where the browser can do it: `interpolate-size` lets a
+   * height of `auto` be interpolated, and `::details-content` is the box to
+   * animate. Browsers without either simply show and hide, which is the
+   * behaviour everything else falls back to anyway.
+   */
+  @supports (interpolate-size: allow-keywords) {
+    .ac-root {
+      interpolate-size: allow-keywords;
+    }
+    .ac-item::details-content {
+      height: 0;
+      overflow: hidden;
+      transition:
+        height var(--ac-duration) ease,
+        content-visibility var(--ac-duration) allow-discrete;
+    }
+    .ac-item[open]::details-content {
+      height: auto;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ac-root {
+      --ac-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ac-item {
+      border: 1px solid CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+# Alert
+
+A message that stays in the page: a trial ending, a read-only record, the
+summary above a form that failed validation. For React 19, styled to match the
+rest of the library. No runtime dependencies besides React.
+
+```ts
+import { Alert } from "@/components/alert";
+import "@/components/alert/styles.css";
+```
+
+```tsx
+<Alert variant="warning" title="Your trial ends in 3 days">
+  After that the workspace becomes read-only. <a href="/billing">Add a card</a> to keep it.
+</Alert>
+
+<Alert variant="danger" title="We could not save your changes" onDismiss={() => setShown(false)} />
+
+<Alert variant="success" size="sm">240 rows imported.</Alert>
+```
+
+**Props:** `variant` (`info` `success` `warning` `danger` `neutral`), `size`
+(`sm` `md`), `title`, `description` or `children`, `icon` (a node, or `false`),
+`actions`, `onDismiss`, `classNames` (`root` `icon` `content` `title`
+`description` `actions` `dismiss`), `localeText`, `ref`, and every `<div>`
+attribute.
+
+Which one to reach for:
+
+| | Interrupts | Lives | Use for |
+| --- | --- | --- | --- |
+| **Dialog** | Yes, blocks | Top layer | A decision that must happen now |
+| **Toast** | No, and leaves | A corner | Confirming what already happened |
+| **Alert** | No, and stays | In the layout | The state a page or section is in |
+
+`liveness(variant)` is exported from the framework-free `core`: problems get
+`role="alert"` and interrupt; everything else gets `role="status"` and waits its
+turn. An alert that was on the page from the start announces nothing either
+way, because a live region only speaks when its contents change.

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

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { liveness } from "../core/live";
+
+describe("liveness", () => {
+  it("interrupts for problems", () => {
+    // Someone whose card was declined needs to hear it now, not after the
+    // paragraph being read finishes.
+    expect(liveness("danger")).toEqual({ role: "alert", live: "assertive" });
+    expect(liveness("warning")).toEqual({ role: "alert", live: "assertive" });
+  });
+
+  it("waits its turn for everything else", () => {
+    for (const variant of ["info", "success", "neutral"] as const) {
+      expect(liveness(variant)).toEqual({ role: "status", live: "polite" });
+    }
+  });
+});

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

@@ -0,0 +1,2 @@
+export { liveness, type Liveness } from "./live";
+export type * from "./types";

package/source/beta-components/alert/core/live.ts

@@ -0,0 +1,25 @@
+import type { AlertVariant } from "./types";
+
+export interface Liveness {
+  /** `alert` interrupts whatever is being read; `status` waits its turn. */
+  role: "alert" | "status";
+  live: "assertive" | "polite";
+}
+
+/**
+ * How loudly an alert announces itself.
+ *
+ * A banner that appears after the page has loaded is news, and a screen reader
+ * has to be told whether it is worth interrupting for. Problems are:
+ * `role="alert"` cuts into whatever is being read, which is right for "your
+ * card was declined" and rude for "3 rows imported".
+ *
+ * A banner that was on the page from the start announces nothing either way —
+ * a live region only speaks when its contents change — so this only decides
+ * what happens when one appears or its text is replaced.
+ */
+export function liveness(variant: AlertVariant): Liveness {
+  return variant === "danger" || variant === "warning"
+    ? { role: "alert", live: "assertive" }
+    : { role: "status", live: "polite" };
+}

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

@@ -0,0 +1,7 @@
+export type AlertVariant = "info" | "success" | "warning" | "danger" | "neutral";
+
+export type AlertSize = "sm" | "md";
+
+export interface AlertLocaleText {
+  dismiss: string;
+}

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

@@ -0,0 +1,5 @@
+export { Alert } from "./react/Alert";
+export type { AlertProps } from "./react/Alert";
+export { defaultAlertText } from "./react/locale";
+export type { AlertSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/alert/react/Alert.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import {
+  useMemo,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { liveness } from "../core/live";
+import type { AlertLocaleText, AlertSize, AlertVariant } from "../core/types";
+import { VARIANT_ICONS, XIcon } from "./icons";
+import { defaultAlertText } from "./locale";
+import { cx, type AlertSlot } from "./props";
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "role"> {
+  /** Default `info`. */
+  variant?: AlertVariant;
+  /** Default `md`. `sm` drops the title to one line of text. */
+  size?: AlertSize;
+  title?: ReactNode;
+  /** The message. `children` works too, and is the better place for links. */
+  description?: ReactNode;
+  children?: ReactNode;
+  /** Replace the variant's glyph, or pass `false` for none. */
+  icon?: ReactNode | false;
+  /** Buttons under the message: "Try again", "Go to billing". */
+  actions?: ReactNode;
+  /** Show a close button. The alert does not hide itself; remove it in the handler. */
+  onDismiss?(): void;
+  className?: string;
+  classNames?: Partial<Record<AlertSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<AlertLocaleText>;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * A message that stays in the page: a trial ending, a read-only record, the
+ * summary above a form that failed validation.
+ *
+ * It is the third of three ways to say something, and the only one that is
+ * neither interrupting nor temporary. Use a **Dialog** when the message needs a
+ * decision before anything else can happen, a **Toast** to confirm something
+ * that has already happened, and an Alert for the state a page or section is
+ * in.
+ */
+export function Alert(props: AlertProps) {
+  const {
+    ref,
+    variant = "info",
+    size = "md",
+    title,
+    description,
+    children,
+    icon,
+    actions,
+    onDismiss,
+    className,
+    classNames,
+    style,
+    localeText,
+    ...rest
+  } = props;
+
+  const text = useMemo(() => ({ ...defaultAlertText, ...localeText }), [localeText]);
+  const { role, live } = liveness(variant);
+  const Glyph = VARIANT_ICONS[variant];
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      // Only what appears after the page has loaded is announced; a banner that
+      // was there from the start is read in its turn, like any other text.
+      role={role}
+      aria-live={live}
+      className={cx("al-root", classNames?.root, className)}
+      style={style}
+      data-variant={variant}
+      data-size={size}
+    >
+      {icon !== false && (
+        <span className={cx("al-icon", classNames?.icon)} aria-hidden="true">
+          {icon ?? <Glyph />}
+        </span>
+      )}
+
+      <div className={cx("al-content", classNames?.content)}>
+        {title && <p className={cx("al-title", classNames?.title)}>{title}</p>}
+        {(description || children) && (
+          <div className={cx("al-description", classNames?.description)}>
+            {description}
+            {children}
+          </div>
+        )}
+        {actions && <div className={cx("al-actions", classNames?.actions)}>{actions}</div>}
+      </div>
+
+      {onDismiss && (
+        <button
+          type="button"
+          className={cx("al-dismiss", classNames?.dismiss)}
+          aria-label={text.dismiss}
+          title={text.dismiss}
+          onClick={onDismiss}
+        >
+          <XIcon />
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import {
+  AlertCircleIcon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon,
+  XIcon as SharedX,
+  type IconProps,
+} from "../../shared/react/icons";
+import type { AlertVariant } from "../core/types";
+
+/** 14px, to sit in the corner without pulling the eye from the message. */
+export const XIcon = (p: IconProps) => <SharedX width={14} height={14} {...p} />;
+
+/** The glyph each variant carries, so colour is never the only signal. */
+export const VARIANT_ICONS: Record<AlertVariant, (props: IconProps) => React.JSX.Element> = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: AlertCircleIcon,
+  neutral: InfoIcon,
+};

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

@@ -0,0 +1,5 @@
+import type { AlertLocaleText } from "../core/types";
+
+export const defaultAlertText: AlertLocaleText = {
+  dismiss: "Dismiss",
+};

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

@@ -0,0 +1,11 @@
+export type AlertSlot =
+  | "root"
+  | "icon"
+  | "content"
+  | "title"
+  | "description"
+  | "actions"
+  | "dismiss";
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

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

@@ -0,0 +1,155 @@
+/*
+ * Alert styles.
+ *
+ * A banner that sits in the page, tinted by variant. 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 {
+  .al-root {
+    --al-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --al-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --al-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --al-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --al-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --al-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --al-info: var(--gbs-info, var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa))));
+    --al-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+    --al-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
+    --al-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --al-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --al-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+    --al-accent: var(--al-info);
+    --al-px: 14px;
+    --al-py: 12px;
+
+    color-scheme: inherit;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    min-width: 0;
+    padding: var(--al-py) var(--al-px);
+    /* The bar carries the variant at a glance; the tint alone is too faint to
+       read as a signal, and colour is never the only one — there is a glyph. */
+    border: 1px solid var(--al-border);
+    border-inline-start: 3px solid var(--al-accent);
+    border-radius: var(--al-radius);
+    background: color-mix(in oklab, var(--al-accent) 7%, var(--al-bg));
+    font-size: var(--al-font-size);
+    line-height: 1.5;
+    color: var(--al-fg);
+    text-wrap: pretty;
+  }
+
+  :where(.dark, [data-theme="dark"]) .al-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .al-root {
+    color-scheme: light;
+  }
+
+  :where(.al-root) *,
+  :where(.al-root) *::before,
+  :where(.al-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .al-root[data-variant="success"] {
+    --al-accent: var(--al-success);
+  }
+  .al-root[data-variant="warning"] {
+    --al-accent: var(--al-warning);
+  }
+  .al-root[data-variant="danger"] {
+    --al-accent: var(--al-danger);
+  }
+  .al-root[data-variant="neutral"] {
+    --al-accent: var(--al-muted);
+  }
+
+  .al-root[data-size="sm"] {
+    --al-px: 10px;
+    --al-py: 8px;
+    --al-font-size: 12px;
+    gap: 8px;
+  }
+
+  .al-icon {
+    display: inline-flex;
+    flex: none;
+    /* Optically centred on the first line of text rather than its box. */
+    margin-top: 1px;
+    color: var(--al-accent);
+  }
+  .al-icon > svg {
+    width: 16px;
+    height: 16px;
+  }
+  .al-root[data-size="sm"] .al-icon > svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .al-content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .al-title {
+    margin: 0;
+    font-weight: 600;
+  }
+  .al-description {
+    margin: 0;
+    /* Not muted: this is the message, not a hint about one. */
+    color: inherit;
+  }
+  .al-description a {
+    color: var(--al-accent);
+    text-underline-offset: 2px;
+  }
+  .al-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .al-dismiss {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin: -2px -4px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: var(--al-muted);
+    cursor: pointer;
+  }
+  .al-dismiss:hover {
+    background: var(--al-hover);
+    color: var(--al-fg);
+  }
+  .al-dismiss:focus-visible {
+    outline: 2px solid var(--al-focus);
+    outline-offset: 1px;
+  }
+
+  @media (forced-colors: active) {
+    .al-root {
+      border: 1px solid CanvasText;
+      border-inline-start-width: 3px;
+    }
+  }
+}