@klu_dev/ui-klu-green 1.2.18 → 1.2.20

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;
@@ -403,8 +415,8 @@ button,
     margin-left: 1.25rem;
 
 }
-.uiklu-ml-\[-10px\]{
-    margin-left: -10px;
+.uiklu-ml-\[10px\]{
+    margin-left: 10px;
 
 }
 .uiklu-ml-\[1px\]{
@@ -446,10 +458,6 @@ button,
 .uiklu-mt-3{
     margin-top: 0.75rem;
 
-}
-.uiklu-mt-4{
-    margin-top: 1rem;
-
 }
 .uiklu-mt-6{
     margin-top: 1.5rem;
@@ -458,6 +466,14 @@ button,
 .uiklu-mt-8{
     margin-top: 2rem;
 
+}
+.uiklu-mt-\[20px\]{
+    margin-top: 20px;
+
+}
+.uiklu-mt-auto{
+    margin-top: auto;
+
 }
 .uiklu-box-border{
     box-sizing: border-box;
@@ -482,6 +498,10 @@ button,
 .uiklu-grid{
     display: grid;
 
+}
+.uiklu-hidden{
+    display: none;
+
 }
 .uiklu-h-12{
     height: 3rem;
@@ -490,18 +510,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 +530,6 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
-}
-.uiklu-h-7{
-    height: 1.75rem;
-
 }
 .uiklu-h-8{
     height: 2rem;
@@ -534,6 +542,10 @@ button,
 .uiklu-h-\[14px\]{
     height: 14px;
 
+}
+.uiklu-h-\[150px\]{
+    height: 150px;
+
 }
 .uiklu-h-\[1px\]{
     height: 1px;
@@ -642,6 +654,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 +694,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 +722,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 +758,10 @@ button,
 .uiklu-w-\[26px\]{
     width: 26px;
 
+}
+.uiklu-w-\[29px\]{
+    width: 29px;
+
 }
 .uiklu-w-\[30px\]{
     width: 30px;
@@ -827,6 +847,10 @@ button,
 .uiklu-w-full{
     width: 100%;
 
+}
+.uiklu-w-px{
+    width: 1px;
+
 }
 .uiklu-min-w-0{
     min-width: 0px;
@@ -839,6 +863,10 @@ button,
 .uiklu-min-w-\[150px\]{
     min-width: 150px;
 
+}
+.uiklu-min-w-\[186px\]{
+    min-width: 186px;
+
 }
 .uiklu-min-w-\[187px\]{
     min-width: 187px;
@@ -919,6 +947,10 @@ button,
 .uiklu-max-w-\[500px\]{
     max-width: 500px;
 
+}
+.uiklu-max-w-\[569px\]{
+    max-width: 569px;
+
 }
 .uiklu-max-w-\[600px\]{
     max-width: 600px;
@@ -939,10 +971,6 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
-}
-.uiklu-max-w-xl{
-    max-width: 36rem;
-
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -955,6 +983,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%;
@@ -1067,6 +1104,10 @@ button,
 .uiklu-gap-1{
     gap: 0.25rem;
 
+}
+.uiklu-gap-1\.5{
+    gap: 0.375rem;
+
 }
 .uiklu-gap-10{
     gap: 2.5rem;
@@ -1087,10 +1128,6 @@ button,
 .uiklu-gap-4{
     gap: 1rem;
 
-}
-.uiklu-gap-5{
-    gap: 1.25rem;
-
 }
 .uiklu-gap-6{
     gap: 1.5rem;
@@ -1211,6 +1248,10 @@ button,
 .uiklu-break-words{
     overflow-wrap: break-word;
 
+}
+.uiklu-break-all{
+    word-break: break-all;
+
 }
 .uiklu-rounded{
     border-radius: 0.25rem;
@@ -1275,10 +1316,6 @@ button,
 .uiklu-rounded-none{
     border-radius: 0px;
 
-}
-.uiklu-rounded-sm{
-    border-radius: 0.125rem;
-
 }
 .uiklu-rounded-xl{
     border-radius: 0.75rem;
@@ -1307,6 +1344,10 @@ button,
 .uiklu-border-b-\[1px\]{
     border-bottom-width: 1px;
 
+}
+.uiklu-border-r{
+    border-right-width: 1px;
+
 }
 .uiklu-border-t{
     border-top-width: 1px;
@@ -1343,6 +1384,10 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-destructive) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-destructive\/40{
+    border-color: hsl(var(--uiklu-destructive) / 0.4);
+
 }
 .uiklu-border-gray-100{
     --tw-border-opacity: 1;
@@ -1383,11 +1428,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;
@@ -1431,6 +1471,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;
@@ -1471,6 +1516,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;
@@ -1489,10 +1538,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;
@@ -1508,6 +1553,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;
@@ -1528,25 +1578,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;
@@ -1591,6 +1627,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;
@@ -1711,10 +1752,6 @@ button,
 .uiklu-p-4{
     padding: 1rem;
 
-}
-.uiklu-p-5{
-    padding: 1.25rem;
-
 }
 .uiklu-p-6{
     padding: 1.5rem;
@@ -1813,6 +1850,11 @@ button,
     padding-left: 48px;
     padding-right: 48px;
 
+}
+.uiklu-px-\[8px\]{
+    padding-left: 8px;
+    padding-right: 8px;
+
 }
 .uiklu-py-1{
     padding-top: 0.25rem;
@@ -1867,6 +1909,14 @@ button,
 .uiklu-pl-6{
     padding-left: 1.5rem;
 
+}
+.uiklu-pl-8{
+    padding-left: 2rem;
+
+}
+.uiklu-pl-\[6px\]{
+    padding-left: 6px;
+
 }
 .uiklu-pr-10{
     padding-right: 2.5rem;
@@ -1887,6 +1937,14 @@ button,
 .uiklu-pr-6{
     padding-right: 1.5rem;
 
+}
+.uiklu-pr-\[10px\]{
+    padding-right: 10px;
+
+}
+.uiklu-pt-0\.5{
+    padding-top: 0.125rem;
+
 }
 .uiklu-pt-4{
     padding-top: 1rem;
@@ -2035,6 +2093,10 @@ button,
 .uiklu-font-bold{
     font-weight: 700;
 
+}
+.uiklu-font-light{
+    font-weight: 300;
+
 }
 .uiklu-font-medium{
     font-weight: 500;
@@ -2237,6 +2299,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;
@@ -2310,16 +2377,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);
@@ -2849,10 +2918,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;
@@ -2863,6 +2928,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;
@@ -2903,6 +2973,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));