abrplus-ui-kit 0.2.9

package/dist/index-CCvWoynu.cjs

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const tailwindMerge = require("tailwind-merge");
+const Avatar = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Avatar, { ...props, className: tailwindMerge.twMerge("bg-light-7 border-primary-light-3", className) });
+};
+const Group = ({ className, max, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Avatar.Group, { max, ...props, className: tailwindMerge.twMerge(className) });
+};
+Avatar.Group = Group;
+exports.Avatar = Avatar;

package/dist/index-CQKRmQkW.js

@@ -0,0 +1,543 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { F as Flex, T as Text, I as Icon, a as Tooltip$1, R as Render, L as Loading } from "./index-C24zbKLS.js";
+import { c as colors, A as AbrplusUIKit } from "./colors-CztsZ6e_.js";
+import { twMerge } from "tailwind-merge";
+function uncapitalize(value) {
+  return value.slice(0, 1).toLowerCase() + value.slice(1);
+}
+function batch(components) {
+  const assignees = Object.assign({}, { ...components });
+  return new Proxy(assignees, {
+    get(target, property) {
+      const safeTarget = Object.freeze({
+        ...target,
+        [Symbol.toPrimitive]() {
+          return "Error: Attempted to render object as a JSX";
+        }
+      });
+      if (property in safeTarget) {
+        return safeTarget[property];
+      }
+      const origProperty = uncapitalize(property);
+      if (origProperty in safeTarget) {
+        return safeTarget[origProperty];
+      }
+      return null;
+    }
+  });
+}
+const TooltipTitle = ({ title, iconName }) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
+  /* @__PURE__ */ jsx(Text, { size: 14, color: colors.white_ff, children: title }),
+  iconName && /* @__PURE__ */ jsx(Icon, { name: iconName })
+] });
+const Tooltip = ({ children, title, iconName, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1,
+    {
+      title: typeof title === "string" ? /* @__PURE__ */ jsx(TooltipTitle, { title, iconName }) : title,
+      ...rest,
+      children
+    }
+  );
+};
+const fontSizePicker = {
+  block: "text-[16px]",
+  medium: "text-[16px]",
+  small: "text-[12px]"
+};
+const paddingPicker = (hasIcon) => ({
+  start: {
+    block: `pe-4 ${hasIcon ? "ps-3" : "ps-4"} `,
+    medium: `pe-4 ${hasIcon ? "ps-3" : "ps-4"} `,
+    small: `pe-3 ps-[8px]`
+  },
+  end: {
+    block: `ps-4 pe-3`,
+    medium: `ps-4 pe-3`,
+    small: `ps-4 pe-3`
+  }
+});
+const buttonDefaultClasses = "flex relative select-none w-fit appearance-none flex-row items-center  justify-center gap-2 whitespace-nowrap rounded text-center outline-none";
+const ActionButton = ({
+  style,
+  height,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  ...rest
+}) => {
+  const appName = AbrplusUIKit.config().getAppName();
+  const getColor = () => {
+    if ((disabled || isLoading) && appName) {
+      if (appName === "home" || appName === "sandbox" || appName === "bi" || appName === "storybook")
+        return colors["sales"]["action_light_2"];
+      return colors[appName]["action_light_2"];
+    }
+    return colors.white_ff;
+  };
+  const getColorClass = () => {
+    if (!appName) return;
+    const data = {
+      bi: twMerge("bg-sales-action hover:bg-sales-action-light-1 active:bg-sales-action-dark-1"),
+      call: twMerge("bg-call-action hover:bg-call-action-light-1 active:bg-call-action-dark-1"),
+      club: twMerge("bg-club-action hover:bg-club-action-light-1 active:bg-club-action-dark-1"),
+      marketing: twMerge(
+        "bg-marketing-action hover:bg-marketing-action-light-1 active:bg-marketing-action-dark-1"
+      ),
+      sales: twMerge("bg-sales-action hover:bg-sales-action-light-1 active:bg-sales-action-dark-1"),
+      team: twMerge("bg-team-action hover:bg-team-action-light-1 active:bg-team-action-dark-1"),
+      rayan: twMerge("bg-rayan-action hover:bg-rayan-action-light-1 active:bg-rayan-action-dark-1")
+    };
+    return data?.[appName] || data["sales"];
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: {
+        height: height || 34,
+        ...style
+      },
+      className: twMerge(
+        "bg-repo disabled:bg-light-6 ",
+        getColorClass(),
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        mode === "block" && "w-full",
+        (disabled || isLoading) && "cursor-not-allowed border-light-6",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: isLoading, children: /* @__PURE__ */ jsx(Flex, { className: "absolute", children: /* @__PURE__ */ jsx(Loading, { isLoading: true, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            lang,
+            weight: "medium",
+            className: fontSizePicker[mode || "block"],
+            color: getColor(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const IconButton = ({
+  style,
+  height = 34,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  iconProps,
+  color,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      style: {
+        height,
+        ...style
+      },
+      className: twMerge(
+        buttonDefaultClasses,
+        "h-[34px] w-[34px] p-4",
+        "bg-light-1  border-primary-light-3 border",
+        "hover:bg-white-ff hover:border-primary-light-2",
+        "active:bg-light-6 active:border-primary-light-2",
+        "disabled:text-primary-light-2 disabled:bg-light-6 disabled:border-light-6",
+        disabled && "border-light-6 cursor-not-allowed",
+        className
+      ),
+      disabled,
+      ...rest,
+      children: iconProps?.renderIcon ? iconProps.renderIcon : /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: iconName,
+          color: disabled ? colors.primary_light_3 : color ?? colors.primary,
+          ...iconProps
+        }
+      )
+    }
+  );
+};
+const NegativeButton = ({
+  style,
+  height,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  variant = "outline",
+  // Default variant
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    } else if (variant === "contain") {
+      return colors.white_ff;
+    }
+    return colors.negative;
+  };
+  const outlineClasses = "hover:bg-negative-light-1 active:bg-negative-dark-1 [&_p]:hover:!text-white-ff [&_*]:hover:fill-white-ff disabled:bg-light-6 bg-transparent border-negative hover:border-negative-light-1 active:border-negative-dark-1 disabled:light-6 border-[2px] border-solid";
+  const containClasses = "bg-negative hover:bg-negative-light-1 active:bg-negative-dark-1 disabled:bg-light-6 border-transparent";
+  const buttonVariantClasses = variant === "contain" ? containClasses : outlineClasses;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: {
+        height: height || 34,
+        ...style
+      },
+      className: twMerge(
+        buttonDefaultClasses,
+        buttonVariantClasses,
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        (disabled || isLoading) && "cursor-not-allowed",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: isLoading, children: /* @__PURE__ */ jsx(Flex, { className: "absolute", children: /* @__PURE__ */ jsx(Loading, { isLoading: true, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: iconName,
+            className: twMerge(fontSizePicker[mode || "block"]),
+            color: getColor()
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Text, { weight: "medium", size: 16, color: getColor(), lang, children }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const PrimaryButton = ({
+  style,
+  height = 34,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  textSize,
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    }
+    return colors.white_ff;
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: { height, ...style },
+      className: twMerge(
+        "bg-primary hover:bg-primary-light-1 active:bg-primary-dark-1 disabled:bg-light-6",
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        mode === "block" && "w-full",
+        (disabled || isLoading) && "cursor-not-allowed border-light-6",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: isLoading, children: /* @__PURE__ */ jsx(Flex, { className: "absolute", children: /* @__PURE__ */ jsx(Loading, { isLoading: true, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            lang,
+            weight: "medium",
+            className: twMerge(
+              "text-white-ff",
+              (disabled || isLoading) && "text-primary-light-2",
+              fontSizePicker[mode || "block"]
+            ),
+            size: textSize,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const SecondaryButton = ({
+  style,
+  height = 34,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    }
+    return colors.primary;
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: { height, ...style },
+      className: twMerge(
+        "bg-transparent hover:bg-primary-light-1 active:bg-primary-dark-1 disabled:bg-light-6 [&_p]:text-primary [&_p]:hover:text-white-ff [&_svg]:hover:!fill-white-ff",
+        "border-[2px] border-solid border-primary hover:border-primary-light-1 active:border-primary-dark-1 disabled:bg-light-6",
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        (disabled || isLoading) && "cursor-not-allowed",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: isLoading, children: /* @__PURE__ */ jsx(Flex, { className: "absolute", children: /* @__PURE__ */ jsx(Loading, { isLoading: true, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) }),
+        /* @__PURE__ */ jsx(Text, { lang, weight: "medium", className: fontSizePicker[mode || "block"], children }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const SecondaryQuietButton = ({
+  style,
+  height,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    }
+    return colors.primary;
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: {
+        height: height || 34,
+        ...style
+      },
+      className: twMerge(
+        "hover:bg-light-6 active:bg-light-7 disabled:light-6 bg-transparent",
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        (disabled || isLoading) && "cursor-not-allowed ",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            lang,
+            weight: "medium",
+            className: fontSizePicker[mode || "block"],
+            color: getColor(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const TertiaryButton = ({
+  style,
+  height,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    }
+    return colors.primary_dark_1;
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: {
+        height: height || 34,
+        ...style
+      },
+      className: twMerge(
+        "bg-light-1 hover:bg-white-ff active:light-6 disabled:light-6",
+        "border-primary-light-3 hover:border-primary-light-2 active:bg-primary-light-2 disabled:light-6 border-[1px] border-solid",
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        (disabled || isLoading) && "cursor-not-allowed",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            lang,
+            weight: "medium",
+            className: fontSizePicker[mode || "block"],
+            color: getColor(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, className: fontSizePicker[mode || "block"], color: getColor() }) })
+      ]
+    }
+  );
+};
+const TextButton = ({
+  style,
+  height = 34,
+  mode,
+  children,
+  iconName,
+  disabled,
+  className,
+  iconPosition = "start",
+  isLoading,
+  lang = "fa",
+  underline,
+  textProps,
+  startIconSize,
+  endIconSize,
+  ...rest
+}) => {
+  const getColor = () => {
+    if (disabled || isLoading) {
+      return colors.primary_light_2;
+    }
+    return colors.black;
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      lang,
+      style: { height, ...style },
+      className: twMerge(
+        "disabled:bg-light-6 border-none hover:bg-none focus:bg-none",
+        paddingPicker(!!iconName)[iconPosition][mode || "block"],
+        fontSizePicker[mode || "block"],
+        buttonDefaultClasses,
+        mode === "block" && "w-full",
+        (disabled || isLoading) && "border-light-6 cursor-not-allowed",
+        className
+      ),
+      disabled: disabled || isLoading,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Render, { when: isLoading, children: /* @__PURE__ */ jsx(Flex, { className: "absolute", children: /* @__PURE__ */ jsx(Loading, { isLoading: true, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "start", children: iconName && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: startIconSize,
+            name: iconName,
+            className: fontSizePicker[mode || "block"],
+            color: getColor()
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            lang,
+            weight: "medium",
+            className: twMerge(
+              (disabled || isLoading) && "text-primary-light-2",
+              fontSizePicker[mode || "block"],
+              underline && "underline"
+            ),
+            ...textProps,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Render, { when: iconPosition === "end", children: iconName && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: endIconSize,
+            name: iconName,
+            className: fontSizePicker[mode || "block"],
+            color: getColor()
+          }
+        ) })
+      ]
+    }
+  );
+};
+const Button = batch({
+  Primary: PrimaryButton,
+  Secondary: SecondaryButton,
+  Tertiary: TertiaryButton,
+  SecondaryQuiet: SecondaryQuietButton,
+  Icon: IconButton,
+  Negative: NegativeButton,
+  Action: ActionButton,
+  Text: TextButton
+});
+export {
+  Button as B,
+  IconButton as I,
+  Tooltip as T,
+  buttonDefaultClasses as a,
+  batch as b,
+  fontSizePicker as f,
+  paddingPicker as p
+};