@klu_dev/ui-klu-green 1.2.9 → 1.2.10

package/dist/index.css

@@ -521,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;
@@ -577,6 +581,10 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
+}
+.uiklu-w-\[120px\]{
+    width: 120px;
+
 }
 .uiklu-w-\[141px\]{
     width: 141px;
@@ -621,6 +629,10 @@ button,
 .uiklu-w-\[39px\]{
     width: 39px;
 
+}
+.uiklu-w-\[400px\]{
+    width: 400px;
+
 }
 .uiklu-w-\[40px\]{
     width: 40px;
@@ -1598,6 +1610,10 @@ button,
 .uiklu-pb-\[20px\]{
     padding-bottom: 20px;
 
+}
+.uiklu-pl-1{
+    padding-left: 0.25rem;
+
 }
 .uiklu-pl-10{
     padding-left: 2.5rem;
@@ -1606,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;
@@ -1618,6 +1638,10 @@ button,
 .uiklu-pr-4{
     padding-right: 1rem;
 
+}
+.uiklu-pr-6{
+    padding-right: 1.5rem;
+
 }
 .uiklu-pt-4{
     padding-top: 1rem;
@@ -2187,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));
@@ -2219,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);
 
@@ -2387,6 +2441,18 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.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));

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;