@tunjiadeyemi/ui 1.3.0 → 1.4.1

package/README.md

@@ -2,6 +2,12 @@
 
 A collection of reusable React UI components built with TypeScript.
 
+## Storybook
+
+Explore all components in Storybook:
+
+https://69a67d791bd8666f2b32dd2d-ujpylcgcxt.chromatic.com/
+
 ## Installation
 
 ```bash
@@ -14,36 +20,47 @@ or
 yarn add @tunjiadeyemi/ui framer-motion lucide-react
 ```
 
-## Usage
+## Quick Start
 
-First, import the styles in your app's entry point (e.g., `App.tsx` or `main.tsx`):
+Import styles once (for example in `main.tsx` or `App.tsx`):
 
 ```tsx
-import "@tunjiadeyemi/ui/styles.css";
+import '@tunjiadeyemi/ui/styles.css';
 ```
 
-Then use the components:
+Use the components:
 
 ```tsx
-import { Modal, Input, Skeleton } from "@tunjiadeyemi/ui";
-import { useState } from "react";
+import { useState } from 'react';
+import { Modal, Input, Skeleton, Accordion, Rating, ScrollToTop } from '@tunjiadeyemi/ui';
 
 function App() {
   const [showModal, setShowModal] = useState(false);
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
 
   return (
     <>
+      <ScrollToTop />
+
       <Input
         type="email"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         placeholder="Enter your email"
-        validate={true}
+        validate
       />
 
-      <button onClick={() => setShowModal(true)}>Open Modal</button>
+      <Accordion
+        items={[
+          { question: 'What is this?', answer: 'A reusable UI library.' },
+          { question: 'Does it support TypeScript?', answer: 'Yes.' }
+        ]}
+      />
+
+      <Rating rating={4} total={5} />
+      <Skeleton width="200px" height="20px" animation="pulse" />
 
+      <button onClick={() => setShowModal(true)}>Open Modal</button>
       <Modal
         showModal={showModal}
         onClose={() => setShowModal(false)}
@@ -53,66 +70,62 @@ function App() {
         <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
         <p>Modal content goes here</p>
       </Modal>
-
-      <Skeleton width="200px" height="20px" animation="pulse" />
     </>
   );
 }
 ```
 
-## Available Components
+## Components
 
 ### Modal
 
-A flexible modal component with multiple reveal animations and optional drag-to-dismiss.
-
-**Props:**
+Flexible modal component with multiple reveal animations.
 
-- `showModal` (boolean): Controls modal visibility
-- `onClose` (function): Callback when modal is closed
-- `revealMode` ('fade' | 'slide-right' | 'slide-bottom'): Animation style - Default: `'fade'`
-- `isDrag` (boolean): Enable drag to dismiss (for slide-bottom mode) - Default: `false`
-- `className` (string): Custom classes for the modal content
-- `children` (ReactNode): Modal content
+**Props**
 
-**Example:**
+- `children: React.ReactNode`
+- `className?: string`
+- `revealMode?: 'fade' | 'slide-right' | 'slide-bottom'` (default: `'fade'`)
+- `showModal?: boolean` (default: `true`)
+- `onClose?: () => void`
+- `isDrag?: boolean` (default: `false`)
 
 ```tsx
 <Modal
-  showModal={true}
-  onClose={() => console.log("Modal closed")}
+  showModal
+  onClose={() => console.log('Modal closed')}
   revealMode="slide-bottom"
-  isDrag={true}
+  isDrag
   className="bg-white p-6 rounded-lg"
 >
-  <h2>Your Content</h2>
+  <h2>Your content</h2>
 </Modal>
 ```
 
 ### Input
 
-A customizable input component with built-in validation, password visibility toggle, and OTP support.
-
-**Props:**
-
-- `type` ('text' | 'email' | 'password' | 'otp' | 'number'): Input type - Default: `'text'`
-- `value` (string): Input value
-- `onChange` (function): Change handler
-- `placeholder` (string): Placeholder text
-- `validate` (boolean): Enable validation - Default: `false`
-- `minLength` (number): Minimum character length
-- `maxLength` (number): Maximum character length
-- `errorMessage` (string): Custom error message
-- `onOtpClick` (function): Callback for OTP button click (when type is 'otp')
-- `className` (string): Additional CSS classes
-- `width` (string): Input width - Default: `'100%'`
-- `height` (string): Input height - Default: `'40px'`
-- `color` (string): Accent color - Default: `'#6B2CE9'`
-- `textColor` (string): Text color - Default: `'white'`
-- `backgroundColor` (string): Background color - Default: `'#1F1F23'`
-- `borderRadius` (string): Border radius - Default: `'10px'`
-
-**Example:**
+Customizable input with validation, password visibility toggle, and OTP resend support.
+
+**Props**
+
+- `type?: 'password' | 'otp' | 'text' | 'email' | 'number'`
+- `value?: string`
+- `onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void`
+- `onOtpClick?: () => void`
+- `placeholder?: string`
+- `validate?: boolean` (default: `false`)
+- `minLength?: number`
+- `maxLength?: number`
+- `errorMessage?: string`
+- `className?: string`
+- `backgroundColor?: string` (default: `'#1F1F23'`)
+- `borderColor?: string` (default: `'#6B2CE9'`)
+- `textColor?: string` (default: `'white'`)
+- `borderRadius?: string` (default: `'10px'`)
+- `height?: string` (default: `'40px'`)
+- `width?: string` (default: `'100%'`)
+- `eyeIcon?: React.ReactNode`
+- `eyeClosedIcon?: React.ReactNode`
 
 ```tsx
 <Input
@@ -120,45 +133,74 @@ A customizable input component with built-in validation, password visibility tog
   value={email}
   onChange={(e) => setEmail(e.target.value)}
   placeholder="Enter your email"
-  validate={true}
+  validate
   errorMessage="Please enter a valid email"
 />
+```
 
-<Input
-  type="password"
-  value={password}
-  onChange={(e) => setPassword(e.target.value)}
-  minLength={8}
-  validate={true}
-/>
+### Skeleton
 
-<Input
-  type="otp"
-  value={otp}
-  onChange={(e) => setOtp(e.target.value)}
-  onOtpClick={() => console.log('Send OTP')}
-  placeholder="Enter OTP"
+Loading placeholder component with shape variants and animation options.
+
+**Props**
+
+- `className?: string`
+- `variant?: 'text' | 'circular' | 'rectangular'` (default: `'rectangular'`)
+- `width?: string | number` (default: `'100%'`)
+- `height?: string | number` (default: `'100%'`)
+- `animation?: 'pulse' | 'wave' | 'none'` (default: `'pulse'`)
+
+```tsx
+<Skeleton variant="text" width="200px" height="20px" />
+<Skeleton variant="circular" width={50} height={50} />
+<Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />
+```
+
+### Accordion
+
+Simple accordion that supports multiple open items.
+
+**Types & Props**
+
+- `AccordionItem`: `{ question: string; answer: React.ReactNode; icon?: React.ReactNode }`
+- `icon?: React.ReactNode`
+- `items: AccordionItem[]`
+- `className?: string`
+- `containerClassName?: string`
+- `onIconClick?: (idx: number, item: AccordionItem) => void`
+
+```tsx
+<Accordion
+  items={[
+    { question: 'What is this?', answer: 'An accordion item.' },
+    { question: 'Can multiple items be open?', answer: 'Yes.' }
+  ]}
 />
 ```
 
-### Skeleton
+### Rating
+
+Rating display with default star icon or custom icon image.
+
+**Props**
 
-A loading placeholder component with multiple variants and animations.
+- `rating: number`
+- `total: number`
+- `icon?: string`
+- `showOnlyRated?: boolean` (default: `false`)
 
-**Props:**
+```tsx
+<Rating rating={3} total={5} />
+<Rating rating={4} total={5} icon="/icons/star.svg" />
+<Rating rating={4} total={5} showOnlyRated />
+```
 
-- `variant` ('text' | 'circular' | 'rectangular'): Skeleton shape - Default: `'rectangular'`
-- `width` (string | number): Width of skeleton - Default: `'100%'`
-- `height` (string | number): Height of skeleton - Default: `'100%'`
-- `animation` ('pulse' | 'wave' | 'none'): Animation type - Default: `'pulse'`
-- `className` (string): Additional CSS classes
+### ScrollToTop
 
-**Example:**
+Utility component that scrolls to top on mount and browser navigation events.
 
 ```tsx
-<Skeleton variant="text" width="200px" height="20px" />
-<Skeleton variant="circular" width="50px" height="50px" />
-<Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />
+<ScrollToTop />
 ```
 
 ## Development
@@ -167,13 +209,9 @@ A loading placeholder component with multiple variants and animations.
 # Install dependencies
 npm install
 
-# Build the package
+# Build package (JS + types + styles)
 npm run build
 
-# Watch mode for development
+# Watch mode
 npm run dev
 ```
-
-## License
-
-MIT © Tunji Adeyemi

package/dist/index.d.mts

@@ -24,7 +24,7 @@ interface TextInputProps {
     minLength?: number;
     maxLength?: number;
     errorMessage?: string;
-    color?: string;
+    borderColor?: string;
     textColor?: string;
     borderRadius?: string;
     height?: string;
@@ -33,7 +33,7 @@ interface TextInputProps {
     eyeClosedIcon?: React.ReactNode;
 }
 
-declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: 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;
@@ -45,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

@@ -24,7 +24,7 @@ interface TextInputProps {
     minLength?: number;
     maxLength?: number;
     errorMessage?: string;
-    color?: string;
+    borderColor?: string;
     textColor?: string;
     borderRadius?: string;
     height?: string;
@@ -33,7 +33,7 @@ interface TextInputProps {
     eyeClosedIcon?: React.ReactNode;
 }
 
-declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: 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;
@@ -45,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,7 +138,7 @@ var Input = ({
   errorMessage,
   width = "100%",
   height = "40px",
-  color = "#6B2CE9",
+  borderColor = "#6B2CE9",
   textColor = "white",
   borderRadius = "10px",
   backgroundColor = "#1F1F23",
@@ -217,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"
           }
         ),
@@ -252,7 +255,7 @@ var Input = ({
               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),
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
             onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
           }
         ),
@@ -286,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"
         }
       ),
@@ -340,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,7 +107,7 @@ var Input = ({
   errorMessage,
   width = "100%",
   height = "40px",
-  color = "#6B2CE9",
+  borderColor = "#6B2CE9",
   textColor = "white",
   borderRadius = "10px",
   backgroundColor = "#1F1F23",
@@ -189,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"
           }
         ),
@@ -224,7 +224,7 @@ var Input = ({
               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),
+            onFocus: (e) => !error && (e.target.style.borderColor = borderColor),
             onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
           }
         ),
@@ -258,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"
         }
       ),
@@ -312,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,20 +8,50 @@
     --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-violet-200: oklch(0.894 0.057 293.283);
+    --color-violet-500: oklch(0.606 0.25 292.717);
+    --color-violet-600: oklch(0.541 0.281 293.009);
+    --color-slate-100: oklch(0.968 0.007 247.896);
+    --color-slate-200: oklch(0.929 0.013 255.508);
+    --color-slate-300: oklch(0.869 0.022 252.894);
+    --color-slate-400: oklch(0.704 0.04 256.788);
+    --color-slate-600: oklch(0.446 0.043 257.281);
+    --color-slate-700: oklch(0.372 0.044 257.287);
+    --color-slate-800: oklch(0.279 0.041 260.031);
+    --color-slate-900: oklch(0.208 0.042 265.755);
+    --color-slate-950: oklch(0.129 0.042 264.695);
+    --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;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-2xl: 42rem;
+    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --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);
@@ -195,6 +225,9 @@
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -216,18 +249,54 @@
   .z-50 {
     z-index: 50;
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .min-h-\[50vh\] {
+    min-height: 50vh;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -235,6 +304,12 @@
   .w-full {
     width: 100%;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -242,24 +317,62 @@
     --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);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .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)));
+    }
+  }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -272,6 +385,12 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -279,9 +398,24 @@
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .border-slate-200 {
+    border-color: var(--color-slate-200);
+  }
+  .border-slate-300 {
+    border-color: var(--color-slate-300);
+  }
+  .border-slate-800 {
+    border-color: var(--color-slate-800);
+  }
   .border-transparent {
     border-color: transparent;
   }
+  .border-violet-500\/40 {
+    border-color: color-mix(in srgb, oklch(0.606 0.25 292.717) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-violet-500) 40%, transparent);
+    }
+  }
   .bg-\[\#27272E\] {
     background-color: #27272E;
   }
@@ -291,6 +425,24 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-slate-900\/80 {
+    background-color: color-mix(in srgb, oklch(0.208 0.042 265.755) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
+    }
+  }
+  .bg-slate-950 {
+    background-color: var(--color-slate-950);
+  }
+  .bg-violet-500\/10 {
+    background-color: color-mix(in srgb, oklch(0.606 0.25 292.717) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
+    }
+  }
+  .bg-violet-600 {
+    background-color: var(--color-violet-600);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -314,6 +466,12 @@
   .bg-\[length\:200\%_100\%\] {
     background-size: 200% 100%;
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -323,9 +481,24 @@
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -335,10 +508,24 @@
   .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));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -355,25 +542,89 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .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-slate-100 {
+    color: var(--color-slate-100);
+  }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
+  .text-slate-400 {
+    color: var(--color-slate-400);
+  }
+  .text-slate-600 {
+    color: var(--color-slate-600);
+  }
+  .text-slate-700 {
+    color: var(--color-slate-700);
+  }
+  .text-slate-900 {
+    color: var(--color-slate-900);
+  }
+  .text-violet-200 {
+    color: var(--color-violet-200);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-30 {
+    opacity: 30%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .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);
@@ -392,6 +643,20 @@
       opacity: 30%;
     }
   }
+  .hover\:bg-slate-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-slate-100);
+      }
+    }
+  }
+  .hover\:bg-violet-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-violet-500);
+      }
+    }
+  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -405,6 +670,33 @@
       outline-style: none;
     }
   }
+  .sm\:p-6 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-base {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
   .lg\:hidden {
     @media (width >= 64rem) {
       display: none;
@@ -426,6 +718,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 +794,83 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -488,6 +882,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 +899,23 @@
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunjiadeyemi/ui",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "A collection of reusable UI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,6 +22,7 @@
     "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion --external lucide-react && npm run build:css",
     "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external framer-motion --external lucide-react",
+    "generate:stories": "node ./scripts/generate-stories.mjs",
     "prepublishOnly": "npm run build",
     "lint": "eslint src --ext .ts,.tsx"
   },
@@ -56,11 +57,13 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.16",
-    "lucide-react": "^0.562.0",
     "postcss": "^8.4.32",
     "postcss-cli": "^11.0.1",
     "tailwindcss": "4.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
+  },
+  "overrides": {
+    "rollup": ">=4.59.0"
   }
 }