@shoplflow/base 0.46.10 → 0.46.12

package/dist/index.cjs

@@ -232,6 +232,8 @@ var getSizeBySizeVariant = (size2) => {
       return "24px";
     case "M":
       return "32px";
+    case "ML":
+      return "40px";
     case "L":
       return "48px";
     case "XL":
@@ -240,6 +242,24 @@ var getSizeBySizeVariant = (size2) => {
       return "32px";
   }
 };
+var getIconSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "8px";
+    case "S":
+      return "12px";
+    case "M":
+      return "16px";
+    case "ML":
+      return "16px";
+    case "L":
+      return "20px";
+    case "XL":
+      return "24px";
+    default:
+      return "16px";
+  }
+};
 var StyledAvatar = styled6__default.default.picture`
   display: flex;
   align-items: center;
@@ -271,6 +291,12 @@ var StyledAvatarBadge = styled6__default.default.div`
   height: fit-content;
   bottom: 0;
   right: 0;
+  > svg {
+    min-width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    min-height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+  }
 `;
 
 // src/assets/mocks/AvatarNone.png
@@ -287,7 +313,7 @@ var Avatar = (_a) => {
         }
       }
     ) })),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { size: rest.sizeVar, children: badge })
   ] });
 };
 exports.Avatar = Avatar;
@@ -297,12 +323,13 @@ exports.AvatarSizeVariants = {
   XS: "XS",
   S: "S",
   M: "M",
+  ML: "ML",
   L: "L",
   XL: "XL"
 };
 
 // src/components/Avatar/version.ts
-exports.AVATAR_VERSION = "2.0.0";
+exports.AVATAR_VERSION = "2.1.1";
 
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
@@ -1745,12 +1772,14 @@ var getStyleBySizeVar2 = (sizeVar) => {
     case "M":
       return react$1.css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
     case "S":
       return react$1.css`
         gap: 2px;
+        padding: 0 10px;
         min-width: 54px;
         min-height: 32px;
       `;
@@ -1763,6 +1792,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
     default:
       return react$1.css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
@@ -1783,8 +1813,6 @@ var StyledButton = styled6__default.default.button`
   justify-content: center;
   height: fit-content;
   width: fit-content;
-  /* gap: 4px; */
-  padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
   ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
@@ -2985,7 +3013,7 @@ exports.SplitButtonStyleVariants = {
 };
 
 // src/components/Buttons/version.ts
-exports.BUTTONS_VERSION = "2.0.0";
+exports.BUTTONS_VERSION = "2.0.3";
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral400_5};
   & > svg > circle {
@@ -5123,26 +5151,6 @@ exports.Pagination = Pagination;
 
 // src/components/Pagination/version.ts
 exports.PAGINATION_VERSION = "2.0.0";
-var getLabelStyleByStatus = (selected, disabled) => {
-  if (disabled && selected) {
-    return react$1.css`
-      background-color: ${exports.colorTokens.neutral0};
-      cursor: not-allowed;
-    `;
-  }
-  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": {
@@ -5178,14 +5186,26 @@ var StyledToggleInner = styled6__default.default.button`
   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};
-      `}
+  &[data-selected='true'] {
+    cursor: default;
+    background-color: ${exports.colorTokens.neutral0};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-disabled='true'][data-selected='true'] {
+    opacity: 1;
+    background-color: ${exports.colorTokens.neutral0};
+  }
+
+  &:hover:not([aria-disabled='true']):not([data-selected='true']) {
+    cursor: pointer;
+    background-color: ${exports.colorTokens.neutral400_5};
   }
 `;
 var StyledToggleInnerLabel = styled6__default.default.label`
@@ -5216,21 +5236,24 @@ var ToggleButton = (_a) => {
     targetName,
     onChange,
     selectedValue,
-    sizeVar = "S"
+    sizeVar = "S",
+    disabled = false
   } = _b, rest = __objRest(_b, [
     "fixedWidth",
     "children",
     "targetName",
     "onChange",
     "selectedValue",
-    "sizeVar"
+    "sizeVar",
+    "disabled"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton" }, rest), { children })) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar, disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton", "aria-disabled": disabled }, 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();
+    var _b = _a, { label, disabled: itemDisabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
+    const { fixedWidth, onChange, targetName, selectedValue, sizeVar, disabled: groupDisabled } = useToggleButton();
+    const disabled = groupDisabled || itemDisabled;
     const labelRef = React3.useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
@@ -5246,12 +5269,15 @@ var ToggleInnerRadio = React3.forwardRef(
       StyledToggleInner,
       {
         width: fixedWidth,
-        disabled,
-        selected,
         sizeVar,
         type: "button",
+        "aria-disabled": disabled,
+        "data-selected": selected,
         onClick: () => {
           var _a2;
+          if (disabled) {
+            return;
+          }
           (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
         },
         children: [
@@ -5261,6 +5287,7 @@ var ToggleInnerRadio = React3.forwardRef(
               checked: selected,
               width: fixedWidth,
               disabled,
+              "aria-disabled": disabled,
               value,
               id,
               type: "radio",
@@ -5294,7 +5321,7 @@ exports.ToggleButtonSizeVariants = {
 };
 
 // src/components/ToggleButton/version.ts
-exports.TOGGLE_BUTTON_VERSION = "2.0.0";
+exports.TOGGLE_BUTTON_VERSION = "2.0.1";
 var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
   display: flex;
   width: 280px;

package/dist/index.d.cts

@@ -280,6 +280,7 @@ declare const AvatarSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
     readonly M: "M";
+    readonly ML: "ML";
     readonly L: "L";
     readonly XL: "XL";
 };
@@ -297,7 +298,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const AVATAR_VERSION = "2.0.0";
+declare const AVATAR_VERSION = "2.1.1";
 
 type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -765,7 +766,7 @@ declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>
 declare const useSplitButtonContext: () => SplitButtonContextType;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const BUTTONS_VERSION = "2.0.0";
+declare const BUTTONS_VERSION = "2.0.3";
 
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
@@ -1476,6 +1477,7 @@ interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTML
     fixedWidth: number;
     selectedValue?: string;
     sizeVar?: ToggleButtonSizeVariantType;
+    disabled?: boolean;
 }
 interface ToggleButtonOptionProps {
 }
@@ -1488,12 +1490,12 @@ interface ToggleButtonInnerRadioOptionProps {
 }
 
 declare const ToggleButton: {
-    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-    InnerRadio: React__default.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React__default.RefAttributes<HTMLInputElement>>;
+    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, disabled, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+    InnerRadio: React$1.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React$1.RefAttributes<HTMLInputElement>>;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const TOGGLE_BUTTON_VERSION = "2.0.0";
+declare const TOGGLE_BUTTON_VERSION = "2.0.1";
 
 declare const DayDatepickerSizeVariants: {
     readonly S: "S";

package/dist/index.d.ts

@@ -280,6 +280,7 @@ declare const AvatarSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
     readonly M: "M";
+    readonly ML: "ML";
     readonly L: "L";
     readonly XL: "XL";
 };
@@ -297,7 +298,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const AVATAR_VERSION = "2.0.0";
+declare const AVATAR_VERSION = "2.1.1";
 
 type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -765,7 +766,7 @@ declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>
 declare const useSplitButtonContext: () => SplitButtonContextType;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const BUTTONS_VERSION = "2.0.0";
+declare const BUTTONS_VERSION = "2.0.3";
 
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
@@ -1476,6 +1477,7 @@ interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTML
     fixedWidth: number;
     selectedValue?: string;
     sizeVar?: ToggleButtonSizeVariantType;
+    disabled?: boolean;
 }
 interface ToggleButtonOptionProps {
 }
@@ -1488,12 +1490,12 @@ interface ToggleButtonInnerRadioOptionProps {
 }
 
 declare const ToggleButton: {
-    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-    InnerRadio: React__default.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React__default.RefAttributes<HTMLInputElement>>;
+    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, disabled, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+    InnerRadio: React$1.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React$1.RefAttributes<HTMLInputElement>>;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const TOGGLE_BUTTON_VERSION = "2.0.0";
+declare const TOGGLE_BUTTON_VERSION = "2.0.1";
 
 declare const DayDatepickerSizeVariants: {
     readonly S: "S";

package/dist/index.js

@@ -205,6 +205,8 @@ var getSizeBySizeVariant = (size2) => {
       return "24px";
     case "M":
       return "32px";
+    case "ML":
+      return "40px";
     case "L":
       return "48px";
     case "XL":
@@ -213,6 +215,24 @@ var getSizeBySizeVariant = (size2) => {
       return "32px";
   }
 };
+var getIconSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "8px";
+    case "S":
+      return "12px";
+    case "M":
+      return "16px";
+    case "ML":
+      return "16px";
+    case "L":
+      return "20px";
+    case "XL":
+      return "24px";
+    default:
+      return "16px";
+  }
+};
 var StyledAvatar = styled6.picture`
   display: flex;
   align-items: center;
@@ -244,6 +264,12 @@ var StyledAvatarBadge = styled6.div`
   height: fit-content;
   bottom: 0;
   right: 0;
+  > svg {
+    min-width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    min-height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+  }
 `;
 
 // src/assets/mocks/AvatarNone.png
@@ -260,7 +286,7 @@ var Avatar = (_a) => {
         }
       }
     ) })),
-    /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
+    /* @__PURE__ */ jsx(StyledAvatarBadge, { size: rest.sizeVar, children: badge })
   ] });
 };
 var Avatar_default = Avatar;
@@ -270,12 +296,13 @@ var AvatarSizeVariants = {
   XS: "XS",
   S: "S",
   M: "M",
+  ML: "ML",
   L: "L",
   XL: "XL"
 };
 
 // src/components/Avatar/version.ts
-var AVATAR_VERSION = "2.0.0";
+var AVATAR_VERSION = "2.1.1";
 
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
@@ -1718,12 +1745,14 @@ var getStyleBySizeVar2 = (sizeVar) => {
     case "M":
       return css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
     case "S":
       return css`
         gap: 2px;
+        padding: 0 10px;
         min-width: 54px;
         min-height: 32px;
       `;
@@ -1736,6 +1765,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
     default:
       return css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
@@ -1756,8 +1786,6 @@ var StyledButton = styled6.button`
   justify-content: center;
   height: fit-content;
   width: fit-content;
-  /* gap: 4px; */
-  padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
   ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
@@ -2958,7 +2986,7 @@ var SplitButtonStyleVariants = {
 };
 
 // src/components/Buttons/version.ts
-var BUTTONS_VERSION = "2.0.0";
+var BUTTONS_VERSION = "2.0.3";
 var informationStyle = css`
   background: ${colorTokens.neutral400_5};
   & > svg > circle {
@@ -5096,26 +5124,6 @@ var Pagination_default = Pagination;
 
 // src/components/Pagination/version.ts
 var PAGINATION_VERSION = "2.0.0";
-var getLabelStyleByStatus = (selected, disabled) => {
-  if (disabled && selected) {
-    return css`
-      background-color: ${colorTokens.neutral0};
-      cursor: not-allowed;
-    `;
-  }
-  if (disabled) {
-    return css`
-      cursor: not-allowed;
-      opacity: 0.5;
-    `;
-  }
-  if (selected) {
-    return css`
-      cursor: default;
-      background-color: ${colorTokens.neutral0};
-    `;
-  }
-};
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5151,14 +5159,26 @@ var StyledToggleInner = styled6.button`
   padding: 0 12px;
   border-radius: 6px;
   background-color: transparent;
-  ${({ disabled, selected }) => getLabelStyleByStatus(selected, Boolean(disabled))}
   ${({ sizeVar }) => getLabelStyleBySizeVar(sizeVar)}
 
-  &:hover {
-    ${({ disabled }) => !disabled && css`
-        cursor: pointer;
-        background-color: ${colorTokens.neutral400_5};
-      `}
+  &[data-selected='true'] {
+    cursor: default;
+    background-color: ${colorTokens.neutral0};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-disabled='true'][data-selected='true'] {
+    opacity: 1;
+    background-color: ${colorTokens.neutral0};
+  }
+
+  &:hover:not([aria-disabled='true']):not([data-selected='true']) {
+    cursor: pointer;
+    background-color: ${colorTokens.neutral400_5};
   }
 `;
 var StyledToggleInnerLabel = styled6.label`
@@ -5189,21 +5209,24 @@ var ToggleButton = (_a) => {
     targetName,
     onChange,
     selectedValue,
-    sizeVar = "S"
+    sizeVar = "S",
+    disabled = false
   } = _b, rest = __objRest(_b, [
     "fixedWidth",
     "children",
     "targetName",
     "onChange",
     "selectedValue",
-    "sizeVar"
+    "sizeVar",
+    "disabled"
   ]);
-  return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar }, children: /* @__PURE__ */ jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton" }, rest), { children })) });
+  return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar, disabled }, children: /* @__PURE__ */ jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton", "aria-disabled": disabled }, rest), { children })) });
 };
 var ToggleInnerRadio = 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();
+    var _b = _a, { label, disabled: itemDisabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
+    const { fixedWidth, onChange, targetName, selectedValue, sizeVar, disabled: groupDisabled } = useToggleButton();
+    const disabled = groupDisabled || itemDisabled;
     const labelRef = useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
@@ -5219,12 +5242,15 @@ var ToggleInnerRadio = forwardRef(
       StyledToggleInner,
       {
         width: fixedWidth,
-        disabled,
-        selected,
         sizeVar,
         type: "button",
+        "aria-disabled": disabled,
+        "data-selected": selected,
         onClick: () => {
           var _a2;
+          if (disabled) {
+            return;
+          }
           (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
         },
         children: [
@@ -5234,6 +5260,7 @@ var ToggleInnerRadio = forwardRef(
               checked: selected,
               width: fixedWidth,
               disabled,
+              "aria-disabled": disabled,
               value,
               id,
               type: "radio",
@@ -5267,7 +5294,7 @@ var ToggleButtonSizeVariants = {
 };
 
 // src/components/ToggleButton/version.ts
-var TOGGLE_BUTTON_VERSION = "2.0.0";
+var TOGGLE_BUTTON_VERSION = "2.0.1";
 var SmallStyledDayDatepickerWrapper = styled6.div`
   display: flex;
   width: 280px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.10",
+  "version": "0.46.12",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/utils": "^0.8.0",
-    "@shoplflow/shopl-assets": "^0.12.37"
+    "@shoplflow/shopl-assets": "^0.12.38",
+    "@shoplflow/utils": "^0.8.0"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {