@clickpalm/react 1.3.7 → 1.3.9

package/dist/index.d.ts

@@ -4136,6 +4136,7 @@ declare const Carousel: react__default.FC<CarouselProps> & {
 interface CarouselItemProps {
     children: ReactNode;
     style?: CSSProperties;
+    title?: string | null | undefined;
 }
 
 type PasswordInputProps = Omit<TextInputProps, 'type' | 'suffix'>;

package/dist/index.js

@@ -1341,14 +1341,32 @@ var Input2 = (0, import_react5.forwardRef)(
       return stringValue;
     };
     const [displayValue, setDisplayValue] = (0, import_react5.useState)(getDisplayValue(props.value));
-    const [charCount, setCharCount] = (0, import_react5.useState)((prefix?.length || 0) + getDisplayValue(props.value).length);
+    const [charCount, setCharCount] = (0, import_react5.useState)(getDisplayValue(props.value).length);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
     (0, import_react5.useEffect)(() => {
       const newDisplayValue = getDisplayValue(props.value);
-      setDisplayValue(newDisplayValue);
-      setCharCount((prefix?.length || 0) + newDisplayValue.length);
-    }, [props.value, prefix]);
+      if (newDisplayValue !== displayValue) {
+        setDisplayValue(newDisplayValue);
+        setCharCount(newDisplayValue.length);
+      }
+    }, [props.value, prefix, displayValue]);
+    const handleChange = (e) => {
+      let currentDisplayValue = getDisplayValue(e.target.value);
+      if (props.type === "number") {
+        currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
+      }
+      if (props.onChange) {
+        const newEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: currentDisplayValue
+          }
+        };
+        props.onChange(newEvent);
+      }
+    };
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1376,24 +1394,11 @@ var Input2 = (0, import_react5.forwardRef)(
               {
                 ref: inputRef,
                 ...props,
+                type: props.type === "number" ? "text" : props.type,
+                inputMode: props.type === "number" ? "numeric" : props.inputMode,
                 value: displayValue,
-                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
-                onChange: (e) => {
-                  const currentDisplayValue = e.target.value;
-                  setDisplayValue(currentDisplayValue);
-                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
-                  if (props.onChange) {
-                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
-                    const newEvent = {
-                      ...e,
-                      target: {
-                        ...e.target,
-                        value: valueWithPrefix
-                      }
-                    };
-                    props.onChange(newEvent);
-                  }
-                }
+                maxLength,
+                onChange: handleChange
               }
             ),
             !!suffix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Suffix, { children: suffix })
@@ -2314,7 +2319,6 @@ var TabsTrigger = styled(Tabs.Trigger, {
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   overflow: "hidden",
-  userSelect: "none",
   background: "$gray100",
   backgroundImage: "linear-gradient(to bottom, $clickpalm_mid, $clickpalm_superDark)",
   WebkitBackgroundClip: "text",
@@ -3961,8 +3965,7 @@ var CarouselContainer = styled("div", {
   flexDirection: "column",
   alignItems: "center",
   width: "100%",
-  maxWidth: "720px",
-  userSelect: "none"
+  maxWidth: "720px"
 });
 var Wrapper6 = styled("div", {
   display: "flex",
@@ -4056,6 +4059,13 @@ var DotButton = styled("button", {
     borderColor: "$ignite_dark"
   }
 });
+var Ellipsis = styled("span", {
+  color: "$ignite_light",
+  textDecoration: "none",
+  height: "9px",
+  display: "flex",
+  alignItems: "center"
+});
 var CarouselItemContainer = styled("div", {
   width: "100%"
 });
@@ -4095,6 +4105,8 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
+  const activeItem = items[activeIndex];
+  const itemTitle = activeItem.props.title;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     CarouselContainer,
     {
@@ -4104,7 +4116,7 @@ var Carousel = ({ title, variant, children }) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Wrapper6, { variant, children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Title2, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Title2, { children: itemTitle ?? title }),
             /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Navigation, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 Button,
@@ -4151,23 +4163,37 @@ var Carousel = ({ title, variant, children }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          DotButton,
-          {
-            active: idx === activeIndex,
-            "aria-label": `Go to slide ${idx + 1}`,
-            "aria-selected": idx === activeIndex,
-            role: "tab",
-            onClick: () => setActiveIndex(idx),
-            type: "button"
-          },
-          idx
-        )) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
+          (page, index) => typeof page === "number" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            DotButton,
+            {
+              active: page === activeIndex,
+              "aria-label": `Go to slide ${page + 1}`,
+              "aria-selected": page === activeIndex,
+              role: "tab",
+              onClick: () => setActiveIndex(page),
+              type: "button"
+            },
+            page
+          ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Ellipsis, { children: "..." }, `ellipsis-${index}`)
+        ) }) })
       ]
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
+var getPaginationItems = (totalItems, activeIndex) => {
+  if (totalItems <= 10) {
+    return Array.from({ length: totalItems }, (_, i) => i);
+  }
+  if (activeIndex < 7) {
+    return [0, 1, 2, 3, 4, 5, 6, "...", totalItems - 1];
+  }
+  if (activeIndex >= totalItems - 5) {
+    return [0, "...", totalItems - 5, totalItems - 4, totalItems - 3, totalItems - 2, totalItems - 1];
+  }
+  return [0, "...", activeIndex - 2, activeIndex - 1, activeIndex, activeIndex + 1, activeIndex + 2, "...", totalItems - 1];
+};
+var CarouselItem = ({ children, style, title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx

package/dist/index.mjs

@@ -1271,14 +1271,32 @@ var Input2 = forwardRef3(
       return stringValue;
     };
     const [displayValue, setDisplayValue] = useState2(getDisplayValue(props.value));
-    const [charCount, setCharCount] = useState2((prefix?.length || 0) + getDisplayValue(props.value).length);
+    const [charCount, setCharCount] = useState2(getDisplayValue(props.value).length);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
     useEffect2(() => {
       const newDisplayValue = getDisplayValue(props.value);
-      setDisplayValue(newDisplayValue);
-      setCharCount((prefix?.length || 0) + newDisplayValue.length);
-    }, [props.value, prefix]);
+      if (newDisplayValue !== displayValue) {
+        setDisplayValue(newDisplayValue);
+        setCharCount(newDisplayValue.length);
+      }
+    }, [props.value, prefix, displayValue]);
+    const handleChange = (e) => {
+      let currentDisplayValue = getDisplayValue(e.target.value);
+      if (props.type === "number") {
+        currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
+      }
+      if (props.onChange) {
+        const newEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: currentDisplayValue
+          }
+        };
+        props.onChange(newEvent);
+      }
+    };
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1306,24 +1324,11 @@ var Input2 = forwardRef3(
               {
                 ref: inputRef,
                 ...props,
+                type: props.type === "number" ? "text" : props.type,
+                inputMode: props.type === "number" ? "numeric" : props.inputMode,
                 value: displayValue,
-                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
-                onChange: (e) => {
-                  const currentDisplayValue = e.target.value;
-                  setDisplayValue(currentDisplayValue);
-                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
-                  if (props.onChange) {
-                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
-                    const newEvent = {
-                      ...e,
-                      target: {
-                        ...e.target,
-                        value: valueWithPrefix
-                      }
-                    };
-                    props.onChange(newEvent);
-                  }
-                }
+                maxLength,
+                onChange: handleChange
               }
             ),
             !!suffix && /* @__PURE__ */ jsx19(Suffix, { children: suffix })
@@ -2244,7 +2249,6 @@ var TabsTrigger = styled(Tabs.Trigger, {
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   overflow: "hidden",
-  userSelect: "none",
   background: "$gray100",
   backgroundImage: "linear-gradient(to bottom, $clickpalm_mid, $clickpalm_superDark)",
   WebkitBackgroundClip: "text",
@@ -3895,8 +3899,7 @@ var CarouselContainer = styled("div", {
   flexDirection: "column",
   alignItems: "center",
   width: "100%",
-  maxWidth: "720px",
-  userSelect: "none"
+  maxWidth: "720px"
 });
 var Wrapper6 = styled("div", {
   display: "flex",
@@ -3990,6 +3993,13 @@ var DotButton = styled("button", {
     borderColor: "$ignite_dark"
   }
 });
+var Ellipsis = styled("span", {
+  color: "$ignite_light",
+  textDecoration: "none",
+  height: "9px",
+  display: "flex",
+  alignItems: "center"
+});
 var CarouselItemContainer = styled("div", {
   width: "100%"
 });
@@ -4029,6 +4039,8 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
+  const activeItem = items[activeIndex];
+  const itemTitle = activeItem.props.title;
   return /* @__PURE__ */ jsxs20(
     CarouselContainer,
     {
@@ -4038,7 +4050,7 @@ var Carousel = ({ title, variant, children }) => {
       children: [
         /* @__PURE__ */ jsxs20(Wrapper6, { variant, children: [
           /* @__PURE__ */ jsxs20(CarouselHeader, { children: [
-            /* @__PURE__ */ jsx43(Title2, { children: title }),
+            /* @__PURE__ */ jsx43(Title2, { children: itemTitle ?? title }),
             /* @__PURE__ */ jsxs20(Navigation, { children: [
               /* @__PURE__ */ jsx43(
                 Button,
@@ -4085,23 +4097,37 @@ var Carousel = ({ title, variant, children }) => {
           )
         ] }),
         /* @__PURE__ */ jsx43(Spacing, { size: "md" }),
-        /* @__PURE__ */ jsx43(DotsContainer, { children: /* @__PURE__ */ jsx43(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx43(
-          DotButton,
-          {
-            active: idx === activeIndex,
-            "aria-label": `Go to slide ${idx + 1}`,
-            "aria-selected": idx === activeIndex,
-            role: "tab",
-            onClick: () => setActiveIndex(idx),
-            type: "button"
-          },
-          idx
-        )) }) })
+        /* @__PURE__ */ jsx43(DotsContainer, { children: /* @__PURE__ */ jsx43(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
+          (page, index) => typeof page === "number" ? /* @__PURE__ */ jsx43(
+            DotButton,
+            {
+              active: page === activeIndex,
+              "aria-label": `Go to slide ${page + 1}`,
+              "aria-selected": page === activeIndex,
+              role: "tab",
+              onClick: () => setActiveIndex(page),
+              type: "button"
+            },
+            page
+          ) : /* @__PURE__ */ jsx43(Ellipsis, { children: "..." }, `ellipsis-${index}`)
+        ) }) })
       ]
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx43(CarouselItemContainer, { ...props, style: { ...style }, children });
+var getPaginationItems = (totalItems, activeIndex) => {
+  if (totalItems <= 10) {
+    return Array.from({ length: totalItems }, (_, i) => i);
+  }
+  if (activeIndex < 7) {
+    return [0, 1, 2, 3, 4, 5, 6, "...", totalItems - 1];
+  }
+  if (activeIndex >= totalItems - 5) {
+    return [0, "...", totalItems - 5, totalItems - 4, totalItems - 3, totalItems - 2, totalItems - 1];
+  }
+  return [0, "...", activeIndex - 2, activeIndex - 1, activeIndex, activeIndex + 1, activeIndex + 2, "...", totalItems - 1];
+};
+var CarouselItem = ({ children, style, title, ...props }) => /* @__PURE__ */ jsx43(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.3.7",
+	"version": "1.3.9",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"