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

package/dist/esm/styled-system/patterns/flex.mjs

@@ -0,0 +1,32 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import '../css/css.mjs';
+
+const flexConfig = {
+transform(props) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap2,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...rest
+  };
+}};
+
+const getFlexStyle = (styles = {}) => {
+  const _styles = getPatternStyles(flexConfig, styles);
+  return flexConfig.transform(_styles, patternFns)
+};
+
+export { getFlexStyle };

package/dist/esm/styled-system/patterns/visually-hidden.mjs

@@ -0,0 +1,24 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import '../css/css.mjs';
+
+const visuallyHiddenConfig = {
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}};
+
+const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles);
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+};
+
+export { getVisuallyHiddenStyle };

package/dist/esm/styled-system/recipes/avatar.mjs

@@ -0,0 +1,62 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { splitProps, memo, compact, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const avatarDefaultVariants = {
+  "size": "md"
+};
+const avatarCompoundVariants = [];
+
+const avatarSlotNames = [
+  [
+    "root",
+    "avatar__root"
+  ],
+  [
+    "image",
+    "avatar__image"
+  ],
+  [
+    "fallback",
+    "avatar__fallback"
+  ]
+];
+const avatarSlotFns = /* @__PURE__ */ avatarSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarDefaultVariants, getSlotCompoundVariant(avatarCompoundVariants, slotName))]);
+
+const avatarFn = memo((props = {}) => {
+  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+});
+
+const avatarVariantKeys = [
+  "size"
+];
+const getVariantProps = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+
+const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
+  __recipe__: false,
+  __name__: 'avatar',
+  raw: (props) => props,
+  variantKeys: avatarVariantKeys,
+  variantMap: {
+  "size": [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, avatarVariantKeys)
+  },
+  getVariantProps
+});
+
+export { avatar };

package/dist/esm/styled-system/recipes/button.mjs

@@ -0,0 +1,52 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { memo, splitProps } from '../helpers.mjs';
+import { mergeRecipes, createRecipe } from './create-recipe.mjs';
+
+const buttonFn = /* @__PURE__ */ createRecipe('button', {
+  "variant": "solid",
+  "size": "md"
+}, []);
+
+const buttonVariantMap = {
+  "variant": [
+    "solid",
+    "outline",
+    "ghost",
+    "link",
+    "subtle"
+  ],
+  "size": [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ]
+};
+
+const buttonVariantKeys = Object.keys(buttonVariantMap);
+
+const button = /* @__PURE__ */ Object.assign(memo(buttonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'button',
+  __getCompoundVariantCss__: buttonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: buttonVariantKeys,
+  variantMap: buttonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, buttonVariantKeys)
+  },
+  getVariantProps: buttonFn.getVariantProps,
+});
+
+export { button };

package/dist/esm/styled-system/recipes/create-recipe.mjs

@@ -0,0 +1,91 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { sortConditions, finalizeConditions } from '../css/conditions.mjs';
+import { css } from '../css/css.mjs';
+import { getCompoundVariantCss, assertCompoundVariant } from '../css/cva.mjs';
+import { cx } from '../css/cx.mjs';
+import { uniq, splitProps, compact, createCss, withoutSpace } from '../helpers.mjs';
+
+const createRecipe = (name, defaultVariants, compoundVariants) => {
+ const getVariantProps = (variants) => {
+   return {
+     [name]: '__ignore__',
+     ...defaultVariants,
+     ...compact(variants),
+   };
+ };
+
+  const recipeFn = (variants, withCompoundVariants = true) => {
+   const transform = (prop, value) => {
+     assertCompoundVariant(name, compoundVariants, variants, prop);
+
+      if (value === '__ignore__') {
+        return { className: name }
+      }
+
+      value = withoutSpace(value);
+      return { className: `${name}--${prop}_${value}` }
+   };
+
+   const recipeCss = createCss({
+     
+     conditions: {
+       shift: sortConditions,
+       finalize: finalizeConditions,
+       breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] }
+     },
+     utility: {
+       prefix: "iap",
+       toHash: (path, hashFn) => hashFn(path.join(":")),
+       transform,
+     }
+   });
+
+   const recipeStyles = getVariantProps(variants);
+
+   if (withCompoundVariants) {
+     const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles);
+     return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
+   }
+
+   return recipeCss(recipeStyles)
+  };
+
+   return {
+     recipeFn,
+     getVariantProps,
+     __getCompoundVariantCss__: (variants) => {
+       return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
+     },
+   }
+};
+
+const mergeRecipes = (recipeA, recipeB) => {
+ if (recipeA && !recipeB) return recipeA
+ if (!recipeA && recipeB) return recipeB
+
+ const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args));
+ const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys);
+ const variantMap = variantKeys.reduce((acc, key) => {
+   acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key]);
+   return acc
+ }, {});
+
+ return Object.assign(recipeFn, {
+   __recipe__: true,
+   __name__: `${recipeA.__name__} ${recipeB.__name__}`,
+   raw: (props) => props,
+   variantKeys,
+   variantMap,
+   splitVariantProps(props) {
+     return splitProps(props, variantKeys)
+   },
+ })
+ };
+
+export { createRecipe, mergeRecipes };

package/dist/esm/styled-system/recipes/icon.mjs

@@ -0,0 +1,44 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { memo, splitProps } from '../helpers.mjs';
+import { mergeRecipes, createRecipe } from './create-recipe.mjs';
+
+const iconFn = /* @__PURE__ */ createRecipe('icon', {
+  "size": "md"
+}, []);
+
+const iconVariantMap = {
+  "size": [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ]
+};
+
+const iconVariantKeys = Object.keys(iconVariantMap);
+
+const icon = /* @__PURE__ */ Object.assign(memo(iconFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'icon',
+  __getCompoundVariantCss__: iconFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: iconVariantKeys,
+  variantMap: iconVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, iconVariantKeys)
+  },
+  getVariantProps: iconFn.getVariantProps,
+});
+
+export { icon };

package/dist/esm/styled-system/recipes/skeleton.mjs

@@ -0,0 +1,33 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { memo, splitProps } from '../helpers.mjs';
+import { mergeRecipes, createRecipe } from './create-recipe.mjs';
+
+const skeletonFn = /* @__PURE__ */ createRecipe('skeleton', {}, []);
+
+const skeletonVariantMap = {};
+
+const skeletonVariantKeys = Object.keys(skeletonVariantMap);
+
+const skeleton = /* @__PURE__ */ Object.assign(memo(skeletonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'skeleton',
+  __getCompoundVariantCss__: skeletonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: skeletonVariantKeys,
+  variantMap: skeletonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, skeletonVariantKeys)
+  },
+  getVariantProps: skeletonFn.getVariantProps,
+});
+
+export { skeleton };

package/dist/esm/styled-system/recipes/spinner.mjs

@@ -0,0 +1,43 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { memo, splitProps } from '../helpers.mjs';
+import { mergeRecipes, createRecipe } from './create-recipe.mjs';
+
+const spinnerFn = /* @__PURE__ */ createRecipe('spinner', {
+  "size": "md"
+}, []);
+
+const spinnerVariantMap = {
+  "size": [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl"
+  ]
+};
+
+const spinnerVariantKeys = Object.keys(spinnerVariantMap);
+
+const spinner = /* @__PURE__ */ Object.assign(memo(spinnerFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'spinner',
+  __getCompoundVariantCss__: spinnerFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: spinnerVariantKeys,
+  variantMap: spinnerVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, spinnerVariantKeys)
+  },
+  getVariantProps: spinnerFn.getVariantProps,
+});
+
+export { spinner };

package/dist/esm/styled-system/recipes/text.mjs

@@ -0,0 +1,50 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { memo, splitProps } from '../helpers.mjs';
+import { mergeRecipes, createRecipe } from './create-recipe.mjs';
+
+const textFn = /* @__PURE__ */ createRecipe('text', {}, []);
+
+const textVariantMap = {
+  "variant": [
+    "heading"
+  ],
+  "size": [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl"
+  ]
+};
+
+const textVariantKeys = Object.keys(textVariantMap);
+
+const text = /* @__PURE__ */ Object.assign(memo(textFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'text',
+  __getCompoundVariantCss__: textFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: textVariantKeys,
+  variantMap: textVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, textVariantKeys)
+  },
+  getVariantProps: textFn.getVariantProps,
+});
+
+export { text };

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

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } 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 { Center } from '../styled-system/jsx/center.mjs';
+import { Spinner } from './spinner.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,34 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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 { 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/avatar.mjs

@@ -0,0 +1,24 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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/button.mjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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/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.mjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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/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/skeleton.mjs

@@ -0,0 +1,32 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { ark } from '@ark-ui/react/factory';
+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/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,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.1
+ */
+'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/css/conditions.mjs';
+import { spinner } from '../../styled-system/recipes/spinner.mjs';
+
+const Spinner = styled(ark.div, spinner);
+
+export { Spinner };