@membranehq/react 0.1.0

package/dist/esm/ui-kit/avatar.mjs

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Root, Fallback, Image } from './styled/avatar.mjs';
+
+const Avatar = forwardRef((props, ref) => {
+  const { name, src, ...rootProps } = props;
+  return /* @__PURE__ */ jsxs(Root, { ref, ...rootProps, children: [
+    /* @__PURE__ */ jsx(Fallback, { children: getInitials(name) || /* @__PURE__ */ jsx(UserIcon, {}) }),
+    /* @__PURE__ */ jsx(Image, { src, alt: name })
+  ] });
+});
+Avatar.displayName = "Avatar";
+const UserIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("title", { children: "User Icon" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+] });
+const getInitials = (name = "") => name.split(" ").map((part) => part[0]).splice(0, 2).join("").toUpperCase();
+
+export { Avatar };

package/dist/esm/ui-kit/button.mjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Spinner } from './spinner.mjs';
+import { styled } from '../styled-system/jsx/factory.mjs';
+import '../styled-system/jsx/is-valid-prop.mjs';
+import '../styled-system/helpers.mjs';
+import '../styled-system/css/css.mjs';
+import { Center } from '../styled-system/jsx/center.mjs';
+import '../styled-system/patterns/visually-hidden.mjs';
+import { Button as Button$1 } from './styled/button.mjs';
+
+const Button = forwardRef((props, ref) => {
+  const { loading, disabled, loadingText, children, ...rest } = props;
+  const trulyDisabled = loading || disabled;
+  return /* @__PURE__ */ jsx(Button$1, { disabled: trulyDisabled, ref, ...rest, children: loading && !loadingText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ButtonSpinner, {}),
+    /* @__PURE__ */ jsx(styled.span, { opacity: 0, children })
+  ] }) : loadingText ? loadingText : children });
+});
+Button.displayName = "Button";
+const ButtonSpinner = () => /* @__PURE__ */ jsx(Center, { inline: true, position: "absolute", transform: "translate(-50%, -50%)", top: "50%", insetStart: "50%", children: /* @__PURE__ */ jsx(Spinner, { colorPalette: "gray" }) });
+
+export { Button };

package/dist/esm/ui-kit/spinner.mjs

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { styled } from '../styled-system/jsx/factory.mjs';
+import '../styled-system/jsx/is-valid-prop.mjs';
+import '../styled-system/helpers.mjs';
+import '../styled-system/css/css.mjs';
+import '../styled-system/patterns/visually-hidden.mjs';
+import { Spinner as Spinner$1 } from './styled/spinner.mjs';
+
+const Spinner = forwardRef((props, ref) => {
+  const { label = "Loading...", ...rest } = props;
+  return /* @__PURE__ */ jsx(Spinner$1, { ref, borderBottomColor: "transparent", borderLeftColor: "transparent", ...rest, children: label && /* @__PURE__ */ jsx(styled.span, { srOnly: true, children: label }) });
+});
+Spinner.displayName = "Spinner";
+
+export { Spinner };

package/dist/esm/ui-kit/styled/alert.mjs

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react/factory';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { alert } from '../../styled-system/recipes/alert.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withProvider, withContext } = createStyleContext(alert);
+const Root = withProvider(ark.div, "root");
+withContext(ark.div, "content");
+withContext(
+  ark.div,
+  "description"
+);
+const Icon = withContext(ark.svg, "icon");
+const Title = withContext(ark.h5, "title");
+
+export { Icon, Root, Title };

package/dist/esm/ui-kit/styled/avatar.mjs

@@ -0,0 +1,30 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { Avatar } from '@ark-ui/react/avatar';
+export { AvatarContext as Context } from '@ark-ui/react/avatar';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { avatar } from '../../styled-system/recipes/avatar.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withProvider, withContext } = createStyleContext(avatar);
+withProvider(Avatar.RootProvider, "root");
+const Root = withProvider(Avatar.Root, "root");
+const Fallback = withContext(
+  Avatar.Fallback,
+  "fallback"
+);
+const Image = withContext(
+  Avatar.Image,
+  "image"
+);
+
+export { Fallback, Image, Root };

package/dist/esm/ui-kit/styled/badge.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react/factory';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import { badge } from '../../styled-system/recipes/badge.mjs';
+import '../../styled-system/css/conditions.mjs';
+
+const Badge = styled(ark.div, badge);
+
+export { Badge };

package/dist/esm/ui-kit/styled/button.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { button } from '../../styled-system/recipes/button.mjs';
+
+const Button = styled(ark.button, button);
+
+export { Button };

package/dist/esm/ui-kit/styled/icon-button.mjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react/factory';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { button } from '../../styled-system/recipes/button.mjs';
+
+const IconButton = styled(ark.button, button, {
+  defaultProps: { px: "0" }
+});
+
+export { IconButton };

package/dist/esm/ui-kit/styled/icon.mjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react/factory';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { icon } from '../../styled-system/recipes/icon.mjs';
+
+const Icon = styled(ark.svg, icon, {
+  defaultProps: { asChild: true }
+});
+
+export { Icon };

package/dist/esm/ui-kit/styled/input.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react/factory';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { input } from '../../styled-system/recipes/input.mjs';
+
+const Input = styled(ark.input, input);
+
+export { Input };

package/dist/esm/ui-kit/styled/menu.mjs

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { Menu } from '@ark-ui/react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { menu } from '../../styled-system/recipes/menu.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+export { MenuContext as Context } from '@ark-ui/react/menu';
+
+const { withRootProvider, withContext } = createStyleContext(menu);
+withRootProvider(Menu.RootProvider);
+const Root = withRootProvider(Menu.Root);
+withContext(
+  Menu.Arrow,
+  "arrow"
+);
+withContext(
+  Menu.ArrowTip,
+  "arrowTip"
+);
+withContext(
+  Menu.CheckboxItem,
+  "item"
+);
+const Content = withContext(
+  Menu.Content,
+  "content"
+);
+withContext(Menu.ContextTrigger, "contextTrigger");
+withContext(
+  Menu.Indicator,
+  "indicator"
+);
+const ItemGroupLabel = withContext(
+  Menu.ItemGroupLabel,
+  "itemGroupLabel"
+);
+const ItemGroup = withContext(
+  Menu.ItemGroup,
+  "itemGroup"
+);
+withContext(
+  Menu.ItemIndicator,
+  "itemIndicator"
+);
+const Item = withContext(Menu.Item, "item");
+withContext(
+  Menu.ItemText,
+  "itemText"
+);
+const Positioner = withContext(
+  Menu.Positioner,
+  "positioner"
+);
+withContext(
+  Menu.RadioItemGroup,
+  "itemGroup"
+);
+withContext(
+  Menu.RadioItem,
+  "item"
+);
+withContext(
+  Menu.Separator,
+  "separator"
+);
+withContext(
+  Menu.TriggerItem,
+  "triggerItem"
+);
+const Trigger = withContext(
+  Menu.Trigger,
+  "trigger"
+);
+
+export { Content, Item, ItemGroup, ItemGroupLabel, Positioner, Root, Trigger };

package/dist/esm/ui-kit/styled/popover.mjs

@@ -0,0 +1,61 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { Popover } from '@ark-ui/react/popover';
+export { PopoverContext as Context, usePopoverContext } from '@ark-ui/react/popover';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { popover } from '../../styled-system/recipes/popover.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withRootProvider, withContext } = createStyleContext(popover);
+withRootProvider(
+  Popover.RootProvider
+);
+const Root = withRootProvider(Popover.Root);
+const Anchor = withContext(
+  Popover.Anchor,
+  "anchor"
+);
+withContext(
+  Popover.Arrow,
+  "arrow"
+);
+withContext(
+  Popover.ArrowTip,
+  "arrowTip"
+);
+withContext(Popover.CloseTrigger, "closeTrigger");
+const Content = withContext(
+  Popover.Content,
+  "content"
+);
+withContext(
+  Popover.Description,
+  "description"
+);
+withContext(
+  Popover.Indicator,
+  "indicator"
+);
+const Positioner = withContext(
+  Popover.Positioner,
+  "positioner"
+);
+const Title = withContext(
+  Popover.Title,
+  "title"
+);
+const Trigger = withContext(
+  Popover.Trigger,
+  "trigger"
+);
+
+export { Anchor, Content, Positioner, Root, Title, Trigger };

package/dist/esm/ui-kit/styled/skeleton.mjs

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '@ark-ui/react/factory';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { skeleton } from '../../styled-system/recipes/skeleton.mjs';
+
+const StyledSkeleton = styled(ark.div, skeleton);
+const Skeleton = forwardRef((props, ref) => {
+  const { isLoaded, ...otherProps } = props;
+  if (isLoaded) {
+    return /* @__PURE__ */ jsx(styled.div, { animation: "fade-in", ref, ...otherProps });
+  }
+  return /* @__PURE__ */ jsx(StyledSkeleton, { ref, ...otherProps });
+});
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

package/dist/esm/ui-kit/styled/spinner.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { ark } from '@ark-ui/react';
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { spinner } from '../../styled-system/recipes/spinner.mjs';
+
+const Spinner = styled(ark.div, spinner);
+
+export { Spinner };

package/dist/esm/ui-kit/styled/switch.mjs

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { Switch } from '@ark-ui/react/switch';
+export { SwitchContext as Context, SwitchHiddenInput as HiddenInput } from '@ark-ui/react/switch';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { switchRecipe } from '../../styled-system/recipes/switch-recipe.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withProvider, withContext } = createStyleContext(switchRecipe);
+withProvider(Switch.RootProvider, "root");
+const Root = withProvider(Switch.Root, "root");
+const Control = withContext(
+  Switch.Control,
+  "control"
+);
+const Label = withContext(
+  Switch.Label,
+  "label"
+);
+const Thumb = withContext(
+  Switch.Thumb,
+  "thumb"
+);
+
+export { Control, Label, Root, Thumb };

package/dist/esm/ui-kit/styled/text.mjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { styled } from '../../styled-system/jsx/factory.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import 'react';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import '../../styled-system/css/conditions.mjs';
+import { text } from '../../styled-system/recipes/text.mjs';
+
+const Text = styled("p", text);
+
+export { Text };

package/dist/esm/ui-kit/styled/tooltip.mjs

@@ -0,0 +1,44 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { Tooltip } from '@ark-ui/react/tooltip';
+export { TooltipContext as Context } from '@ark-ui/react/tooltip';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { tooltip } from '../../styled-system/recipes/tooltip.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withRootProvider, withContext } = createStyleContext(tooltip);
+withRootProvider(
+  Tooltip.RootProvider
+);
+const Root = withRootProvider(Tooltip.Root);
+const Arrow = withContext(
+  Tooltip.Arrow,
+  "arrow"
+);
+const ArrowTip = withContext(
+  Tooltip.ArrowTip,
+  "arrowTip"
+);
+const Content = withContext(
+  Tooltip.Content,
+  "content"
+);
+const Positioner = withContext(
+  Tooltip.Positioner,
+  "positioner"
+);
+const Trigger = withContext(
+  Tooltip.Trigger,
+  "trigger"
+);
+
+export { Arrow, ArrowTip, Content, Positioner, Root, Trigger };

package/dist/esm/ui-kit/styled/utils/create-style-context.mjs

@@ -0,0 +1,61 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext } from 'react';
+import '../../../styled-system/css/css.mjs';
+import { cx } from '../../../styled-system/css/cx.mjs';
+import '../../../styled-system/helpers.mjs';
+import { styled } from '../../../styled-system/jsx/factory.mjs';
+import { isCssProperty } from '../../../styled-system/jsx/is-valid-prop.mjs';
+import '../../../styled-system/patterns/visually-hidden.mjs';
+
+const shouldForwardProp = (prop, variantKeys, options = {}) => options.forwardProps?.includes(prop) || !variantKeys.includes(prop) && !isCssProperty(prop);
+const createStyleContext = (recipe) => {
+  const StyleContext = createContext(null);
+  const withRootProvider = (Component) => {
+    const StyledComponent = (props) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const slotStyles = recipe(variantProps);
+      return /* @__PURE__ */ jsx(StyleContext.Provider, { value: slotStyles, children: /* @__PURE__ */ jsx(Component, { ...otherProps }) });
+    };
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = styled(
+      Component,
+      {},
+      {
+        shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options)
+      }
+    );
+    const StyledSlotProvider = forwardRef((props, ref) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const slotStyles = recipe(variantProps);
+      return /* @__PURE__ */ jsx(StyleContext.Provider, { value: slotStyles, children: /* @__PURE__ */ jsx(StyledComponent, { ...otherProps, ref, className: cx(slotStyles?.[slot], props.className) }) });
+    });
+    StyledSlotProvider.displayName = Component.displayName || Component.name;
+    return StyledSlotProvider;
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = styled(Component);
+    const StyledSlotComponent = forwardRef((props, ref) => {
+      const slotStyles = useContext(StyleContext);
+      return /* @__PURE__ */ jsx(StyledComponent, { ...props, ref, className: cx(slotStyles?.[slot], props.className) });
+    });
+    StyledSlotComponent.displayName = Component.displayName || Component.name;
+    return StyledSlotComponent;
+  };
+  return {
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+};
+
+export { createStyleContext };

package/dist/esm/ui-kit/switch.mjs

@@ -0,0 +1,40 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { SvgIcon } from '../components/SvgIcon/index.mjs';
+import { SvgIconType } from '../components/SvgIcon/svg-icon-type.mjs';
+import { css } from '../styled-system/css/css.mjs';
+import '../styled-system/helpers.mjs';
+import { Root, Control, Thumb, Label } from './styled/switch.mjs';
+import { SwitchHiddenInput } from '@ark-ui/react/switch';
+
+const Switch = forwardRef((props, ref) => {
+  const { children, ...rootProps } = props;
+  const { checked, loading } = props;
+  return /* @__PURE__ */ jsxs(Root, { ref, ...rootProps, children: [
+    /* @__PURE__ */ jsx(Control, { bg: checked ? "green" : "primary", children: loading ? /* @__PURE__ */ jsx(
+      SvgIcon,
+      {
+        type: SvgIconType.Loader,
+        className: css({
+          w: "4",
+          h: "4",
+          p: "0.5",
+          color: checked ? "white" : "black"
+        })
+      }
+    ) : /* @__PURE__ */ jsx(Thumb, {}) }),
+    children && /* @__PURE__ */ jsx(Label, { textStyle: "sm", fontWeight: "normal", textWrap: "nowrap", children }),
+    /* @__PURE__ */ jsx(SwitchHiddenInput, {})
+  ] });
+});
+Switch.displayName = "Switch";
+
+export { Switch };