@shoplflow/base 0.32.19 → 0.32.21

package/dist/index.js

@@ -12,8 +12,8 @@ export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/rea
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
 import { DownArrowSolidXsmallIcon, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
+import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
-import { flip, shift, offset as offset$1 } from '@floating-ui/core';
 import DatePicker2 from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import SimpleBarReact from 'simplebar-react';
@@ -75,40 +75,50 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js
+// ../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
 var require_classnames = __commonJS({
-  "../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"(exports, module) {
+  "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
     (function() {
       var hasOwn = {}.hasOwnProperty;
       function classNames2() {
-        var classes = [];
+        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);
-              }
-            }
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames2.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
           }
         }
-        return classes.join(" ");
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
         classNames2.default = classNames2;
@@ -1784,12 +1794,19 @@ var IconButtonStyleVariants = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
+var getPopoverContentStyle = () => {
+  return css`
+    min-width: 112px;
+    padding: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background-color: ${colorTokens.neutral0};
+  `;
+};
+
+// src/components/Buttons/DropdownButton/DropdownButton.styled.ts
 var StyledPopoverContentWrapper = styled6.div`
-  min-width: 112px;
-  padding: 4px;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  background-color: ${colorTokens.neutral0};
+  ${getPopoverContentStyle()}
 `;
 var StyledArrowIcon = styled6(motion.div)`
   display: flex;
@@ -2398,11 +2415,10 @@ var DropdownButton = (_a) => {
     _styleVar = "SOLID";
     color = "coolgray50";
   }
-  return /* @__PURE__ */ jsx(DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, children: [
+  return /* @__PURE__ */ jsx(DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, middlewares: [shift({ crossAxis: true, padding: 4 })], children: [
     /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsx(
       Button_default,
       __spreadProps(__spreadValues({
-        "data-shoplflow": "DropdownButton",
         className: _className,
         sizeVar,
         styleVar: _styleVar,
@@ -2452,6 +2468,209 @@ var DropdownButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
+var getStyleByStyleVar3 = (styleVar, color, disabled) => {
+  switch (styleVar) {
+    case "PRIMARY":
+      return css`
+        border: 1px solid ${colorTokens.primary400};
+        background-color: ${colorTokens.primary300};
+        :hover {
+          background-color: ${!disabled && colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return css`
+        border: 1px solid ${colorTokens.neutral350};
+        background-color: ${colorTokens.neutral0};
+        :hover {
+          background-color: ${!disabled && colorTokens.neutral100};
+        }
+      `;
+    default:
+      return css`
+        border: 1px solid ${colorTokens.primary400};
+        background-color: ${colorTokens.primary300};
+      `;
+  }
+};
+var getStyleBySizeVar3 = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+    case "S":
+      return css`
+        min-width: 54px;
+        min-height: 32px;
+      `;
+    default:
+      return css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+  }
+};
+var StyledPopoverContentWrapper2 = styled6.div`
+  ${getPopoverContentStyle()}
+`;
+var StyledArrowIcon2 = styled6(motion.div)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var SplitButtonDivider = styled6.div`
+  height: ${({ sizeVar }) => sizeVar === "M" ? "38px" : "30px"};
+  width: 1px;
+  background-color: ${({ styleVar }) => styleVar === "PRIMARY" ? colorTokens.shopl400 : colorTokens.neutral350};
+`;
+var StyledSplitButton = styled6.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  gap: 8px;
+  padding: 0 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar3(styleVar, color, disabled)};
+  ${({ sizeVar }) => getStyleBySizeVar3(sizeVar)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var SplitButtonContext = createContext(null);
+var useSplitButtonContext = () => {
+  const context = useContext(SplitButtonContext);
+  if (!context) {
+    throw new Error("SplitButtonContext must be used within a SplitButton component");
+  }
+  return context;
+};
+var SplitButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = useSplitButtonContext();
+  return /* @__PURE__ */ jsx(
+    Menu_default,
+    __spreadProps(__spreadValues({
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onClick == null ? void 0 : onClick(event);
+        setIsOpen(false);
+      }
+    }, rest), {
+      children
+    })
+  );
+};
+var SplitButton = (_a) => {
+  var _b = _a, {
+    children,
+    color,
+    onClick,
+    disabled,
+    placement = "bottom-start",
+    floatingZIndex,
+    leftSource,
+    rightSource,
+    styleVar = "PRIMARY",
+    sizeVar = "M",
+    lineClamp = 1,
+    text
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "color",
+    "onClick",
+    "disabled",
+    "placement",
+    "floatingZIndex",
+    "leftSource",
+    "rightSource",
+    "styleVar",
+    "sizeVar",
+    "lineClamp",
+    "text"
+  ]);
+  const selector = useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
+  const [isOpen, setIsOpen] = useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  return /* @__PURE__ */ jsx(SplitButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, middlewares: [shift({ crossAxis: true, padding: 4 })], children: [
+    /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: selector, children: /* @__PURE__ */ jsxs(
+      StyledSplitButton,
+      __spreadProps(__spreadValues({
+        "data-shoplflow": "SplitButton",
+        color,
+        styleVar,
+        sizeVar,
+        disabled
+      }, rest), {
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          if (disabled) {
+            return;
+          }
+          onClick == null ? void 0 : onClick(event);
+          setIsOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Stack_default.Horizontal, { spacing: "spacing04", align: "center", children: [
+            leftSource,
+            /* @__PURE__ */ jsx(
+              Text_default,
+              {
+                lineClamp,
+                whiteSpace: "nowrap",
+                wordBreak: "keep-all",
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: text
+              }
+            ),
+            rightSource
+          ] }),
+          /* @__PURE__ */ jsx(SplitButtonDivider, { sizeVar, styleVar }),
+          /* @__PURE__ */ jsx(
+            StyledArrowIcon2,
+            {
+              animate: {
+                rotate: isOpen ? 180 : 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: /* @__PURE__ */ jsx(
+                Icon_default,
+                {
+                  iconSource: DownArrowSolidXsmallIcon,
+                  color: styleVar === "PRIMARY" ? "neutral0" : "neutral600",
+                  sizeVar: "XS"
+                }
+              )
+            }
+          )
+        ]
+      })
+    ) }),
+    /* @__PURE__ */ jsx(Popper_default.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsx(StyledPopoverContentWrapper2, { children }) })
+  ] }) });
+};
+SplitButton.Menu = SplitButtonMenu;
+var SplitButton_default = SplitButton;
+
+// src/components/Buttons/SplitButton/SplitButton.types.ts
+var SplitButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
+var SplitButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
 var informationStyle = css`
   background: ${colorTokens.neutral100};
   & > span {
@@ -3812,22 +4031,32 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxs(Popper_default, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [flip(), shift({ padding: 5 })] }, popperProps), { children: [
-    /* @__PURE__ */ jsx(
-      Popper_default.Trigger,
-      {
-        ref: triggerRef,
-        isOpen: isOpen || open,
-        onMouseOver: showHandler,
-        onMouseLeave: hideHandler,
-        onFocus: showHandler,
-        onBlur: hideHandler,
-        style: { display: "flex", alignItems: "center", justifyContent: "center" },
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ jsx(Popper_default.Portal, { ref: portalRef, children: popper })
-  ] }));
+  return /* @__PURE__ */ jsxs(
+    Popper_default,
+    __spreadProps(__spreadValues({
+      offset: offset4,
+      placement,
+      middlewares: [flip(), shift({ padding: 5 })],
+      "data-shoplflow": "Tooltip"
+    }, popperProps), {
+      children: [
+        /* @__PURE__ */ jsx(
+          Popper_default.Trigger,
+          {
+            ref: triggerRef,
+            isOpen: isOpen || open,
+            onMouseOver: showHandler,
+            onMouseLeave: hideHandler,
+            onFocus: showHandler,
+            onBlur: hideHandler,
+            style: { display: "flex", alignItems: "center", justifyContent: "center" },
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsx(Popper_default.Portal, { ref: portalRef, children: popper })
+      ]
+    })
+  );
 };
 Tooltip.Content = TooltipContent;
 var Tooltip_default = Tooltip;
@@ -4969,7 +5198,6 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
         maxHeight,
         height
       },
-      placeholder: void 0,
       className,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsx(
         OptionListItem,
@@ -6141,6 +6369,4 @@ classnames/index.js:
   *)
 */
 
-export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useTabs };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.js.map
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/styles/global.css

@@ -345,4 +345,3 @@
     font-size: 13px;
   }
 }
-/*# sourceMappingURL=global.css.map */

package/dist/styles/reset.css

@@ -62,4 +62,3 @@ meter {
 :where(dialog:modal) {
   all: revert;
 }
-/*# sourceMappingURL=reset.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.32.19",
+  "version": "0.32.21",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -42,32 +42,32 @@
     "@emotion/styled": "11.10.8",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.4.1",
-    "@storybook/addon-backgrounds": "^7.4.1",
-    "@storybook/addon-controls": "^7.4.1",
-    "@storybook/addon-docs": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
-    "@storybook/addon-mdx-gfm": "^7.4.1",
-    "@storybook/addon-measure": "^7.4.1",
-    "@storybook/addon-outline": "^7.4.1",
-    "@storybook/addon-toolbars": "^7.4.1",
-    "@storybook/addon-viewport": "^7.4.1",
-    "@storybook/addons": "^7.4.1",
-    "@storybook/blocks": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/react-vite": "^7.4.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.4.1",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-backgrounds": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-measure": "^8.4.7",
+    "@storybook/addon-outline": "^8.4.7",
+    "@storybook/addon-toolbars": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@types/node": "20.4.9",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "classnames": "^2.3.2",
     "eslint-plugin-storybook": "^0.6.13",
-    "storybook": "^7.4.1",
-    "storybook-addon-performance": "^0.17.1",
+    "storybook": "^8.4.7",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
     "tsup": "7.2.0",
@@ -84,14 +84,14 @@
     "@floating-ui/react-dom": "^2.0.3",
     "date-fns": "^3.6.0",
     "framer-motion": "10.12.6",
+    "react": "^18.2.0",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-datepicker": "^7.3.0",
-    "simplebar-react": "^3.2.6",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@shoplflow/hada-assets": "^0.1.2",
-    "@shoplflow/shopl-assets": "^0.10.3",
-    "@shoplflow/utils": "^0.6.4"
+    "simplebar-react": "^3.2.6",
+    "@shoplflow/hada-assets": "^0.1.3",
+    "@shoplflow/shopl-assets": "^0.10.4",
+    "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {
     "type-check": "tsc --noEmit",