@membranehq/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Integration.app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# [Integration.app](https://integration.app) React Package
+
+[![npm version](https://badge.fury.io/js/@membranehq%2Freact.svg)](https://badge.fury.io/js/@membranehq%2Freact)
+
+React components and hooks for seamless integration with Integration.app services.
+
+## 📚 Documentation
+
+- [Developer Documentation](https://console.integration.app/docs/getting-started/front-end/react)
+- [REST API Reference](https://api-reference.integration.app)
+
+## 🚀 Installation
+
+With NPM:
+```bash
+npm install @membranehq/react
+```
+
+With Yarn:
+```bash
+yarn add @membranehq/react
+```
+
+## ✨ Features
+
+- Easy-to-use React hooks
+- Pre-built UI components
+- TypeScript support
+
+## 🆘 Support
+
+- For issues and feature requests, please contact us over email: <a href="mailto:support@integration.app">support@integration.app</a>
+- For documentation, visit our [docs portal](https://console.integration.app/docs/getting-started/front-end/react)

package/dist/cjs/_modules/awesome-debounce-promise.cjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AwesomeDebouncePromiseImport = require('awesome-debounce-promise');
+
+const AwesomeDebouncePromise = (
+  // @ts-ignore
+  AwesomeDebouncePromiseImport?.default ?? AwesomeDebouncePromiseImport
+);
+
+exports.default = AwesomeDebouncePromise;

package/dist/cjs/components/AdvancedOptions.cjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Button = require('./Button/Button.cjs');
+
+function AdvancedOptions({
+  title = "advanced options",
+  openByDefault = false,
+  children
+}) {
+  const [showAdvancedOptions, setShowAdvancedOptions] = React.useState(openByDefault);
+  return showAdvancedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "ajax", onClick: () => setShowAdvancedOptions(false), className: "-ml-6 self-start", children: [
+      "Hide ",
+      title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "ajax", onClick: () => setShowAdvancedOptions(true), className: "-ml-6 self-start", children: [
+    "Show ",
+    title
+  ] });
+}
+
+exports.AdvancedOptions = AdvancedOptions;

package/dist/cjs/components/Button/Button.cjs

@@ -0,0 +1,109 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+var index = require('../Tooltip/index.cjs');
+var Button_module = require('./Button.module.css.cjs');
+
+function getButtonClassesByVariant(variant) {
+  switch (variant) {
+    case "ajax":
+      return Button_module.default["uikit-button--ajax"];
+    case "text":
+      return Button_module.default["uikit-button--text"];
+    case "outline":
+      return Button_module.default["uikit-button--outline"];
+    case "secondary":
+      return Button_module.default["uikit-button--secondary"];
+    case "warning":
+      return Button_module.default["uikit-button--warning"];
+    case "primary":
+    default:
+      return Button_module.default["uikit-button--primary"];
+  }
+}
+function getButtonClassesBySize(size) {
+  switch (size) {
+    case "large":
+      return Button_module.default["uikit-button--large"];
+    case "small":
+      return Button_module.default["uikit-button--small"];
+    case "medium":
+    default:
+      return Button_module.default["uikit-button--medium"];
+  }
+}
+const GenericButton = React.forwardRef(
+  ({ children, className, loading, tooltip, tooltipProps = {}, ...restProps }, ref) => {
+    const button = /* @__PURE__ */ jsxRuntime.jsxs("button", { className, type: "button", ...restProps, ref, "aria-busy": loading ? "true" : void 0, children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSvgIcon, { type: svgIconType.SvgIconType.Loader }),
+      children
+    ] });
+    if (tooltip) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip, ...tooltipProps, children: button });
+    }
+    return button;
+  }
+);
+GenericButton.displayName = "GenericButton";
+const Button = React.forwardRef(
+  ({ variant = "primary", size = "medium", className, children, ...restProps }, ref) => {
+    const buttonClass = clsx.clsx([
+      Button_module.default["uikit-button"],
+      getButtonClassesByVariant(variant),
+      getButtonClassesBySize(size),
+      className
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(GenericButton, { className: buttonClass, ...restProps, ref, children });
+  }
+);
+Button.displayName = "Button";
+const IconButton = React.forwardRef(
+  ({ children, size = "medium", className, isActive, tooltip, ...restProps }, ref) => {
+    const buttonIconClass = clsx.clsx([
+      Button_module.default["uikit-button"],
+      Button_module.default["uikit-button--icon"],
+      isActive && Button_module.default["uikit-button--icon__active"],
+      getButtonClassesBySize(size),
+      className
+    ]);
+    const button = /* @__PURE__ */ jsxRuntime.jsx("button", { className: buttonIconClass, ...restProps, ref, children });
+    if (tooltip) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip, children: button });
+    }
+    return button;
+  }
+);
+function ButtonSvgIcon({
+  type,
+  className,
+  size = "normal",
+  position = "start"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.SvgIcon,
+    {
+      type,
+      className: clsx.clsx(
+        Button_module.default.uikitButtonSvgIcon,
+        className,
+        size === "small" ? Button_module.default.uikitButtonSvgIcon_small : Button_module.default.uikitButtonSvgIcon_normal,
+        position === "end" ? Button_module.default.uikitButtonSvgIcon_end : Button_module.default.uikitButtonSvgIcon_start
+      )
+    }
+  );
+}
+
+exports.Button = Button;
+exports.IconButton = IconButton;

package/dist/cjs/components/Button/Button.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".Button-module_container__jA0Sz {\n  width: 100%\n}\n\n@media (min-width: 640px) {\n\n  .Button-module_container__jA0Sz {\n    max-width: 640px\n  }\n}\n\n@media (min-width: 768px) {\n\n  .Button-module_container__jA0Sz {\n    max-width: 768px\n  }\n}\n\n@media (min-width: 1024px) {\n\n  .Button-module_container__jA0Sz {\n    max-width: 1024px\n  }\n}\n\n@media (min-width: 1280px) {\n\n  .Button-module_container__jA0Sz {\n    max-width: 1280px\n  }\n}\n\n@media (min-width: 1536px) {\n\n  .Button-module_container__jA0Sz {\n    max-width: 1536px\n  }\n}\n\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n    border-radius: 0.25rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 100ms;\n    height: 2.25rem\n  }\n\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\n      height: 2.25rem;\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n    }\n}\n  .Button-module_uikit-button__AuMtw {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 200ms\n  }\n\n  .Button-module_uikit-button__AuMtw:disabled {\n    cursor: default\n  }\n\n  .Button-module_uikit-button__AuMtw svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem;\n    display: inline;\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle\n  }\n\n  /* ### SIZE ### */\n  .Button-module_uikit-button--large__9cQ-5 {\n    height: 2.5rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2.25rem /* h-9 */\n  }\n  .Button-module_uikit-button--large__9cQ-5 svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-left: -0.375rem;\n    margin-right: 0.5rem\n  }\n  .Button-module_uikit-button--medium__P5rpZ {\n    height: 2.25rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n  }\n\n  .Button-module_uikit-button--small__5L5Ch {\n    height: 1.75rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    line-height: 1.75rem /* h-7 */\n  }\n\n  /* ### TYPE ### */\n\n  .Button-module_uikit-button--primary__BsMcw {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(25 25 25 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1))\n  }\n  .Button-module_uikit-button--primary__BsMcw:disabled {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(105 105 105 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(105 105 105 / var(--tw-bg-opacity, 1))\n  }\n  .Button-module_uikit-button--primary__BsMcw:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(15 76 117 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1))\n  }\n\n  .Button-module_uikit-button--secondary__ENap8 {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1))\n  }\n  .Button-module_uikit-button--secondary__ENap8:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--secondary__ENap8:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1))\n  }\n\n  .Button-module_uikit-button--warning__B0a1y {\n    --tw-bg-opacity: 1;\n    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));\n    --tw-border-opacity: 0.5\n  }\n  .Button-module_uikit-button--warning__B0a1y:disabled {\n    background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n    --tw-bg-opacity: 0.8;\n    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));\n    --tw-border-opacity: 0.1;\n    --tw-text-opacity: 1;\n    color: rgb(254 226 226 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--warning__B0a1y:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    --tw-bg-opacity: 1;\n    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))\n  }\n\n  .Button-module_uikit-button--outline__lESp6 {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--outline__lESp6:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--outline__lESp6:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1))\n  }\n\n  .Button-module_uikit-button--text__JPp9w {\n    border-style: none !important;\n    background-color: transparent\n  }\n  .Button-module_uikit-button--text__JPp9w:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--text__JPp9w:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1))\n  }\n\n  .Button-module_uikit-button--ajax__Kl1-1 {\n    border-style: none !important;\n    background-color: transparent;\n    --tw-text-opacity: 1;\n    color: rgb(13 121 194 / var(--tw-text-opacity, 1));\n    text-decoration-line: underline;\n    text-decoration-style: dashed;\n    text-decoration-thickness: 0.05rem;\n    text-underline-offset: 0.15rem\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:not(:disabled):hover {\n    --tw-text-opacity: 1;\n    color: rgb(15 76 117 / var(--tw-text-opacity, 1));\n    text-decoration-style: solid\n  }\n\n  .Button-module_uikit-button--icon__0ouUU {\n    height: 1.5rem;\n    width: 1.5rem;\n    align-items: center;\n    justify-content: center;\n    padding: 0px;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--icon__0ouUU:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button--icon__0ouUU:not(:disabled):hover,\n  .Button-module_uikit-button--icon__active__hWz2W {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity, 1))\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU {\n    border-width: 0px;\n    background-color: transparent\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU svg {\n    margin: 0px;\n    height: 1.25rem;\n    width: 1.25rem;\n    stroke: currentColor\n  }\n\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1rem;\n    width: 1rem\n  }\n\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU {\n    height: 1.75rem;\n    width: 1.75rem\n  }\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1.5rem;\n    width: 1.5rem\n  }\n\n  /* Hide icon goes after loader icon */\n  .Button-module_uikit-button__AuMtw[aria-busy='true'] svg + svg {\n    display: none\n  }\n\n  .Button-module_uikitButtonSvgIcon__Y-4HV {\n    display: inline;\n    vertical-align: middle\n  }\n  .Button-module_uikitButtonSvgIcon_normal__KfS3A {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_small__A9XQR {\n    margin-top: 0.125rem;\n    height: 1rem;\n    width: 1rem\n  }\n  .Button-module_uikitButtonSvgIcon_start__rgkNm {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.375rem;\n    margin-right: -0.25rem\n  }\n\n  .Button-module_uikitButtonSvgIcon_small__A9XQR.Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.25rem;\n    margin-right: -0.375rem\n  }\n}\n";
+var classes = {"uikit-button":"Button-module_uikit-button__AuMtw","uikitButtonSvgIcon":"Button-module_uikitButtonSvgIcon__Y-4HV","uikit-button--large":"Button-module_uikit-button--large__9cQ-5","uikit-button--medium":"Button-module_uikit-button--medium__P5rpZ","uikit-button--small":"Button-module_uikit-button--small__5L5Ch","uikit-button--primary":"Button-module_uikit-button--primary__BsMcw","uikit-button--secondary":"Button-module_uikit-button--secondary__ENap8","uikit-button--warning":"Button-module_uikit-button--warning__B0a1y","uikit-button--outline":"Button-module_uikit-button--outline__lESp6","uikit-button--text":"Button-module_uikit-button--text__JPp9w","uikit-button--ajax":"Button-module_uikit-button--ajax__Kl1-1","uikit-button--icon":"Button-module_uikit-button--icon__0ouUU","uikit-button--icon__active":"Button-module_uikit-button--icon__active__hWz2W","uikitButtonSvgIcon_normal":"Button-module_uikitButtonSvgIcon_normal__KfS3A","uikitButtonSvgIcon_small":"Button-module_uikitButtonSvgIcon_small__A9XQR","uikitButtonSvgIcon_start":"Button-module_uikitButtonSvgIcon_start__rgkNm","uikitButtonSvgIcon_end":"Button-module_uikitButtonSvgIcon_end__ZyJvx"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/ComboBox/Badges/ComboBoxFormulaBadge.cjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var index = require('../../DataBuilder/Formula/index.cjs');
+var noUi = require('../../DataBuilder/Formula/noUi.cjs');
+
+const ComboBoxFormulaBadge = React.forwardRef(
+  ({ value, ...props }, ref) => {
+    const formula = sdk.getFormula(value);
+    if (!formula) {
+      return /* @__PURE__ */ jsxRuntime.jsx(noUi.default, {});
+    }
+    const formulaMapping = index.formulaComponentMapping[formula.type];
+    if (!formulaMapping?.component) {
+      return /* @__PURE__ */ jsxRuntime.jsx(noUi.default, {});
+    }
+    const FormulaComponent = formulaMapping.component;
+    return /* @__PURE__ */ jsxRuntime.jsx(FormulaComponent, { ...props, formula, ref });
+  }
+);
+ComboBoxFormulaBadge.displayName = "ComboBoxFormulaValue";
+
+exports.ComboBoxFormulaBadge = ComboBoxFormulaBadge;

package/dist/cjs/components/ComboBox/Badges/ComboBoxSchemaValueBadge.cjs

@@ -0,0 +1,124 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var useSWR = require('swr');
+var index$1 = require('./EditorTagBadge/index.cjs');
+var index$2 = require('../../SvgIcon/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var integrationAppConnectionContext = require('../../../contexts/integration-app-connection-context.cjs');
+var integrationAppContext = require('../../../contexts/integration-app-context.cjs');
+var css = require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var index = require('../../Truncate/index.cjs');
+var constants = require('../options-factories/custom-field/constants.cjs');
+
+const ComboBoxSchemaValueBadge = React.forwardRef(
+  ({ value, schema: providedSchema, variablesSchema, className, disabled, ...props }, ref) => {
+    let valueElement;
+    const schema = providedSchema?.type ? providedSchema : sdk.getSchemaFromValue(value, variablesSchema);
+    const refCollection = sdk.getReferenceCollectionPointerForSchema(schema);
+    if (refCollection) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ReferenceCollectionValue, { schema, value, onDelete: props.onDelete });
+    }
+    if (schema?.referenceRecords) {
+      const selectedRecord = schema.referenceRecords.find((r) => r.id == value);
+      if (selectedRecord?.name) {
+        valueElement = /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: selectedRecord.name });
+      }
+    }
+    if (!valueElement) {
+      valueElement = getChildrenForSchemaType(schema, value);
+    }
+    if (valueElement) {
+      const icon = getIconForSchemaType(schema);
+      return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { className, ref, disabled, variant: "static-value", ...props, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: icon }),
+        valueElement
+      ] });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { className, ref, disabled, variant: "static-value", ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.QuestionMark }),
+        "Unknown"
+      ] });
+    }
+  }
+);
+ComboBoxSchemaValueBadge.displayName = "ComboBoxSchemaValue";
+function getChildrenForSchemaType(schema, value) {
+  switch (schema?.type) {
+    case "boolean":
+      return value === void 0 ? void 0 : value ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Yes" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No" });
+    case "object":
+      if (Object.keys(schema?.properties ?? {}).length === 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: constants.CUSTOM_OBJECT_VALUE_LABEL });
+      }
+      break;
+    case "array":
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: constants.CUSTOM_ARRAY_VALUE_LABEL });
+    case "string":
+    case "number":
+    case "integer":
+    default:
+      if (value !== void 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: value?.toString() });
+      }
+  }
+  return void 0;
+}
+function getIconForSchemaType(schema) {
+  switch (schema?.type) {
+    case "string":
+      return svgIconType.SvgIconType.SchemaType_string;
+    case "boolean":
+      return svgIconType.SvgIconType.SchemaType_boolean;
+    case "number":
+    case "integer":
+      return svgIconType.SvgIconType.Braces;
+    default:
+      return void 0;
+  }
+}
+function ReferenceCollectionValue({
+  value,
+  schema,
+  onDelete
+}) {
+  const client = integrationAppContext.useIntegrationApp();
+  const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const strValue = value?.toString() ?? "";
+  const key = `reference-value-${connectionId}-${strValue}`;
+  const pointer = sdk.getReferenceCollectionPointerForSchema(schema);
+  const { data: findResponse, isLoading } = useSWR(
+    client && connectionId ? key : void 0,
+    async () => {
+      try {
+        return await client.connection(connectionId).dataCollection(pointer.key, pointer.parameters).findById({ id: String(value) });
+      } catch {
+        return void 0;
+      }
+    }
+  );
+  const record = findResponse?.record;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "value", onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: record?.name || strValue }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$2.SvgIcon, { type: svgIconType.SvgIconType.Loader, className: css.css({ w: "3", aspectRatio: "aspect-square" }) })
+    ] });
+  }
+  if (record?.name) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadge, { variant: "value", onDelete, children: record.name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadge, { variant: "value", onDelete, children: strValue });
+}
+
+exports.ComboBoxSchemaValueBadge = ComboBoxSchemaValueBadge;

package/dist/cjs/components/ComboBox/Badges/ComboBoxValueBadge.cjs

@@ -0,0 +1,76 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var index = require('./EditorTagBadge/index.cjs');
+var ComboBoxFormulaBadge = require('./ComboBoxFormulaBadge.cjs');
+var ComboBoxSchemaValueBadge = require('./ComboBoxSchemaValueBadge.cjs');
+var isDefinedValue = require('./isDefinedValue.cjs');
+var comboboxContext = require('../context/combobox-context.cjs');
+
+const ComboBoxValueBadge = React.forwardRef(function({ placeholder, isDropdownOpen, disabled, onClick, className, onDelete }, ref) {
+  const { value, variablesSchema, schema, options: staticOptions } = comboboxContext.useComboBox();
+  const isValueDefined = isDefinedValue.isDefinedValue(value);
+  if (isDropdownOpen && (!isValueDefined || value === "")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadge, { ref, className, variant: "ghost" });
+  }
+  if (isValueDefined) {
+    if (sdk.isFormula(value)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComboBoxFormulaBadge.ComboBoxFormulaBadge,
+        {
+          ref,
+          value,
+          variablesSchema,
+          disabled,
+          onClick,
+          className,
+          onDelete
+        }
+      );
+    }
+    if (staticOptions) {
+      const selectedOption = staticOptions.find((option) => option.value === value);
+      if (selectedOption) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          index.EditorTagBadge,
+          {
+            ref,
+            disabled,
+            className,
+            variant: "value",
+            onDelete,
+            onClick,
+            children: selectedOption.label
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComboBoxSchemaValueBadge.ComboBoxSchemaValueBadge,
+      {
+        ref,
+        value,
+        schema,
+        variablesSchema,
+        disabled,
+        onClick,
+        className,
+        onDelete
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, onClick, children: placeholder });
+});
+ComboBoxValueBadge.displayName = "ComboBoxValue";
+
+exports.ComboBoxValueBadge = ComboBoxValueBadge;

package/dist/cjs/components/ComboBox/Badges/EditorTagBadge/NestedBadgeValue.cjs

@@ -0,0 +1,93 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var index = require('./index.cjs');
+var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
+var intersperse = require('../../../../helpers/intersperse.cjs');
+var css = require('../../../../styled-system/css/css.cjs');
+require('../../../../styled-system/helpers.cjs');
+var sva = require('../../../../styled-system/css/sva.cjs');
+
+const nestedBadgeValueRecipe = sva.sva({
+  className: "nested-badge-value",
+  slots: ["root", "segment", "visible-segment", "truncated-segment", "chunk"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      truncate: true,
+      "& svg": {
+        display: "inline-block",
+        verticalAlign: "middle"
+      }
+    },
+    segment: {
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)"
+    },
+    "visible-segment": {
+      flexShrink: "0",
+      flexGrow: "0"
+    },
+    "truncated-segment": {
+      display: "inline-block",
+      truncate: true
+    },
+    chunk: {
+      whiteSpace: "nowrap",
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)",
+      truncate: true
+    }
+  }
+});
+function NestedBadgeValue({ nameChunks, fullName }) {
+  if (nameChunks.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Error: undefined" });
+  }
+  const styles = nestedBadgeValueRecipe();
+  const nameElements = nameChunks.map((chunk, idx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.chunk, children: chunk }, idx + chunk));
+  if (nameElements.length === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.root, children: nameElements[0] });
+  }
+  if (nameElements.length <= 2) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.root, children: intersperse.intersperse(nameElements, /* @__PURE__ */ jsxRuntime.jsx(ValueNestingIcon, {})).map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) });
+  }
+  const { 0: first, [nameChunks.length - 1]: last, ...rest } = nameElements;
+  const middle = Object.values(rest);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.root, title: fullName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(styles.segment, styles["visible-segment"]), children: first }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(styles.segment, styles["truncated-segment"]), children: middle.map((segment, idx) => [/* @__PURE__ */ jsxRuntime.jsx(ValueNestingIcon, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(styles.segment, styles["visible-segment"]), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ValueNestingIcon, {}),
+      last
+    ] })
+  ] });
+}
+function ValueNestingIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.EditorTagBadgeIcon,
+    {
+      type: svgIconType.SvgIconType.ChevronRight,
+      className: css.css({
+        mb: "0.5"
+      })
+    }
+  );
+}
+
+exports.NestedBadgeValue = NestedBadgeValue;
+exports.ValueNestingIcon = ValueNestingIcon;
+exports.nestedBadgeValueRecipe = nestedBadgeValueRecipe;