@shoplflow/base 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -858,10 +858,10 @@ var useOnToggle = (selected, defaultSelected) => {
     }
   }, [isControlled, selected]);
   React3.useEffect(() => {
-    if (defaultSelected) {
+    if (defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
-  }, [defaultSelected, isControlled]);
+  }, [defaultSelected]);
   return [isToggle, handleToggle];
 };
 var Switch = (_a) => {
@@ -1834,6 +1834,101 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
+exports.StyledMenu = styled5__default.default.li`
+  display: flex;
+  flex-direction: row;
+  padding: 6px;
+  width: 100%;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  background: ${exports.colorTokens.neutral0};
+  &:hover {
+    background: ${exports.colorTokens.neutral100};
+  }
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
+  ${({ isSelected, leftSource }) => isSelected && !leftSource && react$1.css`
+      background: ${exports.colorTokens.neutral200};
+      &:hover {
+        background: ${exports.colorTokens.neutral200};
+      }
+    `}
+`;
+var Menu = (_a) => {
+  var _b = _a, {
+    leftSource,
+    rightSource,
+    children,
+    isSelected,
+    defaultSelected = false,
+    onClick,
+    disabled = false
+  } = _b, rest = __objRest(_b, [
+    "leftSource",
+    "rightSource",
+    "children",
+    "isSelected",
+    "defaultSelected",
+    "onClick",
+    "disabled"
+  ]);
+  const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
+  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
+    isSelected
+  })) : leftSource;
+  const handleOnClick = (e) => {
+    !disabled && handleToggle();
+    !disabled && onClick && onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
+    leftSource && LeftSourceClone,
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
+    rightSource && rightSource
+  ] }));
+};
+exports.Menu = Menu;
+exports.StyledList = styled5__default.default.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  padding: 6px 8px;
+  gap: 4px;
+  border-radius: 8px;
+  background: ${exports.colorTokens.neutral0};
+  cursor: pointer;
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
+  &:hover {
+    background: ${exports.colorTokens.neutral100};
+  }
+`;
+exports.StyledText2Rows = styled5__default.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+`;
+var List = (_a) => {
+  var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
+  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  if (!children && rightSource) {
+    throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
+    LeftSourceClone && LeftSourceClone,
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { height: "36px", width: "100%", spacing: "spacing08", align: "center", children }),
+    rightSource && rightSource
+  ] }));
+};
+var 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;
+exports.List = List;
 var StyledInput = styled5__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -1843,6 +1938,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;
@@ -1891,6 +1997,8 @@ var Input = React3.forwardRef(
       disabled,
       type: initialType,
       maxLength,
+      min,
+      max,
       className,
       width
     } = _b, rest = __objRest(_b, [
@@ -1904,6 +2012,8 @@ var Input = React3.forwardRef(
       "disabled",
       "type",
       "maxLength",
+      "min",
+      "max",
       "className",
       "width"
     ]);
@@ -1929,6 +2039,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);
     };
@@ -1946,8 +2068,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) {
@@ -1963,16 +2097,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]);
@@ -1989,7 +2125,7 @@ var Input = React3.forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width,
+        width: getWidth(),
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2007,7 +2143,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(
@@ -2297,6 +2433,231 @@ var MinusButton = React3.forwardRef((_a, ref) => {
   ] }) })) });
 });
 exports.MinusButton = MinusButton;
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  switch (styleVariant) {
+    case "PRIMARY":
+      if (isSelected) {
+        return react$1.css`
+          background: ${exports.colorTokens.primary300};
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral0};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            background: ${exports.colorTokens.primary400};
+          `}
+        `;
+      }
+      return react$1.css`
+        background: ${exports.colorTokens.neutral200};
+        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};
+        `}
+
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral0};
+        }
+      `;
+    case "LINE":
+      if (isSelected) {
+        return react$1.css`
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          background: transparent;
+          border-radius: 4px;
+          & > svg > path {
+            fill: ${exports.colorTokens.primary300};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            & > svg > path {
+              fill: ${exports.colorTokens.primary400};
+            }
+          `}
+        `;
+      }
+      return react$1.css`
+        background: transparent;
+        border: 1.5px solid ${exports.colorTokens.neutral200};
+        border-radius: 4px;
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral200};
+        }
+        ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral300};
+          }
+        `}
+      `;
+    default:
+      return "";
+  }
+};
+var StyledCheckbox = styled5__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  background: ${exports.colorTokens.neutral200};
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var Container3 = styled5__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+var Checkbox = (_a) => {
+  var _b = _a, {
+    defaultSelected,
+    isSelected,
+    disabled,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    styleVar = "PRIMARY"
+  } = _b, rest = __objRest(_b, [
+    "defaultSelected",
+    "isSelected",
+    "disabled",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "styleVar"
+  ]);
+  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+  const [isHovered, toggleHovered] = React3.useState(false);
+  const handleMouseLeave = (e) => {
+    toggleHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  const handleMouseEnter = (e) => {
+    toggleHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleClick = (e) => {
+    if (disabled) {
+      return;
+    }
+    onClick && onClick(e);
+    toggleSelected();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container3,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter,
+      disabled
+    }, rest), {
+      "data-shoplflow": "Checkbox",
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { styleVar, isHovered, isSelected: selected, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
+          fill: "white"
+        }
+      ) }) })
+    })
+  );
+};
+exports.Checkbox = Checkbox;
+
+// src/components/ControlButtons/Checkbox/Checkbox.types.ts
+exports.CheckboxStyleVariants = {
+  PRIMARY: "PRIMARY",
+  LINE: "LINE"
+};
+var getSelectedStyle = (isHovered) => {
+  return react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.primary300};
+    }
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.primary400};
+      }
+    `}
+  `;
+};
+var StyledRadio = styled5__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  ${({ isHovered }) => react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.neutral200};
+    }
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.neutral300};
+      }
+    `}
+  `}
+  cursor: pointer;
+  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var Container4 = styled5__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+var Radio = (_a) => {
+  var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
+  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+  const [isHovered, toggleHovered] = React3.useState(false);
+  const handleMouseLeave = (e) => {
+    toggleHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  const handleMouseEnter = (e) => {
+    toggleHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleClick = (e) => {
+    if (disabled) {
+      return;
+    }
+    onClick && onClick(e);
+    toggleSelected();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container4,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }, rest), {
+      "data-shoplflow": "Radio",
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadio, { isSelected: selected, isHovered, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "5.5", fill: "white", stroke: "#3299FE", strokeWidth: "5" }) }) })
+    })
+  );
+};
+exports.Radio = Radio;
 
 Object.defineProperty(exports, 'arrow', {
   enumerable: true,