gbs-add-block 1.2.13 → 1.2.15

package/source/beta-components/tabs/react/Tabs.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import {
+  Activity,
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { nextTab, tabDomId } from "../core/navigation";
+import type { TabsActivation, TabsOrientation, TabsSize, TabsVariant } from "../core/types";
+import { TabsContext, useTabsContext } from "./context";
+
+const cx = (...names: (string | false | null | undefined)[]) => names.filter(Boolean).join(" ");
+
+/* ------------------------------------------------------------------- Tabs */
+
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+  /** Selected tab (controlled). */
+  value?: string;
+  /** Selected tab at first. Without either, the first enabled tab is selected. */
+  defaultValue?: string;
+  onValueChange?(value: string): void;
+  /** Default `horizontal`. */
+  orientation?: TabsOrientation;
+  /** Default `automatic`: arrow keys select as they move. */
+  activation?: TabsActivation;
+  /** Default `line`. */
+  variant?: TabsVariant;
+  /** Default `md`. */
+  size?: TabsSize;
+  /**
+   * Keep hidden panels mounted, preserving their state (form input, scroll) at
+   * lower rendering priority through React's `<Activity>`. Default false.
+   */
+  keepMounted?: boolean;
+  children?: ReactNode;
+}
+
+/** Tabs following the WAI-ARIA pattern. Compose with `TabList`, `Tab` and `TabPanel`. */
+export function Tabs(props: TabsProps) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    orientation = "horizontal",
+    activation = "automatic",
+    variant = "line",
+    size = "md",
+    keepMounted = false,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const id = useId();
+  const [internal, setInternal] = useState(defaultValue);
+  const value = valueProp ?? internal;
+
+  const select = useCallback(
+    (next: string) => {
+      if (valueProp === undefined) setInternal(next);
+      if (next !== value) onValueChange?.(next);
+    },
+    [valueProp, value, onValueChange],
+  );
+
+  const context = useMemo(
+    () => ({ id, value, select, orientation, activation, keepMounted }),
+    [id, value, select, orientation, activation, keepMounted],
+  );
+
+  return (
+    <TabsContext value={context}>
+      <div
+        {...rest}
+        className={cx("tb-root", className)}
+        data-orientation={orientation}
+        data-variant={variant}
+        data-size={size}
+      >
+        {children}
+      </div>
+    </TabsContext>
+  );
+}
+
+/* ---------------------------------------------------------------- TabList */
+
+export type TabListProps = HTMLAttributes<HTMLDivElement>;
+
+export function TabList(props: TabListProps) {
+  const { className, children, onKeyDown, ...rest } = props;
+  const context = useTabsContext();
+  const listRef = useRef<HTMLDivElement>(null);
+
+  /** Tabs belonging to this list, in document order (not nested tab lists). */
+  const getTabs = useCallback(() => {
+    const list = listRef.current;
+    if (!list) return [];
+    return Array.from(list.querySelectorAll<HTMLElement>('[role="tab"]')).filter(
+      (tab) => tab.closest('[role="tablist"]') === list,
+    );
+  }, []);
+
+  // Without a matching value, select the first enabled tab so the list stays reachable by Tab.
+  useLayoutEffect(() => {
+    const tabs = getTabs();
+    if (tabs.some((tab) => tab.dataset.value === context.value)) return;
+    const first = tabs.find((tab) => tab.getAttribute("aria-disabled") !== "true");
+    if (first?.dataset.value !== undefined) context.select(first.dataset.value);
+  }, [context, getTabs]);
+
+  // Slide the indicator under the selected tab, and follow size changes.
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const horizontal = context.orientation === "horizontal";
+    const place = () => {
+      const active = getTabs().find((tab) => tab.getAttribute("aria-selected") === "true");
+      if (!active) {
+        list.style.removeProperty("--tb-indicator-size");
+        return;
+      }
+      list.style.setProperty("--tb-indicator-start", `${horizontal ? active.offsetLeft : active.offsetTop}px`);
+      list.style.setProperty("--tb-indicator-size", `${horizontal ? active.offsetWidth : active.offsetHeight}px`);
+    };
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(list);
+    for (const tab of getTabs()) observer.observe(tab);
+    return () => observer.disconnect();
+  }, [context.value, context.orientation, getTabs]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const tabs = getTabs();
+    const current = tabs.indexOf(document.activeElement as HTMLElement);
+    if (current === -1) return;
+
+    if (context.activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      const value = tabs[current].dataset.value;
+      if (value !== undefined && tabs[current].getAttribute("aria-disabled") !== "true") context.select(value);
+      return;
+    }
+
+    const next = nextTab(
+      tabs.map((tab) => ({ disabled: tab.getAttribute("aria-disabled") === "true" })),
+      current,
+      event.key,
+      {
+        orientation: context.orientation,
+        rtl: getComputedStyle(event.currentTarget).direction === "rtl",
+      },
+    );
+    if (next === null) return;
+    event.preventDefault();
+    const target = tabs[next];
+    target.focus();
+    if (context.activation === "automatic" && target.dataset.value !== undefined) {
+      context.select(target.dataset.value);
+    }
+  };
+
+  return (
+    <div
+      {...rest}
+      ref={listRef}
+      role="tablist"
+      aria-orientation={context.orientation}
+      className={cx("tb-list", className)}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+      <span className="tb-indicator" aria-hidden="true" />
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------- Tab */
+
+export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type"> {
+  /** Identifies the tab and its panel. */
+  value: string;
+  icon?: ReactNode;
+  /** A small count or label after the text, e.g. unread items. */
+  badge?: ReactNode;
+}
+
+export function Tab(props: TabProps) {
+  const { value, icon, badge, disabled = false, className, children, onClick, ...rest } = props;
+  const context = useTabsContext();
+  const selected = context.value === value;
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      role="tab"
+      id={tabDomId(context.id, "tab", value)}
+      aria-controls={tabDomId(context.id, "panel", value)}
+      aria-selected={selected}
+      // aria-disabled keeps the tab discoverable; arrow keys skip it.
+      aria-disabled={disabled || undefined}
+      tabIndex={selected ? 0 : -1}
+      data-value={value}
+      className={cx("tb-tab", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!disabled && !event.defaultPrevented) context.select(value);
+      }}
+    >
+      {icon && (
+        <span className="tb-icon" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <span className="tb-label">{children}</span>
+      {badge !== undefined && badge !== null && <span className="tb-badge">{badge}</span>}
+    </button>
+  );
+}
+
+/* --------------------------------------------------------------- TabPanel */
+
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  /** Overrides `keepMounted` on `Tabs` for this panel. */
+  keepMounted?: boolean;
+}
+
+export function TabPanel(props: TabPanelProps) {
+  const { value, keepMounted, className, children, ...rest } = props;
+  const context = useTabsContext();
+  const selected = context.value === value;
+  const keep = keepMounted ?? context.keepMounted;
+
+  return (
+    <div
+      {...rest}
+      role="tabpanel"
+      id={tabDomId(context.id, "panel", value)}
+      aria-labelledby={tabDomId(context.id, "tab", value)}
+      // Focusable so keyboard users reach panels without focusable content.
+      tabIndex={0}
+      hidden={!selected}
+      className={cx("tb-panel", className)}
+    >
+      {keep ? <Activity mode={selected ? "visible" : "hidden"}>{children}</Activity> : selected ? children : null}
+    </div>
+  );
+}

package/source/beta-components/tabs/react/context.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { createContext, use } from "react";
+import type { TabsActivation, TabsOrientation } from "../core/types";
+
+export interface TabsContextValue {
+  id: string;
+  value: string | undefined;
+  select(value: string): void;
+  orientation: TabsOrientation;
+  activation: TabsActivation;
+  keepMounted: boolean;
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null);
+
+export function useTabsContext(): TabsContextValue {
+  const context = use(TabsContext);
+  if (!context) throw new Error("TabList, Tab and TabPanel must be used inside <Tabs>.");
+  return context;
+}

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

@@ -0,0 +1,257 @@
+/*
+ * Tabs 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` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .tb-root {
+    --tb-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
+    --tb-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --tb-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --tb-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --tb-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
+    --tb-track: light-dark(#f4f4f5, #18181b);
+    --tb-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --tb-accent-soft: var(--dg-accent-soft, light-dark(#eff6ff, #172554));
+    --tb-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --tb-radius: var(--dg-radius, 8px);
+    --tb-font-size: var(--dg-font-size, 13px);
+    --tb-height: 36px;
+    --tb-px: 12px;
+    --tb-duration: 200ms;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+    font-size: var(--tb-font-size);
+    line-height: 1.4;
+    color: var(--tb-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .tb-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .tb-root {
+    color-scheme: light;
+  }
+
+  :where(.tb-root) *,
+  :where(.tb-root) *::before,
+  :where(.tb-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .tb-root[data-size="sm"] {
+    --tb-height: 30px;
+    --tb-px: 10px;
+    --tb-font-size: 12px;
+  }
+  .tb-root[data-size="lg"] {
+    --tb-height: 44px;
+    --tb-px: 16px;
+    --tb-font-size: 14px;
+  }
+  .tb-root[data-orientation="vertical"] {
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  /* ---------------------------------------------------------------- list */
+
+  .tb-list {
+    position: relative;
+    display: flex;
+    flex: none;
+    gap: 2px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .tb-root[data-orientation="vertical"] .tb-list {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .tb-tab {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: var(--tb-height);
+    padding: 0 var(--tb-px);
+    border: 0;
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: transparent;
+    color: var(--tb-muted);
+    font: inherit;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 120ms ease;
+  }
+  .tb-root[data-orientation="vertical"] .tb-tab {
+    justify-content: flex-start;
+  }
+  .tb-tab:hover:not([aria-disabled="true"]),
+  .tb-tab[aria-selected="true"] {
+    color: var(--tb-fg);
+  }
+  .tb-tab:focus-visible {
+    outline: 2px solid var(--tb-focus);
+    outline-offset: -2px;
+  }
+  .tb-tab[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .tb-icon {
+    display: inline-flex;
+  }
+  .tb-icon > svg {
+    width: 1.1em;
+    height: 1.1em;
+  }
+  .tb-badge {
+    min-width: 18px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--tb-hover);
+    color: var(--tb-muted);
+    font-size: 0.85em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+    text-align: center;
+  }
+  .tb-tab[aria-selected="true"] .tb-badge {
+    background: var(--tb-accent-soft);
+    color: var(--tb-accent);
+  }
+
+  /* The indicator is measured in JS; it slides between tabs. */
+  .tb-indicator {
+    position: absolute;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      left var(--tb-duration) ease,
+      top var(--tb-duration) ease,
+      width var(--tb-duration) ease,
+      height var(--tb-duration) ease;
+  }
+  .tb-list[style*="--tb-indicator-size"] .tb-indicator {
+    opacity: 1;
+  }
+
+  /* ---------------------------------------------------------------- line */
+
+  .tb-root[data-variant="line"] .tb-list {
+    border-bottom: 1px solid var(--tb-border);
+  }
+  .tb-root[data-variant="line"] .tb-indicator {
+    bottom: -1px;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    height: 2px;
+    border-radius: 2px;
+    background: var(--tb-accent);
+  }
+  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-list {
+    border-bottom: 0;
+    border-inline-end: 1px solid var(--tb-border);
+  }
+  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    bottom: auto;
+    left: auto;
+    inset-inline-end: -1px;
+    width: 2px;
+    height: var(--tb-indicator-size);
+  }
+
+  /* --------------------------------------------------------------- pills */
+
+  .tb-root[data-variant="pills"] .tb-indicator {
+    top: 0;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    height: 100%;
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: var(--tb-accent-soft);
+  }
+  .tb-root[data-variant="pills"] .tb-tab[aria-selected="true"] {
+    color: var(--tb-accent);
+  }
+  .tb-root[data-variant="pills"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    left: 0;
+    width: 100%;
+    height: var(--tb-indicator-size);
+  }
+
+  /* ------------------------------------------------------------ enclosed */
+
+  .tb-root[data-variant="enclosed"] .tb-list {
+    padding: 3px;
+    border-radius: var(--tb-radius);
+    background: var(--tb-track);
+  }
+  .tb-root[data-variant="enclosed"] .tb-indicator {
+    top: 3px;
+    bottom: 3px;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: var(--tb-bg);
+    box-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
+  }
+  .tb-root[data-variant="enclosed"] .tb-tab {
+    height: calc(var(--tb-height) - 6px);
+  }
+  .tb-root[data-variant="enclosed"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    bottom: auto;
+    left: 3px;
+    right: 3px;
+    width: auto;
+    height: var(--tb-indicator-size);
+  }
+
+  /* Before the indicator is measured (server render), mark the selected tab statically. */
+  .tb-root[data-variant="line"] .tb-list:not([style*="--tb-indicator-size"]) .tb-tab[aria-selected="true"] {
+    box-shadow: inset 0 -2px 0 var(--tb-accent);
+  }
+
+  /* --------------------------------------------------------------- panel */
+
+  .tb-panel {
+    flex: 1 1 auto;
+    min-width: 0;
+    border-radius: 4px;
+  }
+  .tb-panel:focus-visible {
+    outline: 2px solid var(--tb-focus);
+    outline-offset: 4px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tb-root {
+      --tb-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .tb-indicator {
+      background: Highlight;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+# Textarea
+
+A multi-line text field for React 19 with label, hint, error, character counter
+and auto-resize, styled to match the rest of the library. No runtime
+dependencies besides React.
+
+## Setup
+
+```ts
+import { Textarea } from "@/components/textarea";
+import "@/components/textarea/styles.css";
+```
+
+## Usage
+
+```tsx
+<Textarea
+  label="Notes"
+  value={notes}
+  onValueChange={setNotes}
+  autoResize
+  minRows={2}
+  maxRows={8}
+  maxLength={500}
+  showCount
+/>
+```
+
+## Props
+
+All `<textarea>` attributes plus `value`, `defaultValue`, `onValueChange`,
+`label`, `description`, `error`, `size` (`sm` `md` `lg`), `autoResize`, `minRows`,
+`maxRows`, `resize` (`none` `vertical` `horizontal` `both`), `showCount`,
+`classNames` (`root` `label` `textarea` `description` `error` `count`),
+`localeText`, and `ref` (the `<textarea>`).
+
+Auto-resize uses CSS `field-sizing: content` where supported and measures the
+text elsewhere. `countCharacters` and `fitHeight` are exported from the
+framework-free `core`.

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

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { countCharacters } from "../core/count";
+import { fitHeight, heightForRows } from "../core/size";
+
+const metrics = { lineHeight: 20, paddingBlock: 16, borderBlock: 2 };
+
+describe("character count", () => {
+  it("counts what a person sees", () => {
+    expect(countCharacters("")).toBe(0);
+    expect(countCharacters("line one\nline two")).toBe(17);
+    expect(countCharacters("👍🏽👍🏽")).toBe(2);
+  });
+});
+
+describe("auto resize", () => {
+  it("measures rows as border-box height", () => {
+    expect(heightForRows(1, metrics)).toBe(38);
+    expect(heightForRows(3, metrics)).toBe(78);
+  });
+
+  it("never shrinks below minRows", () => {
+    // One line of content: scrollHeight = 20 + 16 padding.
+    expect(fitHeight(36, metrics, 3)).toEqual({ height: 78, overflow: false });
+  });
+
+  it("grows with the content", () => {
+    expect(fitHeight(136, metrics, 3)).toEqual({ height: 138, overflow: false });
+  });
+
+  it("stops at maxRows and reports that it should scroll", () => {
+    expect(fitHeight(416, metrics, 3, 5)).toEqual({ height: 118, overflow: true });
+    expect(fitHeight(96, metrics, 3, 5)).toEqual({ height: 98, overflow: false });
+  });
+
+  it("keeps maxRows from undercutting minRows", () => {
+    expect(fitHeight(36, metrics, 4, 2).height).toBe(98);
+  });
+});

package/source/beta-components/textarea/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/textarea/core/index.ts

@@ -0,0 +1,4 @@
+// Framework-free: character counting and the auto-resize math.
+export { countCharacters } from "./count";
+export { fitHeight, heightForRows } from "./size";
+export type * from "./types";

package/source/beta-components/textarea/core/size.ts

@@ -0,0 +1,23 @@
+import type { BoxMetrics } from "./types";
+
+/** Border-box height that shows exactly `rows` lines of text. */
+export function heightForRows(rows: number, metrics: BoxMetrics): number {
+  return rows * metrics.lineHeight + metrics.paddingBlock + metrics.borderBlock;
+}
+
+/**
+ * The height that fits the content between `minRows` and `maxRows`, and whether
+ * the content is taller than that (so the textarea should scroll).
+ * `scrollHeight` is the element's, which includes padding but not borders.
+ */
+export function fitHeight(
+  scrollHeight: number,
+  metrics: BoxMetrics,
+  minRows: number,
+  maxRows?: number,
+): { height: number; overflow: boolean } {
+  const content = scrollHeight + metrics.borderBlock;
+  const min = heightForRows(Math.max(1, minRows), metrics);
+  const max = maxRows ? Math.max(min, heightForRows(maxRows, metrics)) : Infinity;
+  return { height: Math.min(Math.max(content, min), max), overflow: content > max };
+}

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

@@ -0,0 +1,17 @@
+export type FieldSize = "sm" | "md" | "lg";
+
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+
+/** Vertical measurements of a textarea, in pixels. */
+export interface BoxMetrics {
+  lineHeight: number;
+  /** Top plus bottom padding. */
+  paddingBlock: number;
+  /** Top plus bottom border. */
+  borderBlock: number;
+}
+
+export interface TextareaLocaleText {
+  /** `max` is set when the field has a `maxLength`. */
+  characterCount(count: string, max?: string): string;
+}

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

@@ -0,0 +1,5 @@
+export { Textarea } from "./react/Textarea";
+export type { TextareaProps } from "./react/Textarea";
+export { defaultTextareaText } from "./react/locale";
+export type { TextareaSlot } from "./react/props";
+export * from "./core";