@zenkigen-inc/component-ui 1.1.3 → 1.2.0

package/dist/index.js

@@ -31414,85 +31414,29 @@ if (process.env.NODE_ENV === 'production') {
 }
 });
 
+function ModalBody({
+  children
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: "overflow-y-auto",
+    children: children
+  });
+}
+
 const ModalContext = /*#__PURE__*/createContext({
-  width: 480,
   setIsOpen: () => false
 });
 
-const sizeSmallLimit = 420;
-function ModalButtonTab({
-  primaryButtonLabel,
-  secondaryButtonLabel,
-  onClickPrimaryButton,
-  onClickSecondaryButton,
-  isDanger,
-  isNoBorder,
-  isWithCheckbox,
-  checkboxLabel,
-  isChecked,
-  onChange,
-  subButtonLabel,
-  onClickSubButton
+function ModalFooter({
+  children,
+  isNoBorder
 }) {
-  const {
-    width,
-    setIsOpen
-  } = useContext(ModalContext);
-  const handleClickPrimaryButton = useCallback(() => {
-    onClickPrimaryButton();
-    setIsOpen(false);
-  }, [onClickPrimaryButton, setIsOpen]);
-  const handleClickSecondaryButton = useCallback(() => {
-    onClickSecondaryButton();
-    setIsOpen(false);
-  }, [onClickSecondaryButton, setIsOpen]);
-  const handleClickSubButton = useCallback(() => {
-    onClickSubButton == null || onClickSubButton();
-  }, [onClickSubButton]);
   const wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
-    'justify-between': isWithCheckbox || subButtonLabel && sizeSmallLimit <= width,
-    'justify-end': !isWithCheckbox || !subButtonLabel,
-    'justify-center': subButtonLabel && width < sizeSmallLimit,
-    'border-t-[1px] border-border-uiBorder01': !isNoBorder,
-    'gap-y-4': width < sizeSmallLimit,
-    'flex-wrap': width < sizeSmallLimit && isWithCheckbox,
-    'flex-wrap-reverse': width < sizeSmallLimit && subButtonLabel
-  });
-  const buttonContainerClasses = clsx$1('flex', 'items-center', {
-    'w-full justify-center': width < sizeSmallLimit,
-    'gap-x-2': width < sizeSmallLimit,
-    'gap-x-4': sizeSmallLimit <= width
+    'border-t-[1px] border-border-uiBorder01': !isNoBorder
   });
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     className: wrapperClasses,
-    children: [isWithCheckbox ? /*#__PURE__*/jsx("div", {
-      children: /*#__PURE__*/jsx(Checkbox, {
-        id: "modal-checkbox",
-        label: checkboxLabel,
-        isChecked: isChecked,
-        onChange: onChange
-      })
-    }) : subButtonLabel && onClickSubButton ? /*#__PURE__*/jsx(Button, {
-      variant: "text",
-      size: "large",
-      onClick: handleClickSubButton,
-      children: subButtonLabel
-    }, "0") : null, /*#__PURE__*/jsxs("div", {
-      className: buttonContainerClasses,
-      children: [/*#__PURE__*/jsx(Button, {
-        variant: "outline",
-        size: "large",
-        width: width < sizeSmallLimit ? 132 : 'auto',
-        onClick: handleClickSecondaryButton,
-        children: secondaryButtonLabel
-      }, "1"), /*#__PURE__*/jsx(Button, {
-        variant: isDanger ? 'fillDanger' : 'fill',
-        size: "large",
-        width: width < sizeSmallLimit ? 132 : 'auto',
-        onClick: handleClickPrimaryButton,
-        children: primaryButtonLabel
-      }, "2")]
-    })]
+    children: children
   });
 }
 
@@ -31511,7 +31455,9 @@ function ModalHeader({
   });
   return /*#__PURE__*/jsxs("div", {
     className: headerClasses,
-    children: [children, !isNoCloseButton && /*#__PURE__*/jsx(IconButton, {
+    children: [/*#__PURE__*/jsx("div", {
+      children: children
+    }), !isNoCloseButton && /*#__PURE__*/jsx(IconButton, {
       icon: "close",
       size: "small",
       variant: "text",
@@ -31520,92 +31466,38 @@ function ModalHeader({
   });
 }
 
-const TabItem = props => {
-  const classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', {
-    [`${typography.label.label2regular}`]: !props.isSelected,
-    ['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark']: !props.isSelected,
-    [`${typography.label.label2bold}`]: props.isSelected,
-    ['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none']: props.isSelected
-  });
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    role: "tab",
-    "aria-selected": props.isSelected,
-    className: classes,
-    disabled: props.isDisabled,
-    onClick: () => props.onClick(props.id),
-    children: props.children
-  });
-};
-
-function Tab({
-  children
-}) {
-  const classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
-  return /*#__PURE__*/jsx("div", {
-    role: "tablist",
-    className: classes,
-    children: children
-  });
-}
-Tab.Item = TabItem;
-
-function ModalTab({
-  tabItems,
-  selectedTab,
-  setSelectedTab
-}) {
-  return /*#__PURE__*/jsx("div", {
-    className: "mt-2 w-full",
-    children: /*#__PURE__*/jsx(Tab, {
-      children: tabItems.map(item => /*#__PURE__*/jsx(TabItem, {
-        id: item.id,
-        isSelected: selectedTab === item.id,
-        onClick: setSelectedTab,
-        children: item.label
-      }, item.id))
-    })
-  });
-}
-
+const LIMIT_WIDTH = 320;
+const LIMIT_HEIGHT = 184;
 function Modal({
   children,
   width = 480,
   height,
   isOpen,
   setIsOpen,
-  portalTargetRef,
-  headerElement,
-  tabElement,
-  buttonTabElement
+  portalTargetRef
 }) {
-  const wrapperClasses = 'flex items-center justify-center z-overlay bg-background-backgroundOverlayBlack fixed left-0 top-0 h-full w-full';
-  const modalBaseClasses = 'flex shrink-0 flex-col bg-background-uiBackground01 rounded-lg shadow-modalShadow';
-  const contentClasses = 'flex items-center justify-center overflow-y-auto';
+  const renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
+  const renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      width,
       setIsOpen
     },
     children: /*#__PURE__*/jsx("div", {
-      className: wrapperClasses,
-      children: /*#__PURE__*/jsxs("div", {
-        className: modalBaseClasses,
+      className: "fixed left-0 top-0 z-overlay flex h-full w-full items-center justify-center bg-background-backgroundOverlayBlack",
+      children: /*#__PURE__*/jsx("div", {
+        className: "flex shrink-0 flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
         style: {
-          width,
-          height
+          width: renderWidth,
+          height: renderHeight
         },
-        children: [headerElement, tabElement, /*#__PURE__*/jsx("div", {
-          className: contentClasses,
-          children: children
-        }), buttonTabElement]
+        children: children
       })
     })
   }), !portalTargetRef || (portalTargetRef == null ? void 0 : portalTargetRef.current) === null ? document.body : portalTargetRef.current);
 }
+Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
-Modal.Tab = ModalTab;
-Modal.ButtonTab = ModalButtonTab;
+Modal.Footer = ModalFooter;
 
 const _excluded$1 = ["state", "size"];
 function NotificationInline(_ref) {
@@ -32138,6 +32030,36 @@ function SelectSort({
   });
 }
 
+const TabItem = props => {
+  const classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', {
+    [`${typography.label.label2regular}`]: !props.isSelected,
+    ['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark']: !props.isSelected,
+    [`${typography.label.label2bold}`]: props.isSelected,
+    ['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none']: props.isSelected
+  });
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    role: "tab",
+    "aria-selected": props.isSelected,
+    className: classes,
+    disabled: props.isDisabled,
+    onClick: () => props.onClick(props.id),
+    children: props.children
+  });
+};
+
+function Tab({
+  children
+}) {
+  const classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
+  return /*#__PURE__*/jsx("div", {
+    role: "tablist",
+    className: classes,
+    children: children
+  });
+}
+Tab.Item = TabItem;
+
 function TableCell({
   children,
   className