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

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

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

function GlassKeyValueEditor({
  value,
  onChange,
  className
}) {
  const pairs = Array.isArray(value) ? value : [];
  const emitChange = onChange || (() => {});
  const update = (i, patch) => {
    const next = pairs.slice();
    next[i] = {
      ...next[i],
      ...patch
    };
    emitChange(next);
  };
  const add = () => emitChange([...pairs, {
    key: "",
    value: ""
  }]);
  const remove = i => emitChange(pairs.filter((_, idx) => idx !== i));
  return jsxs("div", {
    "data-glass-component": true,
    className: cn("glass-gap-2", className),
    role: "group",
    "aria-label": "Key-value pair editor",
    children: [pairs.map((p, i) => jsxs("div", {
      className: "glass-flex glass-gap-2",
      role: "group",
      "aria-label": `Key-value pair ${i + 1}`,
      children: [jsx("input", {
        value: p.key,
        onChange: e => update(i, {
          key: e.target.value
        }),
        placeholder: "Key",
        "aria-label": `Key for pair ${i + 1}`,
        className: 'glass-flex-1 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("input", {
        value: p.value,
        onChange: e => update(i, {
          value: e.target.value
        }),
        placeholder: "Value",
        "aria-label": `Value for pair ${i + 1}`,
        className: 'glass-flex-1 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: "ghost",
        onClick: e => remove(i),
        "aria-label": `Remove pair ${i + 1}`,
        className: "glass-focus glass-touch-target",
        children: "Remove"
      })]
    }, i)), jsx(GlassButton, {
      size: "sm",
      variant: "secondary",
      onClick: add,
      "aria-label": "Add new key-value pair",
      className: "glass-focus glass-touch-target",
      children: "Add"
    })]
  });
}

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