@zenkigen-inc/component-ui 1.9.2 → 1.9.3

package/dist/button/button.d.ts

@@ -1,7 +1,12 @@
-import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
-type Props = {
+export type ElementAs = ElementType;
+export type AsProp<T extends ElementAs> = {
+    elementAs?: T;
+};
+export type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
+type Props<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     size?: Size;
     width?: CSSProperties['width'];
     isSelected?: boolean;
@@ -10,21 +15,6 @@ type Props = {
     before?: ReactNode;
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
-} & ({
-    type?: 'anchor';
-    href?: string;
-    target?: HTMLAnchorElement['target'];
-    onClick?: never;
-} | {
-    type?: 'button';
-    href?: never;
-    target?: never;
-    onClick?: () => void;
-} | {
-    type?: 'submit';
-    href?: never;
-    target?: never;
-    onClick?: () => void;
-});
-export declare const Button: import("react").ForwardRefExoticComponent<PropsWithChildren<Props> & import("react").RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
+}>;
+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 {};

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { userColors, buttonColors, focusVisible, iconColors, typography, tagColors, tagLightColors } from '@zenkigen-inc/component-theme';
 import clsx$1, { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import aa, { forwardRef, useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect } from 'react';
+import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect, forwardRef } from 'react';
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
@@ -78,53 +78,40 @@ function Breadcrumb(_ref) {
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$6 = ["size", "variant", "type", "href", "target", "onClick"];
-var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var _excluded$6 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
+var Button = 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,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    width = _ref.width,
+    borderRadius = _ref.borderRadius,
+    before = _ref.before,
+    after = _ref.after,
+    elementAs = _ref.elementAs,
+    children = _ref.children,
     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': type === 'anchor'
-  }, _clsx[buttonColors[variant].selected] = props.isSelected, _clsx[buttonColors[variant].base] = !props.isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-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 (type === 'anchor') {
-    return /*#__PURE__*/jsxs("a", {
-      className: baseClasses,
-      href: href,
-      target: target,
-      style: {
-        width: props.width,
-        borderRadius: props.borderRadius
-      },
-      ref: ref,
-      children: [props.before, props.children, props.after]
-    });
-  } else {
-    return /*#__PURE__*/jsxs("button", {
-      type: type === 'submit' ? 'submit' : 'button',
-      className: baseClasses,
-      disabled: props.isDisabled,
-      onClick: onClick,
-      style: {
-        width: props.width,
-        borderRadius: props.borderRadius
-      },
-      ref: ref,
-      children: [props.before, props.children, props.after]
-    });
-  }
-});
-Button.displayName = 'Button';
+    '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'] = props.isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = !borderRadius, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
+  var Component = elementAs || 'button';
+  return /*#__PURE__*/jsxs(Component, _extends({
+    className: baseClasses,
+    style: {
+      width: width,
+      borderRadius: borderRadius
+    },
+    disabled: isDisabled
+  }, props, {
+    children: [before, children, after]
+  }));
+};
 
 var CheckedIcon = function CheckedIcon() {
   return /*#__PURE__*/jsx("svg", {