@klu_dev/ui-klu-green 1.2.8 → 1.2.10

package/README.md

@@ -25,6 +25,8 @@ npm install @klu_dev/ui-klu-green
 - MobileMenuDrawer
 - SearchSelect
 - InputCode
+- GridCard
+- CheckBox
 
 ## Antes de comenzar a agregar componentes
 
@@ -820,4 +822,78 @@ export default function BankSelector() {
 | `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. |
+| `disabled` | `boolean` | `false` | Inactiva por completo la interacción del gatillo y cancela el despliegue del Popover. |
+
+## Uso de GridCard
+Tarjeta modular interactiva e individual ideal para layouts de cuadrícula.
+
+```tsx
+import { GridCard, Icons } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function CategorySelector() {
+  const mockCategories = [
+    { id: 'tel', label: 'Telefonía', icon: Icons.TELEPHONY },
+    { id: 'mov', label: 'Movilidad', icon: Icons.MOBILITY },
+    { id: 'hog', label: 'Hogar', icon: Icons.HOMESERVICE },
+  ]
+
+  const [activeId, setActiveId] = useState<string>('tel')
+
+  return (
+    <div className="uiklu-flex uiklu-flex-wrap uiklu-gap-4 uiklu-p-6">
+      {mockCategories.map((category) => (
+        <GridCard
+          key={category.id}
+          label={category.label}
+          icon={category.icon}
+          isActive={activeId === category.id}
+          onClick={() => setActiveId(category.id)}
+        />
+      ))}
+    </div>
+  )
+}
+```
+
+### Props de GridCard
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | - | Texto informativo inferior que titula el bloque de la tarjeta. |
+| `icon` | `ReactNode` | - | Grafismo o ícono vectorial extraído del catálogo corporativo `Icons`. |
+| `isActive` | `boolean` | `false` | Modifica dinámicamente el estilo del marco y el relleno para denotar selección activa. |
+| `onClick` | `() => void` | - | Callback gatillado al presionar la tarjeta completa. |
+
+
+
+## Uso de CheckBox
+Componente de casilla de verificación estilizado con soporte de estados e icono interno centralizado. Puede ser utilizado de manera controlada o no controlada.
+
+```tsx
+import { Checkbox } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function CheckboxExample() {
+  const [isLogged, setIsLogged] = useState(false)
+
+  return (
+    <div className="uiklu-p-6">
+      <Checkbox 
+        label="Guardar como servicio recurrente" 
+        checked={isLogged}
+        onChange={(checked) => setIsLogged(checked)}
+      />
+    </div>
+  )
+}
+```
+
+### Props de CheckBox
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `id` | `string` | - | Identificador único del input (si no se provee, genera uno interno de forma automática). |
+| `label` | `string` | `"Guardar como servicio recurrente"` | Texto descriptivo renderizado al lado derecho del recuadro. |
+| `defaultChecked` | `boolean` | `false` | Estado inicial por defecto en modo no controlado. |
+| `checked` | `boolean` | - | Estado binario síncrono en modo controlado. |
+| `onChange` | `(checked: boolean) => void` | - | Callback gatillado automáticamente al alterar la interacción del recuadro. |
+

package/dist/index.css

@@ -116,9 +116,12 @@
     --uiklu-primary-700: 176 84% 22%;
     --uiklu-primary-600: 177 87% 25%;
     --uiklu-primary-500: 178 87% 27%;
+    --uiklu-primary-400: 178 60% 36%;
     --uiklu-primary-300: 179 39% 47%;
     --uiklu-primary-100: 180 34% 77%;
     --uiklu-primary-light: 180 100% 99%;
+    --uiklu-primaryactive: 184 98% 96%;
+    --uiklu-primary-borderactive: 183 64% 90%;
     --uiklu-primary-50: 184 36% 91%;
     --uiklu-primary-foreground: 0 0% 100%;
     --uiklu-secondary: 160 60% 40%;
@@ -148,6 +151,7 @@
     --uiklu-gray-400: 220 2% 72%;
     --uiklu-gray-300: 210 3% 87%;
     --uiklu-gray-200: 220 8% 93%;
+    --uiklu-gray-50: 240 20% 98%;
 
 
     --uiklu-successbg: 184 36% 91%;
@@ -345,6 +349,10 @@ button,
 .uiklu-ml-5{
     margin-left: 1.25rem;
 
+}
+.uiklu-ml-\[1px\]{
+    margin-left: 1px;
+
 }
 .uiklu-ml-\[3px\]{
     margin-left: 3px;
@@ -457,6 +465,10 @@ button,
 .uiklu-h-\[20px\]{
     height: 20px;
 
+}
+.uiklu-h-\[24px\]{
+    height: 24px;
+
 }
 .uiklu-h-\[34px\]{
     height: 34px;
@@ -489,6 +501,10 @@ button,
 .uiklu-h-\[6px\]{
     height: 6px;
 
+}
+.uiklu-h-\[70px\]{
+    height: 70px;
+
 }
 .uiklu-h-auto{
     height: auto;
@@ -505,6 +521,10 @@ button,
 .uiklu-max-h-96{
     max-height: 24rem;
 
+}
+.uiklu-max-h-\[200px\]{
+    max-height: 200px;
+
 }
 .uiklu-max-h-\[40px\]{
     max-height: 40px;
@@ -561,6 +581,10 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
+}
+.uiklu-w-\[120px\]{
+    width: 120px;
+
 }
 .uiklu-w-\[141px\]{
     width: 141px;
@@ -605,6 +629,10 @@ button,
 .uiklu-w-\[39px\]{
     width: 39px;
 
+}
+.uiklu-w-\[400px\]{
+    width: 400px;
+
 }
 .uiklu-w-\[40px\]{
     width: 40px;
@@ -621,6 +649,10 @@ button,
 .uiklu-w-\[600px\]{
     width: 600px;
 
+}
+.uiklu-w-\[70px\]{
+    width: 70px;
+
 }
 .uiklu-w-\[75px\]{
     width: 75px;
@@ -746,6 +778,10 @@ button,
 .uiklu-max-w-lg{
     max-width: 32rem;
 
+}
+.uiklu-max-w-md{
+    max-width: 28rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -1026,6 +1062,10 @@ button,
 .uiklu-rounded-\[48px\]{
     border-radius: 48px;
 
+}
+.uiklu-rounded-\[4px\]{
+    border-radius: 4px;
+
 }
 .uiklu-rounded-\[50px\]{
     border-radius: 50px;
@@ -1134,6 +1174,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-gray-200) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-gray300{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-gray-300) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-inputlight{
     --tw-border-opacity: 1;
@@ -1159,6 +1204,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-primary-900) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-primaryborderactive{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary-borderactive) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-transparent{
     border-color: transparent;
@@ -1245,6 +1295,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-gray50{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-gray-50) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-gray900{
     --tw-bg-opacity: 1;
@@ -1294,6 +1349,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-900) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-primaryactive{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primaryactive) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-primarylight{
     --tw-bg-opacity: 1;
@@ -1436,6 +1496,14 @@ button,
 .uiklu-p-8{
     padding: 2rem;
 
+}
+.uiklu-p-\[10px\]{
+    padding: 10px;
+
+}
+.uiklu-p-\[10px_8px_10px_8px\]{
+    padding: 10px 8px 10px 8px;
+
 }
 .uiklu-p-\[14px\]{
     padding: 14px;
@@ -1542,6 +1610,10 @@ button,
 .uiklu-pb-\[20px\]{
     padding-bottom: 20px;
 
+}
+.uiklu-pl-1{
+    padding-left: 0.25rem;
+
 }
 .uiklu-pl-10{
     padding-left: 2.5rem;
@@ -1550,6 +1622,10 @@ button,
 .uiklu-pl-3{
     padding-left: 0.75rem;
 
+}
+.uiklu-pl-6{
+    padding-left: 1.5rem;
+
 }
 .uiklu-pr-14{
     padding-right: 3.5rem;
@@ -1562,6 +1638,10 @@ button,
 .uiklu-pr-4{
     padding-right: 1rem;
 
+}
+.uiklu-pr-6{
+    padding-right: 1.5rem;
+
 }
 .uiklu-pt-4{
     padding-top: 1rem;
@@ -1657,6 +1737,10 @@ button,
 .uiklu-text-\[8px\]{
     font-size: 8px;
 
+}
+.uiklu-text-\[9\.5px\]{
+    font-size: 9.5px;
+
 }
 .uiklu-text-lg{
     font-size: 12px;
@@ -1872,6 +1956,11 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-300) / var(--tw-text-opacity, 1));
 
+}
+.uiklu-text-primary400{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-primary-400) / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-primary600{
     --tw-text-opacity: 1;
@@ -2093,6 +2182,18 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.checked\:uiklu-border-primary:checked{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary) / var(--tw-border-opacity, 1));
+
+}
+
+.checked\:uiklu-bg-primary:checked{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primary) / var(--tw-bg-opacity, 1));
+
+}
+
 .focus-within\:uiklu-border-\[1px\]:focus-within{
     border-width: 1px;
 
@@ -2110,6 +2211,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));
@@ -2122,6 +2243,11 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-gray200\/40:hover{
+    background-color: hsl(var(--uiklu-gray-200) / 0.4);
+
+}
+
 .hover\:uiklu-bg-orange500\/90:hover{
     background-color: hsl(var(--uiklu-orange-500) / 0.9);
 
@@ -2137,6 +2263,16 @@ 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\/10:hover{
+    background-color: hsl(var(--uiklu-primary-900) / 0.1);
+
+}
+
 .hover\:uiklu-bg-primary900\/5:hover{
     background-color: hsl(var(--uiklu-primary-900) / 0.05);
 
@@ -2243,6 +2379,24 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.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);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+
+}
+
+.focus-visible\:uiklu-ring-primary300:focus-visible{
+    --tw-ring-opacity: 1;
+    --tw-ring-color: hsl(var(--uiklu-primary-300) / var(--tw-ring-opacity, 1));
+
+}
+
+.focus-visible\:uiklu-ring-offset-2:focus-visible{
+    --tw-ring-offset-width: 2px;
+
+}
+
 .active\:uiklu-opacity-70:active{
     opacity: 0.7;
 
@@ -2282,6 +2436,23 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.uiklu-peer:checked ~ .peer-checked\:uiklu-opacity-100{
+    opacity: 1;
+
+}
+
+.data-\[highlighted\]\:uiklu-bg-primary900[data-highlighted]{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primary-900) / var(--tw-bg-opacity, 1));
+
+}
+
+.data-\[highlighted\]\:uiklu-text-white[data-highlighted]{
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+}
+
 .data-\[placeholder\]\:uiklu-text-gray500[data-placeholder]{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-500) / var(--tw-text-opacity, 1));
@@ -2352,4 +2523,14 @@ input.uiklu-flex:not(:placeholder-shown) {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-300) / var(--tw-bg-opacity, 1));
 
+}
+
+.\[\&\>svg\]\:uiklu-h-3>svg{
+    height: 0.75rem;
+
+}
+
+.\[\&\>svg\]\:uiklu-w-3>svg{
+    width: 0.75rem;
+
 }

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> {
@@ -166,6 +166,13 @@ declare const Icons: {
     BOXES: react_jsx_runtime.JSX.Element;
     MENU: react_jsx_runtime.JSX.Element;
     CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
+    TELEPHONY: react_jsx_runtime.JSX.Element;
+    MOBILITY: react_jsx_runtime.JSX.Element;
+    HOMESERVICE: react_jsx_runtime.JSX.Element;
+    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?: ({
@@ -194,4 +201,22 @@ interface AuthCodeProps {
 }
 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 };
+interface GridCardProps {
+    label: string;
+    icon: React__default.ReactNode;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+declare const GridCard: React__default.FC<GridCardProps>;
+
+interface CheckboxProps {
+    id?: string;
+    label?: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    [key: string]: any;
+}
+declare const Checkbox: React__default.FC<CheckboxProps>;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, GridCard, Icons, Input, InputCode, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };