@sparrowengg/twigs-editor-react 0.0.1 → 0.0.2

package/dist/es/react-components/dist/es/button/button.js

@@ -1,772 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { clsx } from '../packages/react-components/node_modules/clsx/dist/clsx.js';
-import { styled, keyframes } from '../stitches.config.js';
-import { ButtonSideElement } from './side-element.js';
-import { getLoaderIconSizeFromButtonProps, BUTTON_CLASSNAMES, getLoaderVariantFromButtonVariant } from './utils.js';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const loadingBlink = keyframes({
-  "50%": {
-    opacity: 0.6
-  },
-  "0%, 100%": {
-    opacity: 1
-  }
-});
-const StyledButton = styled("button", {
-  appearance: "none",
-  border: "none",
-  background: "transparent",
-  fontSize: "$lg",
-  lineHeight: "$md",
-  borderRadius: "$lg",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontWeight: "$7",
-  cursor: "pointer",
-  transition: "all $transitions$2",
-  "&:disabled": {
-    opacity: 0.4,
-    cursor: "not-allowed"
-  },
-  "&:focus, &:active": {
-    outline: "none"
-  },
-  "&:focus-visible": {
-    $$shadowColor: "$colors$primary200",
-    boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
-  },
-  [`&.${BUTTON_CLASSNAMES.loading} .${BUTTON_CLASSNAMES.content}`]: {
-    animation: `${loadingBlink} 1.5s cubic-bezier(0.51, 0, 0, 1) infinite`
-  },
-  variants: {
-    size: {
-      "2xl": {
-        padding: "$9 $14",
-        borderRadius: "$2xl",
-        fontSize: "$lg",
-        lineHeight: "$lg",
-        height: "$16",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$6",
-          height: "$6"
-        }
-      },
-      xl: {
-        padding: "$5 $10",
-        borderRadius: "$xl",
-        fontSize: "$lg",
-        lineHeight: "$lg",
-        height: "$12",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$6",
-          height: "$6"
-        }
-      },
-      lg: {
-        padding: "$4 $8",
-        borderRadius: "$lg",
-        fontSize: "$md",
-        lineHeight: "$md",
-        height: "$10",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$5",
-          height: "$5"
-        }
-      },
-      md: {
-        padding: "$3 $6",
-        borderRadius: "$lg",
-        fontSize: "$sm",
-        lineHeight: "$md",
-        height: "$8",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$5",
-          height: "$5"
-        }
-      },
-      sm: {
-        padding: "$1 $4",
-        borderRadius: "$sm",
-        fontSize: "$sm",
-        fontWeight: "$5",
-        lineHeight: "$sm",
-        height: "$6",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$4",
-          height: "$4"
-        }
-      },
-      xs: {
-        padding: "$1 $3",
-        borderRadius: "$sm",
-        fontSize: "$xs",
-        fontWeight: "$5",
-        lineHeight: "$xs",
-        height: "$5",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "14px",
-          height: "14px"
-        }
-      },
-      xxs: {
-        padding: "$1 $2",
-        borderRadius: "$sm",
-        fontSize: "$xxs",
-        lineHeight: "$xxs",
-        height: "$4",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "14px",
-          height: "14px"
-        }
-      }
-    },
-    color: {
-      default: {
-        backgroundColorOpacity: ["$secondary500", 0.08],
-        color: "$secondary600",
-        [`&:hover:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          color: "$secondary700",
-          backgroundColorOpacity: ["$secondary500", 0.15]
-        },
-        "&:active:not(:disabled)": {
-          color: "$secondary800",
-          backgroundColorOpacity: ["$secondary500", 0.2]
-        },
-        "&:focus": {
-          color: "$secondary600",
-          backgroundColorOpacity: ["$secondary500", 0.15]
-        }
-      },
-      primary: {
-        background: "$primary500",
-        color: "$white900",
-        "&:hover:not(:disabled), &:focus": {
-          background: "$primary600"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "$primary700"
-        }
-      },
-      secondary: {
-        background: "$secondary500",
-        color: "$white900",
-        "&:hover:not(:disabled), &:focus": {
-          background: "$secondary600"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "$secondary800"
-        }
-      },
-      bright: {
-        background: "$white900",
-        color: "$secondary500",
-        "&:hover:not(:disabled), &:focus": {
-          color: "$secondary600",
-          background: "$black50"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          color: "$secondary700",
-          background: "$black100"
-        }
-      },
-      light: {
-        backgroundColorOpacity: ["$white200", 0.1],
-        color: "$white900",
-        "&:hover:not(:disabled), &:focus": {
-          background: "$white300"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "$white400"
-        }
-      },
-      error: {
-        background: "$negative100",
-        color: "$negative800",
-        "&:hover:not(:disabled), &:focus": {
-          background: "$negative200"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "$negative200",
-          color: "$negative900"
-        }
-      }
-    },
-    variant: {
-      solid: {
-        unset: "none"
-      },
-      ghost: {
-        background: "transparent"
-      },
-      outline: {
-        background: "$white900"
-      }
-    },
-    loading: {
-      true: {
-        pointerEvents: "none"
-      }
-    },
-    isIcon: {
-      true: {
-        justifyContent: "center",
-        width: "$10",
-        height: "$10"
-      }
-    },
-    isLeftIcon: {
-      true: {}
-    },
-    isRightIcon: {
-      true: {}
-    }
-  },
-  compoundVariants: [
-    {
-      isIcon: true,
-      css: {
-        padding: 0
-      }
-    },
-    {
-      variant: "outline",
-      size: "xxs",
-      css: {
-        borderWidth: "$xs"
-      }
-    },
-    {
-      variant: "outline",
-      size: "xs",
-      css: {
-        borderWidth: "$xs"
-      }
-    },
-    {
-      variant: "outline",
-      size: "sm",
-      css: {
-        borderWidth: "$xs"
-      }
-    },
-    {
-      variant: "outline",
-      size: "md",
-      css: {
-        borderWidth: "1.5px"
-      }
-    },
-    {
-      variant: "outline",
-      size: "lg",
-      css: {
-        borderWidth: "$sm"
-      }
-    },
-    {
-      variant: "outline",
-      size: "xl",
-      css: {
-        borderWidth: "$sm"
-      }
-    },
-    {
-      variant: "outline",
-      size: "2xl",
-      css: {
-        borderWidth: "$sm"
-      }
-    },
-    {
-      color: "primary",
-      variant: "ghost",
-      css: {
-        background: "transparent",
-        color: "$primary500",
-        "&:focus": {
-          backgroundColorOpacity: ["$primary500", 0.06]
-        },
-        "&:hover:not(:disabled)": {
-          backgroundColorOpacity: ["$primary500", 0.08]
-        },
-        "&:hover:not(:disabled), &:focus": {
-          color: "$primary600"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          color: "$primary700",
-          backgroundColorOpacity: ["$primary500", 0.15]
-        }
-      }
-    },
-    {
-      color: "primary",
-      variant: "outline",
-      css: {
-        color: "$primary500",
-        background: "$white900",
-        borderColorOpacity: ["$primary500", 0.4],
-        borderStyle: "solid",
-        "&:hover:not(:disabled), &:focus": {
-          borderColorOpacity: ["$primary500", 0.6],
-          color: "$primary600",
-          background: "$white900"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          borderColorOpacity: ["$primary500", 0.8],
-          color: "$primary700",
-          background: "$white900"
-        }
-      }
-    },
-    {
-      color: "secondary",
-      variant: "ghost",
-      css: {
-        background: "transparent",
-        color: "$secondary600",
-        "&:hover:not(:disabled), &:focus": {
-          color: "$secondary600",
-          backgroundColorOpacity: ["$secondary500", 0.08]
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          color: "$secondary700",
-          backgroundColorOpacity: ["$secondary500", 0.15]
-        }
-      }
-    },
-    {
-      color: "secondary",
-      variant: "outline",
-      css: {
-        color: "$secondary500",
-        background: "$white900",
-        borderColorOpacity: ["$secondary500", 0.2],
-        borderStyle: "solid",
-        "&:hover:not(:disabled), &:focus": {
-          borderColorOpacity: ["$secondary500", 0.4],
-          color: "$secondary600",
-          background: "$white900"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          borderColorOpacity: ["$secondary500", 0.8],
-          color: "$secondary800",
-          background: "$white900"
-        }
-      }
-    },
-    {
-      color: "light",
-      variant: "outline",
-      css: {
-        background: "transparent",
-        borderColorOpacity: ["$white400", 0.2],
-        borderStyle: "solid",
-        color: "$white900",
-        "&:hover:not(:disabled), &:focus": {
-          background: "transparent",
-          borderColorOpacity: ["$white500", 0.3]
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "transparent",
-          borderColorOpacity: ["$white700", 0.7]
-        }
-      }
-    },
-    {
-      color: "default",
-      variant: "ghost",
-      css: {
-        background: "transparent",
-        color: "$neutral800",
-        "&:hover:not(:disabled), &:focus, &:active:not(:disabled)": {
-          color: "$neutral900"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          backgroundColorOpacity: ["$black500", 0.08]
-        },
-        "&:hover:not(:disabled), &:focus": {
-          backgroundColorOpacity: ["$black500", 0.04]
-        }
-      }
-    },
-    {
-      color: "light",
-      variant: "ghost",
-      css: {
-        background: "transparent",
-        color: "$white900",
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          backgroundColorOpacity: ["$white300", 0.2]
-        },
-        "&:hover:not(:disabled), &:focus": {
-          backgroundColorOpacity: ["$white200", 0.15]
-        }
-      }
-    },
-    {
-      color: "error",
-      variant: "ghost",
-      css: {
-        color: "$negative800",
-        background: "transparent",
-        "&:hover:not(:disabled), &:focus": {
-          background: "$negative100"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          background: "$negative200"
-        }
-      }
-    },
-    {
-      color: "error",
-      variant: "outline",
-      css: {
-        color: "$negative800",
-        background: "$white900",
-        borderColor: "$negative200",
-        borderStyle: "solid",
-        "&:hover:not(:disabled), &:focus": {
-          borderColor: "$negative300",
-          color: "$negative800",
-          background: "$white900"
-        },
-        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
-          borderColor: "$negative400",
-          color: "$negative900",
-          background: "$white900"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "2xl",
-      css: {
-        width: "$16",
-        height: "$16",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$8",
-          height: "$8"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "xl",
-      css: {
-        width: "$12",
-        height: "$12",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$8",
-          height: "$8"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "lg",
-      css: {
-        width: "$10",
-        height: "$10",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$6",
-          height: "$6"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "md",
-      css: {
-        width: "$8",
-        height: "$8",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$5",
-          height: "$5"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "sm",
-      css: {
-        width: "$6",
-        height: "$6",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$4",
-          height: "$4"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "xs",
-      css: {
-        width: "$5",
-        height: "$5",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "$3",
-          height: "$3"
-        }
-      }
-    },
-    {
-      isIcon: true,
-      size: "xxs",
-      css: {
-        width: "$4",
-        height: "$4",
-        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
-          width: "14px",
-          height: "14px"
-        }
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "2xl",
-      css: {
-        paddingLeft: "$10"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "xl",
-      css: {
-        paddingLeft: "$8"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "lg",
-      css: {
-        paddingLeft: "$6"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "md",
-      css: {
-        paddingLeft: "$4"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "sm",
-      css: {
-        paddingLeft: "$3"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "xs",
-      css: {
-        paddingLeft: "$2"
-      }
-    },
-    {
-      isLeftIcon: true,
-      size: "xxs",
-      css: {
-        paddingLeft: "$1"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "2xl",
-      css: {
-        paddingRight: "$10"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "xl",
-      css: {
-        paddingRight: "$8"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "lg",
-      css: {
-        paddingRight: "$6"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "md",
-      css: {
-        paddingRight: "$4"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "sm",
-      css: {
-        paddingRight: "$3"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "xs",
-      css: {
-        paddingRight: "$2"
-      }
-    },
-    {
-      isRightIcon: true,
-      size: "xxs",
-      css: {
-        paddingRight: "$1"
-      }
-    }
-  ],
-  defaultVariants: {
-    color: "default",
-    size: "sm",
-    variant: "solid"
-  }
-});
-const Button = React__default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      className,
-      color = "primary",
-      icon,
-      leftIcon,
-      rightIcon,
-      loading,
-      disabled,
-      loader,
-      onClick
-    } = _b, rest = __objRest(_b, [
-      "children",
-      "className",
-      "color",
-      "icon",
-      "leftIcon",
-      "rightIcon",
-      "loading",
-      "disabled",
-      "loader",
-      "onClick"
-    ]);
-    var _b2;
-    const hasNoIcon = !(leftIcon || rightIcon || icon);
-    let buttonLoaderMargin = "$2";
-    if (rest.size === "2xl") {
-      buttonLoaderMargin = "$4";
-    } else if (["xxs", "xs", "sm"].includes(
-      rest.size
-    )) {
-      buttonLoaderMargin = "$1";
-    }
-    const _a2 = getLoaderIconSizeFromButtonProps(
-      {
-        buttonSize: rest.size,
-        loaderType: loader
-      }
-    ), { size: loaderSize } = _a2, loaderCSS = __objRest(_a2, ["size"]);
-    const loaderColor = getLoaderVariantFromButtonVariant({
-      variant: (_b2 = rest.variant) != null ? _b2 : "solid",
-      color
-    });
-    return /* @__PURE__ */ jsxs(
-      StyledButton,
-      __spreadProps(__spreadValues({
-        type: "button",
-        ref,
-        color,
-        isIcon: !!icon,
-        isLeftIcon: !!leftIcon,
-        isRightIcon: !!rightIcon,
-        disabled,
-        "data-testid": "button",
-        onClick,
-        className: clsx(className, BUTTON_CLASSNAMES.button, {
-          [`${BUTTON_CLASSNAMES.loading}`]: !!loading,
-          [`${BUTTON_CLASSNAMES.disabled}`]: disabled
-        })
-      }, rest), {
-        children: [
-          icon && /* @__PURE__ */ jsx(
-            ButtonSideElement,
-            {
-              icon,
-              loaderSize,
-              loaderCSS,
-              loading: !!loading,
-              loader,
-              loaderColor
-            }
-          ),
-          (leftIcon || hasNoIcon) && /* @__PURE__ */ jsx(
-            ButtonSideElement,
-            {
-              icon: hasNoIcon ? void 0 : leftIcon,
-              loaderSize,
-              loaderCSS,
-              loading: !!loading,
-              loader,
-              loaderColor,
-              containerStyle: {
-                marginRight: hasNoIcon && !loading ? "0" : buttonLoaderMargin
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: BUTTON_CLASSNAMES.content, children }),
-          rightIcon && /* @__PURE__ */ jsx(
-            ButtonSideElement,
-            {
-              icon: rightIcon,
-              loaderSize,
-              loaderCSS,
-              loading: !!loading,
-              loaderColor,
-              containerStyle: {
-                marginLeft: buttonLoaderMargin
-              },
-              loader
-            }
-          )
-        ]
-      })
-    );
-  }
-);
-
-export { Button };
-//# sourceMappingURL=button.js.map