@klu_dev/ui-klu-green 1.2.22 → 1.2.24

package/dist/index.css

@@ -306,6 +306,10 @@ button,
 .uiklu-z-\[100\]{
     z-index: 100;
 
+}
+.uiklu-z-\[1\]{
+    z-index: 1;
+
 }
 .uiklu-z-\[200\]{
     z-index: 200;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToastPrimitives from '@radix-ui/react-toast';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
 type InputSize = "sm" | "md" | "lg" | "full";
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -348,6 +349,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 +385,12 @@ 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 };
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+interface PlasticCardProps {
+    isBlocked?: boolean;
+    last4?: string;
+}
+declare const PlasticCard: ({ isBlocked, last4, }: PlasticCardProps) => react_jsx_runtime.JSX.Element;
+
+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, PlasticCard, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, Switch, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -3552,10 +3552,289 @@ var Switch = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/ui/card/card.tsx
+import { useId as useId2 } from "react";
 import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+var PlasticCard = ({
+  isBlocked = false,
+  last4 = "0000"
+}) => {
+  const gradientId = useId2();
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: "\n        uiklu-relative \n        uiklu-w-full \n        uiklu-h-full \n        uiklu-min-w-[186px] \n        uiklu-min-h-[114px]\n        uiklu-rounded-xl \n        uiklu-overflow-hidden \n        uiklu-shrink-0\n        uiklu-shadow-[0_2.467px_2.467px_0_rgba(0,0,0,0.25)]\n        uiklu-transition-opacity \n        uiklu-duration-300\n      ",
+      children: [
+        /* @__PURE__ */ jsx30("div", { className: "uiklu-absolute uiklu-inset-0 uiklu-z-0", children: /* @__PURE__ */ jsxs25(
+          "svg",
+          {
+            className: "uiklu-w-full uiklu-h-full",
+            viewBox: "0 0 185 111",
+            preserveAspectRatio: "none",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx30(
+                "path",
+                {
+                  d: "M185 0H0V111H185V0Z",
+                  fill: `url(#${gradientId})`
+                }
+              ),
+              /* @__PURE__ */ jsx30("defs", { children: /* @__PURE__ */ jsxs25(
+                "linearGradient",
+                {
+                  id: gradientId,
+                  x1: "-0.00289658",
+                  y1: "113.999",
+                  x2: "101.58",
+                  y2: "-51.7413",
+                  gradientUnits: "userSpaceOnUse",
+                  children: [
+                    /* @__PURE__ */ jsx30("stop", { stopColor: "#0A2D27" }),
+                    /* @__PURE__ */ jsx30("stop", { offset: "1", stopColor: "#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: "\n          uiklu-absolute \n          uiklu-inset-0 \n          uiklu-z-10\n          uiklu-h-full \n          uiklu-w-full\n          uiklu-p-3\n          uiklu-flex \n          uiklu-flex-col \n          uiklu-justify-between\n          uiklu-box-border\n        ",
+            children: [
+              /* @__PURE__ */ jsxs25(
+                "div",
+                {
+                  className: "\n            uiklu-flex \n            uiklu-justify-between \n            uiklu-items-start \n            uiklu-w-full\n          ",
+                  children: [
+                    /* @__PURE__ */ jsxs25("div", { className: "uiklu-flex uiklu-flex-col", children: [
+                      /* @__PURE__ */ jsx30(
+                        "div",
+                        {
+                          className: "\n                uiklu-flex \n                uiklu-items-center\n                uiklu-w-[29px]\n                uiklu-h-[14px]\n                uiklu-text-basewhite\n                uiklu-mb-[16px]\n              ",
+                          children: Icons.KLUWHITE
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs25(
+                        "span",
+                        {
+                          className: "\n                uiklu-text-basewhite\n                uiklu-text-[13px]\n                uiklu-font-sans\n                uiklu-font-semibold\n                uiklu-tracking-wider\n                uiklu-leading-normal\n              ",
+                          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 +3926,7 @@ export {
   BalanceInfo,
   Button,
   Checkbox,
+  CorporateCard,
   DetailCard,
   GridCard,
   IconBadge,
@@ -3657,6 +3937,7 @@ export {
   MobileMenuDrawer,
   Modal,
   PhoneField,
+  PlasticCard,
   PromoBanner,
   SearchSelect,
   SearchSelectField,
@@ -3668,6 +3949,7 @@ export {
   SelectValue,
   SidebarTabs,
   StatusCard,
+  Switch,
   TextField,
   ToastAction,
   Toaster,