@zenkigen-inc/component-ui 1.7.4 → 1.8.1

package/dist/index.js

@@ -82,18 +82,22 @@ function Breadcrumb({
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-const _excluded$6 = ["size", "variant"];
+const _excluded$6 = ["size", "variant", "type", "href", "target", "onClick"];
 function Button(_ref) {
   let {
       size = 'medium',
-      variant = 'fill'
+      variant = 'fill',
+      type = 'button',
+      href,
+      target,
+      onClick
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const baseClasses = clsx('flex shrink-0 items-center justify-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',
-    'inline-flex': props.isAnchor,
+    'inline-flex': type === 'anchor',
     [buttonColors[variant].selected]: props.isSelected,
     [buttonColors[variant].base]: !props.isSelected,
     'hover:text-text-textOnColor active:text-text-textOnColor [&:hover>*]:fill-icon-iconOnColor [&:active>*]:fill-icon-iconOnColor': props.isSelected && variant !== 'outline' && variant !== 'text',
@@ -102,11 +106,11 @@ function Button(_ref) {
     'typography-label1regular': size === 'large',
     'typography-label2regular': size !== 'large'
   });
-  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
       },
@@ -114,10 +118,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
@@ -131,7 +135,7 @@ const 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",
@@ -144,7 +148,7 @@ const 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"
     })
@@ -172,11 +176,11 @@ function Checkbox({
   const handleChange = useCallback(e => {
     !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  const baseInputClasses = clsx$1('peer absolute z-[1] h-5 w-5 opacity-0', {
+  const baseInputClasses = clsx$1('peer absolute z-[1] size-5 opacity-0', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  const boxClasses = clsx$1('inline-flex h-5 w-5 items-center justify-center rounded-sm border bg-white', focusVisible.normalPeer, {
+  const 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,
@@ -184,7 +188,7 @@ function Checkbox({
     'border-hover-hoverError': !isDisabled && isMouseOver && color === 'error',
     'border-support-supportError': !isDisabled && !isMouseOver && color === 'error'
   });
-  const indicatorClasses = clsx$1('relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center', {
+  const indicatorClasses = clsx$1('relative flex size-5 flex-[0_0_auto] items-center justify-center', {
     'bg-disabled-disabled01': isDisabled && isChecked,
     'border-disabled-disabled01': isDisabled
   });
@@ -199,7 +203,7 @@ function Checkbox({
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  const hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-[1px]', {
+  const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
     'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   const labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', {
@@ -209,7 +213,7 @@ function Checkbox({
   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,
@@ -31547,7 +31551,7 @@ function Modal({
       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: {
@@ -31827,7 +31831,7 @@ function Select({
     'h-10': size === 'large',
     'cursor-not-allowed': isDisabled
   });
-  const 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, {
+  const 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
@@ -31970,24 +31974,24 @@ function Radio({
     setIsMouseOver(false);
   }, []);
   const handleChange = useCallback(e => !isDisabled && (onChange == null ? void 0 : onChange(e)), [isDisabled, onChange]);
-  const inputClasses = clsx$1('peer absolute z-[1] h-6 w-6 opacity-0', {
+  const inputClasses = clsx$1('peer absolute z-[1] size-6 opacity-0', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  const boxClasses = clsx$1('inline-flex h-5 w-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
+  const 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
   });
-  const afterClasses = clsx$1('absolute inset-0 m-auto block h-3 w-3 rounded-full', {
+  const 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
   });
-  const hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-full', {
+  const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
     'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   const labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] select-none break-all', {
@@ -31997,7 +32001,7 @@ function Radio({
   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,
@@ -32012,7 +32016,7 @@ function Radio({
       }), /*#__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", {
@@ -32167,7 +32171,7 @@ function SelectSort({
     'h-10': size === 'large',
     'cursor-not-allowed': isDisabled
   });
-  const buttonClasses = clsx$1('flex h-full w-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  const buttonClasses = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     [buttonColors[variant].selected]: isSortKey,
     [buttonColors[variant].base]: !isSortKey,
     'px-2': size === 'x-small' || size === 'small',
@@ -32293,7 +32297,7 @@ const DeleteIcon = ({
   variant,
   onClick
 }) => {
-  const 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);
+  const 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);
   const 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'
@@ -32386,7 +32390,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClickClearButton
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const inputWrapClasses = clsx('flex items-center gap-2 overflow-hidden rounded border pl-2 pr-3', {
+  const 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,
@@ -32394,7 +32398,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     'focus-within:border-active-activeInput': !isError,
     'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
   });
-  const inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', {
+  const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', {
     ['typography-label2regular pt-1.5 pb-2']: size === 'medium',
     ['typography-label1regular py-2.5']: size === 'large',
     'text-text-text01': !isError,
@@ -32407,12 +32411,15 @@ const TextInput = /*#__PURE__*/forwardRef((_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
+      })
     })]
   });
 });