gwan-design-system 0.1.6 → 0.1.8

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>;
 
@@ -275,6 +296,8 @@ declare const Covers: () => ReactNode;
 
 declare const Colors: () => ReactNode;
 
+declare const SignIn: () => ReactNode;
+
 declare const SignOut: () => ReactNode;
 
 declare const Filter: () => ReactNode;
@@ -289,6 +312,8 @@ declare const ChevLeft: () => ReactNode;
 
 declare const ChevRight: () => ReactNode;
 
+declare const ChevUp: () => ReactNode;
+
 declare const Check: () => ReactNode;
 
 declare const Circle: () => ReactNode;
@@ -297,8 +322,10 @@ declare const Upload: () => ReactNode;
 
 declare const ArrowLeft: () => ReactNode;
 
+declare const ArrowRight: () => ReactNode;
+
 declare namespace index {
-  export { ArrowLeft as ArrowLeftSVG, Check as CheckSVG, ChevDown as ChevDownSVG, ChevLeft as ChevLeftSVG, ChevRight as ChevRightSVG, Circle as CircleSVG, Colors as ColorsSVG, Covers as CoversSVG, Cross as CrossSVG, Dashboard as DashboardSVG, Filter as FilterSVG, OrderInfo as OrderInfoSVG, Orders as OrdersSVG, Products as ProductsSVG, SignOut as SignOutSVG, Templates as TemplatesSVG, Upload as UploadSVG };
+  export { ArrowLeft as ArrowLeftSVG, ArrowRight as ArrowRightSVG, Check as CheckSVG, ChevDown as ChevDownSVG, ChevLeft as ChevLeftSVG, ChevRight as ChevRightSVG, ChevUp as ChevUpSVG, Circle as CircleSVG, Colors as ColorsSVG, Covers as CoversSVG, Cross as CrossSVG, Dashboard as DashboardSVG, Filter as FilterSVG, OrderInfo as OrderInfoSVG, Orders as OrdersSVG, Products as ProductsSVG, SignIn as SignInSVG, SignOut as SignOutSVG, Templates as TemplatesSVG, Upload as UploadSVG };
 }
 
 export { AVATAR_VARIANT, Avatar, BUTTON_VARIANTS, Banner, Button, Carousel, Checkbox, Chip, Ellipsis, FileUploader, FilterDropdown, type IAvatar, type IBanner, type IButton, type ICarousel, type ICheckbox, type IChip, type IEllipsis, type IFileUploader, type IFilter, type IFilterCategory, type IFilterOption, type IInput, type ILog, type IMenuItem, type IModal, type INavBar, type IPagination, type IPaging, type IRadioButton, type ISelectDropdown, type ISelectDropdownOption, type ISnackBar, type IState, type IStateBase, type ITable, type ITableColumn, type ITag, type ITimeLine, type ITooltip, index as Icons, Input, MODAL_SIZE, Modal, NavBar, Pagination, RadioButton, SNACK_BAR_TYPE, STATE_TYPE, SelectDropdown, Snackbar, State as States, TAG_TYPE, TOOLTIP_POSITION, Table, Tag, TimeLine, Tooltip };

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>;
 
@@ -275,6 +296,8 @@ declare const Covers: () => ReactNode;
 
 declare const Colors: () => ReactNode;
 
+declare const SignIn: () => ReactNode;
+
 declare const SignOut: () => ReactNode;
 
 declare const Filter: () => ReactNode;
@@ -289,6 +312,8 @@ declare const ChevLeft: () => ReactNode;
 
 declare const ChevRight: () => ReactNode;
 
+declare const ChevUp: () => ReactNode;
+
 declare const Check: () => ReactNode;
 
 declare const Circle: () => ReactNode;
@@ -297,8 +322,10 @@ declare const Upload: () => ReactNode;
 
 declare const ArrowLeft: () => ReactNode;
 
+declare const ArrowRight: () => ReactNode;
+
 declare namespace index {
-  export { ArrowLeft as ArrowLeftSVG, Check as CheckSVG, ChevDown as ChevDownSVG, ChevLeft as ChevLeftSVG, ChevRight as ChevRightSVG, Circle as CircleSVG, Colors as ColorsSVG, Covers as CoversSVG, Cross as CrossSVG, Dashboard as DashboardSVG, Filter as FilterSVG, OrderInfo as OrderInfoSVG, Orders as OrdersSVG, Products as ProductsSVG, SignOut as SignOutSVG, Templates as TemplatesSVG, Upload as UploadSVG };
+  export { ArrowLeft as ArrowLeftSVG, ArrowRight as ArrowRightSVG, Check as CheckSVG, ChevDown as ChevDownSVG, ChevLeft as ChevLeftSVG, ChevRight as ChevRightSVG, ChevUp as ChevUpSVG, Circle as CircleSVG, Colors as ColorsSVG, Covers as CoversSVG, Cross as CrossSVG, Dashboard as DashboardSVG, Filter as FilterSVG, OrderInfo as OrderInfoSVG, Orders as OrdersSVG, Products as ProductsSVG, SignIn as SignInSVG, SignOut as SignOutSVG, Templates as TemplatesSVG, Upload as UploadSVG };
 }
 
 export { AVATAR_VARIANT, Avatar, BUTTON_VARIANTS, Banner, Button, Carousel, Checkbox, Chip, Ellipsis, FileUploader, FilterDropdown, type IAvatar, type IBanner, type IButton, type ICarousel, type ICheckbox, type IChip, type IEllipsis, type IFileUploader, type IFilter, type IFilterCategory, type IFilterOption, type IInput, type ILog, type IMenuItem, type IModal, type INavBar, type IPagination, type IPaging, type IRadioButton, type ISelectDropdown, type ISelectDropdownOption, type ISnackBar, type IState, type IStateBase, type ITable, type ITableColumn, type ITag, type ITimeLine, type ITooltip, index as Icons, Input, MODAL_SIZE, Modal, NavBar, Pagination, RadioButton, SNACK_BAR_TYPE, STATE_TYPE, SelectDropdown, Snackbar, State as States, TAG_TYPE, TOOLTIP_POSITION, Table, Tag, TimeLine, Tooltip };