@exem-ui/react 0.3.4-next.20260819010838 → 0.3.4-next.20260828070546

package/dist/index.d.mts

@@ -813,7 +813,17 @@ type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
 };
 declare const MessageBox: MessageBoxComponent;
 
-interface LoadingProps extends VariantProps<typeof containerVariants>, VariantProps<typeof spinnerVariants>, Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+declare const containerVariants: (props?: ({
+    position?: "fixed" | "absolute" | null | undefined;
+    blockInteraction?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const spinnerSizes: {
+    readonly small: 24;
+    readonly medium: 36;
+    readonly large: 48;
+};
+type LoadingSize = keyof typeof spinnerSizes;
+interface LoadingProps extends VariantProps<typeof containerVariants>, Omit<React__default.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * 로딩 표시 여부
      * @default true
@@ -829,6 +839,8 @@ interface LoadingProps extends VariantProps<typeof containerVariants>, VariantPr
      * @default false
      */
     blockInteraction?: boolean;
+    /** 스피너 크기 */
+    size?: LoadingSize;
     /** 컨테이너 추가 클래스 */
     containerClassName?: string;
     /** 오버레이 추가 클래스 */
@@ -836,43 +848,29 @@ interface LoadingProps extends VariantProps<typeof containerVariants>, VariantPr
     /** 스피너 추가 클래스 */
     spinnerClassName?: string;
 }
-type LoadingComponent = React__default.ForwardRefExoticComponent<LoadingProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const containerVariants: (props?: ({
-    position?: "fixed" | "absolute" | null | undefined;
-    blockInteraction?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const spinnerVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * 비동기 작업 중 로딩 상태를 표시하는 오버레이 컴포넌트입니다.
  *
  * @example
  * ```tsx
- * // 기본 사용 (전체 화면 고정)
  * <Loading isLoading />
- *
- * // 특정 영역 내 로딩 (absolute 위치)
- * <div style={{ position: 'relative' }}>
- *   <Loading isLoading position="absolute" size="small" />
- * </div>
+ * <Loading isLoading position="absolute" size="small" />
  * ```
- *
- * @see {@link LoadingProps} props 상세
  */
-declare const Loading: LoadingComponent;
+declare function Loading({ isLoading, dim, blockInteraction, position, size, containerClassName, overlayClassName, spinnerClassName, className, ref, 'aria-label': ariaLabel, ...props }: LoadingProps): react_jsx_runtime.JSX.Element | null;
+type LoadingComponent = typeof Loading;
 
 declare const trackVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__default.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * 현재 진행 값
      * @default 0
      */
     value?: number;
     /**
-     * 최대 값
+     * 최대 값. 0 이하면 값이 max로 보정되어 완료 상태가 되므로 양수만 사용합니다.
      * @default 100
      */
     max?: number;
@@ -881,17 +879,9 @@ interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__
     /** 게이지(채움) 추가 클래스 */
     gaugeClassName?: string;
 }
-type ProgressComponent = React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
-/**
- * 작업 진행률을 시각적으로 표시하는 바 컴포넌트입니다.
- *
- * @example
- * ```tsx
- * <Progress value={60} />
- * <Progress value={30} max={100} size="large" />
- * ```
- */
-declare const Progress: ProgressComponent;
+/** 작업 진행률을 시각적으로 표시하는 바 컴포넌트입니다. */
+declare function Progress({ value, max, size, trackClassName, gaugeClassName, className, ref, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+type ProgressComponent = typeof Progress;
 
 type ToasterRootProps = React$1.ComponentProps<typeof Toaster$1>;
 type ToasterContainerProps = {

package/dist/index.d.ts

@@ -813,7 +813,17 @@ type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
 };
 declare const MessageBox: MessageBoxComponent;
 
-interface LoadingProps extends VariantProps<typeof containerVariants>, VariantProps<typeof spinnerVariants>, Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+declare const containerVariants: (props?: ({
+    position?: "fixed" | "absolute" | null | undefined;
+    blockInteraction?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const spinnerSizes: {
+    readonly small: 24;
+    readonly medium: 36;
+    readonly large: 48;
+};
+type LoadingSize = keyof typeof spinnerSizes;
+interface LoadingProps extends VariantProps<typeof containerVariants>, Omit<React__default.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * 로딩 표시 여부
      * @default true
@@ -829,6 +839,8 @@ interface LoadingProps extends VariantProps<typeof containerVariants>, VariantPr
      * @default false
      */
     blockInteraction?: boolean;
+    /** 스피너 크기 */
+    size?: LoadingSize;
     /** 컨테이너 추가 클래스 */
     containerClassName?: string;
     /** 오버레이 추가 클래스 */
@@ -836,43 +848,29 @@ interface LoadingProps extends VariantProps<typeof containerVariants>, VariantPr
     /** 스피너 추가 클래스 */
     spinnerClassName?: string;
 }
-type LoadingComponent = React__default.ForwardRefExoticComponent<LoadingProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const containerVariants: (props?: ({
-    position?: "fixed" | "absolute" | null | undefined;
-    blockInteraction?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const spinnerVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * 비동기 작업 중 로딩 상태를 표시하는 오버레이 컴포넌트입니다.
  *
  * @example
  * ```tsx
- * // 기본 사용 (전체 화면 고정)
  * <Loading isLoading />
- *
- * // 특정 영역 내 로딩 (absolute 위치)
- * <div style={{ position: 'relative' }}>
- *   <Loading isLoading position="absolute" size="small" />
- * </div>
+ * <Loading isLoading position="absolute" size="small" />
  * ```
- *
- * @see {@link LoadingProps} props 상세
  */
-declare const Loading: LoadingComponent;
+declare function Loading({ isLoading, dim, blockInteraction, position, size, containerClassName, overlayClassName, spinnerClassName, className, ref, 'aria-label': ariaLabel, ...props }: LoadingProps): react_jsx_runtime.JSX.Element | null;
+type LoadingComponent = typeof Loading;
 
 declare const trackVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__default.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * 현재 진행 값
      * @default 0
      */
     value?: number;
     /**
-     * 최대 값
+     * 최대 값. 0 이하면 값이 max로 보정되어 완료 상태가 되므로 양수만 사용합니다.
      * @default 100
      */
     max?: number;
@@ -881,17 +879,9 @@ interface ProgressProps extends VariantProps<typeof trackVariants>, Omit<React__
     /** 게이지(채움) 추가 클래스 */
     gaugeClassName?: string;
 }
-type ProgressComponent = React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
-/**
- * 작업 진행률을 시각적으로 표시하는 바 컴포넌트입니다.
- *
- * @example
- * ```tsx
- * <Progress value={60} />
- * <Progress value={30} max={100} size="large" />
- * ```
- */
-declare const Progress: ProgressComponent;
+/** 작업 진행률을 시각적으로 표시하는 바 컴포넌트입니다. */
+declare function Progress({ value, max, size, trackClassName, gaugeClassName, className, ref, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+type ProgressComponent = typeof Progress;
 
 type ToasterRootProps = React$1.ComponentProps<typeof Toaster$1>;
 type ToasterContainerProps = {

package/dist/index.js

@@ -13,6 +13,7 @@ var reactDayPicker = require('react-day-picker');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var reResizable = require('re-resizable');
+var progress = require('@base-ui/react/progress');
 var sonner = require('sonner');
 
 function _interopNamespace(e) {
@@ -959,6 +960,16 @@ var Switch = React.forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+function mergeClassNames(base, user) {
+  if (!user) {
+    return base;
+  }
+  const merged = { ...base };
+  for (const key in user) {
+    merged[key] = utils.cn(base[key], user[key]);
+  }
+  return merged;
+}
 function DatePickerChevron({ orientation }) {
   if (orientation === "left") {
     return /* @__PURE__ */ jsxRuntime.jsx(chunk6MFMQCL5_js.ChevronLeft, { type: "regular", className: "size-5" });
@@ -987,7 +998,6 @@ function DatePickerDayButton({
 }
 function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
   const dayPickerProps = { ...rest, mode: type };
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
   const [month, setMonth] = React.useState(
     dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
   );
@@ -1003,6 +1013,41 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
     }
     dayPickerProps.onDayClick?.(day, modifiers, e);
   };
+  const dayPickerClassNames = {
+    root: "rounded-medium",
+    months: "relative",
+    month: "flex flex-col gap-2",
+    month_caption: "flex h-7 items-center px-0.5",
+    caption_label: "text-body-2 font-semibold text-text-primary",
+    nav: "absolute right-0 top-0 flex h-7 items-center gap-2",
+    button_previous: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    button_next: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    weekday: "size-8 text-body-3 font-regular text-text-tertiary",
+    month_grid: "border-separate border-spacing-x-0 border-spacing-y-1",
+    week: "overflow-hidden rounded-medium",
+    day: "size-8 text-body-2 font-medium text-text-secondary",
+    day_button: "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused",
+    outside: "!text-text-disabled",
+    selected: utils.cn(
+      "[&>button]:bg-solid-primary-default",
+      "[&>button]:text-text-inverse",
+      "[&>button]:border-0",
+      "[&>button]:hover:border-0"
+    ),
+    range_start: utils.cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_end: utils.cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_middle: utils.cn(
+      "bg-elevation-elevation-2 rounded-none",
+      "[&>button]:!bg-transparent",
+      "[&>button]:!text-text-secondary"
+    )
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
     {
@@ -1025,64 +1070,11 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
         DayButton: DatePickerDayButton,
         ...dayPickerProps.components
       },
-      classNames: {
-        root: utils.cn(
-          defaultClassNames.root,
-          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
-        ),
-        months: utils.cn(defaultClassNames.months, "relative"),
-        month: utils.cn(defaultClassNames.month, "flex flex-col gap-2"),
-        month_caption: utils.cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
-        caption_label: "text-body-2 font-semibold text-text-primary",
-        nav: utils.cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
-        button_previous: utils.cn(
-          defaultClassNames.button_previous,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        button_next: utils.cn(
-          defaultClassNames.button_next,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        weekday: utils.cn(
-          defaultClassNames.weekday,
-          "size-8 text-body-3 font-regular text-text-tertiary"
-        ),
-        month_grid: utils.cn(
-          defaultClassNames.month_grid,
-          "border-separate border-spacing-x-0 border-spacing-y-1"
-        ),
-        week: utils.cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
-        day: utils.cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
-        day_button: utils.cn(
-          defaultClassNames.day_button,
-          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
-        ),
-        outside: "!text-text-disabled",
-        selected: utils.cn(
-          "[&>button]:bg-solid-primary-default",
-          "[&>button]:text-text-inverse",
-          "[&>button]:border-0",
-          "[&>button]:hover:border-0"
-        ),
-        range_start: utils.cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_end: utils.cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_middle: utils.cn(
-          "bg-elevation-elevation-2 rounded-none",
-          "[&>button]:!bg-transparent",
-          "[&>button]:!text-text-secondary"
-        ),
-        ...dayPickerProps.classNames
-      },
-      modifiersClassNames: {
-        today: "rdp-calendar-today",
-        ...dayPickerProps.modifiersClassNames
-      }
+      classNames: mergeClassNames(dayPickerClassNames, dayPickerProps.classNames),
+      modifiersClassNames: mergeClassNames(
+        { today: "rdp-calendar-today" },
+        dayPickerProps.modifiersClassNames
+      )
     }
   );
 }
@@ -2084,83 +2076,69 @@ var containerVariants4 = utils.cva("inset-0 z-[49] flex items-center justify-cen
     blockInteraction: false
   }
 });
-var overlayVariants = utils.cva("absolute inset-0 transition-opacity duration-150", {
-  variants: {
-    visible: {
-      true: "opacity-100",
-      false: "opacity-0"
-    },
-    tone: {
-      // 대비감 높은 톤 설정 추후 디자인 시스템에서 추가 되어야함
-      auto: "bg-black/30 dark:bg-white/10",
-      dark: "bg-black/50",
-      light: "bg-white/70",
-      brand: "bg-primary/20"
-    }
-  },
-  defaultVariants: {
-    visible: true,
-    tone: "auto"
-  }
-});
-var spinnerVariants = utils.cva(
-  "z-50 shrink-0 animate-spin rounded-full border-elevation-elevation-4 border-t-transparent",
+var overlayVariants = utils.cva(
+  "absolute inset-0 bg-component-dim transition-opacity duration-150 motion-reduce:transition-none",
   {
     variants: {
-      size: {
-        small: "size-6 border-2",
-        medium: "size-9 border-[3px]",
-        large: "size-12 border-4"
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0"
       }
     },
     defaultVariants: {
-      size: "large"
+      visible: true
     }
   }
 );
-var Loading = React.forwardRef(
-  ({
-    isLoading = true,
-    dim = true,
-    blockInteraction = false,
-    position = "fixed",
-    size = "medium",
-    containerClassName,
-    overlayClassName,
-    spinnerClassName,
-    className,
-    ...props
-  }, ref) => {
-    if (!isLoading) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        role: "status",
-        "aria-busy": "true",
-        className: utils.cn(
-          containerVariants4({ position, blockInteraction }),
-          containerClassName,
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: utils.cn(overlayVariants({ visible: dim }), overlayClassName)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 flex size-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(spinnerVariants({ size }), spinnerClassName) }) })
-        ]
-      }
-    );
+var spinnerBaseClassName = "relative z-50 shrink-0 animate-spin text-elevation-elevation-4 motion-reduce:animate-none";
+var spinnerSizes = {
+  small: 24,
+  medium: 36,
+  large: 48
+};
+function Loading2({
+  isLoading = true,
+  dim = true,
+  blockInteraction = false,
+  position = "fixed",
+  size = "medium",
+  containerClassName,
+  overlayClassName,
+  spinnerClassName,
+  className,
+  ref,
+  "aria-label": ariaLabel = "Loading",
+  ...props
+}) {
+  if (!isLoading) {
+    return null;
   }
-);
-Loading.displayName = "Loading";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    progress.Progress.Root,
+    {
+      ref,
+      value: null,
+      "aria-label": ariaLabel,
+      className: utils.cn(
+        containerVariants4({ position, blockInteraction }),
+        containerClassName,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: utils.cn(overlayVariants({ visible: dim }), overlayClassName) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 flex size-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          progress.Progress.Indicator,
+          {
+            "aria-hidden": "true",
+            render: /* @__PURE__ */ jsxRuntime.jsx(chunk6MFMQCL5_js.Loading, { size: spinnerSizes[size] }),
+            className: utils.cn(spinnerBaseClassName, spinnerClassName)
+          }
+        ) })
+      ]
+    }
+  );
+}
 var trackVariants = utils.cva("w-full overflow-hidden rounded-full bg-elevation-elevation-3", {
   variants: {
     size: {
@@ -2173,44 +2151,42 @@ var trackVariants = utils.cva("w-full overflow-hidden rounded-full bg-elevation-
     size: "large"
   }
 });
-var gaugeVariants = utils.cva("h-full rounded-full bg-icon-accent transition-[width] duration-300", {
-  variants: {
-    size: {
-      small: "",
-      medium: "",
-      large: ""
+var gaugeBaseClassName = "h-full rounded-full bg-icon-accent transition-[width] duration-300";
+var percentFormatter = new Intl.NumberFormat(void 0, { style: "percent" });
+function Progress({
+  value = 0,
+  max = 100,
+  size = "medium",
+  trackClassName,
+  gaugeClassName,
+  className,
+  ref,
+  "aria-label": ariaLabel = "Progress",
+  "aria-valuetext": ariaValueText,
+  ...props
+}) {
+  const clampedValue = Math.min(Math.max(value, 0), max);
+  const percent = max > 0 ? clampedValue / max : 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    progress.Progress.Root,
+    {
+      ref,
+      value: clampedValue,
+      max,
+      "aria-label": ariaLabel,
+      "aria-valuetext": ariaValueText ?? percentFormatter.format(percent),
+      className: utils.cn(trackVariants({ size }), trackClassName, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        progress.Progress.Indicator,
+        {
+          className: utils.cn(gaugeBaseClassName, gaugeClassName),
+          style: max > 0 ? void 0 : { width: "0%" }
+        }
+      )
     }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
-var Progress = React.forwardRef(
-  ({ value = 0, max = 100, size = "medium", trackClassName, gaugeClassName, className, ...props }, ref) => {
-    const clampedValue = Math.min(Math.max(value, 0), max);
-    const percent = max > 0 ? clampedValue / max * 100 : 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        role: "progressbar",
-        "aria-valuenow": clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: utils.cn(trackVariants({ size }), trackClassName, className),
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils.cn(gaugeVariants({ size }), gaugeClassName),
-            style: { width: `${percent}%` }
-          }
-        )
-      }
-    );
-  }
-);
-Progress.displayName = "Progress";
+  );
+}
 var positionFix = `
 [data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
   left: calc(var(--width) / 2) !important;
@@ -2653,7 +2629,7 @@ exports.DatePicker = DatePicker;
 exports.DoubleTag = DoubleTag;
 exports.Dropdown = Dropdown;
 exports.IconButton = IconButton;
-exports.Loading = Loading;
+exports.Loading = Loading2;
 exports.MessageBox = MessageBox;
 exports.Modal = Modal;
 exports.Progress = Progress;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { ConditionalTooltip, overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea } 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, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-4QQPDTTI.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';
@@ -9,10 +9,11 @@ import { Slot } from '@radix-ui/react-slot';
 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 { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { DayPicker } from 'react-day-picker';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Resizable } from 're-resizable';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 
 var SIZE_CONFIG = {
@@ -934,6 +935,16 @@ var Switch = forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
+function mergeClassNames(base, user) {
+  if (!user) {
+    return base;
+  }
+  const merged = { ...base };
+  for (const key in user) {
+    merged[key] = cn(base[key], user[key]);
+  }
+  return merged;
+}
 function DatePickerChevron({ orientation }) {
   if (orientation === "left") {
     return /* @__PURE__ */ jsx(ChevronLeft, { type: "regular", className: "size-5" });
@@ -962,7 +973,6 @@ function DatePickerDayButton({
 }
 function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
   const dayPickerProps = { ...rest, mode: type };
-  const defaultClassNames = getDefaultClassNames();
   const [month, setMonth] = useState(
     dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
   );
@@ -978,6 +988,41 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
     }
     dayPickerProps.onDayClick?.(day, modifiers, e);
   };
+  const dayPickerClassNames = {
+    root: "rounded-medium",
+    months: "relative",
+    month: "flex flex-col gap-2",
+    month_caption: "flex h-7 items-center px-0.5",
+    caption_label: "text-body-2 font-semibold text-text-primary",
+    nav: "absolute right-0 top-0 flex h-7 items-center gap-2",
+    button_previous: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    button_next: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    weekday: "size-8 text-body-3 font-regular text-text-tertiary",
+    month_grid: "border-separate border-spacing-x-0 border-spacing-y-1",
+    week: "overflow-hidden rounded-medium",
+    day: "size-8 text-body-2 font-medium text-text-secondary",
+    day_button: "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused",
+    outside: "!text-text-disabled",
+    selected: cn(
+      "[&>button]:bg-solid-primary-default",
+      "[&>button]:text-text-inverse",
+      "[&>button]:border-0",
+      "[&>button]:hover:border-0"
+    ),
+    range_start: cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_end: cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_middle: cn(
+      "bg-elevation-elevation-2 rounded-none",
+      "[&>button]:!bg-transparent",
+      "[&>button]:!text-text-secondary"
+    )
+  };
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
@@ -1000,64 +1045,11 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
         DayButton: DatePickerDayButton,
         ...dayPickerProps.components
       },
-      classNames: {
-        root: cn(
-          defaultClassNames.root,
-          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
-        ),
-        months: cn(defaultClassNames.months, "relative"),
-        month: cn(defaultClassNames.month, "flex flex-col gap-2"),
-        month_caption: cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
-        caption_label: "text-body-2 font-semibold text-text-primary",
-        nav: cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
-        button_previous: cn(
-          defaultClassNames.button_previous,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        button_next: cn(
-          defaultClassNames.button_next,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        weekday: cn(
-          defaultClassNames.weekday,
-          "size-8 text-body-3 font-regular text-text-tertiary"
-        ),
-        month_grid: cn(
-          defaultClassNames.month_grid,
-          "border-separate border-spacing-x-0 border-spacing-y-1"
-        ),
-        week: cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
-        day: cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
-        day_button: cn(
-          defaultClassNames.day_button,
-          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
-        ),
-        outside: "!text-text-disabled",
-        selected: cn(
-          "[&>button]:bg-solid-primary-default",
-          "[&>button]:text-text-inverse",
-          "[&>button]:border-0",
-          "[&>button]:hover:border-0"
-        ),
-        range_start: cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_end: cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_middle: cn(
-          "bg-elevation-elevation-2 rounded-none",
-          "[&>button]:!bg-transparent",
-          "[&>button]:!text-text-secondary"
-        ),
-        ...dayPickerProps.classNames
-      },
-      modifiersClassNames: {
-        today: "rdp-calendar-today",
-        ...dayPickerProps.modifiersClassNames
-      }
+      classNames: mergeClassNames(dayPickerClassNames, dayPickerProps.classNames),
+      modifiersClassNames: mergeClassNames(
+        { today: "rdp-calendar-today" },
+        dayPickerProps.modifiersClassNames
+      )
     }
   );
 }
@@ -2059,83 +2051,69 @@ var containerVariants4 = cva("inset-0 z-[49] flex items-center justify-center",
     blockInteraction: false
   }
 });
-var overlayVariants = cva("absolute inset-0 transition-opacity duration-150", {
-  variants: {
-    visible: {
-      true: "opacity-100",
-      false: "opacity-0"
-    },
-    tone: {
-      // 대비감 높은 톤 설정 추후 디자인 시스템에서 추가 되어야함
-      auto: "bg-black/30 dark:bg-white/10",
-      dark: "bg-black/50",
-      light: "bg-white/70",
-      brand: "bg-primary/20"
-    }
-  },
-  defaultVariants: {
-    visible: true,
-    tone: "auto"
-  }
-});
-var spinnerVariants = cva(
-  "z-50 shrink-0 animate-spin rounded-full border-elevation-elevation-4 border-t-transparent",
+var overlayVariants = cva(
+  "absolute inset-0 bg-component-dim transition-opacity duration-150 motion-reduce:transition-none",
   {
     variants: {
-      size: {
-        small: "size-6 border-2",
-        medium: "size-9 border-[3px]",
-        large: "size-12 border-4"
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0"
       }
     },
     defaultVariants: {
-      size: "large"
+      visible: true
     }
   }
 );
-var Loading = forwardRef(
-  ({
-    isLoading = true,
-    dim = true,
-    blockInteraction = false,
-    position = "fixed",
-    size = "medium",
-    containerClassName,
-    overlayClassName,
-    spinnerClassName,
-    className,
-    ...props
-  }, ref) => {
-    if (!isLoading) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: "status",
-        "aria-busy": "true",
-        className: cn(
-          containerVariants4({ position, blockInteraction }),
-          containerClassName,
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: cn(overlayVariants({ visible: dim }), overlayClassName)
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "relative z-50 flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: cn(spinnerVariants({ size }), spinnerClassName) }) })
-        ]
-      }
-    );
+var spinnerBaseClassName = "relative z-50 shrink-0 animate-spin text-elevation-elevation-4 motion-reduce:animate-none";
+var spinnerSizes = {
+  small: 24,
+  medium: 36,
+  large: 48
+};
+function Loading2({
+  isLoading = true,
+  dim = true,
+  blockInteraction = false,
+  position = "fixed",
+  size = "medium",
+  containerClassName,
+  overlayClassName,
+  spinnerClassName,
+  className,
+  ref,
+  "aria-label": ariaLabel = "Loading",
+  ...props
+}) {
+  if (!isLoading) {
+    return null;
   }
-);
-Loading.displayName = "Loading";
+  return /* @__PURE__ */ jsxs(
+    Progress$1.Root,
+    {
+      ref,
+      value: null,
+      "aria-label": ariaLabel,
+      className: cn(
+        containerVariants4({ position, blockInteraction }),
+        containerClassName,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn(overlayVariants({ visible: dim }), overlayClassName) }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-50 flex size-full items-center justify-center", children: /* @__PURE__ */ jsx(
+          Progress$1.Indicator,
+          {
+            "aria-hidden": "true",
+            render: /* @__PURE__ */ jsx(Loading, { size: spinnerSizes[size] }),
+            className: cn(spinnerBaseClassName, spinnerClassName)
+          }
+        ) })
+      ]
+    }
+  );
+}
 var trackVariants = cva("w-full overflow-hidden rounded-full bg-elevation-elevation-3", {
   variants: {
     size: {
@@ -2148,44 +2126,42 @@ var trackVariants = cva("w-full overflow-hidden rounded-full bg-elevation-elevat
     size: "large"
   }
 });
-var gaugeVariants = cva("h-full rounded-full bg-icon-accent transition-[width] duration-300", {
-  variants: {
-    size: {
-      small: "",
-      medium: "",
-      large: ""
+var gaugeBaseClassName = "h-full rounded-full bg-icon-accent transition-[width] duration-300";
+var percentFormatter = new Intl.NumberFormat(void 0, { style: "percent" });
+function Progress({
+  value = 0,
+  max = 100,
+  size = "medium",
+  trackClassName,
+  gaugeClassName,
+  className,
+  ref,
+  "aria-label": ariaLabel = "Progress",
+  "aria-valuetext": ariaValueText,
+  ...props
+}) {
+  const clampedValue = Math.min(Math.max(value, 0), max);
+  const percent = max > 0 ? clampedValue / max : 0;
+  return /* @__PURE__ */ jsx(
+    Progress$1.Root,
+    {
+      ref,
+      value: clampedValue,
+      max,
+      "aria-label": ariaLabel,
+      "aria-valuetext": ariaValueText ?? percentFormatter.format(percent),
+      className: cn(trackVariants({ size }), trackClassName, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Progress$1.Indicator,
+        {
+          className: cn(gaugeBaseClassName, gaugeClassName),
+          style: max > 0 ? void 0 : { width: "0%" }
+        }
+      )
     }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
-var Progress = forwardRef(
-  ({ value = 0, max = 100, size = "medium", trackClassName, gaugeClassName, className, ...props }, ref) => {
-    const clampedValue = Math.min(Math.max(value, 0), max);
-    const percent = max > 0 ? clampedValue / max * 100 : 0;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        role: "progressbar",
-        "aria-valuenow": clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: cn(trackVariants({ size }), trackClassName, className),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(gaugeVariants({ size }), gaugeClassName),
-            style: { width: `${percent}%` }
-          }
-        )
-      }
-    );
-  }
-);
-Progress.displayName = "Progress";
+  );
+}
 var positionFix = `
 [data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
   left: calc(var(--width) / 2) !important;
@@ -2526,4 +2502,4 @@ var buttonize = (fn) => {
   };
 };
 
-export { Avatar, Badge, Breadcrumb, Button, ButtonGroup, Checkbox, DatePicker, DoubleTag, Dropdown, IconButton, Loading, MessageBox, Modal, Progress, Radio, Sheet, Star, Switch, Tag, TextArea, TextField, ToastProvider, Toaster, buttonize, toast, useToast };
+export { Avatar, Badge, Breadcrumb, Button, ButtonGroup, Checkbox, DatePicker, DoubleTag, Dropdown, IconButton, Loading2 as Loading, MessageBox, Modal, Progress, Radio, Sheet, Star, Switch, Tag, TextArea, TextField, ToastProvider, Toaster, buttonize, toast, useToast };

package/package.json

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