@membranehq/react 0.1.0

package/dist/cjs/components/Integrations/IntegrationItemSkeleton.cjs

@@ -0,0 +1,48 @@
+"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');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/jsx/is-valid-prop.cjs');
+var flex = require('../../styled-system/jsx/flex.cjs');
+var circle = require('../../styled-system/jsx/circle.cjs');
+require('../../styled-system/patterns/visually-hidden.cjs');
+var skeleton = require('../../ui-kit/styled/skeleton.cjs');
+
+const IntegrationItemSkeleton = React.forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      flex.Flex,
+      {
+        ref,
+        display: "flex",
+        bg: "white",
+        justifyContent: "start",
+        alignItems: "center",
+        gap: "2",
+        flexDirection: "column",
+        p: "3",
+        pt: "5",
+        borderRadius: "md",
+        minH: "28",
+        whiteSpace: "wrap",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { borderRadius: "full", children: /* @__PURE__ */ jsxRuntime.jsx(circle.Circle, { size: "10" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { h: "4", w: "3/5" })
+        ]
+      }
+    );
+  }
+);
+
+exports.IntegrationItemSkeleton = IntegrationItemSkeleton;

package/dist/cjs/components/Notification/Notification.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 = ".Notification-module_notification__JgJp1 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  -moz-column-gap: 0.25rem;\n       column-gap: 0.25rem;\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  padding-left: 0.625rem;\n  padding-right: 0.75rem;\n  border-radius: 0.25rem;\n  border-width: 1px;\n  min-height: 2.25rem /* h-9 */\n}\n.Notification-module_notification__info__t--x4 {\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity, 1));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notification__warning__rPpDL {\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity, 1));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notification__error__V9tK4 {\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(168 54 5 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notification__default__Kk9Kj {\n  --tw-border-opacity: 1;\n  border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notification__sm__6Ocvf {\n  font-size: 0.813rem;\n  line-height: 1.4\n}\n.Notification-module_notification__md__G2Spf {\n}\n.Notification-module_notification_icon__DVkmu {\n  flex-shrink: 0;\n  flex-grow: 0;\n  color: currentColor;\n  opacity: 0.7;\n  height: 1.25rem;\n  width: 1.25rem\n}\n.Notification-module_notificationIcon__aZZEp {\n  display: inline-block;\n  height: 1.25rem;\n  width: 1.25rem;\n  max-width: 20rem\n}\n.Notification-module_notificationIcon_icon__d5ycZ {\n  height: 1.25rem;\n  width: 1.25rem;\n  stroke: currentColor\n}\n.Notification-module_notificationIcon__info__iCcgp {\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notificationIcon__warning__2UUbP {\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notificationIcon__error__RT61- {\n  --tw-text-opacity: 1;\n  color: rgb(168 54 5 / var(--tw-text-opacity, 1))\n}\n.Notification-module_notificationIcon__default__pJ6J4 {\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity, 1))\n}\n";
+var classes = {"notification":"Notification-module_notification__JgJp1","notification__info":"Notification-module_notification__info__t--x4","notification__warning":"Notification-module_notification__warning__rPpDL","notification__error":"Notification-module_notification__error__V9tK4","notification__default":"Notification-module_notification__default__Kk9Kj","notification__sm":"Notification-module_notification__sm__6Ocvf","notification__md":"Notification-module_notification__md__G2Spf","notification_icon":"Notification-module_notification_icon__DVkmu","notificationIcon":"Notification-module_notificationIcon__aZZEp","notificationIcon_icon":"Notification-module_notificationIcon_icon__d5ycZ","notificationIcon__info":"Notification-module_notificationIcon__info__iCcgp","notificationIcon__warning":"Notification-module_notificationIcon__warning__2UUbP","notificationIcon__error":"Notification-module_notificationIcon__error__RT61-","notificationIcon__default":"Notification-module_notificationIcon__default__pJ6J4"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/Notification/index.cjs

@@ -0,0 +1,94 @@
+"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 Notification_module = require('./Notification.module.css.cjs');
+
+function Notification({ mode = "block", children, ...props }) {
+  if (mode === "icon") {
+    const validChildren = React.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    return /* @__PURE__ */ jsxRuntime.jsx(NotificationIcon, { ...props, children: validChildren });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NotificationBlock, { ...props, children });
+}
+function NotificationBlock({
+  icon,
+  type = "default",
+  size = "md",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx(Notification_module.default.notification, getBlockClassnameByType(type), getBlockClassnameBySize(size), className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { className: Notification_module.default.notification_icon, type: icon || getIconByType(type) }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+const BADGE_TOOLTIP_OFFSET = [-4, 8];
+function NotificationIcon({ icon, type, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: children, placement: "right-start", offset: BADGE_TOOLTIP_OFFSET, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(Notification_module.default.notificationIcon, getIconClassnameByType(type), className), children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: icon || getIconByType(type), className: Notification_module.default.notificationIcon_icon }) }) });
+}
+function getIconByType(type) {
+  switch (type) {
+    case "error":
+      return svgIconType.SvgIconType.AlertCircle;
+    case "warning":
+      return svgIconType.SvgIconType.AlertTriangle;
+    case "info":
+    default:
+      return svgIconType.SvgIconType.InfoCircle;
+  }
+}
+function getBlockClassnameByType(type) {
+  switch (type) {
+    case "error":
+      return Notification_module.default.notification__error;
+    case "warning":
+      return Notification_module.default.notification__warning;
+    case "info":
+      return Notification_module.default.notification__info;
+    default:
+      return Notification_module.default.notification__default;
+  }
+}
+function getBlockClassnameBySize(size) {
+  switch (size) {
+    case "sm":
+      return Notification_module.default.notification__sm;
+    case "md":
+    default:
+      return Notification_module.default.notification__md;
+  }
+}
+function getIconClassnameByType(type) {
+  switch (type) {
+    case "error":
+      return Notification_module.default.notificationIcon__error;
+    case "warning":
+      return Notification_module.default.notificationIcon__warning;
+    case "info":
+      return Notification_module.default.notificationIcon__info;
+    default:
+      return Notification_module.default.notificationIcon__default;
+  }
+}
+
+exports.Notification = Notification;

package/dist/cjs/components/Popover/index.cjs

@@ -0,0 +1,56 @@
+"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 index = require('../FloatingPortalBoundary/index.cjs');
+var popover = require('../../ui-kit/styled/popover.cjs');
+
+const DefaultPopper = React.forwardRef(
+  ({ placement = "bottom-start", isOpen, offset = [0, 8], className, children, triggerNode, onClickOutside }, ref) => {
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      popover.Root,
+      {
+        open: isOpen,
+        lazyMount: true,
+        unmountOnExit: true,
+        onPointerDownOutside: onClickOutside,
+        positioning: {
+          placement,
+          offset: {
+            crossAxis,
+            mainAxis
+          }
+        },
+        children: [
+          triggerNode && /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.BoundedPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+            popover.Content,
+            {
+              bg: "neutral.2",
+              borderWidth: "thin",
+              borderColor: "neutral.5",
+              px: "4",
+              py: "2",
+              rounded: "sm",
+              minW: "28",
+              shadow: "none",
+              className,
+              children
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+
+exports.DefaultPopper = DefaultPopper;

package/dist/cjs/components/Portal/index.cjs

@@ -0,0 +1,44 @@
+"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 reactPortal = require('react-portal');
+var getRefElement = require('../../helpers/getRefElement.cjs');
+
+const isStorybook = Boolean(globalThis?.__STORYBOOK_PREVIEW__);
+const storybookPortalNode = "#storybook-root";
+function Portal({ node, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { node: getPortalNode(node), children });
+}
+function getPortalNode(portalNode) {
+  if (!portalNode) {
+    if (isStorybook) {
+      return getPortalNode(storybookPortalNode);
+    }
+    return null;
+  }
+  if (typeof portalNode === "string") {
+    return document?.querySelector?.(cssEscapedSelector(portalNode));
+  }
+  if (typeof portalNode === "function") {
+    return portalNode();
+  }
+  return getRefElement.getRefElement(portalNode);
+}
+function cssEscapedSelector(selector) {
+  if (selector.startsWith("#") || selector.startsWith(".")) {
+    const firstChar = selector[0];
+    const rest = selector.slice(1);
+    return `${firstChar}${CSS.escape(rest)}`;
+  }
+  return selector;
+}
+
+exports.Portal = Portal;

package/dist/cjs/components/Radio/Radio.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 = "@layer elements {\n  .Radio-module_uikit-radio__4iH4e {\n\n    position: relative;\n\n    display: inline-block;\n\n    -webkit-appearance: none;\n\n       -moz-appearance: none;\n\n            appearance: none;\n\n    align-self: baseline;\n\n    cursor: pointer;\n\n    border-width: 1px;\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(105 105 105 / var(--tw-border-opacity, 1));\n\n    border-radius: 9999px;\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n\n    margin: 0px;\n\n    margin-right: 0.375rem;\n\n    height: 1rem;\n\n    width: 1rem;\n\n    border-style: solid;\n  }\n\n  .Radio-module_uikit-radio__inline__CNV2H {\n\n    vertical-align: baseline;\n    transform: translateY(0.15rem);\n  }\n\n  .Radio-module_uikit-radio__checked__S22n6 {\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='2.5'/%3E%3C/svg%3E\");\n    background-size: 100% 100%;\n    background-position: center center;\n    background-repeat: no-repeat;\n  }\n\n  .Radio-module_uikit-radio__4iH4e:active {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));\n  }\n  .Radio-module_uikit-radio__4iH4e:disabled {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n  }\n  .Radio-module_uikit-radio__4iH4e:disabled:checked {\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='#aaa' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='2.5'/%3E%3C/svg%3E\");\n  }\n  .Radio-module_uikit-radio__4iH4e:hover:not(:disabled, :active) {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n  }\n}\n";
+var classes = {"uikit-radio":"Radio-module_uikit-radio__4iH4e","uikit-radio__inline":"Radio-module_uikit-radio__inline__CNV2H","uikit-radio__checked":"Radio-module_uikit-radio__checked__S22n6"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/Radio/index.cjs

@@ -0,0 +1,34 @@
+"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 Radio_module = require('./Radio.module.css.cjs');
+
+const Radiobutton = React.forwardRef(({ className, inline, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "radio",
+      className: clsx.clsx(
+        Radio_module.default["uikit-radio"],
+        inline && Radio_module.default["uikit-radio__inline"],
+        props?.checked && Radio_module.default["uikit-radio__checked"],
+        className
+      ),
+      ...props,
+      ref
+    }
+  );
+});
+Radiobutton.displayName = "Radiobutton";
+
+exports.Radiobutton = Radiobutton;

package/dist/cjs/components/SimpleInput/SimpleInput.cjs

@@ -0,0 +1,46 @@
+"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 clsx = require('clsx');
+require('@membranehq/sdk');
+require('js-convert-case');
+var FieldDescription = require('../DataBuilder/FieldDescription.cjs');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+require('../DataBuilderUI/styles.module.css.cjs');
+var Row = require('../DataBuilderUI/Row.cjs');
+var Title = require('../DataBuilderUI/Title.cjs');
+var recipe = require('./recipe.cjs');
+
+function SimpleInput({ label, value, description, onChange, className, ...props }) {
+  const simpleInputClassNames = recipe.simpleInputRecipe({
+    disabled: props.disabled
+  });
+  function handleChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { className: simpleInputClassNames.row, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { rightSlot: /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: description }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: simpleInputClassNames.title, children: label }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: simpleInputClassNames.cell, span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        value: value ?? "",
+        onChange: handleChange,
+        disabled: props?.disabled,
+        ...props,
+        className: clsx.clsx(simpleInputClassNames.input, className)
+      }
+    ) })
+  ] });
+}
+
+exports.SimpleInput = SimpleInput;

package/dist/cjs/components/SimpleInput/SimpleTextarea.cjs

@@ -0,0 +1,35 @@
+"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');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../DataBuilderUI/styles.module.css.cjs');
+var Row = require('../DataBuilderUI/Row.cjs');
+require('../DataBuilderUI/Title.cjs');
+var index = require('../Textarea/index.cjs');
+var recipe = require('./recipe.cjs');
+
+function SimpleTextarea({ label, value, onChange, ...props }) {
+  const simpleInputClassNames = recipe.simpleInputRecipe({
+    disabled: props.disabled
+  });
+  function handleChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { className: simpleInputClassNames.row, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: simpleInputClassNames.title, children: label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: simpleInputClassNames.cell, span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(index.Textarea, { value: value ?? "", onChange: handleChange, ...props, className: simpleInputClassNames.textarea }) })
+  ] });
+}
+
+exports.SimpleTextarea = SimpleTextarea;

package/dist/cjs/components/SimpleInput/recipe.cjs

@@ -0,0 +1,75 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+
+const simpleInputRecipe = sva.sva({
+  className: "simple-input",
+  slots: ["row", "cell", "title", "input", "textarea"],
+  base: {
+    row: {
+      transition: "colors"
+    },
+    cell: {
+      _focusWithin: {
+        bg: "gray.2"
+      },
+      "&:has(.simple-input__input)": {
+        pt: "0.35rem",
+        pb: "0.35rem"
+      },
+      "&:has(.simple-input__textarea)": {
+        p: "0",
+        px: "3"
+      }
+    },
+    title: { whiteSpace: "nowrap" },
+    input: {
+      bg: "transparent",
+      border: "transparent",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      h: "9",
+      w: "full",
+      px: "4",
+      transition: "all",
+      transitionDuration: "faster",
+      rounded: "md",
+      color: "black",
+      _focus: {
+        outline: "none"
+      },
+      _disabled: {
+        color: "neutral.7",
+        _placeholder: {
+          color: "neutral.7"
+        }
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        row: {
+          bg: "neutral.1",
+          color: "neutral.9"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+
+exports.simpleInputRecipe = simpleInputRecipe;