@klu_dev/ui-klu-green 1.2.14 → 1.2.16

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;
@@ -259,6 +264,10 @@ button,
 .uiklu-top-8{
     top: 2rem;
 
+}
+.uiklu-top-\[2px\]{
+    top: 2px;
+
 }
 .uiklu-top-\[50\%\]{
     top: 50%;
@@ -302,6 +311,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;
@@ -318,6 +332,10 @@ button,
 .uiklu-mb-4{
     margin-bottom: 1rem;
 
+}
+.uiklu-mb-5{
+    margin-bottom: 1.25rem;
+
 }
 .uiklu-mb-6{
     margin-bottom: 1.5rem;
@@ -338,6 +356,10 @@ button,
 .uiklu-mb-\[18px\]{
     margin-bottom: 18px;
 
+}
+.uiklu-mb-\[20px\]{
+    margin-bottom: 20px;
+
 }
 .uiklu-mb-\[8px\]{
     margin-bottom: 8px;
@@ -354,6 +376,10 @@ button,
 .uiklu-ml-5{
     margin-left: 1.25rem;
 
+}
+.uiklu-ml-\[-10px\]{
+    margin-left: -10px;
+
 }
 .uiklu-ml-\[1px\]{
     margin-left: 1px;
@@ -394,6 +420,10 @@ button,
 .uiklu-mt-3{
     margin-top: 0.75rem;
 
+}
+.uiklu-mt-4{
+    margin-top: 1rem;
+
 }
 .uiklu-mt-6{
     margin-top: 1.5rem;
@@ -434,10 +464,18 @@ button,
 .uiklu-h-2{
     height: 0.5rem;
 
+}
+.uiklu-h-3{
+    height: 0.75rem;
+
 }
 .uiklu-h-3\.5{
     height: 0.875rem;
 
+}
+.uiklu-h-36{
+    height: 9rem;
+
 }
 .uiklu-h-4{
     height: 1rem;
@@ -454,6 +492,10 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
+}
+.uiklu-h-7{
+    height: 1.75rem;
+
 }
 .uiklu-h-8{
     height: 2rem;
@@ -482,6 +524,10 @@ button,
 .uiklu-h-\[26px\]{
     height: 26px;
 
+}
+.uiklu-h-\[28px\]{
+    height: 28px;
+
 }
 .uiklu-h-\[30px\]{
     height: 30px;
@@ -506,6 +552,10 @@ button,
 .uiklu-h-\[44px\]{
     height: 44px;
 
+}
+.uiklu-h-\[45\.5px\]{
+    height: 45.5px;
+
 }
 .uiklu-h-\[4px\]{
     height: 4px;
@@ -514,6 +564,10 @@ button,
 .uiklu-h-\[50px\]{
     height: 50px;
 
+}
+.uiklu-h-\[56px\]{
+    height: 56px;
+
 }
 .uiklu-h-\[60px\]{
     height: 60px;
@@ -526,6 +580,10 @@ button,
 .uiklu-h-\[70px\]{
     height: 70px;
 
+}
+.uiklu-h-\[80px\]{
+    height: 80px;
+
 }
 .uiklu-h-auto{
     height: auto;
@@ -574,6 +632,10 @@ button,
 .uiklu-min-h-screen{
     min-height: 100vh;
 
+}
+.uiklu-w-11{
+    width: 2.75rem;
+
 }
 .uiklu-w-12{
     width: 3rem;
@@ -594,14 +656,26 @@ button,
 .uiklu-w-5{
     width: 1.25rem;
 
+}
+.uiklu-w-56{
+    width: 14rem;
+
 }
 .uiklu-w-6{
     width: 1.5rem;
 
+}
+.uiklu-w-7{
+    width: 1.75rem;
+
 }
 .uiklu-w-8{
     width: 2rem;
 
+}
+.uiklu-w-\[140px\]{
+    width: 140px;
+
 }
 .uiklu-w-\[141px\]{
     width: 141px;
@@ -674,14 +748,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 +780,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;
@@ -819,6 +913,10 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
+}
+.uiklu-max-w-xl{
+    max-width: 36rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -836,6 +934,16 @@ button,
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
+}
+.uiklu-translate-x-1{
+    --tw-translate-x: 0.25rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
+}
+.uiklu-translate-x-6{
+    --tw-translate-x: 1.5rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
 }
 .uiklu-translate-x-\[-50\%\]{
     --tw-translate-x: -50%;
@@ -851,6 +959,10 @@ button,
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
+}
+.uiklu-transform{
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
 }
 .uiklu-cursor-default{
     cursor: default;
@@ -959,6 +1071,10 @@ button,
 .uiklu-gap-4{
     gap: 1rem;
 
+}
+.uiklu-gap-5{
+    gap: 1.25rem;
+
 }
 .uiklu-gap-6{
     gap: 1.5rem;
@@ -967,6 +1083,10 @@ button,
 .uiklu-gap-8{
     gap: 2rem;
 
+}
+.uiklu-gap-\[10px\]{
+    gap: 10px;
+
 }
 .uiklu-gap-\[14px\]{
     gap: 14px;
@@ -979,6 +1099,10 @@ button,
 .uiklu-gap-\[2px\]{
     gap: 2px;
 
+}
+.uiklu-gap-\[8px\]{
+    gap: 8px;
+
 }
 .uiklu-gap-x-1\.5{
     -moz-column-gap: 0.375rem;
@@ -1033,6 +1157,10 @@ button,
 .uiklu-self-center{
     align-self: center;
 
+}
+.uiklu-self-stretch{
+    align-self: stretch;
+
 }
 .uiklu-overflow-hidden{
     overflow: hidden;
@@ -1131,6 +1259,10 @@ button,
 .uiklu-rounded-none{
     border-radius: 0px;
 
+}
+.uiklu-rounded-sm{
+    border-radius: 0.125rem;
+
 }
 .uiklu-rounded-xl{
     border-radius: 0.75rem;
@@ -1230,6 +1362,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-outlinesecondary) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-primary{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-primary100{
     --tw-border-opacity: 1;
@@ -1240,6 +1377,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 +1468,15 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-destructive) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-destructive\/60{
+    background-color: hsl(var(--uiklu-destructive) / 0.6);
+
+}
+.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;
@@ -1336,6 +1487,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-gray300{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-gray-300) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-gray50{
     --tw-bg-opacity: 1;
@@ -1356,11 +1512,25 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-orange400{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-orange-400) / var(--tw-bg-opacity, 1));
+
+}
+.uiklu-bg-orange400\/60{
+    background-color: hsl(var(--uiklu-orange-400) / 0.6);
+
 }
 .uiklu-bg-orange500{
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-orange-500) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-outlinesecondary{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-outlinesecondary) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-primary{
     --tw-bg-opacity: 1;
@@ -1525,10 +1695,18 @@ button,
 .uiklu-p-20{
     padding: 5rem;
 
+}
+.uiklu-p-3{
+    padding: 0.75rem;
+
 }
 .uiklu-p-4{
     padding: 1rem;
 
+}
+.uiklu-p-5{
+    padding: 1.25rem;
+
 }
 .uiklu-p-6{
     padding: 1.5rem;
@@ -1549,6 +1727,10 @@ button,
 .uiklu-p-\[14px\]{
     padding: 14px;
 
+}
+.uiklu-p-\[16px\]{
+    padding: 16px;
+
 }
 .uiklu-p-\[6px\]{
     padding: 6px;
@@ -1598,6 +1780,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 +1830,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 +1970,10 @@ button,
 .uiklu-text-\[32px\]{
     font-size: 32px;
 
+}
+.uiklu-text-\[40px\]{
+    font-size: 40px;
+
 }
 .uiklu-text-\[8px\]{
     font-size: 8px;
@@ -1863,6 +2059,10 @@ button,
 .uiklu-tracking-tight{
     letter-spacing: -0.025em;
 
+}
+.uiklu-tracking-wide{
+    letter-spacing: 0.025em;
+
 }
 .uiklu-tracking-wider{
     letter-spacing: 0.05em;
@@ -2006,6 +2206,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;
@@ -2084,6 +2289,10 @@ button,
 .uiklu-opacity-90{
     opacity: 0.9;
 
+}
+.uiklu-mix-blend-screen{
+    mix-blend-mode: screen;
+
 }
 .uiklu-shadow-2xl{
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
@@ -2125,6 +2334,12 @@ button,
     outline: 2px solid transparent;
     outline-offset: 2px;
 
+}
+.uiklu-ring-0{
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+
 }
 .uiklu-ring-1{
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2135,6 +2350,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);
@@ -2163,10 +2388,20 @@ button,
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 
+}
+.uiklu-transition-transform{
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+
 }
 .uiklu-duration-200{
     transition-duration: 200ms;
 
+}
+.uiklu-duration-300{
+    transition-duration: 300ms;
+
 }
 .uiklu-duration-500{
     transition-duration: 500ms;
@@ -2276,6 +2511,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));
@@ -2419,6 +2660,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-visible\:uiklu-outline-none:focus-visible{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+
+}
+
 .focus-visible\:uiklu-ring-2:focus-visible{
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2426,6 +2673,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-visible\:uiklu-ring-gray400:focus-visible{
+    --tw-ring-opacity: 1;
+    --tw-ring-color: hsl(var(--uiklu-gray-400) / var(--tw-ring-opacity, 1));
+
+}
+
 .focus-visible\:uiklu-ring-primary300:focus-visible{
     --tw-ring-opacity: 1;
     --tw-ring-color: hsl(var(--uiklu-primary-300) / var(--tw-ring-opacity, 1));
@@ -2481,6 +2734,30 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.data-\[state\=checked\]\:uiklu-translate-x-5[data-state="checked"]{
+    --tw-translate-x: 1.25rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
+}
+
+.data-\[state\=unchecked\]\:uiklu-translate-x-0[data-state="unchecked"]{
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
+}
+
+.data-\[state\=checked\]\:uiklu-bg-primary[data-state="checked"]{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primary) / var(--tw-bg-opacity, 1));
+
+}
+
+.data-\[state\=unchecked\]\:uiklu-bg-gray300[data-state="unchecked"]{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-gray-300) / var(--tw-bg-opacity, 1));
+
+}
+
 .data-\[placeholder\]\:uiklu-text-gray500[data-placeholder]{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-500) / var(--tw-text-opacity, 1));
@@ -2491,6 +2768,10 @@ input.uiklu-flex:not(:placeholder-shown) {
     .sm\:uiklu-flex-row{
         flex-direction: row;
 
+    }
+    .sm\:uiklu-items-stretch{
+        align-items: stretch;
+
     }
     .sm\:uiklu-justify-end{
         justify-content: flex-end;

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 };