@julseb-lib/react 1.0.11 → 1.0.13

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"
                   }
                 )
@@ -66821,10 +66824,10 @@ var AccordionTitle = ({
 };
 
 // src/lib/components/Accordion/AccordionContent.tsx
-import "react";
+import { Fragment as Fragment9 } from "react";
 import { jsx as jsx327 } from "react/jsx-runtime";
 var AccordionContent = ({
-  element = Text,
+  element,
   ref,
   className,
   variant = "basic",
@@ -66832,7 +66835,7 @@ var AccordionContent = ({
   children,
   ...rest
 }) => {
-  const Element = element;
+  const Element = element ?? (typeof children === "string" ? Text : Fragment9);
   return /* @__PURE__ */ jsx327(
     Element,
     {
@@ -67322,12 +67325,12 @@ var Modal = ({
 };
 
 // src/lib/components/DragList/DragList.tsx
-import { useRef as useRef13, useState as useState20, Fragment as Fragment10 } from "react";
+import { useRef as useRef13, useState as useState20, Fragment as Fragment11 } from "react";
 
 // src/lib/components/DragList/DragListItem.tsx
 import "react";
 import { BiDotsVerticalRounded } from "react-icons/bi";
-import { Fragment as Fragment9, jsx as jsx337, jsxs as jsxs280 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx337, jsxs as jsxs280 } from "react/jsx-runtime";
 var DragListItem = ({
   className,
   element = "div",
@@ -67376,7 +67379,7 @@ var DragListItem = ({
               "flex flex-col gap-1 grow",
               "drag-list-item-content"
             ),
-            children: item ? /* @__PURE__ */ jsxs280(Fragment9, { children: [
+            children: item ? /* @__PURE__ */ jsxs280(Fragment10, { children: [
               typeof item.title === "string" ? /* @__PURE__ */ jsx337(Text, { tag: "h6", className: "drag-list-item-title", children: item.title }) : item.title,
               item.body && (typeof item.body === "string" ? /* @__PURE__ */ jsx337(Text, { className: "drag-list-item-body", children: item.body }) : item.body)
             ] }) : children
@@ -67435,7 +67438,7 @@ var DragList = ({
         className
       ),
       ...rest,
-      children: items ? items.map((item, i) => /* @__PURE__ */ jsxs281(Fragment10, { children: [
+      children: items ? items.map((item, i) => /* @__PURE__ */ jsxs281(Fragment11, { children: [
         /* @__PURE__ */ createElement3(
           DragListItem,
           {
@@ -67496,7 +67499,7 @@ var PaginationButton = ({
 };
 
 // src/lib/components/Pagination/Pagination.tsx
-import { Fragment as Fragment11, jsx as jsx340, jsxs as jsxs282 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx340, jsxs as jsxs282 } from "react/jsx-runtime";
 var Pagination = ({
   className,
   element = "div",
@@ -67534,7 +67537,7 @@ var Pagination = ({
         className
       ),
       ...rest,
-      children: totalPages ? /* @__PURE__ */ jsxs282(Fragment11, { children: [
+      children: totalPages ? /* @__PURE__ */ jsxs282(Fragment12, { children: [
         /* @__PURE__ */ jsx340(
           PaginationButton,
           {
@@ -67545,7 +67548,7 @@ var Pagination = ({
             children: icons?.prev ?? /* @__PURE__ */ jsx340(BiLeftArrowAlt, { size: 24 })
           }
         ),
-        paginationGroup[0] !== 1 && /* @__PURE__ */ jsxs282(Fragment11, { children: [
+        paginationGroup[0] !== 1 && /* @__PURE__ */ jsxs282(Fragment12, { children: [
           /* @__PURE__ */ jsx340(
             PaginationButton,
             {
@@ -67574,7 +67577,7 @@ var Pagination = ({
           },
           n
         )),
-        paginationGroup[paginationGroup.length - 1] !== totalPages && /* @__PURE__ */ jsxs282(Fragment11, { children: [
+        paginationGroup[paginationGroup.length - 1] !== totalPages && /* @__PURE__ */ jsxs282(Fragment12, { children: [
           /* @__PURE__ */ jsx340(
             PaginationButton,
             {
@@ -68204,7 +68207,7 @@ var outlineColor = {
 };
 
 // src/lib/components/Slideshow/Slideshow.tsx
-import { Fragment as Fragment12, jsx as jsx351, jsxs as jsxs286 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx351, jsxs as jsxs286 } from "react/jsx-runtime";
 var Slideshow = ({
   className,
   element = "div",
@@ -68405,7 +68408,7 @@ var Slideshow = ({
             )
           }
         ),
-        !hideControls && totalSlides > 1 && /* @__PURE__ */ jsxs286(Fragment12, { children: [
+        !hideControls && totalSlides > 1 && /* @__PURE__ */ jsxs286(Fragment13, { children: [
           /* @__PURE__ */ jsx351(
             SlideshowButton,
             {
@@ -69401,7 +69404,7 @@ var HeaderSearch = ({ search, handleClose }) => {
 };
 
 // src/lib/components/Header/Header.tsx
-import { Fragment as Fragment13, jsx as jsx366, jsxs as jsxs292 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx366, jsxs as jsxs292 } from "react/jsx-runtime";
 var Header = ({
   className,
   element = "header",
@@ -69463,7 +69466,7 @@ var Header = ({
   };
   const searchProps = { search, handleClose };
   const navProps = {
-    children: /* @__PURE__ */ jsxs292(Fragment13, { children: [
+    children: /* @__PURE__ */ jsxs292(Fragment14, { children: [
       links ? links.map((link) => link) : nav ? nav : children,
       isMobile && /* @__PURE__ */ jsx366(HeaderSearch, { ...searchProps })
     ] }),
@@ -69549,7 +69552,7 @@ var Header = ({
 };
 
 // src/lib/components/Footer/Footer.tsx
-import { Children as Children4, Fragment as Fragment14 } from "react";
+import { Children as Children4, Fragment as Fragment15 } from "react";
 import { uuid as uuid13 } from "@julseb-lib/utils";
 import { jsx as jsx367, jsxs as jsxs293 } from "react/jsx-runtime";
 var Footer = ({
@@ -69585,7 +69588,7 @@ var Footer = ({
       ...rest,
       children: [
         typeof logo === "string" ? /* @__PURE__ */ jsx367(Text, { children: logo }) : logo,
-        /* @__PURE__ */ jsx367("div", { className: "flex items-container gap-2", children: items?.map((item, i) => /* @__PURE__ */ jsxs293(Fragment14, { children: [
+        /* @__PURE__ */ jsx367("div", { className: "flex items-container gap-2", children: items?.map((item, i) => /* @__PURE__ */ jsxs293(Fragment15, { children: [
           item,
           i !== items.length - 1 && !hideLinksSeparator && /* @__PURE__ */ jsx367(
             "span",
@@ -69596,7 +69599,7 @@ var Footer = ({
               children: linksSeparator === "dot" ? "\u2022" : "-"
             }
           )
-        ] }, uuid13())) ?? childrenArray.map((child, i) => /* @__PURE__ */ jsxs293(Fragment14, { children: [
+        ] }, uuid13())) ?? childrenArray.map((child, i) => /* @__PURE__ */ jsxs293(Fragment15, { children: [
           child,
           i !== childrenArray.length - 1 && !hideLinksSeparator && (linksSeparator === "dot" ? "\u2022" : "-")
         ] }, uuid13())) })
@@ -69607,7 +69610,7 @@ var Footer = ({
 
 // src/lib/components/Meta/Meta.tsx
 import "react";
-import { Fragment as Fragment15, jsx as jsx368, jsxs as jsxs294 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx368, jsxs as jsxs294 } from "react/jsx-runtime";
 var Meta = ({
   children,
   title,
@@ -69631,7 +69634,7 @@ var Meta = ({
   appleTouchIcon,
   themeColor
 }) => {
-  return /* @__PURE__ */ jsxs294(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs294(Fragment16, { children: [
     /* @__PURE__ */ jsx368("meta", { charSet: "utf-8" }),
     /* @__PURE__ */ jsx368(
       "meta",
@@ -69640,29 +69643,29 @@ var Meta = ({
         content: "width=device-width, initial-scale=1"
       }
     ),
-    title && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    title && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("title", { children: title }),
       /* @__PURE__ */ jsx368("meta", { property: "og:title", content: title }),
       /* @__PURE__ */ jsx368("meta", { name: "twitter:title", content: title })
     ] }),
-    description && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    description && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("meta", { name: "description", content: description }),
       /* @__PURE__ */ jsx368("meta", { property: "og:description", content: description }),
       /* @__PURE__ */ jsx368("meta", { name: "twitter:description", content: description })
     ] }),
-    siteName && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    siteName && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("meta", { name: "application-name", content: siteName }),
       /* @__PURE__ */ jsx368("meta", { property: "og:site_name", content: siteName })
     ] }),
-    author && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    author && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("meta", { name: "author", content: author }),
       /* @__PURE__ */ jsx368("meta", { name: "twitter:creator", content: author })
     ] }),
-    url && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    url && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("meta", { property: "og:url", content: url }),
       /* @__PURE__ */ jsx368("meta", { name: "twitter:site", content: url })
     ] }),
-    cover && /* @__PURE__ */ jsxs294(Fragment15, { children: [
+    cover && /* @__PURE__ */ jsxs294(Fragment16, { children: [
       /* @__PURE__ */ jsx368("meta", { property: "og:image", content: cover }),
       /* @__PURE__ */ jsx368("meta", { name: "twitter:image", content: cover })
     ] }),
@@ -69686,7 +69689,7 @@ var Meta = ({
 
 // src/lib/components/PageLayout/PageLayout.tsx
 import { isValidElement } from "react";
-import { Fragment as Fragment16, jsx as jsx369, jsxs as jsxs295 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx369, jsxs as jsxs295 } from "react/jsx-runtime";
 var PageLayout = ({
   children,
   meta,
@@ -69697,7 +69700,7 @@ var PageLayout = ({
   noWrapper,
   noMain
 }) => {
-  return /* @__PURE__ */ jsxs295(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs295(Fragment17, { children: [
     meta && /* @__PURE__ */ jsx369(Meta, { ...meta }),
     isValidElement(header) ? header : /* @__PURE__ */ jsx369(Header, { ...header }),
     !noWrapper ? /* @__PURE__ */ jsx369(Wrapper, { ...wrapperProps, children: !noMain ? /* @__PURE__ */ jsx369(Main, { ...mainProps, children }) : children }) : children,