@clickpalm/react 1.3.8 → 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

@@ -2319,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",
@@ -3966,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",
@@ -4061,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%"
 });
@@ -4100,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,
     {
@@ -4109,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,
@@ -4156,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

@@ -2249,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",
@@ -3900,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",
@@ -3995,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%"
 });
@@ -4034,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,
     {
@@ -4043,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,
@@ -4090,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.8",
+	"version": "1.3.9",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"