master-components-react-ts 2.1.2 → 2.1.3

package/dist/assets/components/TimePicker/TimePicker.module-DfRiUaeb.css

@@ -0,0 +1,150 @@
+@font-face {
+  font-family: "Inter-Regular";
+  src: url("/assets/Inter_24pt-Regular-C7SEt4-L.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-SemiBold";
+  src: url("/assets/Inter_24pt-SemiBold-DIQUEucn.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-SemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-Medium";
+  src: url("/assets/Inter_24pt-Medium-C1cYvkz2.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Medium.woff") format("woff");
+}
+.TimePicker-module__timepickerWrapper {
+  user-select: none;
+  scroll-behavior: smooth;
+  width: 100%;
+}
+.TimePicker-module__timepickerWrapper * {
+  scrollbar-width: none;
+}
+.TimePicker-module__timepickerWrapper *::-webkit-scrollbar {
+  display: none;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerInputWrapper {
+  width: 100%;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerInputWrapper .TimePicker-module__dropdownRightIcon {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerInputWrapper .TimePicker-module__dropdownRightIcon .TimePicker-module__dropdownRightIconClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerInputWrapper .TimePicker-module__dropdownRightIcon .TimePicker-module__dropdownRightIconArrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerInputWrapper .TimePicker-module__dropdownRightIcon.TimePicker-module__focused .TimePicker-module__dropdownRightIconArrow {
+  transform: rotate(180deg);
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper {
+  width: 218px;
+  border-radius: 12px;
+  box-shadow: 0px 2px 4px 0px rgba(19, 19, 20, 0.04);
+  border: 1px solid #e6e6e6;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownHeader {
+  padding: 8px 8px 0 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownHeader .TimePicker-module__timepickerDropdownHeaderButtons {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 2px;
+  border-radius: 8px;
+  background: #f2f2f2;
+  padding: 2px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownHeader p {
+  padding: 5px 20px;
+  color: #646569;
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: "Inter-Regular", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  letter-spacing: 0.1px;
+  cursor: pointer;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownHeader p.TimePicker-module__active {
+  color: #131314;
+  border-radius: 6px 6px 6px 6px;
+  background: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(19, 19, 20, 0.04);
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody {
+  width: 100%;
+  display: flex;
+  border-top: 1px solid #e6e6e6;
+  border-bottom: 1px solid #e6e6e6;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody .TimePicker-module__timepickerDropdownBodyHours {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 230px;
+  overflow-y: auto;
+  border-right: 1px solid #e6e6e6;
+  padding: 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody .TimePicker-module__timepickerDropdownBodyMinutes {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 230px;
+  overflow-y: auto;
+  padding: 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody .TimePicker-module__timepickerDropdownBodyAmPm {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 230px;
+  overflow-y: auto;
+  border-left: 1px solid #e6e6e6;
+  padding: 8px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody p {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 100%;
+  color: #131314;
+  text-align: center;
+  font-feature-settings: "liga" off, "clig" off;
+  text-overflow: ellipsis;
+  /* UI/14 regular */
+  font-family: "Inter-Regular", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  letter-spacing: 0.1px;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody p:hover {
+  background: #fafafa;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownBody p.TimePicker-module__active {
+  background: #ECF3FF;
+  color: #0058FF;
+}
+.TimePicker-module__timepickerWrapper .TimePicker-module__timepickerDropdownWrapper .TimePicker-module__timepickerDropdownFooter {
+  padding: 8px;
+}

package/dist/assets/components/Toggle/Toggle.module-DBfTR8Br.css

@@ -0,0 +1,75 @@
+@font-face {
+  font-family: "Inter-Regular";
+  src: url("/assets/Inter_24pt-Regular-C7SEt4-L.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-SemiBold";
+  src: url("/assets/Inter_24pt-SemiBold-DIQUEucn.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-SemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-Medium";
+  src: url("/assets/Inter_24pt-Medium-C1cYvkz2.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Medium.woff") format("woff");
+}
+.Toggle-module__toggleWrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 13.333px;
+  background: #c1c2c7;
+  padding: 4px;
+  cursor: pointer;
+}
+.Toggle-module__toggleWrapper.Toggle-module__checked {
+  background: #0058FF;
+}
+.Toggle-module__toggleWrapper.Toggle-module__error {
+  background: #e3292f;
+}
+.Toggle-module__toggleWrapper.Toggle-module__disabled {
+  background: #d4d5d6;
+  cursor: not-allowed;
+}
+.Toggle-module__toggleWrapper.Toggle-module__disabled.Toggle-module__checked {
+  background: #95969c;
+}
+.Toggle-module__toggleWrapper.Toggle-module__sm {
+  width: 24px;
+  height: 16px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__sm.Toggle-module__checked .Toggle-module__toggleState {
+  left: calc(100% - 12px);
+}
+.Toggle-module__toggleWrapper.Toggle-module__sm .Toggle-module__toggleState {
+  width: 8px;
+  height: 8px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__md {
+  width: 32px;
+  height: 20px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__md.Toggle-module__checked .Toggle-module__toggleState {
+  left: calc(100% - 16px);
+}
+.Toggle-module__toggleWrapper.Toggle-module__md .Toggle-module__toggleState {
+  width: 12px;
+  height: 12px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__lg {
+  width: 40px;
+  height: 24px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__lg .Toggle-module__toggleState {
+  width: 16px;
+  height: 16px;
+}
+.Toggle-module__toggleWrapper.Toggle-module__lg.Toggle-module__checked .Toggle-module__toggleState {
+  left: calc(100% - 20px);
+}
+.Toggle-module__toggleWrapper .Toggle-module__toggleState {
+  border-radius: 8px;
+  background: #fff;
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  transform: translateY(-50%);
+  transition: 0.2s all;
+}

package/dist/assets/components/Tooltip/Tooltip.module-DEYqvQtd.css

@@ -0,0 +1,113 @@
+@font-face {
+  font-family: "Inter-Regular";
+  src: url("/assets/Inter_24pt-Regular-C7SEt4-L.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-SemiBold";
+  src: url("/assets/Inter_24pt-SemiBold-DIQUEucn.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-SemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-Medium";
+  src: url("/assets/Inter_24pt-Medium-C1cYvkz2.woff2") format("woff2"), url("../../assets/fonts/Inter_24pt-Medium.woff") format("woff");
+}
+.Tooltip-module__tooltipContainer {
+  position: relative;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent {
+  border-radius: 0.5rem;
+  background: #181d27;
+  padding: 0.75rem;
+  max-width: 200px;
+  min-width: 118px;
+  position: absolute;
+  z-index: 99999;
+  word-break: break-word;
+  /* Absolute positioning */
+  /* CSS border triangles */
+  /* Absolute positioning */
+  /* CSS border triangles */
+  /* Absolute positioning */
+  /* CSS border triangles */
+  /* Absolute positioning */
+  /* CSS border triangles */
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__withoutPointer::before {
+  all: initial;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent::before {
+  content: " ";
+  left: 50%;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-width: 6px;
+  margin-left: -6px;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__top::before {
+  top: 100%;
+  border-top-color: #181d27;
+  left: var(--pointer-position);
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__right::before {
+  left: -6px;
+  top: 50%;
+  transform: translateX(0) translateY(-50%);
+  border-right-color: #181d27;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__bottom::before {
+  bottom: 100%;
+  left: var(--pointer-position);
+  border-bottom-color: #181d27;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__left::before {
+  left: auto;
+  right: -12px;
+  top: 50%;
+  transform: translateX(0) translateY(-50%);
+  border-left-color: #181d27;
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent .Tooltip-module__tooltipTitle {
+  width: 100%;
+  word-break: break-word;
+  color: #fff;
+  font-family: "Inter-Regular", sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.125rem; /* 150% */
+}
+.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent .Tooltip-module__tooltipText {
+  width: 100%;
+  word-break: break-word;
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Inter-Regular", sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.125rem; /* 150% */
+}
+
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent {
+  background: #ffffff;
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__top::before {
+  border-top-color: #ffffff;
+  left: var(--pointer-position);
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__right::before {
+  border-right-color: #ffffff;
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__bottom::before {
+  border-bottom-color: #ffffff;
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent.Tooltip-module__left::before {
+  border-left-color: #ffffff;
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent .Tooltip-module__tooltipTitle {
+  color: #0c0e12;
+}
+.Tooltip-module__dark.Tooltip-module__tooltipContainer .Tooltip-module__tooltipContent .Tooltip-module__tooltipText {
+  color: rgba(12, 14, 18, 0.9);
+}

package/dist/components/ActionDropdown/ActionDropdown.js

@@ -0,0 +1,74 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./ActionDropdown.module.scss.js";
+import { IconArrowUp } from "../../assets/Icons/IconArrowUp.js";
+import { useState, useRef, useEffect } from "react";
+const ActionDropdown = ({ title, data, onSelect }) => {
+  const [Collapsed, setCollapsed] = useState(false);
+  const DropdownRef = useRef(null);
+  const ListRef = useRef(null);
+  const [Selected, setSelected] = useState(null);
+  const HandleSelect = (item) => {
+    setSelected(item);
+    onSelect?.(item);
+    setCollapsed(false);
+  };
+  const CalculatePos = () => {
+    const componentEl = DropdownRef.current;
+    const dropdownEl = ListRef.current;
+    if (!dropdownEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    dropdownEl.style.position = "fixed";
+    dropdownEl.style.width = componentRect.width + "px";
+    dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
+    if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
+      dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight - 4}px`;
+      dropdownEl.style.bottom = "unset";
+    } else {
+      dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
+      dropdownEl.style.bottom = "unset";
+    }
+  };
+  useEffect(() => {
+    CalculatePos();
+  }, [DropdownRef, Collapsed]);
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!DropdownRef.current) return;
+      if (event.composedPath().includes(DropdownRef.current)) return;
+      setCollapsed(false);
+    };
+    const ScrollHandler = (event) => {
+      if (!DropdownRef.current || !ListRef.current) return;
+      if (ListRef.current.contains(event.target)) return;
+      setCollapsed(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("wheel", ScrollHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+      document.removeEventListener("wheel", ScrollHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.actionDropdownContainer} ${Collapsed ? style.collapsed : ""}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: DropdownRef, className: style.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { title, className: style.actionDropdownTitle, children: Selected?.label || title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.actionDropdownIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
+    ] }),
+    Collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "li",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          HandleSelect(item);
+        },
+        className: `${style.actionDropdownItem} ${Selected?.id === item.id ? style.selected : ""}`,
+        children: item.label
+      },
+      item.id
+    )) }, data.length)
+  ] });
+};
+export {
+  ActionDropdown as default
+};

package/dist/components/ActionDropdown/ActionDropdown.module.scss.js

@@ -0,0 +1,29 @@
+const actionDropdownContainer = "ActionDropdown-module__actionDropdownContainer";
+const collapsed = "ActionDropdown-module__collapsed";
+const actionDropdownIcon = "ActionDropdown-module__actionDropdownIcon";
+const actionDropdownContent = "ActionDropdown-module__actionDropdownContent";
+const actionDropdownTitle = "ActionDropdown-module__actionDropdownTitle";
+const actionDropdownList = "ActionDropdown-module__actionDropdownList";
+const actionDropdownItem = "ActionDropdown-module__actionDropdownItem";
+const selected = "ActionDropdown-module__selected";
+const style = {
+  actionDropdownContainer,
+  collapsed,
+  actionDropdownIcon,
+  actionDropdownContent,
+  actionDropdownTitle,
+  actionDropdownList,
+  actionDropdownItem,
+  selected
+};
+export {
+  actionDropdownContainer,
+  actionDropdownContent,
+  actionDropdownIcon,
+  actionDropdownItem,
+  actionDropdownList,
+  actionDropdownTitle,
+  collapsed,
+  style as default,
+  selected
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,54 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useRef, useState } from "react";
+import style from "./Checkbox.module.scss.js";
+import { useNamespace } from "../../context/NamespaceContext.js";
+import { IconMinus } from "../../assets/Icons/IconMinus.js";
+import { IconCheckmark } from "../../assets/Icons/IconCheckmark.js";
+const Checkbox = ({
+  checked,
+  change,
+  type = "default",
+  disabled = false,
+  required = false,
+  multipleChecked = false,
+  activeStyle,
+  checkBoxStyle,
+  theme = "light"
+}) => {
+  const namespace = useNamespace();
+  const CheckboxRef = useRef(null);
+  const [isActive, setIsActive] = useState(false);
+  const onChange = () => {
+    if (disabled) return;
+    if (change && typeof change === "function") {
+      change(!checked);
+    }
+  };
+  const getStyle = () => {
+    if (isActive) {
+      if (disabled) {
+        return { boxShadow: "none" };
+      }
+      return activeStyle ?? {};
+    }
+    return checkBoxStyle ?? {};
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      style: getStyle(),
+      className: `${theme === "dark" ? style.dark : ""}  ${style[namespace]} ${style.checkboxWrapper} ${type === "error" ? style.error : ""} ${checked ? style.checked : style.unChecked} ${disabled ? style.disabled : ""}`,
+      onMouseDown: () => setIsActive(true),
+      onMouseUp: () => setIsActive(false),
+      onMouseLeave: () => setIsActive(false),
+      onClick: onChange,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref: CheckboxRef, type: "checkbox", disabled, checked: checked ?? false, hidden: true, readOnly: true, required: required ?? false }),
+        checked ? multipleChecked ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconMinus, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheckmark, {}) : ""
+      ]
+    }
+  );
+};
+export {
+  Checkbox as default
+};

package/dist/components/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,26 @@
+const checkboxWrapper = "Checkbox-module__checkboxWrapper";
+const checkMark = "Checkbox-module__checkMark";
+const error = "Checkbox-module__error";
+const checked = "Checkbox-module__checked";
+const disabled = "Checkbox-module__disabled";
+const namespaceHr = "Checkbox-module__Namespace_Hr";
+const dark = "Checkbox-module__dark";
+const style = {
+  checkboxWrapper,
+  checkMark,
+  error,
+  checked,
+  disabled,
+  namespaceHr,
+  dark
+};
+export {
+  checkMark,
+  checkboxWrapper,
+  checked,
+  dark,
+  style as default,
+  disabled,
+  error,
+  namespaceHr
+};