@zenkigen-inc/component-ui 1.7.4 → 1.8.1

package/dist/button/button.d.ts

@@ -11,12 +11,20 @@ type Props = {
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
 } & ({
-    isAnchor: true;
+    type?: 'anchor';
     href: string;
     target?: HTMLAnchorElement['target'];
+    onClick?: never;
 } | {
-    isAnchor?: false;
+    type?: 'button';
+    href?: never;
+    target?: never;
+    onClick?: () => void;
+} | {
+    type?: 'submit';
+    href?: never;
+    target?: never;
     onClick?: () => void;
 });
-export declare function Button({ size, variant, ...props }: PropsWithChildren<Props>): import("react").JSX.Element;
+export declare function Button({ size, variant, type, href, target, onClick, ...props }: PropsWithChildren<Props>): import("react").JSX.Element;
 export {};

package/dist/index.esm.js

@@ -78,25 +78,30 @@ function Breadcrumb(_ref) {
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$6 = ["size", "variant"];
+var _excluded$6 = ["size", "variant", "type", "href", "target", "onClick"];
 function Button(_ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    href = _ref.href,
+    target = _ref.target,
+    onClick = _ref.onClick,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var baseClasses = clsx('flex shrink-0 items-center justify-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': props.isAnchor
+    'inline-flex': type === 'anchor'
   }, _clsx[buttonColors[variant].selected] = props.isSelected, _clsx[buttonColors[variant].base] = !props.isSelected, _clsx['hover:text-text-textOnColor active:text-text-textOnColor [&:hover>*]:fill-icon-iconOnColor [&:active>*]:fill-icon-iconOnColor'] = props.isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = props.isDisabled, _clsx['rounded-button'] = !props.borderRadius, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
-  if (props.isAnchor) {
+  if (type === 'anchor') {
     return /*#__PURE__*/jsxs("a", {
       className: baseClasses,
-      href: props.href,
-      target: props.target,
+      href: href,
+      target: target,
       style: {
         borderRadius: props.borderRadius
       },
@@ -104,10 +109,10 @@ function Button(_ref) {
     });
   } else {
     return /*#__PURE__*/jsxs("button", {
-      type: "button",
+      type: type === 'submit' ? 'submit' : 'button',
       className: baseClasses,
       disabled: props.isDisabled,
-      onClick: props.onClick,
+      onClick: onClick,
       style: {
         width: props.width,
         borderRadius: props.borderRadius
@@ -121,7 +126,7 @@ var CheckedIcon = function CheckedIcon() {
   return /*#__PURE__*/jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 h-5 w-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
+    className: "absolute z-10 size-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
     children: /*#__PURE__*/jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -134,7 +139,7 @@ var MinusIcon = function MinusIcon() {
   return /*#__PURE__*/jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 h-5 w-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
+    className: "absolute z-10 size-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
     children: /*#__PURE__*/jsx("path", {
       d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z"
     })
@@ -167,11 +172,11 @@ function Checkbox(_ref) {
   var handleChange = useCallback(function (e) {
     !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  var baseInputClasses = clsx$1('peer absolute z-[1] h-5 w-5 opacity-0', {
+  var baseInputClasses = clsx$1('peer absolute z-[1] size-5 opacity-0', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  var boxClasses = clsx$1('inline-flex h-5 w-5 items-center justify-center rounded-sm border bg-white', focusVisible.normalPeer, {
+  var boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-sm border bg-white', focusVisible.normalPeer, {
     'border-disabled-disabled01': isDisabled,
     'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
     'border-border-uiBorder03': !isDisabled && !isMouseOver,
@@ -179,7 +184,7 @@ function Checkbox(_ref) {
     'border-hover-hoverError': !isDisabled && isMouseOver && color === 'error',
     'border-support-supportError': !isDisabled && !isMouseOver && color === 'error'
   });
-  var indicatorClasses = clsx$1('relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center', {
+  var indicatorClasses = clsx$1('relative flex size-5 flex-[0_0_auto] items-center justify-center', {
     'bg-disabled-disabled01': isDisabled && isChecked,
     'border-disabled-disabled01': isDisabled
   });
@@ -194,7 +199,7 @@ function Checkbox(_ref) {
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  var hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-[1px]', {
+  var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
     'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', {
@@ -204,7 +209,7 @@ function Checkbox(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex h-6 w-6 items-center justify-center",
+      className: "flex size-6 items-center justify-center",
       children: [/*#__PURE__*/jsx("input", {
         type: "checkbox",
         value: value,
@@ -31555,7 +31560,7 @@ function Modal(_ref) {
       onClose: onClose
     },
     children: /*#__PURE__*/jsx("div", {
-      className: "fixed left-0 top-0 z-overlay flex h-full w-full items-center justify-center bg-background-backgroundOverlayBlack py-4",
+      className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-background-backgroundOverlayBlack py-4",
       children: /*#__PURE__*/jsx("div", {
         className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
         style: {
@@ -31860,7 +31865,7 @@ function Select(_ref) {
     'h-10': size === 'large',
     'cursor-not-allowed': isDisabled
   });
-  var buttonClasses = clsx$1('flex h-full w-full items-center rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  var buttonClasses = clsx$1('flex size-full items-center rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'px-2': size === 'x-small' || size === 'small',
     'px-4': size === 'medium' || size === 'large',
     'pointer-events-none': isDisabled
@@ -32016,24 +32021,24 @@ function Radio(_ref) {
   var handleChange = useCallback(function (e) {
     return !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  var inputClasses = clsx$1('peer absolute z-[1] h-6 w-6 opacity-0', {
+  var inputClasses = clsx$1('peer absolute z-[1] size-6 opacity-0', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  var boxClasses = clsx$1('inline-flex h-5 w-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
+  var boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
     'border-disabled-disabled01 hover:border-disabled-disabled01': isDisabled && !isMouseOver,
     'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
     'border-border-uiBorder03': !isDisabled,
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  var afterClasses = clsx$1('absolute inset-0 m-auto block h-3 w-3 rounded-full', {
+  var afterClasses = clsx$1('absolute inset-0 m-auto block size-3 rounded-full', {
     'bg-disabled-disabled01': isDisabled && isChecked,
     'bg-active-activeSelectedUi': !isDisabled && isChecked,
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  var hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-full', {
+  var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
     'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] select-none break-all', {
@@ -32043,7 +32048,7 @@ function Radio(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex h-6 w-6 items-center justify-center",
+      className: "flex size-6 items-center justify-center",
       children: [/*#__PURE__*/jsx("input", {
         type: "checkbox",
         value: value,
@@ -32058,7 +32063,7 @@ function Radio(_ref) {
       }), /*#__PURE__*/jsx("div", {
         className: boxClasses,
         children: /*#__PURE__*/jsxs("div", {
-          className: "relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center",
+          className: "relative flex size-5 flex-[0_0_auto] items-center justify-center",
           children: [/*#__PURE__*/jsx("span", {
             className: afterClasses
           }), /*#__PURE__*/jsx("span", {
@@ -32224,7 +32229,7 @@ function SelectSort(_ref) {
     'h-10': size === 'large',
     'cursor-not-allowed': isDisabled
   });
-  var buttonClasses = clsx$1('flex h-full w-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {}, _clsx[buttonColors[variant].selected] = isSortKey, _clsx[buttonColors[variant].base] = !isSortKey, _clsx['px-2'] = size === 'x-small' || size === 'small', _clsx['px-4'] = size === 'medium' || size === 'large', _clsx['pointer-events-none'] = isDisabled, _clsx));
+  var buttonClasses = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {}, _clsx[buttonColors[variant].selected] = isSortKey, _clsx[buttonColors[variant].base] = !isSortKey, _clsx['px-2'] = size === 'x-small' || size === 'small', _clsx['px-4'] = size === 'medium' || size === 'large', _clsx['pointer-events-none'] = isDisabled, _clsx));
   var labelClasses = clsx$1('truncate', {
     'typography-label3regular': size === 'x-small',
     'typography-label2regular': size === 'small' || size === 'medium',
@@ -32341,7 +32346,7 @@ var DeleteIcon = function DeleteIcon(_ref) {
   var color = _ref.color,
     variant = _ref.variant,
     onClick = _ref.onClick;
-  var deleteButtonClasses = clsx$1('group ml-2 h-[14px] w-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-icon-iconOnColor focus-visible:bg-icon-iconOnColor', focusVisible.normal);
+  var deleteButtonClasses = clsx$1('group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-icon-iconOnColor focus-visible:bg-icon-iconOnColor', focusVisible.normal);
   var deletePathClasses = clsx$1({
     'fill-interactive-interactive02': color === 'gray' || variant === 'light',
     'group-hover:fill-interactive-interactive02 group-focus-visible:fill-interactive-interactive02 fill-icon-iconOnColor': color !== 'gray'
@@ -32424,7 +32429,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isError = _ref.isError,
     onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var inputWrapClasses = clsx('flex items-center gap-2 overflow-hidden rounded border pl-2 pr-3', {
+  var inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
     'border-border-uiBorder01': !isError,
     'border-support-supportError': isError && !props.disabled,
     'hover:border-hover-hoverInput': !props.disabled && !isError,
@@ -32432,7 +32437,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'focus-within:border-active-activeInput': !isError,
     'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
   });
-  var inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular pt-1.5 pb-2'] = size === 'medium', _clsx['typography-label1regular py-2.5'] = size === 'large', _clsx['text-text-text01'] = !isError, _clsx['text-support-supportError'] = isError, _clsx));
+  var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular pt-1.5 pb-2'] = size === 'medium', _clsx['typography-label1regular py-2.5'] = size === 'large', _clsx['text-text-text01'] = !isError, _clsx['text-support-supportError'] = isError, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -32440,12 +32445,15 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size: 1,
       className: inputClasses,
       onChange: props.onChange
-    }, props)), onClickClearButton && props.value && props.value.length !== 0 && !props.disabled && /*#__PURE__*/jsx(IconButton, {
-      variant: "text",
-      icon: "close",
-      size: "small",
-      isNoPadding: true,
-      onClick: onClickClearButton
+    }, props)), onClickClearButton && props.value && props.value.length !== 0 && !props.disabled && /*#__PURE__*/jsx("div", {
+      className: "absolute right-3",
+      children: /*#__PURE__*/jsx(IconButton, {
+        variant: "text",
+        icon: "close",
+        size: "small",
+        isNoPadding: true,
+        onClick: onClickClearButton
+      })
     })]
   });
 });