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

package/dist/index.d.mts

@@ -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

@@ -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

@@ -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)
       ]
     }
   );
@@ -561,7 +566,7 @@ function IconButton({
       "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(chunkMC4SYR5X_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
       })
     }
   );

package/dist/index.mjs

@@ -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.20261014014656",
   "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.20261014014656"
   },
   "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.20261014014656"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",