@julseb-lib/react 1.0.10 → 1.0.12

package/dist/index.d.cts

@@ -1777,13 +1777,13 @@ declare const Autocomplete: FC$1<ILibAutocomplete>;
  *   icons={{ default: <BiHeart />, checked: <BiSolidHeart /> }}
  * />
  *
- * @extends HTMLDivElement
+ * @extends ILibRating
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the rating container.
  * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the rating container div element.
  * @prop {number} [props.rating] - Current rating value (1-5 stars).
- * @prop {function} [props.setRating] - Function to update the rating value when not in read-only mode.
- * @prop {object} [props.icons] - Icon configuration object with default and checked icon variants.
+ * @prop {(rating: number) => void} [props.setRating] - Function to update the rating value when not in read-only mode.
+ * @prop {{ default?: React.ReactNode; checked?: React.ReactNode }} [props.icons] - Icon configuration object with default and checked icon variants.
  * @prop {boolean} [props.readOnly] - Whether the rating is in read-only mode (no interaction).
  * @prop {string} [props.label] - Label text to display above the rating.
  * @prop {string} [props.labelComment] - Additional comment text next to the label.
@@ -1791,8 +1791,10 @@ declare const Autocomplete: FC$1<ILibAutocomplete>;
  * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the rating.
  * @prop {string} [props.id] - Unique identifier for the rating element.
  * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {string} [containerClassName] - Additional CSS classes for the container.
- * @prop {any} [props.rest] - Additional props spread to the rating container.
+ * @prop {string} [props.containerClassName] - Additional CSS classes for the container.
+ * @prop {number} [props.iconsSize=32] - Size of the rating icons. Default: 32.
+ * @prop {LibColorsHover} [props.accentColor="primary"] - Accent color for the icons. Default: "primary".
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.gap="xs"] - Gap between rating icons. Default: "xs".
  *
  * @returns {JSX.Element} The rendered Rating component.
  *

package/dist/index.d.ts

@@ -1777,13 +1777,13 @@ declare const Autocomplete: FC$1<ILibAutocomplete>;
  *   icons={{ default: <BiHeart />, checked: <BiSolidHeart /> }}
  * />
  *
- * @extends HTMLDivElement
+ * @extends ILibRating
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the rating container.
  * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the rating container div element.
  * @prop {number} [props.rating] - Current rating value (1-5 stars).
- * @prop {function} [props.setRating] - Function to update the rating value when not in read-only mode.
- * @prop {object} [props.icons] - Icon configuration object with default and checked icon variants.
+ * @prop {(rating: number) => void} [props.setRating] - Function to update the rating value when not in read-only mode.
+ * @prop {{ default?: React.ReactNode; checked?: React.ReactNode }} [props.icons] - Icon configuration object with default and checked icon variants.
  * @prop {boolean} [props.readOnly] - Whether the rating is in read-only mode (no interaction).
  * @prop {string} [props.label] - Label text to display above the rating.
  * @prop {string} [props.labelComment] - Additional comment text next to the label.
@@ -1791,8 +1791,10 @@ declare const Autocomplete: FC$1<ILibAutocomplete>;
  * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the rating.
  * @prop {string} [props.id] - Unique identifier for the rating element.
  * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {string} [containerClassName] - Additional CSS classes for the container.
- * @prop {any} [props.rest] - Additional props spread to the rating container.
+ * @prop {string} [props.containerClassName] - Additional CSS classes for the container.
+ * @prop {number} [props.iconsSize=32] - Size of the rating icons. Default: 32.
+ * @prop {LibColorsHover} [props.accentColor="primary"] - Accent color for the icons. Default: "primary".
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.gap="xs"] - Gap between rating icons. Default: "xs".
  *
  * @returns {JSX.Element} The rendered Rating component.
  *

package/dist/index.js

@@ -66330,6 +66330,9 @@ var Rating = ({
   id,
   validation,
   containerClassName,
+  iconsSize = 32,
+  accentColor = "primary",
+  gap = "xs",
   ...rest
 }) => {
   return /* @__PURE__ */ jsx318(
@@ -66346,7 +66349,7 @@ var Rating = ({
         {
           ref,
           id,
-          className: clsx("flex gap-2", "rating", className),
+          className: clsx("flex", genGap[gap], "rating", className),
           ...rest,
           children: generateNumbers(0, 4).map((n) => {
             const Element = readOnly ? "span" : "button";
@@ -66356,20 +66359,20 @@ var Rating = ({
                 onClick: () => !readOnly && setRating(n + 1),
                 type: "button",
                 className: clsx(
-                  readOnly ? "text-primary-500" : genTextColorHover["primary"],
+                  readOnly ? genTextAllColor[accentColor] : genTextColorHover[accentColor],
                   validation?.status === false ? readOnly ? "text-danger-500" : genTextColorHover["danger"] : validation?.status === true && (readOnly ? "text-success-500" : genTextColorHover["success"]),
                   "rating-item"
                 ),
                 children: n >= rating ? icons?.default ?? /* @__PURE__ */ jsx318(
                   BiStar,
                   {
-                    size: 32,
+                    size: iconsSize,
                     className: "rating-icon"
                   }
                 ) : icons?.checked ?? /* @__PURE__ */ jsx318(
                   BiSolidStar,
                   {
-                    size: 32,
+                    size: iconsSize,
                     className: "rating-icon"
                   }
                 )
@@ -68111,25 +68114,28 @@ import { generateNumbers as generateNumbers2 } from "@julseb-lib/utils";
 import { jsx as jsx350 } from "react/jsx-runtime";
 var SlideshowPagination = ({
   className,
-  pagination,
   images,
   active,
   setActive,
-  contentLength
+  contentLength,
+  handleClick,
+  position = "outside",
+  hideOnTouch,
+  color = "primary",
+  type = "dots"
 }) => {
   const isTouchScreen = useTouchScreen();
-  if (isTouchScreen && pagination?.hideOnTouch || contentLength === 0)
-    return null;
+  if (isTouchScreen && hideOnTouch || contentLength === 0) return null;
   return /* @__PURE__ */ jsx350(
     "div",
     {
       className: clsx(
         "flex justify-center gap-2 mx-auto px-2 w-full max-w-[70%]",
-        pagination?.position === "outside" ? "" : "absolute bottom-1 left-[50%] -translate-x-[50%]",
+        position === "outside" ? "" : "absolute bottom-1 left-[50%] -translate-x-[50%]",
         "slideshow-controls",
         className
       ),
-      children: pagination?.type === "thumbnails" ? images?.map((image, i) => /* @__PURE__ */ jsx350(
+      children: type === "thumbnails" ? images?.map((image, i) => /* @__PURE__ */ jsx350(
         "button",
         {
           className: clsx(
@@ -68139,7 +68145,10 @@ var SlideshowPagination = ({
             active === i && "active",
             "slideshow-thumbnail-container"
           ),
-          onClick: () => setActive(i),
+          onClick: () => {
+            setActive(i);
+            handleClick(i);
+          },
           children: /* @__PURE__ */ jsx350(
             "img",
             {
@@ -68157,20 +68166,21 @@ var SlideshowPagination = ({
         {
           className: clsx(
             "",
-            pagination?.type === "dots-outline" ? outlineColor[pagination?.color ?? "primary"] : genBgColor2[pagination?.color ?? "primary"],
+            type === "dots-outline" ? outlineColor[color ?? "primary"] : genBgColor2[color ?? "primary"],
             active === n && "active",
-            pagination?.type === "dots" && [
+            type === "dots" && [
               "size-2 rounded-full block"
             ],
-            pagination?.type === "dots-outline" && [
+            type === "dots-outline" && [
               "size-2 rounded-full border-1"
             ],
-            pagination?.type === "bars" && [
-              "grow h-1 rounded-full"
-            ],
+            type === "bars" && ["grow h-1 rounded-full"],
             "slideshow-control"
           ),
-          onClick: () => setActive(n)
+          onClick: () => {
+            setActive(n);
+            handleClick(n);
+          }
         },
         n
       ))
@@ -68421,17 +68431,16 @@ var Slideshow = ({
         !hidePagination && totalSlides > 1 && /* @__PURE__ */ jsx351(
           SlideshowPagination,
           {
+            className: pagination?.className,
+            images: pagination?.images,
             active: currentSlide,
             setActive: setCurrentSlide,
             contentLength: totalSlides,
             handleClick: goToSlide,
-            pagination: {
-              type: pagination?.type ?? "dots",
-              hideOnTouch: pagination?.hideOnTouch ?? false,
-              position: pagination?.position ?? "outside",
-              color: pagination?.color ?? "primary"
-            },
-            images
+            position: pagination?.position,
+            hideOnTouch: pagination?.hideOnTouch,
+            color: pagination?.color,
+            type: pagination?.type
           }
         )
       ]