@klu_dev/ui-klu-green 1.2.9 → 1.2.11

package/README.md

@@ -27,6 +27,7 @@ npm install @klu_dev/ui-klu-green
 - InputCode
 - GridCard
 - CheckBox
+- InputPhone
 
 ## Antes de comenzar a agregar componentes
 
@@ -897,3 +898,68 @@ export default function CheckboxExample() {
 | `checked` | `boolean` | - | Estado binario síncrono en modo controlado. |
 | `onChange` | `(checked: boolean) => void` | - | Callback gatillado automáticamente al alterar la interacción del recuadro. |
 
+
+
+## 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).
+
+```tsx
+import React, { useState } from 'react';
+import { InputPhone } from './components/InputPhone';
+
+const RegistrationForm = () => {
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [error, setError] = useState('');
+
+  const paisesLadas = [
+    { label: 'MX', code: '+52' },
+    { label: 'US', code: '+1' },
+    { label: 'ES', code: '+34' },
+    { label: 'AR', code: '+54' },
+    { label: 'CO', code: '+57' },
+    { label: 'CL', code: '+56' },
+    { label: 'PE', code: '+51' },
+  ];
+
+  const handlePhoneChange = (value: string) => {
+    setPhoneNumber(value);
+    // Validación simple de longitud sin espacios
+    const pureNumbers = value.replace(/\s/g, '');
+    if (pureNumbers.length > 0 && pureNumbers.length < 10) {
+      setError('El número telefónico debe tener al menos 10 dígitos.');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '400px', padding: '20px' }}>
+      <label htmlFor="phone">Número de Teléfono</label>
+      <InputPhone 
+        id="phone"
+        size="full" 
+        placeholder="55 0000 0000" 
+        value={phoneNumber}
+        onChange={handlePhoneChange}
+        error={error}
+        ladas={paisesLadas}
+        defaultLadaIndex={0} // Selecciona MX por defecto
+      />
+    </div>
+  );
+};
+
+export default RegistrationForm;
+```
+
+### Props de InputPhone
+
+| Prop | Tipo | Por Defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'lg'` | Define las dimensiones del componente. `full` expande el input al 100% del ancho del contenedor. |
+| `placeholder` | `string` | *Opcional* | Texto de ayuda que se muestra cuando el input está vacío. |
+| `value` | `string` | *Opcional* | El valor actual del campo de texto (para componentes controlados). |
+| `onChange` | `(value: string) => void` | *Opcional* | Función callback que se ejecuta cada vez que el usuario escribe o modifica el valor. |
+| `error` | `string` | *Opcional* | Mensaje de error. Si se proporciona, el componente cambia visualmente a un estado de error y despliega el texto. |
+| `ladas` | `Array<{ label: string; code: string }>` | *Opcional* | Listado de códigos telefónicos de país para el menú desplegable. |
+| `defaultLadaIndex` | `number` | *Opcional* | Índice del arreglo de `ladas` que se seleccionará de manera inicial por defecto. |

package/dist/index.css

@@ -287,6 +287,11 @@ button,
 .uiklu-m-0{
     margin: 0px;
 
+}
+.uiklu-mx-2{
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+
 }
 .uiklu-mx-auto{
     margin-left: auto;
@@ -521,6 +526,10 @@ button,
 .uiklu-max-h-96{
     max-height: 24rem;
 
+}
+.uiklu-max-h-\[150px\]{
+    max-height: 150px;
+
 }
 .uiklu-max-h-\[40px\]{
     max-height: 40px;
@@ -621,6 +630,10 @@ button,
 .uiklu-w-\[39px\]{
     width: 39px;
 
+}
+.uiklu-w-\[400px\]{
+    width: 400px;
+
 }
 .uiklu-w-\[40px\]{
     width: 40px;
@@ -926,6 +939,10 @@ button,
 .uiklu-gap-\[20px\]{
     gap: 20px;
 
+}
+.uiklu-gap-\[2px\]{
+    gap: 2px;
+
 }
 .uiklu-gap-x-1\.5{
     -moz-column-gap: 0.375rem;
@@ -1598,6 +1615,10 @@ button,
 .uiklu-pb-\[20px\]{
     padding-bottom: 20px;
 
+}
+.uiklu-pl-1{
+    padding-left: 0.25rem;
+
 }
 .uiklu-pl-10{
     padding-left: 2.5rem;
@@ -1606,6 +1627,10 @@ button,
 .uiklu-pl-3{
     padding-left: 0.75rem;
 
+}
+.uiklu-pl-6{
+    padding-left: 1.5rem;
+
 }
 .uiklu-pr-14{
     padding-right: 3.5rem;
@@ -1618,10 +1643,18 @@ button,
 .uiklu-pr-4{
     padding-right: 1rem;
 
+}
+.uiklu-pr-6{
+    padding-right: 1.5rem;
+
 }
 .uiklu-pt-4{
     padding-top: 1rem;
 
+}
+.uiklu-pt-\[10px\]{
+    padding-top: 10px;
+
 }
 .uiklu-pt-\[20px\]{
     padding-top: 20px;
@@ -2187,6 +2220,26 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-within\:uiklu-border-primary900:focus-within{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary-900) / var(--tw-border-opacity, 1));
+
+}
+
+.focus-within\:uiklu-shadow-\[0_0_0_3px_\#AFD8D8\]:focus-within{
+    --tw-shadow: 0 0 0 3px #AFD8D8;
+    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+}
+
+.focus-within\:uiklu-shadow-\[0_0_0_3px_rgba\(220\2c 38\2c 38\2c 0\.20\)\]:focus-within{
+    --tw-shadow: 0 0 0 3px rgba(220,38,38,0.20);
+    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+}
+
 .hover\:uiklu-bg-gray-100:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -2219,6 +2272,11 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-primary500\/90:hover{
+    background-color: hsl(var(--uiklu-primary-500) / 0.9);
+
+}
+
 .hover\:uiklu-bg-primary900\/5:hover{
     background-color: hsl(var(--uiklu-primary-900) / 0.05);
 

package/dist/index.d.ts

@@ -16,7 +16,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primaryOrange" | "secondary" | "outline" | "outlinePrimary" | "outlineSecondary" | "outlineWhite" | "iconCircle" | null | undefined;
+    variant?: "primary" | "primaryOrange" | "secondary" | "outline" | "outlinePrimary" | "outlineSecondary" | "outlineWhite" | "iconCircle" | "filterCircle" | null | undefined;
     size?: "sm" | "md" | "lg" | "full" | "xl" | "fullh" | "iconOnly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -172,6 +172,7 @@ declare const Icons: {
     SIGN: react_jsx_runtime.JSX.Element;
     GAMES: react_jsx_runtime.JSX.Element;
     CHECKED: react_jsx_runtime.JSX.Element;
+    FILTER: react_jsx_runtime.JSX.Element;
 };
 
 declare const searchSelectTriggerVariants: (props?: ({

package/dist/index.js

@@ -210,6 +210,14 @@ var buttonVariants = cva(
           uiklu-rounded-full
           uiklu-border-transparent
           uiklu-p-0
+        `,
+        filterCircle: `
+          uiklu-bg-primary500
+          uiklu-text-white
+          hover:uiklu-bg-primary500/90
+          uiklu-rounded-full
+          uiklu-border-transparent
+          uiklu-p-0
         `
       },
       size: {
@@ -231,7 +239,7 @@ var buttonVariants = cva(
 var Button = React2.forwardRef(
   ({ className, variant, size, asChild = false, icon, iconAlign = "left", children, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const isIconCircle = variant === "iconCircle";
+    const isIconCircle = variant === "iconCircle" || variant === "filterCircle";
     return /* @__PURE__ */ jsxs2(
       Comp,
       {
@@ -857,6 +865,26 @@ var CHECKED = ({ className }) => /* @__PURE__ */ jsx7(
     )
   }
 );
+var FILTER = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "18px",
+      height: "16px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M0.75 3.75588H3.84375C4.00898 4.40119 4.38428 4.97316 \n    4.91048 5.38161C5.43669 5.79006 6.08387 6.01176 6.75 6.01176C7.41613 \n    6.01176 8.06331 5.79006 8.58952 5.38161C9.11572 4.97316 9.49102 \n    4.40119 9.65625 3.75588H17.25C17.4489 3.75588 17.6397 3.67686 17.7803 \n    3.53621C17.921 3.39556 18 3.20479 18 3.00588C18 2.80697 17.921 2.6162 \n    17.7803 2.47555C17.6397 2.3349 17.4489 2.25588 17.25 \n    2.25588H9.65625C9.49102 1.61057 9.11572 1.0386 8.58952 \n    0.630153C8.06331 0.221702 7.41613 0 6.75 0C6.08387 0 5.43669 0.221702 \n    4.91048 0.630153C4.38428 1.0386 4.00898 1.61057 3.84375 \n    2.25588H0.75C0.551088 2.25588 0.360322 2.3349 0.21967 \n    2.47555C0.0790178 2.6162 0 2.80697 0 3.00588C0 3.20479 0.0790178 \n    3.39556 0.21967 3.53621C0.360322 3.67686 0.551088 3.75588 0.75 \n    3.75588ZM6.75 1.50588C7.04667 1.50588 7.33668 1.59386 7.58335 \n    1.75868C7.83003 1.9235 8.02229 2.15777 8.13582 2.43186C8.24935 \n    2.70595 8.27906 3.00755 8.22118 3.29852C8.1633 3.58949 8.02044 \n    3.85676 7.81066 4.06654C7.60088 4.27632 7.33361 4.41918 7.04264 \n    4.47706C6.75166 4.53494 6.45006 4.50523 6.17597 4.3917C5.90189 \n    4.27817 5.66762 4.08591 5.5028 3.83924C5.33797 3.59256 5.25 \n    3.30255 5.25 3.00588C5.25 2.60806 5.40804 2.22653 5.68934 \n    1.94522C5.97064 1.66392 6.35218 1.50588 6.75 1.50588ZM17.25 \n    11.2559H15.6562C15.491 10.6106 15.1157 10.0386 14.5895 \n    9.63015C14.0633 9.2217 13.4161 9 12.75 9C12.0839 9 11.4367 9.2217 \n    10.9105 9.63015C10.3843 10.0386 10.009 10.6106 9.84375 \n    11.2559H0.75C0.551088 11.2559 0.360322 11.3349 0.21967 11.4756C0.0790178 \n    11.6162 0 11.807 0 12.0059C0 12.2048 0.0790178 12.3956 0.21967 \n    12.5362C0.360322 12.6769 0.551088 12.7559 0.75 12.7559H9.84375C10.009 \n    13.4012 10.3843 13.9732 10.9105 14.3816C11.4367 14.7901 12.0839 15.0118 \n    12.75 15.0118C13.4161 15.0118 14.0633 14.7901 14.5895 14.3816C15.1157 \n    13.9732 15.491 13.4012 15.6562 12.7559H17.25C17.4489 12.7559 17.6397 \n    12.6769 17.7803 12.5362C17.921 12.3956 18 12.2048 18 12.0059C18 11.807 \n    17.921 11.6162 17.7803 11.4756C17.6397 11.3349 17.4489 11.2559 17.25 \n    11.2559ZM12.75 13.5059C12.4533 13.5059 12.1633 13.4179 11.9166 \n    13.2531C11.67 13.0883 11.4777 12.854 11.3642 12.5799C11.2506 12.3058 \n    11.2209 12.0042 11.2788 11.7132C11.3367 11.4223 11.4796 11.155 11.6893 \n    10.9452C11.8991 10.7354 12.1664 10.5926 12.4574 10.5347C12.7483 10.4768 \n    13.0499 10.5065 13.324 10.6201C13.5981 10.7336 13.8324 10.9259 13.9972 \n    11.1725C14.162 11.4192 14.25 11.7092 14.25 12.0059C14.25 12.4037 \n    14.092 12.7852 13.8107 13.0665C13.5294 13.3478 13.1478 13.5059 12.75 \n    13.5059Z", fill: "white" })
+  }
+);
 var Icons = {
   CARD: /* @__PURE__ */ jsx7(CardIcon, {}),
   TICKET: /* @__PURE__ */ jsx7(TicketIcon, {}),
@@ -888,7 +916,8 @@ var Icons = {
   HOMESERVICE: /* @__PURE__ */ jsx7(Home, {}),
   SIGN: /* @__PURE__ */ jsx7(SIGN, {}),
   GAMES: /* @__PURE__ */ jsx7(GAMES, {}),
-  CHECKED: /* @__PURE__ */ jsx7(CHECKED, {})
+  CHECKED: /* @__PURE__ */ jsx7(CHECKED, {}),
+  FILTER: /* @__PURE__ */ jsx7(FILTER, {})
 };
 
 // src/components/ui/modal/modal.tsx
@@ -1451,12 +1480,30 @@ function PromoBanner({
 }
 
 // src/components/ui/sidebarTabs/sidebarTabs.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/components/ui/sidebarTabs/siderTab.tsx
 import * as React9 from "react";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-function SidebarNav({ items, activeTab, onTabChange }) {
+function SidebarNav({
+  items,
+  activeTab: controlledActiveTab,
+  onTabChange,
+  defaultActiveTab
+}) {
+  const [internalActiveTab, setInternalActiveTab] = React9.useState(
+    defaultActiveTab || items[0]?.id || ""
+  );
+  const isControlled = controlledActiveTab !== void 0;
+  const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+  const handleTabClick = (id) => {
+    if (!isControlled) {
+      setInternalActiveTab(id);
+    }
+    if (onTabChange) {
+      onTabChange(id);
+    }
+  };
   return /* @__PURE__ */ jsx16("nav", { className: "uiklu-flex uiklu-flex-col uiklu-gap-1 uiklu-w-full", children: items.map((item) => {
     const isActive = activeTab === item.id;
     const Icon2 = item.icon;
@@ -1465,7 +1512,7 @@ function SidebarNav({ items, activeTab, onTabChange }) {
       /* @__PURE__ */ jsxs13(
         "button",
         {
-          onClick: () => onTabChange(item.id),
+          onClick: () => handleTabClick(item.id),
           className: cn(
             "uiklu-group uiklu-flex uiklu-items-center",
             "uiklu-py-3 uiklu-rounded-full",
@@ -1486,8 +1533,7 @@ function SidebarNav({ items, activeTab, onTabChange }) {
                 className: cn(
                   "uiklu-text-[10px] uiklu-font-semibold uiklu-uppercase uiklu-ml-[6px]",
                   "uiklu-text-left uiklu-flex-1 uiklu-block",
-                  isActive ? "uiklu-opacity-100 uiklu-truncate" : "uiklu-opacity-80",
-                  isActive ? "" : "uiklu-whitespace-normal"
+                  isActive ? "uiklu-opacity-100 uiklu-truncate" : "uiklu-opacity-80"
                 ),
                 style: {
                   fontSize: "10px",
@@ -1520,7 +1566,7 @@ function SidebarNav({ items, activeTab, onTabChange }) {
 // src/components/ui/sidebarTabs/sidebarTabs.tsx
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function SidebarTabs({ items }) {
-  const [activeTab, setActiveTab] = useState4(items[0]?.id || "");
+  const [activeTab, setActiveTab] = useState5(items[0]?.id || "");
   const currentActiveItem = items.find((item) => item.id === activeTab);
   return /* @__PURE__ */ jsxs14("div", { className: "uiklu-flex uiklu-w-full uiklu-h-screen uiklu-bg-white", children: [
     /* @__PURE__ */ jsx17("div", { className: "uiklu-w-[162px] uiklu-h-[40px] uiklu-p-4 ", children: /* @__PURE__ */ jsx17(
@@ -1793,14 +1839,14 @@ var SearchSelect = ({
 };
 
 // src/components/ui/inputCode/inputCode.tsx
-import { useRef as useRef2, useState as useState6 } from "react";
+import { useRef as useRef2, useState as useState7 } from "react";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var InputCode = ({
   onComplete,
   title = "C\xF3digo de autenticaci\xF3n",
   hasError = false
 }) => {
-  const [code, setCode] = useState6(Array(6).fill(""));
+  const [code, setCode] = useState7(Array(6).fill(""));
   const inputsRef = useRef2([]);
   const handleChange = (e, index) => {
     const value = e.target.value;
@@ -1901,7 +1947,7 @@ var GridCard = ({
 };
 
 // src/components/ui/checkBox/checkBox.tsx
-import { useId, useState as useState7 } from "react";
+import { useId, useState as useState8 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var Checkbox = ({
   id,
@@ -1913,7 +1959,7 @@ var Checkbox = ({
 }) => {
   const uniqueId = id || useId();
   const isControlled = controlledChecked !== void 0;
-  const [internalChecked, setInternalChecked] = useState7(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = useState8(defaultChecked || false);
   const isChecked = isControlled ? controlledChecked : internalChecked;
   const handleCheckboxChange = (e) => {
     const nextChecked = e.target.checked;