@zenkigen-inc/component-ui 1.14.3 → 1.14.5

package/README.md

@@ -44,11 +44,6 @@ yarn generate-component
 
 使用する側の import を簡略化させるため root にある [packages/component-ui/src/index.ts](https://github.com/zenkigen/zenkigen-component/blob/main/packages/components/src/index.ts) に実装したコンポーネントを export してください。
 
-### コーディングガイドライン（社内のみ）
-
-開発する際は以下を参照してください。
-https://www.notion.so/zenkigen/5d4ebd0d93b74124a533cf167b852ec0
-
 ## ライセンス
 
 @zenkigen-inc/component-ui は MIT ライセンスに基づいています。

package/dist/button/button.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
+type JustifyContent = 'start' | 'center';
 export type ElementAs = ElementType;
 export type AsProp<T extends ElementAs> = {
     elementAs?: T;
@@ -15,6 +16,7 @@ type Props<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     before?: ReactNode;
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
+    justifyContent?: JustifyContent;
 }>;
-export declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, before, after, elementAs, children, ...props }: Props<T>) => import("react").JSX.Element;
+export declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props<T>) => import("react").JSX.Element;
 export {};

package/dist/hooks/use-outside-click.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from 'react';
-export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void, enabled?: boolean) => void;
+export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;

package/dist/index.esm.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;
@@ -71,7 +71,7 @@ function Breadcrumb(_ref) {
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
+var _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "justifyContent", "before", "after", "elementAs", "children"];
 var Button = function Button(_ref) {
   var _clsx;
   var _ref$size = _ref.size,
@@ -83,17 +83,19 @@ var Button = function Button(_ref) {
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     width = _ref.width,
     borderRadius = _ref.borderRadius,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? 'center' : _ref$justifyContent,
     before = _ref.before,
     after = _ref.after,
     elementAs = _ref.elementAs,
     children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {
+  var baseClasses = clsx('flex shrink-0 items-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {
     'h-6 px-2.5': size === 'small',
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
     'inline-flex': elementAs === 'a'
-  }, _clsx[buttonColors[variant].selected] = isSelected, _clsx[buttonColors[variant].base] = !isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = borderRadius == null, _clsx['typography-label16regular'] = size === 'large', _clsx['typography-label14regular'] = size !== 'large', _clsx));
+  }, _clsx[buttonColors[variant].selected] = isSelected, _clsx[buttonColors[variant].base] = !isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = borderRadius == null, _clsx['justify-start'] = justifyContent === 'start', _clsx['justify-center'] = justifyContent === 'center', _clsx['typography-label16regular'] = size === 'large', _clsx['typography-label14regular'] = size !== 'large', _clsx));
   var Component = elementAs != null ? elementAs : 'button';
   return /*#__PURE__*/jsxs(Component, _extends({
     className: baseClasses,
@@ -258,7 +260,7 @@ var Icon = function Icon(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var classes = clsx('inline-block shrink-0', (_clsx = {
     'fill-disabled01': isDisabled
-  }, _clsx[iconColors.icon01] = !isDisabled && props.color === 'icon01', _clsx[iconColors.icon01Dark] = !isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !isDisabled && props.color === 'icon03Dark', _clsx[iconColors.iconOnColor] = !isDisabled && props.color === 'iconOnColor', _clsx['w-3 h-3'] = size === 'x-small', _clsx['w-4 h-4'] = size === 'small', _clsx['w-6 h-6'] = size === 'medium', _clsx['w-8 h-8'] = size === 'large', _clsx['w-10 h-10'] = size === 'x-large', _clsx), props.className);
+  }, _clsx[iconColors.icon01] = !isDisabled && props.color === 'icon01', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.iconOnColor] = !isDisabled && props.color === 'iconOnColor', _clsx['w-3 h-3'] = size === 'x-small', _clsx['w-4 h-4'] = size === 'small', _clsx['w-6 h-6'] = size === 'medium', _clsx['w-8 h-8'] = size === 'large', _clsx['w-10 h-10'] = size === 'x-large', _clsx), props.className);
   return /*#__PURE__*/jsx("span", {
     className: classes,
     children: iconElements[props.name]
@@ -695,7 +697,7 @@ function Modal(_ref) {
   useEffect(function () {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ModalContext.Provider, {
+  return isMounted && isOpen ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
       onClose: onClose
     },
@@ -1432,7 +1434,7 @@ var TabItem = function TabItem(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var 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
   });
@@ -1600,15 +1602,18 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
   var 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
   });
-  var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8'] = size === 'medium', _clsx['typography-label16regular min-h-10'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx));
+  var inputClasses = clsx('flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8 px-2'] = size === 'medium', _clsx['typography-label16regular min-h-10 px-3'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx['pr-0'] = isShowClearButton, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -1617,15 +1622,11 @@ var TextInput = /*#__PURE__*/forwardRef(function (_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
     })]
   });
 });
@@ -1743,7 +1744,7 @@ var ToastProvider = function ToastProvider(_ref) {
       addToast: addToast,
       removeToast: 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(function (_ref3) {
         var id = _ref3.id,
@@ -1784,19 +1785,19 @@ function Toggle(_ref) {
     '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'
   });
   var inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
   var 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
   });
   var 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
   });
@@ -2030,7 +2031,7 @@ function Tooltip(_ref) {
       verticalPosition: verticalPosition,
       horizontalAlign: horizontalAlign,
       tooltipPosition: tooltipPosition
-    }) : ( /*#__PURE__*/createPortal( /*#__PURE__*/jsx(TooltipContent, {
+    }) : (/*#__PURE__*/createPortal(/*#__PURE__*/jsx(TooltipContent, {
       isPortal: true,
       content: content,
       size: size,