@shoplflow/base 0.30.0 → 0.30.1

package/dist/index.cjs

@@ -3996,6 +3996,151 @@ var Pagination = (_a) => {
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;
 exports.Pagination = Pagination;
+var getLabelStyleByStatus = (selected, disabled) => {
+  if (disabled) {
+    return react$1.css`
+      cursor: not-allowed;
+      opacity: 0.5;
+    `;
+  }
+  if (selected) {
+    return react$1.css`
+      cursor: default;
+      background-color: ${exports.colorTokens.neutral0};
+    `;
+  }
+};
+var getLabelStyleBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S": {
+      return react$1.css`
+        padding: 4px 8px;
+      `;
+    }
+    case "M": {
+      return react$1.css`
+        padding: 8px;
+      `;
+    }
+    default: {
+      return;
+    }
+  }
+};
+var StyledToggleButton = styled6__default.default.div`
+  display: flex;
+  padding: ${exports.spacingTokens.spacing04};
+  align-items: center;
+  background-color: ${exports.colorTokens.neutral150};
+  border-radius: ${exports.borderRadiusTokens.borderRadius06};
+`;
+var StyledToggleInner = styled6__default.default.button`
+  height: fit-content;
+  width: fit-content;
+  cursor: pointer;
+
+  & input:checked + label {
+    background-color: ${exports.colorTokens.neutral0};
+    cursor: default;
+  }
+`;
+var StyledToggleInnerLabel = styled6__default.default.label`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ width }) => `${width}px`};
+  padding: 0 12px;
+  border-radius: 6px;
+  background-color: transparent;
+  ${({ disabled, selected }) => getLabelStyleByStatus(selected, Boolean(disabled))}
+  ${({ sizeVar }) => getLabelStyleBySizeVar(sizeVar)}
+
+  &:hover {
+    ${({ disabled }) => !disabled && react$1.css`
+        cursor: pointer;
+        background-color: ${exports.colorTokens.neutral400_5};
+      `}
+  }
+`;
+var StyledToggleInnerInput = styled6__default.default.input`
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+`;
+var ToggleButtonContext = React3.createContext(null);
+var useToggleButton = () => {
+  const context = React3.useContext(ToggleButtonContext);
+  if (!context) {
+    throw new Error("ToggleInnerButton \uCEF4\uD3EC\uB10C\uD2B8\uB294 ToggleButton \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694");
+  }
+  return context;
+};
+var ToggleButton = (_a) => {
+  var _b = _a, {
+    fixedWidth,
+    children,
+    targetName,
+    onChange,
+    selectedValue,
+    sizeVar = "S"
+  } = _b, rest = __objRest(_b, [
+    "fixedWidth",
+    "children",
+    "targetName",
+    "onChange",
+    "selectedValue",
+    "sizeVar"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton" }, rest), { children })) });
+};
+var ToggleInnerRadio = React3.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, disabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
+    const { fixedWidth, onChange, targetName, selectedValue, sizeVar } = useToggleButton();
+    let selected = false;
+    if (selectedValue && selectedValue === value) {
+      selected = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledToggleInner, { disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StyledToggleInnerInput,
+        __spreadProps(__spreadValues({
+          width: fixedWidth,
+          disabled,
+          selected,
+          value,
+          id,
+          type: "radio",
+          ref,
+          name: targetName
+        }, rest), {
+          onChange
+        })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StyledToggleInnerLabel,
+        {
+          htmlFor: id,
+          width: fixedWidth,
+          disabled,
+          selected,
+          sizeVar,
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { lineClamp: 1, wordBreak: "break-all", typography: "body2_400", children: label })
+        }
+      )
+    ] });
+  }
+);
+ToggleButton.InnerRadio = ToggleInnerRadio;
+exports.ToggleButton = ToggleButton;
+
+// src/components/ToggleButton/ToggleButton.types.ts
+exports.ToggleButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;