@shoplflow/base 0.26.7 → 0.26.9

package/dist/index.cjs

@@ -942,7 +942,7 @@ var ModalBody = ({
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
   const headerHeight = 64;
-  const footerHeight = 64;
+  const footerHeight = 72;
   const topBottomMargin = 64;
   const getHeaderFooterHeight = React3.useCallback(() => {
     let result = 0;
@@ -2794,6 +2794,12 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
+var StyledTree = styled6__default.default.div``;
+var Tree = (_a) => {
+  var rest = __objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTree, __spreadProps(__spreadValues({}, rest), { "data-shoplflow": "Tree", children: "Tree" }));
+};
+exports.Tree = Tree;
 var StyledInput = styled6__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -3436,6 +3442,263 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
+exports.TabsContext = React3.createContext(null);
+exports.useTabs = () => {
+  const context = React3.useContext(exports.TabsContext);
+  if (context === null) {
+    throw new Error("useTabs should be used in Tabs");
+  }
+  return context;
+};
+var getHoverTabStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return react$1.css`
+        ::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -2px;
+          height: 2px;
+          background: ${exports.colorTokens.neutral500};
+        }
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getWrapperStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return react$1.css`
+        padding-inline: 16px;
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getActiveTriggerStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "INFO": {
+      return react$1.css`
+        ::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -2px;
+          height: 2px;
+          background: #000;
+        }
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var StyledTab = styled6__default.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  width: fit-content;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  ${({ styleVar }) => styleVar && getWrapperStyleByStyleVar(styleVar)};
+
+  /* hover style */
+  ${({ isActive, isHover, styleVar }) => !isActive && isHover && styleVar && getHoverTabStyleByStyleVar(styleVar)}
+
+  /* active style */
+  ${({ isActive, styleVar }) => isActive && styleVar && getActiveTriggerStyleByStyleVar(styleVar)}
+`;
+var getTextStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return react$1.css`
+        color: ${exports.colorTokens.neutral400};
+      `;
+    }
+    case "INFO": {
+      return react$1.css`
+        color: ${exports.colorTokens.neutral500};
+      `;
+    }
+  }
+};
+var getHoverTextStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return react$1.css`
+        color: ${exports.colorTokens.neutral500};
+      `;
+    }
+    case "INFO": {
+      return react$1.css`
+        color: ${exports.colorTokens.neutral700};
+      `;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+var getActiveTextStyleByStyleVar = (styleVar, activeColor) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return react$1.css`
+        color: ${activeColor ? exports.colorTokens[activeColor] : exports.colorTokens.neutral700};
+      `;
+    }
+    case "INFO": {
+      return react$1.css`
+        color: ${exports.colorTokens.neutral700};
+      `;
+    }
+    default: {
+      return react$1.css`
+        color: ${exports.colorTokens.primary300};
+      `;
+    }
+  }
+};
+var StyledTabText = styled6__default.default(exports.Text)`
+  cursor: pointer;
+
+  ${({ styleVar }) => styleVar && getTextStyleByStyleVar(styleVar)};
+
+  /* hover style */
+  ${({ isHover, styleVar, isActive }) => !isActive && isHover && styleVar && getHoverTextStyleByStyleVar(styleVar)}
+
+  /* active style */
+  ${({ isActive, styleVar, activeColor }) => isActive && styleVar && getActiveTextStyleByStyleVar(styleVar, activeColor)}
+`;
+var StyledIndicator = styled6__default.default(framerMotion.motion.div)`
+  position: absolute;
+  bottom: -2px;
+  left: 0px;
+  right: 0px;
+  height: 2px;
+  background-color: black;
+  width: 100%;
+`;
+var Indicator = ({ layoutId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledIndicator, { layoutId, transition: { duration: 0.2 } });
+};
+var Tab = (_a) => {
+  var _b = _a, {
+    value,
+    label,
+    leftSource,
+    rightSource,
+    as,
+    styleVar = "NORMAL",
+    sizeVar = "L",
+    onClick,
+    activeColor
+  } = _b, args = __objRest(_b, [
+    "value",
+    "label",
+    "leftSource",
+    "rightSource",
+    "as",
+    "styleVar",
+    "sizeVar",
+    "onClick",
+    "activeColor"
+  ]);
+  const { activeTab, setActiveTab } = exports.useTabs();
+  const [isHover, setIsHover] = React3.useState(false);
+  const isActive = value === activeTab;
+  const hoverHandler = React3.useCallback(() => {
+    setIsHover(true);
+  }, []);
+  const unhoverHandler = React3.useCallback(() => {
+    setIsHover(false);
+  }, []);
+  const clickHandler = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    setActiveTab(value);
+  };
+  let typography = "title1_700";
+  if (styleVar === "INFO") {
+    typography = "body1_700";
+  }
+  if (styleVar === "NORMAL" && sizeVar === "M") {
+    typography = "title2_700";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledTab,
+    __spreadProps(__spreadValues({
+      isActive,
+      as,
+      onClick: clickHandler,
+      onMouseOver: hoverHandler,
+      onMouseLeave: unhoverHandler,
+      onFocus: hoverHandler,
+      onBlur: unhoverHandler,
+      isHover,
+      styleVar
+    }, args), {
+      children: [
+        leftSource,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StyledTabText,
+          {
+            isHover,
+            lineClamp: 2,
+            typography: `${typography}`,
+            isActive,
+            activeColor,
+            styleVar,
+            children: label
+          }
+        ),
+        rightSource,
+        styleVar === "INFO" && isActive && /* @__PURE__ */ jsxRuntime.jsx(Indicator, { layoutId: "underline" })
+      ]
+    })
+  );
+};
+var Tabs = ({ children, initialTab, onChange }) => {
+  const [activeTab, setActiveTab] = React3.useState(initialTab);
+  React3.useEffect(() => {
+    if (!onChange || !activeTab) {
+      return;
+    }
+    onChange(activeTab);
+  }, [activeTab]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.TabsContext.Provider,
+    {
+      value: {
+        activeTab,
+        setActiveTab
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) })
+    }
+  );
+};
+Tabs.Tab = Tab;
+exports.Tabs = Tabs;
+
+// src/components/Tabs/Tabs.types.ts
+exports.TabStyleVariants = {
+  NORMAL: "NORMAL",
+  INFO: "INFO"
+};
+exports.TabSizeVariants = {
+  M: "M",
+  L: "L"
+};
 var PaginationWrapper = styled6__default.default.div`
   display: flex;
   align-items: center;