@hyddenlabs/hydn-ui 0.3.0-alpha.184 → 0.3.0-alpha.185

package/dist/index.cjs

@@ -5307,6 +5307,137 @@ function Code({ children, size = "md", variant = "default", className = "" }) {
 }
 Code.displayName = "Code";
 var code_default = Code;
+function EditableText({
+  value: controlledValue,
+  defaultValue = "",
+  onSave,
+  onChange,
+  onCancel,
+  onEdit,
+  placeholder = "Click to edit",
+  disabled = false,
+  size = "md",
+  validationState = "default",
+  className = "",
+  id,
+  name,
+  required = false,
+  autoFocus = true,
+  maxLength,
+  saveOnEnter = true
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState("");
+  const inputRef = React.useRef(null);
+  const currentValue = isControlled ? controlledValue : internalValue;
+  React.useEffect(() => {
+    if (isEditing && autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing, autoFocus]);
+  const handleClick = () => {
+    if (disabled) return;
+    setEditValue(currentValue);
+    setIsEditing(true);
+    onEdit?.();
+  };
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (!isControlled) {
+      setInternalValue(trimmedValue);
+    }
+    onSave?.(trimmedValue);
+    onChange?.(trimmedValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setEditValue(currentValue);
+    setIsEditing(false);
+    onCancel?.();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    } else if (e.key === "Enter" && saveOnEnter && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+  const handleBlur = (e) => {
+    setTimeout(() => {
+      const relatedTarget = e.relatedTarget;
+      const isClickingButton = relatedTarget?.closest("[data-editable-actions]");
+      if (!isClickingButton) {
+        handleCancel();
+      }
+    }, 0);
+  };
+  const handleChange = (e) => {
+    setEditValue(e.target.value);
+  };
+  const sizeConfig = {
+    xs: "text-sm sm:text-xs",
+    sm: "text-base sm:text-sm",
+    md: "text-base sm:text-sm",
+    lg: "text-lg sm:text-base",
+    xl: "text-xl sm:text-lg"
+  }[size];
+  if (isEditing) {
+    const validationBorder = {
+      default: "border-b-foreground/30 focus:border-b-foreground",
+      error: "border-b-destructive focus:border-b-destructive",
+      success: "border-b-success focus:border-b-success",
+      warning: "border-b-warning focus:border-b-warning"
+    }[validationState];
+    const commonProps = {
+      ref: inputRef,
+      value: editValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      id,
+      name,
+      required,
+      maxLength,
+      className: `${sizeConfig} w-full border-0 border-b ${validationBorder} bg-transparent py-1 outline-none transition-colors placeholder:text-muted-foreground`
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...commonProps, type: "text" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-editable-actions": true, className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icon_button_default, { icon: "IconX", ariaLabel: "Cancel", onClick: handleCancel, variant: "error", size: "xs" }),
+        /* @__PURE__ */ jsxRuntime.jsx(icon_button_default, { icon: "IconCheck", ariaLabel: "Save", onClick: handleSave, variant: "success", size: "xs" })
+      ] })
+    ] });
+  }
+  const displayText = currentValue || placeholder;
+  const isPlaceholder = !currentValue;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: `group ${sizeConfig} ${className} relative inline-flex items-center gap-2 cursor-text border-b border-transparent py-1 text-left transition-all hover:border-b-foreground/30 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:rounded disabled:cursor-not-allowed disabled:opacity-50 ${isPlaceholder ? "text-muted-foreground" : "text-foreground"} w-fit max-w-full`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: displayText }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            name: "IconPencil",
+            className: "shrink-0 opacity-0 transition-opacity group-hover:opacity-50 group-focus:opacity-50",
+            size: "xs"
+          }
+        )
+      ]
+    }
+  );
+}
 var alignClasses3 = {
   start: "items-start",
   center: "items-center",
@@ -6319,6 +6450,7 @@ exports.Divider = divider_default;
 exports.Drawer = drawer_default;
 exports.Dropdown = dropdown_default;
 exports.DropdownItem = DropdownItem;
+exports.EditableText = EditableText;
 exports.EmptyState = empty_state_default;
 exports.FeatureSection = feature_section_default;
 exports.Fieldset = fieldset_default;