@aziziaziz/react-components 1.0.1 → 1.0.3

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["import \"./index.css\";\r\n\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\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\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\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"],"mappings":";AAAA,OAAO;;;ACCP,SAAS,qBAAqB;AAE9B,OAAO;;;ACFP,OAAO;AASD;AANN,IAAM,kBAA4C,CAAC,EAAE,SAAS,GAAG,MAAM;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,cAAc,GAAG,MAAM,KAAK;AAAA,MAErC,8BAAC,SAAI,WAAW,yBAAyB;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,0BAAQ;;;ADcM,gBAAAA,MACf,YADe;AAtBrB,IAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,MAAM;AAEJ,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS;AAAA,EAC3B,IAAI,cAAc;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF,CAAC;AAGD,SACE,qBAAC,SAAI,WAAU,kBACZ;AAAA,KAAC,aAAa,gBAAAA,KAAC,SAAK,iBAAM;AAAA,IAC3B,qBAAC,SAAI,WAAU,yBACb;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA;AAAA,MACF;AAAA,MACC,WAAW,gBAAAA,KAAC,2BAAgB,QAAQ,GAAG;AAAA,OAC1C;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":["jsx"]}
+{"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.1",
+  "version": "1.0.3",
   "description": "Reusable React components library",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -27,5 +27,8 @@
     "@types/react": "^19.2.7",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0"
   }
 }

package/src/components/button/Button.css

@@ -0,0 +1,98 @@
+.mainBtn {
+  border-radius: 10px;
+  padding: 10px 20px;
+  transition: var(--transTime), filter 0s;
+  border: none;
+  cursor: pointer;
+  box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
+  max-width: 260px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover:enabled {
+    filter: brightness(1.25);
+  }
+
+  &:active,
+  &:disabled {
+    box-shadow: none;
+  }
+
+  &.medium__ {
+    font-size: 14px !important;
+    padding: 8px 16px;
+  }
+
+  &.small__ {
+    font-size: 10px !important;
+    padding: 6px 12px;
+  }
+
+  &.noMinWidth__ {
+    min-width: unset;
+    max-width: unset;
+    width: fit-content;
+  }
+}
+
+.submitBtn {
+  background-color: var(--btn-submit-bg);
+  color: var(--btn-submit-text);
+}
+
+.warningBtn {
+  background-color: var(--btn-warning-bg);
+  color: var(--btn-warning-text);
+}
+
+.dangerBtn {
+  background-color: var(--btn-danger-bg);
+  color: var(--btn-danger-text);
+}
+
+.disabledBtn {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.loadingCircle {
+  border-radius: 50%;
+  border-color: transparent gray gray gray;
+  border-width: 0.2em;
+  border-style: solid;
+  position: absolute;
+  height: 1.5em;
+  width: 1.5em;
+  animation: rotate 0.5s ease-in-out infinite;
+  opacity: 0;
+
+  &.show__ {
+    opacity: 1;
+  }
+}
+
+.hideContent {
+  opacity: 0;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 799.98px) {
+  .mainBtn {
+    border-radius: 10px;
+    padding: 8px 16px;
+    max-width: 220px;
+  }
+}

package/src/components/datePicker/DatePicker.css

@@ -0,0 +1,44 @@
+.datePickerMainContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.pickerContainer {
+  position: relative;
+  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;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+.valueContainer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+}
+.placeholder {
+  color: rgba(var(--color-text-rgb), 0.4);
+}
+.disabled {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-text);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.dropdownIcon {
+  transition: var(--transTime);
+  transform: scaleY(1);
+}
+.dropdownIconFlip {
+  transform: scaleY(-1);
+}

package/src/components/datePicker/components/webDatePicker/WebDatePicker.css

@@ -0,0 +1,154 @@
+:root {
+  --dateSize: 30px;
+  --monthWidth: 50px;
+}
+
+.webDatePickerMainContainer {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 10px);
+  border: 1px solid var(--border-color);
+  padding: 10px;
+  border-radius: 8px;
+  background-color: var(--color-bg);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: var(--transTime);
+
+  &.show__ {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  &.hide__ {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-10%);
+  }
+}
+.topContainer {
+  width: 100%;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 10px;
+}
+.nextPreviousIcon {
+  cursor: pointer;
+
+  &.previous__ {
+    transform: scaleY(-1);
+  }
+}
+.monthName {
+  cursor: pointer;
+  user-select: none;
+
+  &.noClick__ {
+    cursor: default;
+  }
+}
+.dateMainContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.daysContainer,
+.dateContainer {
+  display: grid;
+  grid-template-columns: repeat(7, auto);
+}
+.monthContainer {
+  display: grid;
+  row-gap: 6px;
+  column-gap: 30px;
+  grid-template-columns: repeat(3, auto);
+}
+.dateItem {
+  height: var(--dateSize);
+  width: var(--dateSize);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  justify-self: center;
+  cursor: pointer;
+
+  &.nextPreviousDate__ {
+    opacity: 0.3;
+  }
+
+  &.isToday__ {
+    background-color: #435585;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      background-color: #9eb8ff;
+    }
+  }
+
+  &.isSelected__ {
+    box-shadow: inset 0 0 0 2px #818fb4;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
+    }
+  }
+}
+.monthItem {
+  height: var(--monthWidth);
+  width: var(--monthWidth);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  justify-self: center;
+  cursor: pointer;
+
+  &.nextPreviousDate__ {
+    opacity: 0.3;
+  }
+
+  &.isToday__ {
+    background-color: #435585;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      background-color: #9eb8ff;
+    }
+  }
+
+  &.isSelected__ {
+    box-shadow: inset 0 0 0 2px #818fb4;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
+    }
+  }
+}
+.todayButton {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  align-self: flex-end;
+  color: var(--color-text);
+
+  > :first-child {
+    font-size: 1.5em;
+  }
+}
+
+@media (max-width: 799.98px) {
+  .webDatePickerMainContainer {
+    position: relative;
+    left: unset;
+    top: unset;
+    border: none;
+    padding: 0;
+  }
+}

package/src/components/drawer/Drawer.css

@@ -0,0 +1,53 @@
+.drawerMainContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: 100dvw;
+  pointer-events: none;
+  z-index: 18;
+}
+.drawerBackgroundContainer {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgba(var(--color-bg-rgb), 0.75);
+  z-index: 1;
+  transition: var(--transTime);
+
+  &.show__ {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.hide__ {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+.drawerContentContainer {
+  width: 100%;
+  position: absolute;
+  background-color: var(--color-bg);
+  padding: 10px;
+  bottom: 0;
+  max-height: 80%;
+  z-index: 2;
+  transition: var(--transTime);
+  box-shadow: 0 0 5px 0px var(--color-bg-reverse);
+  overflow: auto;
+
+  &.show__ {
+    transform: translate(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.hide__ {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+}

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/icon/Icon.css

@@ -0,0 +1,17 @@
+.icon {
+  display: block;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background-color: var(--color-text);
+  min-width: 1em;
+  min-height: 1em;
+  width: 1em;
+  height: 1em;
+
+  &.flat__ {
+    background: none;
+    mask: none;
+  }
+}
+

package/src/index.css

@@ -45,3 +45,57 @@
   --skeleton-bg: rgb(180, 180, 180);
   --skeleton-fg: rgb(210, 210, 210);
 }
+
+#snackbarRoot {
+  z-index: 17;
+}
+.snackbarContentContainer {
+  position: fixed;
+  margin: 0 auto;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 80dvw;
+  pointer-events: none;
+
+  > div {
+    width: 100%;
+    padding: 10px 30px;
+    border-radius: 10px;
+    text-align: center;
+    transition: var(--transTime);
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    &.hide__ {
+      transform: translateY(250%);
+    }
+
+    &.show__ {
+      transform: translateY(0%);
+    }
+
+    &.danger__ {
+      background-color: var(--btn-danger-bg);
+      color: var(--btn-danger-text);
+    }
+
+    &.warning__ {
+      background-color: var(--btn-warning-bg);
+      color: var(--btn-warning-text);
+    }
+
+    &.info__ {
+      background-color: var(--color-bg-reverse);
+      color: var(--color-text-reverse);
+    }
+
+    &.success__ {
+      background-color: var(--btn-success-bg);
+      color: var(--btn-success-text);
+    }
+  }
+}