@klu_dev/ui-klu-green 1.2.6 → 1.2.8

package/README.md

@@ -20,6 +20,11 @@ npm install @klu_dev/ui-klu-green
 - BalanceInfo
 - Toast
 - LoaderScreen
+- PromoBanner
+- SidebarTabs
+- MobileMenuDrawer
+- SearchSelect
+- InputCode
 
 ## Antes de comenzar a agregar componentes
 
@@ -724,7 +729,6 @@ export function AppMobileLayout() {
 ```
 
 
-### Props de MobileMenuDrawer
 ### Props de MobileMenuDrawer
 
 | Prop | Tipo | Descripción |
@@ -736,3 +740,84 @@ export function AppMobileLayout() {
 | `onTabChange` | `(id: string) => void` | Callback gatillado al pulsar una nueva opción del menú. Devuelve el `id`. |
 
 
+## Uso de InputCode
+
+Componente modular de 6 celdas independientes para captura de tokens numéricos (MFA/OTP). Soporta autoenfoque secuencial inteligente, pegado (paste) masivo inteligente de cadenas numéricas enteras y control condicional de estados destructivos.
+
+
+```tsx
+import { InputCode } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function VerificationForm() {
+  const [hasError, setHasError] = useState(false)
+
+  const handleComplete = (code: string) => {
+    console.log("Código unificado enviado:", code)
+    if (code !== "123456") {
+      setHasError(true) // Pinta bordes y texto numérico en color destructivo
+    } else {
+      setHasError(false)
+    }
+  }
+
+  return (
+    <div className="uiklu-max-w-[400px] uiklu-mx-auto uiklu-p-6">
+      <InputCode hasError="{hasError}" onComplete="{handleComplete}" title="Código de seguridad SMS"/>
+      {hasError && (
+        <p className="uiklu-text-destructive uiklu-text-xs uiklu-text-center uiklu-mt-2">
+          Código inválido. Revisa tus dígitos e intenta de nuevo.
+        </p>
+      )}
+    </div>
+  )
+}
+```
+
+### Props de InputCode
+
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | `"Código de autenticación"` | Texto dinámico renderizado en la etiqueta del componente. |
+| `hasError` | `boolean` | `false` | Modifica de forma síncrona el color de los bordes y el contenido numérico a la variable destructiva. |
+| `onComplete` | `(code: string) => void` | - | Callback gatillado automáticamente cuando se ha rellenado la celda número 6. |
+
+## Uso de SearchSelect
+
+Componente de menú desplegable de búsqueda avanzada impulsado con Radix UI Popover. Permite filtrado de texto reactivo en tiempo real con limpieza rápida integrada, slots dinámicos laterales adicionales y escala adaptativa de dimensiones.
+
+
+```tsx
+import { SearchSelect } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function BankSelector() {
+  const [selectedBank, setSelectedBank] = useState("")
+
+  const bancos = [
+    { value: "002", label: "Banamex", extra: <span className="uiklu-text-xs uiklu-opacity-50">Nacional</span> },
+    { value: "012", label: "BBVA Bancomer" },
+    { value: "014", label: "Santander", extra: <span className="uiklu-text-xs uiklu-text-primary">Popular</span> },
+    { value: "072", label: "Banorte" },
+    { value: "646", label: "KLU Banca Digital" }
+  ]
+
+  return (
+    <div className="uiklu-flex uiklu-flex-col uiklu-gap-4 uiklu-p-6">
+      <SearchSelect error="{false}" onChange="{setSelectedBank}" options="{bancos}" placeholder="Selecciona tu banco emisor..." size="lg" value="{selectedBank}"/>
+      <p className="uiklu-text-sm">ID Banco Seleccionado: <strong>{selectedBank || "Ninguno"}</strong></p>
+    </div>
+  )
+}
+```
+
+### Props de SearchSelect
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `options` | `Option[]` | - | Listado de opciones de formato `{ value: string; label: string; extra?: ReactNode }`. |
+| `value` | `string` | - | ID de la opción seleccionada. |
+| `onChange` | `(value: string) => void` | - | Callback despachado al seleccionar o limpiar una opción. |
+| `placeholder` | `string` | `"Buscar..."` | Texto de soporte visible cuando el campo se encuentra vacío. |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'lg'` | Determina la escala del ancho mínimo, alto de caja e interlineado tipográfico interno. |
+| `error` | `boolean` | `false` | Alterna el color de la caja a la paleta destructiva y formatea el color del placeholder. |
+| `disabled` | `boolean` | `false` | Inactiva por completo la interacción del gatillo y cancela el despliegue del Popover. |

package/dist/index.css

@@ -321,6 +321,10 @@ button,
 .uiklu-mb-\[10px\]{
     margin-bottom: 10px;
 
+}
+.uiklu-mb-\[12px\]{
+    margin-bottom: 12px;
+
 }
 .uiklu-mb-\[18px\]{
     margin-bottom: 18px;
@@ -461,6 +465,10 @@ button,
 .uiklu-h-\[40px\]{
     height: 40px;
 
+}
+.uiklu-h-\[43px\]{
+    height: 43px;
+
 }
 .uiklu-h-\[44px\]{
     height: 44px;
@@ -593,6 +601,10 @@ button,
 .uiklu-w-\[383px\]{
     width: 383px;
 
+}
+.uiklu-w-\[39px\]{
+    width: 39px;
+
 }
 .uiklu-w-\[40px\]{
     width: 40px;
@@ -1018,6 +1030,10 @@ button,
 .uiklu-rounded-\[50px\]{
     border-radius: 50px;
 
+}
+.uiklu-rounded-\[8px\]{
+    border-radius: 8px;
+
 }
 .uiklu-rounded-full{
     border-radius: 9999px;
@@ -1629,6 +1645,10 @@ button,
 .uiklu-text-\[24px\]{
     font-size: 24px;
 
+}
+.uiklu-text-\[28px\]{
+    font-size: 28px;
+
 }
 .uiklu-text-\[32px\]{
     font-size: 32px;
@@ -1666,6 +1686,10 @@ button,
     line-height: 14px;
     font-weight: 500;
 
+}
+.uiklu-font-\[600\]{
+    font-weight: 600;
+
 }
 .uiklu-font-bold{
     font-weight: 700;
@@ -2176,6 +2200,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus\:uiklu-border-gray800:focus{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-gray-800) / var(--tw-border-opacity, 1));
+
+}
+
 .focus\:uiklu-border-primary900:focus{
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-primary-900) / var(--tw-border-opacity, 1));

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -131,6 +131,15 @@ interface SidebarTabsProps {
 }
 declare function SidebarTabs({ items }: SidebarTabsProps): react_jsx_runtime.JSX.Element;
 
+interface MobileMenuDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    items: NavItem[];
+    activeTab: string;
+    onTabChange: (id: string) => void;
+}
+declare function MobileMenuDrawer({ isOpen, onClose, items, activeTab, onTabChange }: MobileMenuDrawerProps): react_jsx_runtime.JSX.Element | null;
+
 declare const Icons: {
     CARD: react_jsx_runtime.JSX.Element;
     TICKET: react_jsx_runtime.JSX.Element;
@@ -159,4 +168,30 @@ declare const Icons: {
     CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
 };
 
-export { BackButton, BalanceInfo, Button, Icons, Input, LoadingScreen, Modal, PromoBanner, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };
+declare const searchSelectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface Option {
+    value: string;
+    label: string;
+    extra?: React.ReactNode;
+}
+interface SearchSelectProps extends VariantProps<typeof searchSelectTriggerVariants> {
+    options: Option[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const SearchSelect: ({ options, value, onChange, placeholder, size, error, disabled, className, }: SearchSelectProps) => react_jsx_runtime.JSX.Element;
+
+interface AuthCodeProps {
+    onComplete?: (code: string) => void;
+    title?: string;
+    hasError?: boolean;
+}
+declare const InputCode: React__default.FC<AuthCodeProps>;
+
+export { BackButton, BalanceInfo, Button, Icons, Input, InputCode, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -1402,15 +1402,350 @@ function SidebarTabs({ items }) {
     /* @__PURE__ */ jsx17("div", { className: "uiklu-flex-1", children: currentActiveItem?.content ? currentActiveItem.content : /* @__PURE__ */ jsx17("div", { className: "uiklu-p-8", children: /* @__PURE__ */ jsx17("h2", { children: "Pr\xF3ximamente..." }) }) })
   ] });
 }
+
+// src/components/ui/sidebarTabs/mobileMenuDrawer.tsx
+import { X } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function MobileMenuDrawer({ isOpen, onClose, items, activeTab, onTabChange }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: "uiklu-fixed uiklu-inset-0 uiklu-z-50 uiklu-flex uiklu-bg-white",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#FFFFFF"
+      },
+      children: [
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "uiklu-flex uiklu-items-center uiklu-justify-end uiklu-px-6 uiklu-pb-4 uiklu-border-b uiklu-border-gray-100",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              paddingLeft: "24px",
+              paddingRight: "24px",
+              paddingTop: "40px",
+              paddingBottom: "16px",
+              borderBottom: "1px solid #E5E7EB"
+            },
+            children: /* @__PURE__ */ jsx18(
+              "button",
+              {
+                onClick: onClose,
+                className: "uiklu-text-primary600 hover:uiklu-opacity-70 uiklu-transition-opacity uiklu-p-1",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  color: "#157C70"
+                },
+                children: /* @__PURE__ */ jsx18(X, { className: "uiklu-h-6 uiklu-w-6", style: { width: "24px", height: "24px" } })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "uiklu-flex-1 uiklu-overflow-y-auto uiklu-p-6 uiklu-w-full",
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "24px",
+              boxSizing: "border-box"
+            },
+            children: /* @__PURE__ */ jsx18(
+              SidebarNav,
+              {
+                items,
+                activeTab,
+                onTabChange: (id) => {
+                  onTabChange(id);
+                  onClose();
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/searchSelect/searchSelect.tsx
+import * as React10 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Check as Check2, ChevronDown as ChevronDown2, X as X2 } from "lucide-react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+var searchSelectTriggerVariants = cva5(
+  [
+    "uiklu-flex uiklu-items-center uiklu-justify-between uiklu-transition-all",
+    "uiklu-rounded-[50px] uiklu-border-[1px] uiklu-border-solid uiklu-bg-background uiklu-font-sans",
+    "uiklu-outline-none focus-within:uiklu-border-baseblack focus-within:uiklu-border-[1px]",
+    "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
+    "uiklu-leading-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "uiklu-h-[40px] uiklu-w-[150px] uiklu-min-w-[150px] uiklu-px-4 uiklu-text-sm",
+        md: "uiklu-h-[40px] uiklu-w-[250px] uiklu-min-w-[250px] uiklu-px-5 uiklu-text-md",
+        lg: "uiklu-h-[50px] uiklu-w-[350px] uiklu-min-w-[350px] uiklu-px-5 uiklu-text-lg",
+        full: "uiklu-h-[50px] uiklu-w-full uiklu-px-5 uiklu-text-lg"
+      },
+      error: {
+        true: "uiklu-border-destructive uiklu-text-destructive focus-within:uiklu-border-destructive",
+        false: "uiklu-border-border uiklu-text-inputtext"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      error: false
+    }
+  }
+);
+var inputFontSizes = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var SearchSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Buscar...",
+  size = "lg",
+  error = false,
+  disabled = false,
+  className
+}) => {
+  const [open, setOpen] = React10.useState(false);
+  const [search, setSearch] = React10.useState("");
+  const containerRef = React10.useRef(null);
+  const inputRef = React10.useRef(null);
+  const selectedOption = options.find((opt) => opt.value === value);
+  React10.useEffect(() => {
+    if (selectedOption) {
+      setSearch(selectedOption.label);
+    } else {
+      setSearch("");
+    }
+  }, [selectedOption]);
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange("");
+    setSearch("");
+    setOpen(true);
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs16(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx19(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(
+          searchSelectTriggerVariants({ size, error, className }),
+          "uiklu-cursor-text uiklu-relative",
+          disabled && "uiklu-opacity-50 uiklu-pointer-events-none"
+        ),
+        onClick: () => {
+          inputRef.current?.focus();
+          setOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx19(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              className: cn(
+                "uiklu-w-full uiklu-bg-transparent uiklu-outline-none uiklu-border-none uiklu-p-0",
+                "uiklu-font-sans uiklu-text-gray800 placeholder:uiklu-opacity-100",
+                inputFontSizes[size || "lg"],
+                !error ? "placeholder:uiklu-text-gray500" : "placeholder:uiklu-text-destructive"
+              ),
+              placeholder,
+              value: search,
+              disabled,
+              onFocus: () => setOpen(true),
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen(true);
+              },
+              onChange: (e) => {
+                setSearch(e.target.value);
+                if (!open) setOpen(true);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs16("div", { className: "uiklu-flex uiklu-items-center uiklu-ml-2 uiklu-shrink-0", children: [
+            search && /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "uiklu-mr-1 uiklu-opacity-50 hover:uiklu-opacity-100 uiklu-transition-opacity\n                  uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-p-0 \n                  uiklu-cursor-pointer uiklu-flex uiklu-items-center uiklu-justify-center",
+                children: /* @__PURE__ */ jsx19(X2, { className: "uiklu-h-4 uiklu-w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              ChevronDown2,
+              {
+                className: cn(
+                  "uiklu-h-5 uiklu-w-5 uiklu-transition-opacity uiklu-opacity-70 uiklu-cursor-pointer",
+                  error ? "uiklu-text-destructive" : "uiklu-text-inputtext"
+                ),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen((prev) => !prev);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx19(
+      PopoverPrimitive.Content,
+      {
+        className: cn(
+          "uiklu-relative uiklu-z-50 uiklu-overflow-hidden uiklu-rounded-[20px] uiklu-border-[1px] uiklu-border-border uiklu-bg-background uiklu-text-inputtext uiklu-font-sans uiklu-shadow-md uiklu-translate-y-1"
+        ),
+        style: {
+          width: containerRef.current ? containerRef.current.offsetWidth : "var(--radix-popover-trigger-width)"
+        },
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx19("div", { className: "uiklu-py-1 uiklu-px-0 uiklu-max-h-96 uiklu-overflow-y-auto uiklu-overflow-x-hidden uiklu-w-full uiklu-box-border", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "uiklu-py-3 uiklu-px-4 uiklu-text-sm uiklu-text-center uiklu-opacity-50 uiklu-font-sans", children: "No se encontraron resultados" }) : filteredOptions.map((option) => {
+          const isSelected = value === option.value;
+          return /* @__PURE__ */ jsxs16(
+            "div",
+            {
+              onClick: () => {
+                onChange(option.value);
+                setSearch(option.label);
+                setOpen(false);
+              },
+              className: cn(
+                "uiklu-relative uiklu-flex uiklu-w-full uiklu-box-border uiklu-cursor-pointer uiklu-select-none uiklu-items-center uiklu-py-2.5 uiklu-pl-10 uiklu-pr-4 uiklu-text-md uiklu-font-sans uiklu-outline-none hover:uiklu-bg-primary/10 hover:uiklu-text-primary uiklu-transition-colors",
+                isSelected && "uiklu-bg-primary/5 uiklu-text-primary uiklu-font-medium"
+              ),
+              children: [
+                /* @__PURE__ */ jsx19("span", { className: "uiklu-absolute uiklu-left-3 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: isSelected && /* @__PURE__ */ jsx19(Check2, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary" }) }),
+                /* @__PURE__ */ jsx19("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-min-w-0", children: option.label }),
+                option.extra && /* @__PURE__ */ jsx19("span", { className: "uiklu-ml-2 uiklu-shrink-0 uiklu-flex uiklu-items-center", children: option.extra })
+              ]
+            },
+            option.value
+          );
+        }) })
+      }
+    ) })
+  ] });
+};
+
+// src/components/ui/inputCode/inputCode.tsx
+import { useRef as useRef2, useState as useState6 } 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 inputsRef = useRef2([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (isNaN(Number(value))) return;
+    const newCode = [...code];
+    newCode[index] = value.substring(value.length - 1);
+    setCode(newCode);
+    const fullCode = newCode.join("");
+    if (fullCode.length === 6 && onComplete) {
+      onComplete(fullCode);
+    }
+    if (value && index < 5) {
+      inputsRef.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !code[index] && index > 0) {
+      inputsRef.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").trim();
+    if (!/^\d+$/.test(pastedData)) return;
+    const pastedCode = pastedData.slice(0, 6).split("");
+    const newCode = [...code];
+    pastedCode.forEach((char, index) => {
+      if (index < 6) newCode[index] = char;
+    });
+    setCode(newCode);
+    const focusIndex = Math.min(pastedCode.length, 5);
+    inputsRef.current[focusIndex]?.focus();
+    const fullCode = newCode.join("");
+    if (fullCode.length === 6 && onComplete) {
+      onComplete(fullCode);
+    }
+  };
+  return /* @__PURE__ */ jsxs17("div", { className: "uiklu-flex uiklu-flex-col uiklu-items-center \n    uiklu-justify-center uiklu-font-sans uiklu-w-full", children: [
+    /* @__PURE__ */ jsx20("label", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-font-normal\n       uiklu-block uiklu-mb-[12px]", children: title }),
+    /* @__PURE__ */ jsx20("div", { className: "uiklu-flex uiklu-justify-center uiklu-gap-[14px] uiklu-w-full", children: code.map((digit, index) => /* @__PURE__ */ jsx20(
+      "input",
+      {
+        ref: (el) => {
+          if (el) inputsRef.current[index] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        maxLength: 1,
+        value: digit,
+        onChange: (e) => handleChange(e, index),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        onPaste: index === 0 ? handlePaste : void 0,
+        className: `uiklu-w-[39px] uiklu-h-[43px] 
+            uiklu-flex-shrink-0 uiklu-box-border uiklu-text-center 
+            uiklu-text-[28px] uiklu-font-sans uiklu-font-[600]
+            uiklu-border-[1px] uiklu-border-solid 
+            uiklu-rounded-[8px] uiklu-transition-colors uiklu-text-ellipsis
+            focus:uiklu-outline-none
+            ${hasError ? "uiklu-border-destructive uiklu-text-destructive focus:uiklu-border-destructive" : "uiklu-border-inputlight uiklu-text-gray800 focus:uiklu-border-gray800"}`
+      },
+      index
+    )) })
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
   Button,
   Icons,
   Input,
+  InputCode,
   LoadingScreen,
+  MobileMenuDrawer,
   Modal,
   PromoBanner,
+  SearchSelect,
   Select,
   SidebarTabs,
   ToastAction,