@klu_dev/ui-klu-green 1.2.27 → 1.2.28

package/dist/index.css

@@ -518,6 +518,10 @@ button,
 .uiklu-hidden{
     display: none;
 
+}
+.uiklu-h-10{
+    height: 2.5rem;
+
 }
 .uiklu-h-12{
     height: 3rem;
@@ -546,6 +550,10 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
+}
+.uiklu-h-7{
+    height: 1.75rem;
+
 }
 .uiklu-h-8{
     height: 2rem;
@@ -686,10 +694,22 @@ button,
 .uiklu-min-h-\[500px\]{
     min-height: 500px;
 
+}
+.uiklu-min-h-\[600px\]{
+    min-height: 600px;
+
 }
 .uiklu-min-h-screen{
     min-height: 100vh;
 
+}
+.\!uiklu-w-\[218px\]{
+    width: 218px !important;
+
+}
+.uiklu-w-10{
+    width: 2.5rem;
+
 }
 .uiklu-w-12{
     width: 3rem;
@@ -714,6 +734,10 @@ button,
 .uiklu-w-6{
     width: 1.5rem;
 
+}
+.uiklu-w-7{
+    width: 1.75rem;
+
 }
 .uiklu-w-8{
     width: 2rem;
@@ -722,6 +746,10 @@ button,
 .uiklu-w-9{
     width: 2.25rem;
 
+}
+.uiklu-w-\[100px\]{
+    width: 100px;
+
 }
 .uiklu-w-\[140px\]{
     width: 140px;
@@ -846,6 +874,10 @@ button,
 .uiklu-w-\[80px\]{
     width: 80px;
 
+}
+.uiklu-w-\[calc\(100\%-32px\)\]{
+    width: calc(100% - 32px);
+
 }
 .uiklu-w-\[var\(--radix-select-trigger-width\)\]{
     width: var(--radix-select-trigger-width);
@@ -919,6 +951,10 @@ button,
 .uiklu-min-w-\[var\(--radix-select-trigger-width\)\]{
     min-width: var(--radix-select-trigger-width);
 
+}
+.\!uiklu-max-w-\[586px\]{
+    max-width: 586px !important;
+
 }
 .uiklu-max-w-\[141px\]{
     max-width: 141px;
@@ -991,6 +1027,10 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
+}
+.uiklu-max-w-xs{
+    max-width: 20rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -1007,6 +1047,10 @@ button,
 .uiklu-flex-grow{
     flex-grow: 1;
 
+}
+.uiklu-border-collapse{
+    border-collapse: collapse;
+
 }
 .uiklu--translate-x-1\/2{
     --tw-translate-x: -50%;
@@ -1294,6 +1338,10 @@ button,
 .uiklu-rounded-2xl{
     border-radius: 1rem;
 
+}
+.uiklu-rounded-\[100px\]{
+    border-radius: 100px;
+
 }
 .uiklu-rounded-\[10px\]{
     border-radius: 10px;
@@ -1386,6 +1434,10 @@ button,
 .uiklu-border-t{
     border-top-width: 1px;
 
+}
+.uiklu-border-t-\[1px\]{
+    border-top-width: 1px;
+
 }
 .uiklu-border-solid{
     border-style: solid;
@@ -1525,6 +1577,16 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(6 55 45 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#0C3D34\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(12 61 52 / var(--tw-bg-opacity, 1));
+
+}
+.uiklu-bg-\[\#3D8B7E\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(61 139 126 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-\[\#E5F3F3\]{
     --tw-bg-opacity: 1;
@@ -1535,11 +1597,21 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(234 144 51 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#F4F6F6\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(244 246 246 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-\[\#FFF7ED\]{
     --tw-bg-opacity: 1;
     background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#f5f5f5\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-background{
     --tw-bg-opacity: 1;
@@ -1567,6 +1639,10 @@ button,
 .uiklu-bg-black\/40{
     background-color: rgb(0 0 0 / 0.4);
 
+}
+.uiklu-bg-black\/50{
+    background-color: rgb(0 0 0 / 0.5);
+
 }
 .uiklu-bg-destructive{
     --tw-bg-opacity: 1;
@@ -1749,6 +1825,11 @@ button,
 .uiklu-bg-origin-border{
     background-origin: border-box;
 
+}
+.uiklu-object-contain{
+    -o-object-fit: contain;
+       object-fit: contain;
+
 }
 .uiklu-object-cover{
     -o-object-fit: cover;
@@ -1810,6 +1891,10 @@ button,
 .uiklu-p-\[16px\]{
     padding: 16px;
 
+}
+.uiklu-p-\[24px\]{
+    padding: 24px;
+
 }
 .uiklu-p-\[2px\]{
     padding: 2px;
@@ -1918,6 +2003,11 @@ button,
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 
+}
+.uiklu-py-3\.5{
+    padding-top: 0.875rem;
+    padding-bottom: 0.875rem;
+
 }
 .uiklu-py-\[10px\]{
     padding-top: 10px;
@@ -1996,6 +2086,10 @@ button,
 .uiklu-pt-\[10px\]{
     padding-top: 10px;
 
+}
+.uiklu-pt-\[16px\]{
+    padding-top: 16px;
+
 }
 .uiklu-pt-\[20px\]{
     padding-top: 20px;
@@ -2024,6 +2118,10 @@ button,
 .uiklu-font-sans{
     font-family: 'Google Sans Flex', sans-serif;
 
+}
+.\!uiklu-text-\[16px\]{
+    font-size: 16px !important;
+
 }
 .uiklu-text-2xl{
     font-size: 16px;
@@ -2156,6 +2254,10 @@ button,
 .uiklu-uppercase{
     text-transform: uppercase;
 
+}
+.\!uiklu-leading-tight{
+    line-height: 1.25 !important;
+
 }
 .uiklu-leading-none{
     line-height: 1;
@@ -2176,6 +2278,10 @@ button,
 .uiklu-leading-tight{
     line-height: 1.25;
 
+}
+.\!uiklu-tracking-normal{
+    letter-spacing: 0em !important;
+
 }
 .uiklu-tracking-tight{
     letter-spacing: -0.025em;
@@ -2197,6 +2303,11 @@ button,
     --tw-text-opacity: 1 !important;
     color: hsl(var(--uiklu-destructive) / var(--tw-text-opacity, 1)) !important;
 
+}
+.uiklu-text-\[\#1A3A34\]{
+    --tw-text-opacity: 1;
+    color: rgb(26 58 52 / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-\[\#9A3412\]{
     --tw-text-opacity: 1;
@@ -2992,6 +3103,14 @@ input.uiklu-flex:not(:placeholder-shown) {
     .md\:uiklu-min-h-\[262px\]{
         min-height: 262px;
 
+    }
+    .md\:uiklu-min-h-\[310px\]{
+        min-height: 310px;
+
+    }
+    .md\:\!uiklu-w-\[586px\]{
+        width: 586px !important;
+
     }
     .md\:uiklu-max-w-\[400px\]{
         max-width: 400px;

package/dist/index.d.ts

@@ -149,6 +149,7 @@ declare const Icons: {
     TICKET: react_jsx_runtime.JSX.Element;
     CASH: react_jsx_runtime.JSX.Element;
     CHEVRON_RIGHT: react_jsx_runtime.JSX.Element;
+    CHEVRON_LEFT: react_jsx_runtime.JSX.Element;
     CHEVRON_DOWN: react_jsx_runtime.JSX.Element;
     SHIELD_CHECK: react_jsx_runtime.JSX.Element;
     CLOSE: react_jsx_runtime.JSX.Element;
@@ -173,6 +174,7 @@ declare const Icons: {
     BOXES: react_jsx_runtime.JSX.Element;
     MENU: react_jsx_runtime.JSX.Element;
     CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
+    REFRESH: react_jsx_runtime.JSX.Element;
     TELEPHONY: react_jsx_runtime.JSX.Element;
     MOBILITY: react_jsx_runtime.JSX.Element;
     HOMESERVICE: react_jsx_runtime.JSX.Element;
@@ -393,4 +395,15 @@ interface PlasticCardProps {
 }
 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 };
+interface SecureModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    icon?: ReactNode;
+    message?: string;
+    mainActionButtonText?: string;
+    onMainAction: () => void;
+}
+declare const SecureModal: ({ open, onOpenChange, title, icon, message, mainActionButtonText, onMainAction, }: SecureModalProps) => 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, SecureModal, 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

@@ -82,6 +82,24 @@ var ChevronRightIcon = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M15.5307 18.9698C15.6004 19.0395 15.6557 19.1222 15.6934 19.2132C15.7311 19.3043 15.7505 19.4019 15.7505 19.5004C15.7505 19.599 15.7311 19.6965 15.6934 19.7876C15.6557 19.8786 15.6004 19.9614 15.5307 20.031C15.461 20.1007 15.3783 20.156 15.2873 20.1937C15.1962 20.2314 15.0986 20.2508 15.0001 20.2508C14.9016 20.2508 14.804 20.2314 14.7129 20.1937C14.6219 20.156 14.5392 20.1007 14.4695 20.031L6.96948 12.531C6.89974 12.4614 6.84443 12.3787 6.80668 12.2876C6.76894 12.1966 6.74951 12.099 6.74951 12.0004C6.74951 11.9019 6.76894 11.8043 6.80668 11.7132C6.84443 11.6222 6.89974 11.5394 6.96948 11.4698L14.4695 3.96979C14.6102 3.82906 14.8011 3.75 15.0001 3.75C15.1991 3.75 15.39 3.82906 15.5307 3.96979C15.6715 4.11052 15.7505 4.30139 15.7505 4.50042C15.7505 4.69944 15.6715 4.89031 15.5307 5.03104L8.56041 12.0004L15.5307 18.9698Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -306,6 +324,43 @@ var MovementsIconCircle = ({ className }) => /* @__PURE__ */ jsxs(
     ]
   }
 );
+var Refresh = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          width: "24",
+          height: "24",
+          rx: "24",
+          fill: "var(--Paleta-Verde-Bosque-Oscuro-Key-Verde-Bosque-Oscuro-300, #49A6A4)"
+        }
+      ),
+      /* @__PURE__ */ jsx("g", { transform: "translate(4.2, 4.2) scale(0.975)", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.5 6.49986H2.5C2.36739 6.49986 2.24021 6.44719 2.14645 6.35342C2.05268 6.25965 2 6.13247 2 5.99986V2.99986C2 2.86726 2.05268 2.74008 2.14645 2.64631C2.24021 2.55254 2.36739 2.49986 2.5 2.49986C2.63261 2.49986 2.75979 2.55254 2.85355 2.64631C2.94732 2.74008 3 2.86726 3 2.99986V4.79299L3.91438 3.87861C5.02951 2.75787 6.544 2.12573 8.125 2.12111H8.15812C9.72568 2.11708 11.2317 2.73076 12.35 3.82924C12.4413 3.92265 12.4924 4.04809 12.4924 4.17872C12.4925 4.30934 12.4413 4.43479 12.35 4.52821C12.2587 4.62163 12.1345 4.67562 12.0039 4.67861C11.8733 4.68161 11.7467 4.63338 11.6512 4.54424C10.7191 3.62929 9.46427 3.11805 8.15812 3.12111H8.13C6.81261 3.12517 5.55067 3.65184 4.62125 4.58549L3.70688 5.49986H5.5C5.63261 5.49986 5.75979 5.55254 5.85355 5.64631C5.94732 5.74008 6 5.86726 6 5.99986C6 6.13247 5.94732 6.25965 5.85355 6.35342C5.75979 6.44719 5.63261 6.49986 5.5 6.49986ZM13.5 9.49986H10.5C10.3674 9.49986 10.2402 9.55254 10.1464 9.64631C10.0527 9.74008 10 9.86726 10 9.99986C10 10.1325 10.0527 10.2597 10.1464 10.3534C10.2402 10.4472 10.3674 10.4999 10.5 10.4999H12.2931L11.3787 11.4142C10.4495 12.3477 9.1878 12.8744 7.87063 12.8786H7.8425C6.53636 12.8817 5.28151 12.3704 4.34937 11.4555C4.3028 11.4078 4.24718 11.37 4.18578 11.3441C4.12437 11.3183 4.05842 11.305 3.99179 11.305C3.92517 11.305 3.85922 11.3183 3.79781 11.3442C3.73641 11.37 3.68079 11.4079 3.63423 11.4555C3.58766 11.5032 3.55109 11.5597 3.52665 11.6216C3.50222 11.6836 3.49042 11.7499 3.49195 11.8165C3.49348 11.8831 3.5083 11.9487 3.53555 12.0095C3.5628 12.0703 3.60192 12.125 3.65062 12.1705C4.76892 13.269 6.27495 13.8827 7.8425 13.8786H7.875C9.45579 13.8738 10.97 13.2417 12.085 12.1211L13 11.2067V12.9999C13 13.1325 13.0527 13.2597 13.1464 13.3534C13.2402 13.4472 13.3674 13.4999 13.5 13.4999C13.6326 13.4999 13.7598 13.4472 13.8536 13.3534C13.9473 13.2597 14 13.1325 14 12.9999V9.99986C14 9.86726 13.9473 9.74008 13.8536 9.64631C13.7598 9.55254 13.6326 9.49986 13.5 9.49986Z",
+          fill: "white"
+        }
+      ) })
+    ]
+  }
+);
 var Telephony = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -1037,6 +1092,7 @@ var Icons = {
   TICKET: /* @__PURE__ */ jsx(TicketIcon, {}),
   CASH: /* @__PURE__ */ jsx(CashIcon, {}),
   CHEVRON_RIGHT: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+  CHEVRON_LEFT: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
   CHEVRON_DOWN: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
   SHIELD_CHECK: /* @__PURE__ */ jsx(ShieldCheckIcon, {}),
   CLOSE: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -1061,6 +1117,7 @@ var Icons = {
   BOXES: /* @__PURE__ */ jsx(BoxesIcon, {}),
   MENU: /* @__PURE__ */ jsx(IconMenu, {}),
   CIRCLE_MOVEMENTS: /* @__PURE__ */ jsx(MovementsIconCircle, {}),
+  REFRESH: /* @__PURE__ */ jsx(Refresh, {}),
   TELEPHONY: /* @__PURE__ */ jsx(Telephony, {}),
   MOBILITY: /* @__PURE__ */ jsx(Mobility, {}),
   HOMESERVICE: /* @__PURE__ */ jsx(Home, {}),
@@ -3934,6 +3991,51 @@ var StatusCard = ({
     ] })
   ] });
 };
+
+// src/assets/images/sesion.png
+var sesion_default = "./sesion-Y4GRW2FA.png";
+
+// src/components/ui/secureModal/secureModal.tsx
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+var SecureModal = ({
+  open,
+  onOpenChange,
+  title = "Sesi\xF3n expirada",
+  icon = Icons.REFRESH,
+  message = "Tu sesi\xF3n ha expirado por inactividad. Inicia sesi\xF3n nuevamente para continuar.",
+  mainActionButtonText = "Iniciar sesi\xF3n",
+  onMainAction
+}) => {
+  return /* @__PURE__ */ jsxs28(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx33(DialogOverlay, { className: "uiklu-bg-black/50 uiklu-backdrop-blur-sm uiklu-fixed uiklu-inset-0 uiklu-z-50" }),
+    /* @__PURE__ */ jsxs28(DialogContent, { className: "uiklu-fixed uiklu-top-[50%] uiklu-left-[50%] uiklu-translate-x-[-50%] \n        uiklu-translate-y-[-50%] uiklu-z-50 uiklu-bg-white uiklu-rounded-[16px] uiklu-p-[24px] uiklu-shadow-lg \n        uiklu-outline-none uiklu-box-border uiklu-font-sans \n        uiklu-w-[calc(100%-32px)] !uiklu-max-w-[586px] md:!uiklu-w-[586px] \n        uiklu-h-auto md:uiklu-min-h-[310px] \n        uiklu-flex uiklu-flex-col uiklu-justify-between uiklu-gap-[20px]", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "uiklu-w-full", children: [
+        /* @__PURE__ */ jsx33("div", { className: "uiklu-flex uiklu-items-center uiklu-justify-between uiklu-mb-[10px]", children: /* @__PURE__ */ jsxs28("div", { className: "uiklu-flex uiklu-items-center uiklu-gap-[10px]", children: [
+          icon && /* @__PURE__ */ jsx33("div", { className: "uiklu-shrink-0 uiklu-w-7 uiklu-h-7 uiklu-flex uiklu-items-center \n                uiklu-justify-center", children: icon }),
+          /* @__PURE__ */ jsx33(DialogTitle, { className: "uiklu-text-primary900 !uiklu-text-[16px] uiklu-font-bold\n              !uiklu-leading-tight !uiklu-tracking-normal ", children: title })
+        ] }) }),
+        /* @__PURE__ */ jsx33("div", { className: "uiklu-border-t-[1px] uiklu-border-gray300 uiklu-pt-[16px]", children: /* @__PURE__ */ jsx33("p", { className: "uiklu-text-gray700 uiklu-text-[14px] uiklu-leading-relaxed uiklu-m-0", children: message }) })
+      ] }),
+      /* @__PURE__ */ jsx33("div", { className: "uiklu-w-full uiklu-flex uiklu-justify-center uiklu-items-center", children: /* @__PURE__ */ jsx33(
+        "img",
+        {
+          src: sesion_default,
+          alt: "Sesi\xF3n Expirada",
+          className: "uiklu-w-[100px] uiklu-h-[100px] uiklu-object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ jsx33("div", { className: "uiklu-w-full uiklu-flex uiklu-justify-center", children: /* @__PURE__ */ jsx33(
+        Button,
+        {
+          onClick: onMainAction,
+          variant: "primary",
+          className: "uiklu-bg-[#0C3D34] uiklu-text-white uiklu-text-[16px] uiklu-font-medium \n              uiklu-rounded-[100px] !uiklu-w-[218px] uiklu-py-3.5 uiklu-hover:opacity-90",
+          children: mainActionButtonText
+        }
+      ) })
+    ] })
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
@@ -3954,6 +4056,7 @@ export {
   PromoBanner,
   SearchSelect,
   SearchSelectField,
+  SecureModal,
   Select,
   SelectContent2 as SelectContent,
   SelectField,