@klu_dev/ui-klu-green 1.2.20 → 1.2.21

package/dist/index.css

@@ -386,6 +386,10 @@ button,
 .uiklu-mb-\[20px\]{
     margin-bottom: 20px;
 
+}
+.uiklu-mb-\[24px\]{
+    margin-bottom: 24px;
+
 }
 .uiklu-mb-\[5px\]{
     margin-bottom: 5px;
@@ -466,10 +470,18 @@ button,
 .uiklu-mt-8{
     margin-top: 2rem;
 
+}
+.uiklu-mt-\[10px\]{
+    margin-top: 10px;
+
 }
 .uiklu-mt-\[20px\]{
     margin-top: 20px;
 
+}
+.uiklu-mt-\[8px\]{
+    margin-top: 8px;
+
 }
 .uiklu-mt-auto{
     margin-top: auto;
@@ -947,6 +959,10 @@ button,
 .uiklu-max-w-\[500px\]{
     max-width: 500px;
 
+}
+.uiklu-max-w-\[516px\]{
+    max-width: 516px;
+
 }
 .uiklu-max-w-\[569px\]{
     max-width: 569px;
@@ -1144,6 +1160,10 @@ button,
 .uiklu-gap-\[14px\]{
     gap: 14px;
 
+}
+.uiklu-gap-\[16px\]{
+    gap: 16px;
+
 }
 .uiklu-gap-\[20px\]{
     gap: 20px;
@@ -1183,6 +1203,12 @@ button,
     margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 
+}
+.uiklu-space-y-3\.5 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
+
 }
 .uiklu-space-y-4 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
@@ -1880,6 +1906,11 @@ button,
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 
+}
+.uiklu-py-\[10px\]{
+    padding-top: 10px;
+    padding-bottom: 10px;
+
 }
 .uiklu-py-\[4px\]{
     padding-top: 4px;

package/dist/index.d.ts

@@ -348,4 +348,25 @@ interface PhoneFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
 }
 declare const PhoneField: React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLInputElement>>;
 
-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, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };
+interface StatusCardSummaryItem {
+    label: string;
+    value: string;
+}
+interface StatusCardProps {
+    type: 'success' | 'error';
+    title: string;
+    subTitle?: string;
+    summaryTitle?: string;
+    summaryItems?: StatusCardSummaryItem[];
+    extraSectionTitle?: string;
+    extraSectionContent?: string;
+    extraSectionSubtext?: string;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    onPrimaryAction: () => void;
+    onSecondaryAction: () => void;
+    className?: string;
+}
+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 };

package/dist/index.js

@@ -3556,6 +3556,92 @@ import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 
 // src/components/ui/corporateCard/corporateCard.tsx
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+
+// src/components/ui/statusCard/statusCard.tsx
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+var StatusCard = ({
+  type,
+  title,
+  subTitle,
+  summaryTitle = "Resumen",
+  summaryItems = [],
+  extraSectionTitle,
+  extraSectionContent,
+  extraSectionSubtext,
+  primaryButtonText = type === "success" ? "Descargar comprobante" : "Intentarlo nuevamente",
+  secondaryButtonText = "Ir al inicio",
+  onPrimaryAction,
+  onSecondaryAction,
+  className = ""
+}) => {
+  const isSuccess = type === "success";
+  return /* @__PURE__ */ jsxs27("div", { className: `uiklu-w-full uiklu-max-w-[516px] uiklu-mx-auto uiklu-bg-basewhite 
+        uiklu-border uiklu-border-gray300 uiklu-rounded-[24px] uiklu-p-[16px] uiklu-font-sans
+        uiklu-shadow-sm uiklu-box-border ${className}`, children: [
+    /* @__PURE__ */ jsx32("div", { className: "uiklu-flex uiklu-justify-center uiklu-mb-[24px]", children: isSuccess ? /* @__PURE__ */ jsx32("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-primary300 \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx32("div", { className: "uiklu-brightness-0 uiklu-invert", children: Icons.CHECK }) }) : /* @__PURE__ */ jsx32("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-errorbg \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center uiklu-overflow-hidden", children: /* @__PURE__ */ jsx32("div", { className: "uiklu-brightness-0 uiklu-invert uiklu-w-[45.5px] uiklu-h-[45.5px] \n              uiklu-flex uiklu-items-center uiklu-justify-center uiklu-relative", children: /* @__PURE__ */ jsx32("div", { className: "uiklu-absolute uiklu-top-0 uiklu-left-0 uiklu-w-[56px] uiklu-h-[56px]", children: Icons.WARNING }) }) }) }),
+    /* @__PURE__ */ jsxs27("div", { className: "uiklu-text-center uiklu-mb-[24px]", children: [
+      /* @__PURE__ */ jsx32("h2", { className: "uiklu-text-[18px] uiklu-font-bold uiklu-text-primary900 uiklu-leading-snug", children: title }),
+      subTitle && /* @__PURE__ */ jsx32("p", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-mt-[10px] uiklu-leading-relaxed", children: subTitle })
+    ] }),
+    /* @__PURE__ */ jsx32("hr", { className: "uiklu-border-t uiklu-border-gray200 uiklu-w-full uiklu-my-[20px]" }),
+    summaryItems.length > 0 && /* @__PURE__ */ jsxs27("div", { className: "uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx32("h3", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 \n            uiklu-mb-[10px] uiklu-text-left", children: summaryTitle }),
+      /* @__PURE__ */ jsx32("div", { className: "uiklu-bg-primarylight uiklu-border uiklu-border-primary50 \n            uiklu-rounded-xl uiklu-px-[10px] uiklu-py-[10px] uiklu-space-y-3.5", children: summaryItems.map((item, index) => /* @__PURE__ */ jsxs27("div", { className: "uiklu-flex uiklu-justify-between uiklu-items-center uiklu-gap-4", children: [
+        /* @__PURE__ */ jsx32("span", { className: "uiklu-text-gray600 uiklu-text-[14px] uiklu-font-regular", children: item.label }),
+        /* @__PURE__ */ jsx32("span", { className: "uiklu-text-gray800 uiklu-text-[14px] uiklu-font-semibold uiklu-text-right", children: item.value })
+      ] }, index)) })
+    ] }),
+    extraSectionTitle && /* @__PURE__ */ jsxs27("div", { className: "uiklu-mb-[20px] uiklu-text-left", children: [
+      /* @__PURE__ */ jsx32("h3", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 uiklu-mb-[10px]", children: extraSectionTitle }),
+      extraSectionContent && /* @__PURE__ */ jsx32("p", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-leading-relaxed uiklu-mb-[10px]", children: extraSectionContent }),
+      extraSectionSubtext && /* @__PURE__ */ jsx32("p", { className: "uiklu-text-[10px] uiklu-text-gray600 uiklu-font-medium uiklu-leading-normal", children: extraSectionSubtext })
+    ] }),
+    /* @__PURE__ */ jsxs27("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[16px] contenedor-botones-flow uiklu-mt-[8px]", children: [
+      /* @__PURE__ */ jsx32("style", { children: `
+          /* Forzado sim\xE9trico en escritorio */
+          .contenedor-botones-flow > button,
+          .contenedor-botones-flow > div {
+            width: calc(50% - 8px) !important; /* Cada uno toma la mitad exacta menos el espacio del gap */
+            flex: none !important;
+          }
+
+          @media (max-width: 550px) {
+            .contenedor-botones-flow {
+              flex-direction: column-reverse !important;
+              gap: 12px !important;
+            }
+            .contenedor-botones-flow > button,
+            .contenedor-botones-flow > div { 
+              width: 100% !important; /* Fuerza a que midan todo el ancho en celular */
+              flex: none !important;
+            }
+          }
+        ` }),
+      /* @__PURE__ */ jsx32(
+        Button,
+        {
+          variant: "outlinePrimary",
+          size: "fullh",
+          onClick: onSecondaryAction,
+          className: "uiklu-whitespace-nowrap",
+          children: secondaryButtonText
+        }
+      ),
+      /* @__PURE__ */ jsx32(
+        Button,
+        {
+          variant: "primary",
+          size: "fullh",
+          onClick: onPrimaryAction,
+          className: "uiklu-whitespace-nowrap uiklu-px-[12px]",
+          icon: isSuccess ? Icons.DOWNLOAD : "",
+          iconAlign: "right",
+          children: primaryButtonText
+        }
+      )
+    ] })
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
@@ -3581,6 +3667,7 @@ export {
   SelectItem2 as SelectItem,
   SelectValue,
   SidebarTabs,
+  StatusCard,
   TextField,
   ToastAction,
   Toaster,