@klu_dev/ui-klu-green 1.2.19 → 1.2.21

package/README.md

@@ -12,10 +12,13 @@ npm install @klu_dev/ui-klu-green
 
 ## Componentes disponibles
 - Input
-- TextField
+- TextField (Componente similar a Input pero cuadrado)
 - Button
 - BackButton
 - Select
+- SelectField (Componente similar a Select pero cuadrado)
+- SearchSelect
+- SearchSelectField (Componente similar a SearchSelect pero cuadrado)
 - Typography
 - Modal
 - BalanceInfo
@@ -24,11 +27,10 @@ npm install @klu_dev/ui-klu-green
 - PromoBanner
 - SidebarTabs
 - MobileMenuDrawer
-- SearchSelect
 - InputCode
 - GridCard
 - CheckBox
-- InputPhone
+- PhoneField
 - IconBadge
 
 ## Antes de comenzar a agregar componentes
@@ -902,12 +904,12 @@ export default function CheckboxExample() {
 
 
 
-## Uso de InputPhone
-El componente InputPhone es un campo de entrada de texto optimizado para la captura de números telefónicos. Permite la selección dinámica de prefijos internacionales (LADAS/códigos de país) mediante un menú desplegable integrado y ofrece soporte nativo para la validación y visualización de estados de error, variantes de tamaño y un comportamiento adaptables (full width).
+## Uso de PhoneField
+El componente PhoneField es un campo de entrada de texto optimizado para la captura de números telefónicos. Permite la selección dinámica de prefijos internacionales (LADAS/códigos de país) mediante un menú desplegable integrado y ofrece soporte nativo para la validación y visualización de estados de error, variantes de tamaño y un comportamiento adaptables (full width).
 
 ```tsx
 import React, { useState } from 'react';
-import { InputPhone } from './components/InputPhone';
+import { PhoneField } from './inputPhoneField';
 
 const RegistrationForm = () => {
   const [phoneNumber, setPhoneNumber] = useState('');
@@ -937,7 +939,7 @@ const RegistrationForm = () => {
   return (
     <div style={{ maxWidth: '400px', padding: '20px' }}>
       <label htmlFor="phone">Número de Teléfono</label>
-      <InputPhone 
+      <PhoneField 
         id="phone"
         size="full" 
         placeholder="55 0000 0000" 
@@ -954,7 +956,7 @@ const RegistrationForm = () => {
 export default RegistrationForm;
 ```
 
-### Props de InputPhone
+### Props de PhoneField
 
 | Prop | Tipo | Por Defecto | Descripción |
 | :--- | :--- | :--- | :--- |

package/dist/index.css

@@ -230,6 +230,10 @@ button,
 .uiklu-left-0{
     left: 0px;
 
+}
+.uiklu-left-1\/2{
+    left: 50%;
+
 }
 .uiklu-left-2{
     left: 0.5rem;
@@ -278,14 +282,14 @@ button,
 .uiklu-top-8{
     top: 2rem;
 
-}
-.uiklu-top-\[2px\]{
-    top: 2px;
-
 }
 .uiklu-top-\[50\%\]{
     top: 50%;
 
+}
+.uiklu-top-full{
+    top: 100%;
+
 }
 .uiklu-z-0{
     z-index: 0;
@@ -306,6 +310,10 @@ button,
 .uiklu-z-\[200\]{
     z-index: 200;
 
+}
+.uiklu-z-\[9999\]{
+    z-index: 9999;
+
 }
 .uiklu-m-0{
     margin: 0px;
@@ -366,6 +374,10 @@ button,
 .uiklu-mb-\[12px\]{
     margin-bottom: 12px;
 
+}
+.uiklu-mb-\[16px\]{
+    margin-bottom: 16px;
+
 }
 .uiklu-mb-\[18px\]{
     margin-bottom: 18px;
@@ -374,6 +386,10 @@ button,
 .uiklu-mb-\[20px\]{
     margin-bottom: 20px;
 
+}
+.uiklu-mb-\[24px\]{
+    margin-bottom: 24px;
+
 }
 .uiklu-mb-\[5px\]{
     margin-bottom: 5px;
@@ -403,8 +419,8 @@ button,
     margin-left: 1.25rem;
 
 }
-.uiklu-ml-\[-10px\]{
-    margin-left: -10px;
+.uiklu-ml-\[10px\]{
+    margin-left: 10px;
 
 }
 .uiklu-ml-\[1px\]{
@@ -446,10 +462,6 @@ button,
 .uiklu-mt-3{
     margin-top: 0.75rem;
 
-}
-.uiklu-mt-4{
-    margin-top: 1rem;
-
 }
 .uiklu-mt-6{
     margin-top: 1.5rem;
@@ -458,6 +470,22 @@ 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;
+
 }
 .uiklu-box-border{
     box-sizing: border-box;
@@ -482,6 +510,10 @@ button,
 .uiklu-grid{
     display: grid;
 
+}
+.uiklu-hidden{
+    display: none;
+
 }
 .uiklu-h-12{
     height: 3rem;
@@ -490,18 +522,10 @@ 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;
@@ -518,10 +542,6 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
-}
-.uiklu-h-7{
-    height: 1.75rem;
-
 }
 .uiklu-h-8{
     height: 2rem;
@@ -534,6 +554,10 @@ button,
 .uiklu-h-\[14px\]{
     height: 14px;
 
+}
+.uiklu-h-\[150px\]{
+    height: 150px;
+
 }
 .uiklu-h-\[1px\]{
     height: 1px;
@@ -642,6 +666,10 @@ button,
 .uiklu-max-h-screen{
     max-height: 100vh;
 
+}
+.uiklu-min-h-\[114px\]{
+    min-height: 114px;
+
 }
 .uiklu-min-h-\[20px\]{
     min-height: 20px;
@@ -678,18 +706,10 @@ 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;
@@ -714,10 +734,18 @@ button,
 .uiklu-w-\[150px\]{
     width: 150px;
 
+}
+.uiklu-w-\[160px\]{
+    width: 160px;
+
 }
 .uiklu-w-\[162px\]{
     width: 162px;
 
+}
+.uiklu-w-\[186px\]{
+    width: 186px;
+
 }
 .uiklu-w-\[1px\]{
     width: 1px;
@@ -742,6 +770,10 @@ button,
 .uiklu-w-\[26px\]{
     width: 26px;
 
+}
+.uiklu-w-\[29px\]{
+    width: 29px;
+
 }
 .uiklu-w-\[30px\]{
     width: 30px;
@@ -843,6 +875,10 @@ button,
 .uiklu-min-w-\[150px\]{
     min-width: 150px;
 
+}
+.uiklu-min-w-\[186px\]{
+    min-width: 186px;
+
 }
 .uiklu-min-w-\[187px\]{
     min-width: 187px;
@@ -923,6 +959,14 @@ button,
 .uiklu-max-w-\[500px\]{
     max-width: 500px;
 
+}
+.uiklu-max-w-\[516px\]{
+    max-width: 516px;
+
+}
+.uiklu-max-w-\[569px\]{
+    max-width: 569px;
+
 }
 .uiklu-max-w-\[600px\]{
     max-width: 600px;
@@ -943,10 +987,6 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
-}
-.uiklu-max-w-xl{
-    max-width: 36rem;
-
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -959,6 +999,15 @@ button,
 .uiklu-shrink-0{
     flex-shrink: 0;
 
+}
+.uiklu-flex-grow{
+    flex-grow: 1;
+
+}
+.uiklu--translate-x-1\/2{
+    --tw-translate-x: -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-y-1\/2{
     --tw-translate-y: -50%;
@@ -1095,10 +1144,6 @@ button,
 .uiklu-gap-4{
     gap: 1rem;
 
-}
-.uiklu-gap-5{
-    gap: 1.25rem;
-
 }
 .uiklu-gap-6{
     gap: 1.5rem;
@@ -1115,6 +1160,10 @@ button,
 .uiklu-gap-\[14px\]{
     gap: 14px;
 
+}
+.uiklu-gap-\[16px\]{
+    gap: 16px;
+
 }
 .uiklu-gap-\[20px\]{
     gap: 20px;
@@ -1154,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;
@@ -1219,6 +1274,10 @@ button,
 .uiklu-break-words{
     overflow-wrap: break-word;
 
+}
+.uiklu-break-all{
+    word-break: break-all;
+
 }
 .uiklu-rounded{
     border-radius: 0.25rem;
@@ -1283,10 +1342,6 @@ button,
 .uiklu-rounded-none{
     border-radius: 0px;
 
-}
-.uiklu-rounded-sm{
-    border-radius: 0.125rem;
-
 }
 .uiklu-rounded-xl{
     border-radius: 0.75rem;
@@ -1399,11 +1454,6 @@ 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;
@@ -1447,6 +1497,11 @@ button,
     --tw-border-opacity: 1;
     border-right-color: hsl(var(--uiklu-gray-900) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-t-gray900{
+    --tw-border-opacity: 1;
+    border-top-color: hsl(var(--uiklu-gray-900) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-bg-\[\#002B2B\]{
     --tw-bg-opacity: 1;
@@ -1487,6 +1542,10 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-basewhite) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-basewhite\/40{
+    background-color: hsl(var(--uiklu-basewhite) / 0.4);
+
 }
 .uiklu-bg-black{
     --tw-bg-opacity: 1;
@@ -1505,10 +1564,6 @@ 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;
@@ -1524,6 +1579,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;
@@ -1544,25 +1604,11 @@ 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;
@@ -1607,6 +1653,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-slate-100{
+    --tw-bg-opacity: 1;
+    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-slate-50{
     --tw-bg-opacity: 1;
@@ -1727,10 +1778,6 @@ button,
 .uiklu-p-4{
     padding: 1rem;
 
-}
-.uiklu-p-5{
-    padding: 1.25rem;
-
 }
 .uiklu-p-6{
     padding: 1.5rem;
@@ -1859,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;
@@ -1920,6 +1972,10 @@ button,
 .uiklu-pr-\[10px\]{
     padding-right: 10px;
 
+}
+.uiklu-pt-0\.5{
+    padding-top: 0.125rem;
+
 }
 .uiklu-pt-4{
     padding-top: 1rem;
@@ -2068,6 +2124,10 @@ button,
 .uiklu-font-bold{
     font-weight: 700;
 
+}
+.uiklu-font-light{
+    font-weight: 300;
+
 }
 .uiklu-font-medium{
     font-weight: 500;
@@ -2270,6 +2330,11 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-600) / var(--tw-text-opacity, 1));
 
+}
+.uiklu-text-primary700{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-primary-700) / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-primary800{
     --tw-text-opacity: 1;
@@ -2343,16 +2408,18 @@ 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);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+}
+.uiklu-shadow-\[0_2\.467px_2\.467px_0_rgba\(0\,0\,0\,0\.25\)\]{
+    --tw-shadow: 0 2.467px 2.467px 0 rgba(0,0,0,0.25);
+    --tw-shadow-colored: 0 2.467px 2.467px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .uiklu-shadow-lg{
     --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -2882,10 +2949,6 @@ 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;
@@ -2896,6 +2959,11 @@ input.uiklu-flex:not(:placeholder-shown) {
         margin-right: calc(0.5rem * var(--tw-space-x-reverse));
         margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 
+    }
+    .sm\:uiklu-break-normal{
+        overflow-wrap: normal;
+        word-break: normal;
+
     }
     .sm\:uiklu-pt-0{
         padding-top: 0px;
@@ -2936,6 +3004,82 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+@media (min-width: 1024px){
+    .lg\:uiklu-mb-0{
+        margin-bottom: 0px;
+
+    }
+    .lg\:uiklu-mr-\[20px\]{
+        margin-right: 20px;
+
+    }
+    .lg\:uiklu-mt-4{
+        margin-top: 1rem;
+
+    }
+    .lg\:uiklu-mt-\[10px\]{
+        margin-top: 10px;
+
+    }
+    .lg\:uiklu-block{
+        display: block;
+
+    }
+    .lg\:uiklu-flex{
+        display: flex;
+
+    }
+    .lg\:uiklu-hidden{
+        display: none;
+
+    }
+    .lg\:uiklu-h-\[114px\]{
+        height: 114px;
+
+    }
+    .lg\:uiklu-min-w-\[331px\]{
+        min-width: 331px;
+
+    }
+    .lg\:uiklu-max-w-full{
+        max-width: 100%;
+
+    }
+    .lg\:uiklu-flex-row{
+        flex-direction: row;
+
+    }
+    .lg\:uiklu-flex-nowrap{
+        flex-wrap: nowrap;
+
+    }
+    .lg\:uiklu-items-center{
+        align-items: center;
+
+    }
+    .lg\:uiklu-items-stretch{
+        align-items: stretch;
+
+    }
+    .lg\:uiklu-justify-start{
+        justify-content: flex-start;
+
+    }
+    .lg\:uiklu-justify-end{
+        justify-content: flex-end;
+
+    }
+    .lg\:uiklu-justify-between{
+        justify-content: space-between;
+
+    }
+    .lg\:uiklu-text-left{
+        text-align: left;
+
+    }
+
+}
+
 .\[\&\>\[data-slot\=progress-indicator\]\]\:uiklu-bg-primary300>[data-slot=progress-indicator]{
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-300) / var(--tw-bg-opacity, 1));

package/dist/index.d.ts

@@ -144,6 +144,7 @@ declare function MobileMenuDrawer({ isOpen, onClose, items, activeTab, onTabChan
 
 declare const Icons: {
     CARD: react_jsx_runtime.JSX.Element;
+    CARDCIRCLE: react_jsx_runtime.JSX.Element;
     TICKET: react_jsx_runtime.JSX.Element;
     CASH: react_jsx_runtime.JSX.Element;
     CHEVRON_RIGHT: react_jsx_runtime.JSX.Element;
@@ -159,6 +160,7 @@ declare const Icons: {
     ARROW_UP: react_jsx_runtime.JSX.Element;
     ARROW_DOWN: react_jsx_runtime.JSX.Element;
     KLU: react_jsx_runtime.JSX.Element;
+    KLUWHITE: react_jsx_runtime.JSX.Element;
     DESIGNEDFREEDOM: react_jsx_runtime.JSX.Element;
     GRAPHIC_TOP: react_jsx_runtime.JSX.Element;
     HOME: react_jsx_runtime.JSX.Element;
@@ -200,6 +202,9 @@ declare const Icons: {
     WARNING: react_jsx_runtime.JSX.Element;
     CHECK: react_jsx_runtime.JSX.Element;
     DOWNLOAD: react_jsx_runtime.JSX.Element;
+    MASTERCARD: react_jsx_runtime.JSX.Element;
+    LOCKOPEN: react_jsx_runtime.JSX.Element;
+    LOCK: react_jsx_runtime.JSX.Element;
 };
 
 declare const searchSelectTriggerVariants: (props?: ({
@@ -343,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 };