@klu_dev/ui-klu-green 1.2.14 → 1.2.15

package/README.md

@@ -998,4 +998,61 @@ export default BadgeContainer;
 | Prop | Tipo | Por Defecto | Descripción |
 | :--- | :--- | :--- | :--- |
 | `icon` | `React.ReactElement<{ className?: string }>` | *Requerido* | El elemento del icono a renderizar en formato JSX (ej: `<Icons.SEAL />`). Recibe de forma transparente las utilidades de tamaño asignadas por el contenedor. |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Define las dimensiones fijas en píxeles tanto del contenedor circular como del icono interior (`sm`: 24px/14px, `md`: 30px/20px, `lg`: 36px/26px). |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Define las dimensiones fijas en píxeles tanto del contenedor circular como del icono interior (`sm`: 24px/14px, `md`: 30px/20px, `lg`: 36px/26px). |
+
+
+
+## Uso de DetailCard
+El componente DetailCard es una tarjeta de estado versátil y responsiva diseñada para mostrar resúmenes detallados de transacciones financieras o flujos operativos, soportando de forma dinámica los estados de éxito (Success) y error. Modifica su estructura visual de manera inteligente: en caso de éxito, oculta la descripción secundaria e integra una sección de "Comprobante de la transacción" con una liga de seguimiento copiable y un botón de descarga; en caso de error, renderiza un mensaje descriptivo formateado y adapta las acciones primarias para reintentar el proceso.
+
+```tsx
+import React from 'react';
+import { DetailCard } from './components/DetailCard';
+
+const MyTransactionScreen = () => {
+  const handlePrimary = () => console.log('Acción primaria ejecutada');
+  const handleSecondary = () => console.log('Regresando al inicio');
+
+  const summaryData = [
+    { label: 'Categoría:', value: 'Telefonía' },
+    { label: 'Servicio:', value: 'Telcel' },
+    { label: 'Comisión:', value: '$0.00' },
+    { label: 'Monto total:', value: '$100.00' },
+    { label: 'Fecha y Hora:', value: '24/06/2026 - 19:15 hrs' },
+    { label: 'Número:', value: '+52 55 0000 0000' },
+  ];
+
+  return (
+    <div className="uiklu-p-6">
+      {/* Ejemplo en Estado de Error */}
+      <DetailCard
+        type="error"
+        title="¡Error de pago de servicio!"
+        amount="$100.00"
+        message={`Por el momento no pudimos realizar el pago del servicio solicitado.\nPor favor, inténtalo de nuevo.`}
+        summaryItems={summaryData}
+        onPrimaryAction={handlePrimary}
+        onSecondaryAction={handleSecondary}
+      />
+    </div>
+  );
+};
+
+export default MyTransactionScreen;
+```
+
+### Props de DetailCard
+
+| Prop | Tipo | Por Defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `type` | `'success' \| 'error'` | *Requerido* | Define el estado operativo del componente. Cambia el color del avatar circular superior, los textos por defecto de las acciones y habilita de forma condicionada los bloques de mensaje o liga de seguimiento. |
+| `title` | `string` | *Requerido* | Encabezado principal del estado del servicio que se renderiza debajo del icono (ej: "¡Pago de servicio realizado!"). |
+| `amount` | `string` | *Requerido* | El monto numérico formateado con divisa que protagoniza la tarjeta, destacado visualmente en un tamaño tipográfico dominante (40px). |
+| `message` | `string` | `undefined` | *Opcional.* Descripción detallada del suceso. Se muestra únicamente cuando `type="error"`. Soporta saltos de línea físicos mediante la propiedad de renderizado `pre-line`. |
+| `summaryTitle` | `string` | `'Resumen'` | Título secundario para la sección que encabeza el recuadro contenedor de datos descriptivos. |
+| `summaryItems` | `DetailCardItem[]` | *Requerido* | Colección de objetos con estructura `{ label: string; value: string }` que se listan ordenadamente dentro del contenedor asimétrico central. |
+| `trackingUrl` | `string` | `undefined` | *Opcional.* URL de la pasarela o folio de seguimiento de la operación. Habilita de manera condicionada el bloque interactivo de "Comprobante de la transacción" y la acción de copiar al portapapeles solo si `type="success"`. |
+| `primaryButtonText` | `string` | *Dinámico* | Texto del botón de acción principal. Si no se provee, se autoajusta a "Descargar comprobante" para casos exitosos o "Intentarlo nuevamente" para flujos con error. |
+| `secondaryButtonText`| `string` | `'Ir al inicio'` | Texto del botón secundario de contorno que permite la navegación de retorno o salida del flujo. |
+| `onPrimaryAction` | `() => void` | *Requerido* | Función callback disparada al hacer clic en el botón de acción principal (Descarga / Reintento). |
+| `onSecondaryAction` | `() => void` | *Requerido* | Función callback disparada al hacer clic en el botón de salida secundario. |

package/dist/index.css

@@ -161,6 +161,7 @@
     --uiklu-warningbg: 44 100% 96%;
     --uiklu-warningborder: 4 98% 89%;
     --uiklu-warningtext: 32 92% 53%;
+    --uiklu-errorbg: 4 100% 68%;
 
   }
 .uiklu-mask-content {
@@ -219,6 +220,10 @@ button,
 .uiklu-bottom-full{
     bottom: 100%;
 
+}
+.uiklu-left-0{
+    left: 0px;
+
 }
 .uiklu-left-3{
     left: 0.75rem;
@@ -302,6 +307,11 @@ button,
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 
+}
+.uiklu-my-\[20px\]{
+    margin-top: 20px;
+    margin-bottom: 20px;
+
 }
 .uiklu-mb-1{
     margin-bottom: 0.25rem;
@@ -338,6 +348,10 @@ button,
 .uiklu-mb-\[18px\]{
     margin-bottom: 18px;
 
+}
+.uiklu-mb-\[20px\]{
+    margin-bottom: 20px;
+
 }
 .uiklu-mb-\[8px\]{
     margin-bottom: 8px;
@@ -482,6 +496,10 @@ button,
 .uiklu-h-\[26px\]{
     height: 26px;
 
+}
+.uiklu-h-\[28px\]{
+    height: 28px;
+
 }
 .uiklu-h-\[30px\]{
     height: 30px;
@@ -506,6 +524,10 @@ button,
 .uiklu-h-\[44px\]{
     height: 44px;
 
+}
+.uiklu-h-\[45\.5px\]{
+    height: 45.5px;
+
 }
 .uiklu-h-\[4px\]{
     height: 4px;
@@ -514,6 +536,10 @@ button,
 .uiklu-h-\[50px\]{
     height: 50px;
 
+}
+.uiklu-h-\[56px\]{
+    height: 56px;
+
 }
 .uiklu-h-\[60px\]{
     height: 60px;
@@ -526,6 +552,10 @@ button,
 .uiklu-h-\[70px\]{
     height: 70px;
 
+}
+.uiklu-h-\[80px\]{
+    height: 80px;
+
 }
 .uiklu-h-auto{
     height: auto;
@@ -602,6 +632,10 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
+}
+.uiklu-w-\[140px\]{
+    width: 140px;
+
 }
 .uiklu-w-\[141px\]{
     width: 141px;
@@ -674,14 +708,26 @@ button,
 .uiklu-w-\[40px\]{
     width: 40px;
 
+}
+.uiklu-w-\[45\.5px\]{
+    width: 45.5px;
+
 }
 .uiklu-w-\[450px\]{
     width: 450px;
 
+}
+.uiklu-w-\[516px\]{
+    width: 516px;
+
 }
 .uiklu-w-\[550px\]{
     width: 550px;
 
+}
+.uiklu-w-\[56px\]{
+    width: 56px;
+
 }
 .uiklu-w-\[600px\]{
     width: 600px;
@@ -694,10 +740,18 @@ button,
 .uiklu-w-\[75px\]{
     width: 75px;
 
+}
+.uiklu-w-\[80px\]{
+    width: 80px;
+
 }
 .uiklu-w-\[var\(--radix-select-trigger-width\)\]{
     width: var(--radix-select-trigger-width);
 
+}
+.uiklu-w-auto{
+    width: auto;
+
 }
 .uiklu-w-fit{
     width: -moz-fit-content;
@@ -967,6 +1021,10 @@ button,
 .uiklu-gap-8{
     gap: 2rem;
 
+}
+.uiklu-gap-\[10px\]{
+    gap: 10px;
+
 }
 .uiklu-gap-\[14px\]{
     gap: 14px;
@@ -979,6 +1037,10 @@ button,
 .uiklu-gap-\[2px\]{
     gap: 2px;
 
+}
+.uiklu-gap-\[8px\]{
+    gap: 8px;
+
 }
 .uiklu-gap-x-1\.5{
     -moz-column-gap: 0.375rem;
@@ -1033,6 +1095,10 @@ button,
 .uiklu-self-center{
     align-self: center;
 
+}
+.uiklu-self-stretch{
+    align-self: stretch;
+
 }
 .uiklu-overflow-hidden{
     overflow: hidden;
@@ -1240,6 +1306,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-primary-50) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-primary500{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary-500) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-primary900{
     --tw-border-opacity: 1;
@@ -1326,6 +1397,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-destructive) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-errorbg{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-errorbg) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-gray-200{
     --tw-bg-opacity: 1;
@@ -1549,6 +1625,10 @@ button,
 .uiklu-p-\[14px\]{
     padding: 14px;
 
+}
+.uiklu-p-\[16px\]{
+    padding: 16px;
+
 }
 .uiklu-p-\[6px\]{
     padding: 6px;
@@ -1598,6 +1678,11 @@ button,
     padding-left: 10px;
     padding-right: 10px;
 
+}
+.uiklu-px-\[12px\]{
+    padding-left: 12px;
+    padding-right: 12px;
+
 }
 .uiklu-px-\[16px\]{
     padding-left: 16px;
@@ -1643,6 +1728,11 @@ button,
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 
+}
+.uiklu-py-\[4px\]{
+    padding-top: 4px;
+    padding-bottom: 4px;
+
 }
 .uiklu-pb-4{
     padding-bottom: 1rem;
@@ -1778,6 +1868,10 @@ button,
 .uiklu-text-\[32px\]{
     font-size: 32px;
 
+}
+.uiklu-text-\[40px\]{
+    font-size: 40px;
+
 }
 .uiklu-text-\[8px\]{
     font-size: 8px;
@@ -2006,6 +2100,11 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-400) / var(--tw-text-opacity, 1));
 
+}
+.uiklu-text-primary500{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-primary-500) / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-primary600{
     --tw-text-opacity: 1;
@@ -2135,6 +2234,16 @@ button,
 .uiklu-ring-foreground\/10{
     --tw-ring-color: hsl(var(--uiklu-foreground) / 0.1);
 
+}
+.uiklu-brightness-0{
+    --tw-brightness: brightness(0);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+
+}
+.uiklu-invert{
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+
 }
 .uiklu-backdrop-blur-md{
     --tw-backdrop-blur: blur(12px);
@@ -2276,6 +2385,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-basewhite:hover{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-basewhite) / var(--tw-bg-opacity, 1));
+
+}
+
 .hover\:uiklu-bg-gray-100:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));

package/dist/index.d.ts

@@ -195,6 +195,9 @@ declare const Icons: {
     IZZI: react_jsx_runtime.JSX.Element;
     XBOX: react_jsx_runtime.JSX.Element;
     CALIENTE: react_jsx_runtime.JSX.Element;
+    WARNING: react_jsx_runtime.JSX.Element;
+    CHECK: react_jsx_runtime.JSX.Element;
+    DOWNLOAD: react_jsx_runtime.JSX.Element;
 };
 
 declare const searchSelectTriggerVariants: (props?: ({
@@ -268,4 +271,23 @@ interface IconBadgeProps {
 }
 declare const IconBadge: React.FC<IconBadgeProps>;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };
+interface DetailCardItem {
+    label: string;
+    value: string;
+}
+interface DetailCardProps {
+    type: 'success' | 'error';
+    title: string;
+    amount: string;
+    message?: string;
+    summaryTitle?: string;
+    summaryItems: DetailCardItem[];
+    trackingUrl?: string;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    onPrimaryAction: () => void;
+    onSecondaryAction: () => void;
+}
+declare const DetailCard: React__default.FC<DetailCardProps>;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -1370,6 +1370,96 @@ var CALIENTE = ({ className }) => /* @__PURE__ */ jsx7(
     )
   }
 );
+var WARNING = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "56",
+    height: "56",
+    viewBox: "0 0 56 56",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "56px",
+      height: "56px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        d: "M22.75 0C18.2505 0 13.852 1.33426 10.1108 3.83407C6.36957 6.33387 3.45364 9.88693 1.73175 14.044C0.00985722 18.201 -0.440669 22.7752 0.437145 27.1883C1.31496 31.6014 3.48169 35.655 6.66333 38.8367C9.84497 42.0183 13.8986 44.185 18.3117 45.0629C22.7248 45.9407 27.299 45.4901 31.4561 43.7683C35.6131 42.0464 39.1661 39.1304 41.6659 35.3892C44.1657 31.648 45.5 27.2495 45.5 22.75C45.4936 16.7183 43.0947 10.9354 38.8297 6.67035C34.5646 2.40528 28.7817 0.0063696 22.75 0ZM22.75 42C18.9427 42 15.2209 40.871 12.0553 38.7558C8.88964 36.6406 6.42232 33.6341 4.96533 30.1167C3.50834 26.5992 3.12713 22.7286 3.86989 18.9945C4.61266 15.2604 6.44604 11.8304 9.1382 9.13819C11.8304 6.44603 15.2604 4.61265 18.9945 3.86988C22.7287 3.12712 26.5992 3.50833 30.1167 4.96532C33.6341 6.42231 36.6406 8.88963 38.7558 12.0553C40.871 15.2209 42 18.9427 42 22.75C41.9942 27.8536 39.9642 32.7466 36.3554 36.3554C32.7466 39.9642 27.8536 41.9942 22.75 42ZM21 24.5V12.25C21 11.7859 21.1844 11.3408 21.5126 11.0126C21.8408 10.6844 22.2859 10.5 22.75 10.5C23.2141 10.5 23.6593 10.6844 23.9874 11.0126C24.3156 11.3408 24.5 11.7859 24.5 12.25V24.5C24.5 24.9641 24.3156 25.4092 23.9874 25.7374C23.6593 26.0656 23.2141 26.25 22.75 26.25C22.2859 26.25 21.8408 26.0656 21.5126 25.7374C21.1844 25.4092 21 24.9641 21 24.5ZM25.375 32.375C25.375 32.8942 25.2211 33.4017 24.9326 33.8334C24.6442 34.265 24.2342 34.6015 23.7546 34.8002C23.2749 34.9989 22.7471 35.0508 22.2379 34.9496C21.7287 34.8483 21.261 34.5983 20.8939 34.2312C20.5267 33.864 20.2767 33.3963 20.1754 32.8871C20.0742 32.3779 20.1261 31.8501 20.3248 31.3705C20.5235 30.8908 20.86 30.4808 21.2916 30.1924C21.7233 29.904 22.2308 29.75 22.75 29.75C23.4462 29.75 24.1139 30.0266 24.6062 30.5188C25.0984 31.0111 25.375 31.6788 25.375 32.375Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var CHECK = ({ className }) => /* @__PURE__ */ jsxs7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "56",
+    height: "56",
+    viewBox: "0 0 56 56",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "56px",
+      height: "56px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: [
+      /* @__PURE__ */ jsxs7("g", { "clip-path": "url(#clip0_1958_1406)", children: [
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            d: "M35.5126 21.5127C36.196 20.8293 37.3038 20.8293 37.9872 21.5127C38.6706 22.1961 38.6706 23.3039 37.9872 23.9873L25.7372 36.2373C25.0538 36.9207 23.946 36.9207 23.2626 36.2373L18.0126 30.9873C17.3291 30.3039 17.3291 29.1961 18.0126 28.5127C18.696 27.8293 19.8038 27.8293 20.4872 28.5127L24.4999 32.5254L35.5126 21.5127Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            d: "M47.25 28C47.25 17.3685 38.6315 8.75 28 8.75C17.3685 8.75 8.75 17.3685 8.75 28C8.75 38.6315 17.3685 47.25 28 47.25C38.6315 47.25 47.25 38.6315 47.25 28ZM50.75 28C50.75 40.5645 40.5645 50.75 28 50.75C15.4355 50.75 5.25 40.5645 5.25 28C5.25 15.4355 15.4355 5.25 28 5.25C40.5645 5.25 50.75 15.4355 50.75 28Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "clip0_1958_1406", children: /* @__PURE__ */ jsx7("rect", { width: "56", height: "56", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var DOWNLOAD = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "20px",
+      height: "20px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        d: "M3.93281 9.19219C3.81554 9.07491 3.74965 8.91585 3.74965 8.75C3.74965 8.58415 3.81554 8.42509 3.93281 8.30781C4.05009 8.19054 4.20915 8.12465 4.375 8.12465C4.54085 8.12465 4.69991 8.19054 4.81719 8.30781L9.375 12.8664V2.5C9.375 2.33424 9.44085 2.17527 9.55806 2.05806C9.67527 1.94085 9.83424 1.875 10 1.875C10.1658 1.875 10.3247 1.94085 10.4419 2.05806C10.5592 2.17527 10.625 2.33424 10.625 2.5V12.8664L15.1828 8.30781C15.2409 8.24974 15.3098 8.20368 15.3857 8.17225C15.4616 8.14083 15.5429 8.12465 15.625 8.12465C15.7071 8.12465 15.7884 8.14083 15.8643 8.17225C15.9402 8.20368 16.0091 8.24974 16.0672 8.30781C16.1253 8.36588 16.1713 8.43482 16.2027 8.51069C16.2342 8.58656 16.2503 8.66788 16.2503 8.75C16.2503 8.83212 16.2342 8.91344 16.2027 8.98931C16.1713 9.06518 16.1253 9.13412 16.0672 9.19219L10.4422 14.8172C10.3841 14.8753 10.3152 14.9214 10.2393 14.9529C10.1635 14.9843 10.0821 15.0005 10 15.0005C9.91787 15.0005 9.83654 14.9843 9.76066 14.9529C9.68479 14.9214 9.61586 14.8753 9.55781 14.8172L3.93281 9.19219ZM16.875 16.25H3.125C2.95924 16.25 2.80027 16.3158 2.68306 16.4331C2.56585 16.5503 2.5 16.7092 2.5 16.875C2.5 17.0408 2.56585 17.1997 2.68306 17.3169C2.80027 17.4342 2.95924 17.5 3.125 17.5H16.875C17.0408 17.5 17.1997 17.4342 17.3169 17.3169C17.4342 17.1997 17.5 17.0408 17.5 16.875C17.5 16.7092 17.4342 16.5503 17.3169 16.4331C17.1997 16.3158 17.0408 16.25 16.875 16.25Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var Icons = {
   CARD: /* @__PURE__ */ jsx7(CardIcon, {}),
   TICKET: /* @__PURE__ */ jsx7(TicketIcon, {}),
@@ -1422,7 +1512,10 @@ var Icons = {
   TOTALP: /* @__PURE__ */ jsx7(TOTALP, {}),
   IZZI: /* @__PURE__ */ jsx7(IZZI, {}),
   XBOX: /* @__PURE__ */ jsx7(XBOX, {}),
-  CALIENTE: /* @__PURE__ */ jsx7(CALIENTE, {})
+  CALIENTE: /* @__PURE__ */ jsx7(CALIENTE, {}),
+  WARNING: /* @__PURE__ */ jsx7(WARNING, {}),
+  CHECK: /* @__PURE__ */ jsx7(CHECK, {}),
+  DOWNLOAD: /* @__PURE__ */ jsx7(DOWNLOAD, {})
 };
 
 // src/components/ui/modal/modal.tsx
@@ -2712,11 +2805,106 @@ var IconBadge = ({
     className: `uiklu-block ${icon.props.className || ""} ${currentSize.icon}`.trim()
   }) });
 };
+
+// src/components/ui/detailCard/detailCard.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var DetailCard = ({
+  type,
+  title,
+  amount,
+  message,
+  summaryTitle = "Resumen",
+  summaryItems,
+  trackingUrl,
+  primaryButtonText = type === "success" ? "Descargar comprobante" : "Intentarlo nuevamente",
+  secondaryButtonText = "Ir al inicio",
+  onPrimaryAction,
+  onSecondaryAction
+}) => {
+  const isSuccess = type === "success";
+  const [copied, setCopied] = useState9(false);
+  const handleCopyLink = () => {
+    if (trackingUrl) {
+      navigator.clipboard.writeText(trackingUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs21("div", { className: "uiklu-w-[516px] uiklu-max-w-full uiklu-mx-auto uiklu-bg-basewhite \n    uiklu-border uiklu-border-gray300 uiklu-rounded-[24px] uiklu-p-[16px] uiklu-font-sans uiklu-shadow-sm", children: [
+    /* @__PURE__ */ jsx25("div", { className: "uiklu-flex uiklu-justify-center uiklu-mb-[20px]", children: isSuccess ? /* @__PURE__ */ jsx25("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__ */ jsx25("div", { className: "uiklu-brightness-0 uiklu-invert", children: Icons.CHECK }) }) : /* @__PURE__ */ jsx25("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__ */ jsx25("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__ */ jsx25("div", { className: "uiklu-absolute uiklu-top-0 uiklu-left-0 uiklu-w-[56px] uiklu-h-[56px]", children: Icons.WARNING }) }) }) }),
+    /* @__PURE__ */ jsxs21("div", { className: "uiklu-text-center uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx25("h2", { className: "uiklu-text-[18px] uiklu-font-bold uiklu-text-primary900 uiklu-mb-[10px]", children: title }),
+      /* @__PURE__ */ jsx25("span", { className: "uiklu-text-[40px] uiklu-font-bold uiklu-text-gray900", children: amount })
+    ] }),
+    !isSuccess && message && /* @__PURE__ */ jsx25("p", { className: "uiklu-self-stretch uiklu-text-[14px] uiklu-font-medium \n        uiklu-text-gray700 uiklu-text-center uiklu-mb-[20px] uiklu-leading-normal", children: message }),
+    /* @__PURE__ */ jsx25("hr", { className: "uiklu-border-t uiklu-border-gray300 uiklu-w-full uiklu-my-[20px]" }),
+    /* @__PURE__ */ jsxs21("div", { className: "uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx25("h3", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 uiklu-mb-[10px]", children: summaryTitle }),
+      /* @__PURE__ */ jsx25("div", { className: "uiklu-bg-primarylight uiklu-border uiklu-border-primary50 \n        uiklu-rounded-xl uiklu-p-[10px] uiklu-space-y-3", children: summaryItems.map((item, index) => /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-justify-between", children: [
+        /* @__PURE__ */ jsx25("span", { className: "uiklu-text-gray600 uiklu-text-[14px] uiklu-font-regular", children: item.label }),
+        /* @__PURE__ */ jsx25("span", { className: "uiklu-text-gray800 uiklu-text-[14px] uiklu-font-semibold", children: item.value })
+      ] }, index)) })
+    ] }),
+    isSuccess && trackingUrl && /* @__PURE__ */ jsxs21("div", { className: "uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx25("h4", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 \n          uiklu-mb-[10px] uiklu-mb-1", children: "Comprobante de la transacci\xF3n" }),
+      /* @__PURE__ */ jsx25("span", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-block uiklu-mb-[10px]", children: "Liga de seguimiento" }),
+      /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-items-center uiklu-gap-[10px]", children: [
+        /* @__PURE__ */ jsx25("div", { className: "uiklu-flex uiklu-h-[28px] uiklu-flex-1 uiklu-items-center \n             uiklu-gap-[8px] uiklu-rounded-lg uiklu-border uiklu-border-inputlight uiklu-bg-basewhite \n             uiklu-px-[10px] uiklu-py-[4px]", children: /* @__PURE__ */ jsx25(
+          "input",
+          {
+            type: "text",
+            readOnly: true,
+            value: trackingUrl,
+            className: "uiklu-w-full uiklu-bg-transparent uiklu-text-[14px] uiklu-text-primary800 \n                 uiklu-truncate focus:uiklu-outline-none"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs21(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopyLink,
+            className: "uiklu-flex uiklu-w-[140px] uiklu-items-center uiklu-gap-[10px] uiklu-px-4 uiklu-py-2.5\n               uiklu-border uiklu-border-primary500 uiklu-text-primary500 uiklu-bg-basewhite\n               uiklu-rounded-full  uiklu-text-[14px] uiklu-font-medium hover:uiklu-bg-basewhite\n                uiklu-transition-colors",
+            children: [
+              /* @__PURE__ */ jsx25("span", { children: copied ? "Copiado" : "Copiar liga" }),
+              Icons.COPY
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[20px]", children: [
+      /* @__PURE__ */ jsx25(
+        Button,
+        {
+          variant: "outlinePrimary",
+          size: "fullh",
+          onClick: onSecondaryAction,
+          className: "uiklu-flex-1",
+          children: secondaryButtonText
+        }
+      ),
+      /* @__PURE__ */ jsx25(
+        Button,
+        {
+          variant: "primary",
+          size: "fullh",
+          onClick: onPrimaryAction,
+          className: "uiklu-flex-1 uiklu-whitespace-nowrap uiklu-px-[12px] uiklu-w-auto",
+          icon: isSuccess ? Icons.DOWNLOAD : "",
+          iconAlign: "right",
+          children: primaryButtonText
+        }
+      )
+    ] })
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
   Button,
   Checkbox,
+  DetailCard,
   GridCard,
   IconBadge,
   Icons,