@gtivr4/a1-design-system-react 0.12.0 → 0.13.3

package/src/components/context-menu/ContextMenu.jsx

@@ -0,0 +1,146 @@
+import { createPortal } from 'react-dom';
+import { useEffect, useRef } from 'react';
+import { Icon } from '../icon/Icon.jsx';
+import './context-menu.css';
+
+const FOCUSABLE = 'button:not([disabled]):not([aria-disabled="true"])';
+
+// ── ContextMenu ───────────────────────────────────────────────────────────────
+
+/**
+ * Controlled context menu portaled to document.body.
+ *
+ * Usage:
+ *   const [menu, setMenu] = useState(null);
+ *   <div onContextMenu={e => { e.preventDefault(); setMenu({ x: e.clientX, y: e.clientY }); }}>
+ *     <ContextMenu open={!!menu} x={menu?.x ?? 0} y={menu?.y ?? 0}
+ *       items={[...]} onClose={() => setMenu(null)} />
+ *   </div>
+ */
+export function ContextMenu({
+  open = false,
+  x = 0,
+  y = 0,
+  items = [],
+  onClose,
+  'aria-label': ariaLabel = 'Context menu',
+}) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    // Focus the first item when the menu opens
+    requestAnimationFrame(() => {
+      ref.current?.querySelector(FOCUSABLE)?.focus();
+    });
+
+    function handleMouseDown(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose?.();
+    }
+
+    function handleKeyDown(e) {
+      if (!ref.current) return;
+      const focusable = Array.from(ref.current.querySelectorAll(FOCUSABLE));
+      const current = focusable.indexOf(document.activeElement);
+
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          onClose?.();
+          break;
+        case 'ArrowDown': {
+          e.preventDefault();
+          const next = current < focusable.length - 1 ? current + 1 : 0;
+          focusable[next]?.focus();
+          break;
+        }
+        case 'ArrowUp': {
+          e.preventDefault();
+          const prev = current > 0 ? current - 1 : focusable.length - 1;
+          focusable[prev]?.focus();
+          break;
+        }
+        case 'Home':
+          e.preventDefault();
+          focusable[0]?.focus();
+          break;
+        case 'End':
+          e.preventDefault();
+          focusable[focusable.length - 1]?.focus();
+          break;
+      }
+    }
+
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  // Clamp to viewport edges (16px safe margin)
+  const margin = 16;
+  const menuWidth = 240;
+  const menuHeight = items.length * 36 + 32;
+  const adjustedX = Math.min(x, window.innerWidth - menuWidth - margin);
+  const adjustedY = Math.min(y + 4, window.innerHeight - menuHeight - margin);
+
+  return createPortal(
+    <div
+      ref={ref}
+      className="a1-context-menu"
+      style={{ left: Math.max(margin, adjustedX), top: Math.max(margin, adjustedY) }}
+      role="menu"
+      aria-label={ariaLabel}
+    >
+      {items.map((entry) => {
+        if (entry.type === 'divider') {
+          return <hr key={entry.id} className="a1-context-menu__divider" aria-hidden="true" />;
+        }
+
+        if (entry.type === 'group') {
+          return (
+            <span key={entry.id} className="a1-context-menu__heading" role="presentation">
+              {entry.label}
+            </span>
+          );
+        }
+
+        // Default: 'item'
+        const isDestructive = entry.variant === 'destructive';
+        const isActive = !!entry.active;
+
+        return (
+          <button
+            key={entry.id}
+            type="button"
+            role="menuitem"
+            className={[
+              'a1-context-menu__item',
+              isDestructive && 'a1-context-menu__item--destructive',
+              isActive && 'a1-context-menu__item--active',
+            ].filter(Boolean).join(' ')}
+            disabled={entry.disabled}
+            onClick={() => {
+              entry.onClick?.();
+              onClose?.();
+            }}
+          >
+            {entry.icon && (
+              <Icon name={entry.icon} className="a1-context-menu__icon" aria-hidden="true" />
+            )}
+            <span className="a1-context-menu__item-label">{entry.label}</span>
+            {entry.shortcut && (
+              <kbd className="a1-context-menu__kbd">{entry.shortcut}</kbd>
+            )}
+          </button>
+        );
+      })}
+    </div>,
+    document.body,
+  );
+}

package/src/components/context-menu/context-menu.css

@@ -0,0 +1,107 @@
+/* ── ContextMenu ── */
+
+.a1-context-menu {
+  position: fixed;
+  z-index: 1000;
+  background: var(--semantic-color-surface-page);
+  border: 1px solid var(--semantic-color-border-subtle);
+  border-radius: var(--base-radius-md);
+  box-shadow: var(--semantic-shadow-md);
+  padding: var(--base-spacing-4);
+  min-inline-size: 160px;
+  max-inline-size: 240px;
+}
+
+.a1-context-menu__heading {
+  display: block;
+  padding: var(--base-spacing-4) var(--base-spacing-8);
+  font-family: var(--component-paragraph-font-family, inherit);
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-muted);
+  user-select: none;
+}
+
+.a1-context-menu__divider {
+  margin-block: var(--base-spacing-4);
+  border: none;
+  border-block-start: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-context-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  inline-size: 100%;
+  padding-block: var(--base-spacing-6);
+  padding-inline: var(--base-spacing-8);
+  border: none;
+  border-radius: var(--base-radius-sm);
+  background: transparent;
+  font-family: var(--component-paragraph-font-family, inherit);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-default);
+  cursor: pointer;
+  text-align: start;
+  transition: background var(--semantic-motion-duration-fast, 120ms) ease;
+}
+
+.a1-context-menu__item:hover {
+  background: color-mix(in srgb, transparent, var(--semantic-color-text-default) 6%);
+}
+
+.a1-context-menu__item:focus-visible {
+  outline: 2px solid var(--semantic-color-text-accent);
+  outline-offset: -1px;
+}
+
+.a1-context-menu__item[disabled],
+.a1-context-menu__item[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.a1-context-menu__item--active {
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-foreground);
+}
+
+.a1-context-menu__item--active:hover {
+  background: var(--semantic-color-action-background-hover, var(--semantic-color-action-background));
+}
+
+.a1-context-menu__item--destructive {
+  color: var(--semantic-color-status-error-text);
+}
+
+.a1-context-menu__item--destructive:hover {
+  background: var(--semantic-color-status-error-surface);
+}
+
+.a1-context-menu__icon {
+  flex-shrink: 0;
+  font-size: 16px !important;
+  line-height: 1 !important;
+}
+
+.a1-context-menu__item-label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a1-context-menu__kbd {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  font-family: var(--base-font-family-mono, monospace);
+  font-size: var(--semantic-font-size-body-xs);
+  line-height: 1;
+  color: var(--semantic-color-text-muted);
+  background: color-mix(in srgb, transparent, var(--semantic-color-text-default) 6%);
+  border: 1px solid var(--semantic-color-border-subtle);
+  border-radius: var(--base-radius-xs, 2px);
+  padding-inline: var(--base-spacing-4);
+  padding-block: var(--base-spacing-2);
+}

package/src/components/data-table/DataTable.jsx

@@ -556,7 +556,7 @@ export function DataTable({
           value={activeFilterValue}
           onChange={updateFilterValue}
           searchValue={activeSearchValue}
-          onSearchChange={updateSearchValue}
+          onSearchChange={onSearchChange != null || searchValue !== undefined || searchableColumns?.length > 0 ? updateSearchValue : undefined}
           searchColumn={activeSearchColumn}
           onSearchColumnChange={updateSearchColumn}
           searchableColumns={searchableColumns}

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

@@ -68,6 +68,21 @@
   gap: var(--a1-definition-list-row-gap);
 }
 
+.a1-definition-list--column.a1-definition-list--sm {
+  --a1-definition-list-gap: var(--component-definition-list-gap-md);
+  --a1-definition-list-row-gap: var(--base-spacing-4);
+}
+
+.a1-definition-list--column.a1-definition-list--md {
+  --a1-definition-list-gap: var(--component-definition-list-gap-lg);
+  --a1-definition-list-row-gap: var(--component-definition-list-row-gap-sm);
+}
+
+.a1-definition-list--column.a1-definition-list--lg {
+  --a1-definition-list-gap: var(--base-spacing-20);
+  --a1-definition-list-row-gap: var(--component-definition-list-row-gap-md);
+}
+
 .a1-definition-list--row {
   display: flex;
   flex-direction: column;

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

@@ -9,8 +9,10 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
    * @example orientation={{ xs: "horizontal", md: "vertical" }}
    */
   orientation?: Orientation | Partial<Record<Breakpoints, Orientation>>;
-  /** Visual style. Default: "subtle" */
-  variant?: "subtle" | "strong" | "accent" | "dashed" | "dotted";
+  /** Color tone. Default: "subtle" */
+  variant?: "subtle" | "strong" | "accent";
+  /** Border pattern. Default: "solid" */
+  lineStyle?: "solid" | "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" */

package/src/components/divider/Divider.jsx

@@ -1,7 +1,8 @@
 import "./divider.css";
 
 const orientations = ["horizontal", "vertical"];
-const variants = ["subtle", "strong", "accent", "dashed", "dotted"];
+const variants = ["subtle", "strong", "accent"];
+const lineStyles = ["solid", "dashed", "dotted"];
 const sizes = ["xs", "sm", "md", "lg"];
 const spacing = ["none", "xs", "sm", "md", "lg", "xl", "xxl"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
@@ -33,13 +34,16 @@ function getOrientationClasses(orientation) {
 export function Divider({
   orientation = "horizontal",
   variant = "subtle",
+  lineStyle = "solid",
   size = "xs",
   space = "sm",
   decorative = true,
   className = "",
   ...props
 }) {
+  const legacyLineStyle = lineStyles.includes(variant) ? variant : undefined;
   const resolvedVariant = variants.includes(variant) ? variant : "subtle";
+  const resolvedLineStyle = legacyLineStyle || (lineStyles.includes(lineStyle) ? lineStyle : "solid");
   const resolvedSize = sizes.includes(size) ? size : "xs";
   const resolvedSpace = spacing.includes(space) ? space : "sm";
   const resolvedOrientation = resolveBaseOrientation(orientation);
@@ -48,6 +52,7 @@ export function Divider({
     "a1-divider",
     ...getOrientationClasses(orientation),
     `a1-divider--${resolvedVariant}`,
+    `a1-divider--${resolvedLineStyle}`,
     `a1-divider--${resolvedSize}`,
     `a1-divider--space-${resolvedSpace}`,
     className,

package/src/components/divider/divider.css

@@ -151,11 +151,15 @@
 
 /* ── Variant ─────────────────────────────────────────────────────────────── */
 
-.a1-divider--subtle  { --a1-divider-style: solid;  color: var(--semantic-color-border-subtle); }
-.a1-divider--strong  { --a1-divider-style: solid;  color: var(--semantic-color-border-strong); }
-.a1-divider--accent  { --a1-divider-style: solid;  color: var(--semantic-color-text-accent); }
-.a1-divider--dashed  { --a1-divider-style: dashed; color: var(--semantic-color-border-subtle); }
-.a1-divider--dotted  { --a1-divider-style: dotted; color: var(--semantic-color-border-subtle); }
+.a1-divider--subtle  { color: var(--semantic-color-border-subtle); }
+.a1-divider--strong  { color: var(--semantic-color-border-strong); }
+.a1-divider--accent  { color: var(--semantic-color-text-accent); }
+
+/* ── Line style ──────────────────────────────────────────────────────────── */
+
+.a1-divider--solid  { --a1-divider-style: solid; }
+.a1-divider--dashed { --a1-divider-style: dashed; }
+.a1-divider--dotted { --a1-divider-style: dotted; }
 
 /* ── Space ───────────────────────────────────────────────────────────────── */
 /* --a1-divider-space-value is routed to margin-block or margin-inline

package/src/components/field/DateField.jsx

@@ -1,10 +1,25 @@
+import { useState } from "react";
 import { TextField } from "./TextField.jsx";
 
-export function DateField({ className = "", ...props }) {
+export function DateField({ className = "", value, defaultValue, onChange, ...props }) {
+  const isControlled = value != null;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const current = isControlled ? value : internal;
+  // Mute the native mm/dd/yyyy format placeholder while the field is empty.
+  const emptyClass = current ? "" : "a1-field--mask-empty";
+
+  function handleChange(event) {
+    if (!isControlled) setInternal(event.target.value);
+    onChange?.(event);
+  }
+
   return (
     <TextField
       type="date"
-      className={`a1-field--fit ${className}`.trim()}
+      className={`a1-field--fit ${emptyClass} ${className}`.replace(/\s+/g, " ").trim()}
+      value={isControlled ? value : undefined}
+      defaultValue={isControlled ? undefined : defaultValue}
+      onChange={handleChange}
       {...props}
     />
   );

package/src/components/field/SelectField.jsx

@@ -52,7 +52,7 @@ export const SelectField = forwardRef(function SelectField({
         <label className="a1-field__label" htmlFor={id}>
           {label}
           {required && resolvedSize === "comfortable" ? (
-            <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+            <MessageBadge status="info" subtle size="sm" icon={null}>{requiredText}</MessageBadge>
           ) : required ? (
             <span className="a1-field__asterisk" aria-hidden="true"> *</span>
           ) : null}

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

@@ -14,6 +14,8 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
   required?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
+  /** Autofill hint forwarded to the native input, e.g. "email", "current-password", "tel", "postal-code", "cc-number", "off". Improves browser and password-manager autofill. */
+  autoComplete?: string;
   /** Element rendered inside the field control (e.g. a unit suffix) */
   inputOverlay?: React.ReactNode;
 }

package/src/components/field/TextField.jsx

@@ -53,7 +53,7 @@ export const TextField = forwardRef(function TextField({
         <label className="a1-field__label" htmlFor={id}>
           {label}
           {required && resolvedSize === "comfortable" ? (
-            <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+            <MessageBadge status="info" subtle size="sm" icon={null}>{requiredText}</MessageBadge>
           ) : required ? (
             <span className="a1-field__asterisk" aria-hidden="true"> *</span>
           ) : null}

package/src/components/field/TextareaField.jsx

@@ -106,7 +106,7 @@ export const TextareaField = forwardRef(function TextareaField({
         <label className="a1-field__label" htmlFor={id}>
           {label}
           {required && resolvedSize === "comfortable" ? (
-            <MessageBadge status="info" subtle>{requiredText}</MessageBadge>
+            <MessageBadge status="info" subtle size="sm" icon={null}>{requiredText}</MessageBadge>
           ) : required ? (
             <span className="a1-field__asterisk" aria-hidden="true"> *</span>
           ) : null}

package/src/components/field/TimeField.jsx

@@ -1,10 +1,25 @@
+import { useState } from "react";
 import { TextField } from "./TextField.jsx";
 
-export function TimeField({ className = "", ...props }) {
+export function TimeField({ className = "", value, defaultValue, onChange, ...props }) {
+  const isControlled = value != null;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const current = isControlled ? value : internal;
+  // Mute the native --:-- format placeholder while the field is empty.
+  const emptyClass = current ? "" : "a1-field--mask-empty";
+
+  function handleChange(event) {
+    if (!isControlled) setInternal(event.target.value);
+    onChange?.(event);
+  }
+
   return (
     <TextField
       type="time"
-      className={`a1-field--fit ${className}`.trim()}
+      className={`a1-field--fit ${emptyClass} ${className}`.replace(/\s+/g, " ").trim()}
+      value={isControlled ? value : undefined}
+      defaultValue={isControlled ? undefined : defaultValue}
+      onChange={handleChange}
       {...props}
     />
   );

package/src/components/field/field.css

@@ -7,7 +7,7 @@
   --a1-field-gap:            var(--component-field-default-gap);
   --a1-field-border-radius:  var(--base-radius-md);
   --a1-field-font-size:      var(--semantic-font-size-body-md);
-  --a1-field-label-size:     var(--semantic-font-size-body-sm);
+  --a1-field-label-size:     var(--semantic-font-size-form-label-default);
   --a1-field-label-weight:   var(--component-field-label-font-weight);
   --a1-field-message-size:   var(--semantic-font-size-body-xs);
   --a1-field-chevron-size:   var(--component-field-chevron-size);
@@ -34,7 +34,7 @@
   --a1-field-padding-inline: var(--component-field-comfortable-padding-inline);
   --a1-field-gap:            var(--component-field-comfortable-gap);
   --a1-field-border-radius:  var(--base-radius-lg);
-  --a1-field-label-size:     var(--semantic-font-size-body-md);
+  --a1-field-label-size:     var(--semantic-font-size-form-label-comfortable);
   --a1-field-message-size:   var(--semantic-font-size-body-sm);
   --a1-field-chevron-size:   var(--component-field-chevron-size-comfortable);
   --a1-field-side-label-width: var(--component-field-side-label-width-comfortable);
@@ -66,7 +66,7 @@
   --a1-field-gap:            var(--component-field-compact-gap);
   --a1-field-border-radius:  var(--base-radius-sm);
   --a1-field-font-size:      var(--semantic-font-size-body-sm);
-  --a1-field-label-size:     var(--semantic-font-size-body-xs);
+  --a1-field-label-size:     var(--semantic-font-size-form-label-compact);
   --a1-field-label-weight:   var(--component-field-compact-label-font-weight);
   --a1-field-message-size:   var(--semantic-font-size-body-xs);
   --a1-field-chevron-size:   var(--component-field-chevron-size-compact);
@@ -170,13 +170,12 @@
 
 /* ─── Active ───────────────────────────────────────────────────────────────── */
 
+/* Active keeps the border feedback only — no background colour change. */
 :is(.a1-field__input, .a1-field__select):active:not(:disabled) {
-  background: var(--a1-field-active-background);
   border-color: var(--a1-field-active-border-color);
 }
 
 .a1-field__input:read-only:active:not(:disabled) {
-  background: var(--a1-field-read-only-background);
   border-color: var(--a1-field-read-only-border-color);
 }
 
@@ -269,6 +268,14 @@
   cursor: not-allowed;
 }
 
+/* Mute the native date/time format placeholder (mm/dd/yyyy, --:--) while the
+   field is empty, matching the muted mask placeholder used by Phone/Zip/Card.
+   DateField/TimeField add a1-field--mask-empty until a value is entered. */
+.a1-field--mask-empty .a1-field__input[type="date"]::-webkit-datetime-edit,
+.a1-field--mask-empty .a1-field__input[type="time"]::-webkit-datetime-edit {
+  color: var(--semantic-color-text-muted);
+}
+
 /* ─── Fit-content width (date, zip, and other fixed-width fields) ───────────── */
 
 .a1-field--fit {

package/src/components/field/textarea-field.css

@@ -55,13 +55,12 @@
 
 /* ─── Active ─────────────────────────────────────────────────────────────── */
 
+/* Active keeps the border feedback only — no background colour change. */
 .a1-field__textarea:active:not(:disabled) {
-  background: var(--a1-field-active-background);
   border-color: var(--a1-field-active-border-color);
 }
 
 .a1-field__textarea:read-only:active:not(:disabled) {
-  background: var(--a1-field-read-only-background);
   border-color: var(--a1-field-read-only-border-color);
 }
 

package/src/components/fieldset/fieldset.css

@@ -5,6 +5,8 @@
   margin: 0;
   padding: 0;
   min-width: 0; /* prevents default overflow on narrow containers */
+  inline-size: 100%; /* fill the container regardless of flex/grid/intrinsic sizing */
+  box-sizing: border-box;
 }
 
 /* ─── Legend ─────────────────────────────────────────────────────────────── */

package/src/components/icon-button/IconButton.d.ts

@@ -1,6 +1,12 @@
 import * as React from "react";
 
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Element or component to render as. Use `as="a"` (with `href`) to render the
+   * icon button as a navigation link while keeping its visual styling.
+   * Default: "button"
+   */
+  as?: React.ElementType;
   /** Material Symbols icon name */
   icon: string;
   /** Accessible label (used as `aria-label` and visible tooltip) */
@@ -9,6 +15,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   variant?: "tertiary" | "secondary" | "destructive" | "success";
   /** Button size. "lg" matches Button's large touch target (3.5rem) and icon size, suitable for pairing with large Buttons. Default: "md" */
   size?: "md" | "lg";
+  /** Link target when rendered with `as="a"`. */
+  href?: string;
   disabled?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/src/components/icon-button/IconButton.jsx

@@ -5,6 +5,7 @@ const variants = ["tertiary", "secondary", "destructive", "success"];
 const sizes = ["md", "lg"];
 
 export function IconButton({
+  as: Component = "button",
   icon,
   label,
   variant = "tertiary",
@@ -16,6 +17,9 @@ export function IconButton({
 }) {
   const resolvedVariant = variants.includes(variant) ? variant : "tertiary";
   const resolvedSize = sizes.includes(size) ? size : null;
+  // When rendered as a link (as="a") the native `disabled` attribute does not
+  // apply, so fall back to aria-disabled for assistive tech.
+  const isButton = Component === "button";
   const classes = [
     "a1-icon-button",
     `a1-icon-button--${resolvedVariant}`,
@@ -24,15 +28,16 @@ export function IconButton({
   ].filter(Boolean).join(" ");
 
   return (
-    <button
-      type="button"
+    <Component
+      type={isButton ? "button" : undefined}
       className={classes}
       aria-label={label}
-      disabled={disabled}
+      disabled={isButton ? disabled : undefined}
+      aria-disabled={!isButton && disabled ? "true" : undefined}
       onClick={onClick}
       {...props}
     >
       <Icon name={icon} />
-    </button>
+    </Component>
   );
 }

package/src/components/inline-editable/InlineEditable.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+export interface InlineEditableProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+  /** Current text value (controlled). */
+  value: string;
+  /** Called with the new value as the user types. */
+  onChange: (value: string) => void;
+  /** Edit in a `<textarea>` instead of a single-line `<input>`. Default: false */
+  multiline?: boolean;
+  /** Prevents entering edit mode and removes the interactive affordances. Default: false */
+  disabled?: boolean;
+  /** Edit the text in place via `contentEditable` instead of a boxed field. The element inherits all typography (font, size, colour, line-height, alignment, wrapping) from the surrounding component, so editing never resizes or restyles the text — ideal for making any heading, paragraph, label, or button text live-editable. Only a focus ring is added. Default: false */
+  seamless?: boolean;
+  /** Text shown in the display state when there is no value and no `children`. */
+  placeholder?: string;
+  /** Class applied to the wrapper in the display state. */
+  className?: string;
+  /** Class applied to the `<input>` / `<textarea>` in the edit state. */
+  inputClassName?: string;
+  /** Display content rendered in the read state; falls back to `placeholder` when omitted. */
+  children?: React.ReactNode;
+}
+
+export declare function InlineEditable(props: InlineEditableProps): React.ReactElement;