aura-glass/dist/esm/components/interactive/GlassInlineEdit.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React from 'react';
import { GlassButton } from '../button/GlassButton.js';
import { cn } from '../../lib/utilsComprehensive.js';

function GlassInlineEdit({
  value,
  onChange,
  placeholder = "Edit…",
  className
}) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value);
  React.useEffect(() => setDraft(value), [value]);
  return jsx("div", {
    "data-glass-component": true,
    className: cn("inline-flex items-center glass-gap-2", className),
    role: "group",
    "aria-label": "Inline editable field",
    children: editing ? jsxs(Fragment, {
      children: [jsx("input", {
        autoFocus: true,
        value: draft,
        onChange: e => setDraft(e.target.value),
        onKeyDown: e => {
          if (e.key === "Enter") {
            onChange(draft);
            setEditing(false);
          }
          if (e.key === "Escape") {
            setDraft(value);
            setEditing(false);
          }
        },
        placeholder: placeholder,
        "aria-label": placeholder,
        className: 'bg-transparent glass-border glass-border-white/20 glass-radius-lg glass-px-2 glass-py-1 glass-text-sm outline-none glass-focus glass-touch-target glass-contrast-guard'
      }), jsx(GlassButton, {
        size: "sm",
        variant: "primary",
        onClick: e => {
          onChange(draft);
          setEditing(false);
        },
        "aria-label": "Save changes",
        className: "glass-focus glass-touch-target",
        children: "Save"
      }), jsx(GlassButton, {
        size: "sm",
        variant: "ghost",
        onClick: e => {
          setDraft(value);
          setEditing(false);
        },
        "aria-label": "Cancel editing",
        className: "glass-focus glass-touch-target",
        children: "Cancel"
      })]
    }) : jsx("button", {
      className: 'glass-px-2 glass-py-1 glass-radius-lg hover:glass-surface-subtle/10 glass-text-sm glass-focus glass-touch-target glass-contrast-guard',
      onClick: e => setEditing(true),
      "aria-label": `Edit ${value || placeholder}`,
      children: value || jsx("span", {
        className: 'text-primary/60',
        children: placeholder
      })
    })
  });
}

export { GlassInlineEdit, GlassInlineEdit as default };
//# sourceMappingURL=GlassInlineEdit.js.map