@aziziaziz/react-components 1.0.2 → 1.0.4

package/dist/Dropdown-VC55KPC2.css

@@ -0,0 +1,114 @@
+:root {
+  --optionsHeight: 40px;
+}
+
+.dropdownContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  align-items: flex-start;
+  position: relative;
+}
+.dropdown {
+  width: 100%;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  border: 1px solid var(--border-color);
+  outline: none;
+  border-radius: 8px;
+  transition: var(--transTime);
+  padding: 10px 15px;
+  height: 45px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  cursor: pointer;
+  transition: var(--transTime);
+  position: relative;
+
+  &.disabled__ {
+    background-color: var(--btn-disabled-bg);
+    color: var(--btn-disabled-text);
+    border-color: transparent;
+    cursor: not-allowed;
+  }
+
+  &.placeholder__ {
+    color: rgba(var(--color-text-rgb), 0.4);
+  }
+}
+.dropdownIcon {
+  transition: var(--transTime);
+  transform: scaleY(1);
+}
+.dropdownIconFlip {
+  transform: scaleY(-1);
+}
+.dropdownOptionsContainer {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 10px);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-bg);
+  border-radius: 10px;
+  width: 100%;
+  z-index: 2;
+  max-height: calc(var(--optionsHeight) * 5);
+  overflow: auto;
+  transition: var(--transTime);
+  scrollbar-gutter: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    padding: 0;
+    margin: 0;
+    background-clip: padding-box;
+    border-radius: 50px;
+    background-color: rgba(var(--color-text-rgb), 0.75);
+    min-height: 60px;
+  }
+
+  &.show__ {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  &.hide__ {
+    transform: translateY(-10%);
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+.dropdownOptions {
+  height: var(--optionsHeight);
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(var(--color-bg-rgb-reverse), 0.2);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+@media (max-width: 799.98px) {
+  .dropdownOptionsContainer {
+    position: relative;
+    max-height: unset;
+    left: unset;
+    top: unset;
+    border: none;
+  }
+}

package/dist/{Input-6MS2FZGM.css → Input-AUC42TTJ.css}

@@ -18,6 +18,7 @@
   border-radius: 8px;
   transition: var(--transTime);
   padding: 10px 15px;
+  height: 45px;
 }
 input:focus {
   box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);

package/dist/index.d.mts

@@ -131,15 +131,140 @@ interface ButtonProps extends PropsWithChildren {
 /** The button component with size and type */
 declare const Button: FC<ButtonProps>;
 
+/**
+ * Props for the DatePicker component.
+ */
 interface DatePickerProps {
+    /**
+     * Unique identifier for the date picker input.
+     * Used for accessibility and form association.
+     */
     id: string;
+    /**
+     * Optional label text displayed for the date picker.
+     *
+     * @default "Label"
+     */
     label?: string;
+    /**
+     * Placeholder text shown when no date is selected.
+     *
+     * @default "Placeholder"
+     */
     placeholder?: string;
+    /**
+     * Whether the date picker is in a loading state.
+     * Typically used to indicate async data or processing.
+     *
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Whether the date picker is disabled and non-interactive.
+     *
+     * @default false
+     */
     disabled?: boolean;
 }
+
 declare const DatePicker: React.FC<DatePickerProps>;
 
+/**
+ * Props for the Drawer component.
+ */
+interface DrawerProps extends PropsWithChildren {
+    /**
+     * Controls whether the drawer is visible.
+     */
+    show: boolean;
+    /**
+     * Callback invoked to update the drawer's visibility state.
+     *
+     * @param value - The new visibility state.
+     */
+    updateShow: (value: boolean) => void;
+}
+
+declare const Drawer: React.FC<DrawerProps>;
+
+/**
+ * Represents a single selectable option in the Dropdown component.
+ */
+interface DropdownOptions {
+    /**
+     * The underlying value associated with the option.
+     * Can be a primitive or an object, depending on usage.
+     */
+    value: object | string;
+    /**
+     * The text label displayed to the user for this option.
+     */
+    label: string;
+}
+/**
+ * Props for the Dropdown component.
+ */
+interface DropdownProps {
+    /**
+     * Unique identifier for the dropdown element.
+     * Used for accessibility and form integration.
+     */
+    id: string;
+    /**
+     * List of selectable options displayed in the dropdown.
+     */
+    options: DropdownOptions[];
+    /**
+     * Optional label text displayed above or alongside the dropdown.
+     *
+     * @default "Label"
+     */
+    label?: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     *
+     * @default "Placeholder"
+     */
+    placeholder?: string;
+    /**
+     * Whether the dropdown is in a loading state.
+     * Typically used to indicate asynchronous option loading.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dropdown is disabled and non-interactive.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const Dropdown: React.FC<DropdownProps>;
+
+/**
+ * Props for the Icon component.
+ */
+interface IconProps {
+    /**
+     * Source URL or path for the icon image.
+     */
+    src: string;
+    /**
+     * Optional CSS class names applied to the icon element.
+     */
+    className?: string;
+    /**
+     * Whether the icon should be rendered in a flat style
+     *
+     * @default true
+     */
+    flat?: boolean;
+}
+
+declare const Icon: React.FC<IconProps>;
+
 type SnackbarType = "info" | "danger" | "warning" | "success";
 interface SnackbarReturn {
     /** To show the snackbar */
@@ -340,4 +465,4 @@ interface UsePostMessageReturn {
  */
 declare const usePostMessage: (url: string) => UsePostMessageReturn;
 
-export { Button, type ButtonProps, DatePicker, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };
+export { Button, type ButtonProps, DatePicker, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownOptions, type DropdownProps, Icon, type IconProps, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };

package/dist/index.d.ts

@@ -131,15 +131,140 @@ interface ButtonProps extends PropsWithChildren {
 /** The button component with size and type */
 declare const Button: FC<ButtonProps>;
 
+/**
+ * Props for the DatePicker component.
+ */
 interface DatePickerProps {
+    /**
+     * Unique identifier for the date picker input.
+     * Used for accessibility and form association.
+     */
     id: string;
+    /**
+     * Optional label text displayed for the date picker.
+     *
+     * @default "Label"
+     */
     label?: string;
+    /**
+     * Placeholder text shown when no date is selected.
+     *
+     * @default "Placeholder"
+     */
     placeholder?: string;
+    /**
+     * Whether the date picker is in a loading state.
+     * Typically used to indicate async data or processing.
+     *
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Whether the date picker is disabled and non-interactive.
+     *
+     * @default false
+     */
     disabled?: boolean;
 }
+
 declare const DatePicker: React.FC<DatePickerProps>;
 
+/**
+ * Props for the Drawer component.
+ */
+interface DrawerProps extends PropsWithChildren {
+    /**
+     * Controls whether the drawer is visible.
+     */
+    show: boolean;
+    /**
+     * Callback invoked to update the drawer's visibility state.
+     *
+     * @param value - The new visibility state.
+     */
+    updateShow: (value: boolean) => void;
+}
+
+declare const Drawer: React.FC<DrawerProps>;
+
+/**
+ * Represents a single selectable option in the Dropdown component.
+ */
+interface DropdownOptions {
+    /**
+     * The underlying value associated with the option.
+     * Can be a primitive or an object, depending on usage.
+     */
+    value: object | string;
+    /**
+     * The text label displayed to the user for this option.
+     */
+    label: string;
+}
+/**
+ * Props for the Dropdown component.
+ */
+interface DropdownProps {
+    /**
+     * Unique identifier for the dropdown element.
+     * Used for accessibility and form integration.
+     */
+    id: string;
+    /**
+     * List of selectable options displayed in the dropdown.
+     */
+    options: DropdownOptions[];
+    /**
+     * Optional label text displayed above or alongside the dropdown.
+     *
+     * @default "Label"
+     */
+    label?: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     *
+     * @default "Placeholder"
+     */
+    placeholder?: string;
+    /**
+     * Whether the dropdown is in a loading state.
+     * Typically used to indicate asynchronous option loading.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dropdown is disabled and non-interactive.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const Dropdown: React.FC<DropdownProps>;
+
+/**
+ * Props for the Icon component.
+ */
+interface IconProps {
+    /**
+     * Source URL or path for the icon image.
+     */
+    src: string;
+    /**
+     * Optional CSS class names applied to the icon element.
+     */
+    className?: string;
+    /**
+     * Whether the icon should be rendered in a flat style
+     *
+     * @default true
+     */
+    flat?: boolean;
+}
+
+declare const Icon: React.FC<IconProps>;
+
 type SnackbarType = "info" | "danger" | "warning" | "success";
 interface SnackbarReturn {
     /** To show the snackbar */
@@ -340,4 +465,4 @@ interface UsePostMessageReturn {
  */
 declare const usePostMessage: (url: string) => UsePostMessageReturn;
 
-export { Button, type ButtonProps, DatePicker, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };
+export { Button, type ButtonProps, DatePicker, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownOptions, type DropdownProps, Icon, type IconProps, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };

package/dist/index.js

@@ -21,6 +21,9 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button_default,
   DatePicker: () => DatePicker_default,
+  Drawer: () => Drawer_default,
+  Dropdown: () => Dropdown_default,
+  Icon: () => Icon_default,
   Input: () => Input_default,
   SkeletonLoading: () => SkeletonLoading_default,
   usePostMessage: () => usePostMessage,
@@ -31,7 +34,7 @@ var import_index = require("./index-2F2GVZE5.css");
 
 // src/components/input/Input.tsx
 var import_react_hook_form = require("react-hook-form");
-var import_Input = require("./Input-6MS2FZGM.css");
+var import_Input = require("./Input-AUC42TTJ.css");
 
 // src/components/skeletonLoading/SkeletonLoading.tsx
 var import_SkeletonLoading = require("./SkeletonLoading-UIP5RBIR.css");
@@ -465,13 +468,106 @@ var DatePicker = ({
 };
 var DatePicker_default = DatePicker;
 
-// src/hooks/useSnackbar.ts
+// src/components/dropdown/Dropdown.tsx
 var import_react5 = require("react");
+var import_react_hook_form4 = require("react-hook-form");
+
+// src/assets/check.svg
+var check_default = 'data:image/svg+xml,<?xml version="1.0" encoding="iso-8859-1"?>%0A<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg fill="%231A1A1A" version="1.1" baseProfile="basic" id="Layer_1"%0A%09 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72"%0A%09 xml:space="preserve">%0A<path d="M57.658,12.643c1.854,1.201,2.384,3.678,1.183,5.532l-25.915,40c-0.682,1.051-1.815,1.723-3.064,1.814%0A%09C29.764,59.997,29.665,60,29.568,60c-1.146,0-2.241-0.491-3.003-1.358L13.514,43.807c-1.459-1.659-1.298-4.186,0.36-5.646%0A%09c1.662-1.46,4.188-1.296,5.646,0.361l9.563,10.87l23.043-35.567C53.329,11.971,55.806,11.442,57.658,12.643z"/>%0A</svg>';
+
+// src/components/dropdown/Dropdown.tsx
+var import_Dropdown = require("./Dropdown-VC55KPC2.css");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Dropdown = ({
+  id,
+  options,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const isMobile = false;
+  const dropdownContainerRef = (0, import_react5.useRef)(null);
+  const [showDropdown, setShowDropdown] = (0, import_react5.useState)(false);
+  const {
+    field: { onChange, value }
+  } = (0, import_react_hook_form4.useController)({ name: id });
+  const docOnClickHandler = (e) => {
+    if (dropdownContainerRef.current && e.target) {
+      if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    document.addEventListener("click", docOnClickHandler);
+    return () => {
+      document.removeEventListener("click", docOnClickHandler);
+    };
+  }, []);
+  const selectedLabel = (0, import_react5.useMemo)(() => {
+    if (value) {
+      const selected = options.find((opt) => opt.value == value);
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [value, options]);
+  const dropdownOptionContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: `dropdownOptionsContainer ${showDropdown ? "show__" : "hide__"}`,
+      children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          className: "dropdownOptions",
+          onClick: () => {
+            onChange(opt.value);
+            setShowDropdown(false);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: opt.label }),
+            value == opt.value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { src: check_default, className: "dropdownIcon" })
+          ]
+        }
+      ))
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dropdownContainer", ref: dropdownContainerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: `dropdown ${!selectedLabel && "placeholder__"} ${disabled && "disabled__"}`,
+        onClick: () => {
+          if (!disabled) {
+            setShowDropdown(!showDropdown);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: selectedLabel || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Icon_default,
+            {
+              src: dropdown_default,
+              className: `dropdownIcon ${showDropdown && "dropdownIconFlip"}`
+            }
+          ),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonLoading_default, {})
+        ]
+      }
+    ),
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Drawer_default, { show: showDropdown, updateShow: setShowDropdown, children: dropdownOptionContent }) : dropdownOptionContent
+  ] });
+};
+var Dropdown_default = Dropdown;
+
+// src/hooks/useSnackbar.ts
+var import_react6 = require("react");
 var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
-  const snackbarElement = (0, import_react5.useRef)(null);
-  const timeoutId = (0, import_react5.useRef)(null);
+  const snackbarElement = (0, import_react6.useRef)(null);
+  const timeoutId = (0, import_react6.useRef)(null);
   let root = document.getElementById(id);
-  const [isShowing, setIsShowing] = (0, import_react5.useState)(false);
+  const [isShowing, setIsShowing] = (0, import_react6.useState)(false);
   const hoverInHandler = () => {
     if (timeoutId.current) {
       clearTimeout(timeoutId.current);
@@ -482,7 +578,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
       closeSnackbar();
     }, timeout);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!root) {
       const rootDiv = document.createElement("div");
       rootDiv.setAttribute("id", id);
@@ -529,7 +625,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
       setIsShowing(false);
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isShowing && snackbarElement.current) {
       snackbarElement.current.addEventListener("mouseenter", hoverInHandler);
       snackbarElement.current.addEventListener("mouseleave", hoverOutHandler);
@@ -553,7 +649,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
 };
 
 // src/hooks/usePostMessage.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var usePostMessage = (url) => {
   const sendDimension = () => {
     const body = document.body;
@@ -600,7 +696,7 @@ var usePostMessage = (url) => {
     window.addEventListener("message", messageHandler);
     return prom;
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     sendDimension();
     window.addEventListener("DOMContentLoaded", sendDimension);
     window.addEventListener("resize", sendDimension);
@@ -621,6 +717,9 @@ var usePostMessage = (url) => {
 0 && (module.exports = {
   Button,
   DatePicker,
+  Drawer,
+  Dropdown,
+  Icon,
   Input,
   SkeletonLoading,
   usePostMessage,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx","../src/components/button/Button.tsx","../src/components/datePicker/DatePicker.tsx","../src/components/icon/Icon.tsx","../src/components/datePicker/components/webDatePicker/WebDatePicker.tsx","../src/components/drawer/Drawer.tsx","../src/hooks/useSnackbar.ts","../src/hooks/usePostMessage.ts"],"sourcesContent":["import \"./index.css\";\r\n\r\n// #region Components\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\nexport { default as Button } from \"./components/button/Button\";\r\nexport type { ButtonProps } from \"./components/button/types\";\r\nexport { default as DatePicker } from \"./components/datePicker/DatePicker\";\r\n// #endregion Components\r\n\r\n// #region Hooks\r\nexport { useSnackbar } from \"./hooks/useSnackbar\";\r\nexport { usePostMessage } from \"./hooks/usePostMessage\";\r\nexport type { NotificationType } from \"./hooks/types\";\r\n// #endregion Hooks\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\n/** Create an input component including label\r\n *\r\n * This component needs to be wrap in FormProvider from react-hook-form\r\n */\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className=\"inputContainer\">\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className=\"inputElementContainer\">\r\n        <input\r\n          className=\"input\"\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\n/** A skeleton loading with animation\r\n *\r\n * This needs to be wrap in a container with position: relative;\r\n */\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n","import { FC, useMemo, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Button.css\";\r\nimport { ButtonProps } from \"./types\";\r\n\r\n/** The button component with size and type */\r\nconst Button: FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  className,\r\n  type = \"submit\",\r\n  disabled = false,\r\n  loading = false,\r\n  size = \"default\",\r\n  removeMinWidth = false,\r\n}) => {\r\n  // #region UseMemo\r\n  const buttonClass = useMemo((): string => {\r\n    if (disabled || loading) return \"disabledBtn\";\r\n\r\n    switch (type) {\r\n      case \"submit\":\r\n        return \"submitBtn\";\r\n      case \"danger\":\r\n        return \"dangerBtn\";\r\n      case \"warning\":\r\n        return \"warningBtn\";\r\n    }\r\n  }, [type, disabled, loading]);\r\n  // #endregion UseMemo\r\n\r\n  return (\r\n    <button\r\n      className={`mainBtn ${className} ${buttonClass} ${`${size}__`} ${\r\n        removeMinWidth && \"noMinWidth__\"\r\n      }`}\r\n      onClick={() => {\r\n        if (!disabled) onClick();\r\n      }}\r\n      disabled={disabled || loading}\r\n    >\r\n      <div className={loading ? \"hideContent\" : \"\"}>{children}</div>\r\n\r\n      <div className={`loadingCircle ${loading && \"show__\"}`}></div>\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\n\r\nimport \"./DatePicker.css\";\r\nimport Icon from \"../icon/Icon\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport WebDatePicker from \"./components/webDatePicker/WebDatePicker\";\r\nimport { useFormContext } from \"react-hook-form\";\r\nimport { format } from \"date-fns\";\r\nimport Drawer from \"../drawer/Drawer\";\r\n\r\ninterface DatePickerProps {\r\n  id: string;\r\n  label?: string;\r\n  placeholder?: string;\r\n  loading?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = ({\r\n  id,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  const datePickerRef = useRef<HTMLDivElement>(null);\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  const { getValues } = useFormContext();\r\n\r\n  // #region States\r\n  const [showPicker, setShowPicker] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (datePickerRef.current && e.target) {\r\n      if (\r\n        datePickerRef.current &&\r\n        !datePickerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowPicker(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  return (\r\n    <div className=\"datePickerMainContainer\" ref={datePickerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`pickerContainer ${disabled && disabled}`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowPicker(!showPicker);\r\n          }\r\n        }}\r\n      >\r\n        <div className=\"valueContainer\">\r\n          <div className={`${!getValues(id) && placeholder}`}>\r\n            {getValues(id)\r\n              ? format(getValues(id) as Date, \"dd MMM yyyy\")\r\n              : placeholder}\r\n          </div>\r\n          <Icon\r\n            src={dropdownIcon}\r\n            className={`dropdownIcon ${showPicker ? \"dropdownIconFlip\" : \"\"}`}\r\n          />\r\n        </div>\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showPicker} updateShow={setShowPicker}>\r\n          <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n        </Drawer>\r\n      ) : (\r\n        <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DatePicker;\r\n","import \"./Icon.css\";\n\ninterface IconProps {\n  src: string;\n  className?: string;\n  flat?: boolean;\n}\n\nconst Icon: React.FC<IconProps> = ({ src, className, flat = true }) => {\n  const classNames = [\"icon\", className, flat ? \"flat__\" : \"\"].join(\" \");\n\n  return flat ? (\n    <img className={classNames} src={src && src.toString()} />\n  ) : (\n    <i\n      className={classNames}\n      style={{\n        maskImage: `url(\"${src}\"`,\n        WebkitMaskImage: `url(\"${src}\")`,\n      }}\n    ></i>\n  );\n};\n\nexport default Icon;\n\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport Icon from \"../../../icon/Icon\";\r\n\r\nimport \"./WebDatePicker.css\";\r\nimport {\r\n  addMonths,\r\n  addYears,\r\n  format,\r\n  getDaysInMonth,\r\n  isSameDay,\r\n  isToday,\r\n  setMonth,\r\n  setYear,\r\n  startOfMonth,\r\n} from \"date-fns\";\r\nimport { useController } from \"react-hook-form\";\r\nimport Button from \"../../../button/Button\";\r\n\r\nimport dropdownIcon from \"../../../../assets/dropdown.svg\";\r\n\r\ninterface DateDetails {\r\n  month: number;\r\n  date: number;\r\n  isToday: boolean;\r\n  isSelected: boolean;\r\n  fullDate: Date;\r\n}\r\n\r\nconst daysShortName = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\r\nconst monthsShortName = [\r\n  \"Jan\",\r\n  \"Feb\",\r\n  \"Mar\",\r\n  \"Apr\",\r\n  \"May\",\r\n  \"Jun\",\r\n  \"Jul\",\r\n  \"Aug\",\r\n  \"Sep\",\r\n  \"Oct\",\r\n  \"Nov\",\r\n  \"Dec\",\r\n];\r\n\r\ninterface WebDatePickerProps {\r\n  id: string;\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst WebDatePicker: React.FC<WebDatePickerProps> = ({\r\n  id,\r\n  show,\r\n  updateShow,\r\n}) => {\r\n  // #region States\r\n  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());\r\n  const [selectionMode, setSelectionMode] = useState<\"day\" | \"month\" | \"year\">(\r\n    \"day\"\r\n  );\r\n  const [allYears, setAllYears] = useState<number[]>([]);\r\n  // #endregion States\r\n\r\n  // #region Forms\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Forms\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (show && value) {\r\n      setCurrentMonth(new Date(value));\r\n    }\r\n\r\n    if (show) {\r\n      setSelectionMode(\"day\");\r\n    }\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  // #region Methods\r\n  const onAdd = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, 1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, 1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, 10));\r\n    }\r\n  };\r\n\r\n  const onMinus = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, -1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, -1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, -10));\r\n    }\r\n  };\r\n\r\n  const switchMode = () => {\r\n    if (selectionMode == \"day\") {\r\n      setSelectionMode(\"month\");\r\n    } else if (selectionMode == \"month\") {\r\n      setSelectionMode(\"year\");\r\n    }\r\n  };\r\n  // #endregion Methods\r\n\r\n  // #region UseMemo\r\n  const allDays = useMemo((): DateDetails[] => {\r\n    const totalDays = getDaysInMonth(currentMonth);\r\n    const firstDay = startOfMonth(currentMonth).getDay() || 7;\r\n\r\n    const previousMonth = addMonths(currentMonth, -1);\r\n    const previousMonthTotalDays = getDaysInMonth(previousMonth);\r\n\r\n    const nextMonth = addMonths(currentMonth, 1);\r\n\r\n    const prevDays: DateDetails[] = new Array(firstDay)\r\n      .fill(\"\")\r\n      .map((_: string, index) => {\r\n        const date = previousMonthTotalDays - index;\r\n        const thisDate = new Date(\r\n          previousMonth.getFullYear(),\r\n          previousMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: previousMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      })\r\n      .sort((a, b) => a.date - b.date);\r\n    const allDays: DateDetails[] = new Array(totalDays)\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          currentMonth.getFullYear(),\r\n          currentMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: currentMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n    const nextDays: DateDetails[] = new Array(\r\n      42 - prevDays.length - allDays.length\r\n    )\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          nextMonth.getFullYear(),\r\n          nextMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: nextMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n\r\n    return [...prevDays, ...allDays, ...nextDays];\r\n  }, [currentMonth, value]);\r\n\r\n  const pickerTopLabel = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return format(currentMonth, \"MMM, yyyy\");\r\n    } else if (selectionMode == \"month\") {\r\n      return format(currentMonth, \"yyyy\");\r\n    } else if (selectionMode == \"year\") {\r\n      const currentYear = currentMonth.getFullYear();\r\n      const startYear = currentYear - (currentYear % 10) - 1;\r\n      const endYear = startYear + 10 + 2;\r\n\r\n      setAllYears(\r\n        new Array(endYear - startYear)\r\n          .fill(\"\")\r\n          .map((_: string, ind: number) => startYear + ind)\r\n      );\r\n      return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);\r\n    }\r\n  }, [currentMonth, selectionMode]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const datesContent = (\r\n    <div className=\"dateMainContainer\">\r\n      <div className=\"daysContainer\">\r\n        {daysShortName.map((day, index) => (\r\n          <div key={`${day}_${index}`} className=\"dateItem\">\r\n            {day}\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"dateContainer\">\r\n        {allDays.map((day: DateDetails) => (\r\n          <div\r\n            className={`dateItem ${\r\n              day.month != currentMonth.getMonth() && \"nextPreviousDate__\"\r\n            } ${day.isToday && \"isToday__\"} ${\r\n              day.isSelected && \"isSelected__\"\r\n            }`}\r\n            onClick={() => {\r\n              onChange(day.fullDate);\r\n              updateShow(false);\r\n            }}\r\n          >\r\n            {day.date}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  const monthsContent = (\r\n    <div className=\"monthContainer\">\r\n      {monthsShortName.map((mth: string, mthInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            mth == monthsShortName[new Date().getMonth()] &&\r\n            new Date().getFullYear() == currentMonth.getFullYear() &&\r\n            \"isToday__\"\r\n          } ${\r\n            value &&\r\n            mth == monthsShortName[new Date(value).getMonth()] &&\r\n            currentMonth.getFullYear() == new Date(value).getFullYear() &&\r\n            \"isSelected__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setMonth(currentMonth, mthInd));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"day\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {mth}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const yearContent = (\r\n    <div className=\"monthContainer\">\r\n      {allYears.map((yr: number, yrInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            new Date().getFullYear() == yr && \"isToday__\"\r\n          } ${value && yr == new Date(value).getFullYear() && \"isSelected__\"} ${\r\n            (yrInd == 0 || yrInd == allYears.length - 1) && \"nextPreviousDate__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setYear(currentMonth, yr));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"month\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {yr}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const pickerContent = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return datesContent;\r\n    } else if (selectionMode == \"month\") {\r\n      return monthsContent;\r\n    } else if (selectionMode == \"year\") {\r\n      return yearContent;\r\n    }\r\n  }, [selectionMode, allDays, currentMonth, allYears]);\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className={`webDatePickerMainContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n      <div className=\"topContainer\">\r\n        <div\r\n          className={`monthName ${selectionMode == \"year\" && \"noClick__\"}`}\r\n          onClick={switchMode}\r\n        >\r\n          {pickerTopLabel}\r\n        </div>\r\n        <div onClick={onMinus}>\r\n          <Icon className={`nextPreviousIcon previous__`} src={dropdownIcon} />\r\n        </div>\r\n        <div onClick={onAdd}>\r\n          <Icon className=\"nextPreviousIcon\" src={dropdownIcon} />\r\n        </div>\r\n      </div>\r\n\r\n      {pickerContent}\r\n\r\n      <Button\r\n        onClick={() => setCurrentMonth(new Date())}\r\n        className=\"todayButton\"\r\n        size=\"small\"\r\n        removeMinWidth\r\n      >\r\n        Today\r\n      </Button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default WebDatePicker;\r\n","import { useEffect, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Drawer.css\";\r\n\r\ninterface DrawerProps extends PropsWithChildren {\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst Drawer: React.FC<DrawerProps> = ({ show, updateShow, children }) => {\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  return (\r\n    <div className=\"drawerMainContainer\">\r\n      <div\r\n        onClick={() => updateShow(false)}\r\n        className={`drawerBackgroundContainer ${show ? \"show__\" : \"hide__\"}`}\r\n      ></div>\r\n      <div className={`drawerContentContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Drawer;\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\ntype SnackbarType = \"info\" | \"danger\" | \"warning\" | \"success\";\r\ninterface SnackbarReturn {\r\n  /** To show the snackbar */\r\n  showSnackbar: (\r\n    /** Can be in any string format of the message to show */\r\n    message: string,\r\n    /** info, danger, warning or success - default: info */\r\n    type?: SnackbarType\r\n  ) => void;\r\n}\r\n\r\n/** Init the snackbar container\r\n *\r\n * @param id To set the id of the root container of the snackbar - default: snackbarRoot\r\n * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000\r\n */\r\nexport const useSnackbar = (\r\n  body?: HTMLElement | null,\r\n  id: string = \"snackbarRoot\",\r\n  timeout: number = 3000\r\n): SnackbarReturn => {\r\n  const snackbarElement = useRef<HTMLDivElement>(null);\r\n  const timeoutId = useRef<any>(null);\r\n  let root = document.getElementById(id);\r\n\r\n  // #region States\r\n  const [isShowing, setIsShowing] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Handler\r\n  const hoverInHandler = () => {\r\n    if (timeoutId.current) {\r\n      clearTimeout(timeoutId.current);\r\n    }\r\n  };\r\n  const hoverOutHandler = () => {\r\n    timeoutId.current = setTimeout(() => {\r\n      closeSnackbar();\r\n    }, timeout);\r\n  };\r\n  // #endregion Handler\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (!root) {\r\n      const rootDiv = document.createElement(\"div\");\r\n      rootDiv.setAttribute(\"id\", id);\r\n\r\n      const contentDiv = document.createElement(\"div\");\r\n      contentDiv.className = \"snackbarContentContainer\";\r\n\r\n      const contentInnerDiv = document.createElement(\"div\");\r\n      contentInnerDiv.className = \"hide__\";\r\n\r\n      contentDiv.appendChild(contentInnerDiv);\r\n      rootDiv.appendChild(contentDiv);\r\n\r\n      if (body) {\r\n        body.appendChild(rootDiv);\r\n      } else {\r\n        document.body.appendChild(rootDiv);\r\n      }\r\n\r\n      root = rootDiv;\r\n    }\r\n\r\n    if (root) {\r\n      const snackbarContainer = root.children[0];\r\n\r\n      if (snackbarContainer) {\r\n        const snackbar = snackbarContainer.children[0];\r\n\r\n        if (snackbar) {\r\n          snackbarElement.current = snackbar as HTMLDivElement;\r\n        }\r\n      }\r\n    }\r\n  }, []);\r\n  // #endregion UseEffect\r\n\r\n  const showSnackbar = (message: string, type: SnackbarType = \"info\") => {\r\n    let animTimeout = 0;\r\n    if (isShowing) {\r\n      closeSnackbar();\r\n      animTimeout = 300;\r\n    }\r\n\r\n    setTimeout(() => {\r\n      if (snackbarElement.current) {\r\n        snackbarElement.current.innerHTML = message;\r\n        snackbarElement.current.className = `show__ ${type}__`;\r\n\r\n        setIsShowing(true);\r\n      }\r\n    }, animTimeout);\r\n  };\r\n\r\n  const closeSnackbar = () => {\r\n    if (snackbarElement.current) {\r\n      snackbarElement.current.className = `hide__`;\r\n\r\n      setIsShowing(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isShowing && snackbarElement.current) {\r\n      snackbarElement.current.addEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.addEventListener(\"mouseleave\", hoverOutHandler);\r\n\r\n      if (timeoutId.current) {\r\n        clearTimeout(timeoutId.current);\r\n      }\r\n\r\n      timeoutId.current = setTimeout(() => {\r\n        closeSnackbar();\r\n      }, timeout);\r\n    } else if (snackbarElement.current) {\r\n      snackbarElement.current.removeEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.removeEventListener(\r\n        \"mouseleave\",\r\n        hoverOutHandler\r\n      );\r\n    }\r\n  }, [isShowing]);\r\n\r\n  return {\r\n    showSnackbar,\r\n  };\r\n};\r\n","import { useEffect } from \"react\";\r\nimport {\r\n  NotificationType,\r\n  PopupType,\r\n  QuestionType,\r\n  UsePostMessageReturn,\r\n} from \"./types\";\r\n\r\n/**\r\n * React hook for communicating iframe dimensions and messages\r\n * to a parent window.\r\n *\r\n * This hook automatically:\r\n * - Sends initial iframe dimensions on mount\r\n * - Updates dimensions on DOM content load\r\n * - Updates dimensions on window resize\r\n *\r\n * @param url - The target origin for `postMessage`\r\n *\r\n * @returns Functions for sending dimensions and posting custom messages\r\n */\r\nexport const usePostMessage = (url: string): UsePostMessageReturn => {\r\n  const sendDimension = () => {\r\n    const body = document.body;\r\n    const html = document.documentElement;\r\n\r\n    const width = Math.max(\r\n      body.scrollWidth,\r\n      body.offsetWidth,\r\n      html.clientWidth,\r\n      html.scrollWidth,\r\n      html.offsetWidth\r\n    );\r\n\r\n    const height = Math.max(\r\n      body.scrollHeight,\r\n      body.offsetHeight,\r\n      html.clientHeight,\r\n      html.scrollHeight,\r\n      html.offsetHeight\r\n    );\r\n\r\n    window.parent.postMessage({ type: \"resize\", height, width }, url);\r\n  };\r\n\r\n  const postMessage = (data: any) => {\r\n    window.parent.postMessage(data, url);\r\n  };\r\n\r\n  const postNotification = (data: NotificationType) => {\r\n    window.parent.postMessage(\r\n      {\r\n        type: \"noti\",\r\n        data: data,\r\n      },\r\n      url\r\n    );\r\n  };\r\n\r\n  const postPopup = (data: PopupType) => {\r\n    window.parent.postMessage({ type: \"popup\", data: data }, url);\r\n  };\r\n\r\n  const postQuestion = (data: QuestionType): Promise<string> => {\r\n    window.parent.postMessage({ type: \"question\", data: data }, url);\r\n\r\n    let resolve: (value: string | PromiseLike<string>) => void;\r\n    const prom = new Promise<string>((res) => (resolve = res));\r\n\r\n    const messageHandler = (ev: MessageEvent) => {\r\n      resolve(ev.data);\r\n      window.removeEventListener(\"message\", messageHandler);\r\n    };\r\n    window.addEventListener(\"message\", messageHandler);\r\n\r\n    return prom;\r\n  };\r\n\r\n  useEffect(() => {\r\n    sendDimension();\r\n\r\n    window.addEventListener(\"DOMContentLoaded\", sendDimension);\r\n    window.addEventListener(\"resize\", sendDimension);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"DOMContentLoaded\", sendDimension);\r\n      window.removeEventListener(\"resize\", sendDimension);\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    sendDimension,\r\n    postMessage,\r\n    postNotification,\r\n    postPopup,\r\n    postQuestion,\r\n  };\r\n};\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_react_hook_form","import_jsx_runtime","allDays","import_react_hook_form","import_date_fns","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx","../src/components/button/Button.tsx","../src/components/datePicker/DatePicker.tsx","../src/components/icon/Icon.tsx","../src/components/datePicker/components/webDatePicker/WebDatePicker.tsx","../src/components/drawer/Drawer.tsx","../src/components/dropdown/Dropdown.tsx","../src/hooks/useSnackbar.ts","../src/hooks/usePostMessage.ts"],"sourcesContent":["import \"./index.css\";\r\n\r\n// #region Components\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\nexport { default as Button } from \"./components/button/Button\";\r\nexport type { ButtonProps } from \"./components/button/types\";\r\nexport { default as DatePicker } from \"./components/datePicker/DatePicker\";\r\nexport type { DatePickerProps } from \"./components/datePicker/types\";\r\nexport { default as Drawer } from \"./components/drawer/Drawer\";\r\nexport type { DrawerProps } from \"./components/drawer/types\";\r\nexport { default as Dropdown } from \"./components/dropdown/Dropdown\";\r\nexport type {\r\n  DropdownProps,\r\n  DropdownOptions,\r\n} from \"./components/dropdown/types\";\r\nexport { default as Icon } from \"./components/icon/Icon\";\r\nexport type { IconProps } from \"./components/icon/types\";\r\n// #endregion Components\r\n\r\n// #region Hooks\r\nexport { useSnackbar } from \"./hooks/useSnackbar\";\r\nexport { usePostMessage } from \"./hooks/usePostMessage\";\r\nexport type { NotificationType } from \"./hooks/types\";\r\n// #endregion Hooks\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\n/** Create an input component including label\r\n *\r\n * This component needs to be wrap in FormProvider from react-hook-form\r\n */\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className=\"inputContainer\">\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className=\"inputElementContainer\">\r\n        <input\r\n          className=\"input\"\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\n/** A skeleton loading with animation\r\n *\r\n * This needs to be wrap in a container with position: relative;\r\n */\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n","import { FC, useMemo, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Button.css\";\r\nimport { ButtonProps } from \"./types\";\r\n\r\n/** The button component with size and type */\r\nconst Button: FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  className,\r\n  type = \"submit\",\r\n  disabled = false,\r\n  loading = false,\r\n  size = \"default\",\r\n  removeMinWidth = false,\r\n}) => {\r\n  // #region UseMemo\r\n  const buttonClass = useMemo((): string => {\r\n    if (disabled || loading) return \"disabledBtn\";\r\n\r\n    switch (type) {\r\n      case \"submit\":\r\n        return \"submitBtn\";\r\n      case \"danger\":\r\n        return \"dangerBtn\";\r\n      case \"warning\":\r\n        return \"warningBtn\";\r\n    }\r\n  }, [type, disabled, loading]);\r\n  // #endregion UseMemo\r\n\r\n  return (\r\n    <button\r\n      className={`mainBtn ${className} ${buttonClass} ${`${size}__`} ${\r\n        removeMinWidth && \"noMinWidth__\"\r\n      }`}\r\n      onClick={() => {\r\n        if (!disabled) onClick();\r\n      }}\r\n      disabled={disabled || loading}\r\n    >\r\n      <div className={loading ? \"hideContent\" : \"\"}>{children}</div>\r\n\r\n      <div className={`loadingCircle ${loading && \"show__\"}`}></div>\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\n\r\nimport \"./DatePicker.css\";\r\nimport Icon from \"../icon/Icon\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport WebDatePicker from \"./components/webDatePicker/WebDatePicker\";\r\nimport { useFormContext } from \"react-hook-form\";\r\nimport { format } from \"date-fns\";\r\nimport Drawer from \"../drawer/Drawer\";\r\nimport { DatePickerProps } from \"./types\";\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = ({\r\n  id,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  const datePickerRef = useRef<HTMLDivElement>(null);\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  const { getValues } = useFormContext();\r\n\r\n  // #region States\r\n  const [showPicker, setShowPicker] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (datePickerRef.current && e.target) {\r\n      if (\r\n        datePickerRef.current &&\r\n        !datePickerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowPicker(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  return (\r\n    <div className=\"datePickerMainContainer\" ref={datePickerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`pickerContainer ${disabled && disabled}`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowPicker(!showPicker);\r\n          }\r\n        }}\r\n      >\r\n        <div className=\"valueContainer\">\r\n          <div className={`${!getValues(id) && placeholder}`}>\r\n            {getValues(id)\r\n              ? format(getValues(id) as Date, \"dd MMM yyyy\")\r\n              : placeholder}\r\n          </div>\r\n          <Icon\r\n            src={dropdownIcon}\r\n            className={`dropdownIcon ${showPicker ? \"dropdownIconFlip\" : \"\"}`}\r\n          />\r\n        </div>\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showPicker} updateShow={setShowPicker}>\r\n          <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n        </Drawer>\r\n      ) : (\r\n        <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DatePicker;\r\n","import \"./Icon.css\";\nimport { IconProps } from \"./types\";\n\nconst Icon: React.FC<IconProps> = ({ src, className, flat = true }) => {\n  const classNames = [\"icon\", className, flat ? \"flat__\" : \"\"].join(\" \");\n\n  return flat ? (\n    <img className={classNames} src={src && src.toString()} />\n  ) : (\n    <i\n      className={classNames}\n      style={{\n        maskImage: `url(\"${src}\"`,\n        WebkitMaskImage: `url(\"${src}\")`,\n      }}\n    ></i>\n  );\n};\n\nexport default Icon;\n\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport Icon from \"../../../icon/Icon\";\r\n\r\nimport \"./WebDatePicker.css\";\r\nimport {\r\n  addMonths,\r\n  addYears,\r\n  format,\r\n  getDaysInMonth,\r\n  isSameDay,\r\n  isToday,\r\n  setMonth,\r\n  setYear,\r\n  startOfMonth,\r\n} from \"date-fns\";\r\nimport { useController } from \"react-hook-form\";\r\nimport Button from \"../../../button/Button\";\r\n\r\nimport dropdownIcon from \"../../../../assets/dropdown.svg\";\r\n\r\ninterface DateDetails {\r\n  month: number;\r\n  date: number;\r\n  isToday: boolean;\r\n  isSelected: boolean;\r\n  fullDate: Date;\r\n}\r\n\r\nconst daysShortName = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\r\nconst monthsShortName = [\r\n  \"Jan\",\r\n  \"Feb\",\r\n  \"Mar\",\r\n  \"Apr\",\r\n  \"May\",\r\n  \"Jun\",\r\n  \"Jul\",\r\n  \"Aug\",\r\n  \"Sep\",\r\n  \"Oct\",\r\n  \"Nov\",\r\n  \"Dec\",\r\n];\r\n\r\ninterface WebDatePickerProps {\r\n  id: string;\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst WebDatePicker: React.FC<WebDatePickerProps> = ({\r\n  id,\r\n  show,\r\n  updateShow,\r\n}) => {\r\n  // #region States\r\n  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());\r\n  const [selectionMode, setSelectionMode] = useState<\"day\" | \"month\" | \"year\">(\r\n    \"day\"\r\n  );\r\n  const [allYears, setAllYears] = useState<number[]>([]);\r\n  // #endregion States\r\n\r\n  // #region Forms\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Forms\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (show && value) {\r\n      setCurrentMonth(new Date(value));\r\n    }\r\n\r\n    if (show) {\r\n      setSelectionMode(\"day\");\r\n    }\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  // #region Methods\r\n  const onAdd = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, 1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, 1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, 10));\r\n    }\r\n  };\r\n\r\n  const onMinus = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, -1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, -1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, -10));\r\n    }\r\n  };\r\n\r\n  const switchMode = () => {\r\n    if (selectionMode == \"day\") {\r\n      setSelectionMode(\"month\");\r\n    } else if (selectionMode == \"month\") {\r\n      setSelectionMode(\"year\");\r\n    }\r\n  };\r\n  // #endregion Methods\r\n\r\n  // #region UseMemo\r\n  const allDays = useMemo((): DateDetails[] => {\r\n    const totalDays = getDaysInMonth(currentMonth);\r\n    const firstDay = startOfMonth(currentMonth).getDay() || 7;\r\n\r\n    const previousMonth = addMonths(currentMonth, -1);\r\n    const previousMonthTotalDays = getDaysInMonth(previousMonth);\r\n\r\n    const nextMonth = addMonths(currentMonth, 1);\r\n\r\n    const prevDays: DateDetails[] = new Array(firstDay)\r\n      .fill(\"\")\r\n      .map((_: string, index) => {\r\n        const date = previousMonthTotalDays - index;\r\n        const thisDate = new Date(\r\n          previousMonth.getFullYear(),\r\n          previousMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: previousMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      })\r\n      .sort((a, b) => a.date - b.date);\r\n    const allDays: DateDetails[] = new Array(totalDays)\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          currentMonth.getFullYear(),\r\n          currentMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: currentMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n    const nextDays: DateDetails[] = new Array(\r\n      42 - prevDays.length - allDays.length\r\n    )\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          nextMonth.getFullYear(),\r\n          nextMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: nextMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n\r\n    return [...prevDays, ...allDays, ...nextDays];\r\n  }, [currentMonth, value]);\r\n\r\n  const pickerTopLabel = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return format(currentMonth, \"MMM, yyyy\");\r\n    } else if (selectionMode == \"month\") {\r\n      return format(currentMonth, \"yyyy\");\r\n    } else if (selectionMode == \"year\") {\r\n      const currentYear = currentMonth.getFullYear();\r\n      const startYear = currentYear - (currentYear % 10) - 1;\r\n      const endYear = startYear + 10 + 2;\r\n\r\n      setAllYears(\r\n        new Array(endYear - startYear)\r\n          .fill(\"\")\r\n          .map((_: string, ind: number) => startYear + ind)\r\n      );\r\n      return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);\r\n    }\r\n  }, [currentMonth, selectionMode]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const datesContent = (\r\n    <div className=\"dateMainContainer\">\r\n      <div className=\"daysContainer\">\r\n        {daysShortName.map((day, index) => (\r\n          <div key={`${day}_${index}`} className=\"dateItem\">\r\n            {day}\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"dateContainer\">\r\n        {allDays.map((day: DateDetails) => (\r\n          <div\r\n            className={`dateItem ${\r\n              day.month != currentMonth.getMonth() && \"nextPreviousDate__\"\r\n            } ${day.isToday && \"isToday__\"} ${\r\n              day.isSelected && \"isSelected__\"\r\n            }`}\r\n            onClick={() => {\r\n              onChange(day.fullDate);\r\n              updateShow(false);\r\n            }}\r\n          >\r\n            {day.date}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  const monthsContent = (\r\n    <div className=\"monthContainer\">\r\n      {monthsShortName.map((mth: string, mthInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            mth == monthsShortName[new Date().getMonth()] &&\r\n            new Date().getFullYear() == currentMonth.getFullYear() &&\r\n            \"isToday__\"\r\n          } ${\r\n            value &&\r\n            mth == monthsShortName[new Date(value).getMonth()] &&\r\n            currentMonth.getFullYear() == new Date(value).getFullYear() &&\r\n            \"isSelected__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setMonth(currentMonth, mthInd));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"day\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {mth}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const yearContent = (\r\n    <div className=\"monthContainer\">\r\n      {allYears.map((yr: number, yrInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            new Date().getFullYear() == yr && \"isToday__\"\r\n          } ${value && yr == new Date(value).getFullYear() && \"isSelected__\"} ${\r\n            (yrInd == 0 || yrInd == allYears.length - 1) && \"nextPreviousDate__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setYear(currentMonth, yr));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"month\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {yr}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const pickerContent = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return datesContent;\r\n    } else if (selectionMode == \"month\") {\r\n      return monthsContent;\r\n    } else if (selectionMode == \"year\") {\r\n      return yearContent;\r\n    }\r\n  }, [selectionMode, allDays, currentMonth, allYears]);\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className={`webDatePickerMainContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n      <div className=\"topContainer\">\r\n        <div\r\n          className={`monthName ${selectionMode == \"year\" && \"noClick__\"}`}\r\n          onClick={switchMode}\r\n        >\r\n          {pickerTopLabel}\r\n        </div>\r\n        <div onClick={onMinus}>\r\n          <Icon className={`nextPreviousIcon previous__`} src={dropdownIcon} />\r\n        </div>\r\n        <div onClick={onAdd}>\r\n          <Icon className=\"nextPreviousIcon\" src={dropdownIcon} />\r\n        </div>\r\n      </div>\r\n\r\n      {pickerContent}\r\n\r\n      <Button\r\n        onClick={() => setCurrentMonth(new Date())}\r\n        className=\"todayButton\"\r\n        size=\"small\"\r\n        removeMinWidth\r\n      >\r\n        Today\r\n      </Button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default WebDatePicker;\r\n","import { useEffect, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Drawer.css\";\r\nimport { DrawerProps } from \"./types\";\r\n\r\nconst Drawer: React.FC<DrawerProps> = ({ show, updateShow, children }) => {\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  return (\r\n    <div className=\"drawerMainContainer\">\r\n      <div\r\n        onClick={() => updateShow(false)}\r\n        className={`drawerBackgroundContainer ${show ? \"show__\" : \"hide__\"}`}\r\n      ></div>\r\n      <div className={`drawerContentContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Drawer;\r\n","import { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport Icon from \"../icon/Icon\";\r\n\r\nimport { useController } from \"react-hook-form\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport Drawer from \"../drawer/Drawer\";\r\n\r\nimport checkIcon from \"../../assets/check.svg\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport \"./Dropdown.css\";\r\nimport { DropdownProps } from \"./types\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = ({\r\n  id,\r\n  options,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  // #region Refs\r\n  const dropdownContainerRef = useRef<HTMLDivElement>(null);\r\n  // #endregion Refs\r\n\r\n  // #region States\r\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Controller\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Controller\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (dropdownContainerRef.current && e.target) {\r\n      if (\r\n        dropdownContainerRef.current &&\r\n        !dropdownContainerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowDropdown(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  // #region UseMemo\r\n  const selectedLabel = useMemo(() => {\r\n    if (value) {\r\n      const selected = options.find((opt) => opt.value == value);\r\n      return selected ? selected.label : \"\";\r\n    }\r\n\r\n    return \"\";\r\n  }, [value, options]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const dropdownOptionContent = (\r\n    <div\r\n      className={`dropdownOptionsContainer ${\r\n        showDropdown ? \"show__\" : \"hide__\"\r\n      }`}\r\n    >\r\n      {options.map((opt) => (\r\n        <div\r\n          className=\"dropdownOptions\"\r\n          onClick={() => {\r\n            onChange(opt.value);\r\n            setShowDropdown(false);\r\n          }}\r\n        >\r\n          <div>{opt.label}</div>\r\n          {value == opt.value && (\r\n            <Icon src={checkIcon} className=\"dropdownIcon\" />\r\n          )}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className=\"dropdownContainer\" ref={dropdownContainerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`dropdown ${!selectedLabel && \"placeholder__\"} ${\r\n          disabled && \"disabled__\"\r\n        }`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowDropdown(!showDropdown);\r\n          }\r\n        }}\r\n      >\r\n        <div>{selectedLabel || placeholder}</div>\r\n        <Icon\r\n          src={dropdownIcon}\r\n          className={`dropdownIcon ${showDropdown && \"dropdownIconFlip\"}`}\r\n        />\r\n\r\n        {loading && <SkeletonLoading />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showDropdown} updateShow={setShowDropdown}>\r\n          {dropdownOptionContent}\r\n        </Drawer>\r\n      ) : (\r\n        dropdownOptionContent\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Dropdown;\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\ntype SnackbarType = \"info\" | \"danger\" | \"warning\" | \"success\";\r\ninterface SnackbarReturn {\r\n  /** To show the snackbar */\r\n  showSnackbar: (\r\n    /** Can be in any string format of the message to show */\r\n    message: string,\r\n    /** info, danger, warning or success - default: info */\r\n    type?: SnackbarType\r\n  ) => void;\r\n}\r\n\r\n/** Init the snackbar container\r\n *\r\n * @param id To set the id of the root container of the snackbar - default: snackbarRoot\r\n * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000\r\n */\r\nexport const useSnackbar = (\r\n  body?: HTMLElement | null,\r\n  id: string = \"snackbarRoot\",\r\n  timeout: number = 3000\r\n): SnackbarReturn => {\r\n  const snackbarElement = useRef<HTMLDivElement>(null);\r\n  const timeoutId = useRef<any>(null);\r\n  let root = document.getElementById(id);\r\n\r\n  // #region States\r\n  const [isShowing, setIsShowing] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Handler\r\n  const hoverInHandler = () => {\r\n    if (timeoutId.current) {\r\n      clearTimeout(timeoutId.current);\r\n    }\r\n  };\r\n  const hoverOutHandler = () => {\r\n    timeoutId.current = setTimeout(() => {\r\n      closeSnackbar();\r\n    }, timeout);\r\n  };\r\n  // #endregion Handler\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (!root) {\r\n      const rootDiv = document.createElement(\"div\");\r\n      rootDiv.setAttribute(\"id\", id);\r\n\r\n      const contentDiv = document.createElement(\"div\");\r\n      contentDiv.className = \"snackbarContentContainer\";\r\n\r\n      const contentInnerDiv = document.createElement(\"div\");\r\n      contentInnerDiv.className = \"hide__\";\r\n\r\n      contentDiv.appendChild(contentInnerDiv);\r\n      rootDiv.appendChild(contentDiv);\r\n\r\n      if (body) {\r\n        body.appendChild(rootDiv);\r\n      } else {\r\n        document.body.appendChild(rootDiv);\r\n      }\r\n\r\n      root = rootDiv;\r\n    }\r\n\r\n    if (root) {\r\n      const snackbarContainer = root.children[0];\r\n\r\n      if (snackbarContainer) {\r\n        const snackbar = snackbarContainer.children[0];\r\n\r\n        if (snackbar) {\r\n          snackbarElement.current = snackbar as HTMLDivElement;\r\n        }\r\n      }\r\n    }\r\n  }, []);\r\n  // #endregion UseEffect\r\n\r\n  const showSnackbar = (message: string, type: SnackbarType = \"info\") => {\r\n    let animTimeout = 0;\r\n    if (isShowing) {\r\n      closeSnackbar();\r\n      animTimeout = 300;\r\n    }\r\n\r\n    setTimeout(() => {\r\n      if (snackbarElement.current) {\r\n        snackbarElement.current.innerHTML = message;\r\n        snackbarElement.current.className = `show__ ${type}__`;\r\n\r\n        setIsShowing(true);\r\n      }\r\n    }, animTimeout);\r\n  };\r\n\r\n  const closeSnackbar = () => {\r\n    if (snackbarElement.current) {\r\n      snackbarElement.current.className = `hide__`;\r\n\r\n      setIsShowing(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isShowing && snackbarElement.current) {\r\n      snackbarElement.current.addEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.addEventListener(\"mouseleave\", hoverOutHandler);\r\n\r\n      if (timeoutId.current) {\r\n        clearTimeout(timeoutId.current);\r\n      }\r\n\r\n      timeoutId.current = setTimeout(() => {\r\n        closeSnackbar();\r\n      }, timeout);\r\n    } else if (snackbarElement.current) {\r\n      snackbarElement.current.removeEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.removeEventListener(\r\n        \"mouseleave\",\r\n        hoverOutHandler\r\n      );\r\n    }\r\n  }, [isShowing]);\r\n\r\n  return {\r\n    showSnackbar,\r\n  };\r\n};\r\n","import { useEffect } from \"react\";\r\nimport {\r\n  NotificationType,\r\n  PopupType,\r\n  QuestionType,\r\n  UsePostMessageReturn,\r\n} from \"./types\";\r\n\r\n/**\r\n * React hook for communicating iframe dimensions and messages\r\n * to a parent window.\r\n *\r\n * This hook automatically:\r\n * - Sends initial iframe dimensions on mount\r\n * - Updates dimensions on DOM content load\r\n * - Updates dimensions on window resize\r\n *\r\n * @param url - The target origin for `postMessage`\r\n *\r\n * @returns Functions for sending dimensions and posting custom messages\r\n */\r\nexport const usePostMessage = (url: string): UsePostMessageReturn => {\r\n  const sendDimension = () => {\r\n    const body = document.body;\r\n    const html = document.documentElement;\r\n\r\n    const width = Math.max(\r\n      body.scrollWidth,\r\n      body.offsetWidth,\r\n      html.clientWidth,\r\n      html.scrollWidth,\r\n      html.offsetWidth\r\n    );\r\n\r\n    const height = Math.max(\r\n      body.scrollHeight,\r\n      body.offsetHeight,\r\n      html.clientHeight,\r\n      html.scrollHeight,\r\n      html.offsetHeight\r\n    );\r\n\r\n    window.parent.postMessage({ type: \"resize\", height, width }, url);\r\n  };\r\n\r\n  const postMessage = (data: any) => {\r\n    window.parent.postMessage(data, url);\r\n  };\r\n\r\n  const postNotification = (data: NotificationType) => {\r\n    window.parent.postMessage(\r\n      {\r\n        type: \"noti\",\r\n        data: data,\r\n      },\r\n      url\r\n    );\r\n  };\r\n\r\n  const postPopup = (data: PopupType) => {\r\n    window.parent.postMessage({ type: \"popup\", data: data }, url);\r\n  };\r\n\r\n  const postQuestion = (data: QuestionType): Promise<string> => {\r\n    window.parent.postMessage({ type: \"question\", data: data }, url);\r\n\r\n    let resolve: (value: string | PromiseLike<string>) => void;\r\n    const prom = new Promise<string>((res) => (resolve = res));\r\n\r\n    const messageHandler = (ev: MessageEvent) => {\r\n      resolve(ev.data);\r\n      window.removeEventListener(\"message\", messageHandler);\r\n    };\r\n    window.addEventListener(\"message\", messageHandler);\r\n\r\n    return prom;\r\n  };\r\n\r\n  useEffect(() => {\r\n    sendDimension();\r\n\r\n    window.addEventListener(\"DOMContentLoaded\", sendDimension);\r\n    window.addEventListener(\"resize\", sendDimension);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"DOMContentLoaded\", sendDimension);\r\n      window.removeEventListener(\"resize\", sendDimension);\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    sendDimension,\r\n    postMessage,\r\n    postNotification,\r\n    postPopup,\r\n    postQuestion,\r\n  };\r\n};\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_react_hook_form","import_jsx_runtime","allDays","import_react_hook_form","import_date_fns","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_react_hook_form","import_jsx_runtime","import_react","import_react"]}

package/dist/index.mjs

@@ -3,7 +3,7 @@ import "./index-2F2GVZE5.css";
 
 // src/components/input/Input.tsx
 import { useController } from "react-hook-form";
-import "./Input-6MS2FZGM.css";
+import "./Input-AUC42TTJ.css";
 
 // src/components/skeletonLoading/SkeletonLoading.tsx
 import "./SkeletonLoading-UIP5RBIR.css";
@@ -447,13 +447,106 @@ var DatePicker = ({
 };
 var DatePicker_default = DatePicker;
 
+// src/components/dropdown/Dropdown.tsx
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useController as useController3 } from "react-hook-form";
+
+// src/assets/check.svg
+var check_default = 'data:image/svg+xml,<?xml version="1.0" encoding="iso-8859-1"?>%0A<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg fill="%231A1A1A" version="1.1" baseProfile="basic" id="Layer_1"%0A%09 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72"%0A%09 xml:space="preserve">%0A<path d="M57.658,12.643c1.854,1.201,2.384,3.678,1.183,5.532l-25.915,40c-0.682,1.051-1.815,1.723-3.064,1.814%0A%09C29.764,59.997,29.665,60,29.568,60c-1.146,0-2.241-0.491-3.003-1.358L13.514,43.807c-1.459-1.659-1.298-4.186,0.36-5.646%0A%09c1.662-1.46,4.188-1.296,5.646,0.361l9.563,10.87l23.043-35.567C53.329,11.971,55.806,11.442,57.658,12.643z"/>%0A</svg>';
+
+// src/components/dropdown/Dropdown.tsx
+import "./Dropdown-VC55KPC2.css";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dropdown = ({
+  id,
+  options,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const isMobile = false;
+  const dropdownContainerRef = useRef2(null);
+  const [showDropdown, setShowDropdown] = useState3(false);
+  const {
+    field: { onChange, value }
+  } = useController3({ name: id });
+  const docOnClickHandler = (e) => {
+    if (dropdownContainerRef.current && e.target) {
+      if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    }
+  };
+  useEffect4(() => {
+    document.addEventListener("click", docOnClickHandler);
+    return () => {
+      document.removeEventListener("click", docOnClickHandler);
+    };
+  }, []);
+  const selectedLabel = useMemo3(() => {
+    if (value) {
+      const selected = options.find((opt) => opt.value == value);
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [value, options]);
+  const dropdownOptionContent = /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: `dropdownOptionsContainer ${showDropdown ? "show__" : "hide__"}`,
+      children: options.map((opt) => /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: "dropdownOptions",
+          onClick: () => {
+            onChange(opt.value);
+            setShowDropdown(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx8("div", { children: opt.label }),
+            value == opt.value && /* @__PURE__ */ jsx8(Icon_default, { src: check_default, className: "dropdownIcon" })
+          ]
+        }
+      ))
+    }
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: "dropdownContainer", ref: dropdownContainerRef, children: [
+    /* @__PURE__ */ jsx8("div", { children: label }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: `dropdown ${!selectedLabel && "placeholder__"} ${disabled && "disabled__"}`,
+        onClick: () => {
+          if (!disabled) {
+            setShowDropdown(!showDropdown);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx8("div", { children: selectedLabel || placeholder }),
+          /* @__PURE__ */ jsx8(
+            Icon_default,
+            {
+              src: dropdown_default,
+              className: `dropdownIcon ${showDropdown && "dropdownIconFlip"}`
+            }
+          ),
+          loading && /* @__PURE__ */ jsx8(SkeletonLoading_default, {})
+        ]
+      }
+    ),
+    isMobile ? /* @__PURE__ */ jsx8(Drawer_default, { show: showDropdown, updateShow: setShowDropdown, children: dropdownOptionContent }) : dropdownOptionContent
+  ] });
+};
+var Dropdown_default = Dropdown;
+
 // src/hooks/useSnackbar.ts
-import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
 var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
-  const snackbarElement = useRef2(null);
-  const timeoutId = useRef2(null);
+  const snackbarElement = useRef3(null);
+  const timeoutId = useRef3(null);
   let root = document.getElementById(id);
-  const [isShowing, setIsShowing] = useState3(false);
+  const [isShowing, setIsShowing] = useState4(false);
   const hoverInHandler = () => {
     if (timeoutId.current) {
       clearTimeout(timeoutId.current);
@@ -464,7 +557,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
       closeSnackbar();
     }, timeout);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!root) {
       const rootDiv = document.createElement("div");
       rootDiv.setAttribute("id", id);
@@ -511,7 +604,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
       setIsShowing(false);
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (isShowing && snackbarElement.current) {
       snackbarElement.current.addEventListener("mouseenter", hoverInHandler);
       snackbarElement.current.addEventListener("mouseleave", hoverOutHandler);
@@ -535,7 +628,7 @@ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
 };
 
 // src/hooks/usePostMessage.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var usePostMessage = (url) => {
   const sendDimension = () => {
     const body = document.body;
@@ -582,7 +675,7 @@ var usePostMessage = (url) => {
     window.addEventListener("message", messageHandler);
     return prom;
   };
-  useEffect5(() => {
+  useEffect6(() => {
     sendDimension();
     window.addEventListener("DOMContentLoaded", sendDimension);
     window.addEventListener("resize", sendDimension);
@@ -602,6 +695,9 @@ var usePostMessage = (url) => {
 export {
   Button_default as Button,
   DatePicker_default as DatePicker,
+  Drawer_default as Drawer,
+  Dropdown_default as Dropdown,
+  Icon_default as Icon,
   Input_default as Input,
   SkeletonLoading_default as SkeletonLoading,
   usePostMessage,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx","../src/components/button/Button.tsx","../src/components/datePicker/DatePicker.tsx","../src/components/icon/Icon.tsx","../src/components/datePicker/components/webDatePicker/WebDatePicker.tsx","../src/components/drawer/Drawer.tsx","../src/hooks/useSnackbar.ts","../src/hooks/usePostMessage.ts"],"sourcesContent":["import \"./index.css\";\r\n\r\n// #region Components\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\nexport { default as Button } from \"./components/button/Button\";\r\nexport type { ButtonProps } from \"./components/button/types\";\r\nexport { default as DatePicker } from \"./components/datePicker/DatePicker\";\r\n// #endregion Components\r\n\r\n// #region Hooks\r\nexport { useSnackbar } from \"./hooks/useSnackbar\";\r\nexport { usePostMessage } from \"./hooks/usePostMessage\";\r\nexport type { NotificationType } from \"./hooks/types\";\r\n// #endregion Hooks\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\n/** Create an input component including label\r\n *\r\n * This component needs to be wrap in FormProvider from react-hook-form\r\n */\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className=\"inputContainer\">\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className=\"inputElementContainer\">\r\n        <input\r\n          className=\"input\"\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\n/** A skeleton loading with animation\r\n *\r\n * This needs to be wrap in a container with position: relative;\r\n */\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n","import { FC, useMemo, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Button.css\";\r\nimport { ButtonProps } from \"./types\";\r\n\r\n/** The button component with size and type */\r\nconst Button: FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  className,\r\n  type = \"submit\",\r\n  disabled = false,\r\n  loading = false,\r\n  size = \"default\",\r\n  removeMinWidth = false,\r\n}) => {\r\n  // #region UseMemo\r\n  const buttonClass = useMemo((): string => {\r\n    if (disabled || loading) return \"disabledBtn\";\r\n\r\n    switch (type) {\r\n      case \"submit\":\r\n        return \"submitBtn\";\r\n      case \"danger\":\r\n        return \"dangerBtn\";\r\n      case \"warning\":\r\n        return \"warningBtn\";\r\n    }\r\n  }, [type, disabled, loading]);\r\n  // #endregion UseMemo\r\n\r\n  return (\r\n    <button\r\n      className={`mainBtn ${className} ${buttonClass} ${`${size}__`} ${\r\n        removeMinWidth && \"noMinWidth__\"\r\n      }`}\r\n      onClick={() => {\r\n        if (!disabled) onClick();\r\n      }}\r\n      disabled={disabled || loading}\r\n    >\r\n      <div className={loading ? \"hideContent\" : \"\"}>{children}</div>\r\n\r\n      <div className={`loadingCircle ${loading && \"show__\"}`}></div>\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\n\r\nimport \"./DatePicker.css\";\r\nimport Icon from \"../icon/Icon\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport WebDatePicker from \"./components/webDatePicker/WebDatePicker\";\r\nimport { useFormContext } from \"react-hook-form\";\r\nimport { format } from \"date-fns\";\r\nimport Drawer from \"../drawer/Drawer\";\r\n\r\ninterface DatePickerProps {\r\n  id: string;\r\n  label?: string;\r\n  placeholder?: string;\r\n  loading?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = ({\r\n  id,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  const datePickerRef = useRef<HTMLDivElement>(null);\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  const { getValues } = useFormContext();\r\n\r\n  // #region States\r\n  const [showPicker, setShowPicker] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (datePickerRef.current && e.target) {\r\n      if (\r\n        datePickerRef.current &&\r\n        !datePickerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowPicker(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  return (\r\n    <div className=\"datePickerMainContainer\" ref={datePickerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`pickerContainer ${disabled && disabled}`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowPicker(!showPicker);\r\n          }\r\n        }}\r\n      >\r\n        <div className=\"valueContainer\">\r\n          <div className={`${!getValues(id) && placeholder}`}>\r\n            {getValues(id)\r\n              ? format(getValues(id) as Date, \"dd MMM yyyy\")\r\n              : placeholder}\r\n          </div>\r\n          <Icon\r\n            src={dropdownIcon}\r\n            className={`dropdownIcon ${showPicker ? \"dropdownIconFlip\" : \"\"}`}\r\n          />\r\n        </div>\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showPicker} updateShow={setShowPicker}>\r\n          <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n        </Drawer>\r\n      ) : (\r\n        <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DatePicker;\r\n","import \"./Icon.css\";\n\ninterface IconProps {\n  src: string;\n  className?: string;\n  flat?: boolean;\n}\n\nconst Icon: React.FC<IconProps> = ({ src, className, flat = true }) => {\n  const classNames = [\"icon\", className, flat ? \"flat__\" : \"\"].join(\" \");\n\n  return flat ? (\n    <img className={classNames} src={src && src.toString()} />\n  ) : (\n    <i\n      className={classNames}\n      style={{\n        maskImage: `url(\"${src}\"`,\n        WebkitMaskImage: `url(\"${src}\")`,\n      }}\n    ></i>\n  );\n};\n\nexport default Icon;\n\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport Icon from \"../../../icon/Icon\";\r\n\r\nimport \"./WebDatePicker.css\";\r\nimport {\r\n  addMonths,\r\n  addYears,\r\n  format,\r\n  getDaysInMonth,\r\n  isSameDay,\r\n  isToday,\r\n  setMonth,\r\n  setYear,\r\n  startOfMonth,\r\n} from \"date-fns\";\r\nimport { useController } from \"react-hook-form\";\r\nimport Button from \"../../../button/Button\";\r\n\r\nimport dropdownIcon from \"../../../../assets/dropdown.svg\";\r\n\r\ninterface DateDetails {\r\n  month: number;\r\n  date: number;\r\n  isToday: boolean;\r\n  isSelected: boolean;\r\n  fullDate: Date;\r\n}\r\n\r\nconst daysShortName = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\r\nconst monthsShortName = [\r\n  \"Jan\",\r\n  \"Feb\",\r\n  \"Mar\",\r\n  \"Apr\",\r\n  \"May\",\r\n  \"Jun\",\r\n  \"Jul\",\r\n  \"Aug\",\r\n  \"Sep\",\r\n  \"Oct\",\r\n  \"Nov\",\r\n  \"Dec\",\r\n];\r\n\r\ninterface WebDatePickerProps {\r\n  id: string;\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst WebDatePicker: React.FC<WebDatePickerProps> = ({\r\n  id,\r\n  show,\r\n  updateShow,\r\n}) => {\r\n  // #region States\r\n  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());\r\n  const [selectionMode, setSelectionMode] = useState<\"day\" | \"month\" | \"year\">(\r\n    \"day\"\r\n  );\r\n  const [allYears, setAllYears] = useState<number[]>([]);\r\n  // #endregion States\r\n\r\n  // #region Forms\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Forms\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (show && value) {\r\n      setCurrentMonth(new Date(value));\r\n    }\r\n\r\n    if (show) {\r\n      setSelectionMode(\"day\");\r\n    }\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  // #region Methods\r\n  const onAdd = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, 1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, 1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, 10));\r\n    }\r\n  };\r\n\r\n  const onMinus = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, -1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, -1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, -10));\r\n    }\r\n  };\r\n\r\n  const switchMode = () => {\r\n    if (selectionMode == \"day\") {\r\n      setSelectionMode(\"month\");\r\n    } else if (selectionMode == \"month\") {\r\n      setSelectionMode(\"year\");\r\n    }\r\n  };\r\n  // #endregion Methods\r\n\r\n  // #region UseMemo\r\n  const allDays = useMemo((): DateDetails[] => {\r\n    const totalDays = getDaysInMonth(currentMonth);\r\n    const firstDay = startOfMonth(currentMonth).getDay() || 7;\r\n\r\n    const previousMonth = addMonths(currentMonth, -1);\r\n    const previousMonthTotalDays = getDaysInMonth(previousMonth);\r\n\r\n    const nextMonth = addMonths(currentMonth, 1);\r\n\r\n    const prevDays: DateDetails[] = new Array(firstDay)\r\n      .fill(\"\")\r\n      .map((_: string, index) => {\r\n        const date = previousMonthTotalDays - index;\r\n        const thisDate = new Date(\r\n          previousMonth.getFullYear(),\r\n          previousMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: previousMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      })\r\n      .sort((a, b) => a.date - b.date);\r\n    const allDays: DateDetails[] = new Array(totalDays)\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          currentMonth.getFullYear(),\r\n          currentMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: currentMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n    const nextDays: DateDetails[] = new Array(\r\n      42 - prevDays.length - allDays.length\r\n    )\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          nextMonth.getFullYear(),\r\n          nextMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: nextMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n\r\n    return [...prevDays, ...allDays, ...nextDays];\r\n  }, [currentMonth, value]);\r\n\r\n  const pickerTopLabel = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return format(currentMonth, \"MMM, yyyy\");\r\n    } else if (selectionMode == \"month\") {\r\n      return format(currentMonth, \"yyyy\");\r\n    } else if (selectionMode == \"year\") {\r\n      const currentYear = currentMonth.getFullYear();\r\n      const startYear = currentYear - (currentYear % 10) - 1;\r\n      const endYear = startYear + 10 + 2;\r\n\r\n      setAllYears(\r\n        new Array(endYear - startYear)\r\n          .fill(\"\")\r\n          .map((_: string, ind: number) => startYear + ind)\r\n      );\r\n      return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);\r\n    }\r\n  }, [currentMonth, selectionMode]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const datesContent = (\r\n    <div className=\"dateMainContainer\">\r\n      <div className=\"daysContainer\">\r\n        {daysShortName.map((day, index) => (\r\n          <div key={`${day}_${index}`} className=\"dateItem\">\r\n            {day}\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"dateContainer\">\r\n        {allDays.map((day: DateDetails) => (\r\n          <div\r\n            className={`dateItem ${\r\n              day.month != currentMonth.getMonth() && \"nextPreviousDate__\"\r\n            } ${day.isToday && \"isToday__\"} ${\r\n              day.isSelected && \"isSelected__\"\r\n            }`}\r\n            onClick={() => {\r\n              onChange(day.fullDate);\r\n              updateShow(false);\r\n            }}\r\n          >\r\n            {day.date}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  const monthsContent = (\r\n    <div className=\"monthContainer\">\r\n      {monthsShortName.map((mth: string, mthInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            mth == monthsShortName[new Date().getMonth()] &&\r\n            new Date().getFullYear() == currentMonth.getFullYear() &&\r\n            \"isToday__\"\r\n          } ${\r\n            value &&\r\n            mth == monthsShortName[new Date(value).getMonth()] &&\r\n            currentMonth.getFullYear() == new Date(value).getFullYear() &&\r\n            \"isSelected__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setMonth(currentMonth, mthInd));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"day\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {mth}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const yearContent = (\r\n    <div className=\"monthContainer\">\r\n      {allYears.map((yr: number, yrInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            new Date().getFullYear() == yr && \"isToday__\"\r\n          } ${value && yr == new Date(value).getFullYear() && \"isSelected__\"} ${\r\n            (yrInd == 0 || yrInd == allYears.length - 1) && \"nextPreviousDate__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setYear(currentMonth, yr));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"month\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {yr}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const pickerContent = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return datesContent;\r\n    } else if (selectionMode == \"month\") {\r\n      return monthsContent;\r\n    } else if (selectionMode == \"year\") {\r\n      return yearContent;\r\n    }\r\n  }, [selectionMode, allDays, currentMonth, allYears]);\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className={`webDatePickerMainContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n      <div className=\"topContainer\">\r\n        <div\r\n          className={`monthName ${selectionMode == \"year\" && \"noClick__\"}`}\r\n          onClick={switchMode}\r\n        >\r\n          {pickerTopLabel}\r\n        </div>\r\n        <div onClick={onMinus}>\r\n          <Icon className={`nextPreviousIcon previous__`} src={dropdownIcon} />\r\n        </div>\r\n        <div onClick={onAdd}>\r\n          <Icon className=\"nextPreviousIcon\" src={dropdownIcon} />\r\n        </div>\r\n      </div>\r\n\r\n      {pickerContent}\r\n\r\n      <Button\r\n        onClick={() => setCurrentMonth(new Date())}\r\n        className=\"todayButton\"\r\n        size=\"small\"\r\n        removeMinWidth\r\n      >\r\n        Today\r\n      </Button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default WebDatePicker;\r\n","import { useEffect, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Drawer.css\";\r\n\r\ninterface DrawerProps extends PropsWithChildren {\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst Drawer: React.FC<DrawerProps> = ({ show, updateShow, children }) => {\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  return (\r\n    <div className=\"drawerMainContainer\">\r\n      <div\r\n        onClick={() => updateShow(false)}\r\n        className={`drawerBackgroundContainer ${show ? \"show__\" : \"hide__\"}`}\r\n      ></div>\r\n      <div className={`drawerContentContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Drawer;\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\ntype SnackbarType = \"info\" | \"danger\" | \"warning\" | \"success\";\r\ninterface SnackbarReturn {\r\n  /** To show the snackbar */\r\n  showSnackbar: (\r\n    /** Can be in any string format of the message to show */\r\n    message: string,\r\n    /** info, danger, warning or success - default: info */\r\n    type?: SnackbarType\r\n  ) => void;\r\n}\r\n\r\n/** Init the snackbar container\r\n *\r\n * @param id To set the id of the root container of the snackbar - default: snackbarRoot\r\n * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000\r\n */\r\nexport const useSnackbar = (\r\n  body?: HTMLElement | null,\r\n  id: string = \"snackbarRoot\",\r\n  timeout: number = 3000\r\n): SnackbarReturn => {\r\n  const snackbarElement = useRef<HTMLDivElement>(null);\r\n  const timeoutId = useRef<any>(null);\r\n  let root = document.getElementById(id);\r\n\r\n  // #region States\r\n  const [isShowing, setIsShowing] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Handler\r\n  const hoverInHandler = () => {\r\n    if (timeoutId.current) {\r\n      clearTimeout(timeoutId.current);\r\n    }\r\n  };\r\n  const hoverOutHandler = () => {\r\n    timeoutId.current = setTimeout(() => {\r\n      closeSnackbar();\r\n    }, timeout);\r\n  };\r\n  // #endregion Handler\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (!root) {\r\n      const rootDiv = document.createElement(\"div\");\r\n      rootDiv.setAttribute(\"id\", id);\r\n\r\n      const contentDiv = document.createElement(\"div\");\r\n      contentDiv.className = \"snackbarContentContainer\";\r\n\r\n      const contentInnerDiv = document.createElement(\"div\");\r\n      contentInnerDiv.className = \"hide__\";\r\n\r\n      contentDiv.appendChild(contentInnerDiv);\r\n      rootDiv.appendChild(contentDiv);\r\n\r\n      if (body) {\r\n        body.appendChild(rootDiv);\r\n      } else {\r\n        document.body.appendChild(rootDiv);\r\n      }\r\n\r\n      root = rootDiv;\r\n    }\r\n\r\n    if (root) {\r\n      const snackbarContainer = root.children[0];\r\n\r\n      if (snackbarContainer) {\r\n        const snackbar = snackbarContainer.children[0];\r\n\r\n        if (snackbar) {\r\n          snackbarElement.current = snackbar as HTMLDivElement;\r\n        }\r\n      }\r\n    }\r\n  }, []);\r\n  // #endregion UseEffect\r\n\r\n  const showSnackbar = (message: string, type: SnackbarType = \"info\") => {\r\n    let animTimeout = 0;\r\n    if (isShowing) {\r\n      closeSnackbar();\r\n      animTimeout = 300;\r\n    }\r\n\r\n    setTimeout(() => {\r\n      if (snackbarElement.current) {\r\n        snackbarElement.current.innerHTML = message;\r\n        snackbarElement.current.className = `show__ ${type}__`;\r\n\r\n        setIsShowing(true);\r\n      }\r\n    }, animTimeout);\r\n  };\r\n\r\n  const closeSnackbar = () => {\r\n    if (snackbarElement.current) {\r\n      snackbarElement.current.className = `hide__`;\r\n\r\n      setIsShowing(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isShowing && snackbarElement.current) {\r\n      snackbarElement.current.addEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.addEventListener(\"mouseleave\", hoverOutHandler);\r\n\r\n      if (timeoutId.current) {\r\n        clearTimeout(timeoutId.current);\r\n      }\r\n\r\n      timeoutId.current = setTimeout(() => {\r\n        closeSnackbar();\r\n      }, timeout);\r\n    } else if (snackbarElement.current) {\r\n      snackbarElement.current.removeEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.removeEventListener(\r\n        \"mouseleave\",\r\n        hoverOutHandler\r\n      );\r\n    }\r\n  }, [isShowing]);\r\n\r\n  return {\r\n    showSnackbar,\r\n  };\r\n};\r\n","import { useEffect } from \"react\";\r\nimport {\r\n  NotificationType,\r\n  PopupType,\r\n  QuestionType,\r\n  UsePostMessageReturn,\r\n} from \"./types\";\r\n\r\n/**\r\n * React hook for communicating iframe dimensions and messages\r\n * to a parent window.\r\n *\r\n * This hook automatically:\r\n * - Sends initial iframe dimensions on mount\r\n * - Updates dimensions on DOM content load\r\n * - Updates dimensions on window resize\r\n *\r\n * @param url - The target origin for `postMessage`\r\n *\r\n * @returns Functions for sending dimensions and posting custom messages\r\n */\r\nexport const usePostMessage = (url: string): UsePostMessageReturn => {\r\n  const sendDimension = () => {\r\n    const body = document.body;\r\n    const html = document.documentElement;\r\n\r\n    const width = Math.max(\r\n      body.scrollWidth,\r\n      body.offsetWidth,\r\n      html.clientWidth,\r\n      html.scrollWidth,\r\n      html.offsetWidth\r\n    );\r\n\r\n    const height = Math.max(\r\n      body.scrollHeight,\r\n      body.offsetHeight,\r\n      html.clientHeight,\r\n      html.scrollHeight,\r\n      html.offsetHeight\r\n    );\r\n\r\n    window.parent.postMessage({ type: \"resize\", height, width }, url);\r\n  };\r\n\r\n  const postMessage = (data: any) => {\r\n    window.parent.postMessage(data, url);\r\n  };\r\n\r\n  const postNotification = (data: NotificationType) => {\r\n    window.parent.postMessage(\r\n      {\r\n        type: \"noti\",\r\n        data: data,\r\n      },\r\n      url\r\n    );\r\n  };\r\n\r\n  const postPopup = (data: PopupType) => {\r\n    window.parent.postMessage({ type: \"popup\", data: data }, url);\r\n  };\r\n\r\n  const postQuestion = (data: QuestionType): Promise<string> => {\r\n    window.parent.postMessage({ type: \"question\", data: data }, url);\r\n\r\n    let resolve: (value: string | PromiseLike<string>) => void;\r\n    const prom = new Promise<string>((res) => (resolve = res));\r\n\r\n    const messageHandler = (ev: MessageEvent) => {\r\n      resolve(ev.data);\r\n      window.removeEventListener(\"message\", messageHandler);\r\n    };\r\n    window.addEventListener(\"message\", messageHandler);\r\n\r\n    return prom;\r\n  };\r\n\r\n  useEffect(() => {\r\n    sendDimension();\r\n\r\n    window.addEventListener(\"DOMContentLoaded\", sendDimension);\r\n    window.addEventListener(\"resize\", sendDimension);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"DOMContentLoaded\", sendDimension);\r\n      window.removeEventListener(\"resize\", sendDimension);\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    sendDimension,\r\n    postMessage,\r\n    postNotification,\r\n    postPopup,\r\n    postQuestion,\r\n  };\r\n};\r\n"],"mappings":"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","names":["jsx","jsx","jsxs","useEffect","useState","jsx","useMemo","useController","jsx","jsxs","useController","useMemo","allDays","format","useEffect","jsx","jsxs","jsx","jsxs","useState","useEffect","format","useEffect","useRef","useState","useEffect"]}
+{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx","../src/components/button/Button.tsx","../src/components/datePicker/DatePicker.tsx","../src/components/icon/Icon.tsx","../src/components/datePicker/components/webDatePicker/WebDatePicker.tsx","../src/components/drawer/Drawer.tsx","../src/components/dropdown/Dropdown.tsx","../src/hooks/useSnackbar.ts","../src/hooks/usePostMessage.ts"],"sourcesContent":["import \"./index.css\";\r\n\r\n// #region Components\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\nexport { default as Button } from \"./components/button/Button\";\r\nexport type { ButtonProps } from \"./components/button/types\";\r\nexport { default as DatePicker } from \"./components/datePicker/DatePicker\";\r\nexport type { DatePickerProps } from \"./components/datePicker/types\";\r\nexport { default as Drawer } from \"./components/drawer/Drawer\";\r\nexport type { DrawerProps } from \"./components/drawer/types\";\r\nexport { default as Dropdown } from \"./components/dropdown/Dropdown\";\r\nexport type {\r\n  DropdownProps,\r\n  DropdownOptions,\r\n} from \"./components/dropdown/types\";\r\nexport { default as Icon } from \"./components/icon/Icon\";\r\nexport type { IconProps } from \"./components/icon/types\";\r\n// #endregion Components\r\n\r\n// #region Hooks\r\nexport { useSnackbar } from \"./hooks/useSnackbar\";\r\nexport { usePostMessage } from \"./hooks/usePostMessage\";\r\nexport type { NotificationType } from \"./hooks/types\";\r\n// #endregion Hooks\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\n/** Create an input component including label\r\n *\r\n * This component needs to be wrap in FormProvider from react-hook-form\r\n */\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className=\"inputContainer\">\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className=\"inputElementContainer\">\r\n        <input\r\n          className=\"input\"\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\n/** A skeleton loading with animation\r\n *\r\n * This needs to be wrap in a container with position: relative;\r\n */\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n","import { FC, useMemo, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Button.css\";\r\nimport { ButtonProps } from \"./types\";\r\n\r\n/** The button component with size and type */\r\nconst Button: FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  className,\r\n  type = \"submit\",\r\n  disabled = false,\r\n  loading = false,\r\n  size = \"default\",\r\n  removeMinWidth = false,\r\n}) => {\r\n  // #region UseMemo\r\n  const buttonClass = useMemo((): string => {\r\n    if (disabled || loading) return \"disabledBtn\";\r\n\r\n    switch (type) {\r\n      case \"submit\":\r\n        return \"submitBtn\";\r\n      case \"danger\":\r\n        return \"dangerBtn\";\r\n      case \"warning\":\r\n        return \"warningBtn\";\r\n    }\r\n  }, [type, disabled, loading]);\r\n  // #endregion UseMemo\r\n\r\n  return (\r\n    <button\r\n      className={`mainBtn ${className} ${buttonClass} ${`${size}__`} ${\r\n        removeMinWidth && \"noMinWidth__\"\r\n      }`}\r\n      onClick={() => {\r\n        if (!disabled) onClick();\r\n      }}\r\n      disabled={disabled || loading}\r\n    >\r\n      <div className={loading ? \"hideContent\" : \"\"}>{children}</div>\r\n\r\n      <div className={`loadingCircle ${loading && \"show__\"}`}></div>\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\n\r\nimport \"./DatePicker.css\";\r\nimport Icon from \"../icon/Icon\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport WebDatePicker from \"./components/webDatePicker/WebDatePicker\";\r\nimport { useFormContext } from \"react-hook-form\";\r\nimport { format } from \"date-fns\";\r\nimport Drawer from \"../drawer/Drawer\";\r\nimport { DatePickerProps } from \"./types\";\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = ({\r\n  id,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  const datePickerRef = useRef<HTMLDivElement>(null);\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  const { getValues } = useFormContext();\r\n\r\n  // #region States\r\n  const [showPicker, setShowPicker] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (datePickerRef.current && e.target) {\r\n      if (\r\n        datePickerRef.current &&\r\n        !datePickerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowPicker(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  return (\r\n    <div className=\"datePickerMainContainer\" ref={datePickerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`pickerContainer ${disabled && disabled}`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowPicker(!showPicker);\r\n          }\r\n        }}\r\n      >\r\n        <div className=\"valueContainer\">\r\n          <div className={`${!getValues(id) && placeholder}`}>\r\n            {getValues(id)\r\n              ? format(getValues(id) as Date, \"dd MMM yyyy\")\r\n              : placeholder}\r\n          </div>\r\n          <Icon\r\n            src={dropdownIcon}\r\n            className={`dropdownIcon ${showPicker ? \"dropdownIconFlip\" : \"\"}`}\r\n          />\r\n        </div>\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showPicker} updateShow={setShowPicker}>\r\n          <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n        </Drawer>\r\n      ) : (\r\n        <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DatePicker;\r\n","import \"./Icon.css\";\nimport { IconProps } from \"./types\";\n\nconst Icon: React.FC<IconProps> = ({ src, className, flat = true }) => {\n  const classNames = [\"icon\", className, flat ? \"flat__\" : \"\"].join(\" \");\n\n  return flat ? (\n    <img className={classNames} src={src && src.toString()} />\n  ) : (\n    <i\n      className={classNames}\n      style={{\n        maskImage: `url(\"${src}\"`,\n        WebkitMaskImage: `url(\"${src}\")`,\n      }}\n    ></i>\n  );\n};\n\nexport default Icon;\n\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport Icon from \"../../../icon/Icon\";\r\n\r\nimport \"./WebDatePicker.css\";\r\nimport {\r\n  addMonths,\r\n  addYears,\r\n  format,\r\n  getDaysInMonth,\r\n  isSameDay,\r\n  isToday,\r\n  setMonth,\r\n  setYear,\r\n  startOfMonth,\r\n} from \"date-fns\";\r\nimport { useController } from \"react-hook-form\";\r\nimport Button from \"../../../button/Button\";\r\n\r\nimport dropdownIcon from \"../../../../assets/dropdown.svg\";\r\n\r\ninterface DateDetails {\r\n  month: number;\r\n  date: number;\r\n  isToday: boolean;\r\n  isSelected: boolean;\r\n  fullDate: Date;\r\n}\r\n\r\nconst daysShortName = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\r\nconst monthsShortName = [\r\n  \"Jan\",\r\n  \"Feb\",\r\n  \"Mar\",\r\n  \"Apr\",\r\n  \"May\",\r\n  \"Jun\",\r\n  \"Jul\",\r\n  \"Aug\",\r\n  \"Sep\",\r\n  \"Oct\",\r\n  \"Nov\",\r\n  \"Dec\",\r\n];\r\n\r\ninterface WebDatePickerProps {\r\n  id: string;\r\n  show: boolean;\r\n  updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst WebDatePicker: React.FC<WebDatePickerProps> = ({\r\n  id,\r\n  show,\r\n  updateShow,\r\n}) => {\r\n  // #region States\r\n  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());\r\n  const [selectionMode, setSelectionMode] = useState<\"day\" | \"month\" | \"year\">(\r\n    \"day\"\r\n  );\r\n  const [allYears, setAllYears] = useState<number[]>([]);\r\n  // #endregion States\r\n\r\n  // #region Forms\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Forms\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (show && value) {\r\n      setCurrentMonth(new Date(value));\r\n    }\r\n\r\n    if (show) {\r\n      setSelectionMode(\"day\");\r\n    }\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  // #region Methods\r\n  const onAdd = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, 1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, 1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, 10));\r\n    }\r\n  };\r\n\r\n  const onMinus = () => {\r\n    if (selectionMode == \"day\") {\r\n      setCurrentMonth(addMonths(currentMonth, -1));\r\n    } else if (selectionMode == \"month\") {\r\n      setCurrentMonth(addYears(currentMonth, -1));\r\n    } else if (selectionMode == \"year\") {\r\n      setCurrentMonth(addYears(currentMonth, -10));\r\n    }\r\n  };\r\n\r\n  const switchMode = () => {\r\n    if (selectionMode == \"day\") {\r\n      setSelectionMode(\"month\");\r\n    } else if (selectionMode == \"month\") {\r\n      setSelectionMode(\"year\");\r\n    }\r\n  };\r\n  // #endregion Methods\r\n\r\n  // #region UseMemo\r\n  const allDays = useMemo((): DateDetails[] => {\r\n    const totalDays = getDaysInMonth(currentMonth);\r\n    const firstDay = startOfMonth(currentMonth).getDay() || 7;\r\n\r\n    const previousMonth = addMonths(currentMonth, -1);\r\n    const previousMonthTotalDays = getDaysInMonth(previousMonth);\r\n\r\n    const nextMonth = addMonths(currentMonth, 1);\r\n\r\n    const prevDays: DateDetails[] = new Array(firstDay)\r\n      .fill(\"\")\r\n      .map((_: string, index) => {\r\n        const date = previousMonthTotalDays - index;\r\n        const thisDate = new Date(\r\n          previousMonth.getFullYear(),\r\n          previousMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: previousMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      })\r\n      .sort((a, b) => a.date - b.date);\r\n    const allDays: DateDetails[] = new Array(totalDays)\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          currentMonth.getFullYear(),\r\n          currentMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: currentMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n    const nextDays: DateDetails[] = new Array(\r\n      42 - prevDays.length - allDays.length\r\n    )\r\n      .fill(\"\")\r\n      .map((_: string, index: number) => {\r\n        const date = index + 1;\r\n        const thisDate = new Date(\r\n          nextMonth.getFullYear(),\r\n          nextMonth.getMonth(),\r\n          date\r\n        );\r\n\r\n        let isSelected = false;\r\n        if (value) {\r\n          const selectedDate = new Date(value);\r\n          isSelected = isSameDay(selectedDate, thisDate);\r\n        }\r\n\r\n        return {\r\n          date: date,\r\n          month: nextMonth.getMonth(),\r\n          isToday: isToday(thisDate),\r\n          isSelected: isSelected,\r\n          fullDate: thisDate,\r\n        };\r\n      });\r\n\r\n    return [...prevDays, ...allDays, ...nextDays];\r\n  }, [currentMonth, value]);\r\n\r\n  const pickerTopLabel = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return format(currentMonth, \"MMM, yyyy\");\r\n    } else if (selectionMode == \"month\") {\r\n      return format(currentMonth, \"yyyy\");\r\n    } else if (selectionMode == \"year\") {\r\n      const currentYear = currentMonth.getFullYear();\r\n      const startYear = currentYear - (currentYear % 10) - 1;\r\n      const endYear = startYear + 10 + 2;\r\n\r\n      setAllYears(\r\n        new Array(endYear - startYear)\r\n          .fill(\"\")\r\n          .map((_: string, ind: number) => startYear + ind)\r\n      );\r\n      return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);\r\n    }\r\n  }, [currentMonth, selectionMode]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const datesContent = (\r\n    <div className=\"dateMainContainer\">\r\n      <div className=\"daysContainer\">\r\n        {daysShortName.map((day, index) => (\r\n          <div key={`${day}_${index}`} className=\"dateItem\">\r\n            {day}\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"dateContainer\">\r\n        {allDays.map((day: DateDetails) => (\r\n          <div\r\n            className={`dateItem ${\r\n              day.month != currentMonth.getMonth() && \"nextPreviousDate__\"\r\n            } ${day.isToday && \"isToday__\"} ${\r\n              day.isSelected && \"isSelected__\"\r\n            }`}\r\n            onClick={() => {\r\n              onChange(day.fullDate);\r\n              updateShow(false);\r\n            }}\r\n          >\r\n            {day.date}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  const monthsContent = (\r\n    <div className=\"monthContainer\">\r\n      {monthsShortName.map((mth: string, mthInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            mth == monthsShortName[new Date().getMonth()] &&\r\n            new Date().getFullYear() == currentMonth.getFullYear() &&\r\n            \"isToday__\"\r\n          } ${\r\n            value &&\r\n            mth == monthsShortName[new Date(value).getMonth()] &&\r\n            currentMonth.getFullYear() == new Date(value).getFullYear() &&\r\n            \"isSelected__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setMonth(currentMonth, mthInd));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"day\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {mth}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const yearContent = (\r\n    <div className=\"monthContainer\">\r\n      {allYears.map((yr: number, yrInd: number) => (\r\n        <div\r\n          className={`monthItem ${\r\n            new Date().getFullYear() == yr && \"isToday__\"\r\n          } ${value && yr == new Date(value).getFullYear() && \"isSelected__\"} ${\r\n            (yrInd == 0 || yrInd == allYears.length - 1) && \"nextPreviousDate__\"\r\n          }`}\r\n          onClick={() => {\r\n            setCurrentMonth(setYear(currentMonth, yr));\r\n            setTimeout(() => {\r\n              setSelectionMode(\"month\");\r\n            }, 10);\r\n          }}\r\n        >\r\n          {yr}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  const pickerContent = useMemo(() => {\r\n    if (selectionMode == \"day\") {\r\n      return datesContent;\r\n    } else if (selectionMode == \"month\") {\r\n      return monthsContent;\r\n    } else if (selectionMode == \"year\") {\r\n      return yearContent;\r\n    }\r\n  }, [selectionMode, allDays, currentMonth, allYears]);\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className={`webDatePickerMainContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n      <div className=\"topContainer\">\r\n        <div\r\n          className={`monthName ${selectionMode == \"year\" && \"noClick__\"}`}\r\n          onClick={switchMode}\r\n        >\r\n          {pickerTopLabel}\r\n        </div>\r\n        <div onClick={onMinus}>\r\n          <Icon className={`nextPreviousIcon previous__`} src={dropdownIcon} />\r\n        </div>\r\n        <div onClick={onAdd}>\r\n          <Icon className=\"nextPreviousIcon\" src={dropdownIcon} />\r\n        </div>\r\n      </div>\r\n\r\n      {pickerContent}\r\n\r\n      <Button\r\n        onClick={() => setCurrentMonth(new Date())}\r\n        className=\"todayButton\"\r\n        size=\"small\"\r\n        removeMinWidth\r\n      >\r\n        Today\r\n      </Button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default WebDatePicker;\r\n","import { useEffect, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Drawer.css\";\r\nimport { DrawerProps } from \"./types\";\r\n\r\nconst Drawer: React.FC<DrawerProps> = ({ show, updateShow, children }) => {\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\r\n  }, [show]);\r\n  // #endregion UseEffect\r\n\r\n  return (\r\n    <div className=\"drawerMainContainer\">\r\n      <div\r\n        onClick={() => updateShow(false)}\r\n        className={`drawerBackgroundContainer ${show ? \"show__\" : \"hide__\"}`}\r\n      ></div>\r\n      <div className={`drawerContentContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Drawer;\r\n","import { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport Icon from \"../icon/Icon\";\r\n\r\nimport { useController } from \"react-hook-form\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport Drawer from \"../drawer/Drawer\";\r\n\r\nimport checkIcon from \"../../assets/check.svg\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport \"./Dropdown.css\";\r\nimport { DropdownProps } from \"./types\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = ({\r\n  id,\r\n  options,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n  const isMobile = false;\r\n\r\n  // #region Refs\r\n  const dropdownContainerRef = useRef<HTMLDivElement>(null);\r\n  // #endregion Refs\r\n\r\n  // #region States\r\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Controller\r\n  const {\r\n    field: { onChange, value },\r\n  } = useController({ name: id });\r\n  // #endregion Controller\r\n\r\n  // #region Click Handler\r\n  const docOnClickHandler = (e: PointerEvent) => {\r\n    if (dropdownContainerRef.current && e.target) {\r\n      if (\r\n        dropdownContainerRef.current &&\r\n        !dropdownContainerRef.current.contains(e.target as Node)\r\n      ) {\r\n        setShowDropdown(false);\r\n      }\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"click\", docOnClickHandler);\r\n    };\r\n  }, []);\r\n  // #endregion Click Handler\r\n\r\n  // #region UseMemo\r\n  const selectedLabel = useMemo(() => {\r\n    if (value) {\r\n      const selected = options.find((opt) => opt.value == value);\r\n      return selected ? selected.label : \"\";\r\n    }\r\n\r\n    return \"\";\r\n  }, [value, options]);\r\n  // #endregion UseMemo\r\n\r\n  // #region Content\r\n  const dropdownOptionContent = (\r\n    <div\r\n      className={`dropdownOptionsContainer ${\r\n        showDropdown ? \"show__\" : \"hide__\"\r\n      }`}\r\n    >\r\n      {options.map((opt) => (\r\n        <div\r\n          className=\"dropdownOptions\"\r\n          onClick={() => {\r\n            onChange(opt.value);\r\n            setShowDropdown(false);\r\n          }}\r\n        >\r\n          <div>{opt.label}</div>\r\n          {value == opt.value && (\r\n            <Icon src={checkIcon} className=\"dropdownIcon\" />\r\n          )}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n  // #endregion Content\r\n\r\n  return (\r\n    <div className=\"dropdownContainer\" ref={dropdownContainerRef}>\r\n      <div>{label}</div>\r\n      <div\r\n        className={`dropdown ${!selectedLabel && \"placeholder__\"} ${\r\n          disabled && \"disabled__\"\r\n        }`}\r\n        onClick={() => {\r\n          if (!disabled) {\r\n            setShowDropdown(!showDropdown);\r\n          }\r\n        }}\r\n      >\r\n        <div>{selectedLabel || placeholder}</div>\r\n        <Icon\r\n          src={dropdownIcon}\r\n          className={`dropdownIcon ${showDropdown && \"dropdownIconFlip\"}`}\r\n        />\r\n\r\n        {loading && <SkeletonLoading />}\r\n      </div>\r\n\r\n      {isMobile ? (\r\n        <Drawer show={showDropdown} updateShow={setShowDropdown}>\r\n          {dropdownOptionContent}\r\n        </Drawer>\r\n      ) : (\r\n        dropdownOptionContent\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Dropdown;\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\ntype SnackbarType = \"info\" | \"danger\" | \"warning\" | \"success\";\r\ninterface SnackbarReturn {\r\n  /** To show the snackbar */\r\n  showSnackbar: (\r\n    /** Can be in any string format of the message to show */\r\n    message: string,\r\n    /** info, danger, warning or success - default: info */\r\n    type?: SnackbarType\r\n  ) => void;\r\n}\r\n\r\n/** Init the snackbar container\r\n *\r\n * @param id To set the id of the root container of the snackbar - default: snackbarRoot\r\n * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000\r\n */\r\nexport const useSnackbar = (\r\n  body?: HTMLElement | null,\r\n  id: string = \"snackbarRoot\",\r\n  timeout: number = 3000\r\n): SnackbarReturn => {\r\n  const snackbarElement = useRef<HTMLDivElement>(null);\r\n  const timeoutId = useRef<any>(null);\r\n  let root = document.getElementById(id);\r\n\r\n  // #region States\r\n  const [isShowing, setIsShowing] = useState<boolean>(false);\r\n  // #endregion States\r\n\r\n  // #region Handler\r\n  const hoverInHandler = () => {\r\n    if (timeoutId.current) {\r\n      clearTimeout(timeoutId.current);\r\n    }\r\n  };\r\n  const hoverOutHandler = () => {\r\n    timeoutId.current = setTimeout(() => {\r\n      closeSnackbar();\r\n    }, timeout);\r\n  };\r\n  // #endregion Handler\r\n\r\n  // #region UseEffect\r\n  useEffect(() => {\r\n    if (!root) {\r\n      const rootDiv = document.createElement(\"div\");\r\n      rootDiv.setAttribute(\"id\", id);\r\n\r\n      const contentDiv = document.createElement(\"div\");\r\n      contentDiv.className = \"snackbarContentContainer\";\r\n\r\n      const contentInnerDiv = document.createElement(\"div\");\r\n      contentInnerDiv.className = \"hide__\";\r\n\r\n      contentDiv.appendChild(contentInnerDiv);\r\n      rootDiv.appendChild(contentDiv);\r\n\r\n      if (body) {\r\n        body.appendChild(rootDiv);\r\n      } else {\r\n        document.body.appendChild(rootDiv);\r\n      }\r\n\r\n      root = rootDiv;\r\n    }\r\n\r\n    if (root) {\r\n      const snackbarContainer = root.children[0];\r\n\r\n      if (snackbarContainer) {\r\n        const snackbar = snackbarContainer.children[0];\r\n\r\n        if (snackbar) {\r\n          snackbarElement.current = snackbar as HTMLDivElement;\r\n        }\r\n      }\r\n    }\r\n  }, []);\r\n  // #endregion UseEffect\r\n\r\n  const showSnackbar = (message: string, type: SnackbarType = \"info\") => {\r\n    let animTimeout = 0;\r\n    if (isShowing) {\r\n      closeSnackbar();\r\n      animTimeout = 300;\r\n    }\r\n\r\n    setTimeout(() => {\r\n      if (snackbarElement.current) {\r\n        snackbarElement.current.innerHTML = message;\r\n        snackbarElement.current.className = `show__ ${type}__`;\r\n\r\n        setIsShowing(true);\r\n      }\r\n    }, animTimeout);\r\n  };\r\n\r\n  const closeSnackbar = () => {\r\n    if (snackbarElement.current) {\r\n      snackbarElement.current.className = `hide__`;\r\n\r\n      setIsShowing(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isShowing && snackbarElement.current) {\r\n      snackbarElement.current.addEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.addEventListener(\"mouseleave\", hoverOutHandler);\r\n\r\n      if (timeoutId.current) {\r\n        clearTimeout(timeoutId.current);\r\n      }\r\n\r\n      timeoutId.current = setTimeout(() => {\r\n        closeSnackbar();\r\n      }, timeout);\r\n    } else if (snackbarElement.current) {\r\n      snackbarElement.current.removeEventListener(\"mouseenter\", hoverInHandler);\r\n      snackbarElement.current.removeEventListener(\r\n        \"mouseleave\",\r\n        hoverOutHandler\r\n      );\r\n    }\r\n  }, [isShowing]);\r\n\r\n  return {\r\n    showSnackbar,\r\n  };\r\n};\r\n","import { useEffect } from \"react\";\r\nimport {\r\n  NotificationType,\r\n  PopupType,\r\n  QuestionType,\r\n  UsePostMessageReturn,\r\n} from \"./types\";\r\n\r\n/**\r\n * React hook for communicating iframe dimensions and messages\r\n * to a parent window.\r\n *\r\n * This hook automatically:\r\n * - Sends initial iframe dimensions on mount\r\n * - Updates dimensions on DOM content load\r\n * - Updates dimensions on window resize\r\n *\r\n * @param url - The target origin for `postMessage`\r\n *\r\n * @returns Functions for sending dimensions and posting custom messages\r\n */\r\nexport const usePostMessage = (url: string): UsePostMessageReturn => {\r\n  const sendDimension = () => {\r\n    const body = document.body;\r\n    const html = document.documentElement;\r\n\r\n    const width = Math.max(\r\n      body.scrollWidth,\r\n      body.offsetWidth,\r\n      html.clientWidth,\r\n      html.scrollWidth,\r\n      html.offsetWidth\r\n    );\r\n\r\n    const height = Math.max(\r\n      body.scrollHeight,\r\n      body.offsetHeight,\r\n      html.clientHeight,\r\n      html.scrollHeight,\r\n      html.offsetHeight\r\n    );\r\n\r\n    window.parent.postMessage({ type: \"resize\", height, width }, url);\r\n  };\r\n\r\n  const postMessage = (data: any) => {\r\n    window.parent.postMessage(data, url);\r\n  };\r\n\r\n  const postNotification = (data: NotificationType) => {\r\n    window.parent.postMessage(\r\n      {\r\n        type: \"noti\",\r\n        data: data,\r\n      },\r\n      url\r\n    );\r\n  };\r\n\r\n  const postPopup = (data: PopupType) => {\r\n    window.parent.postMessage({ type: \"popup\", data: data }, url);\r\n  };\r\n\r\n  const postQuestion = (data: QuestionType): Promise<string> => {\r\n    window.parent.postMessage({ type: \"question\", data: data }, url);\r\n\r\n    let resolve: (value: string | PromiseLike<string>) => void;\r\n    const prom = new Promise<string>((res) => (resolve = res));\r\n\r\n    const messageHandler = (ev: MessageEvent) => {\r\n      resolve(ev.data);\r\n      window.removeEventListener(\"message\", messageHandler);\r\n    };\r\n    window.addEventListener(\"message\", messageHandler);\r\n\r\n    return prom;\r\n  };\r\n\r\n  useEffect(() => {\r\n    sendDimension();\r\n\r\n    window.addEventListener(\"DOMContentLoaded\", sendDimension);\r\n    window.addEventListener(\"resize\", sendDimension);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"DOMContentLoaded\", sendDimension);\r\n      window.removeEventListener(\"resize\", sendDimension);\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    sendDimension,\r\n    postMessage,\r\n    postNotification,\r\n    postPopup,\r\n    postQuestion,\r\n  };\r\n};\r\n"],"mappings":"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","names":["jsx","jsx","jsxs","useEffect","useState","jsx","useMemo","useController","jsx","jsxs","useController","useMemo","allDays","format","useEffect","jsx","jsxs","jsx","jsxs","useState","useEffect","format","useEffect","useMemo","useRef","useState","useController","jsx","jsxs","useRef","useState","useController","useEffect","useMemo","useEffect","useRef","useState","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aziziaziz/react-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Reusable React components library",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/dropdown/Dropdown.css

@@ -0,0 +1,114 @@
+:root {
+  --optionsHeight: 40px;
+}
+
+.dropdownContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  align-items: flex-start;
+  position: relative;
+}
+.dropdown {
+  width: 100%;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  border: 1px solid var(--border-color);
+  outline: none;
+  border-radius: 8px;
+  transition: var(--transTime);
+  padding: 10px 15px;
+  height: 45px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  cursor: pointer;
+  transition: var(--transTime);
+  position: relative;
+
+  &.disabled__ {
+    background-color: var(--btn-disabled-bg);
+    color: var(--btn-disabled-text);
+    border-color: transparent;
+    cursor: not-allowed;
+  }
+
+  &.placeholder__ {
+    color: rgba(var(--color-text-rgb), 0.4);
+  }
+}
+.dropdownIcon {
+  transition: var(--transTime);
+  transform: scaleY(1);
+}
+.dropdownIconFlip {
+  transform: scaleY(-1);
+}
+.dropdownOptionsContainer {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 10px);
+  border: 1px solid var(--border-color);
+  background-color: var(--color-bg);
+  border-radius: 10px;
+  width: 100%;
+  z-index: 2;
+  max-height: calc(var(--optionsHeight) * 5);
+  overflow: auto;
+  transition: var(--transTime);
+  scrollbar-gutter: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    padding: 0;
+    margin: 0;
+    background-clip: padding-box;
+    border-radius: 50px;
+    background-color: rgba(var(--color-text-rgb), 0.75);
+    min-height: 60px;
+  }
+
+  &.show__ {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  &.hide__ {
+    transform: translateY(-10%);
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+.dropdownOptions {
+  height: var(--optionsHeight);
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(var(--color-bg-rgb-reverse), 0.2);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+@media (max-width: 799.98px) {
+  .dropdownOptionsContainer {
+    position: relative;
+    max-height: unset;
+    left: unset;
+    top: unset;
+    border: none;
+  }
+}

package/src/components/input/Input.css

@@ -18,6 +18,7 @@
   border-radius: 8px;
   transition: var(--transTime);
   padding: 10px 15px;
+  height: 45px;
 }
 input:focus {
   box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);