@exem-ui/react 0.3.4-next.20260903042316 → 0.3.4-next.20260908085941

package/dist/{FlatTooltip-DqHMNx-V.d.mts → FlatTooltip-CQYzMWkr.d.mts}

@@ -390,4 +390,4 @@ declare namespace ConditionalTooltip {
     var displayName: string;
 }
 
-export { type TooltipDescriptionProps as A, type TooltipProviderProps as B, type ColorPaletteColor as C, type TooltipRootProps as D, type TooltipTitleProps as E, type TooltipTriggerProps as F, type ColorPaletteProps as G, type ColorPaletteSwatchProps as H, type Icon as I, ColorPalette as J, ColorPaletteColors as K, DEFAULT_COLOR as L, getColorPaletteColor as M, isInPalette as N, type ConditionalTooltipProps as O, type FlatTooltipProps as P, type TooltipConfig as Q, FlatTooltip as R, type Size as S, Tabs as T, type Variant as V, ConditionalTooltip as a, type TabsComponent as b, type TabsContentProps as c, type TabsListProps as d, type TabsRootProps as e, type TabsTriggerProps as f, Select as g, type SelectBoxProps as h, type SelectComponent as i, type SelectDescriptionProps as j, type SelectEmptyProps as k, type SelectGroupProps as l, type SelectItemProps as m, type SelectLabelProps as n, type SelectListProps as o, type SelectRootProps as p, type SelectTriggerProps as q, Segment as r, type SegmentComponent as s, type SegmentContentProps as t, type SegmentItemProps as u, type SegmentListProps as v, type SegmentRootProps as w, Tooltip as x, type TooltipComponent as y, type TooltipContentProps as z };
+export { type TooltipDescriptionProps as A, type TooltipProviderProps as B, type ColorPaletteColor as C, type TooltipRootProps as D, type TooltipTitleProps as E, type TooltipTriggerProps as F, type ColorPaletteProps as G, type ColorPaletteSwatchProps as H, type Icon as I, ColorPalette as J, ColorPaletteColors as K, DEFAULT_COLOR as L, getColorPaletteColor as M, isInPalette as N, type FlatTooltipProps as O, type TooltipConfig as P, ConditionalTooltip as Q, FlatTooltip as R, type Size as S, Tabs as T, type Variant as V, type ConditionalTooltipProps as a, type TabsComponent as b, type TabsContentProps as c, type TabsListProps as d, type TabsRootProps as e, type TabsTriggerProps as f, Select as g, type SelectBoxProps as h, type SelectComponent as i, type SelectDescriptionProps as j, type SelectEmptyProps as k, type SelectGroupProps as l, type SelectItemProps as m, type SelectLabelProps as n, type SelectListProps as o, type SelectRootProps as p, type SelectTriggerProps as q, Segment as r, type SegmentComponent as s, type SegmentContentProps as t, type SegmentItemProps as u, type SegmentListProps as v, type SegmentRootProps as w, Tooltip as x, type TooltipComponent as y, type TooltipContentProps as z };

package/dist/{FlatTooltip-DqHMNx-V.d.ts → FlatTooltip-CQYzMWkr.d.ts}

@@ -390,4 +390,4 @@ declare namespace ConditionalTooltip {
     var displayName: string;
 }
 
-export { type TooltipDescriptionProps as A, type TooltipProviderProps as B, type ColorPaletteColor as C, type TooltipRootProps as D, type TooltipTitleProps as E, type TooltipTriggerProps as F, type ColorPaletteProps as G, type ColorPaletteSwatchProps as H, type Icon as I, ColorPalette as J, ColorPaletteColors as K, DEFAULT_COLOR as L, getColorPaletteColor as M, isInPalette as N, type ConditionalTooltipProps as O, type FlatTooltipProps as P, type TooltipConfig as Q, FlatTooltip as R, type Size as S, Tabs as T, type Variant as V, ConditionalTooltip as a, type TabsComponent as b, type TabsContentProps as c, type TabsListProps as d, type TabsRootProps as e, type TabsTriggerProps as f, Select as g, type SelectBoxProps as h, type SelectComponent as i, type SelectDescriptionProps as j, type SelectEmptyProps as k, type SelectGroupProps as l, type SelectItemProps as m, type SelectLabelProps as n, type SelectListProps as o, type SelectRootProps as p, type SelectTriggerProps as q, Segment as r, type SegmentComponent as s, type SegmentContentProps as t, type SegmentItemProps as u, type SegmentListProps as v, type SegmentRootProps as w, Tooltip as x, type TooltipComponent as y, type TooltipContentProps as z };
+export { type TooltipDescriptionProps as A, type TooltipProviderProps as B, type ColorPaletteColor as C, type TooltipRootProps as D, type TooltipTitleProps as E, type TooltipTriggerProps as F, type ColorPaletteProps as G, type ColorPaletteSwatchProps as H, type Icon as I, ColorPalette as J, ColorPaletteColors as K, DEFAULT_COLOR as L, getColorPaletteColor as M, isInPalette as N, type FlatTooltipProps as O, type TooltipConfig as P, ConditionalTooltip as Q, FlatTooltip as R, type Size as S, Tabs as T, type Variant as V, type ConditionalTooltipProps as a, type TabsComponent as b, type TabsContentProps as c, type TabsListProps as d, type TabsRootProps as e, type TabsTriggerProps as f, Select as g, type SelectBoxProps as h, type SelectComponent as i, type SelectDescriptionProps as j, type SelectEmptyProps as k, type SelectGroupProps as l, type SelectItemProps as m, type SelectLabelProps as n, type SelectListProps as o, type SelectRootProps as p, type SelectTriggerProps as q, Segment as r, type SegmentComponent as s, type SegmentContentProps as t, type SegmentItemProps as u, type SegmentListProps as v, type SegmentRootProps as w, Tooltip as x, type TooltipComponent as y, type TooltipContentProps as z };

package/dist/flat/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-DqHMNx-V.mjs';
-export { a as ConditionalTooltip, O as ConditionalTooltipProps, R as FlatTooltip, P as FlatTooltipProps, Q as TooltipConfig } from '../FlatTooltip-DqHMNx-V.mjs';
+import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-CQYzMWkr.mjs';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CQYzMWkr.mjs';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';

package/dist/flat/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-DqHMNx-V.js';
-export { a as ConditionalTooltip, O as ConditionalTooltipProps, R as FlatTooltip, P as FlatTooltipProps, Q as TooltipConfig } from '../FlatTooltip-DqHMNx-V.js';
+import { C as ColorPaletteColor, G as ColorPaletteProps, I as Icon, S as Size, V as Variant, u as SegmentItemProps, w as SegmentRootProps, g as Select, f as TabsTriggerProps, e as TabsRootProps } from '../FlatTooltip-CQYzMWkr.js';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CQYzMWkr.js';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';

package/dist/index.d.mts

@@ -2,13 +2,14 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltip, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-DqHMNx-V.mjs';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-DqHMNx-V.mjs';
+import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-CQYzMWkr.mjs';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-CQYzMWkr.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button as Button$1 } from '@base-ui/react/button';
 import { I as IconBaseProps } from './types-xnO0gkCW.mjs';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DayPicker } from 'react-day-picker';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
@@ -226,18 +227,15 @@ type ButtonVariantProps = {
     color?: ButtonColor;
     background?: ButtonBackground;
 };
-type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color' | 'background'> & ButtonVariantProps & {
+
+type ButtonProps = Button$1.Props & ButtonVariantProps & {
     size?: ButtonSize;
     icon?: React__default.ReactElement<IconBaseProps>;
 };
-type ButtonComponent = React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const buttonVariants: (props?: ({
-    background?: "fill" | "none" | null | undefined;
-    color?: "accent" | "primary" | "critical" | null | undefined;
-    size?: "small" | "xsmall" | "medium" | "large" | "xlarge" | null | undefined;
-    variant?: "solid" | "assistive" | "outlined" | "invisible" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Button: ButtonComponent;
+/** @see https://base-ui.com/react/components/button */
+declare function Button({ className, variant, color, background, size, icon, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+/** @deprecated 컴포넌트 타입은 `typeof Button`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type ButtonComponent = typeof Button;
 
 /** 색 이름 → Tailwind 토큰 class 매핑(배경/텍스트). 컴포넌트 내부 및 소비자용. */
 declare const colorPaletteColorClasses: Record<ColorPaletteColor, {
@@ -245,16 +243,15 @@ declare const colorPaletteColorClasses: Record<ColorPaletteColor, {
     text: string;
 }>;
 
-type ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 interface ButtonGroupItem {
     id: string;
     label?: string;
     icon?: React__default.ReactElement<IconBaseProps>;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
-    tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];
+    tooltip?: ConditionalTooltipProps['tooltip'];
     onClick?: () => void;
 }
-interface ButtonGroupProps {
+type ButtonGroupProps = Pick<React__default.ComponentProps<'div'>, 'aria-label' | 'aria-labelledby' | 'className' | 'ref'> & {
     /** 버튼 그룹 스타일 변형 */
     variant?: 'contained' | 'outlined';
     /** 아이콘만 표시 */
@@ -262,23 +259,23 @@ interface ButtonGroupProps {
     /** 배경색 표시 여부 (뒷 레이어가 보이지 않아야 할 때) */
     hasBackground?: boolean;
     /** 버튼 크기 */
-    size?: ButtonGroupSize;
+    size?: ButtonSize;
     /** 버튼 항목 목록 */
     items: ButtonGroupItem[];
-    /** 커스텀 className */
-    className?: string;
-}
-type ButtonGroupComponent = React__default.ForwardRefExoticComponent<ButtonGroupProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const ButtonGroup: ButtonGroupComponent;
+};
+declare function ButtonGroup({ variant, iconOnly, hasBackground, size, items, className, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element | null;
+/** @deprecated 컴포넌트 타입은 `typeof ButtonGroup`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type ButtonGroupComponent = typeof ButtonGroup;
 
-type IconButtonProps = Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & ButtonVariantProps & {
+type IconButtonProps = ButtonProps & {
+    children?: never;
     icon: React__default.ReactElement<IconBaseProps>;
-    size?: ButtonSize;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
-    tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];
+    tooltip?: ConditionalTooltipProps['tooltip'];
 };
-type IconButtonComponent = React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const IconButton: IconButtonComponent;
+declare function IconButton({ className, tooltip, icon, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+/** @deprecated 컴포넌트 타입은 `typeof IconButton`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type IconButtonComponent = typeof IconButton;
 
 type CheckboxSize = 'small' | 'medium' | 'large';
 type LabelPosition = 'left' | 'right';

package/dist/index.d.ts

@@ -2,13 +2,14 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltip, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-DqHMNx-V.js';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-DqHMNx-V.js';
+import { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-CQYzMWkr.js';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-CQYzMWkr.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button as Button$1 } from '@base-ui/react/button';
 import { I as IconBaseProps } from './types-xnO0gkCW.js';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DayPicker } from 'react-day-picker';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
@@ -226,18 +227,15 @@ type ButtonVariantProps = {
     color?: ButtonColor;
     background?: ButtonBackground;
 };
-type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color' | 'background'> & ButtonVariantProps & {
+
+type ButtonProps = Button$1.Props & ButtonVariantProps & {
     size?: ButtonSize;
     icon?: React__default.ReactElement<IconBaseProps>;
 };
-type ButtonComponent = React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const buttonVariants: (props?: ({
-    background?: "fill" | "none" | null | undefined;
-    color?: "accent" | "primary" | "critical" | null | undefined;
-    size?: "small" | "xsmall" | "medium" | "large" | "xlarge" | null | undefined;
-    variant?: "solid" | "assistive" | "outlined" | "invisible" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Button: ButtonComponent;
+/** @see https://base-ui.com/react/components/button */
+declare function Button({ className, variant, color, background, size, icon, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+/** @deprecated 컴포넌트 타입은 `typeof Button`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type ButtonComponent = typeof Button;
 
 /** 색 이름 → Tailwind 토큰 class 매핑(배경/텍스트). 컴포넌트 내부 및 소비자용. */
 declare const colorPaletteColorClasses: Record<ColorPaletteColor, {
@@ -245,16 +243,15 @@ declare const colorPaletteColorClasses: Record<ColorPaletteColor, {
     text: string;
 }>;
 
-type ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 interface ButtonGroupItem {
     id: string;
     label?: string;
     icon?: React__default.ReactElement<IconBaseProps>;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
-    tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];
+    tooltip?: ConditionalTooltipProps['tooltip'];
     onClick?: () => void;
 }
-interface ButtonGroupProps {
+type ButtonGroupProps = Pick<React__default.ComponentProps<'div'>, 'aria-label' | 'aria-labelledby' | 'className' | 'ref'> & {
     /** 버튼 그룹 스타일 변형 */
     variant?: 'contained' | 'outlined';
     /** 아이콘만 표시 */
@@ -262,23 +259,23 @@ interface ButtonGroupProps {
     /** 배경색 표시 여부 (뒷 레이어가 보이지 않아야 할 때) */
     hasBackground?: boolean;
     /** 버튼 크기 */
-    size?: ButtonGroupSize;
+    size?: ButtonSize;
     /** 버튼 항목 목록 */
     items: ButtonGroupItem[];
-    /** 커스텀 className */
-    className?: string;
-}
-type ButtonGroupComponent = React__default.ForwardRefExoticComponent<ButtonGroupProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const ButtonGroup: ButtonGroupComponent;
+};
+declare function ButtonGroup({ variant, iconOnly, hasBackground, size, items, className, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element | null;
+/** @deprecated 컴포넌트 타입은 `typeof ButtonGroup`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type ButtonGroupComponent = typeof ButtonGroup;
 
-type IconButtonProps = Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & ButtonVariantProps & {
+type IconButtonProps = ButtonProps & {
+    children?: never;
     icon: React__default.ReactElement<IconBaseProps>;
-    size?: ButtonSize;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
-    tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];
+    tooltip?: ConditionalTooltipProps['tooltip'];
 };
-type IconButtonComponent = React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const IconButton: IconButtonComponent;
+declare function IconButton({ className, tooltip, icon, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+/** @deprecated 컴포넌트 타입은 `typeof IconButton`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
+type IconButtonComponent = typeof IconButton;
 
 type CheckboxSize = 'small' | 'medium' | 'large';
 type LabelPosition = 'left' | 'right';

package/dist/index.js

@@ -6,6 +6,7 @@ var utils = require('@exem-ui/core/utils');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
+var button = require('@base-ui/react/button');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var SwitchPrimitives = require('@radix-ui/react-switch');
@@ -429,185 +430,114 @@ Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
 var colorStyles = {
   primary: {
     solid: {
-      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
-      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
-      text: "text-text-inverse group-disabled/button:text-text-inverse"
+      root: "bg-solid-primary-default text-text-inverse hover:bg-solid-primary-hovered data-[disabled]:bg-solid-primary-disabled data-[disabled]:text-text-inverse",
+      icon: "text-icon-inverse group-data-[disabled]/button:text-icon-inverse"
     },
     assistive: {
-      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "bg-elevation-elevation-2 text-text-secondary hover:bg-elevation-elevation-3 data-[disabled]:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "border border-border-primary text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:border-border-primary data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     }
   },
   accent: {
     solid: {
-      button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-accent-default text-text-static-light hover:bg-solid-accent-hovered data-[disabled]:bg-solid-accent-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-accent-0 hover:bg-elevation-accent-1 disabled:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "bg-elevation-accent-0 text-text-accent hover:bg-elevation-accent-1 data-[disabled]:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "border border-border-primary text-text-accent hover:bg-elevation-accent-0 data-[disabled]:border-border-primary data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "text-text-accent hover:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     }
   },
   critical: {
     solid: {
-      button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-critical-default text-text-static-light hover:bg-solid-critical-hovered data-[disabled]:bg-solid-critical-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-critical-0 hover:bg-elevation-critical-1 disabled:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "bg-elevation-critical-0 text-text-critical hover:bg-elevation-critical-1 data-[disabled]:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "border border-border-primary text-text-critical hover:bg-elevation-critical-0 data-[disabled]:border-border-primary data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "text-text-critical hover:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     }
   }
 };
 var buttonVariants = utils.cva(
-  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
   {
-    compoundVariants: [
-      // Primary 색상 조합
-      { className: colorStyles.primary.solid.button, color: "primary", variant: "solid" },
-      { className: colorStyles.primary.assistive.button, color: "primary", variant: "assistive" },
-      { className: colorStyles.primary.outlined.button, color: "primary", variant: "outlined" },
-      { className: colorStyles.primary.invisible.button, color: "primary", variant: "invisible" },
-      // Accent 색상 조합
-      { className: colorStyles.accent.solid.button, color: "accent", variant: "solid" },
-      { className: colorStyles.accent.assistive.button, color: "accent", variant: "assistive" },
-      { className: colorStyles.accent.outlined.button, color: "accent", variant: "outlined" },
-      { className: colorStyles.accent.invisible.button, color: "accent", variant: "invisible" },
-      // Critical 색상 조합
-      { className: colorStyles.critical.solid.button, color: "critical", variant: "solid" },
-      { className: colorStyles.critical.assistive.button, color: "critical", variant: "assistive" },
-      { className: colorStyles.critical.outlined.button, color: "critical", variant: "outlined" },
-      { className: colorStyles.critical.invisible.button, color: "critical", variant: "invisible" },
-      // background 표면은 outlined/invisible 에서만 추가
-      {
-        className: "bg-elevation-elevation-0",
-        background: "fill",
-        variant: ["outlined", "invisible"]
-      }
-    ],
     defaultVariants: {
-      background: "none",
-      color: "primary",
-      size: "medium",
-      variant: "solid"
+      size: "medium"
     },
     variants: {
-      background: {
-        none: "",
-        fill: ""
-      },
-      color: {
-        accent: "",
-        critical: "",
-        primary: ""
-      },
       size: {
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
         large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
         xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
-      },
-      variant: {
-        solid: "",
-        assistive: "",
-        outlined: "",
-        invisible: ""
       }
     }
   }
 );
-var IconSizeMap = {
+var iconSizeMap = {
   xsmall: chunk6MFMQCL5_js.iconSizes.sm,
   small: chunk6MFMQCL5_js.iconSizes.sm,
   medium: chunk6MFMQCL5_js.iconSizes.sm,
   large: chunk6MFMQCL5_js.iconSizes.md,
   xlarge: chunk6MFMQCL5_js.iconSizes.lg
 };
-var Button = React.forwardRef(
-  ({
-    className,
-    variant = "solid",
-    color = "primary",
-    background,
-    size = "medium",
-    icon,
-    children,
-    ...props
-  }, ref) => {
-    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon && React.cloneElement(icon, {
-        className: utils.cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
-        size: icon.props.size ?? IconSizeMap[size]
-      }),
-      children != null && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: utils.cn(
-            "min-w-0 truncate",
-            size === "xlarge" ? "px-1" : "px-0.5",
-            colorStyles[color][variant].text
-          ),
-          children
-        }
-      )
-    ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: utils.cn(
-          buttonVariants({
-            background,
-            className,
-            color,
-            size,
-            variant
-          }),
-          "group/button"
-        ),
-        ref,
-        ...props,
-        children: content
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+function Button({
+  className,
+  variant = "solid",
+  color = "primary",
+  background,
+  size = "medium",
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    button.Button,
+    {
+      className: utils.cn(
+        buttonVariants({ size }),
+        colorStyles[color][variant].root,
+        background === "fill" && (variant === "outlined" || variant === "invisible") && "bg-elevation-elevation-0",
+        "group/button",
+        className
+      ),
+      ...props,
+      children: [
+        icon && React.cloneElement(icon, {
+          className: utils.cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
+          size: icon.props.size ?? iconSizeMap[size]
+        }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("min-w-0 truncate", size === "xlarge" ? "px-1" : "px-0.5"), children })
+      ]
+    }
+  );
+}
 var iconButtonSizeClasses = {
   xsmall: "size-6",
   small: "size-7",
@@ -615,73 +545,85 @@ var iconButtonSizeClasses = {
   large: "size-10",
   xlarge: "size-12"
 };
-var IconButton = React.forwardRef(
-  ({ className, tooltip, icon, size = "medium", ...props }, ref) => {
-    const buttonProps = {
+function IconButton({
+  className,
+  tooltip,
+  icon,
+  size = "medium",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
+      "aria-labelledby": ariaLabelledBy,
       className: utils.cn(iconButtonSizeClasses[size], "px-0", className),
       icon,
       size,
       ...props
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...buttonProps }) });
-  }
-);
-IconButton.displayName = "IconButton";
-var ButtonGroup = React.forwardRef(
-  ({
-    variant = "contained",
-    iconOnly = false,
-    hasBackground = false,
-    size = "medium",
-    items,
-    className
-  }, ref) => {
-    if (items.length === 0) {
-      return null;
     }
-    const isOutlined = variant === "outlined";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "inline-flex items-center overflow-hidden rounded-medium",
-          hasBackground && "bg-elevation-elevation-0",
-          className
-        ),
-        role: "group",
-        children: items.map((item, index) => {
-          const isFirst = index === 0;
-          const isLast = index === items.length - 1;
-          const roundedClasses = utils.cn("rounded-none", {
-            "rounded-l-medium": isFirst,
-            "rounded-r-medium": isLast
-          });
-          const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
-          const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
-          const hoverClasses = isOutlined ? "relative hover:z-10" : "";
-          if (iconOnly) {
-            const iconBaseProps = {
-              className: utils.cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-              icon: item.icon,
-              onClick: item.onClick,
-              size
-            };
-            return /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
-          }
-          const buttonBaseProps = {
-            className: utils.cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-            icon: item.icon,
-            onClick: item.onClick,
-            size
-          };
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
-        })
-      }
-    );
+  ) });
+}
+function ButtonGroup({
+  variant = "contained",
+  iconOnly = false,
+  hasBackground = false,
+  size = "medium",
+  items,
+  className,
+  ...props
+}) {
+  if (items.length === 0) {
+    return null;
   }
-);
-ButtonGroup.displayName = "ButtonGroup";
+  const isOutlined = variant === "outlined";
+  const buttonVariantProps = isOutlined ? { color: "primary", variant: "outlined" } : { variant: "assistive" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: utils.cn(
+        "inline-flex items-center overflow-hidden rounded-medium",
+        hasBackground && "bg-elevation-elevation-0",
+        className
+      ),
+      role: "group",
+      children: items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const roundedClasses = utils.cn("rounded-none", {
+          "rounded-l-medium": isFirst,
+          "rounded-r-medium": isLast
+        });
+        const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
+        const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
+        const hoverClasses = isOutlined ? "relative hover:z-10" : "";
+        const buttonBaseProps = {
+          className: utils.cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+          onClick: item.onClick,
+          size,
+          ...buttonVariantProps
+        };
+        if (iconOnly) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              ...buttonBaseProps,
+              "aria-label": item.label,
+              icon: item.icon,
+              tooltip: item.tooltip
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, icon: item.icon, children: item.label }) }, item.id);
+      })
+    }
+  );
+}
 var containerVariants = utils.cva("inline-flex items-center", {
   variants: {
     size: {

package/dist/index.mjs

@@ -1,11 +1,12 @@
-import { ConditionalTooltip, overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea } from './chunk-4JSE66SD.mjs';
+import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-4JSE66SD.mjs';
 export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-4JSE66SD.mjs';
 import { X, MoreHorizontal, iconSizes, Minus, Check, Person, Loading, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-4QQPDTTI.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as React from 'react';
-import { forwardRef, Fragment, cloneElement, useId, createContext, useContext, useState } from 'react';
+import { forwardRef, Fragment, useId, createContext, useContext, useState, cloneElement } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
+import { Button as Button$1 } from '@base-ui/react/button';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -404,185 +405,114 @@ Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
 var colorStyles = {
   primary: {
     solid: {
-      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
-      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
-      text: "text-text-inverse group-disabled/button:text-text-inverse"
+      root: "bg-solid-primary-default text-text-inverse hover:bg-solid-primary-hovered data-[disabled]:bg-solid-primary-disabled data-[disabled]:text-text-inverse",
+      icon: "text-icon-inverse group-data-[disabled]/button:text-icon-inverse"
     },
     assistive: {
-      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "bg-elevation-elevation-2 text-text-secondary hover:bg-elevation-elevation-3 data-[disabled]:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "border border-border-primary text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:border-border-primary data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     }
   },
   accent: {
     solid: {
-      button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-accent-default text-text-static-light hover:bg-solid-accent-hovered data-[disabled]:bg-solid-accent-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-accent-0 hover:bg-elevation-accent-1 disabled:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "bg-elevation-accent-0 text-text-accent hover:bg-elevation-accent-1 data-[disabled]:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "border border-border-primary text-text-accent hover:bg-elevation-accent-0 data-[disabled]:border-border-primary data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "text-text-accent hover:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     }
   },
   critical: {
     solid: {
-      button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-critical-default text-text-static-light hover:bg-solid-critical-hovered data-[disabled]:bg-solid-critical-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-critical-0 hover:bg-elevation-critical-1 disabled:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "bg-elevation-critical-0 text-text-critical hover:bg-elevation-critical-1 data-[disabled]:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "border border-border-primary text-text-critical hover:bg-elevation-critical-0 data-[disabled]:border-border-primary data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "text-text-critical hover:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     }
   }
 };
 var buttonVariants = cva(
-  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
   {
-    compoundVariants: [
-      // Primary 색상 조합
-      { className: colorStyles.primary.solid.button, color: "primary", variant: "solid" },
-      { className: colorStyles.primary.assistive.button, color: "primary", variant: "assistive" },
-      { className: colorStyles.primary.outlined.button, color: "primary", variant: "outlined" },
-      { className: colorStyles.primary.invisible.button, color: "primary", variant: "invisible" },
-      // Accent 색상 조합
-      { className: colorStyles.accent.solid.button, color: "accent", variant: "solid" },
-      { className: colorStyles.accent.assistive.button, color: "accent", variant: "assistive" },
-      { className: colorStyles.accent.outlined.button, color: "accent", variant: "outlined" },
-      { className: colorStyles.accent.invisible.button, color: "accent", variant: "invisible" },
-      // Critical 색상 조합
-      { className: colorStyles.critical.solid.button, color: "critical", variant: "solid" },
-      { className: colorStyles.critical.assistive.button, color: "critical", variant: "assistive" },
-      { className: colorStyles.critical.outlined.button, color: "critical", variant: "outlined" },
-      { className: colorStyles.critical.invisible.button, color: "critical", variant: "invisible" },
-      // background 표면은 outlined/invisible 에서만 추가
-      {
-        className: "bg-elevation-elevation-0",
-        background: "fill",
-        variant: ["outlined", "invisible"]
-      }
-    ],
     defaultVariants: {
-      background: "none",
-      color: "primary",
-      size: "medium",
-      variant: "solid"
+      size: "medium"
     },
     variants: {
-      background: {
-        none: "",
-        fill: ""
-      },
-      color: {
-        accent: "",
-        critical: "",
-        primary: ""
-      },
       size: {
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
         large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
         xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
-      },
-      variant: {
-        solid: "",
-        assistive: "",
-        outlined: "",
-        invisible: ""
       }
     }
   }
 );
-var IconSizeMap = {
+var iconSizeMap = {
   xsmall: iconSizes.sm,
   small: iconSizes.sm,
   medium: iconSizes.sm,
   large: iconSizes.md,
   xlarge: iconSizes.lg
 };
-var Button = forwardRef(
-  ({
-    className,
-    variant = "solid",
-    color = "primary",
-    background,
-    size = "medium",
-    icon,
-    children,
-    ...props
-  }, ref) => {
-    const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      icon && cloneElement(icon, {
-        className: cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
-        size: icon.props.size ?? IconSizeMap[size]
-      }),
-      children != null && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "min-w-0 truncate",
-            size === "xlarge" ? "px-1" : "px-0.5",
-            colorStyles[color][variant].text
-          ),
-          children
-        }
-      )
-    ] });
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cn(
-          buttonVariants({
-            background,
-            className,
-            color,
-            size,
-            variant
-          }),
-          "group/button"
-        ),
-        ref,
-        ...props,
-        children: content
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+function Button({
+  className,
+  variant = "solid",
+  color = "primary",
+  background,
+  size = "medium",
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button$1,
+    {
+      className: cn(
+        buttonVariants({ size }),
+        colorStyles[color][variant].root,
+        background === "fill" && (variant === "outlined" || variant === "invisible") && "bg-elevation-elevation-0",
+        "group/button",
+        className
+      ),
+      ...props,
+      children: [
+        icon && cloneElement(icon, {
+          className: cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
+          size: icon.props.size ?? iconSizeMap[size]
+        }),
+        children != null && /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", size === "xlarge" ? "px-1" : "px-0.5"), children })
+      ]
+    }
+  );
+}
 var iconButtonSizeClasses = {
   xsmall: "size-6",
   small: "size-7",
@@ -590,73 +520,85 @@ var iconButtonSizeClasses = {
   large: "size-10",
   xlarge: "size-12"
 };
-var IconButton = forwardRef(
-  ({ className, tooltip, icon, size = "medium", ...props }, ref) => {
-    const buttonProps = {
+function IconButton({
+  className,
+  tooltip,
+  icon,
+  size = "medium",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
+  return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
+      "aria-labelledby": ariaLabelledBy,
       className: cn(iconButtonSizeClasses[size], "px-0", className),
       icon,
       size,
       ...props
-    };
-    return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
-  }
-);
-IconButton.displayName = "IconButton";
-var ButtonGroup = forwardRef(
-  ({
-    variant = "contained",
-    iconOnly = false,
-    hasBackground = false,
-    size = "medium",
-    items,
-    className
-  }, ref) => {
-    if (items.length === 0) {
-      return null;
     }
-    const isOutlined = variant === "outlined";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "inline-flex items-center overflow-hidden rounded-medium",
-          hasBackground && "bg-elevation-elevation-0",
-          className
-        ),
-        role: "group",
-        children: items.map((item, index) => {
-          const isFirst = index === 0;
-          const isLast = index === items.length - 1;
-          const roundedClasses = cn("rounded-none", {
-            "rounded-l-medium": isFirst,
-            "rounded-r-medium": isLast
-          });
-          const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
-          const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
-          const hoverClasses = isOutlined ? "relative hover:z-10" : "";
-          if (iconOnly) {
-            const iconBaseProps = {
-              className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-              icon: item.icon,
-              onClick: item.onClick,
-              size
-            };
-            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
-          }
-          const buttonBaseProps = {
-            className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-            icon: item.icon,
-            onClick: item.onClick,
-            size
-          };
-          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
-        })
-      }
-    );
+  ) });
+}
+function ButtonGroup({
+  variant = "contained",
+  iconOnly = false,
+  hasBackground = false,
+  size = "medium",
+  items,
+  className,
+  ...props
+}) {
+  if (items.length === 0) {
+    return null;
   }
-);
-ButtonGroup.displayName = "ButtonGroup";
+  const isOutlined = variant === "outlined";
+  const buttonVariantProps = isOutlined ? { color: "primary", variant: "outlined" } : { variant: "assistive" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        "inline-flex items-center overflow-hidden rounded-medium",
+        hasBackground && "bg-elevation-elevation-0",
+        className
+      ),
+      role: "group",
+      children: items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const roundedClasses = cn("rounded-none", {
+          "rounded-l-medium": isFirst,
+          "rounded-r-medium": isLast
+        });
+        const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
+        const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
+        const hoverClasses = isOutlined ? "relative hover:z-10" : "";
+        const buttonBaseProps = {
+          className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+          onClick: item.onClick,
+          size,
+          ...buttonVariantProps
+        };
+        if (iconOnly) {
+          return /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              ...buttonBaseProps,
+              "aria-label": item.label,
+              icon: item.icon,
+              tooltip: item.tooltip
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, icon: item.icon, children: item.label }) }, item.id);
+      })
+    }
+  );
+}
 var containerVariants = cva("inline-flex items-center", {
   variants: {
     size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20260903042316",
+  "version": "0.3.4-next.20260908085941",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -100,7 +100,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20260903042316"
+    "@exem-ui/core": "0.3.3-next.20260908085941"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -136,7 +136,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20260903042316"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20260908085941"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",