@klu_dev/ui-klu-green 1.2.21 → 1.2.23

package/dist/index.d.ts

@@ -348,6 +348,21 @@ interface PhoneFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
 }
 declare const PhoneField: React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLInputElement>>;
 
+interface CardData {
+    title: string;
+    balance: string;
+    cardNumber: string;
+    clabe: string;
+    accountNumber: string;
+    last4: string;
+}
+interface CorporateCardProps {
+    isBlocked?: boolean;
+    onToggleBlock: (checked: boolean) => void;
+    cardData?: CardData;
+}
+declare function CorporateCard({ isBlocked, onToggleBlock, cardData }: CorporateCardProps): react_jsx_runtime.JSX.Element;
+
 interface StatusCardSummaryItem {
     label: string;
     value: string;
@@ -369,4 +384,4 @@ interface StatusCardProps {
 }
 declare const StatusCard: React__default.FC<StatusCardProps>;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, CorporateCard, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -3553,9 +3553,229 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/ui/card/card.tsx
 import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+var PlasticCard = ({
+  isBlocked = false,
+  last4 = "0000"
+}) => {
+  return /* @__PURE__ */ jsxs25("div", { className: "uiklu-relative uiklu-w-full uiklu-h-full uiklu-min-w-[186px] uiklu-min-h-[114px] \n        uiklu-rounded-xl uiklu-overflow-hidden uiklu-shrink-0\n        uiklu-shadow-[0_2.467px_2.467px_0_rgba(0,0,0,0.25)]\n        uiklu-transition-opacity uiklu-duration-300", children: [
+    /* @__PURE__ */ jsx30("div", { className: "uiklu-absolute uiklu-inset-0 uiklu-z-0", children: /* @__PURE__ */ jsxs25(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 185 111",
+        preserveAspectRatio: "none",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsx30("path", { d: "M185 0H0V111H185V0Z", fill: "url(#paint0_linear_card)" }),
+          /* @__PURE__ */ jsx30("defs", { children: /* @__PURE__ */ jsxs25(
+            "linearGradient",
+            {
+              id: "paint0_linear_card",
+              x1: "-0.00289658",
+              y1: "113.999",
+              x2: "101.58",
+              y2: "-51.7413",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx30("stop", { "stop-color": "#0A2D27" }),
+                /* @__PURE__ */ jsx30("stop", { offset: "1", "stop-color": "#096761" })
+              ]
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx30("div", { className: `uiklu-absolute uiklu-inset-0 uiklu-z-1 uiklu-bg-basewhite/40 
+        uiklu-transition-opacity uiklu-duration-300
+         ${isBlocked ? "uiklu-opacity-100" : "uiklu-opacity-0"}` }),
+    /* @__PURE__ */ jsxs25("div", { className: "uiklu-absolute uiklu-inset-0 uiklu-z-10 uiklu-h-full uiklu-w-full \n        uiklu-p-3 uiklu-flex uiklu-flex-col uiklu-justify-between uiklu-box-border", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "uiklu-flex uiklu-justify-between uiklu-items-start uiklu-w-full", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "uiklu-flex uiklu-flex-col", children: [
+          /* @__PURE__ */ jsx30("div", { className: "uiklu-flex uiklu-items-center uiklu-w-[29px] \n                uiklu-h-[14px] uiklu-text-basewhite uiklu-mb-[16px]", children: Icons.KLUWHITE }),
+          /* @__PURE__ */ jsxs25("span", { className: "uiklu-text-basewhite uiklu-text-[13px] uiklu-font-sans \n            uiklu-font-semibold uiklu-tracking-wider uiklu-leading-normal", children: [
+            "**** ",
+            last4
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx30("div", { className: "uiklu-text-basewhite uiklu-pt-0.5", children: isBlocked ? Icons.LOCK : Icons.LOCKOPEN })
+      ] }),
+      /* @__PURE__ */ jsx30("div", { className: `uiklu-flex uiklu-justify-end uiklu-w-full uiklu-mt-auto
+          ${isBlocked ? "uiklu-opacity-70" : "uiklu-opacity-100"}`, children: /* @__PURE__ */ jsx30("div", { className: "uiklu-flex uiklu-items-center uiklu-shrink-0", children: Icons.MASTERCARD }) })
+    ] })
+  ] });
+};
 
 // src/components/ui/corporateCard/corporateCard.tsx
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+function CorporateCard({
+  isBlocked = false,
+  onToggleBlock,
+  cardData = {
+    title: "Mi Tarjeta",
+    balance: "000,000.00",
+    cardNumber: "0000 0000 0000 0000",
+    clabe: "000 000 000 000 000 000",
+    accountNumber: "0000 0000",
+    last4: "0000"
+  }
+}) {
+  const [showBalance, setShowBalance] = useState12(true);
+  const [copiedField, setCopiedField] = useState12(null);
+  const [showTooltip, setShowTooltip] = useState12(false);
+  const handleCopy = (text, field) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedField(field);
+      setShowTooltip(true);
+      setTimeout(() => {
+        setCopiedField(null);
+        setShowTooltip(false);
+      }, 1500);
+    }).catch((err) => {
+      console.error("Error al copiar al portapapeles: ", err);
+    });
+  };
+  const CopyButton = ({
+    text,
+    field,
+    className = ""
+  }) => /* @__PURE__ */ jsxs26(
+    "button",
+    {
+      onClick: () => handleCopy(text, field),
+      className: `uiklu-relative uiklu-text-outlinesecondary
+      uiklu-hover:text-primary
+      uiklu-transition-colors
+      uiklu-flex
+      uiklu-justify-center
+      uiklu-items-center
+      uiklu-bg-transparent
+      uiklu-shrink-0 ${className}`,
+      children: [
+        Icons.COPY,
+        showTooltip && copiedField === field && /* @__PURE__ */ jsx31(
+          "div",
+          {
+            className: "uiklu-absolute\n          uiklu-bottom-full\n          uiklu-left-1/2\n          uiklu--translate-x-1/2\n          uiklu-mb-2\n          uiklu-z-[9999]\n          uiklu-pointer-events-none",
+            children: /* @__PURE__ */ jsxs26(
+              "div",
+              {
+                className: "uiklu-relative\n            uiklu-bg-gray900\n            uiklu-text-white\n            uiklu-text-[11px]\n            uiklu-px-2\n            uiklu-py-1\n            uiklu-rounded-md\n            uiklu-whitespace-nowrap\n            uiklu-shadow-xl",
+                children: [
+                  "Copiado",
+                  /* @__PURE__ */ jsx31(
+                    "div",
+                    {
+                      className: "uiklu-absolute\n              uiklu-top-full\n              uiklu-left-1/2\n              uiklu--translate-x-1/2\n              uiklu-border-4\n              uiklu-border-transparent\n              uiklu-border-t-gray900"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs26("div", { className: "uiklu-font-sans uiklu-max-w-[569px] lg:uiklu-max-w-full uiklu-bg-basewhite\n    uiklu-border uiklu-border-gray200 uiklu-rounded-2xl uiklu-p-[16px] uiklu-shadow-sm uiklu-w-full", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "uiklu-hidden lg:uiklu-flex lg:uiklu-justify-between lg:uiklu-items-center uiklu-mb-4", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center ", children: [
+        /* @__PURE__ */ jsx31("div", { className: "uiklu-w-[24px] uiklu-h-[24px] uiklu-flex \n            uiklu-items-center uiklu-justify-center uiklu-text-primary700 uiklu-mr-[10px]", children: Icons.CARDCIRCLE }),
+        /* @__PURE__ */ jsx31("span", { className: "uiklu-font-medium uiklu-text-primary900 uiklu-text-[16px]", children: cardData.title })
+      ] }),
+      /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center uiklu-justify-between", children: [
+        /* @__PURE__ */ jsx31("span", { className: "uiklu-font-sans uiklu-text-[24px] uiklu-font-bold uiklu-text-gray900 ", children: showBalance ? `$${cardData.balance}` : "$ ******" }),
+        /* @__PURE__ */ jsx31(
+          "button",
+          {
+            onClick: () => setShowBalance(!showBalance),
+            className: "uiklu-text-primary500 uiklu-hover:opacity-80 uiklu-transition-opacity\n            uiklu-bg-transparent uiklu-ml-[10px] uiklu-p-0",
+            children: showBalance ? Icons.EYE_OPEN : Icons.EYE_MASKED
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx31("hr", { className: "uiklu-hidden lg:uiklu-block uiklu-border-[1px] uiklu-border-gray300 uiklu-mb-5" }),
+    /* @__PURE__ */ jsxs26("div", { className: "lg:uiklu-hidden uiklu-flex uiklu-flex-col", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center", children: [
+        /* @__PURE__ */ jsx31("div", { className: "uiklu-w-[24px] uiklu-h-[24px] uiklu-flex \n            uiklu-items-center uiklu-justify-center uiklu-text-primary700 uiklu-mr-[10px]", children: Icons.CARDCIRCLE }),
+        /* @__PURE__ */ jsx31("span", { className: " uiklu-font-medium uiklu-text-primary900 uiklu-text-[16px]", children: cardData.title })
+      ] }),
+      /* @__PURE__ */ jsx31("div", { className: "uiklu-w-full uiklu-h-[1px] uiklu-bg-gray300 uiklu-mt-[20px] uiklu-mb-[20px]" }),
+      /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-mb-[20px]", children: [
+        /* @__PURE__ */ jsx31("span", { className: "uiklu-font-sans uiklu-text-[24px] uiklu-font-bold uiklu-text-gray900 ", children: showBalance ? `$${cardData.balance}` : "$ ******" }),
+        /* @__PURE__ */ jsx31(
+          "button",
+          {
+            onClick: () => setShowBalance(!showBalance),
+            className: "uiklu-text-primary500 uiklu-hover:opacity-80 uiklu-transition-opacity\n            uiklu-bg-transparent uiklu-ml-[10px] uiklu-p-0",
+            children: showBalance ? Icons.EYE_OPEN : Icons.EYE_MASKED
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-flex-col lg:uiklu-flex-row uiklu-items-center \n        lg:uiklu-items-stretch uiklu-justify-between lg:uiklu-h-[114px] uiklu-w-full", children: [
+      /* @__PURE__ */ jsx31("div", { className: "uiklu-w-[186px] uiklu-shrink-0 lg:uiklu-mr-[20px] uiklu-flex \n          uiklu-justify-center uiklu-mb-[20px] lg:uiklu-mb-0", children: /* @__PURE__ */ jsx31(
+        PlasticCard,
+        {
+          isBlocked,
+          last4: cardData.last4
+        }
+      ) }),
+      /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-flex-col uiklu-flex-grow uiklu-justify-between uiklu-w-full \n          uiklu-items-center lg:uiklu-items-stretch", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center uiklu-justify-center lg:uiklu-justify-start \n             uiklu-mb-[20px] lg:uiklu-mb-0 lg:uiklu-mt-[10px] uiklu-relative", children: [
+          /* @__PURE__ */ jsx31("span", { className: "uiklu-font-sans uiklu-text-[20px] uiklu-font-bold uiklu-text-gray900 \n              uiklu-tracking-wide uiklu-text-center lg:uiklu-text-left", children: cardData.cardNumber }),
+          /* @__PURE__ */ jsx31(
+            CopyButton,
+            {
+              text: cardData.cardNumber,
+              field: "card"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs26("div", { className: "uiklu-w-full lg:uiklu-min-w-[331px] uiklu-box-border uiklu-bg-primarylight\n              uiklu-border uiklu-border-primary50 uiklu-rounded-[10px] uiklu-p-[10px] uiklu-flex \n              uiklu-flex-col ", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center  \n              uiklu-flex-wrap lg:uiklu-flex-nowrap lg:uiklu-justify-start", children: [
+            /* @__PURE__ */ jsxs26("span", { className: "uiklu-text-[14px] uiklu-text-gray700 uiklu-font-light \n                uiklu-break-all sm:uiklu-break-normal", children: [
+              "Cuenta Clabe: ",
+              /* @__PURE__ */ jsx31("strong", { className: "uiklu-text-gray800 uiklu-font-sans\n                uiklu-font-medium uiklu-text-[14px]", children: cardData.clabe })
+            ] }),
+            /* @__PURE__ */ jsx31(
+              CopyButton,
+              {
+                text: cardData.clabe,
+                field: "clabe"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-items-center uiklu-flex-wrap lg:uiklu-flex-nowrap \n              lg:uiklu-justify-start", children: [
+            /* @__PURE__ */ jsxs26("span", { className: "uiklu-text-[14px] uiklu-text-gray700 uiklu-font-light", children: [
+              "No. de cuenta: ",
+              /* @__PURE__ */ jsx31("strong", { className: "uiklu-text-gray800 uiklu-font-sans\n                uiklu-font-medium uiklu-text-[14px]", children: cardData.accountNumber })
+            ] }),
+            /* @__PURE__ */ jsx31(
+              CopyButton,
+              {
+                text: cardData.accountNumber,
+                field: "account"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs26("div", { className: "uiklu-flex uiklu-justify-center lg:uiklu-justify-end uiklu-items-center \n        uiklu-gap-3 uiklu-mt-[20px] lg:uiklu-mt-4", children: [
+      /* @__PURE__ */ jsx31(
+        Switch,
+        {
+          checked: isBlocked,
+          onCheckedChange: onToggleBlock
+        }
+      ),
+      /* @__PURE__ */ jsx31("span", { className: "uiklu-text-[14px] uiklu-font-medium uiklu-text-gray900", children: "Bloquear tarjeta" })
+    ] })
+  ] });
+}
 
 // src/components/ui/statusCard/statusCard.tsx
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -3647,6 +3867,7 @@ export {
   BalanceInfo,
   Button,
   Checkbox,
+  CorporateCard,
   DetailCard,
   GridCard,
   IconBadge,