@julseb-lib/react 1.0.11 → 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"
                   }
                 )