@producteca/producteca-ui-kit 1.10.0 → 1.11.0

package/README.md

@@ -116,7 +116,7 @@ Follow these steps to integrate and configure the `@producteca/producteca-ui-kit
        }
      }
      ```
-   - For a complete example of how to implement these changes, refer to this pull request: [Shopify Babel Update Example](https://github.com/Parsimotion/shopify/pull/279)
+   - For a complete example of how to implement these changes, refer to this pull request: [Shopify Babel Update Example](https://github.com/Parsimotion/shopify/pull/290)
 
 ### Auto Publish
 

package/dist/favicon.svg

@@ -1,22 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Circular background -->
-  <circle cx="16" cy="16" r="16" fill="#0066FF"/>
+  <!-- Fondo circular azul -->
+  <circle cx="16" cy="16" r="16" fill="#0045AD"/>
   
-  <!-- UI Text with better visibility -->
-  <g transform="translate(16, 18)">
-    <text
-      x="0"
-      y="0"
-      text-anchor="middle"
-      dominant-baseline="middle"
-      fill="white"
-      font-family="Arial, sans-serif"
-      font-weight="900"
-      font-size="14"
-      letter-spacing="-0.5"
-    >
-      UI
-    </text>
-  </g>
+  <!-- Patrón de puntos sutiles en el fondo -->
+  <circle cx="6" cy="6" r="0.8" fill="white" opacity="0.25"/>
+  <circle cx="26" cy="6" r="0.8" fill="white" opacity="0.25"/>
+  <circle cx="6" cy="26" r="0.8" fill="white" opacity="0.25"/>
+  <circle cx="26" cy="26" r="0.8" fill="white" opacity="0.25"/>
+  <circle cx="16" cy="4" r="0.5" fill="white" opacity="0.2"/>
+  <circle cx="16" cy="28" r="0.5" fill="white" opacity="0.2"/>
+  <circle cx="4" cy="16" r="0.5" fill="white" opacity="0.2"/>
+  <circle cx="28" cy="16" r="0.5" fill="white" opacity="0.2"/>
+  
+  <!-- Líneas sutiles conectoras -->
+  <line x1="16" y1="4" x2="16" y2="7" stroke="white" stroke-width="0.3" opacity="0.2"/>
+  <line x1="16" y1="25" x2="16" y2="28" stroke="white" stroke-width="0.3" opacity="0.2"/>
+  <line x1="4" y1="16" x2="7" y2="16" stroke="white" stroke-width="0.3" opacity="0.2"/>
+  <line x1="25" y1="16" x2="28" y2="16" stroke="white" stroke-width="0.3" opacity="0.2"/>
+  
+  <!-- Letra U redondeada y minimalista -->
+  <path
+    d="M9.5 11 v6.5
+       a4.5 4.5 0 0 0 9 0 v-6.5"
+    stroke="white"
+    stroke-width="3.2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  
+  <!-- Letra I redondeada y minimalista -->
+  <line
+    x1="22.5"
+    y1="11"
+    x2="22.5"
+    y2="21"
+    stroke="white"
+    stroke-width="3.2"
+    stroke-linecap="round"
+  />
 </svg> 

package/dist/producteca-ui-kit.es.js

@@ -14454,7 +14454,7 @@ const wu = (n) => {
     }
   }, [A, u]);
   const j = () => !b || !L || !We.isEmpty(S), be = c ? { Option: wu, MultiValue: aA } : { Option: wu, SingleValue: vg };
-  return /* @__PURE__ */ Pe("div", { className: tt["select-field-container"], children: [
+  return /* @__PURE__ */ Pe("div", { className: tt["select-field-container"], "data-testid": "select-field-container", children: [
     r && /* @__PURE__ */ W("label", { htmlFor: t, children: r }),
     /* @__PURE__ */ Pe(
       "div",
@@ -14559,10 +14559,11 @@ const wu = (n) => {
     }
   }), L = (Z) => {
     S(Z);
-  }, z = c && !C && A ? /* @__PURE__ */ W($n, { children: /* @__PURE__ */ W(mg, {}) }) : C, K = c && !C ? () => L({ target: { name: n.name, value: "" } }) : We.identity, I = l == "sm";
+  }, z = c && !C && A ? /* @__PURE__ */ W($n, { "data-testid": "clear-icon", children: /* @__PURE__ */ W(mg, {}) }) : C, K = c && !C ? () => L({ target: { name: n.name, value: "" } }) : We.identity, I = l == "sm";
   return /* @__PURE__ */ Pe(
     "div",
     {
+      "data-testid": "text-input-container",
       className: an(
         on[l],
         on["text-input"],
@@ -14577,6 +14578,7 @@ const wu = (n) => {
           {
             ...w,
             ..._,
+            "data-testid": "text-input",
             value: A,
             type: d,
             onChange: L,
@@ -14595,10 +14597,11 @@ const wu = (n) => {
     {
       ...n,
       type: t ? "text" : "password",
+      "data-testid": "password-input",
       rightIcon: /* @__PURE__ */ W(IA, { showPassword: t, setShowPassword: r })
     }
   );
-}, IA = ({ showPassword: n, setShowPassword: t }) => /* @__PURE__ */ W("div", { onClick: () => t(!n), children: n ? /* @__PURE__ */ W(iA, {}) : /* @__PURE__ */ W(oA, {}) }), xA = (n) => n ? {
+}, IA = ({ showPassword: n, setShowPassword: t }) => /* @__PURE__ */ W("div", { "data-testid": "visibility-toggle", onClick: () => t(!n), children: n ? /* @__PURE__ */ W(iA, {}) : /* @__PURE__ */ W(oA, {}) }), xA = (n) => n ? {
   password: yA,
   text: Bo,
   number: Bo
@@ -14826,39 +14829,49 @@ const wu = (n) => {
       return p;
     }
   });
-  return /* @__PURE__ */ Pe("div", { className: Tn["switch-input-container"], children: [
-    n && /* @__PURE__ */ Pe("label", { className: Tn.title, children: [
+  return /* @__PURE__ */ Pe("div", { className: Tn["switch-input-container"], "data-testid": "switch-input-container", children: [
+    n && /* @__PURE__ */ Pe("label", { className: Tn.title, "data-testid": "switch-title", children: [
       " ",
       n,
       " "
     ] }),
-    /* @__PURE__ */ W("div", { className: `${Tn["switch-input-items"]} ${Tn[o]}`, children: We.map(r, ({ id: p, name: h, label: b, disabled: C, checked: x, value: w, ...m }) => {
+    /* @__PURE__ */ W("div", { className: `${Tn["switch-input-items"]} ${Tn[o]}`, "data-testid": "switch-input-items", children: We.map(r, ({ id: p, name: h, label: b, disabled: C, checked: x, value: w, ...m }) => {
       const A = p || h || t;
-      return /* @__PURE__ */ Pe("label", { htmlFor: A, className: `${C ? Tn.disabled : ""}`, children: [
-        /* @__PURE__ */ Pe("div", { className: Tn["switch-wrapper"], children: [
-          /* @__PURE__ */ W(
-            "input",
-            {
-              ...l,
-              ...m,
-              id: A,
-              type: "checkbox",
-              name: h || t,
-              checked: u && h ? We.get(u.value, h) : x,
-              disabled: C,
-              onChange: d,
-              onBlur: c,
-              className: Tn["switch-input"]
-            }
-          ),
-          /* @__PURE__ */ W("span", { className: Tn["switch-slider"] })
-        ] }),
-        /* @__PURE__ */ Pe("span", { className: Tn["switch-label"], children: [
-          " ",
-          b,
-          " "
-        ] })
-      ] }, A);
+      return /* @__PURE__ */ Pe(
+        "label",
+        {
+          htmlFor: A,
+          className: `${C ? Tn.disabled : ""}`,
+          "data-testid": `switch-label-${A}`,
+          children: [
+            /* @__PURE__ */ Pe("div", { className: Tn["switch-wrapper"], children: [
+              /* @__PURE__ */ W(
+                "input",
+                {
+                  ...l,
+                  ...m,
+                  id: A,
+                  type: "checkbox",
+                  name: h || t,
+                  checked: u && h ? We.get(u.value, h) : x,
+                  disabled: C,
+                  onChange: d,
+                  onBlur: c,
+                  className: Tn["switch-input"],
+                  "data-testid": `switch-input-${A}`
+                }
+              ),
+              /* @__PURE__ */ W("span", { className: Tn["switch-slider"] })
+            ] }),
+            /* @__PURE__ */ Pe("span", { className: Tn["switch-label"], children: [
+              " ",
+              b,
+              " "
+            ] })
+          ]
+        },
+        A
+      );
     }) })
   ] });
 }, dS = ({ name: n, checked: t, onChange: r, label: a, title: o, disabled: u = !1, size: l = "sm", input: d, ...c }) => {
@@ -14917,7 +14930,10 @@ const wu = (n) => {
   return Zn(() => {
     if (r === "buffer") {
       const u = setInterval(() => {
-        o((l) => Math.min(100, l + Math.sqrt(100 - l) * 0.5));
+        o((l) => {
+          const d = Math.min(100, l + Math.sqrt(100 - l) * 0.5);
+          return Math.round(d);
+        });
       }, 100);
       return () => {
         clearInterval(u);
@@ -14929,7 +14945,10 @@ const wu = (n) => {
     {
       variant: r == "buffer" ? "determinate" : r,
       value: a,
-      className: an(Ud.progressbar, Ud[n])
+      className: an(Ud.progressbar, Ud[n]),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": a
     }
   );
 }, $A = "alert-module_alert_j7ZRS", ZA = "alert-module_icon_vbZHd", zA = "alert-module_message_klR2U", YA = "alert-module_link_IrBj3", JA = "alert-module_success_AVBKS", UA = "alert-module_error_cxg96", jA = "alert-module_warning_zkMaJ", QA = "alert-module_info_PBo1l", Br = {