@zenkigen-inc/component-ui 1.9.10 → 1.10.0

package/dist/index.js

@@ -5,29 +5,22 @@ import aa, { useState, useCallback, useEffect, createContext, useContext, useRef
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  for (var key in source) {
-    if (Object.prototype.hasOwnProperty.call(source, key)) {
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
 const _excluded$8 = ["size"];
@@ -41,11 +34,11 @@ function Avatar(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const classes = clsx('flex items-center justify-center rounded-full text-textOnColor', {
-    'w-16 h-16 typography-label1regular': size === 'x-large',
-    'w-12 h-12 typography-label2regular': size === 'large',
-    'w-10 h-10 typography-label2regular': size === 'medium',
-    'w-8 h-8 typography-label4regular': size === 'small',
-    'w-6 h-6 typography-label4regular': size === 'x-small',
+    'w-16 h-16 typography-label16regular': size === 'x-large',
+    'w-12 h-12 typography-label14regular': size === 'large',
+    'w-10 h-10 typography-label14regular': size === 'medium',
+    'w-8 h-8 typography-label11regular': size === 'small',
+    'w-6 h-6 typography-label11regular': size === 'x-small',
     'bg-disabled01': props.isDisabled,
     'bg-icon01': props.userId == null,
     [userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]]: props.userId != null && !((_props$isDisabled = props.isDisabled) != null ? _props$isDisabled : false)
@@ -74,7 +67,7 @@ function Breadcrumb({
   return /*#__PURE__*/jsx("nav", {
     "aria-label": "breadcrumb",
     children: /*#__PURE__*/jsx("ul", {
-      className: "typography-label2regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
+      className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
       children: children
     })
   });
@@ -106,8 +99,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,
-    'typography-label1regular': size === 'large',
-    'typography-label2regular': size !== 'large'
+    'typography-label16regular': size === 'large',
+    'typography-label14regular': size !== 'large'
   });
   const Component = elementAs != null ? elementAs : 'button';
   return /*#__PURE__*/jsxs(Component, _extends({
@@ -197,7 +190,7 @@ function Checkbox({
   const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
     'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', {
+  const labelClasses = clsx$1('typography-label14regular ml-2 flex-[1_0_0] break-all', {
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });
@@ -31186,7 +31179,7 @@ const Icon = _ref => {
     'w-6 h-6': size === 'medium',
     'w-8 h-8': size === 'large',
     'w-10 h-10': size === 'x-large'
-  });
+  }, props.className);
   return /*#__PURE__*/jsx("span", {
     className: classes,
     children: iconElements[props.name]
@@ -31216,7 +31209,7 @@ function DropdownItem({
     setIsVisible(false);
     onClick && onClick(event);
   };
-  const itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
     'bg-uiBackground01 fill-icon01 text-interactive02': color === 'gray',
     'fill-supportDanger text-supportDanger': color === 'red'
   });
@@ -31315,9 +31308,9 @@ function Dropdown({
   const labelClasses = clsx$1('flex items-center', {
     'mr-1': !isArrowHidden && size === 'x-small',
     'mr-2': !isArrowHidden && size !== 'x-small',
-    'typography-label3regular': size === 'x-small',
-    'typography-label2regular': size === 'small' || size === 'medium',
-    'typography-label1regular': size === 'large'
+    'typography-label12regular': size === 'x-small',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large'
   });
   return /*#__PURE__*/jsx(DropdownContext.Provider, {
     value: {
@@ -31431,7 +31424,7 @@ function IconButton(_ref) {
       isDisabled = false
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  const baseClasses = clsx('typography-label1regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  const baseClasses = clsx('typography-label16regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'h-4 w-4': size === 'small' && isNoPadding,
     'h-6 w-6': size === 'small' && !isNoPadding || (size === 'medium' || size === 'large') && isNoPadding,
     'h-8 w-8': size === 'medium' && !isNoPadding,
@@ -31623,7 +31616,7 @@ function NotificationInline(_ref) {
       size = 'medium'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  const wrapperClasses = clsx('typography-body2regular flex items-center gap-1 rounded text-text01', {
+  const wrapperClasses = clsx('typography-body13regular flex items-center gap-1 rounded text-text01', {
     'bg-uiBackgroundError': state === 'attention',
     'bg-uiBackgroundWarning': state === 'warning',
     'bg-uiBackgroundBlue': state === 'information',
@@ -31681,8 +31674,14 @@ function PaginationButton({
   const {
     currentPage
   } = useContext(PaginationContext);
-  return /*#__PURE__*/jsx(Button, {
-    variant: page === currentPage ? 'outline' : 'text',
+  const buttonClasses = clsx('flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1', 'typography-label14regular', 'text-interactive02', 'hover:bg-hover02', {
+    'border border-uiBorder02': page === currentPage
+  }, {
+    'border-transparent': page !== currentPage
+  });
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    className: buttonClasses,
     onClick: () => onClick(page),
     children: page
   });
@@ -31711,13 +31710,14 @@ function Pagination({
       currentPage
     },
     children: /*#__PURE__*/jsxs("ul", {
-      className: "flex gap-2",
+      className: "flex gap-1",
       children: [/*#__PURE__*/jsx("li", {
+        className: "flex items-center",
         children: /*#__PURE__*/jsx(IconButton, {
           isDisabled: currentPage === START_PAGE,
           variant: "text",
           icon: "angle-left",
-          size: "medium",
+          size: "small",
           onClick: () => onClick(currentPage - 1)
         })
       }), /*#__PURE__*/jsx("li", {
@@ -31748,11 +31748,12 @@ function Pagination({
           page: totalPage
         })
       }), /*#__PURE__*/jsx("li", {
+        className: "flex items-center",
         children: /*#__PURE__*/jsx(IconButton, {
           isDisabled: currentPage === totalPage,
           variant: "text",
           icon: "angle-right",
-          size: "medium",
+          size: "small",
           onClick: () => onClick(currentPage + 1)
         })
       })]
@@ -31778,7 +31779,7 @@ function SelectItem$1({
     onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
-  const itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
     'text-interactive01 fill-interactive01 bg-selectedUi': option.id === (selectedOption == null ? void 0 : selectedOption.id),
     'text-interactive02 fill-icon01 bg-uiBackground01': option.id !== (selectedOption == null ? void 0 : selectedOption.id)
   });
@@ -31841,7 +31842,7 @@ function SelectList$1({
     'top-11': size === 'large',
     'border-solid border border-uiBorder01': variant === 'outline'
   });
-  const deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
+  const deselectButtonClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     style: {
@@ -31893,9 +31894,9 @@ function Select({
   const labelClasses = clsx$1('overflow-hidden', {
     'mr-1': size === 'x-small',
     'mr-2': size !== 'x-small',
-    'typography-label3regular': size === 'x-small',
-    'typography-label2regular': size === 'small' || size === 'medium',
-    'typography-label1regular': size === 'large'
+    'typography-label12regular': size === 'x-small',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large'
   });
   return /*#__PURE__*/jsx(SelectContext.Provider, {
     value: {
@@ -31980,7 +31981,7 @@ function PaginationSelect({
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text01",
+        className: "typography-label14regular text-text01",
         children: [minCount > 0 && `${minCount} - `, maxCount, countLabel]
       }), /*#__PURE__*/jsx(Select, {
         size: "medium",
@@ -31993,7 +31994,7 @@ function PaginationSelect({
           option: option
         }, option.id))
       }), /*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text03",
+        className: "typography-label14regular text-text03",
         children: ["/ ", pageMax, pageLabel]
       })]
     }), /*#__PURE__*/jsxs("div", {
@@ -32052,7 +32053,7 @@ function Radio({
   const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
     'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] select-none break-all', {
+  const labelClasses = clsx$1('typography-label14regular ml-2 flex-[1_0_0] select-none break-all', {
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });
@@ -32103,8 +32104,8 @@ const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
     'h-10 px-4': size === 'large'
   });
   const inputClasses = clsx('mx-2.5 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', {
-    ['typography-label2regular']: size === 'medium',
-    ['typography-label1regular']: size === 'large'
+    ['typography-label14regular']: size === 'medium',
+    ['typography-label16regular']: size === 'large'
   });
   return /*#__PURE__*/jsx("div", {
     className: "relative",
@@ -32145,7 +32146,7 @@ function SelectItem({
   isSortKey,
   onClickItem
 }) {
-  const itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
     'bg-selectedUi fill-interactive01 text-interactive01': isSortKey,
     'bg-uiBackground01 fill-icon01 text-interactive02': !isSortKey
   });
@@ -32182,7 +32183,7 @@ function SelectList({
     'top-11': size === 'large',
     'border-solid border border-uiBorder01': variant === 'outline'
   });
-  const deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
+  const deselectButtonClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     children: [/*#__PURE__*/jsx(SelectItem, {
@@ -32237,9 +32238,9 @@ function SelectSort({
     'pointer-events-none': isDisabled
   });
   const labelClasses = clsx$1('truncate', {
-    'typography-label3regular': size === 'x-small',
-    'typography-label2regular': size === 'small' || size === 'medium',
-    'typography-label1regular': size === 'large',
+    'typography-label12regular': size === 'x-small',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large',
     'mr-1': size === 'x-small',
     'mr-2': size !== 'x-small'
   });
@@ -32284,9 +32285,9 @@ const TabItem = _ref => {
     } = _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-label2regular': !isSelected,
+    'typography-label14regular': !isSelected,
     'text-interactive02 hover:before:bg-uiBorder02Dark': !isSelected,
-    'typography-label2bold': isSelected,
+    'typography-label14bold': isSelected,
     'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
   });
   return /*#__PURE__*/jsx("button", {
@@ -32394,10 +32395,10 @@ function Tag({
   const wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', {
     [tagColors[color]]: variant === 'normal',
     [tagLightColors[color]]: variant === 'light',
-    'h-[14px] typography-label4regular': !isEditable && size === 'x-small',
-    'h-4 typography-label3regular': !isEditable && size === 'small',
-    'h-[18px] typography-label2regular': !isEditable && size === 'medium',
-    'h-[22px] typography-label2regular': isEditable && size === 'medium',
+    'h-[14px] typography-label11regular': !isEditable && size === 'x-small',
+    'h-4 typography-label12regular': !isEditable && size === 'small',
+    'h-[18px] typography-label14regular': !isEditable && size === 'medium',
+    'h-[22px] typography-label14regular': isEditable && size === 'medium',
     'rounded-full': isEditable,
     rounded: !isEditable,
     'py-0.5 px-1': !isEditable,
@@ -32425,10 +32426,10 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   const classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
     'border-supportError': isError && !disabled,
     'hover:border-hoverInput': !disabled && !isError,
-    'border-uiBorder01 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
+    'border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
     'bg-disabled02 border-disabled01': disabled,
-    ['typography-body1regular px-2 pt-1.5 pb-2']: size === 'medium',
-    ['text-4 px-3.5 py-2.5']: size === 'large',
+    ['typography-body14regular px-2 pt-1.5 pb-2']: size === 'medium',
+    ['text-4 leading-normal px-3.5 py-2.5']: size === 'large',
     'text-supportError': isError,
     'resize-none': !isResizable
   });
@@ -32457,7 +32458,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
-    'border-uiBorder01': !isError,
+    'border-uiBorder02': !isError && !disabled,
     'border-supportError': isError && !disabled,
     'hover:border-hoverInput': !disabled && !isError,
     'hover:focus-within:border-activeInput': !isError,
@@ -32465,8 +32466,8 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     'bg-disabled02 border-disabled01': disabled
   });
   const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
-    ['typography-label2regular pt-1.5 pb-2']: size === 'medium',
-    ['typography-label1regular py-2.5']: size === 'large',
+    ['typography-label14regular min-h-8']: size === 'medium',
+    ['typography-label16regular min-h-10']: size === 'large',
     'text-text01': !isError,
     'text-supportError': isError
   });
@@ -32522,7 +32523,7 @@ function Toast({
     'fill-supportWarning': state === 'warning',
     'fill-supportInfo': state === 'information'
   });
-  const textClasses = clsx$1('typography-body2regular flex-1 pt-[3px]', {
+  const textClasses = clsx$1('typography-body13regular flex-1 pt-[3px]', {
     'text-supportError': state === 'error',
     'text-text01': state === 'success' || state === 'warning' || state === 'information'
   });
@@ -32638,8 +32639,8 @@ function Toggle({
   const labelClasses = clsx$1('break-all', {
     'mr-2': labelPosition === 'left',
     'ml-2': labelPosition === 'right',
-    'typography-label3regular': size === 'small',
-    'typography-label1regular': size === 'medium',
+    'typography-label12regular': size === 'small',
+    'typography-label16regular': size === 'medium',
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });
@@ -32780,8 +32781,8 @@ const TooltipContent = ({
     'w-[46px]': size !== 'small'
   });
   const tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor', {
-    'typography-body3regular': size === 'small',
-    'typography-body2regular': size === 'medium',
+    'typography-body12regular': size === 'small',
+    'typography-body13regular': size === 'medium',
     'px-2 pb-1 pt-1.5': size === 'small',
     'px-4 py-3': size === 'medium',
     'bottom-2': verticalPosition !== 'bottom' && size === 'small',