@zenkigen-inc/component-ui 1.14.3 → 1.14.5

package/dist/index.js

@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -75,7 +75,7 @@ function Breadcrumb({
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-const _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
+const _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "justifyContent", "before", "after", "elementAs", "children"];
 const Button = _ref => {
   let {
       size = 'medium',
@@ -84,13 +84,14 @@ const Button = _ref => {
       isSelected = false,
       width,
       borderRadius,
+      justifyContent = 'center',
       before,
       after,
       elementAs,
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  const baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  const baseClasses = clsx('flex shrink-0 items-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'h-6 px-2.5': size === 'small',
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
@@ -100,6 +101,8 @@ const Button = _ref => {
     'hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor': isSelected && variant !== 'outline' && variant !== 'text',
     'pointer-events-none': isDisabled,
     'rounded-button': borderRadius == null,
+    'justify-start': justifyContent === 'start',
+    'justify-center': justifyContent === 'center',
     'typography-label16regular': size === 'large',
     'typography-label14regular': size !== 'large'
   });
@@ -255,11 +258,8 @@ const Icon = _ref => {
   const classes = clsx('inline-block shrink-0', {
     'fill-disabled01': isDisabled,
     [iconColors.icon01]: !isDisabled && props.color === 'icon01',
-    [iconColors.icon01Dark]: !isDisabled && props.color === 'icon01Dark',
     [iconColors.icon02]: !isDisabled && props.color === 'icon02',
-    [iconColors.icon02Dark]: !isDisabled && props.color === 'icon02Dark',
     [iconColors.icon03]: !isDisabled && props.color === 'icon03',
-    [iconColors.icon03Dark]: !isDisabled && props.color === 'icon03Dark',
     [iconColors.iconOnColor]: !isDisabled && props.color === 'iconOnColor',
     'w-3 h-3': size === 'x-small',
     'w-4 h-4': size === 'small',
@@ -679,7 +679,7 @@ function Modal({
   useEffect(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ModalContext.Provider, {
+  return isMounted && isOpen ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
       onClose
     },
@@ -1377,7 +1377,7 @@ const TabItem = _ref => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const classes = clsx('relative z-0 flex py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-px hover:text-text01 disabled:pointer-events-none disabled:text-disabled01', {
     'typography-label14regular': !isSelected,
-    'text-interactive02 hover:before:bg-uiBorder02Dark': !isSelected,
+    'text-interactive02 hover:before:bg-uiBorder04': !isSelected,
     'typography-label14bold': isSelected,
     'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
   });
@@ -1552,19 +1552,23 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClickClearButton
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
   const inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
     'border-uiBorder02': !isError && !disabled,
     'border-supportError': isError && !disabled,
     'hover:border-hoverInput': !disabled && !isError,
     'hover:focus-within:border-activeInput': !isError,
     'focus-within:border-activeInput': !isError,
-    'bg-disabled02 border-disabled01': disabled
+    'bg-disabled02 border-disabled01': disabled,
+    'pr-2': size === 'medium' && isShowClearButton,
+    'pr-3': size === 'large' && isShowClearButton
   });
-  const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
-    ['typography-label14regular min-h-8']: size === 'medium',
-    ['typography-label16regular min-h-10']: size === 'large',
+  const inputClasses = clsx('flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
+    ['typography-label14regular min-h-8 px-2']: size === 'medium',
+    ['typography-label16regular min-h-10 px-3']: size === 'large',
     'text-text01': !isError,
-    'text-supportError': isError
+    'text-supportError': isError,
+    'pr-0': isShowClearButton
   });
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
@@ -1574,15 +1578,11 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: inputClasses,
       disabled: disabled,
       onChange: props.onChange
-    }, props)), onClickClearButton && props.value.length !== 0 && !disabled && /*#__PURE__*/jsx("div", {
-      className: "absolute right-3",
-      children: /*#__PURE__*/jsx(IconButton, {
-        variant: "text",
-        icon: "close",
-        size: "small",
-        isNoPadding: true,
-        onClick: onClickClearButton
-      })
+    }, props)), isShowClearButton && /*#__PURE__*/jsx(IconButton, {
+      variant: "text",
+      icon: "close",
+      size: "small",
+      onClick: onClickClearButton
     })]
   });
 });
@@ -1685,7 +1685,7 @@ const ToastProvider = ({
       addToast,
       removeToast
     },
-    children: [children, isClientRender && /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+    children: [children, isClientRender && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
       className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]",
       children: toasts.map(({
         id,
@@ -1721,19 +1721,19 @@ function Toggle({
     'bg-interactive01 peer-hover:bg-hover01': !isDisabled && isChecked,
     'bg-interactive02 peer-hover:bg-hover02Dark': !isDisabled && !isChecked,
     'w-8 h-4 px-[3px]': size === 'small',
-    'w-12 h-6 px-1': size === 'medium'
+    'w-12 h-6 px-1': size === 'medium' || size === 'large'
   });
   const inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
   const indicatorClasses = clsx$1('rounded-full bg-iconOnColor', {
     'w-2.5 h-2.5': size === 'small',
-    'w-4 h-4': size === 'medium',
+    'w-4 h-4': size === 'medium' || size === 'large',
     'ml-auto': isChecked
   });
   const labelClasses = clsx$1('break-all', {
     'mr-2': labelPosition === 'left',
     'ml-2': labelPosition === 'right',
-    'typography-label12regular': size === 'small',
-    'typography-label16regular': size === 'medium',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large',
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });
@@ -1961,7 +1961,7 @@ function Tooltip({
       verticalPosition: verticalPosition,
       horizontalAlign: horizontalAlign,
       tooltipPosition: tooltipPosition
-    }) : ( /*#__PURE__*/createPortal( /*#__PURE__*/jsx(TooltipContent, {
+    }) : (/*#__PURE__*/createPortal(/*#__PURE__*/jsx(TooltipContent, {
       isPortal: true,
       content: content,
       size: size,