@zenkigen-inc/component-ui 1.16.0 → 1.16.1

package/dist/index.d.mts

@@ -143,20 +143,27 @@ declare const Icon: ({ size, isDisabled, ...props }: Props$o) => react.JSX.Eleme
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
 type Props$n = {
+    /** 表示するアイコン名 */
     icon: IconName;
+    /** ボタンのサイズ */
     size?: Size;
+    /** ボタンが無効かどうか */
     isDisabled?: boolean;
+    /** ボタンが選択されているかどうか */
+    isSelected?: boolean;
+    /** パディングを無効にするかどうか */
     isNoPadding?: boolean;
+    /** ボタンのバリアント */
     variant?: Variant;
-} & ({
+} & (({
     isAnchor: true;
     href: string;
     target?: HTMLAnchorElement['target'];
-} | {
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
     onClick?: () => void;
-});
-declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props$n): react.JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$n): react.JSX.Element;
 
 type Props$m = {
     size?: 'small' | 'medium' | 'large';
@@ -354,8 +361,10 @@ declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick
 
 type Props$9 = {
     children?: ReactNode;
+    /** レイアウトタイプ */
+    layout?: 'auto' | 'equal';
 };
-declare function Tab({ children }: Props$9): react.JSX.Element;
+declare function Tab({ children, layout }: Props$9): react.JSX.Element;
 declare namespace Tab {
     var Item: ({ isSelected, ...props }: {
         id: string;

package/dist/index.d.ts

@@ -143,20 +143,27 @@ declare const Icon: ({ size, isDisabled, ...props }: Props$o) => react.JSX.Eleme
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
 type Props$n = {
+    /** 表示するアイコン名 */
     icon: IconName;
+    /** ボタンのサイズ */
     size?: Size;
+    /** ボタンが無効かどうか */
     isDisabled?: boolean;
+    /** ボタンが選択されているかどうか */
+    isSelected?: boolean;
+    /** パディングを無効にするかどうか */
     isNoPadding?: boolean;
+    /** ボタンのバリアント */
     variant?: Variant;
-} & ({
+} & (({
     isAnchor: true;
     href: string;
     target?: HTMLAnchorElement['target'];
-} | {
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
     onClick?: () => void;
-});
-declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props$n): react.JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$n): react.JSX.Element;
 
 type Props$m = {
     size?: 'small' | 'medium' | 'large';
@@ -354,8 +361,10 @@ declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick
 
 type Props$9 = {
     children?: ReactNode;
+    /** レイアウトタイプ */
+    layout?: 'auto' | 'equal';
 };
-declare function Tab({ children }: Props$9): react.JSX.Element;
+declare function Tab({ children, layout }: Props$9): react.JSX.Element;
 declare namespace Tab {
     var Item: ({ isSelected, ...props }: {
         id: string;

package/dist/index.js

@@ -636,15 +636,16 @@ var import_component_theme9 = require("@zenkigen-inc/component-theme");
 var import_clsx10 = require("clsx");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function IconButton({
+  icon,
   size = "medium",
   variant = "outline",
   isNoPadding = false,
   isDisabled = false,
+  isSelected = false,
   ...props
 }) {
   const baseClasses = (0, import_clsx10.clsx)(
     "typography-label16regular flex items-center justify-center gap-1 rounded",
-    import_component_theme9.buttonColors[variant].base,
     import_component_theme9.buttonColors[variant].hover,
     import_component_theme9.buttonColors[variant].active,
     import_component_theme9.buttonColors[variant].disabled,
@@ -655,14 +656,20 @@ function IconButton({
       "h-8 w-8": size === "medium" && !isNoPadding,
       "h-10 w-10": size === "large" && !isNoPadding,
       "inline-flex": props.isAnchor,
-      "pointer-events-none": isDisabled
+      "pointer-events-none": isDisabled,
+      [import_component_theme9.buttonColors[variant].selected]: isSelected,
+      [import_component_theme9.buttonColors[variant].base]: !isSelected
     }
   );
   const iconSize = size === "small" ? "small" : "medium";
   if (props.isAnchor === true) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: baseClasses, href: props.href, target: props.target, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: props.icon, size: iconSize }) });
+    const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: icon, size: iconSize }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: props.icon, size: iconSize }) });
+    const buttonProps = Object.fromEntries(
+      Object.entries(props).filter(([key]) => key !== "isAnchor" && key !== "onClick")
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: icon, size: iconSize }) });
   }
 }
 
@@ -1681,12 +1688,16 @@ function SortButton({
   ) });
 }
 
+// src/tab/tab.tsx
+var import_clsx27 = require("clsx");
+var import_react26 = require("react");
+
 // src/tab/tab-item.tsx
 var import_clsx26 = require("clsx");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var TabItem = ({ isSelected = false, ...props }) => {
   const classes = (0, import_clsx26.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",
+    "relative z-0 flex justify-center 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-uiBorder04": !isSelected,
@@ -1710,31 +1721,33 @@ var TabItem = ({ isSelected = false, ...props }) => {
 
 // src/tab/tab.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function Tab({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
+function Tab({ children, layout = "auto" }) {
+  const childrenCount = import_react26.Children.count(children);
+  const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
+  const containerClasses = (0, import_clsx27.clsx)(
+    "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
-      role: "tablist",
-      className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
-      children
+      flex: layout === "auto",
+      grid: layout === "equal"
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx28 = __toESM(require("clsx"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
-  const classes = (0, import_clsx27.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  const classes = (0, import_clsx28.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-var import_clsx28 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = (0, import_clsx28.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  const rowClasses = (0, import_clsx29.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: rowClasses, children });
 }
 
@@ -1768,18 +1781,18 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 var import_component_theme20 = require("@zenkigen-inc/component-theme");
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 
 // src/tag/delete-icon.tsx
 var import_component_theme19 = require("@zenkigen-inc/component-theme");
-var import_clsx29 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = (0, import_clsx29.default)(
+  const deleteButtonClasses = (0, import_clsx30.default)(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
     import_component_theme19.focusVisible.normal
   );
-  const deletePathClasses = (0, import_clsx29.default)({
+  const deletePathClasses = (0, import_clsx30.default)({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
@@ -1797,7 +1810,7 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 // src/tag/tag.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = (0, import_clsx30.default)("flex", "items-center", "justify-center", {
+  const wrapperClasses = (0, import_clsx31.default)("flex", "items-center", "justify-center", {
     [import_component_theme20.tagColors[color]]: variant === "normal",
     [import_component_theme20.tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -1816,10 +1829,10 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 }
 
 // src/text-area/text-area.tsx
-var import_clsx31 = require("clsx");
-var import_react26 = require("react");
+var import_clsx32 = require("clsx");
+var import_react27 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var TextArea = (0, import_react26.forwardRef)(
+var TextArea = (0, import_react27.forwardRef)(
   ({
     size = "medium",
     isResizable = false,
@@ -1830,7 +1843,7 @@ var TextArea = (0, import_react26.forwardRef)(
     height,
     ...props
   }, ref) => {
-    const classes = (0, import_clsx31.clsx)(
+    const classes = (0, import_clsx32.clsx)(
       "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
       {
         "border-supportError": isError && !disabled,
@@ -1865,13 +1878,13 @@ var TextArea = (0, import_react26.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // src/text-input/text-input.tsx
-var import_clsx32 = require("clsx");
-var import_react27 = require("react");
+var import_clsx33 = require("clsx");
+var import_react28 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var TextInput = (0, import_react27.forwardRef)(
+var TextInput = (0, import_react28.forwardRef)(
   ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
     const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-    const inputWrapClasses = (0, import_clsx32.clsx)("relative flex items-center gap-2 overflow-hidden rounded border", {
+    const inputWrapClasses = (0, import_clsx33.clsx)("relative flex items-center gap-2 overflow-hidden rounded border", {
       "border-uiBorder02": !isError && !disabled,
       "border-supportError": isError && !disabled,
       "hover:border-hoverInput": !disabled && !isError,
@@ -1881,7 +1894,7 @@ var TextInput = (0, import_react27.forwardRef)(
       "pr-2": size === "medium" && isShowClearButton,
       "pr-3": size === "large" && isShowClearButton
     });
-    const inputClasses = (0, import_clsx32.clsx)("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+    const inputClasses = (0, import_clsx33.clsx)("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
       ["typography-label14regular min-h-8 px-2"]: size === "medium",
       ["typography-label16regular min-h-10 px-3"]: size === "large",
       "text-text01": !isError,
@@ -1897,8 +1910,8 @@ var TextInput = (0, import_react27.forwardRef)(
 TextInput.displayName = "TextInput";
 
 // src/toast/toast.tsx
-var import_clsx33 = __toESM(require("clsx"));
-var import_react28 = require("react");
+var import_clsx34 = __toESM(require("clsx"));
+var import_react29 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
@@ -1909,8 +1922,8 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react28.useState)(false);
-  const handleClose = (0, import_react28.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react29.useState)(false);
+  const handleClose = (0, import_react29.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -1918,17 +1931,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx33.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = (0, import_clsx34.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = (0, import_clsx33.default)("flex items-center", {
+  const iconClasses = (0, import_clsx34.default)("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx33.default)("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = (0, import_clsx34.default)("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -1938,7 +1951,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -1954,20 +1967,20 @@ function Toast({
 }
 
 // src/toast/toast-provider.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var ToastContext = (0, import_react29.createContext)({});
+var ToastContext = (0, import_react30.createContext)({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react29.useState)(false);
-  const [toasts, setToasts] = (0, import_react29.useState)([]);
-  const addToast = (0, import_react29.useCallback)(({ message, state }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react30.useState)(false);
+  const [toasts, setToasts] = (0, import_react30.useState)([]);
+  const addToast = (0, import_react30.useCallback)(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = (0, import_react29.useCallback)((id) => {
+  const removeToast = (0, import_react30.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setIsClientRender(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
@@ -1979,11 +1992,11 @@ var ToastProvider = ({ children }) => {
   ] });
 };
 var useToast = () => {
-  return (0, import_react29.useContext)(ToastContext);
+  return (0, import_react30.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-var import_clsx34 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function Toggle({
   id,
@@ -1994,7 +2007,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = (0, import_clsx34.default)("relative flex items-center rounded-full", {
+  const baseClasses = (0, import_clsx35.default)("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -2002,16 +2015,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = (0, import_clsx34.default)(
+  const inputClasses = (0, import_clsx35.default)(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = (0, import_clsx34.default)("rounded-full bg-iconOnColor", {
+  const indicatorClasses = (0, import_clsx35.default)("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = (0, import_clsx34.default)("break-all", {
+  const labelClasses = (0, import_clsx35.default)("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -2039,17 +2052,17 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TailIcon = (props) => {
-  const tailClasses = (0, import_clsx35.default)("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = (0, import_clsx36.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -2092,7 +2105,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = (0, import_clsx36.default)("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = (0, import_clsx37.default)("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -2101,7 +2114,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = (0, import_clsx36.default)(
+  const tooltipBodyClasses = (0, import_clsx37.default)(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -2134,9 +2147,9 @@ var TooltipContent = ({
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react30.useCallback)(
+  const calculatePosition = (0, import_react31.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -2200,8 +2213,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react31.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react31.useState)({
+  const [isVisible, setIsVisible] = (0, import_react32.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react32.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -2210,17 +2223,17 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react31.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react31.useCallback)(() => {
+  const targetRef = (0, import_react32.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react32.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
     setIsVisible(true);
   }, [isDisabledHover]);
-  const handleMouseOutWrapper = (0, import_react31.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react32.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (targetRef.current === null) return;
     const dimensions = targetRef.current?.getBoundingClientRect();
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });

package/dist/index.mjs

@@ -566,15 +566,16 @@ import { buttonColors as buttonColors3, focusVisible as focusVisible6 } from "@z
 import { clsx as clsx10 } from "clsx";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function IconButton({
+  icon,
   size = "medium",
   variant = "outline",
   isNoPadding = false,
   isDisabled = false,
+  isSelected = false,
   ...props
 }) {
   const baseClasses = clsx10(
     "typography-label16regular flex items-center justify-center gap-1 rounded",
-    buttonColors3[variant].base,
     buttonColors3[variant].hover,
     buttonColors3[variant].active,
     buttonColors3[variant].disabled,
@@ -585,14 +586,20 @@ function IconButton({
       "h-8 w-8": size === "medium" && !isNoPadding,
       "h-10 w-10": size === "large" && !isNoPadding,
       "inline-flex": props.isAnchor,
-      "pointer-events-none": isDisabled
+      "pointer-events-none": isDisabled,
+      [buttonColors3[variant].selected]: isSelected,
+      [buttonColors3[variant].base]: !isSelected
     }
   );
   const iconSize = size === "small" ? "small" : "medium";
   if (props.isAnchor === true) {
-    return /* @__PURE__ */ jsx12("a", { className: baseClasses, href: props.href, target: props.target, children: /* @__PURE__ */ jsx12(Icon, { name: props.icon, size: iconSize }) });
+    const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
+    return /* @__PURE__ */ jsx12("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ jsx12(Icon, { name: icon, size: iconSize }) });
   } else {
-    return /* @__PURE__ */ jsx12("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, children: /* @__PURE__ */ jsx12(Icon, { name: props.icon, size: iconSize }) });
+    const buttonProps = Object.fromEntries(
+      Object.entries(props).filter(([key]) => key !== "isAnchor" && key !== "onClick")
+    );
+    return /* @__PURE__ */ jsx12("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, ...buttonProps, children: /* @__PURE__ */ jsx12(Icon, { name: icon, size: iconSize }) });
   }
 }
 
@@ -1611,12 +1618,16 @@ function SortButton({
   ) });
 }
 
+// src/tab/tab.tsx
+import { clsx as clsx27 } from "clsx";
+import { Children as Children2 } from "react";
+
 // src/tab/tab-item.tsx
 import { clsx as clsx26 } from "clsx";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, ...props }) => {
   const classes = clsx26(
-    "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",
+    "relative z-0 flex justify-center 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-uiBorder04": !isSelected,
@@ -1640,31 +1651,33 @@ var TabItem = ({ isSelected = false, ...props }) => {
 
 // src/tab/tab.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
-function Tab({ children }) {
-  return /* @__PURE__ */ jsx34(
-    "div",
+function Tab({ children, layout = "auto" }) {
+  const childrenCount = Children2.count(children);
+  const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
+  const containerClasses = clsx27(
+    "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
-      role: "tablist",
-      className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
-      children
+      flex: layout === "auto",
+      grid: layout === "equal"
     }
   );
+  return /* @__PURE__ */ jsx34("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx27 from "clsx";
+import clsx28 from "clsx";
 import { jsx as jsx35 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx27("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  const classes = clsx28("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
   return /* @__PURE__ */ jsx35("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx28 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx28("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  const rowClasses = clsx29("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
   return /* @__PURE__ */ jsx36("div", { className: rowClasses, children });
 }
 
@@ -1698,18 +1711,18 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx30 from "clsx";
+import clsx31 from "clsx";
 
 // src/tag/delete-icon.tsx
 import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx29 from "clsx";
+import clsx30 from "clsx";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx29(
+  const deleteButtonClasses = clsx30(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
     focusVisible16.normal
   );
-  const deletePathClasses = clsx29({
+  const deletePathClasses = clsx30({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
@@ -1727,7 +1740,7 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 // src/tag/tag.tsx
 import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx30("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx31("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -1746,7 +1759,7 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx31 } from "clsx";
+import { clsx as clsx32 } from "clsx";
 import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var TextArea = forwardRef2(
@@ -1760,7 +1773,7 @@ var TextArea = forwardRef2(
     height,
     ...props
   }, ref) => {
-    const classes = clsx31(
+    const classes = clsx32(
       "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
       {
         "border-supportError": isError && !disabled,
@@ -1795,13 +1808,13 @@ var TextArea = forwardRef2(
 TextArea.displayName = "TextArea";
 
 // src/text-input/text-input.tsx
-import { clsx as clsx32 } from "clsx";
+import { clsx as clsx33 } from "clsx";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var TextInput = forwardRef3(
   ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
     const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-    const inputWrapClasses = clsx32("relative flex items-center gap-2 overflow-hidden rounded border", {
+    const inputWrapClasses = clsx33("relative flex items-center gap-2 overflow-hidden rounded border", {
       "border-uiBorder02": !isError && !disabled,
       "border-supportError": isError && !disabled,
       "hover:border-hoverInput": !disabled && !isError,
@@ -1811,7 +1824,7 @@ var TextInput = forwardRef3(
       "pr-2": size === "medium" && isShowClearButton,
       "pr-3": size === "large" && isShowClearButton
     });
-    const inputClasses = clsx32("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+    const inputClasses = clsx33("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
       ["typography-label14regular min-h-8 px-2"]: size === "medium",
       ["typography-label16regular min-h-10 px-3"]: size === "large",
       "text-text01": !isError,
@@ -1827,7 +1840,7 @@ var TextInput = forwardRef3(
 TextInput.displayName = "TextInput";
 
 // src/toast/toast.tsx
-import clsx33 from "clsx";
+import clsx34 from "clsx";
 import { useCallback as useCallback8, useEffect as useEffect4, useState as useState9 } from "react";
 import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
@@ -1848,17 +1861,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx33("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = clsx34("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = clsx33("flex items-center", {
+  const iconClasses = clsx34("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx33("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = clsx34("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -1913,7 +1926,7 @@ var useToast = () => {
 };
 
 // src/toggle/toggle.tsx
-import clsx34 from "clsx";
+import clsx35 from "clsx";
 import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 function Toggle({
   id,
@@ -1924,7 +1937,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx34("relative flex items-center rounded-full", {
+  const baseClasses = clsx35("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -1932,16 +1945,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = clsx34(
+  const inputClasses = clsx35(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = clsx34("rounded-full bg-iconOnColor", {
+  const indicatorClasses = clsx35("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = clsx34("break-all", {
+  const labelClasses = clsx35("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -1973,13 +1986,13 @@ import { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 
 // src/tooltip/tail-icon.tsx
-import clsx35 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var TailIcon = (props) => {
-  const tailClasses = clsx35("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = clsx36("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -2022,7 +2035,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx36("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = clsx37("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -2031,7 +2044,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = clsx36(
+  const tooltipBodyClasses = clsx37(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -37,8 +37,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@zenkigen-inc/component-icons": "1.16.0",
-    "@zenkigen-inc/component-theme": "1.16.0",
+    "@zenkigen-inc/component-icons": "1.16.1",
+    "@zenkigen-inc/component-theme": "1.16.1",
     "clsx": "2.1.1"
   }
 }