@tunghtml/strapi-plugin-composite-field 1.0.0

package/README.md

@@ -0,0 +1,150 @@
+# Strapi Plugin Composite Field
+
+A Strapi v5 plugin that creates composite display fields by combining multiple text fields.
+
+![Composite Field Demo](https://img.shields.io/badge/Strapi-v5-blue)
+![npm version](https://img.shields.io/npm/v/@tunghtml/strapi-plugin-composite-field)
+![License](https://img.shields.io/npm/l/@tunghtml/strapi-plugin-composite-field)
+
+## Features
+
+- 🔗 **Multiple Fields**: Combine any text/string fields
+- 🔄 **Generate Button**: Click icon to generate composite value
+- 📝 **Easy Config**: Textarea input (one field per line)
+- ⚙️ **Custom Separator**: Configure separator (default: " - ")
+- ✨ **Auto Spacing**: Automatically adds spaces around separator
+- 🎨 **Clean UI**: Matches Strapi admin design system
+
+## Installation
+
+```bash
+npm install @tunghtml/strapi-plugin-composite-field
+```
+
+Then add the plugin to your `config/plugins.js`:
+
+```javascript
+module.exports = {
+  // ...
+  "composite-field": {
+    enabled: true,
+  },
+};
+```
+
+Rebuild your admin panel:
+
+```bash
+npm run build
+npm run develop
+```
+
+## Usage
+
+### 1. Add Custom Field
+
+- Go to **Content-Type Builder**
+- Select your content type (e.g., Corp Rep List)
+- Click **"Add another field"**
+- Choose **"Composite"** from custom fields
+- Name it (e.g., `displayName`)
+
+### 2. Configure Fields
+
+**Fields to combine** (one per line):
+
+```
+salutation
+firstName
+lastName
+email
+```
+
+**Separator** (optional, default: " - "):
+
+```
+-
+```
+
+### 3. Generate Value
+
+- Fill in source fields (firstName, lastName, email, etc.)
+- Click the **Play icon** button
+- Composite field populates automatically with proper spacing!
+
+## Examples
+
+### Representative Display Name
+
+```
+Fields:
+  salutation
+  firstName
+  lastName
+  email
+
+Separator: -
+
+Result: Mr. - Tung - Le - tung@example.com
+```
+
+### Product SKU
+
+```
+Fields:
+  category
+  brand
+  model
+
+Separator: -
+
+Result: Electronics - Apple - iPhone15
+```
+
+### Full Name
+
+```
+Fields:
+  firstName
+  lastName
+
+Separator: (space)
+
+Result: Tung Le
+```
+
+## Configuration Options
+
+| Option      | Type     | Default | Description                           |
+| ----------- | -------- | ------- | ------------------------------------- |
+| `fields`    | textarea | -       | Field names to combine (one per line) |
+| `separator` | text     | `" - "` | Separator between fields              |
+
+## Notes
+
+- Only combines simple text/string fields
+- Automatically adds spaces around separator for clean output
+- Empty fields are skipped automatically
+- Relation fields are not supported (use simple fields only)
+
+## Requirements
+
+- Strapi v5.0.0 or higher
+- Node.js 18.x or higher
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Issues
+
+If you encounter any issues, please report them at:
+https://github.com/finnwasabi/strapi-plugin-composite-field/issues
+
+## License
+
+MIT
+
+## Author
+
+Tung Le - [@finnwasabi](https://github.com/finnwasabi)

package/dist/_chunks/CompositeInput-BsQuuQxB.js

@@ -0,0 +1,560 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+var reactIs$1 = { exports: {} };
+var reactIs_production_min = {};
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
+  var b = "function" === typeof Symbol && Symbol.for, c = b ? Symbol.for("react.element") : 60103, d = b ? Symbol.for("react.portal") : 60106, e = b ? Symbol.for("react.fragment") : 60107, f = b ? Symbol.for("react.strict_mode") : 60108, g = b ? Symbol.for("react.profiler") : 60114, h = b ? Symbol.for("react.provider") : 60109, k = b ? Symbol.for("react.context") : 60110, l = b ? Symbol.for("react.async_mode") : 60111, m = b ? Symbol.for("react.concurrent_mode") : 60111, n = b ? Symbol.for("react.forward_ref") : 60112, p = b ? Symbol.for("react.suspense") : 60113, q = b ? Symbol.for("react.suspense_list") : 60120, r = b ? Symbol.for("react.memo") : 60115, t = b ? Symbol.for("react.lazy") : 60116, v = b ? Symbol.for("react.block") : 60121, w = b ? Symbol.for("react.fundamental") : 60117, x = b ? Symbol.for("react.responder") : 60118, y = b ? Symbol.for("react.scope") : 60119;
+  function z(a) {
+    if ("object" === typeof a && null !== a) {
+      var u = a.$$typeof;
+      switch (u) {
+        case c:
+          switch (a = a.type, a) {
+            case l:
+            case m:
+            case e:
+            case g:
+            case f:
+            case p:
+              return a;
+            default:
+              switch (a = a && a.$$typeof, a) {
+                case k:
+                case n:
+                case t:
+                case r:
+                case h:
+                  return a;
+                default:
+                  return u;
+              }
+          }
+        case d:
+          return u;
+      }
+    }
+  }
+  function A(a) {
+    return z(a) === m;
+  }
+  reactIs_production_min.AsyncMode = l;
+  reactIs_production_min.ConcurrentMode = m;
+  reactIs_production_min.ContextConsumer = k;
+  reactIs_production_min.ContextProvider = h;
+  reactIs_production_min.Element = c;
+  reactIs_production_min.ForwardRef = n;
+  reactIs_production_min.Fragment = e;
+  reactIs_production_min.Lazy = t;
+  reactIs_production_min.Memo = r;
+  reactIs_production_min.Portal = d;
+  reactIs_production_min.Profiler = g;
+  reactIs_production_min.StrictMode = f;
+  reactIs_production_min.Suspense = p;
+  reactIs_production_min.isAsyncMode = function(a) {
+    return A(a) || z(a) === l;
+  };
+  reactIs_production_min.isConcurrentMode = A;
+  reactIs_production_min.isContextConsumer = function(a) {
+    return z(a) === k;
+  };
+  reactIs_production_min.isContextProvider = function(a) {
+    return z(a) === h;
+  };
+  reactIs_production_min.isElement = function(a) {
+    return "object" === typeof a && null !== a && a.$$typeof === c;
+  };
+  reactIs_production_min.isForwardRef = function(a) {
+    return z(a) === n;
+  };
+  reactIs_production_min.isFragment = function(a) {
+    return z(a) === e;
+  };
+  reactIs_production_min.isLazy = function(a) {
+    return z(a) === t;
+  };
+  reactIs_production_min.isMemo = function(a) {
+    return z(a) === r;
+  };
+  reactIs_production_min.isPortal = function(a) {
+    return z(a) === d;
+  };
+  reactIs_production_min.isProfiler = function(a) {
+    return z(a) === g;
+  };
+  reactIs_production_min.isStrictMode = function(a) {
+    return z(a) === f;
+  };
+  reactIs_production_min.isSuspense = function(a) {
+    return z(a) === p;
+  };
+  reactIs_production_min.isValidElementType = function(a) {
+    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+  };
+  reactIs_production_min.typeOf = z;
+  return reactIs_production_min;
+}
+var reactIs_development = {};
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function() {
+      var hasSymbol = typeof Symbol === "function" && Symbol.for;
+      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
+      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
+      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107;
+      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108;
+      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114;
+      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109;
+      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110;
+      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111;
+      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111;
+      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112;
+      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113;
+      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 60120;
+      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115;
+      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116;
+      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 60121;
+      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117;
+      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118;
+      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119;
+      function isValidElementType(type) {
+        return typeof type === "string" || typeof type === "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === "object" && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+      }
+      function typeOf(object) {
+        if (typeof object === "object" && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_ASYNC_MODE_TYPE:
+                case REACT_CONCURRENT_MODE_TYPE:
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return void 0;
+      }
+      var AsyncMode = REACT_ASYNC_MODE_TYPE;
+      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true;
+            console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.");
+          }
+        }
+        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+      }
+      function isConcurrentMode(object) {
+        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      reactIs_development.AsyncMode = AsyncMode;
+      reactIs_development.ConcurrentMode = ConcurrentMode;
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development;
+}
+if (process.env.NODE_ENV === "production") {
+  reactIs$1.exports = requireReactIs_production_min();
+} else {
+  reactIs$1.exports = requireReactIs_development();
+}
+var reactIsExports = reactIs$1.exports;
+var reactIs = reactIsExports;
+var FORWARD_REF_STATICS = {
+  "$$typeof": true,
+  render: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true
+};
+var MEMO_STATICS = {
+  "$$typeof": true,
+  compare: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true,
+  type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+function invariant(condition, message, Err) {
+  if (Err === void 0) {
+    Err = Error;
+  }
+  if (!condition) {
+    throw new Err(message);
+  }
+}
+var defaultErrorHandler = function(error) {
+  if (process.env.NODE_ENV !== "production") {
+    console.error(error);
+  }
+};
+var defaultWarnHandler = function(warning) {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(warning);
+  }
+};
+var DEFAULT_INTL_CONFIG = {
+  formats: {},
+  messages: {},
+  timeZone: void 0,
+  defaultLocale: "en",
+  defaultFormats: {},
+  fallbackOnEmptyString: true,
+  onError: defaultErrorHandler,
+  onWarn: defaultWarnHandler
+};
+function invariantIntlContext(intl) {
+  invariant(intl, "[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.");
+}
+__assign(__assign({}, DEFAULT_INTL_CONFIG), { textComponent: React__namespace.Fragment });
+var IntlContext = typeof window !== "undefined" && !window.__REACT_INTL_BYPASS_GLOBAL_CONTEXT__ ? window.__REACT_INTL_CONTEXT__ || (window.__REACT_INTL_CONTEXT__ = React__namespace.createContext(null)) : React__namespace.createContext(null);
+IntlContext.Consumer;
+IntlContext.Provider;
+var Context = IntlContext;
+function useIntl() {
+  var intl = React__namespace.useContext(Context);
+  invariantIntlContext(intl);
+  return intl;
+}
+var DisplayName;
+(function(DisplayName2) {
+  DisplayName2["formatDate"] = "FormattedDate";
+  DisplayName2["formatTime"] = "FormattedTime";
+  DisplayName2["formatNumber"] = "FormattedNumber";
+  DisplayName2["formatList"] = "FormattedList";
+  DisplayName2["formatDisplayName"] = "FormattedDisplayName";
+})(DisplayName || (DisplayName = {}));
+var DisplayNameParts;
+(function(DisplayNameParts2) {
+  DisplayNameParts2["formatDate"] = "FormattedDateParts";
+  DisplayNameParts2["formatTime"] = "FormattedTimeParts";
+  DisplayNameParts2["formatNumber"] = "FormattedNumberParts";
+  DisplayNameParts2["formatList"] = "FormattedListParts";
+})(DisplayNameParts || (DisplayNameParts = {}));
+function createFormattedDateTimePartsComponent(name) {
+  var ComponentParts = function(props) {
+    var intl = useIntl();
+    var value = props.value, children = props.children, formatProps = __rest(props, ["value", "children"]);
+    var date = typeof value === "string" ? new Date(value || 0) : value;
+    var formattedParts = name === "formatDate" ? intl.formatDateToParts(date, formatProps) : intl.formatTimeToParts(date, formatProps);
+    return children(formattedParts);
+  };
+  ComponentParts.displayName = DisplayNameParts[name];
+  return ComponentParts;
+}
+function createFormattedComponent(name) {
+  var Component = function(props) {
+    var intl = useIntl();
+    var value = props.value, children = props.children, formatProps = __rest(
+      props,
+      ["value", "children"]
+    );
+    var formattedValue = intl[name](value, formatProps);
+    if (typeof children === "function") {
+      return children(formattedValue);
+    }
+    var Text = intl.textComponent || React__namespace.Fragment;
+    return React__namespace.createElement(Text, null, formattedValue);
+  };
+  Component.displayName = DisplayName[name];
+  return Component;
+}
+createFormattedComponent("formatDate");
+createFormattedComponent("formatTime");
+createFormattedComponent("formatNumber");
+createFormattedComponent("formatList");
+createFormattedComponent("formatDisplayName");
+createFormattedDateTimePartsComponent("formatDate");
+createFormattedDateTimePartsComponent("formatTime");
+const CompositeInput = (props) => {
+  if (!props) {
+    return null;
+  }
+  const {
+    attribute,
+    name,
+    value,
+    onChange,
+    disabled,
+    required,
+    error,
+    description,
+    labelAction,
+    label,
+    intlLabel
+  } = props;
+  const { formatMessage } = useIntl();
+  const [localValue, setLocalValue] = React__namespace.default.useState(value || "");
+  React__namespace.default.useEffect(() => {
+    setLocalValue(value || "");
+  }, [value]);
+  const fieldsConfig = attribute?.options?.fields || "";
+  const separator = attribute?.options?.separator || " - ";
+  let fields = [];
+  if (typeof fieldsConfig === "string") {
+    fields = fieldsConfig.split("\n").map((f) => f.trim()).filter(Boolean);
+  }
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    if (onChange) {
+      onChange({ target: { name, value: newValue, type: "text" } });
+    }
+  };
+  const handleGenerate = () => {
+    const formData = {};
+    fields.forEach((fieldPath) => {
+      const input = document.querySelector(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
+      );
+      if (input && input.value) {
+        formData[fieldPath] = input.value;
+      }
+    });
+    const parts = [];
+    fields.forEach((fieldPath) => {
+      const fieldValue = formData[fieldPath];
+      if (fieldValue) {
+        parts.push(fieldValue);
+      }
+    });
+    const cleanSeparator = separator.trim();
+    const result = parts.join(` ${cleanSeparator} `).trim();
+    setLocalValue(result);
+    if (onChange) {
+      onChange({ target: { name, value: result, type: "text" } });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint: description?.id ? formatMessage(description) : description,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label || intlLabel?.defaultMessage || name }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Field.Input,
+            {
+              type: "text",
+              value: localValue,
+              onChange: handleChange,
+              disabled,
+              placeholder: "Click button to generate",
+              style: { paddingRight: "40px" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                right: "8px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  type: "button",
+                  onClick: handleGenerate,
+                  disabled: disabled || fields.length === 0,
+                  variant: "tertiary",
+                  "aria-label": "Generate composite value",
+                  style: {
+                    width: "28px",
+                    height: "28px",
+                    padding: "0",
+                    minWidth: "auto",
+                    border: "none",
+                    background: "transparent",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#8e8ea9"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, { style: { width: "14px", height: "14px" } })
+                }
+              )
+            }
+          )
+        ] }),
+        fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+          "Combines: ",
+          fields.join(", ")
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+      ] })
+    }
+  );
+};
+exports.default = CompositeInput;