Release: v1.2.0

.storybook/YourTheme.ts

@@ -6,4 +6,5 @@ export default create({
   brandTarget: "_self",
   // appBg: "#F6F4EB",
   appBorderRadius: 8,
+  fontBase: '"Plus Jakarta Sans", sans-serif',
 });

.storybook/main.ts

@@ -6,7 +6,6 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
   ],
   framework: {

.storybook/manager-head.html

@@ -0,0 +1,12 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
+  rel="stylesheet"
+/>
+
+<style>
+  body {
+    font-family: "Plus Jakarta Sans", sans-serif;
+  }
+</style>

.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
+  rel="stylesheet"
+/>
+
+<style>
+  body {
+    font-family: "Plus Jakarta Sans", sans-serif;
+  }
+</style>

lib/assets/icons/LoadingIcon.tsx

@@ -0,0 +1,40 @@
+const LoadingIcon = ({
+  color = "#8281B8",
+  className = "",
+}: {
+  size?: number;
+  color?: string;
+  className?: string;
+}) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Size=Large">
+        <path
+          id="Ellipse 15"
+          d="M45 24C46.6569 24 48.0194 22.6516 47.8128 21.0077C47.1755 15.9357 44.9301 11.1704 41.3657 7.43397C37.1072 2.96993 31.2932 0.317265 25.1306 0.026643C18.9679 -0.263979 12.9301 1.82977 8.2704 5.87324C3.61071 9.91671 0.687111 15.5993 0.106513 21.7414C-0.474085 27.8835 1.33291 34.0133 5.15239 38.8583C8.97188 43.7032 14.5105 46.8913 20.6184 47.7606C26.7263 48.6299 32.9344 47.1136 37.9539 43.5266C42.1554 40.5242 45.254 36.2641 46.8303 31.4014C47.3412 29.8253 46.2555 28.2455 44.628 27.935C43.0005 27.6245 41.4528 28.706 40.8767 30.2595C39.6335 33.6112 37.4108 36.5402 34.4654 38.645C30.7008 41.3352 26.0447 42.4724 21.4638 41.8204C16.8828 41.1685 12.7289 38.7774 9.8643 35.1437C6.99968 31.51 5.64444 26.9126 6.07988 22.3061C6.51533 17.6995 8.70803 13.4375 12.2028 10.4049C15.6976 7.37232 20.226 5.80202 24.8479 6.01998C29.4699 6.23795 33.8304 8.22745 37.0243 11.5755C39.523 14.1949 41.1575 17.4884 41.7506 21.0138C42.0255 22.6477 43.3431 24 45 24Z"
+          fill="url(#paint0_linear_550_76)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_550_76"
+          x1="48"
+          y1="29.75"
+          x2="19.25"
+          y2="6.86385e-07"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor={color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default LoadingIcon;

lib/components/alert/alert.stories.tsx

@@ -43,8 +43,8 @@ export const Primary: Story = {
   args: {
     title: "Success",
     description: "Data uploaded to the server. Fire on!",
-    status: "info",
-    variant: "subtle",
+    status: "success",
+    variant: "solid",
     isClosable: false,
   },
 };

lib/components/alert/alert.tsx

@@ -1,9 +1,14 @@
-import { CheckCircle, Info, WarningCircle, X } from "@phosphor-icons/react";
+import {
+  CloseCircle,
+  CloseSquare,
+  InfoCircle,
+  TickSquare,
+  Warning2,
+} from "iconsax-react";
 import { useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import { IAlert } from "./alert.types";
-import { Button } from "../button/button";
 
 export const Alert = (props: IAlert) => {
   const theme = useComponentStyle("Alert");
@@ -54,22 +59,27 @@ export const Alert = (props: IAlert) => {
   }, [contentClassName, status, theme, variant]);
 
   const closeClasses = useMemo(() => {
-    return twMerge(theme.close(), contentClasses);
-  }, [contentClasses, theme]);
+    return twMerge(
+      theme.close({
+        variant,
+      }),
+      contentClasses
+    );
+  }, [contentClasses, variant, theme]);
 
   const getIcon = (stt: string) => {
     if (icon) {
       return icon;
     }
     switch (stt) {
       case "success":
-        return <CheckCircle weight="fill" />;
+        return <TickSquare variant="Bold" size={20} />;
       case "warning":
-        return <WarningCircle weight="fill" />;
+        return <CloseSquare variant="Bold" size={20} />;
       case "error":
-        return <WarningCircle weight="fill" />;
+        return <Warning2 variant="Bold" size={20} />;
       default:
-        return <Info weight="fill" />;
+        return <InfoCircle variant="Bold" size={20} />;
     }
   };
 
@@ -105,16 +115,15 @@ export const Alert = (props: IAlert) => {
         <p className={theme.descriptionText()}>{description}</p>
       </div>
       {isClosable && (
-        <Button
-          variant="unstyled"
+        <button
           className={closeClasses}
           onClick={() => {
             if (onClose) onClose();
             else setShow(false);
           }}
         >
-          <X />
-        </Button>
+          <CloseCircle size={20} />
+        </button>
       )}
     </div>
   );

lib/components/avatar/avatar.tsx

@@ -1,10 +1,10 @@
-import { User } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { renderToString } from "react-dom/server";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import useImageStatus from "../../hooks/image.hook";
 import { IAvatar } from "./avatar.types";
+import { User } from "iconsax-react";
 
 const defaultProps: Partial<IAvatar> = {
   src: "",
@@ -57,7 +57,7 @@ export const Avatar = (props: IAvatar) => {
     return initials.toUpperCase();
   };
 
-  const defaultSvgString = renderToString(<User color="white" />);
+  const defaultSvgString = renderToString(<User color="white" size={28} />);
   const defaultImgSrc = `data:image/svg+xml;base64,${btoa(defaultSvgString)}`;
   const nameLetters = name ? getInitials(name) : "";
 

lib/components/box/box.stories.tsx

@@ -15,6 +15,6 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     children: "Actually this is a div",
-    className: "bg-primary p-4 text-white",
+    className: "bg-primary-base p-4 text-white",
   },
 };

lib/components/button/button.stories.tsx

@@ -14,6 +14,10 @@ const meta = {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     // backgroundColor: { control: 'color' },
+    variant: {
+      control: "radio",
+      options: ["solid", "subtle", "outline", "link", "text"],
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -33,37 +37,38 @@ export const Primary: Story = {
     // rightIcon: <Airplane />,
     spinnerPlacement: "start",
     loadingText: "Loading...",
+    isDanger: false,
   },
 };
 
-export const Outline: Story = {
+export const Subtle: Story = {
   args: {
     children: "Button",
     size: "md",
-    variant: "outline",
+    variant: "subtle",
   },
 };
 
-export const Link: Story = {
+export const Outline: Story = {
   args: {
     children: "Button",
     size: "md",
-    variant: "link",
+    variant: "outline",
   },
 };
 
-export const Ghost: Story = {
+export const Link: Story = {
   args: {
     children: "Button",
     size: "md",
-    variant: "ghost",
+    variant: "link",
   },
 };
 
-export const Unstyled: Story = {
+export const Text: Story = {
   args: {
     children: "Button",
     size: "md",
-    variant: "unstyled",
+    variant: "text",
   },
 };

lib/components/button/button.tsx

@@ -1,8 +1,8 @@
-import { IButton } from "./button.types";
-import { useComponentStyle } from "../../customization/styles/theme.context";
-import { CircleNotch } from "@phosphor-icons/react";
-import { twMerge } from "tailwind-merge";
 import { useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+import LoadingIcon from "../../assets/icons/LoadingIcon";
+import { useComponentStyle } from "../../customization/styles/theme.context";
+import { IButton } from "./button.types";
 
 const defaultProps: Partial<IButton> = {
   variant: "solid",
@@ -28,15 +28,16 @@ export const Button = (props: IButton) => {
     leftIcon,
     rightIcon,
     loadingText,
+    isDanger,
     ...restProps
   } = {
     ...defaultProps,
     ...props,
   };
 
   const classes = useMemo(() => {
-    return twMerge(theme.base({ size, variant }), className);
-  }, [className, variant, size, theme]);
+    return twMerge(theme.base({ size, variant, isDanger }), className);
+  }, [className, variant, size, isDanger, theme]);
 
   const containerStyles: React.CSSProperties = {
     ...(iconSpacing
@@ -46,7 +47,13 @@ export const Button = (props: IButton) => {
       : {}),
   };
 
-  const spinnerRender = spinner ?? <CircleNotch className={theme.spinner()} />;
+  const spinnerRender = spinner ?? (
+    <LoadingIcon
+      className={theme.spinner({
+        size,
+      })}
+    />
+  );
   const renderLeftIcon = () => {
     if (isLoading && spinnerPlacement === "start") {
       return spinnerRender;

lib/components/button/button.types.ts

@@ -9,5 +9,6 @@ export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "xs" | "sm" | "md" | "lg";
   spinner?: React.ReactNode;
   spinnerPlacement?: "start" | "end";
-  variant?: "ghost" | "outline" | "solid" | "link" | "unstyled";
+  variant?: "text" | "outline" | "subtle" | "solid" | "link";
+  isDanger?: boolean;
 }

lib/components/calendar/calendar.tsx

@@ -1,10 +1,5 @@
-import {
-  CaretDoubleLeft,
-  CaretDoubleRight,
-  CaretLeft,
-  CaretRight,
-} from "@phosphor-icons/react";
 import { format, isSameDay, isSameMonth, isSameYear, isToday } from "date-fns";
+import { ArrowLeft2, ArrowRight2 } from "iconsax-react";
 import { useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
@@ -89,33 +84,24 @@ export const Calendar = (props: ICalendar) => {
     if (viewMode === "day") {
       return (
         <div className={theme.header()}>
-          <button onClick={onPrevYear} className={theme.headerArrow()}>
-            <CaretDoubleLeft />
-          </button>
-          <button onClick={onPrevMonth} className={theme.headerArrow()}>
-            <CaretLeft />
-          </button>
-          <div className="flex-1" />
           <button
             className={theme.headerButton()}
             onClick={() => setViewMode("month")}
           >
             {format(currentDate, "MMM")}
           </button>
-
           <button
             className={theme.headerButton()}
             onClick={() => setViewMode("year")}
           >
             {format(currentDate, "yyyy")}
           </button>
           <div className="flex-1" />
-
-          <button onClick={onNextMonth} className={theme.headerArrow()}>
-            <CaretRight />
+          <button onClick={onPrevMonth} className={theme.headerArrow()}>
+            <ArrowLeft2 size={20} />
           </button>
-          <button onClick={onNextYear} className={theme.headerArrow()}>
-            <CaretDoubleRight />
+          <button onClick={onNextMonth} className={theme.headerArrow()}>
+            <ArrowRight2 size={20} />
           </button>
         </div>
       );
@@ -124,7 +110,7 @@ export const Calendar = (props: ICalendar) => {
       return (
         <div className={theme.header()}>
           <button onClick={onPrevYear} className={theme.headerArrow()}>
-            <CaretLeft />
+            <ArrowLeft2 size={20} />
           </button>
           <div className="flex-1" />
           <button
@@ -135,7 +121,7 @@ export const Calendar = (props: ICalendar) => {
           </button>
           <div className="flex-1" />
           <button onClick={onNextYear} className={theme.headerArrow()}>
-            <CaretRight />
+            <ArrowRight2 size={20} />
           </button>
         </div>
       );
@@ -146,7 +132,7 @@ export const Calendar = (props: ICalendar) => {
       return (
         <div className={theme.header()}>
           <button onClick={onPrevDecade} className={theme.headerArrow()}>
-            <CaretLeft />
+            <ArrowLeft2 size={20} />
           </button>
           <div className="flex-1" />
           <button
@@ -158,7 +144,7 @@ export const Calendar = (props: ICalendar) => {
           </button>
           <div className="flex-1" />
           <button onClick={onNextDecade} className={theme.headerArrow()}>
-            <CaretRight />
+            <ArrowRight2 size={20} />
           </button>
         </div>
       );