@shoplflow/base 0.19.0 → 0.20.1

package/dist/index.cjs

@@ -39,10 +39,14 @@ var Scrollbars__default = /*#__PURE__*/_interopDefault(Scrollbars);
 var ShoplAssets__namespace = /*#__PURE__*/_interopNamespace(ShoplAssets);
 var HadaAssets__namespace = /*#__PURE__*/_interopNamespace(HadaAssets);
 
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -70,6 +74,74 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"(exports, module) {
+    (function() {
+      var hasOwn = {}.hasOwnProperty;
+      function classNames2() {
+        var classes = [];
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (!arg)
+            continue;
+          var argType = typeof arg;
+          if (argType === "string" || argType === "number") {
+            classes.push(arg);
+          } else if (Array.isArray(arg)) {
+            if (arg.length) {
+              var inner = classNames2.apply(null, arg);
+              if (inner) {
+                classes.push(inner);
+              }
+            }
+          } else if (argType === "object") {
+            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+              classes.push(arg.toString());
+              continue;
+            }
+            for (var key in arg) {
+              if (hasOwn.call(arg, key) && arg[key]) {
+                classes.push(key);
+              }
+            }
+          }
+        }
+        return classes.join(" ");
+      }
+      if (typeof module !== "undefined" && module.exports) {
+        classNames2.default = classNames2;
+        module.exports = classNames2;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames2;
+        });
+      } else {
+        window.classNames = classNames2;
+      }
+    })();
+  }
+});
 exports.useDomain = (domain = "SHOPL") => {
   const [domainType, setDomainType] = React3.useState(void 0);
   React3.useEffect(() => {
@@ -858,10 +930,10 @@ var useOnToggle = (selected, defaultSelected) => {
     }
   }, [isControlled, selected]);
   React3.useEffect(() => {
-    if (defaultSelected !== void 0) {
+    if (!isControlled && defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
-  }, [defaultSelected]);
+  }, [defaultSelected, isControlled]);
   return [isToggle, handleToggle];
 };
 var Switch = (_a) => {
@@ -1016,15 +1088,29 @@ exports.ChipToggle = ChipToggle;
 // src/utils/getNextColor.ts
 var getNextColor = (color, step = 1) => {
   const colorName = color.replace(/[0-9]|_/g, "");
-  const colorNumberString = color.replace(/[a-z]|_/g, "");
-  const decimalColorNumber = Number(colorNumberString) * 0.01;
-  const nextColorNumber = Math.floor(decimalColorNumber) + 100 * step;
-  const nextColorToken = `${colorName}${nextColorNumber}`;
-  const colorKeysOfColorName = Object.keys(exports.colorTokens).filter((colorToken) => colorToken.includes(colorName)).sort((a, b) => Number(a.replace(/[a-z]|_/g, "")) - Number(b.replace(/[a-z]|_/g, "")));
   const colorTokenKeys = Object.keys(exports.colorTokens);
-  const findColorToken = colorTokenKeys.find((colorToken) => colorToken === nextColorToken);
-  const lastColorToken = colorKeysOfColorName[colorKeysOfColorName.length - 1];
-  return findColorToken ? findColorToken : lastColorToken;
+  const findColorToken = colorTokenKeys.filter((colorToken) => colorToken.includes(colorName));
+  const extractNumbers = (str) => {
+    const formattedStr = str.replace(/_/g, ".");
+    const regex = /\d+(\.\d+)?/g;
+    const match = formattedStr.match(regex);
+    return match ? parseFloat(match[0]) : 0;
+  };
+  const sortColorToken = findColorToken.sort((a, b) => extractNumbers(a) - extractNumbers(b));
+  const currentIndex = sortColorToken.indexOf(color);
+  let newIndex = currentIndex + step;
+  let potentialToken = sortColorToken[newIndex];
+  while (potentialToken.endsWith("_5") || potentialToken.includes("50")) {
+    newIndex += Math.sign(step);
+    if (newIndex < 0) {
+      potentialToken = sortColorToken[0];
+    }
+    if (newIndex >= sortColorToken.length) {
+      potentialToken = sortColorToken[sortColorToken.length - 1];
+    }
+    potentialToken = sortColorToken[newIndex];
+  }
+  return potentialToken;
 };
 
 // src/components/Chips/ChipButton/ChipButton.styled.ts
@@ -1848,7 +1934,7 @@ exports.StyledMenu = styled5__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
-  ${({ isSelected, leftSource }) => isSelected && !leftSource && react$1.css`
+  ${({ isSelected, leftSource }) => isSelected === true && !leftSource && react$1.css`
       background: ${exports.colorTokens.neutral200};
       &:hover {
         background: ${exports.colorTokens.neutral200};
@@ -1888,7 +1974,7 @@ var Menu = (_a) => {
   ] }));
 };
 exports.Menu = Menu;
-exports.StyledList = styled5__default.default.div`
+exports.StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -1921,14 +2007,141 @@ var List = (_a) => {
     rightSource && rightSource
   ] }));
 };
-var Text2Rows = ({ title, subTitle }) => {
+exports.Text2Rows = ({ title, subTitle }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledText2Rows, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_500", color: "neutral700", children: title }),
     subTitle && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_400", color: "neutral400", children: subTitle })
   ] });
 };
-List.Text2Rows = Text2Rows;
+List.Text2Rows = exports.Text2Rows;
 exports.List = List;
+var getTypographyBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "caption_400";
+    case "S":
+      return "caption_400";
+    case "M":
+      return "body2_400";
+    default:
+      return "body2_400";
+  }
+};
+var getTagStyleBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return react$1.css`
+        height: 20px;
+        padding: 0 4px;
+        border-radius: 4px;
+      `;
+    case "S":
+      return react$1.css`
+        height: 24px;
+        padding: 0 8px;
+        border-radius: 4px;
+      `;
+    case "M":
+      return react$1.css`
+        padding: 4px 8px;
+        height: 32px;
+        border-radius: 6px;
+      `;
+    default:
+      return react$1.css`
+        padding: 4px 8px;
+        height: 32px;
+      `;
+  }
+};
+var getRadiusBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return react$1.css`
+        border-radius: 12px;
+      `;
+    case "S":
+      return react$1.css`
+        border-radius: 16px;
+      `;
+    case "M":
+      return react$1.css`
+        border-radius: 16px;
+      `;
+    default:
+      return react$1.css`
+        border-radius: 16px;
+      `;
+  }
+};
+var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
+  switch (styleVariant) {
+    case "SOLID":
+      return react$1.css`
+        background: ${exports.colorTokens[color]};
+        color: ${exports.colorTokens.neutral0};
+      `;
+    case "TINT":
+      return react$1.css`
+        background: ${exports.colorTokens[getNextColor(color, -2)]};
+        color: ${exports.colorTokens[color]};
+      `;
+    case "LINE":
+      return react$1.css`
+        background: transparent;
+        color: ${exports.colorTokens[color]};
+        border: 1px solid ${exports.colorTokens[color]};
+      `;
+    default:
+      return react$1.css`
+        background: ${exports.colorTokens[color]};
+        color: ${exports.colorTokens.neutral0};
+      `;
+  }
+};
+var StyledTag = styled5__default.default.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  cursor: default;
+  gap: 2px;
+  ${({ sizeVar }) => getTagStyleBySize(sizeVar)};
+  ${({ color, styleVar }) => getColorsByStyleVariant(styleVar, color)};
+  ${({ radius, sizeVar }) => radius && getRadiusBySize(sizeVar)};
+`;
+
+// src/components/Tag/Tag.tsx
+var import_classnames = __toESM(require_classnames(), 1);
+var Tag = (_a) => {
+  var _b = _a, { sizeVar, children, rightSource, leftSource, className } = _b, rest = __objRest(_b, ["sizeVar", "children", "rightSource", "leftSource", "className"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledTag,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      className: (0, import_classnames.default)(getTypographyBySize(sizeVar), className)
+    }, rest), {
+      "data-shoplflow": "Tag",
+      children: [
+        leftSource && leftSource,
+        children,
+        rightSource && rightSource
+      ]
+    })
+  );
+};
+exports.Tag = Tag;
+
+// src/components/Tag/Tag.types.ts
+exports.TagStyleVariants = {
+  SOLID: "SOLID",
+  TINT: "TINT",
+  LINE: "LINE"
+};
+exports.TagSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
 var StyledInput = styled5__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -2658,6 +2871,15 @@ var Radio = (_a) => {
   );
 };
 exports.Radio = Radio;
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+*/
 
 Object.defineProperty(exports, 'arrow', {
   enumerable: true,