@shoplflow/base 0.18.0 → 0.20.0

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(() => {
@@ -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
@@ -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;
@@ -1938,6 +2151,17 @@ var StyledInput = styled5__default.default.input`
   &::placeholder {
     color: ${exports.colorTokens.neutral350};
   }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  &[type='number'] {
+    padding: 4px 8px;
+    text-align: center;
+    -moz-appearance: textfield;
+  }
 `;
 var RightElementWrapper = styled5__default.default.div`
   display: flex;
@@ -1986,6 +2210,8 @@ var Input = React3.forwardRef(
       disabled,
       type: initialType,
       maxLength,
+      min,
+      max,
       className,
       width
     } = _b, rest = __objRest(_b, [
@@ -1999,6 +2225,8 @@ var Input = React3.forwardRef(
       "disabled",
       "type",
       "maxLength",
+      "min",
+      "max",
       "className",
       "width"
     ]);
@@ -2024,6 +2252,18 @@ var Input = React3.forwardRef(
       },
       [maxLength]
     );
+    const limitRange = React3.useCallback(
+      (value2) => {
+        if (min && Number(value2) < min) {
+          return String(min);
+        }
+        if (max && Number(value2) > max) {
+          return String(max);
+        }
+        return value2;
+      },
+      [max, min]
+    );
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -2041,8 +2281,20 @@ var Input = React3.forwardRef(
     const handleOnChange = (event) => {
       onChange && onChange(event);
       const slicedText = sliceText(event.target.value);
+      if (type === "number") {
+        const limitedText = limitRange(slicedText);
+        setText(limitedText);
+        return;
+      }
       setText(slicedText);
     };
+    const getWidth = () => {
+      if (type === "number") {
+        return "64px";
+      } else {
+        return width;
+      }
+    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2058,16 +2310,18 @@ var Input = React3.forwardRef(
       }
     };
     React3.useEffect(() => {
-      if (defaultValue) {
+      if (defaultValue !== void 0) {
         const convertString = convertToString(defaultValue);
         const slicedText = sliceText(convertString);
         setText(slicedText);
       }
     }, [convertToString, defaultValue, maxLength, sliceText]);
     React3.useEffect(() => {
-      if (value) {
+      var _a2;
+      if (value !== void 0) {
         const convertString = convertToString(value);
         const slicedText = sliceText(convertString);
+        ((_a2 = inputRef.current) == null ? void 0 : _a2.value) && (inputRef.current.value = slicedText);
         setText(slicedText);
       }
     }, [convertToString, maxLength, sliceText, value]);
@@ -2084,7 +2338,7 @@ var Input = React3.forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width,
+        width: getWidth(),
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2102,7 +2356,7 @@ var Input = React3.forwardRef(
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
+          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
             maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
             isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2403,6 +2657,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
             fill: ${exports.colorTokens.neutral0};
           }
           ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
             background: ${exports.colorTokens.primary400};
           `}
         `;
@@ -2412,6 +2667,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         border: 1.5px solid ${exports.colorTokens.neutral200};
         border-radius: 4px;
         ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
           background: ${exports.colorTokens.neutral300};
         `}
 
@@ -2578,6 +2834,7 @@ var Container4 = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  background: transparent;
   padding: 4px;
   width: fit-content;
   height: fit-content;
@@ -2614,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,