@tunjiadeyemi/ui 1.2.0 → 1.4.0

package/dist/index.d.mts

@@ -13,7 +13,7 @@ interface ModalProps {
 declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    type?: "password" | "otp" | "text" | "email" | "number";
+    type?: 'password' | 'otp' | 'text' | 'email' | 'number';
     value?: string;
     onOtpClick?: () => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -24,14 +24,16 @@ interface TextInputProps {
     minLength?: number;
     maxLength?: number;
     errorMessage?: string;
-    color?: string;
+    borderColor?: string;
     textColor?: string;
     borderRadius?: string;
     height?: string;
     width?: string;
+    eyeIcon?: React.ReactNode;
+    eyeClosedIcon?: React.ReactNode;
 }
 
-declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, borderColor, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;
@@ -43,4 +45,26 @@ interface SkeletonProps {
 
 declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Input, Modal, Skeleton };
+declare const ScrollToTop: () => null;
+
+interface AccordionItem {
+    question: string;
+    answer: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface AccordionProps {
+    icon?: React.ReactNode;
+    items: AccordionItem[];
+    className?: string;
+    containerClassName?: string;
+    onIconClick?: (idx: number, item: AccordionItem) => void;
+}
+declare const Accordion: ({ icon, items, containerClassName, className, onIconClick }: AccordionProps) => react_jsx_runtime.JSX.Element;
+
+declare const Rating: ({ rating, total, icon }: {
+    rating: number;
+    total: number;
+    icon?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, Input, Modal, Rating, ScrollToTop, Skeleton };

package/dist/index.d.ts

@@ -13,7 +13,7 @@ interface ModalProps {
 declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    type?: "password" | "otp" | "text" | "email" | "number";
+    type?: 'password' | 'otp' | 'text' | 'email' | 'number';
     value?: string;
     onOtpClick?: () => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -24,14 +24,16 @@ interface TextInputProps {
     minLength?: number;
     maxLength?: number;
     errorMessage?: string;
-    color?: string;
+    borderColor?: string;
     textColor?: string;
     borderRadius?: string;
     height?: string;
     width?: string;
+    eyeIcon?: React.ReactNode;
+    eyeClosedIcon?: React.ReactNode;
 }
 
-declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, borderColor, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;
@@ -43,4 +45,26 @@ interface SkeletonProps {
 
 declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Input, Modal, Skeleton };
+declare const ScrollToTop: () => null;
+
+interface AccordionItem {
+    question: string;
+    answer: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface AccordionProps {
+    icon?: React.ReactNode;
+    items: AccordionItem[];
+    className?: string;
+    containerClassName?: string;
+    onIconClick?: (idx: number, item: AccordionItem) => void;
+}
+declare const Accordion: ({ icon, items, containerClassName, className, onIconClick }: AccordionProps) => react_jsx_runtime.JSX.Element;
+
+declare const Rating: ({ rating, total, icon }: {
+    rating: number;
+    total: number;
+    icon?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, Input, Modal, Rating, ScrollToTop, Skeleton };

package/dist/index.js

@@ -20,8 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion_default,
   Input: () => Input_default,
   Modal: () => Modal_default,
+  Rating: () => Rating_default,
+  ScrollToTop: () => ScrollToTop_default,
   Skeleton: () => Skeleton_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -135,10 +138,12 @@ var Input = ({
   errorMessage,
   width = "100%",
   height = "40px",
-  color = "#6B2CE9",
+  borderColor = "#6B2CE9",
   textColor = "white",
   borderRadius = "10px",
-  backgroundColor = "#1F1F23"
+  backgroundColor = "#1F1F23",
+  eyeIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }),
+  eyeClosedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
 }) => {
   const [showPassword, setShowPassword] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
@@ -215,7 +220,7 @@ var Input = ({
               width: "100%"
             },
             className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-12 placeholder:opacity-30 focus:outline-none transition ${className}`,
-            onFocus: (e) => !error && (e.target.style.borderColor = color),
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
             onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
           }
         ),
@@ -226,7 +231,7 @@ var Input = ({
             onClick: togglePasswordVisibility,
             className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
             "aria-label": showPassword ? "Hide password" : "Show password",
-            children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
+            children: showPassword ? eyeIcon : eyeClosedIcon
           }
         )
       ] }),
@@ -234,44 +239,37 @@ var Input = ({
     ] });
   } else if (type === "otp") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "div",
-        {
-          className: "relative flex items-center gap-4",
-          style: { width: "100%" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "input",
-              {
-                type: "number",
-                value,
-                onChange,
-                placeholder,
-                style: {
-                  backgroundColor,
-                  color: textColor,
-                  borderRadius,
-                  height,
-                  width: "100%"
-                },
-                className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
-                onFocus: (e) => !error && (e.target.style.borderColor = color),
-                onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onOtpClick,
-                className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
-                "aria-label": "Resend code",
-                children: "Resend code"
-              }
-            )
-          ]
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative flex items-center gap-4", style: { width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "number",
+            value,
+            onChange,
+            placeholder,
+            style: {
+              backgroundColor,
+              color: textColor,
+              borderRadius,
+              height,
+              width: "100%"
+            },
+            className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
+            onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onOtpClick,
+            className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
+            "aria-label": "Resend code",
+            children: "Resend code"
+          }
+        )
+      ] }),
       error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
   } else {
@@ -291,7 +289,7 @@ var Input = ({
             width: "100%"
           },
           className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 placeholder:opacity-30 focus:outline-none transition ${className}`,
-          onFocus: (e) => !error && (e.target.style.borderColor = color),
+          onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
           onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
         }
       ),
@@ -345,9 +343,119 @@ var Skeleton = ({
   );
 };
 var Skeleton_default = Skeleton;
+
+// src/components/ScrollToTop/ScrollToTop.tsx
+var import_react2 = require("react");
+var ScrollToTop = () => {
+  (0, import_react2.useEffect)(() => {
+    window.scrollTo(0, 0);
+    const handleNavigation = () => {
+      window.scrollTo(0, 0);
+    };
+    window.addEventListener("popstate", handleNavigation);
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      handleNavigation();
+    };
+    history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      handleNavigation();
+    };
+    return () => {
+      window.removeEventListener("popstate", handleNavigation);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+  return null;
+};
+var ScrollToTop_default = ScrollToTop;
+
+// src/components/Accordion/Accordion.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Accordion = ({ icon, items, containerClassName, className, onIconClick }) => {
+  const [openIndexes, setOpenIndexes] = (0, import_react3.useState)([]);
+  const toggleIndex = (idx) => {
+    setOpenIndexes((prev) => prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `space-y-2 ${containerClassName || ""}`, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        className: "w-full flex justify-between items-center cursor-pointer py-3 text-left font-medium focus:outline-none",
+        onClick: () => toggleIndex(idx),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.question }),
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onIconClick && onIconClick(idx, item);
+              },
+              className: "ml-2 flex items-center",
+              style: {
+                cursor: onIconClick ? "pointer" : "default",
+                transform: openIndexes.includes(idx) ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s"
+              },
+              children: icon
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: openIndexes.includes(idx) ? "\u2212" : "+" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `grid transition-all duration-300 ease-in-out ${openIndexes.includes(idx) ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pb-3", children: item.answer }) })
+      }
+    )
+  ] }, idx)) });
+};
+var Accordion_default = Accordion;
+
+// src/components/Rating/Rating.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Rating = ({ rating, total, icon }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-1", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "img",
+    {
+      src: icon,
+      alt: "rating icon",
+      className: `w-4 h-4 ${i < rating ? "" : "opacity-30"}`
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: i < rating ? "currentColor" : "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      className: `w-4 h-4 ${i < rating ? "text-yellow-400" : "text-gray-300"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.6c.969 0 1.371 1.24.588 1.81l-5.347 3.89a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.347-3.89a1 1 0 00-1.176 0l-5.347 3.89c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118l-5.347-3.89c-.783-.57-.38-1.81.588-1.81h6.6a1 1 0 00.95-.69l2.036-6.29z"
+        }
+      )
+    }
+  ) }, i)) });
+};
+var Rating_default = Rating;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   Input,
   Modal,
+  Rating,
+  ScrollToTop,
   Skeleton
 });

package/dist/index.mjs

@@ -107,10 +107,12 @@ var Input = ({
   errorMessage,
   width = "100%",
   height = "40px",
-  color = "#6B2CE9",
+  borderColor = "#6B2CE9",
   textColor = "white",
   borderRadius = "10px",
-  backgroundColor = "#1F1F23"
+  backgroundColor = "#1F1F23",
+  eyeIcon = /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }),
+  eyeClosedIcon = /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState(null);
@@ -187,7 +189,7 @@ var Input = ({
               width: "100%"
             },
             className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-12 placeholder:opacity-30 focus:outline-none transition ${className}`,
-            onFocus: (e) => !error && (e.target.style.borderColor = color),
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
             onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
           }
         ),
@@ -198,7 +200,7 @@ var Input = ({
             onClick: togglePasswordVisibility,
             className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
             "aria-label": showPassword ? "Hide password" : "Show password",
-            children: showPassword ? /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
+            children: showPassword ? eyeIcon : eyeClosedIcon
           }
         )
       ] }),
@@ -206,44 +208,37 @@ var Input = ({
     ] });
   } else if (type === "otp") {
     return /* @__PURE__ */ jsxs2("div", { style: { width }, children: [
-      /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: "relative flex items-center gap-4",
-          style: { width: "100%" },
-          children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "number",
-                value,
-                onChange,
-                placeholder,
-                style: {
-                  backgroundColor,
-                  color: textColor,
-                  borderRadius,
-                  height,
-                  width: "100%"
-                },
-                className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
-                onFocus: (e) => !error && (e.target.style.borderColor = color),
-                onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              "button",
-              {
-                type: "button",
-                onClick: onOtpClick,
-                className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
-                "aria-label": "Resend code",
-                children: "Resend code"
-              }
-            )
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center gap-4", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "number",
+            value,
+            onChange,
+            placeholder,
+            style: {
+              backgroundColor,
+              color: textColor,
+              borderRadius,
+              height,
+              width: "100%"
+            },
+            className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
+            onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: onOtpClick,
+            className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
+            "aria-label": "Resend code",
+            children: "Resend code"
+          }
+        )
+      ] }),
       error && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
   } else {
@@ -263,7 +258,7 @@ var Input = ({
             width: "100%"
           },
           className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 placeholder:opacity-30 focus:outline-none transition ${className}`,
-          onFocus: (e) => !error && (e.target.style.borderColor = color),
+          onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
           onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
         }
       ),
@@ -317,8 +312,118 @@ var Skeleton = ({
   );
 };
 var Skeleton_default = Skeleton;
+
+// src/components/ScrollToTop/ScrollToTop.tsx
+import { useEffect as useEffect2 } from "react";
+var ScrollToTop = () => {
+  useEffect2(() => {
+    window.scrollTo(0, 0);
+    const handleNavigation = () => {
+      window.scrollTo(0, 0);
+    };
+    window.addEventListener("popstate", handleNavigation);
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      handleNavigation();
+    };
+    history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      handleNavigation();
+    };
+    return () => {
+      window.removeEventListener("popstate", handleNavigation);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+  return null;
+};
+var ScrollToTop_default = ScrollToTop;
+
+// src/components/Accordion/Accordion.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Accordion = ({ icon, items, containerClassName, className, onIconClick }) => {
+  const [openIndexes, setOpenIndexes] = useState2([]);
+  const toggleIndex = (idx) => {
+    setOpenIndexes((prev) => prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx]);
+  };
+  return /* @__PURE__ */ jsx4("div", { className: `space-y-2 ${containerClassName || ""}`, children: items.map((item, idx) => /* @__PURE__ */ jsxs3("div", { className: `${className || ""}`, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: "w-full flex justify-between items-center cursor-pointer py-3 text-left font-medium focus:outline-none",
+        onClick: () => toggleIndex(idx),
+        children: [
+          /* @__PURE__ */ jsx4("span", { children: item.question }),
+          icon ? /* @__PURE__ */ jsx4(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onIconClick && onIconClick(idx, item);
+              },
+              className: "ml-2 flex items-center",
+              style: {
+                cursor: onIconClick ? "pointer" : "default",
+                transform: openIndexes.includes(idx) ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s"
+              },
+              children: icon
+            }
+          ) : /* @__PURE__ */ jsx4("span", { children: openIndexes.includes(idx) ? "\u2212" : "+" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `grid transition-all duration-300 ease-in-out ${openIndexes.includes(idx) ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`,
+        children: /* @__PURE__ */ jsx4("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx4("div", { className: "pb-3", children: item.answer }) })
+      }
+    )
+  ] }, idx)) });
+};
+var Accordion_default = Accordion;
+
+// src/components/Rating/Rating.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Rating = ({ rating, total, icon }) => {
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-1", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx5("div", { children: icon ? /* @__PURE__ */ jsx5(
+    "img",
+    {
+      src: icon,
+      alt: "rating icon",
+      className: `w-4 h-4 ${i < rating ? "" : "opacity-30"}`
+    }
+  ) : /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: i < rating ? "currentColor" : "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      className: `w-4 h-4 ${i < rating ? "text-yellow-400" : "text-gray-300"}`,
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.6c.969 0 1.371 1.24.588 1.81l-5.347 3.89a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.347-3.89a1 1 0 00-1.176 0l-5.347 3.89c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118l-5.347-3.89c-.783-.57-.38-1.81.588-1.81h6.6a1 1 0 00.95-.69l2.036-6.29z"
+        }
+      )
+    }
+  ) }, i)) });
+};
+var Rating_default = Rating;
 export {
+  Accordion_default as Accordion,
   Input_default as Input,
   Modal_default as Modal,
+  Rating_default as Rating,
+  ScrollToTop_default as ScrollToTop,
   Skeleton_default as Skeleton
 };

package/dist/styles.css

@@ -8,6 +8,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
+    --color-yellow-400: oklch(0.852 0.199 91.936);
+    --color-gray-300: oklch(0.872 0.01 258.338);
     --color-gray-400: oklch(0.707 0.022 261.325);
     --color-black: #000;
     --color-white: #fff;
@@ -22,6 +24,7 @@
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --radius-lg: 0.5rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -222,12 +225,21 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -242,24 +254,49 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
   .items-center {
     align-items: center;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -326,6 +363,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -335,6 +375,12 @@
   .pr-28 {
     padding-right: calc(var(--spacing) * 28);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .text-left {
+    text-align: left;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -358,22 +404,50 @@
   .text-\[\#A77BFF\] {
     color: #A77BFF;
   }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-30 {
+    opacity: 30%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .placeholder\:text-sm {
     &::-moz-placeholder {
       font-size: var(--text-sm);
@@ -426,6 +500,31 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -477,6 +576,14 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -488,6 +595,12 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
@@ -499,6 +612,8 @@
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-font-weight: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunjiadeyemi/ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A collection of reusable UI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",