@klu_dev/ui-klu-green 1.2.15 → 1.2.16

package/dist/index.css

@@ -264,6 +264,10 @@ button,
 .uiklu-top-8{
     top: 2rem;
 
+}
+.uiklu-top-\[2px\]{
+    top: 2px;
+
 }
 .uiklu-top-\[50\%\]{
     top: 50%;
@@ -328,6 +332,10 @@ button,
 .uiklu-mb-4{
     margin-bottom: 1rem;
 
+}
+.uiklu-mb-5{
+    margin-bottom: 1.25rem;
+
 }
 .uiklu-mb-6{
     margin-bottom: 1.5rem;
@@ -368,6 +376,10 @@ button,
 .uiklu-ml-5{
     margin-left: 1.25rem;
 
+}
+.uiklu-ml-\[-10px\]{
+    margin-left: -10px;
+
 }
 .uiklu-ml-\[1px\]{
     margin-left: 1px;
@@ -408,6 +420,10 @@ button,
 .uiklu-mt-3{
     margin-top: 0.75rem;
 
+}
+.uiklu-mt-4{
+    margin-top: 1rem;
+
 }
 .uiklu-mt-6{
     margin-top: 1.5rem;
@@ -448,10 +464,18 @@ 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;
@@ -468,6 +492,10 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
+}
+.uiklu-h-7{
+    height: 1.75rem;
+
 }
 .uiklu-h-8{
     height: 2rem;
@@ -604,6 +632,10 @@ button,
 .uiklu-min-h-screen{
     min-height: 100vh;
 
+}
+.uiklu-w-11{
+    width: 2.75rem;
+
 }
 .uiklu-w-12{
     width: 3rem;
@@ -624,10 +656,18 @@ 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;
@@ -873,6 +913,10 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
+}
+.uiklu-max-w-xl{
+    max-width: 36rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -890,6 +934,16 @@ button,
     --tw-translate-y: -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-x-1{
+    --tw-translate-x: 0.25rem;
+    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-x-6{
+    --tw-translate-x: 1.5rem;
+    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-x-\[-50\%\]{
     --tw-translate-x: -50%;
@@ -905,6 +959,10 @@ button,
     --tw-translate-y: -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-transform{
+    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-cursor-default{
     cursor: default;
@@ -1013,6 +1071,10 @@ button,
 .uiklu-gap-4{
     gap: 1rem;
 
+}
+.uiklu-gap-5{
+    gap: 1.25rem;
+
 }
 .uiklu-gap-6{
     gap: 1.5rem;
@@ -1197,6 +1259,10 @@ button,
 .uiklu-rounded-none{
     border-radius: 0px;
 
+}
+.uiklu-rounded-sm{
+    border-radius: 0.125rem;
+
 }
 .uiklu-rounded-xl{
     border-radius: 0.75rem;
@@ -1296,6 +1362,11 @@ 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;
@@ -1397,6 +1468,10 @@ 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;
@@ -1412,6 +1487,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;
@@ -1432,11 +1512,25 @@ 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;
@@ -1601,10 +1695,18 @@ button,
 .uiklu-p-20{
     padding: 5rem;
 
+}
+.uiklu-p-3{
+    padding: 0.75rem;
+
 }
 .uiklu-p-4{
     padding: 1rem;
 
+}
+.uiklu-p-5{
+    padding: 1.25rem;
+
 }
 .uiklu-p-6{
     padding: 1.5rem;
@@ -1957,6 +2059,10 @@ button,
 .uiklu-tracking-tight{
     letter-spacing: -0.025em;
 
+}
+.uiklu-tracking-wide{
+    letter-spacing: 0.025em;
+
 }
 .uiklu-tracking-wider{
     letter-spacing: 0.05em;
@@ -2183,6 +2289,10 @@ 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);
@@ -2224,6 +2334,12 @@ button,
     outline: 2px solid transparent;
     outline-offset: 2px;
 
+}
+.uiklu-ring-0{
+    --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(0px + 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);
+
 }
 .uiklu-ring-1{
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2272,10 +2388,20 @@ button,
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 
+}
+.uiklu-transition-transform{
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+
 }
 .uiklu-duration-200{
     transition-duration: 200ms;
 
+}
+.uiklu-duration-300{
+    transition-duration: 300ms;
+
 }
 .uiklu-duration-500{
     transition-duration: 500ms;
@@ -2534,6 +2660,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-visible\:uiklu-outline-none:focus-visible{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+
+}
+
 .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);
@@ -2541,6 +2673,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-visible\:uiklu-ring-gray400:focus-visible{
+    --tw-ring-opacity: 1;
+    --tw-ring-color: hsl(var(--uiklu-gray-400) / var(--tw-ring-opacity, 1));
+
+}
+
 .focus-visible\:uiklu-ring-primary300:focus-visible{
     --tw-ring-opacity: 1;
     --tw-ring-color: hsl(var(--uiklu-primary-300) / var(--tw-ring-opacity, 1));
@@ -2596,6 +2734,30 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.data-\[state\=checked\]\:uiklu-translate-x-5[data-state="checked"]{
+    --tw-translate-x: 1.25rem;
+    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));
+
+}
+
+.data-\[state\=unchecked\]\:uiklu-translate-x-0[data-state="unchecked"]{
+    --tw-translate-x: 0px;
+    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));
+
+}
+
+.data-\[state\=checked\]\:uiklu-bg-primary[data-state="checked"]{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primary) / var(--tw-bg-opacity, 1));
+
+}
+
+.data-\[state\=unchecked\]\:uiklu-bg-gray300[data-state="unchecked"]{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-gray-300) / var(--tw-bg-opacity, 1));
+
+}
+
 .data-\[placeholder\]\:uiklu-text-gray500[data-placeholder]{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-500) / var(--tw-text-opacity, 1));
@@ -2606,6 +2768,10 @@ 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;

package/dist/index.js

@@ -2873,7 +2873,20 @@ var DetailCard = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[20px]", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[20px] contenedor-botones-flow", children: [
+      /* @__PURE__ */ jsx25("style", { children: `
+          @media (max-width: 550px) {
+            .contenedor-botones-flow {
+              flex-direction: column-reverse !important;
+              gap: 12px !important; /* Espacio vertical entre los dos botones */
+            }
+            .contenedor-botones-flow > button,
+            .contenedor-botones-flow > div { 
+              width: 100% !important; /* Fuerza a que midan todo el ancho del celular */
+              flex: none !important;  /* Evita que se aplasten verticalmente */
+            }
+          }
+        ` }),
       /* @__PURE__ */ jsx25(
         Button,
         {