@exem-ui/react 0.3.4-next.20261013013807 → 0.3.4-next.20261014050302

package/dist/{FlatTooltip-CQYzMWkr.d.mts → FlatTooltip-CksJEO8x.d.ts}

@@ -3,6 +3,7 @@ import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { I as IconBaseProps } from './types-xnO0gkCW.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from '@exem-ui/core/utils';
@@ -147,13 +148,11 @@ type Icon = React.ReactElement<{
     className?: string;
 }>;
 
-type SegmentSize = 'small' | 'medium' | 'large';
+type SegmentSize = 'xsmall' | 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     /** 텍스트 왼쪽에 표시할 아이콘 요소 */
-    leftIcon?: React__default.ReactElement<{
-        className?: string;
-    }>;
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
 };
 type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 type SegmentRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {

package/dist/{FlatTooltip-CQYzMWkr.d.ts → FlatTooltip-Dur9oGCh.d.mts}

@@ -3,6 +3,7 @@ import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { I as IconBaseProps } from './types-xnO0gkCW.mjs';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from '@exem-ui/core/utils';
@@ -147,13 +148,11 @@ type Icon = React.ReactElement<{
     className?: string;
 }>;
 
-type SegmentSize = 'small' | 'medium' | 'large';
+type SegmentSize = 'xsmall' | 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     /** 텍스트 왼쪽에 표시할 아이콘 요소 */
-    leftIcon?: React__default.ReactElement<{
-        className?: string;
-    }>;
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
 };
 type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 type SegmentRootProps<T extends string = string> = Omit<React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {

package/dist/{chunk-MC4SYR5X.js → chunk-3LVJLFY6.js}

@@ -895,6 +895,7 @@ var segmentListVariants = utils.cva(
   {
     variants: {
       size: {
+        xsmall: "h-6 gap-0 p-0.5",
         small: "h-7 gap-0 p-0.5",
         medium: "h-8 gap-0 p-0.5",
         large: "h-10 gap-0 p-0.5"
@@ -911,12 +912,14 @@ var segmentItemVariants = utils.cva(
     "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
     "disabled:cursor-not-allowed",
     "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
+    "[&[data-state=active]>svg]:text-icon-secondary",
     "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
     "transition-colors duration-200 ease-in-out"
   ],
   {
     variants: {
       size: {
+        xsmall: "h-5 gap-0.5 text-caption font-medium",
         small: "h-6 gap-0.5 text-body-3 font-medium",
         medium: "h-7 gap-1 text-body-2 font-medium",
         large: "h-9 gap-1.5 text-body-2 font-medium"
@@ -927,18 +930,12 @@ var segmentItemVariants = utils.cva(
     }
   }
 );
-var segmentIconVariants = utils.cva("flex items-center justify-center", {
-  variants: {
-    size: {
-      small: "size-4",
-      medium: "size-4",
-      large: "size-5"
-    }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
+var segmentIconSizeMap = {
+  xsmall: chunk6NFYQZSK_js.iconSizes.xs,
+  small: chunk6NFYQZSK_js.iconSizes.sm,
+  medium: chunk6NFYQZSK_js.iconSizes.sm,
+  large: chunk6NFYQZSK_js.iconSizes.md
+};
 var SegmentContext = React.createContext(void 0);
 var useSegmentContext = () => {
   const context = React.useContext(SegmentContext);
@@ -973,7 +970,7 @@ Segment.Item = React.forwardRef(
         className: utils.cn(segmentItemVariants({ size }), className),
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(segmentIconVariants({ size })), children: leftIcon }),
+          leftIcon && React.cloneElement(leftIcon, { size: segmentIconSizeMap[size] }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children })
         ]
       }

package/dist/{chunk-5SYAB4WP.mjs → chunk-BRB66UJW.mjs}

@@ -1,10 +1,10 @@
-import { ChevronDown, Search, Check } from './chunk-DKADAZLG.mjs';
+import { iconSizes, ChevronDown, Search, Check } from './chunk-DKADAZLG.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 import * as React from 'react';
-import { createContext, forwardRef, useId, useContext, createElement, useRef, useState } from 'react';
+import { createContext, forwardRef, cloneElement, useId, useContext, createElement, useRef, useState } from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TabsPrimitive2 from '@radix-ui/react-tabs';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -869,6 +869,7 @@ var segmentListVariants = cva(
   {
     variants: {
       size: {
+        xsmall: "h-6 gap-0 p-0.5",
         small: "h-7 gap-0 p-0.5",
         medium: "h-8 gap-0 p-0.5",
         large: "h-10 gap-0 p-0.5"
@@ -885,12 +886,14 @@ var segmentItemVariants = cva(
     "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
     "disabled:cursor-not-allowed",
     "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
+    "[&[data-state=active]>svg]:text-icon-secondary",
     "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
     "transition-colors duration-200 ease-in-out"
   ],
   {
     variants: {
       size: {
+        xsmall: "h-5 gap-0.5 text-caption font-medium",
         small: "h-6 gap-0.5 text-body-3 font-medium",
         medium: "h-7 gap-1 text-body-2 font-medium",
         large: "h-9 gap-1.5 text-body-2 font-medium"
@@ -901,18 +904,12 @@ var segmentItemVariants = cva(
     }
   }
 );
-var segmentIconVariants = cva("flex items-center justify-center", {
-  variants: {
-    size: {
-      small: "size-4",
-      medium: "size-4",
-      large: "size-5"
-    }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
+var segmentIconSizeMap = {
+  xsmall: iconSizes.xs,
+  small: iconSizes.sm,
+  medium: iconSizes.sm,
+  large: iconSizes.md
+};
 var SegmentContext = createContext(void 0);
 var useSegmentContext = () => {
   const context = useContext(SegmentContext);
@@ -947,7 +944,7 @@ Segment.Item = forwardRef(
         className: cn(segmentItemVariants({ size }), className),
         ...props,
         children: [
-          leftIcon && /* @__PURE__ */ jsx("span", { className: cn(segmentIconVariants({ size })), children: leftIcon }),
+          leftIcon && cloneElement(leftIcon, { size: segmentIconSizeMap[size] }),
           /* @__PURE__ */ jsx("span", { className: "flex items-center", children })
         ]
       }

package/dist/flat/index.d.mts

@@ -1,9 +1,10 @@
 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-CQYzMWkr.mjs';
-export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CQYzMWkr.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-Dur9oGCh.mjs';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-Dur9oGCh.mjs';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';
+import '../types-xnO0gkCW.mjs';
 import '@radix-ui/react-select';
 import 'class-variance-authority/types';
 import '@exem-ui/core/utils';

package/dist/flat/index.d.ts

@@ -1,9 +1,10 @@
 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-CQYzMWkr.js';
-export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CQYzMWkr.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-CksJEO8x.js';
+export { Q as ConditionalTooltip, a as ConditionalTooltipProps, R as FlatTooltip, O as FlatTooltipProps, P as TooltipConfig } from '../FlatTooltip-CksJEO8x.js';
 import { ReactNode, ComponentProps } from 'react';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-radio-group';
+import '../types-xnO0gkCW.js';
 import '@radix-ui/react-select';
 import 'class-variance-authority/types';
 import '@exem-ui/core/utils';

package/dist/flat/index.js

@@ -1,35 +1,35 @@
 'use strict';
 
-var chunkMC4SYR5X_js = require('../chunk-MC4SYR5X.js');
+var chunk3LVJLFY6_js = require('../chunk-3LVJLFY6.js');
 require('../chunk-6NFYQZSK.js');
 
 
 
 Object.defineProperty(exports, "ConditionalTooltip", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ConditionalTooltip; }
+  get: function () { return chunk3LVJLFY6_js.ConditionalTooltip; }
 });
 Object.defineProperty(exports, "FlatColorPalette", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatColorPalette; }
+  get: function () { return chunk3LVJLFY6_js.FlatColorPalette; }
 });
 Object.defineProperty(exports, "FlatCombobox", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatCombobox; }
+  get: function () { return chunk3LVJLFY6_js.FlatCombobox; }
 });
 Object.defineProperty(exports, "FlatSegment", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatSegment; }
+  get: function () { return chunk3LVJLFY6_js.FlatSegment; }
 });
 Object.defineProperty(exports, "FlatSelect", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatSelect; }
+  get: function () { return chunk3LVJLFY6_js.FlatSelect; }
 });
 Object.defineProperty(exports, "FlatTabs", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatTabs; }
+  get: function () { return chunk3LVJLFY6_js.FlatTabs; }
 });
 Object.defineProperty(exports, "FlatTooltip", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.FlatTooltip; }
+  get: function () { return chunk3LVJLFY6_js.FlatTooltip; }
 });

package/dist/flat/index.mjs

@@ -1,2 +1,2 @@
-export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-5SYAB4WP.mjs';
+export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-BRB66UJW.mjs';
 import '../chunk-DKADAZLG.mjs';

package/dist/index.d.mts

@@ -2,8 +2,8 @@ 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 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 { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-Dur9oGCh.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-Dur9oGCh.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';
@@ -230,10 +230,13 @@ type ButtonVariantProps = {
 
 type ButtonProps = Button$1.Props & ButtonVariantProps & {
     size?: ButtonSize;
-    icon?: React__default.ReactElement<IconBaseProps>;
+    /** 글자 왼쪽에 표시할 아이콘 */
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
+    /** 글자 오른쪽에 표시할 아이콘 */
+    rightIcon?: React__default.ReactElement<IconBaseProps>;
 };
 /** @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;
+declare function Button({ className, variant, color, background, size, leftIcon, rightIcon, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 /** @deprecated 컴포넌트 타입은 `typeof Button`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
 type ButtonComponent = typeof Button;
 
@@ -269,6 +272,8 @@ type ButtonGroupComponent = typeof ButtonGroup;
 
 type IconButtonProps = ButtonProps & {
     children?: never;
+    leftIcon?: never;
+    rightIcon?: never;
     icon: React__default.ReactElement<IconBaseProps>;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
     tooltip?: ConditionalTooltipProps['tooltip'];

package/dist/index.d.ts

@@ -2,8 +2,8 @@ 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 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 { C as ColorPaletteColor, a as ConditionalTooltipProps, S as Size$1, I as Icon, V as Variant } from './FlatTooltip-CksJEO8x.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-CksJEO8x.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';
@@ -230,10 +230,13 @@ type ButtonVariantProps = {
 
 type ButtonProps = Button$1.Props & ButtonVariantProps & {
     size?: ButtonSize;
-    icon?: React__default.ReactElement<IconBaseProps>;
+    /** 글자 왼쪽에 표시할 아이콘 */
+    leftIcon?: React__default.ReactElement<IconBaseProps>;
+    /** 글자 오른쪽에 표시할 아이콘 */
+    rightIcon?: React__default.ReactElement<IconBaseProps>;
 };
 /** @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;
+declare function Button({ className, variant, color, background, size, leftIcon, rightIcon, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 /** @deprecated 컴포넌트 타입은 `typeof Button`으로 바로 얻을 수 있어 이 별칭은 불필요합니다. */
 type ButtonComponent = typeof Button;
 
@@ -269,6 +272,8 @@ type ButtonGroupComponent = typeof ButtonGroup;
 
 type IconButtonProps = ButtonProps & {
     children?: never;
+    leftIcon?: never;
+    rightIcon?: never;
     icon: React__default.ReactElement<IconBaseProps>;
     /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */
     tooltip?: ConditionalTooltipProps['tooltip'];

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkMC4SYR5X_js = require('./chunk-MC4SYR5X.js');
+var chunk3LVJLFY6_js = require('./chunk-3LVJLFY6.js');
 var chunk6NFYQZSK_js = require('./chunk-6NFYQZSK.js');
 var utils = require('@exem-ui/core/utils');
 var React = require('react');
@@ -507,13 +507,20 @@ var iconSizeMap = {
   large: chunk6NFYQZSK_js.iconSizes.md,
   xlarge: chunk6NFYQZSK_js.iconSizes.lg
 };
+function renderIcon(icon, colorClass, size) {
+  return React.cloneElement(icon, {
+    className: utils.cn("shrink-0", colorClass, icon.props.className),
+    size: icon.props.size ?? iconSizeMap[size]
+  });
+}
 function Button({
   className,
   variant = "solid",
   color = "primary",
   background,
   size = "medium",
-  icon,
+  leftIcon,
+  rightIcon,
   children,
   ...props
 }) {
@@ -529,11 +536,9 @@ function Button({
       ),
       ...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 })
+        leftIcon && renderIcon(leftIcon, colorStyles[color][variant].icon, size),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("min-w-0 truncate", size === "xlarge" ? "px-1" : "px-0.5"), children }),
+        rightIcon && renderIcon(rightIcon, colorStyles[color][variant].icon, size)
       ]
     }
   );
@@ -555,13 +560,13 @@ function IconButton({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkMC4SYR5X_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_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,
+      leftIcon: icon,
       size,
       ...props
     }
@@ -619,7 +624,7 @@ function ButtonGroup({
             item.id
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(chunkMC4SYR5X_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, icon: item.icon, children: item.label }) }, item.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
       })
     }
   );
@@ -1019,12 +1024,12 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
 }
 var dropdownVariants = {
   content: utils.cn(
-    chunkMC4SYR5X_js.overlayListVariants.content,
+    chunk3LVJLFY6_js.overlayListVariants.content,
     "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
   ),
-  viewport: chunkMC4SYR5X_js.overlayListVariants.viewport,
-  item: (props) => utils.cn(chunkMC4SYR5X_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
-  slotSize: chunkMC4SYR5X_js.overlayListVariants.slotSize,
+  viewport: chunk3LVJLFY6_js.overlayListVariants.viewport,
+  item: (props) => utils.cn(chunk3LVJLFY6_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
+  slotSize: chunk3LVJLFY6_js.overlayListVariants.slotSize,
   separator: utils.cn("my-0.5 h-px bg-border-primary"),
   label: utils.cva("px-2 font-medium text-text-secondary", {
     defaultVariants: { size: "medium" },
@@ -1075,9 +1080,9 @@ Dropdown.Item = React.forwardRef(({ className, children, leftSlot, rightSlot, si
       className: utils.cn(dropdownVariants.item({ size }), className),
       ...props,
       children: [
-        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMC4SYR5X_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunkMC4SYR5X_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
-        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMC4SYR5X_js.overlayListVariants.slotSize({ size }), children: rightSlot })
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3LVJLFY6_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunk3LVJLFY6_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3LVJLFY6_js.overlayListVariants.slotSize({ size }), children: rightSlot })
       ]
     }
   );
@@ -1122,8 +1127,8 @@ var useTextAreaContext = () => {
   return context;
 };
 var textAreaVariants = {
-  container: chunkMC4SYR5X_js.commonInputVariants.container,
-  label: chunkMC4SYR5X_js.commonInputVariants.label,
+  container: chunk3LVJLFY6_js.commonInputVariants.container,
+  label: chunk3LVJLFY6_js.commonInputVariants.label,
   field: utils.cva(
     "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
     {
@@ -1177,7 +1182,7 @@ var textAreaVariants = {
     },
     defaultVariants: { size: "medium" }
   }),
-  description: chunkMC4SYR5X_js.commonInputVariants.description,
+  description: chunk3LVJLFY6_js.commonInputVariants.description,
   counter: utils.cva("text-nowrap font-regular", {
     variants: {
       disabled: {
@@ -1318,7 +1323,7 @@ var TextField = React.forwardRef(
   }, ref) => {
     const uniqueId = React.useId();
     const id = providedId || `text-field-${uniqueId}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
   }
 );
 TextField.Label = React.forwardRef(
@@ -1329,7 +1334,7 @@ TextField.Label = React.forwardRef(
       {
         ref,
         htmlFor: id,
-        className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.label({ size, disabled, required }), className),
+        className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.label({ size, disabled, required }), className),
         children
       }
     );
@@ -1348,11 +1353,11 @@ TextField.Input = React.forwardRef(
     } = useTextFieldContext();
     const state = disabled ? "disabled" : error ? "error" : "default";
     const isControlled = contextValue !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
       leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunkMC4SYR5X_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunk3LVJLFY6_js.textFieldVariants.icon({ size })),
           children: leftIcon
         }
       ),
@@ -1363,7 +1368,7 @@ TextField.Input = React.forwardRef(
             ref,
             id,
             disabled,
-            className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.input({ size, state })),
+            className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.input({ size, state })),
             onChange: (e) => {
               contextOnChange?.(e);
             },
@@ -1371,12 +1376,12 @@ TextField.Input = React.forwardRef(
             ...isControlled ? { value: contextValue } : {}
           }
         ),
-        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.subText({ size, disabled })), children: subText })
+        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.subText({ size, disabled })), children: subText })
       ] }),
       rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunkMC4SYR5X_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunk3LVJLFY6_js.textFieldVariants.icon({ size })),
           children: rightIcon
         }
       )
@@ -1390,7 +1395,7 @@ TextField.Description = React.forwardRef(
       "p",
       {
         ref,
-        className: utils.cn(chunkMC4SYR5X_js.textFieldVariants.description({ size, error, disabled }), className),
+        className: utils.cn(chunk3LVJLFY6_js.textFieldVariants.description({ size, error, disabled }), className),
         children
       }
     );
@@ -1509,7 +1514,7 @@ function ModalBody({
         scroll && "h-full [&_[data-slot=scroll-area-viewport]>div]:h-full"
       ),
       ...props,
-      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunkMC4SYR5X_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
+      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunk3LVJLFY6_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
     }
   );
 }
@@ -1895,7 +1900,7 @@ Sheet.Body = React.forwardRef(
         ),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMC4SYR5X_js.ScrollArea,
+          chunk3LVJLFY6_js.ScrollArea,
           {
             className: "h-full flex flex-col",
             disableHorizontalScroll,
@@ -2549,95 +2554,95 @@ var buttonize = (fn) => {
 
 Object.defineProperty(exports, "ColorPalette", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ColorPalette; }
+  get: function () { return chunk3LVJLFY6_js.ColorPalette; }
 });
 Object.defineProperty(exports, "ColorPaletteColors", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ColorPaletteColors; }
+  get: function () { return chunk3LVJLFY6_js.ColorPaletteColors; }
 });
 Object.defineProperty(exports, "Combobox", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.Combobox; }
+  get: function () { return chunk3LVJLFY6_js.Combobox; }
 });
 Object.defineProperty(exports, "ComboboxContent", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxContent; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxContent; }
 });
 Object.defineProperty(exports, "ComboboxDescription", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxDescription; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxDescription; }
 });
 Object.defineProperty(exports, "ComboboxEmpty", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxEmpty; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxEmpty; }
 });
 Object.defineProperty(exports, "ComboboxInput", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxInput; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxInput; }
 });
 Object.defineProperty(exports, "ComboboxItem", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxItem; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxItem; }
 });
 Object.defineProperty(exports, "ComboboxLabel", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxLabel; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxLabel; }
 });
 Object.defineProperty(exports, "ComboboxList", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxList; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxList; }
 });
 Object.defineProperty(exports, "ComboboxSearch", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxSearch; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxSearch; }
 });
 Object.defineProperty(exports, "ComboboxTrigger", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxTrigger; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxTrigger; }
 });
 Object.defineProperty(exports, "ComboboxValue", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ComboboxValue; }
+  get: function () { return chunk3LVJLFY6_js.ComboboxValue; }
 });
 Object.defineProperty(exports, "DEFAULT_COLOR", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.DEFAULT_COLOR; }
+  get: function () { return chunk3LVJLFY6_js.DEFAULT_COLOR; }
 });
 Object.defineProperty(exports, "ScrollArea", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ScrollArea; }
+  get: function () { return chunk3LVJLFY6_js.ScrollArea; }
 });
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.ScrollBar; }
+  get: function () { return chunk3LVJLFY6_js.ScrollBar; }
 });
 Object.defineProperty(exports, "Segment", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.Segment; }
+  get: function () { return chunk3LVJLFY6_js.Segment; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.Select; }
+  get: function () { return chunk3LVJLFY6_js.Select; }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.Tabs; }
+  get: function () { return chunk3LVJLFY6_js.Tabs; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.Tooltip; }
+  get: function () { return chunk3LVJLFY6_js.Tooltip; }
 });
 Object.defineProperty(exports, "colorPaletteColorClasses", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.colorPaletteColorClasses; }
+  get: function () { return chunk3LVJLFY6_js.colorPaletteColorClasses; }
 });
 Object.defineProperty(exports, "getColorPaletteColor", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.getColorPaletteColor; }
+  get: function () { return chunk3LVJLFY6_js.getColorPaletteColor; }
 });
 Object.defineProperty(exports, "isInPalette", {
   enumerable: true,
-  get: function () { return chunkMC4SYR5X_js.isInPalette; }
+  get: function () { return chunk3LVJLFY6_js.isInPalette; }
 });
 exports.Avatar = Avatar;
 exports.Badge = Badge;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-5SYAB4WP.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-5SYAB4WP.mjs';
+import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-BRB66UJW.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-BRB66UJW.mjs';
 import { X, MoreHorizontal, iconSizes, Minus, Check, Person, Loading, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-DKADAZLG.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as React from 'react';
@@ -482,13 +482,20 @@ var iconSizeMap = {
   large: iconSizes.md,
   xlarge: iconSizes.lg
 };
+function renderIcon(icon, colorClass, size) {
+  return cloneElement(icon, {
+    className: cn("shrink-0", colorClass, icon.props.className),
+    size: icon.props.size ?? iconSizeMap[size]
+  });
+}
 function Button({
   className,
   variant = "solid",
   color = "primary",
   background,
   size = "medium",
-  icon,
+  leftIcon,
+  rightIcon,
   children,
   ...props
 }) {
@@ -504,11 +511,9 @@ function Button({
       ),
       ...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 })
+        leftIcon && renderIcon(leftIcon, colorStyles[color][variant].icon, size),
+        children != null && /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", size === "xlarge" ? "px-1" : "px-0.5"), children }),
+        rightIcon && renderIcon(rightIcon, colorStyles[color][variant].icon, size)
       ]
     }
   );
@@ -536,7 +541,7 @@ function IconButton({
       "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
       "aria-labelledby": ariaLabelledBy,
       className: cn(iconButtonSizeClasses[size], "px-0", className),
-      icon,
+      leftIcon: icon,
       size,
       ...props
     }
@@ -594,7 +599,7 @@ function ButtonGroup({
             item.id
           );
         }
-        return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, icon: item.icon, children: item.label }) }, item.id);
+        return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
       })
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20261013013807",
+  "version": "0.3.4-next.20261014050302",
   "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.20261013013807"
+    "@exem-ui/core": "0.3.3-next.20261014050302"
   },
   "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.20261013013807"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20261014050302"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",