@varialkit/inlineedit 0.1.0

package/docs.md

@@ -0,0 +1,61 @@
+# InlineEdit
+
+InlineEdit provides a compact, in-place editing experience for short text values. It supports click-to-edit or
+button-triggered editing, optional multiline preservation, and async saves.
+
+## Usage
+
+```tsx
+import { InlineEdit } from "@solara/inlineedit";
+
+export function Example() {
+  const [title, setTitle] = React.useState("Quarterly review");
+
+  return (
+    <InlineEdit
+      value={title}
+      onSave={async (next) => setTitle(next)}
+      editTrigger="click"
+      inputVariant="borderless"
+    />
+  );
+}
+```
+
+## Editor Options
+
+InlineEdit renders the existing form components for editing:
+
+- `TextField` for single-line input
+- `TextArea` for multiline input
+- `Dropdown` when `editor="dropdown"`
+
+Provide `dropdownOptions` when using the dropdown editor.
+
+## Icons
+
+You can add an icon to the edit trigger button.
+
+```tsx
+<InlineEdit
+  value="Status"
+  onSave={handleSave}
+  editIconLeft="arrow_swap_16"
+  editIconRight="arrow_chevron_right_16"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string | number | ReactNode` | — | Displayed value. |
+| `onSave` | `(value: string) => Promise<any> | void` | — | Called on save. |
+| `editTrigger` | `"button" | "click"` | `"button"` | How editing is triggered. |
+| `inputVariant` | `"borderless" | "default"` | `"borderless"` | Visual style for TextField/TextArea. |
+| `editIconLeft` | `ButtonIcon` | | Optional icon for the edit button. |
+| `editIconRight` | `ButtonIcon` | | Optional trailing icon for the edit button. |
+| `allowMultilineWhenWrapped` | `boolean` | `false` | Switch to TextArea when the display wraps. |
+| `fullWidth` | `boolean` | `true` | Whether the control stretches to its container. |
+| `editor` | `"text" | "textarea" | "dropdown"` | `"text"` | Explicit editor choice. |
+| `dropdownOptions` | `{ label: string; value: string }[]` | — | Dropdown options. |

package/examples/index.tsx

@@ -0,0 +1 @@
+export { stories } from "../examples";

package/examples.tsx

@@ -0,0 +1,269 @@
+import React from "react";
+import { iconNames } from "@solara/icons";
+import type { SolaraIconName } from "@solara/icons";
+import { InlineEdit } from "./src/InlineEdit";
+import type { InlineEditProps } from "./src/InlineEdit.types";
+
+const StatusOptions = [
+  { label: "Planned", value: "planned" },
+  { label: "In Progress", value: "in-progress" },
+  { label: "Complete", value: "complete" },
+];
+
+export const stories = {
+  playground: {
+    title: "Playground",
+    description: "Tweak the props to explore the InlineEdit API.",
+    render: (props: InlineEditProps) => {
+      const [value, setValue] = React.useState(
+        typeof props.value === "string" || typeof props.value === "number"
+          ? String(props.value)
+          : "Edit me"
+      );
+
+      React.useEffect(() => {
+        if (typeof props.value === "string" || typeof props.value === "number") {
+          setValue(String(props.value));
+        }
+      }, [props.value]);
+
+      const editIconLeft = (props.editIconLeft as SolaraIconName) || undefined;
+      const editIconRight = (props.editIconRight as SolaraIconName) || undefined;
+
+      return (
+        <InlineEdit
+          {...props}
+          editIconLeft={editIconLeft}
+          editIconRight={editIconRight}
+          value={value}
+          onSave={async (next) => {
+            setValue(next);
+          }}
+          dropdownOptions={StatusOptions}
+        />
+      );
+    },
+    controls: [
+      { name: "value", type: "text" },
+      {
+        name: "editor",
+        type: "select",
+        options: ["text", "textarea", "dropdown"],
+      },
+      {
+        name: "editTrigger",
+        type: "select",
+        options: ["button", "click"],
+      },
+      {
+        name: "inputVariant",
+        type: "select",
+        options: ["borderless", "default"],
+      },
+      { name: "allowMultilineWhenWrapped", type: "boolean" },
+      { name: "fullWidth", type: "boolean" },
+      { name: "disabled", type: "boolean" },
+      {
+        name: "editIconLeft",
+        label: "Edit Icon",
+        type: "select",
+        options: ["", ...iconNames],
+      },
+      {
+        name: "editIconRight",
+        label: "Edit Icon Right",
+        type: "select",
+        options: ["", ...iconNames],
+      },
+    ],
+    initialProps: {
+      value: "Edit me",
+      editor: "text",
+      editTrigger: "button",
+      inputVariant: "borderless",
+      allowMultilineWhenWrapped: false,
+      fullWidth: true,
+      disabled: false,
+      editIconLeft: "",
+      editIconRight: "",
+    },
+  },
+  clickToEdit: {
+    title: "Click to Edit",
+    description: "Click the value to edit it inline.",
+    showProps: false,
+    render: () => {
+      const [title, setTitle] = React.useState("Quarterly review");
+      return (
+        <InlineEdit
+          value={title}
+          onSave={async (next) => setTitle(next)}
+          editTrigger="click"
+          inputVariant="borderless"
+        />
+      );
+    },
+    code: `import React from "react";
+import { InlineEdit } from "@solara/inlineedit";
+
+export function Example() {
+  const [title, setTitle] = React.useState("Quarterly review");
+
+  return (
+    <InlineEdit
+      value={title}
+      onSave={async (next) => setTitle(next)}
+      editTrigger="click"
+      inputVariant="borderless"
+    />
+  );
+}
+`,
+  },
+  dropdown: {
+    title: "Dropdown",
+    description: "Swap to a dropdown editor for known options.",
+    showProps: false,
+    render: () => {
+      const [status, setStatus] = React.useState("in-progress");
+      return (
+        <InlineEdit
+          value={status}
+          onSave={async (next) => setStatus(next)}
+          editTrigger="button"
+          editor="dropdown"
+          dropdownOptions={StatusOptions}
+        />
+      );
+    },
+    code: `import React from "react";
+import { InlineEdit } from "@solara/inlineedit";
+
+const StatusOptions = [
+  { label: "Planned", value: "planned" },
+  { label: "In Progress", value: "in-progress" },
+  { label: "Complete", value: "complete" },
+];
+
+export function Example() {
+  const [status, setStatus] = React.useState("in-progress");
+
+  return (
+    <InlineEdit
+      value={status}
+      onSave={async (next) => setStatus(next)}
+      editTrigger="button"
+      editor="dropdown"
+      dropdownOptions={StatusOptions}
+    />
+  );
+}
+`,
+  },
+  multiline: {
+    title: "Multiline",
+    description: "Preserve line breaks when the text wraps.",
+    showProps: false,
+    render: () => {
+      const [summary, setSummary] = React.useState(
+        "A longer sentence that wraps across two lines when space is constrained."
+      );
+      return (
+        <div style={{ maxWidth: "320px" }}>
+          <InlineEdit
+            value={summary}
+            onSave={async (next) => setSummary(next)}
+            editTrigger="click"
+            allowMultilineWhenWrapped
+          />
+        </div>
+      );
+    },
+    code: `import React from "react";
+import { InlineEdit } from "@solara/inlineedit";
+
+export function Example() {
+  const [summary, setSummary] = React.useState(
+    "A longer sentence that wraps across two lines when space is constrained."
+  );
+
+  return (
+    <div style={{ maxWidth: "320px" }}>
+      <InlineEdit
+        value={summary}
+        onSave={async (next) => setSummary(next)}
+        editTrigger="click"
+        allowMultilineWhenWrapped
+      />
+    </div>
+  );
+}
+`,
+  },
+  fitContent: {
+    title: "Fit Content",
+    description: "Hug the text width for dense layouts.",
+    showProps: false,
+    render: () => {
+      const [title, setTitle] = React.useState("Short label");
+      return (
+        <InlineEdit
+          value={title}
+          onSave={async (next) => setTitle(next)}
+          fullWidth={false}
+          editTrigger="click"
+        />
+      );
+    },
+    code: `import React from "react";
+import { InlineEdit } from "@solara/inlineedit";
+
+export function Example() {
+  const [title, setTitle] = React.useState("Short label");
+
+  return (
+    <InlineEdit
+      value={title}
+      onSave={async (next) => setTitle(next)}
+      fullWidth={false}
+      editTrigger="click"
+    />
+  );
+}
+`,
+  },
+  editIcon: {
+    title: "Edit Button Icon",
+    description: "Add an icon to the edit trigger button.",
+    showProps: false,
+    render: () => {
+      const [title, setTitle] = React.useState("Project status");
+      return (
+        <InlineEdit
+          value={title}
+          onSave={async (next) => setTitle(next)}
+          editIconLeft="arrow_swap_16"
+          editIconRight="arrow_chevron_right_16"
+          editTrigger="button"
+        />
+      );
+    },
+    code: `import React from "react";
+import { InlineEdit } from "@solara/inlineedit";
+
+export function Example() {
+  const [title, setTitle] = React.useState("Project status");
+
+  return (
+    <InlineEdit
+      value={title}
+      onSave={async (next) => setTitle(next)}
+      editIconLeft="arrow_swap_16"
+      editIconRight="arrow_chevron_right_16"
+      editTrigger="button"
+    />
+  );
+}
+`,
+  },
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@varialkit/inlineedit",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./examples": "./examples/index.tsx"
+  },
+  "dependencies": {
+    "@varialkit/button": "0.1.0",
+    "@varialkit/textfield": "0.1.0",
+    "@varialkit/icons": "0.1.0",
+    "@varialkit/dropdown": "0.1.0",
+    "@varialkit/textarea": "0.1.0"
+  },
+  "files": [
+    "src",
+    "docs.md",
+    "examples",
+    "examples.tsx"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.10",
+    "react": "19.0.0"
+  }
+}

package/src/InlineEdit.scss

@@ -0,0 +1,99 @@
+.solara-inline-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--space-1) * var(--spacing-multiplier));
+  position: relative;
+  width: 100%;
+  min-height: 1.5rem;
+  padding: calc(var(--space-1) * var(--spacing-multiplier));
+  border-radius: var(--radius-1);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  cursor: pointer;
+}
+
+.solara-inline-edit:hover:not(.solara-inline-edit--disabled) {
+  background-color: var(--color-surface-200);
+}
+
+.solara-inline-edit:focus-visible:not(.solara-inline-edit--disabled) {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-focus-halo);
+}
+
+.solara-inline-edit--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.solara-inline-edit--editing {
+  cursor: default;
+  background-color: transparent;
+}
+
+.solara-inline-edit__display {
+  display: inline-flex;
+  align-items: center;
+  flex-grow: 1;
+  min-height: 1.5rem;
+  white-space: normal;
+  word-break: break-word;
+  color: var(--color-text-primary);
+}
+
+.solara-inline-edit__display--empty {
+  color: var(--color-text-secondary);
+}
+
+.solara-inline-edit__button {
+  flex-shrink: 0;
+}
+
+.solara-inline-edit--fit {
+  width: fit-content;
+  max-width: 100%;
+  flex: 0 0 auto;
+}
+
+.solara-inline-edit--fit .solara-inline-edit__display {
+  flex-grow: 0;
+}
+
+.solara-inline-edit .solara-textfield-wrapper,
+.solara-inline-edit .solara-textarea-wrapper,
+.solara-inline-edit .solara-dropdown-wrapper,
+.solara-inline-edit .solara-textfield,
+.solara-inline-edit .solara-textarea,
+.solara-inline-edit .solara-dropdown {
+  width: 100%;
+  min-width: 0;
+}
+
+.solara-inline-edit--fit .solara-textfield-wrapper,
+.solara-inline-edit--fit .solara-textarea-wrapper,
+.solara-inline-edit--fit .solara-dropdown-wrapper,
+.solara-inline-edit--fit .solara-textfield,
+.solara-inline-edit--fit .solara-textarea,
+.solara-inline-edit--fit .solara-dropdown {
+  width: auto;
+}
+
+.solara-inline-edit__measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  padding: 0;
+  border: 0;
+}
+
+.solara-inline-edit__error {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: calc(var(--space-1) * var(--spacing-multiplier));
+  font-size: var(--font-size-footnote-scaled);
+  color: var(--color-text-alert);
+}

package/src/InlineEdit.tsx

@@ -0,0 +1,429 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "@solara/button";
+import type { ButtonSize, ButtonVariant } from "@solara/button";
+import { Dropdown } from "@solara/dropdown";
+import { TextArea } from "@solara/textarea";
+import { TextField } from "@solara/textfield";
+import type {
+  InlineEditEditor,
+  InlineEditProps,
+  InlineEditSize,
+} from "./InlineEdit.types";
+import "./InlineEdit.scss";
+
+const buttonSizeMap: Record<InlineEditSize, ButtonSize> = {
+  xs: "small",
+  sm: "small",
+  default: "medium",
+  lg: "large",
+  icon: "small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+const inputSizeMap: Record<InlineEditSize, "small" | "medium" | "large"> = {
+  xs: "small",
+  sm: "small",
+  default: "medium",
+  lg: "large",
+  icon: "small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+const resolveButtonVariant = (
+  variant: InlineEditProps["variant"]
+): { variant: ButtonVariant; destructive: boolean } => {
+  switch (variant) {
+    case "ghost":
+      return { variant: "ghost", destructive: false };
+    case "outline":
+      return { variant: "tertiary", destructive: false };
+    case "link":
+      return { variant: "ghost", destructive: false };
+    case "destructive":
+      return { variant: "default", destructive: true };
+    case "default":
+    default:
+      return { variant: "default", destructive: false };
+  }
+};
+
+const resolveEditor = (
+  editor: InlineEditEditor | undefined,
+  useMultilineEditor: boolean
+): InlineEditEditor => {
+  if (editor === "dropdown" || editor === "textarea" || editor === "text") {
+    return editor;
+  }
+  return useMultilineEditor ? "textarea" : "text";
+};
+
+export const InlineEdit: React.FC<InlineEditProps> = ({
+  value,
+  onSave,
+  disabled = false,
+  className = "",
+  placeholder = "Click to edit",
+  children,
+  size = "sm",
+  variant = "ghost",
+  editLabel = "Edit",
+  editIconLeft,
+  editIconRight,
+  editTrigger = "button",
+  inputVariant = "borderless",
+  editing,
+  onEditingChange,
+  allowMultilineWhenWrapped = false,
+  fullWidth = true,
+  editor,
+  dropdownOptions,
+  dropdownVariant = "default",
+}: InlineEditProps) => {
+  const [isEditingInternal, setIsEditingInternal] = useState(false);
+  const isEditing = typeof editing === "boolean" ? editing : isEditingInternal;
+  const setEditing = (val: boolean) => {
+    if (typeof editing === "boolean") {
+      onEditingChange?.(val);
+    } else {
+      setIsEditingInternal(val);
+    }
+  };
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState<string>(
+    typeof value === "string" || typeof value === "number"
+      ? String(value)
+      : ""
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const displayRef = useRef<HTMLDivElement>(null);
+  const [tempDisplayValue, setTempDisplayValue] = useState<string | null>(null);
+  const [expectedValueAfterSave, setExpectedValueAfterSave] = useState<string | null>(
+    null
+  );
+  const [useMultilineEditor, setUseMultilineEditor] = useState(false);
+  const [initialRows, setInitialRows] = useState<number>(1);
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const [measuredInputWidth, setMeasuredInputWidth] = useState<number | null>(
+    null
+  );
+
+  const resolvedButtonSize = buttonSizeMap[size];
+  const resolvedInputSize = inputSizeMap[size];
+  const buttonVariantConfig = resolveButtonVariant(variant);
+  const resolvedEditor = resolveEditor(editor, useMultilineEditor);
+  const isStringValue = typeof value === "string" || typeof value === "number";
+
+  useEffect(() => {
+    setInputValue(
+      typeof value === "string" || typeof value === "number" ? String(value) : ""
+    );
+  }, [value]);
+
+  useEffect(() => {
+    const currentPropValue =
+      typeof value === "string" || typeof value === "number"
+        ? String(value).trim()
+        : "";
+    if (expectedValueAfterSave && currentPropValue === expectedValueAfterSave) {
+      setTempDisplayValue(null);
+      setExpectedValueAfterSave(null);
+    }
+  }, [value, expectedValueAfterSave]);
+
+  useEffect(() => {
+    if (tempDisplayValue) {
+      const t = setTimeout(() => setTempDisplayValue(null), 2500);
+      return () => clearTimeout(t);
+    }
+  }, [tempDisplayValue]);
+
+  useEffect(() => {
+    if (!isEditing) return;
+    const input = containerRef.current?.querySelector(
+      "input, textarea, select"
+    );
+    if (!input) return;
+
+    if (input instanceof HTMLTextAreaElement) {
+      input.style.height = "auto";
+      input.style.height = `${input.scrollHeight}px`;
+    }
+
+    input.focus();
+    if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
+      input.select?.();
+    }
+  }, [isEditing, resolvedEditor]);
+
+  useLayoutEffect(() => {
+    if (isEditing && !fullWidth && resolvedEditor === "text") {
+      const el = measureRef.current;
+      if (el) {
+        el.textContent = inputValue || placeholder || "";
+        const width = el.scrollWidth;
+        const clamped = Math.min(Math.max(width, 8), 10000);
+        setMeasuredInputWidth(clamped);
+      }
+    } else {
+      setMeasuredInputWidth(null);
+    }
+  }, [isEditing, inputValue, fullWidth, placeholder, resolvedEditor]);
+
+  const handleSave = async (overrideValue?: string) => {
+    if (disabled || isSaving) return;
+
+    const nextValue = String(overrideValue ?? inputValue ?? "");
+    const trimmedValue = nextValue.trim();
+    const currentValue =
+      typeof value === "string" || typeof value === "number"
+        ? String(value).trim()
+        : "";
+
+    if (trimmedValue === currentValue) {
+      setEditing(false);
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setError(null);
+      setExpectedValueAfterSave(trimmedValue);
+      setTempDisplayValue(trimmedValue);
+      await onSave(trimmedValue);
+      setEditing(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+      setTempDisplayValue(null);
+      setExpectedValueAfterSave(null);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (resolvedEditor === "dropdown") return;
+
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      setInputValue(
+        typeof value === "string" || typeof value === "number"
+          ? String(value)
+          : ""
+      );
+      setEditing(false);
+    }
+  };
+
+  const measureLines = () => {
+    if (!allowMultilineWhenWrapped || !displayRef.current) return { lines: 1 };
+    const el = displayRef.current;
+    const rect = el.getBoundingClientRect();
+    const stylesComp = window.getComputedStyle(el);
+    const lineHeightStr = stylesComp.lineHeight;
+    const lineHeight = lineHeightStr.endsWith("px")
+      ? parseFloat(lineHeightStr)
+      : el.clientHeight;
+    const lines = Math.max(1, Math.round(rect.height / (lineHeight || 1)));
+    return { lines };
+  };
+
+  const startEditingWithMeasurement = (e?: React.MouseEvent) => {
+    if (disabled) return;
+    e?.stopPropagation();
+
+    const shouldForceTextarea = editor === "textarea";
+    const shouldUseDropdown = editor === "dropdown";
+    const { lines } = measureLines();
+    const shouldUseMultiline =
+      shouldForceTextarea ||
+      (!shouldUseDropdown && allowMultilineWhenWrapped && lines > 1);
+
+    setUseMultilineEditor(shouldUseMultiline);
+    setInitialRows(Math.min(Math.max(lines, 1), 6));
+
+    if (!fullWidth && !shouldUseMultiline && !shouldUseDropdown) {
+      const span = measureRef.current;
+      if (span) {
+        span.textContent = (inputValue || placeholder || "") as string;
+        const width = span.scrollWidth;
+        const clamped = Math.min(Math.max(width, 8), 10000);
+        setMeasuredInputWidth(clamped);
+      }
+    }
+
+    setEditing(true);
+  };
+
+  const handleDisplayClick = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    startEditingWithMeasurement(e);
+  };
+
+  const rootClasses = [
+    "solara-inline-edit",
+    isEditing ? "solara-inline-edit--editing" : null,
+    !fullWidth ? "solara-inline-edit--fit" : null,
+    disabled ? "solara-inline-edit--disabled" : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (isEditing) {
+    const inputStyle =
+      !fullWidth && measuredInputWidth && resolvedEditor === "text"
+        ? { width: `${measuredInputWidth}px` }
+        : undefined;
+
+    return (
+      <div
+        className={rootClasses}
+        ref={containerRef}
+        role="group"
+        aria-busy={isSaving || undefined}
+      >
+        <span
+          ref={measureRef}
+          className="solara-inline-edit__measure"
+          aria-hidden="true"
+        />
+        {resolvedEditor === "dropdown" ? (
+          <Dropdown
+            options={dropdownOptions ?? []}
+            value={inputValue}
+            onChange={(e) => {
+              const next = e.target.value;
+              setInputValue(next);
+              handleSave(next);
+            }}
+            size={resolvedInputSize}
+            variant={dropdownVariant}
+            isDisabled={isSaving}
+          />
+        ) : resolvedEditor === "textarea" ? (
+          <TextArea
+            value={inputValue}
+            rows={initialRows}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+              const ta = e.target;
+              ta.style.height = "auto";
+              ta.style.height = `${ta.scrollHeight}px`;
+            }}
+            onKeyDown={handleKeyDown}
+            onBlur={() => handleSave()}
+            isDisabled={isSaving}
+            variant={inputVariant === "borderless" ? "quiet" : "default"}
+            size={resolvedInputSize}
+          />
+        ) : (
+          <TextField
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={() => handleSave()}
+            isDisabled={isSaving}
+            variant={inputVariant === "borderless" ? "quiet" : "default"}
+            size={resolvedInputSize}
+            style={inputStyle}
+          />
+        )}
+      </div>
+    );
+  }
+
+  const effectiveDisplayValue = tempDisplayValue ?? value;
+  const dropdownLabel =
+    resolvedEditor === "dropdown" &&
+    dropdownOptions &&
+    (typeof effectiveDisplayValue === "string" ||
+      typeof effectiveDisplayValue === "number")
+      ? dropdownOptions.find(
+          (option) => option.value === String(effectiveDisplayValue)
+        )?.label
+      : null;
+  const hasDisplayValue =
+    typeof effectiveDisplayValue === "string" ||
+    typeof effectiveDisplayValue === "number"
+      ? String(effectiveDisplayValue).length > 0
+      : Boolean(effectiveDisplayValue);
+
+  const displayValue = children ? (
+    <div className="solara-inline-edit__display" ref={displayRef}>
+      {children({ isEditing: false })}
+    </div>
+  ) : (
+    <div
+      className={[
+        "solara-inline-edit__display",
+        !hasDisplayValue ? "solara-inline-edit__display--empty" : null,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      ref={displayRef}
+    >
+      {hasDisplayValue ? dropdownLabel ?? effectiveDisplayValue : placeholder}
+    </div>
+  );
+
+  return (
+    <div
+      className={rootClasses}
+      onClick={editTrigger === "click" ? handleDisplayClick : undefined}
+      role={editTrigger === "click" && !disabled ? "button" : undefined}
+      tabIndex={editTrigger === "click" && !disabled ? 0 : undefined}
+      onKeyDown={(e) => {
+        if (
+          !disabled &&
+          editTrigger === "click" &&
+          (e.key === "Enter" || e.key === " ")
+        ) {
+          e.preventDefault();
+          e.stopPropagation();
+          startEditingWithMeasurement();
+        }
+      }}
+    >
+      <span
+        ref={measureRef}
+        className="solara-inline-edit__measure"
+        aria-hidden="true"
+      />
+      {displayValue}
+
+      {editTrigger === "button" && isStringValue && !disabled ? (
+        <Button
+          className="solara-inline-edit__button"
+          size={resolvedButtonSize}
+          variant={buttonVariantConfig.variant}
+          destructive={buttonVariantConfig.destructive}
+          label={editLabel}
+          iconLeft={editIconLeft}
+          iconRight={editIconRight}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startEditingWithMeasurement(e);
+          }}
+          aria-label={editLabel}
+        />
+      ) : null}
+      {error ? (
+        <span className="solara-inline-edit__error" role="alert">
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export default InlineEdit;

package/src/InlineEdit.types.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import type { ButtonIcon } from "@solara/button";
+
+export type InlineEditSize =
+  | "xs"
+  | "sm"
+  | "default"
+  | "lg"
+  | "icon"
+  | "small"
+  | "medium"
+  | "large";
+
+export type InlineEditButtonVariant =
+  | "ghost"
+  | "outline"
+  | "default"
+  | "link"
+  | "destructive";
+
+export type InlineEditInputVariant = "borderless" | "default";
+
+export type InlineEditEditor = "text" | "textarea" | "dropdown";
+
+export type InlineEditDropdownOption = {
+  label: string;
+  value: string;
+};
+
+export type InlineEditProps = {
+  /** The current value to display. */
+  value: string | number | React.ReactNode;
+  /** Callback when the value is saved. */
+  onSave: (value: string) => Promise<any> | void;
+  /** Whether the field is disabled. */
+  disabled?: boolean;
+  /** Placeholder text when value is empty. */
+  placeholder?: string;
+  /** Additional class names. */
+  className?: string;
+  /** Size of the component. */
+  size?: InlineEditSize;
+  /** Variant of the edit button. */
+  variant?: InlineEditButtonVariant;
+  /** Label for the edit button. */
+  editLabel?: string;
+  /** Optional icon to render on the edit button. */
+  editIconLeft?: ButtonIcon;
+  /** Optional trailing icon to render on the edit button. */
+  editIconRight?: ButtonIcon;
+  /** Children to render in display mode. */
+  children?: (props: { isEditing: boolean }) => React.ReactNode;
+  /** Whether clicking the display area should trigger editing. */
+  editTrigger?: "button" | "click";
+  /** Input style variant. */
+  inputVariant?: InlineEditInputVariant;
+  /** Optional controlled editing state. */
+  editing?: boolean;
+  /** Optional handler for controlled editing state changes. */
+  onEditingChange?: (editing: boolean) => void;
+  /** Allow switching to multiline editor when display wraps. */
+  allowMultilineWhenWrapped?: boolean;
+  /** Control container width, when false the component hugs content width. */
+  fullWidth?: boolean;
+  /** Which editor to render when editing. */
+  editor?: InlineEditEditor;
+  /** Options for dropdown editor. */
+  dropdownOptions?: InlineEditDropdownOption[];
+  /** Variant for dropdown editor. */
+  dropdownVariant?: "primary" | "default" | "tertiary" | "ghost";
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./InlineEdit";
+export type { InlineEditProps } from "./InlineEdit.types";