@shoplflow/base 0.20.1 → 0.21.0

package/dist/index.d.cts

@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const MenuSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type MenuSizeVariantKey = $Values<typeof MenuSizeVariants>;
 interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
 }
-interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantKey> {
 }
 
-declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
 
+declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
 declare const StyledMenu: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantKey, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -1030,13 +1030,20 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const MenuSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type MenuSizeVariantKey = $Values<typeof MenuSizeVariants>;
 interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
 }
-interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantKey> {
 }
 
-declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, sizeVar, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
 
+declare const getFontStylesBySizeVar: (sizeVar: MenuOptionProps['sizeVar']) => "body1_400" | "body2_400";
 declare const StyledMenu: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
@@ -1209,4 +1216,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantKey, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -1895,18 +1895,51 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 var Dropdown_default = Dropdown;
+var getStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return css`
+        min-height: 28px;
+      `;
+    case "S":
+      return css`
+        min-height: 36px;
+      `;
+    case "M":
+      return css`
+        height: 48px;
+      `;
+    default:
+      return css`
+        height: 48px;
+      `;
+  }
+};
+var getFontStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return "body2_400";
+    case "S":
+      return "body1_400";
+    case "M":
+      return "body1_400";
+    default:
+      return "body1_400";
+  }
+};
 var StyledMenu = styled5.li`
   display: flex;
-  flex-direction: row;
-  padding: 6px;
   width: 100%;
+  flex-direction: row;
   align-items: center;
+  padding: 6px;
   gap: 4px;
-  cursor: pointer;
   border-radius: 4px;
-  background: ${colorTokens.neutral0};
+  cursor: pointer;
+  background: transparent;
+  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
   &:hover {
-    background: ${colorTokens.neutral100};
+    background: ${colorTokens.neutral400_5};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
   ${({ isSelected, leftSource }) => isSelected === true && !leftSource && css`
@@ -1924,6 +1957,7 @@ var Menu = (_a) => {
     isSelected,
     defaultSelected = false,
     onClick,
+    sizeVar = "XS",
     disabled = false
   } = _b, rest = __objRest(_b, [
     "leftSource",
@@ -1932,6 +1966,7 @@ var Menu = (_a) => {
     "isSelected",
     "defaultSelected",
     "onClick",
+    "sizeVar",
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
@@ -1942,13 +1977,31 @@ var Menu = (_a) => {
     !disabled && handleToggle();
     !disabled && onClick && onClick(e);
   };
-  return /* @__PURE__ */ jsxs(StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
-    leftSource && LeftSourceClone,
-    /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
-    rightSource && rightSource
-  ] }));
+  return /* @__PURE__ */ jsxs(
+    StyledMenu,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      isSelected: selected,
+      leftSource,
+      onClick: handleOnClick
+    }, rest), {
+      "data-shoplflow": "Menu",
+      children: [
+        leftSource && LeftSourceClone,
+        /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
+        rightSource && rightSource
+      ]
+    })
+  );
 };
 var Menu_default = Menu;
+
+// src/components/Menu/Menu.types.ts
+var MenuSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
 var StyledList = styled5.li`
   display: flex;
   flex-direction: row;
@@ -2856,6 +2909,6 @@ classnames/index.js:
   *)
 */
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map