gwan-design-system 0.1.10 → 0.1.12

package/dist/index.d.mts

@@ -12,6 +12,7 @@ interface IAvatar {
     image?: string;
     variant: string;
     className?: string;
+    isLoading?: boolean;
 }
 declare const Avatar: FC<IAvatar>;
 
@@ -114,16 +115,16 @@ interface IFilter {
 }
 declare const FilterDropdown: FC<IFilter>;
 
-interface IInput {
+interface IInput extends React.HTMLAttributes<HTMLInputElement> {
     label?: string;
     value: string;
-    onChange: (value: string) => void;
     disabled?: boolean;
     placeholder?: string;
     inputClassName?: string;
     required?: boolean;
     className?: string;
     type?: string;
+    onClear?: () => void;
 }
 declare const Input: FC<IInput>;
 
@@ -164,6 +165,7 @@ interface INavBar {
     menuBackgroundColor?: string;
     className?: string;
     menuItemTextClass?: string;
+    isLoading?: boolean;
 }
 declare const NavBar: FC<INavBar>;
 
@@ -245,6 +247,7 @@ interface ITableColumn {
     header: string;
     render: (row?: any) => JSX.Element;
     headerClassName?: string;
+    cellClassName?: string;
 }
 interface ITable {
     columns: ITableColumn[];
@@ -267,19 +270,11 @@ interface ITag {
 }
 declare const Tag: FC<ITag>;
 
-declare enum ORDER_STATUS {
-    ORDER_PLACED = "Order placed",
-    PRINTING_IN_PROGRESS = "Printing in progress",
-    PACKAGING = "Packaging",
-    DISPATCHED_TO_COURIER = "Dispatched to courier",
-    DELIVERED = "Delivered",
-    ORDER_CANCELLED = "Order cancelled",
-    PENDING = "Pending"
-}
 interface ILog {
-    title: ORDER_STATUS;
+    title: string;
     date?: string;
     description?: string;
+    status: string;
 }
 interface ITimeLine {
     logs: ILog[];

package/dist/index.d.ts

@@ -12,6 +12,7 @@ interface IAvatar {
     image?: string;
     variant: string;
     className?: string;
+    isLoading?: boolean;
 }
 declare const Avatar: FC<IAvatar>;
 
@@ -114,16 +115,16 @@ interface IFilter {
 }
 declare const FilterDropdown: FC<IFilter>;
 
-interface IInput {
+interface IInput extends React.HTMLAttributes<HTMLInputElement> {
     label?: string;
     value: string;
-    onChange: (value: string) => void;
     disabled?: boolean;
     placeholder?: string;
     inputClassName?: string;
     required?: boolean;
     className?: string;
     type?: string;
+    onClear?: () => void;
 }
 declare const Input: FC<IInput>;
 
@@ -164,6 +165,7 @@ interface INavBar {
     menuBackgroundColor?: string;
     className?: string;
     menuItemTextClass?: string;
+    isLoading?: boolean;
 }
 declare const NavBar: FC<INavBar>;
 
@@ -245,6 +247,7 @@ interface ITableColumn {
     header: string;
     render: (row?: any) => JSX.Element;
     headerClassName?: string;
+    cellClassName?: string;
 }
 interface ITable {
     columns: ITableColumn[];
@@ -267,19 +270,11 @@ interface ITag {
 }
 declare const Tag: FC<ITag>;
 
-declare enum ORDER_STATUS {
-    ORDER_PLACED = "Order placed",
-    PRINTING_IN_PROGRESS = "Printing in progress",
-    PACKAGING = "Packaging",
-    DISPATCHED_TO_COURIER = "Dispatched to courier",
-    DELIVERED = "Delivered",
-    ORDER_CANCELLED = "Order cancelled",
-    PENDING = "Pending"
-}
 interface ILog {
-    title: ORDER_STATUS;
+    title: string;
     date?: string;
     description?: string;
+    status: string;
 }
 interface ITimeLine {
     logs: ILog[];

package/dist/index.js

@@ -3,8 +3,34 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -154,7 +180,8 @@ var Avatar = ({
   email,
   image,
   variant,
-  className = ""
+  className = "",
+  isLoading = false
 }) => {
   const [bgColor, setBgColor] = (0, import_react.useState)("transparent");
   const [isTooltipInitialVisible, setIsTooltipInitialVisible] = (0, import_react.useState)(false);
@@ -195,8 +222,8 @@ var Avatar = ({
                 className: "rounded-full border border-neutral-400",
                 src: image,
                 alt: "profile",
-                width: 60,
-                height: 60
+                width: 55,
+                height: 55
               }
             ),
             variant === "image-only" /* IMAGE_ONLY */ && renderTooltip(name, email, isTooltipImageVisible)
@@ -207,7 +234,7 @@ var Avatar = ({
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
-        className: "size-[60px] flex items-center justify-center rounded-full font-semibold cursor-default relative",
+        className: "size-[55px] flex items-center justify-center rounded-full font-semibold cursor-default relative",
         style: { backgroundColor: bgColor },
         onMouseEnter: () => setIsTooltipInitialVisible(true),
         onMouseLeave: () => setIsTooltipInitialVisible(false),
@@ -218,7 +245,16 @@ var Avatar = ({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-row items-center gap-2 ${className}`, children: [
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center gap-2 pl-[5px] animate-pulse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-[55px] h-[55px] rounded-full bg-neutral-400" }),
+      (variant === "image_with_full" /* IMAGE_WITH_FULL */ || variant === "initials_with_full" /* INITIALS_WITH_FULL */) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-2 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-6 bg-neutral-400 rounded-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-[70%] h-4 bg-neutral-400 rounded-lg" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-row items-center gap-2 pl-[5px] ${className}`, children: [
     renderAvatarImage(),
     (variant === "image_with_full" /* IMAGE_WITH_FULL */ || variant === "initials_with_full" /* INITIALS_WITH_FULL */) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-base font-semibold", children: name }),
@@ -865,48 +901,68 @@ var FilterDropdown = ({ children, className = "" }) => {
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "div",
       {
-        className: "flex flex-row gap-4 items-center w-fit border border-neutral-300 hover:border-neutral-400 group p-[14px] rounded-lg cursor-pointer",
+        className: "flex flex-row gap-4 items-center w-fit border border-neutral-300 group p-4 rounded-lg cursor-pointer",
         onClick: () => setIsChildrenVisible(!isChildrenVisible),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Filter, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-neutral-300 text-base group-hover:text-neutral-400", children: "Filter" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevDown, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-700", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Filter, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-neutral-700 text-sm", children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-700", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevDown, {}) })
         ]
       }
     ),
-    isChildrenVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg overflow-y-auto absolute top-full bg-white z-10", children: children(closeDropdown) })
+    isChildrenVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg overflow-y-auto absolute top-[105%] bg-white z-10", children: children(closeDropdown) })
   ] });
 };
 var filterDropdown_default = FilterDropdown;
 
 // src/components/input/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Input = ({
-  label,
-  value,
-  onChange,
-  disabled,
-  placeholder,
-  inputClassName = "",
-  required = false,
-  className = "",
-  type = "text"
-}) => {
+var Input = (_a) => {
+  var _b = _a, {
+    label,
+    value,
+    disabled,
+    placeholder = "",
+    inputClassName = "",
+    required = false,
+    className = "",
+    type = "text",
+    onClear
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "value",
+    "disabled",
+    "placeholder",
+    "inputClassName",
+    "required",
+    "className",
+    "type",
+    "onClear"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `flex flex-col gap-1 relative ${className}`, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: label, className: "text-sm text-neutral-600 mb-2", children: `${label}${required ? " *" : ""}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "input",
-      {
-        id: label,
-        placeholder,
-        value,
-        onChange: (e) => onChange(e.target.value),
-        disabled,
-        className: `border border-neutral-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-text"} text-sm w-full ${inputClassName}`,
-        required,
-        type
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "input",
+        __spreadValues({
+          id: label,
+          placeholder,
+          value,
+          disabled,
+          className: `border border-neutral-300 outline-none py-4 pl-4 ${onClear ? "pr-8" : "pr-4"} rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-text"} text-sm w-full ${inputClassName}`,
+          required,
+          type
+        }, rest)
+      ),
+      onClear && value && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "div",
+        {
+          className: "size-3 absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-900 cursor-pointer",
+          onClick: onClear,
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Cross, {})
+        }
+      )
+    ] })
   ] });
 };
 var input_default = Input;
@@ -976,7 +1032,8 @@ var NavBar = ({
   isCollapsed = false,
   menuBackgroundColor = "bg-primary-100",
   className = "",
-  menuItemTextClass = ""
+  menuItemTextClass = "",
+  isLoading = false
 }) => {
   const router = (0, import_navigation.useRouter)();
   const [isActiveMenuItem, setIsActiveMenuItem] = (0, import_react8.useState)("");
@@ -1038,7 +1095,8 @@ var NavBar = ({
                     name: avatarName,
                     email: avatarEmail,
                     variant: isMenuItemsCollapsed ? "image-only" /* IMAGE_ONLY */ : avatarType,
-                    image: avatarImage
+                    image: avatarImage,
+                    isLoading
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -1052,7 +1110,7 @@ var NavBar = ({
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-neutral-50 border-b" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item, index) => {
+            !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item, index) => {
               if (!item.isDivider) {
                 return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                   "div",
@@ -1062,19 +1120,25 @@ var NavBar = ({
                     onMouseEnter: () => setShowTooltip(index),
                     onMouseLeave: () => setShowTooltip(null),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `w-6 h-6 ml-1 relative ${menuItemTextClass}`, children: [
-                        item.icon,
-                        isMenuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                          tooltip_default,
-                          {
-                            position: "right" /* RIGHT */,
-                            label: item.title,
-                            isVisible: showTooltip === index,
-                            toolTipWidth: "w-fit",
-                            toolTipClass: "text-nowrap"
-                          }
-                        )
-                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                        "div",
+                        {
+                          className: `w-6 h-6 ml-1 relative ${menuItemTextClass}`,
+                          children: [
+                            item.icon,
+                            isMenuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                              tooltip_default,
+                              {
+                                position: "right" /* RIGHT */,
+                                label: item.title,
+                                isVisible: showTooltip === index,
+                                toolTipWidth: "w-fit",
+                                toolTipClass: "text-nowrap"
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       !isMenuItemsCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `text-nowrap ${menuItemTextClass}`, children: item.title })
                     ]
                   },
@@ -1088,13 +1152,28 @@ var NavBar = ({
                 },
                 `menu_item_${index + 1}`
               );
-            }) })
+            }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavBarShimmer, { isMenuItemsCollapsed })
           ]
         }
       )
     }
   );
 };
+var NavBarShimmer = ({
+  isMenuItemsCollapsed
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-2 animate-pulse", children: [...Array(5)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      className: "flex flex-row gap-4 items-center p-4 rounded-lg bg-neutral-400",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-6 h-6 ml-1 bg-neutral-200" }),
+        !isMenuItemsCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "w-full h-4 bg-neutral-200 rounded" })
+      ]
+    },
+    index
+  )) });
+};
 var navBar_default = NavBar;
 
 // src/components/pagination/index.tsx
@@ -1397,7 +1476,14 @@ var Table = ({ columns, data, className = "" }) => {
           "tr",
           {
             className: "bg-white hover:bg-neutral-100",
-            children: columns.map(({ render }, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "text-left px-4 py-4", children: render(row) }, `cell_${cellIndex}`))
+            children: columns.map(({ render, cellClassName }, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "td",
+              {
+                className: `text-left px-4 py-4 ${cellClassName}`,
+                children: render(row)
+              },
+              `cell_${cellIndex}`
+            ))
           },
           `row_${rowIndex}`
         )) })
@@ -1450,10 +1536,11 @@ var import_jsx_runtime41 = require("react/jsx-runtime");
 var TimeLine = ({ logs, className = "" }) => {
   const [steps, setSteps] = (0, import_react11.useState)([]);
   (0, import_react11.useEffect)(() => {
-    if (logs[0].title !== "Order cancelled" /* ORDER_CANCELLED */ && logs[0].title !== "Delivered" /* DELIVERED */) {
+    if (logs[0].status !== "Failed" /* FAILED */ && logs[0].status !== "Finished" /* FINISHED */) {
       setSteps([
         {
-          title: "Pending" /* PENDING */
+          title: "Pending",
+          status: "Pending"
         },
         ...logs
       ]);
@@ -1463,33 +1550,30 @@ var TimeLine = ({ logs, className = "" }) => {
   }, [logs]);
   const getIcon = (status) => {
     switch (status) {
-      case "Order placed" /* ORDER_PLACED */:
-      case "Printing in progress" /* PRINTING_IN_PROGRESS */:
-      case "Packaging" /* PACKAGING */:
-      case "Dispatched to courier" /* DISPATCHED_TO_COURIER */:
-      case "Delivered" /* DELIVERED */:
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-green-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Check, {}) });
-      case "Order cancelled" /* ORDER_CANCELLED */:
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-red-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Cross, {}) });
+      case "Success" /* SUCCESS */:
+      case "Finished" /* FINISHED */:
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-4 bg-green-500 rounded-full text-white p-2" });
+      case "Failed" /* FAILED */:
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-4 bg-red-500 rounded-full text-white p-2" });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-neutral-600 text-neutral-200 rounded-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Circle, {}) });
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-4 bg-neutral-600 text-neutral-200 rounded-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Circle, {}) });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className, children: steps.map(({ title, date, description }, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-row gap-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className, children: steps.map(({ title, date, description, status }, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-row gap-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center", children: [
-      getIcon(title),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-0.5 h-full bg-neutral-500" })
+      getIcon(status),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-0.5 h-full bg-neutral-100" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col flex-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "p",
         {
-          className: `text-base font-semibold relative top-[-2px] ${title === "Pending" /* PENDING */ ? "pb-8" : ""}`,
+          className: `text-base font-semibold relative top-[-2px] ${status === "Pending" ? "pb-8" : ""}`,
           children: title
         }
       ),
       title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-neutral-700", children: date }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "p-4 text-xs bg-neutral-50 text-neutral-800 rounded-lg my-2", children: description })
+      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "p-4 text-xs bg-neutral-50 text-neutral-800 rounded-lg my-2 max-w-80", children: description })
     ] })
   ] }, `log_${index}`)) });
 };