@gtivr4/a1-design-system-react 0.4.1 → 0.6.0

package/src/components/data-table/DataTable.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+
+export interface DataTableColumn {
+  key: string;
+  label: string;
+  type?: "text" | "number" | "currency" | "date" | "badge" | "avatar" | "link" | "actions";
+  align?: "start" | "center" | "end";
+  width?: string;
+  sortable?: boolean;
+  sortAccessor?: (row: Record<string, unknown>) => unknown;
+  searchAccessor?: (row: Record<string, unknown>) => unknown;
+  statusMap?: Record<string, "neutral" | "info" | "success" | "warn" | "error">;
+  currencySymbol?: string;
+}
+
+export interface DataTableSortState {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+export interface DataTableFilter {
+  key: string;
+  label: string;
+  type?: "single" | "multi";
+  options: Array<{ value: string; label: string }>;
+}
+
+export interface DataTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: DataTableColumn[];
+  rows?: Record<string, unknown>[];
+  /**
+   * Cell spacing density.
+   * Omit (default) to auto-select density based on the available container width.
+   */
+  size?: "comfortable" | "default" | "compact";
+  /** Alternate row shading. Default: false */
+  zebra?: boolean;
+  /** Enable horizontal scroll on the table. Default: false */
+  scrollable?: boolean;
+  /** Accessible caption for the table */
+  caption?: string;
+  /** Controlled current page (1-based) */
+  page?: number;
+  /** Uncontrolled initial page. Default: 1 */
+  defaultPage?: number;
+  /** Number of rows per page for built-in pagination */
+  pageSize?: number;
+  /** Total page count for server-side pagination */
+  totalPages?: number;
+  /** Total row count for server-side row counter */
+  totalRows?: number;
+  /** Called when the active page changes */
+  onPageChange?: (page: number) => void;
+  /** Controlled sort state */
+  sort?: DataTableSortState | null;
+  /** Uncontrolled initial sort state */
+  defaultSort?: DataTableSortState;
+  /** Called when sort changes */
+  onSortChange?: (sort: DataTableSortState | null) => void;
+  filters?: DataTableFilter[];
+  filterValue?: Record<string, unknown>;
+  defaultFilterValue?: Record<string, unknown>;
+  onFilterChange?: (value: Record<string, unknown>) => void;
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchColumn?: string;
+  defaultSearchColumn?: string;
+  onSearchColumnChange?: (column: string) => void;
+  searchableColumns?: Array<{ key: string; label: string }>;
+  /** Enable row selection. Default: false */
+  selectable?: boolean;
+  selectedRowIds?: (string | number)[];
+  defaultSelectedRowIds?: (string | number)[];
+  onSelectedRowIdsChange?: (ids: string[]) => void;
+  onDeleteSelected?: (rows: Record<string, unknown>[], ids: string[]) => void;
+  getRowId?: (row: Record<string, unknown>, index: number) => string | number;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyIcon?: string;
+}
+
+export declare function DataTable(props: DataTableProps): React.ReactElement;

package/src/components/definition-list/DefinitionList.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { HeadingProps } from "../heading/Heading";
+
+export type DefinitionListDirection = "row" | "column";
+export type DefinitionListSize = "sm" | "md" | "lg";
+export type DefinitionListLabelWidth = "auto" | "fixed";
+
+export interface DefinitionListItem {
+  /** Stable key for this label/value pair. Falls back to label or index. */
+  id?: React.Key;
+  /** Label rendered in the `<dt>`. */
+  label: React.ReactNode;
+  /** Value rendered in the `<dd>`. */
+  value?: React.ReactNode;
+  /** Alternate value content for JSX object-literal ergonomics. */
+  children?: React.ReactNode;
+  /** Enables or disables the copy button for this item. Defaults to the list-level copyValue prop. */
+  copyValue?: boolean;
+  /** Exact text copied to the clipboard. Defaults to the rendered text value when it can be inferred. */
+  copyText?: string;
+  /** Accessible label for this item's copy button. Defaults to the list-level copyLabel. */
+  copyLabel?: string;
+  /** Accessible label shown after this item's value is copied. Defaults to the list-level copiedLabel. */
+  copiedLabel?: string;
+  /** Heading props for this item's value. Overrides the list-level valueHeadingProps. */
+  valueHeadingProps?: Omit<HeadingProps, "children" | "className">;
+}
+
+export interface DefinitionListProps extends React.HTMLAttributes<HTMLDListElement> {
+  /** Label/value pairs to render as `<dt>` and `<dd>` groups. */
+  items?: DefinitionListItem[];
+  /** Pair layout direction. Default: "row" */
+  direction?: DefinitionListDirection;
+  /** Spacing and body text size. Default: "md" */
+  size?: DefinitionListSize;
+  /**
+   * Row label sizing. "auto" lets each label hug content; "fixed" aligns values on a responsive label column.
+   * Only applies when direction="row". Default: "auto"
+   */
+  labelWidth?: DefinitionListLabelWidth;
+  /** Show copy buttons for copyable text values. Can be overridden per item. Default: false */
+  copyValue?: boolean;
+  /** Accessible label for copy buttons. Default: "Copy value" */
+  copyLabel?: string;
+  /** Accessible label used after a copy succeeds. Default: "Copied" */
+  copiedLabel?: string;
+  /** Render values with Heading, including Heading type and size support. Can be overridden per item. */
+  valueHeadingProps?: Omit<HeadingProps, "children" | "className">;
+}
+
+export declare function DefinitionList(props: DefinitionListProps): React.ReactElement;

package/src/components/definition-list/DefinitionList.jsx

@@ -0,0 +1,154 @@
+import { Children, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import { Heading } from "../heading/Heading.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+import "./definition-list.css";
+
+const directions = ["row", "column"];
+const sizes = ["sm", "md", "lg"];
+const labelWidths = ["auto", "fixed"];
+
+function textFromNode(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textFromNode).join("");
+  if (isValidElement(node)) return textFromNode(node.props.children);
+  return "";
+}
+
+function writeClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text).catch(() => writeClipboardFallback(text));
+  }
+
+  return writeClipboardFallback(text);
+}
+
+function writeClipboardFallback(text) {
+  if (typeof document === "undefined") return Promise.reject(new Error("Clipboard unavailable"));
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.insetBlockStart = "0";
+  textarea.style.insetInlineStart = "0";
+  textarea.style.inlineSize = "1px";
+  textarea.style.blockSize = "1px";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+
+  try {
+    textarea.setSelectionRange(0, textarea.value.length);
+    const copied = document.execCommand("copy");
+    if (!copied) throw new Error("Copy command failed");
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+function DefinitionValue({ item, inheritedHeadingProps }) {
+  const headingProps = item.valueHeadingProps ?? inheritedHeadingProps;
+  const value = item.value ?? item.children;
+
+  if (!headingProps) return value;
+
+  return (
+    <Heading as="p" type="heading" size="md" {...headingProps}>
+      {value}
+    </Heading>
+  );
+}
+
+function DefinitionCopyButton({ text, label = "Copy value", copiedLabel = "Copied" }) {
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimer.current) window.clearTimeout(resetTimer.current);
+    };
+  }, []);
+
+  async function handleCopy() {
+    await writeClipboard(text);
+    setCopied(true);
+
+    if (resetTimer.current) window.clearTimeout(resetTimer.current);
+    resetTimer.current = window.setTimeout(() => {
+      setCopied(false);
+      resetTimer.current = null;
+    }, 2000);
+  }
+
+  return (
+    <IconButton
+      className="a1-definition-list__copy"
+      icon={copied ? "check" : "content_copy"}
+      label={copied ? copiedLabel : label}
+      onClick={handleCopy}
+      variant="tertiary"
+    />
+  );
+}
+
+export function DefinitionList({
+  items = [],
+  direction = "row",
+  size = "md",
+  labelWidth = "auto",
+  copyValue = false,
+  copyLabel = "Copy value",
+  copiedLabel = "Copied",
+  valueHeadingProps,
+  className = "",
+  ...props
+}) {
+  const resolvedDirection = directions.includes(direction) ? direction : "row";
+  const resolvedSize = sizes.includes(size) ? size : "md";
+  const resolvedLabelWidth = labelWidths.includes(labelWidth) ? labelWidth : "auto";
+  const normalizedItems = useMemo(() => items.filter(Boolean), [items]);
+
+  const classes = [
+    "a1-definition-list",
+    `a1-definition-list--${resolvedDirection}`,
+    `a1-definition-list--${resolvedSize}`,
+    resolvedDirection === "row" && `a1-definition-list--label-${resolvedLabelWidth}`,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <dl className={classes} {...props}>
+      {normalizedItems.map((item, index) => {
+        const value = item.value ?? item.children;
+        const textToCopy = item.copyText ?? textFromNode(Children.toArray(value));
+        const shouldCopy = item.copyValue ?? copyValue;
+        const itemKey = item.id ?? (
+          typeof item.label === "string" || typeof item.label === "number" ? item.label : index
+        );
+
+        return (
+          <div className="a1-definition-list__item" key={itemKey}>
+            <dt className="a1-definition-list__label">{item.label}</dt>
+            <dd className="a1-definition-list__value">
+              <span className="a1-definition-list__value-content">
+                <DefinitionValue item={item} inheritedHeadingProps={valueHeadingProps} />
+              </span>
+              {shouldCopy && textToCopy && (
+                <DefinitionCopyButton
+                  text={textToCopy}
+                  label={item.copyLabel ?? copyLabel}
+                  copiedLabel={item.copiedLabel ?? copiedLabel}
+                />
+              )}
+            </dd>
+          </div>
+        );
+      })}
+    </dl>
+  );
+}

package/src/components/definition-list/definition-list.css

@@ -0,0 +1,111 @@
+.a1-definition-list {
+  container-type: inline-size;
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-definition-list--sm {
+  --a1-definition-list-gap: var(--component-definition-list-gap-sm);
+  --a1-definition-list-row-gap: var(--component-definition-list-row-gap-sm);
+  --a1-definition-list-column-gap: var(--component-definition-list-column-gap-sm);
+  --a1-definition-list-font-size: var(--semantic-font-size-body-sm);
+}
+
+.a1-definition-list--md {
+  --a1-definition-list-gap: var(--component-definition-list-gap-md);
+  --a1-definition-list-row-gap: var(--component-definition-list-row-gap-md);
+  --a1-definition-list-column-gap: var(--component-definition-list-column-gap-md);
+  --a1-definition-list-font-size: var(--semantic-font-size-body-md);
+}
+
+.a1-definition-list--lg {
+  --a1-definition-list-gap: var(--component-definition-list-gap-lg);
+  --a1-definition-list-row-gap: var(--component-definition-list-row-gap-lg);
+  --a1-definition-list-column-gap: var(--component-definition-list-column-gap-lg);
+  --a1-definition-list-font-size: var(--semantic-font-size-body-lg);
+}
+
+.a1-definition-list__item {
+  min-inline-size: 0;
+}
+
+.a1-definition-list__label,
+.a1-definition-list__value {
+  min-inline-size: 0;
+  margin: 0;
+  font-size: var(--a1-definition-list-font-size);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-definition-list__label {
+  font-weight: var(--component-definition-list-label-font-weight);
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-definition-list__value {
+  color: var(--semantic-color-text-default);
+}
+
+.a1-definition-list__value-content {
+  min-inline-size: 0;
+}
+
+.a1-definition-list__copy {
+  margin-block-start: calc((1lh - var(--component-icon-button-size)) / 2);
+}
+
+.a1-definition-list--column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-definition-list-gap);
+}
+
+.a1-definition-list--column .a1-definition-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-definition-list-row-gap);
+}
+
+.a1-definition-list--row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-definition-list-row-gap);
+}
+
+.a1-definition-list--row .a1-definition-list__item {
+  display: grid;
+  grid-template-columns: var(--a1-definition-list-label-column) minmax(0, 1fr);
+  column-gap: var(--a1-definition-list-column-gap);
+  align-items: start;
+}
+
+.a1-definition-list--row.a1-definition-list--label-auto {
+  --a1-definition-list-label-column: max-content;
+}
+
+.a1-definition-list--row.a1-definition-list--label-fixed {
+  --a1-definition-list-label-column: clamp(
+    var(--component-definition-list-label-width-min),
+    var(--component-definition-list-label-width-preferred),
+    var(--component-definition-list-label-width-max)
+  );
+}
+
+.a1-definition-list__value {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--component-definition-list-copy-gap);
+}
+
+.a1-definition-list__value-content {
+  flex: 1 1 auto;
+}
+
+@container (max-width: 360px) {
+  .a1-definition-list--row .a1-definition-list__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a1-definition-list-row-gap);
+  }
+}

package/src/components/dialog/Dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface DialogProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
+  /** Whether the dialog is visible. Default: false */
+  open?: boolean;
+  /** Called when the user closes the dialog (Escape, close button, or backdrop click). Omit to hide the close button. */
+  onClose?: () => void;
+  /** Dialog title shown in the header */
+  title?: string;
+  /** Footer content — wrapped in a right-aligned `ButtonContainer` */
+  footer?: React.ReactNode;
+  /**
+   * Status variant — renders a full-bleed colored hero area at the top with a status icon.
+   * "success" | "error" | "warn" | "info" | "neutral"
+   */
+  status?: "success" | "error" | "warn" | "info" | "neutral";
+  /** Override the icon shown in the hero area. Defaults to the status icon when `status` is set. */
+  icon?: string;
+  children?: React.ReactNode;
+}
+
+export declare function Dialog(props: DialogProps): React.ReactElement;

package/src/components/dialog/Dialog.jsx

@@ -1,8 +1,25 @@
 import { useEffect, useRef } from "react";
 import "./dialog.css";
+import { Icon } from "../icon/Icon.jsx";
 import { IconButton } from "../icon-button/IconButton.jsx";
 import { ButtonContainer } from "../button-container/ButtonContainer.jsx";
 
+const HERO_COLORS = {
+  success: "var(--semantic-color-status-success-background)",
+  error:   "var(--semantic-color-status-error-background)",
+  warn:    "var(--semantic-color-status-warn-background)",
+  info:    "var(--semantic-color-status-info-background)",
+  neutral: "var(--semantic-color-surface-inverse)",
+};
+
+const STATUS_ICONS = {
+  success: "check_circle",
+  error:   "error",
+  warn:    "warning",
+  info:    "info",
+  neutral: "info",
+};
+
 const FOCUSABLE_SELECTORS = [
   "button:not([disabled])",
   "[href]",
@@ -12,7 +29,17 @@ const FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(", ");
 
-export function Dialog({ open = false, onClose, title, footer, children, ...props }) {
+export function Dialog({
+  open = false,
+  onClose,
+  title,
+  footer,
+  status,
+  icon,
+  children,
+  className = "",
+  ...props
+}) {
   const ref = useRef(null);
   const triggerRef = useRef(null);
 
@@ -65,17 +92,36 @@ export function Dialog({ open = false, onClose, title, footer, children, ...prop
     return () => el.removeEventListener("keydown", handleKeyDown);
   }, [open]);
 
+  const heroBg = status ? (HERO_COLORS[status] ?? HERO_COLORS.neutral) : null;
+  const resolvedIcon = icon ?? (status ? STATUS_ICONS[status] : null);
+  const hasHeader = title || onClose;
+
+  const classes = [
+    "a1-dialog",
+    status && "a1-dialog--has-hero",
+    className,
+  ].filter(Boolean).join(" ");
+
   return (
-    <dialog ref={ref} className="a1-dialog" {...props}>
-      <div className="a1-dialog__header">
-        {title && <p className="a1-dialog__title">{title}</p>}
-        <IconButton
-          icon="close"
-          label="Close dialog"
-          onClick={onClose}
-          className="a1-dialog__close"
-        />
-      </div>
+    <dialog ref={ref} className={classes} {...props}>
+      {status && (
+        <div className="a1-dialog__hero" style={{ "--a1-dialog-hero-bg": heroBg }}>
+          {resolvedIcon && <Icon name={resolvedIcon} aria-hidden="true" />}
+        </div>
+      )}
+      {hasHeader && (
+        <div className="a1-dialog__header">
+          {title && <p className="a1-dialog__title">{title}</p>}
+          {onClose && (
+            <IconButton
+              icon="close"
+              label="Close dialog"
+              onClick={onClose}
+              className="a1-dialog__close"
+            />
+          )}
+        </div>
+      )}
       <div className="a1-dialog__body" tabIndex={0}>{children}</div>
       {footer && (
         <div className="a1-dialog__footer">

package/src/components/dialog/dialog.css

@@ -1,4 +1,5 @@
 .a1-dialog {
+  --a1-dialog-padding-inline: var(--component-dialog-padding);
   box-sizing: border-box;
   border: var(--component-dialog-border-width) solid var(--semantic-color-border-strong);
   border-radius: var(--component-dialog-border-radius);
@@ -12,8 +13,12 @@
 }
 
 .a1-dialog[open] {
-  display: flex;
-  flex-direction: column;
+  /* CSS Grid instead of Flex: Safari collapses flex: 1 children when the
+     container has only max-height but no explicit height. Grid resolves
+     track sizes against the constrained container first, so 1fr works. */
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-auto-rows: auto;
   gap: var(--base-spacing-16);
 }
 
@@ -45,8 +50,8 @@
 }
 
 .a1-dialog__body {
-  flex: 1;
   overflow-y: auto;
+  min-height: 0;
 }
 
 .a1-dialog__footer {
@@ -54,8 +59,36 @@
   border-top: var(--component-dialog-footer-border-width) solid var(--semantic-color-border-subtle);
 }
 
+/* ─── Hero icon (status variant) ─────────────────────────────────────────── */
+
+.a1-dialog--has-hero {
+  overflow: hidden;
+}
+
+.a1-dialog--has-hero[open] {
+  /* Body is the 3rd child when a hero is present, so needs an extra auto row */
+  grid-template-rows: auto auto minmax(0, 1fr);
+}
+
+.a1-dialog__hero {
+  margin-top: calc(-1 * var(--component-dialog-padding));
+  margin-inline: calc(-1 * var(--a1-dialog-padding-inline, var(--component-dialog-padding)));
+  padding: var(--base-spacing-32) 0;
+  background: var(--a1-dialog-hero-bg, var(--semantic-color-action-background));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --a1-icon-opsz: 48;
+}
+
+.a1-dialog__hero .a1-icon {
+  font-size: var(--base-spacing-64);
+  color: var(--semantic-color-text-inverse);
+}
+
 @media (--bp-sm-down) {
   .a1-dialog {
+    --a1-dialog-padding-inline: var(--base-spacing-20);
     padding-inline: var(--base-spacing-20);
   }
 }

package/src/components/divider/Divider.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type Orientation = "horizontal" | "vertical";
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  /**
+   * Line orientation. Responsive object syntax supported. Default: "horizontal"
+   * @example orientation={{ xs: "horizontal", md: "vertical" }}
+   */
+  orientation?: Orientation | Partial<Record<Breakpoints, Orientation>>;
+  /** Visual style. Default: "subtle" */
+  variant?: "subtle" | "strong" | "accent" | "dashed" | "dotted";
+  /** Line thickness. Default: "xs" */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Block-axis margin (space above and below for horizontal, left/right for vertical). Default: "sm" */
+  space?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  /** Whether this divider is purely decorative (no semantic role). Default: true */
+  decorative?: boolean;
+}
+
+export declare function Divider(props: DividerProps): React.ReactElement;

package/src/components/field/SelectField.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface SelectFieldProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /** Visible label text */
+  label?: string;
+  /** Helper text shown below the field */
+  hint?: string;
+  /** Error message — replaces hint and marks the field invalid */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  /** Label position. Inherits from parent `Fieldset` when omitted. Default: "above" */
+  labelPosition?: "above" | "before";
+  required?: boolean;
+  disabled?: boolean;
+  /** Element rendered inside the field control */
+  inputOverlay?: React.ReactNode;
+  /** `<option>` elements */
+  children?: React.ReactNode;
+}
+
+export declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLSelectElement>>;

package/src/components/field/TextField.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder"> {
+  /** Visible label text */
+  label?: string;
+  /** Helper text shown below the field */
+  hint?: string;
+  /** Error message — replaces hint and marks the field invalid */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  /** Label position. Inherits from parent `Fieldset` when omitted. Default: "above" */
+  labelPosition?: "above" | "before";
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Element rendered inside the field control (e.g. a unit suffix) */
+  inputOverlay?: React.ReactNode;
+}
+
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/field/TextareaField.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface TextareaFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "rows"> {
+  /** Visible label text */
+  label?: string;
+  /** Helper text shown below the field */
+  hint?: string;
+  /** Error message — replaces hint and marks the field invalid */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  /** Label position. Inherits from parent `Fieldset` when omitted. Default: "above" */
+  labelPosition?: "above" | "before";
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /**
+   * Initial visible row height. Pass a number for exact rows or a size token.
+   * sm=2 · md=4 · lg=8 · xl=12. Default: "md"
+   */
+  rows?: "sm" | "md" | "lg" | "xl" | number;
+  /** Maximum character count */
+  maxLength?: number;
+  /** Show a character counter. Auto-enabled when `maxLength` is set. Default: false */
+  showCount?: boolean;
+}
+
+export declare const TextareaField: React.ForwardRefExoticComponent<TextareaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;