@zenkigen-inc/component-ui 1.13.0 → 1.14.4

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/index.esm.js

@@ -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]
@@ -1245,7 +1247,7 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, {
     'h-10 px-4': size === 'large'
   });
-  var inputClasses = clsx('mx-2.5 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular'] = size === 'medium', _clsx['typography-label16regular'] = size === 'large', _clsx));
+  var inputClasses = clsx('mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular'] = size === 'medium', _clsx['typography-label16regular'] = size === 'large', _clsx));
   return /*#__PURE__*/jsx("div", {
     className: "relative",
     ref: ref,
@@ -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
   });
@@ -1784,19 +1786,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
   });