@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

package/dist/esm/components/IntegrationElements/DataSource/index.mjs

@@ -0,0 +1,101 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { IntegrationElementLevel } from '@integration-app/sdk';
+import { useIntegrationElementContext } from '../integration-element-context.mjs';
+import { DataCollectionSelect } from './DataCollectionSelect.mjs';
+import { UdmSelect } from './UdmSelect.mjs';
+import { AdvancedOptions } from '../../AdvancedOptions.mjs';
+import { SimpleInput } from '../../SimpleInput/SimpleInput.mjs';
+import '../../DataBuilderUI/index.mjs';
+import '../../Textarea/index.mjs';
+import '../../SimpleInput/SimpleInput.module.css.mjs';
+import 'clsx';
+import 'react';
+import '../../Radio/index.mjs';
+
+function DataSourceConfig(props) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mb-2", children: /* @__PURE__ */ jsx(LevelSpecificDataSourceConfig, { ...props }) });
+}
+function LevelSpecificDataSourceConfig(props) {
+  const { level } = useIntegrationElementContext();
+  const { value, onChange, configureEvents } = props;
+  function patchValue(patch) {
+    onChange({
+      ...value ?? {},
+      ...patch
+    });
+  }
+  switch (level) {
+    case IntegrationElementLevel.UNIVERSAL:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          UdmSelect,
+          {
+            value: value?.udm,
+            onChange: (udm) => patchValue({ udm })
+          }
+        ),
+        /* @__PURE__ */ jsx(AdvancedOptions, { children: configureEvents && /* @__PURE__ */ jsx(DataSourceConfigureEvents, { value, onChange }) })
+      ] });
+    case IntegrationElementLevel.CONNECTOR:
+    case IntegrationElementLevel.CONNECTION:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DataCollectionSelect,
+          {
+            value,
+            onChange: (value2) => patchValue(value2),
+            variablesSchema: props.variablesSchema
+          }
+        ),
+        configureEvents && /* @__PURE__ */ jsx(
+          AdvancedOptions,
+          {
+            openByDefault: !!(value?.pullUpdatesIntervalSeconds ?? value?.fullSyncIntervalSeconds),
+            children: /* @__PURE__ */ jsx(DataSourceConfigureEvents, { value, onChange })
+          }
+        )
+      ] });
+    default:
+      return null;
+  }
+}
+function DataSourceConfigureEvents({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("p", { children: "Change how often we pulls updates from the data source." }),
+    /* @__PURE__ */ jsx(
+      SimpleInput,
+      {
+        label: "Pull updates interval (seconds)",
+        value: value?.pullUpdatesIntervalSeconds?.toString(),
+        onChange: (pullUpdatesIntervalSeconds) => onChange({
+          ...value,
+          pullUpdatesIntervalSeconds: Number(pullUpdatesIntervalSeconds)
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SimpleInput,
+      {
+        label: "Full sync interval (seconds)",
+        value: value?.fullSyncIntervalSeconds?.toString(),
+        onChange: (fullSyncIntervalSeconds) => onChange({
+          ...value,
+          fullSyncIntervalSeconds: Number(fullSyncIntervalSeconds)
+        })
+      }
+    )
+  ] });
+}
+
+export { DataCollectionSelect, DataSourceConfig, DataSourceConfigureEvents };

package/dist/esm/components/IntegrationElements/integration-element-context.mjs

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { IntegrationElementLevel } from '@integration-app/sdk';
+import { createContext, useContext } from 'react';
+import { useIntegrationAppIntegration, IntegrationAppIntegrationProvider } from '../../contexts/integration-app-integration-context.mjs';
+import { useIntegrationAppConnection, IntegrationAppConnectionProvider } from '../../contexts/integration-app-connection-context.mjs';
+
+const IntegrationElementContext = createContext({});
+function useIntegrationElementContext() {
+  return useContext(IntegrationElementContext);
+}
+const IntegrationElementProvider = ({
+  children,
+  integrationId: integrationIdfromParams,
+  connectionId: connectionIdFromParams
+}) => {
+  const { connectionId: connectionIdFromContext } = useIntegrationAppConnection();
+  const { integrationId: integrationIdFromContext } = useIntegrationAppIntegration();
+  const integrationId = integrationIdfromParams ?? integrationIdFromContext;
+  const connectionId = connectionIdFromParams ?? connectionIdFromContext;
+  const level = connectionId ? IntegrationElementLevel.CONNECTION : integrationId ? IntegrationElementLevel.CONNECTOR : IntegrationElementLevel.UNIVERSAL;
+  return /* @__PURE__ */ jsx(
+    IntegrationElementContext.Provider,
+    {
+      value: {
+        integrationId,
+        connectionId,
+        level
+      },
+      children: /* @__PURE__ */ jsx(IntegrationAppIntegrationProvider, { integrationId, children: /* @__PURE__ */ jsx(IntegrationAppConnectionProvider, { connectionId, children }) })
+    }
+  );
+};
+
+export { IntegrationElementProvider, useIntegrationElementContext };

package/dist/esm/components/Integrations/IntegrationAvatar/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/esm/components/Integrations/IntegrationItem/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/esm/components/Integrations/IntegrationItemSkeleton.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/esm/components/Notification/Notification.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from '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));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity))\n}\n.Notification-module_notification__warning__rPpDL {\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity))\n}\n.Notification-module_notification__error__V9tK4 {\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.05;\n  --tw-text-opacity: 1;\n  color: rgb(168 54 5 / var(--tw-text-opacity))\n}\n.Notification-module_notification__default__Kk9Kj {\n  --tw-border-opacity: 1;\n  border-color: rgb(238 238 238 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity))\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))\n}\n.Notification-module_notificationIcon__warning__2UUbP {\n  --tw-text-opacity: 1;\n  color: rgb(194 154 6 / var(--tw-text-opacity))\n}\n.Notification-module_notificationIcon__error__RT61- {\n  --tw-text-opacity: 1;\n  color: rgb(168 54 5 / var(--tw-text-opacity))\n}\n.Notification-module_notificationIcon__default__pJ6J4 {\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity))\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);
+
+export { classes as default };

package/dist/esm/components/Notification/index.mjs

@@ -0,0 +1,135 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import clsx from 'clsx';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+import classes from './Notification.module.css.mjs';
+
+function Notification({
+  mode = "block",
+  children,
+  ...props
+}) {
+  if (mode === "icon") {
+    const validChildren = isValidElement(children) ? children : /* @__PURE__ */ jsx(Fragment, { children });
+    return /* @__PURE__ */ jsx(NotificationIcon, { ...props, children: validChildren });
+  }
+  return /* @__PURE__ */ jsx(NotificationBlock, { ...props, children });
+}
+function NotificationBlock({
+  icon,
+  type = "default",
+  size = "md",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        classes.notification,
+        getBlockClassnameByType(type),
+        getBlockClassnameBySize(size),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SvgIcon,
+          {
+            className: classes.notification_icon,
+            type: icon || getIconByType(type)
+          }
+        ),
+        " ",
+        children
+      ]
+    }
+  );
+}
+const BADGE_TOOLTIP_OFFSET = [-4, 8];
+function NotificationIcon({
+  icon,
+  type,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      tooltip: children,
+      placement: "right-start",
+      offset: BADGE_TOOLTIP_OFFSET,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: clsx(
+            classes.notificationIcon,
+            getIconClassnameByType(type),
+            className
+          ),
+          children: /* @__PURE__ */ jsx(
+            SvgIcon,
+            {
+              type: icon || getIconByType(type),
+              className: classes.notificationIcon_icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function getIconByType(type) {
+  switch (type) {
+    case "error":
+      return SvgIconType.AlertCircle;
+    case "warning":
+      return SvgIconType.AlertTriangle;
+    case "info":
+    default:
+      return SvgIconType.InfoCircle;
+  }
+}
+function getBlockClassnameByType(type) {
+  switch (type) {
+    case "error":
+      return classes.notification__error;
+    case "warning":
+      return classes.notification__warning;
+    case "info":
+      return classes.notification__info;
+    default:
+      return classes.notification__default;
+  }
+}
+function getBlockClassnameBySize(size) {
+  switch (size) {
+    case "sm":
+      return classes.notification__sm;
+    case "md":
+    default:
+      return classes.notification__md;
+  }
+}
+function getIconClassnameByType(type) {
+  switch (type) {
+    case "error":
+      return classes.notificationIcon__error;
+    case "warning":
+      return classes.notificationIcon__warning;
+    case "info":
+      return classes.notificationIcon__info;
+    default:
+      return classes.notificationIcon__default;
+  }
+}
+
+export { Notification };

package/dist/esm/components/Popover/Popover.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Popover-module_defaultPopover__-jzrr {\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  border-radius: 0.25rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  min-width: 7rem\n}\n";
+var classes = {"defaultPopover":"Popover-module_defaultPopover__-jzrr"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/Popover/index.mjs

@@ -0,0 +1,145 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+import { Portal } from '../Portal/index.mjs';
+import classes from './Popover.module.css.mjs';
+import debounce from '../../helpers/Debounce.mjs';
+import { useWindowEvent } from '../../hooks/useWindowEvent.mjs';
+import clsx from 'clsx';
+import { getRefElement } from '../../helpers/getRefElement.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../styled-system/jsx/box.mjs';
+import { Root, Trigger, Positioner, Content } from '../../ui-kit/styled/popover.mjs';
+
+function GenericPopover({
+  refElement,
+  isOpen = false,
+  options = {},
+  children,
+  portalNode
+}) {
+  const [popperElement, setPopperElement] = useState();
+  const safeRefElement = getRefElement(refElement);
+  const {
+    styles,
+    attributes,
+    update: updatePopover
+  } = usePopper(safeRefElement, popperElement, options);
+  const [debouncedResizeCallback] = debounce(() => {
+    void updatePopover?.();
+  }, 150);
+  useWindowEvent("resize", debouncedResizeCallback);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Portal, { node: portalNode, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: setPopperElement,
+      zIndex: "600",
+      style: styles.popper,
+      ...attributes.popper,
+      children
+    }
+  ) });
+}
+const DefaultPopper = forwardRef(
+  ({
+    placement = "bottom",
+    refElement,
+    isOpen = false,
+    offset = [0, 8],
+    className,
+    onClick,
+    children,
+    portalNode
+  }, ref) => {
+    const modifiers = [
+      {
+        name: "offset",
+        options: {
+          offset
+        }
+      }
+    ];
+    const popperJsOptions = {
+      placement,
+      modifiers
+    };
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      GenericPopover,
+      {
+        refElement,
+        isOpen: !!refElement && isOpen,
+        options: popperJsOptions,
+        portalNode,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: clsx(classes.defaultPopover, className),
+            onClick,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+DefaultPopper.displayName = "DefaultPopper";
+const PopoverNew = forwardRef(
+  ({
+    placement = "bottom-start",
+    isOpen,
+    offset = [0, 8],
+    className,
+    children,
+    triggerNode
+  }, ref) => {
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        open: isOpen,
+        lazyMount: true,
+        positioning: {
+          placement,
+          offset: {
+            crossAxis,
+            mainAxis
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsx(Positioner, { ref, children: /* @__PURE__ */ jsx(
+            Content,
+            {
+              bg: "neutral.2",
+              borderWidth: "thin",
+              borderColor: "neutral.5",
+              px: "4",
+              py: "2",
+              rounded: "sm",
+              minW: "28",
+              shadow: "none",
+              className,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export { DefaultPopper, PopoverNew };

package/dist/esm/components/Portal/index.mjs

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Portal as Portal$1 } from 'react-portal';
+import { getRefElement } from '../../helpers/getRefElement.mjs';
+
+const isStorybook = Boolean(globalThis?.__STORYBOOK_PREVIEW__);
+const storybookPortalNode = "#storybook-root";
+function Portal({
+  node,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Portal$1, { 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(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;
+}
+
+export { Portal, getPortalNode };

package/dist/esm/components/Radio/Radio.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from '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));\n\n    border-radius: 9999px;\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\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));\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));\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));\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\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);
+
+export { classes as default };

package/dist/esm/components/Radio/index.mjs

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import classes from './Radio.module.css.mjs';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+
+const Radiobutton = forwardRef(
+  ({ className, inline, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        className: clsx(
+          classes["uikit-radio"],
+          inline && classes["uikit-radio__inline"],
+          props?.checked && classes["uikit-radio__checked"],
+          className
+        ),
+        ...props,
+        ref
+      }
+    );
+  }
+);
+Radiobutton.displayName = "Radiobutton";
+
+export { Radiobutton };

package/dist/esm/components/SimpleInput/SimpleInput.mjs

@@ -0,0 +1,91 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@integration-app/sdk';
+import 'js-convert-case';
+import { FieldDescription } from '../DataBuilder/FieldDescription.mjs';
+import { Row, Cell, Title } from '../DataBuilderUI/index.mjs';
+import { Input } from '../Input/Input.mjs';
+import '../Input/SearchInput.mjs';
+import classes from './SimpleInput.module.css.mjs';
+import clsx from 'clsx';
+import { useState, useEffect } from 'react';
+
+function SimpleInput({
+  label,
+  value,
+  description,
+  onChange,
+  ...props
+}) {
+  function handleChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxs(Row, { className: clsx(classes.row, props?.disabled && classes.rowDisabled), children: [
+    label && /* @__PURE__ */ jsx(Cell.Name, { children: /* @__PURE__ */ jsx(Title, { rightSlot: /* @__PURE__ */ jsx(FieldDescription, { text: description }), children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label }) }) }),
+    /* @__PURE__ */ jsx(Cell.Input, { className: classes.cell, grow: true, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: value ?? "",
+        onChange: handleChange,
+        variant: "transparent",
+        disabled: props?.disabled,
+        ...props,
+        className: classes.input
+      }
+    ) })
+  ] });
+}
+function SimpleInputWithLocalState({
+  value,
+  onChange,
+  ...props
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  const [dirtyInput, setDirtyInput] = useState(false);
+  useEffect(() => {
+    !dirtyInput && setLocalValue(value);
+  }, [value, dirtyInput]);
+  function handleLocalChange(value2) {
+    setLocalValue(value2);
+    setDirtyInput(true);
+  }
+  function handleFocus(e) {
+    props?.onFocus?.(e);
+    setDirtyInput(true);
+  }
+  function handleBlur(e) {
+    props?.onBlur?.(e);
+    handleChange();
+  }
+  function handleChange() {
+    onChange(localValue);
+    setDirtyInput(false);
+  }
+  function handleKeyUp(e) {
+    props.onKeyUp?.(e);
+    if (e.key === "Enter") {
+      handleChange();
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    SimpleInput,
+    {
+      value: localValue,
+      onChange: handleLocalChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyUp: handleKeyUp,
+      ...props
+    }
+  );
+}
+const DataBuilderSimpleInput = SimpleInput;
+
+export { DataBuilderSimpleInput, SimpleInput, SimpleInputWithLocalState };