gwan-design-system 0.1.5 → 0.1.7

package/README.md

@@ -1,13 +1,9 @@
-# 🌈 Gwan Design System – The Ultimate UI Library for Next.js ⚡
+# ⚡ Gwan Design System – A Component Library for Next.js ⚡
 
 ![npm](https://img.shields.io/npm/v/gwan-design-system.svg)
-![License](https://img.shields.io/github/license/gwanfonseka/gwan-design-system)
-![CI](https://img.shields.io/github/actions/workflow/status/gwanfonseka/gwan-design-system/publish.yml?branch=main)
 
 > 🧪 Reusable, composable, and beautifully crafted UI components built with 💚 Next.js — supercharge your apps in minutes!
 
----
-
 ## 📦 What is Gwan Design System?
 
 **Gwan Design System** is a plug-and-play React component library tailored specifically for **Next.js** projects. Whether you're building a SaaS dashboard, marketing site, or internal tool — we've got you covered.
@@ -22,32 +18,74 @@
 
 ### 📥 Installation
 
-Install via npm: ```npm install gwan-design-system```
+Install via npm: `npm install gwan-design-system`
 
-or with Yarn: ```yarn add gwan-design-system```
+or with Yarn: `yarn add gwan-design-system`
 
 ### 🧰 Usage
 
+Include this in your `tailwind.config.ts`
+
+```
+content: [
+  "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  "./src/templates/**/*.{js,ts,jsx,tsx,mdx}",
+  join(
+    dirname(require.resolve("gwan-design-system")),
+    "**/*.{js,ts,jsx,tsx,mdx}"
+  ),
+],
+```
+
+Define your custom theme in your `tailwind.config.ts`
+
+```
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        50: "#F2F3EE",
+        100: "#E1E3DA",
+        200: "#D0D3C6",
+        300: "#BEC3B2",
+        400: "#ADB39E",
+        500: "#9EA593",
+        600: "#8C9382",
+        700: "#787D6E",
+        800: "#64675A",
+        900: "#505146",
+      },
+      neutral: {...},
+      green: {...},
+      red: {...},
+      blue: {...},
+      yellow: {...}
+    }
+  }
+}
+```
+
 Import any component and use it right away!
 
 ```
 "use client";
 
-import { Button, Card, Modal } from "gwan-design-system";
+import { Button, BUTTON_VARIANTS } from "gwan-design-system";
 
 export default function HomePage() {
   return (
     <main className="p-10">
       <h1 className="text-2xl font-bold mb-6">👋 Welcome to Gwan UI</h1>
-      <Card>
-        <h2 className="text-xl">Reusable UI</h2>
-        <p>Start using ready-made components!</p>
-        <Button onClick={() => alert("🎉 Clicked!")}>Click Me</Button>
-      </Card>
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          label="Primary"
+          onClick={() => handleClick()}
+        />
     </main>
   );
 }
 ```
+
 ### 🧱 Components
 
 - 🔘 Buttons
@@ -55,17 +93,17 @@ export default function HomePage() {
 - 🧾 Tables
 - ✅ Checkboxes
 - ☑️ Radio Buttons
-- 📥 File Uploaders
+- 📥 File Uploader
 - 📦 Cards
 - 🎛 Dropdowns
 - 📊 Pagination
 - 📎 Tags
 - 🧠 States (Empty, Error, Loading, etc.)
-- 🔔 Snackbars
+- 🔔 Snackbar
 - ✨ Tooltips
 - 🧭 Navigation Bars
 - ...and more!
-> Want to see all available components? Visit 👉 [gwan-design-system](https://gwan-design-system.vercel.app) official website.
+  > Want to see all available components? Visit 👉 [gwan-design-system](https://gwan-design-system.vercel.app) official website.
 
 ### 🛠 Customization
 
@@ -85,7 +123,7 @@ However, to keep the project stable and secure:
 👀 Pull requests require review and approval before merging
 
 Want to contribute?
-Fork this repository
+Fork this 👉 [repository](https://github.com/gwanfonseka/gwan-design-system)
 
 - Create a feature branch: git checkout -b feature/my-feature
 - Commit your changes and push: git push origin feature/my-feature

package/dist/index.d.mts

@@ -11,6 +11,7 @@ interface IAvatar {
     email: string;
     image?: string;
     variant: string;
+    className?: string;
 }
 declare const Avatar: FC<IAvatar>;
 
@@ -22,6 +23,7 @@ interface IBanner {
     contentPlacement?: "left" | "right";
     backgroundImage?: string;
     backgroundColor?: string;
+    className?: string;
 }
 declare const Banner: FC<IBanner>;
 
@@ -37,12 +39,14 @@ interface IButton {
     icon?: ReactNode;
     type?: "button" | "submit";
     disabled?: boolean;
+    className?: string;
 }
 declare const Button: FC<IButton>;
 
 interface ICarousel {
     slides: IBanner[];
     interval?: number;
+    className?: string;
 }
 declare const Carousel: FC<ICarousel>;
 
@@ -50,12 +54,14 @@ interface ICheckbox {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    className?: string;
 }
 declare const Checkbox: FC<ICheckbox>;
 
 interface IChip {
     label: string;
     onClear: () => void;
+    className?: string;
 }
 declare const Chip: FC<IChip>;
 
@@ -71,6 +77,7 @@ interface ITooltip {
     isVisible: boolean;
     toolTipWidth?: string;
     toolTipClass?: string;
+    className?: string;
 }
 declare const Tooltip: FC<ITooltip>;
 
@@ -78,6 +85,7 @@ interface IEllipsis {
     label: string;
     tooltipPosition?: TOOLTIP_POSITION;
     tooltipWidth?: string;
+    className?: string;
 }
 declare const Ellipsis: FC<IEllipsis>;
 
@@ -87,6 +95,7 @@ interface IFileUploader {
     subTitle2?: string;
     handleAttachment: (file: File) => void;
     accept?: string;
+    className?: string;
 }
 declare const FileUploader: FC<IFileUploader>;
 
@@ -101,6 +110,7 @@ interface IFilterCategory {
 }
 interface IFilter {
     children: (closeDropdown: () => void) => React.ReactNode;
+    className?: string;
 }
 declare const FilterDropdown: FC<IFilter>;
 
@@ -112,6 +122,7 @@ interface IInput {
     placeholder?: string;
     inputClassName?: string;
     required?: boolean;
+    className?: string;
 }
 declare const Input: FC<IInput>;
 
@@ -126,6 +137,7 @@ interface IModal {
     children: React.ReactNode;
     onClear: () => void;
     size?: MODAL_SIZE;
+    className?: string;
 }
 declare const Modal: FC<IModal>;
 
@@ -148,6 +160,7 @@ interface INavBar {
     menuHeightClass?: string;
     isCollapsed?: boolean;
     menuBackgroundColor?: string;
+    className?: string;
 }
 declare const NavBar: FC<INavBar>;
 
@@ -163,6 +176,7 @@ interface ISelectDropdown {
     value: string;
     onChange: (option: string) => void;
     inputClassName?: string;
+    className?: string;
 }
 declare const SelectDropdown: FC<ISelectDropdown>;
 
@@ -174,6 +188,7 @@ interface IPaging {
 interface IPagination extends IPaging {
     options: ISelectDropdownOption[];
     onChange: (paging: IPaging) => void;
+    className?: string;
 }
 declare const Pagination: FC<IPagination>;
 
@@ -182,6 +197,7 @@ interface IRadioButton {
     value: string;
     selectedValue?: string;
     onChange?: (value: string) => void;
+    className?: string;
 }
 declare const RadioButton: FC<IRadioButton>;
 
@@ -196,6 +212,7 @@ interface ISnackBar {
     type?: SNACK_BAR_TYPE;
     message: string;
     icon?: React.ReactNode;
+    className?: string;
 }
 declare const Snackbar: FC<ISnackBar>;
 
@@ -210,6 +227,7 @@ interface IStateBase {
     subTitle: string;
     imageWidth?: number;
     imageHeight?: number;
+    className?: string;
 }
 type IState = ({
     type: STATE_TYPE;
@@ -228,6 +246,7 @@ interface ITableColumn {
 interface ITable {
     columns: ITableColumn[];
     data: any[];
+    className?: string;
 }
 declare const Table: FC<ITable>;
 
@@ -241,6 +260,7 @@ declare enum TAG_TYPE {
 interface ITag {
     type: TAG_TYPE;
     label: string;
+    className?: string;
 }
 declare const Tag: FC<ITag>;
 
@@ -260,6 +280,7 @@ interface ILog {
 }
 interface ITimeLine {
     logs: ILog[];
+    className?: string;
 }
 declare const TimeLine: FC<ITimeLine>;
 

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface IAvatar {
     email: string;
     image?: string;
     variant: string;
+    className?: string;
 }
 declare const Avatar: FC<IAvatar>;
 
@@ -22,6 +23,7 @@ interface IBanner {
     contentPlacement?: "left" | "right";
     backgroundImage?: string;
     backgroundColor?: string;
+    className?: string;
 }
 declare const Banner: FC<IBanner>;
 
@@ -37,12 +39,14 @@ interface IButton {
     icon?: ReactNode;
     type?: "button" | "submit";
     disabled?: boolean;
+    className?: string;
 }
 declare const Button: FC<IButton>;
 
 interface ICarousel {
     slides: IBanner[];
     interval?: number;
+    className?: string;
 }
 declare const Carousel: FC<ICarousel>;
 
@@ -50,12 +54,14 @@ interface ICheckbox {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    className?: string;
 }
 declare const Checkbox: FC<ICheckbox>;
 
 interface IChip {
     label: string;
     onClear: () => void;
+    className?: string;
 }
 declare const Chip: FC<IChip>;
 
@@ -71,6 +77,7 @@ interface ITooltip {
     isVisible: boolean;
     toolTipWidth?: string;
     toolTipClass?: string;
+    className?: string;
 }
 declare const Tooltip: FC<ITooltip>;
 
@@ -78,6 +85,7 @@ interface IEllipsis {
     label: string;
     tooltipPosition?: TOOLTIP_POSITION;
     tooltipWidth?: string;
+    className?: string;
 }
 declare const Ellipsis: FC<IEllipsis>;
 
@@ -87,6 +95,7 @@ interface IFileUploader {
     subTitle2?: string;
     handleAttachment: (file: File) => void;
     accept?: string;
+    className?: string;
 }
 declare const FileUploader: FC<IFileUploader>;
 
@@ -101,6 +110,7 @@ interface IFilterCategory {
 }
 interface IFilter {
     children: (closeDropdown: () => void) => React.ReactNode;
+    className?: string;
 }
 declare const FilterDropdown: FC<IFilter>;
 
@@ -112,6 +122,7 @@ interface IInput {
     placeholder?: string;
     inputClassName?: string;
     required?: boolean;
+    className?: string;
 }
 declare const Input: FC<IInput>;
 
@@ -126,6 +137,7 @@ interface IModal {
     children: React.ReactNode;
     onClear: () => void;
     size?: MODAL_SIZE;
+    className?: string;
 }
 declare const Modal: FC<IModal>;
 
@@ -148,6 +160,7 @@ interface INavBar {
     menuHeightClass?: string;
     isCollapsed?: boolean;
     menuBackgroundColor?: string;
+    className?: string;
 }
 declare const NavBar: FC<INavBar>;
 
@@ -163,6 +176,7 @@ interface ISelectDropdown {
     value: string;
     onChange: (option: string) => void;
     inputClassName?: string;
+    className?: string;
 }
 declare const SelectDropdown: FC<ISelectDropdown>;
 
@@ -174,6 +188,7 @@ interface IPaging {
 interface IPagination extends IPaging {
     options: ISelectDropdownOption[];
     onChange: (paging: IPaging) => void;
+    className?: string;
 }
 declare const Pagination: FC<IPagination>;
 
@@ -182,6 +197,7 @@ interface IRadioButton {
     value: string;
     selectedValue?: string;
     onChange?: (value: string) => void;
+    className?: string;
 }
 declare const RadioButton: FC<IRadioButton>;
 
@@ -196,6 +212,7 @@ interface ISnackBar {
     type?: SNACK_BAR_TYPE;
     message: string;
     icon?: React.ReactNode;
+    className?: string;
 }
 declare const Snackbar: FC<ISnackBar>;
 
@@ -210,6 +227,7 @@ interface IStateBase {
     subTitle: string;
     imageWidth?: number;
     imageHeight?: number;
+    className?: string;
 }
 type IState = ({
     type: STATE_TYPE;
@@ -228,6 +246,7 @@ interface ITableColumn {
 interface ITable {
     columns: ITableColumn[];
     data: any[];
+    className?: string;
 }
 declare const Table: FC<ITable>;
 
@@ -241,6 +260,7 @@ declare enum TAG_TYPE {
 interface ITag {
     type: TAG_TYPE;
     label: string;
+    className?: string;
 }
 declare const Tag: FC<ITag>;
 
@@ -260,6 +280,7 @@ interface ILog {
 }
 interface ITimeLine {
     logs: ILog[];
+    className?: string;
 }
 declare const TimeLine: FC<ITimeLine>;