@exem-ui/react 0.1.0

package/dist/chunk-5QX4TO4F.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/progress/Progress.tsx
+var trackVariants = utils.cva("w-full overflow-hidden rounded-full bg-elevation-elevation-3", {
+  variants: {
+    size: {
+      small: "h-1",
+      medium: "h-1.5",
+      large: "h-2"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var gaugeVariants = utils.cva("h-full rounded-full bg-icon-accent transition-[width] duration-300", {
+  variants: {
+    size: {
+      small: "",
+      medium: "",
+      large: ""
+    }
+  },
+  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";
+
+exports.Progress = Progress;
+//# sourceMappingURL=chunk-5QX4TO4F.js.map
+//# sourceMappingURL=chunk-5QX4TO4F.js.map

package/dist/chunk-5QX4TO4F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/Progress.tsx"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;;AAIA,IAAM,aAAA,GAAgBA,UAAI,8DAAA,EAAgE;AAAA,EACxF,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,KAAA;AAAA,MACP,MAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAED,IAAM,aAAA,GAAgBA,UAAI,oEAAA,EAAsE;AAAA,EAC9F,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAkCD,IAAM,QAAA,GAAWC,gBAAA;AAAA,EACf,CACE,EAAE,KAAA,GAAQ,CAAA,EAAG,MAAM,GAAA,EAAK,IAAA,GAAO,QAAA,EAAU,cAAA,EAAgB,cAAA,EAAgB,SAAA,EAAW,GAAG,KAAA,IACvF,GAAA,KACG;AACH,IAAA,MAAM,YAAA,GAAe,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,KAAA,EAAO,CAAC,GAAG,GAAG,CAAA;AACrD,IAAA,MAAM,OAAA,GAAU,GAAA,GAAM,CAAA,GAAK,YAAA,GAAe,MAAO,GAAA,GAAM,CAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,YAAA;AAAA,QACf,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,SAAA,EAAWC,SAAG,aAAA,CAAc,EAAE,MAAM,CAAA,EAAG,gBAAgB,SAAS,CAAA;AAAA,QAC/D,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAWC,QAAA,CAAG,aAAA,CAAc,EAAE,IAAA,EAAM,GAAG,cAAc,CAAA;AAAA,YACrD,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,OAAO,CAAA,CAAA,CAAA;AAAI;AAAA;AAChC;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-5QX4TO4F.js","sourcesContent":["import { cn, cva, type VariantProps } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { forwardRef } from 'react';\n\nconst trackVariants = cva('w-full overflow-hidden rounded-full bg-elevation-elevation-3', {\n  variants: {\n    size: {\n      small: 'h-1',\n      medium: 'h-1.5',\n      large: 'h-2',\n    },\n  },\n  defaultVariants: {\n    size: 'large',\n  },\n});\n\nconst gaugeVariants = cva('h-full rounded-full bg-icon-accent transition-[width] duration-300', {\n  variants: {\n    size: {\n      small: '',\n      medium: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\ninterface ProgressProps\n  extends VariantProps<typeof trackVariants>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * 현재 진행 값\n   * @default 0\n   */\n  value?: number;\n  /**\n   * 최대 값\n   * @default 100\n   */\n  max?: number;\n  /** 트랙(배경) 추가 클래스 */\n  trackClassName?: string;\n  /** 게이지(채움) 추가 클래스 */\n  gaugeClassName?: string;\n}\n\ntype ProgressComponent = React.ForwardRefExoticComponent<\n  ProgressProps & React.RefAttributes<HTMLDivElement>\n>;\n\n/**\n * 작업 진행률을 시각적으로 표시하는 바 컴포넌트입니다.\n *\n * @example\n * ```tsx\n * <Progress value={60} />\n * <Progress value={30} max={100} size=\"large\" />\n * ```\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    { value = 0, max = 100, size = 'medium', trackClassName, gaugeClassName, className, ...props },\n    ref,\n  ) => {\n    const clampedValue = Math.min(Math.max(value, 0), max);\n    const percent = max > 0 ? (clampedValue / max) * 100 : 0;\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuenow={clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        className={cn(trackVariants({ size }), trackClassName, className)}\n        {...props}\n      >\n        <div\n          className={cn(gaugeVariants({ size }), gaugeClassName)}\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n    );\n  },\n) as ProgressComponent;\n\nProgress.displayName = 'Progress';\n\nexport { Progress };\nexport type { ProgressComponent, ProgressProps };\n"]}

package/dist/chunk-5TEFN2CW.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var chunkREBHUF4L_js = require('./chunk-REBHUF4L.js');
+var chunk3FPMWAQT_js = require('./chunk-3FPMWAQT.js');
+var utils = require('@exem-ui/core/utils');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var iconButtonSizeClasses = {
+  xsmall: "size-6",
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10",
+  xlarge: "size-12"
+};
+var IconButton = react.forwardRef(
+  ({
+    className,
+    tooltip,
+    variant = "contained",
+    icon,
+    size = "medium",
+    color = "primary",
+    ...props
+  }, ref) => {
+    const buttonProps = {
+      className: utils.cn(iconButtonSizeClasses[size], "px-0", className),
+      color,
+      icon,
+      size,
+      variant,
+      ...props
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk3FPMWAQT_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(chunkREBHUF4L_js.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(chunk3FPMWAQT_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, color: "assistive", variant: "contained" }) : /* @__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(chunk3FPMWAQT_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(chunkREBHUF4L_js.Button, { ...buttonBaseProps, color: "assistive", variant: "contained", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(chunkREBHUF4L_js.Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
+        })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+exports.ButtonGroup = ButtonGroup;
+exports.IconButton = IconButton;
+//# sourceMappingURL=chunk-5TEFN2CW.js.map
+//# sourceMappingURL=chunk-5TEFN2CW.js.map

package/dist/chunk-5TEFN2CW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/IconButton.tsx","../src/button/ButtonGroup.tsx"],"names":["forwardRef","cn","jsx","ConditionalTooltip","Button"],"mappings":"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","file":"chunk-5TEFN2CW.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport type { ComponentProps } from 'react';\nimport { forwardRef } from 'react';\nimport { ConditionalTooltip } from '../flat';\nimport { Button } from './Button';\n\ntype IconButtonVariant = 'contained' | 'outlined' | 'invisible';\n\ntype IconButtonColorVariantCombination =\n  | { color?: 'primary'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'accent'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'critical'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'assistive'; variant?: 'contained' }\n  | { color?: 'inverse'; variant?: 'contained' };\n\ntype IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> &\n  IconButtonColorVariantCombination & {\n    icon: React.ReactElement<{ className?: string }>;\n    variant?: IconButtonVariant;\n    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n    /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */\n    tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];\n  };\n\ntype IconButtonComponent = React.ForwardRefExoticComponent<\n  IconButtonProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst iconButtonSizeClasses = {\n  xsmall: 'size-6',\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n  xlarge: 'size-12',\n};\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      tooltip,\n      variant = 'contained',\n      icon,\n      size = 'medium',\n      color = 'primary',\n      ...props\n    },\n    ref,\n  ) => {\n    const buttonProps = {\n      className: cn(iconButtonSizeClasses[size], 'px-0', className),\n      color,\n      icon,\n      size,\n      variant,\n      ...props,\n    };\n\n    return (\n      <ConditionalTooltip tooltip={tooltip}>\n        <Button ref={ref} {...(buttonProps as React.ComponentProps<typeof Button>)} />\n      </ConditionalTooltip>\n    );\n  },\n) as IconButtonComponent;\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonComponent, IconButtonProps };\n","import { cn } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport type { ComponentProps } from 'react';\nimport { forwardRef } from 'react';\nimport { ConditionalTooltip } from '../flat';\nimport { Button } from './Button';\nimport { IconButton } from './IconButton';\n\ntype ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\ninterface ButtonGroupItem {\n  id: string;\n  label?: string;\n  icon?: React.ReactElement<{ className?: string }>;\n  /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */\n  tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];\n  onClick?: () => void;\n}\n\ninterface ButtonGroupProps {\n  /** 버튼 그룹 스타일 변형 */\n  variant?: 'contained' | 'outlined';\n  /** 아이콘만 표시 */\n  iconOnly?: boolean;\n  /** 배경색 표시 여부 (뒷 레이어가 보이지 않아야 할 때) */\n  hasBackground?: boolean;\n  /** 버튼 크기 */\n  size?: ButtonGroupSize;\n  /** 버튼 항목 목록 */\n  items: ButtonGroupItem[];\n  /** 커스텀 className */\n  className?: string;\n}\n\ntype ButtonGroupComponent = React.ForwardRefExoticComponent<\n  ButtonGroupProps & React.RefAttributes<HTMLDivElement>\n>;\n\nconst ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      variant = 'contained',\n      iconOnly = false,\n      hasBackground = false,\n      size = 'medium',\n      items,\n      className,\n    },\n    ref,\n  ) => {\n    if (items.length === 0) {\n      return null;\n    }\n\n    const isOutlined = variant === 'outlined';\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'inline-flex items-center overflow-hidden rounded-medium',\n          hasBackground && 'bg-elevation-elevation-0',\n          className,\n        )}\n        role=\"group\"\n      >\n        {items.map((item, index) => {\n          const isFirst = index === 0;\n          const isLast = index === items.length - 1;\n\n          const roundedClasses = cn('rounded-none', {\n            'rounded-l-medium': isFirst,\n            'rounded-r-medium': isLast,\n          });\n\n          // contained: 버튼 사이 divider, outlined: -ml-px로 border 병합\n          const dividerClasses = !isOutlined && !isLast ? 'border-r border-border-primary' : '';\n          const mergeClasses = isOutlined && !isFirst ? '-ml-px' : '';\n          const hoverClasses = isOutlined ? 'relative hover:z-10' : '';\n\n          if (iconOnly) {\n            const iconBaseProps = {\n              className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),\n              icon: item.icon!,\n              onClick: item.onClick,\n              size,\n            };\n\n            return (\n              <ConditionalTooltip key={item.id} tooltip={item.tooltip}>\n                {variant === 'contained' ? (\n                  <IconButton {...iconBaseProps} color=\"assistive\" variant=\"contained\" />\n                ) : (\n                  <IconButton {...iconBaseProps} color=\"primary\" variant=\"outlined\" />\n                )}\n              </ConditionalTooltip>\n            );\n          }\n\n          const buttonBaseProps = {\n            className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),\n            icon: item.icon as React.ReactElement<{ className?: string }>,\n            onClick: item.onClick,\n            size,\n          };\n\n          return (\n            <ConditionalTooltip key={item.id} tooltip={item.tooltip}>\n              {variant === 'contained' ? (\n                <Button {...buttonBaseProps} color=\"assistive\" variant=\"contained\">\n                  {item.label}\n                </Button>\n              ) : (\n                <Button {...buttonBaseProps} color=\"primary\" variant=\"outlined\">\n                  {item.label}\n                </Button>\n              )}\n            </ConditionalTooltip>\n          );\n        })}\n      </div>\n    );\n  },\n) as ButtonGroupComponent;\n\nButtonGroup.displayName = 'ButtonGroup';\n\nexport { ButtonGroup };\nexport type { ButtonGroupComponent, ButtonGroupItem, ButtonGroupProps };\n"]}

package/dist/chunk-5TES5PG6.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/badge/Badge.tsx
+var badgeVariants = utils.cva(
+  "inline-flex items-center rounded-strong border px-[4px] text-body-3 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        accent: "border-transparent bg-solid-accent-default text-text-static-light",
+        "accent-disabled": "border-transparent bg-solid-accent-disabled text-text-inverse-disabled",
+        default: "border-transparent bg-elevation-elevation-3 text-text-secondary",
+        "default-disabled": "border-transparent bg-elevation-elevation-2 text-text-disabled"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = react.forwardRef(
+  ({ className, variant = "default", disabled = false, ...props }, ref) => {
+    const finalVariant = disabled ? `${variant}-disabled` : variant;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(badgeVariants({ variant: finalVariant }), className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+//# sourceMappingURL=chunk-5TES5PG6.js.map
+//# sourceMappingURL=chunk-5TES5PG6.js.map

package/dist/chunk-5TES5PG6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/Badge.tsx"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;;AAqBA,IAAM,aAAA,GAAgBA,SAAA;AAAA,EACpB,uKAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,MAAA,EAAQ,mEAAA;AAAA,QACR,iBAAA,EAAmB,wEAAA;AAAA,QACnB,OAAA,EAAS,iEAAA;AAAA,QACT,kBAAA,EAAoB;AAAA;AACtB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAaA,IAAM,KAAA,GAAQC,gBAAA;AAAA,EACZ,CAAC,EAAE,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,WAAW,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,YAAA,GAAe,QAAA,GAAY,CAAA,EAAG,OAAO,CAAA,SAAA,CAAA,GAAwB,OAAA;AAEnE,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAG,aAAA,CAAc,EAAE,SAAS,YAAA,EAAc,GAAG,SAAS,CAAA;AAAA,QAChE,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-5TES5PG6.js","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { forwardRef } from 'react';\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 배지 스타일 변형\n   * @default 'default'\n   */\n  variant?: 'default' | 'accent';\n  /**\n   * 비활성화 상태\n   * @default false\n   */\n  disabled?: boolean;\n}\n\ntype BadgeComponent = React.ForwardRefExoticComponent<\n  BadgeProps & React.RefAttributes<HTMLDivElement>\n>;\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-strong border px-[4px] text-body-3 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        accent: 'border-transparent bg-solid-accent-default text-text-static-light',\n        'accent-disabled': 'border-transparent bg-solid-accent-disabled text-text-inverse-disabled',\n        default: 'border-transparent bg-elevation-elevation-3 text-text-secondary',\n        'default-disabled': 'border-transparent bg-elevation-elevation-2 text-text-disabled',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * 상태나 카운트를 표시하는 배지 컴포넌트입니다.\n *\n * @example\n * ```tsx\n * <Badge variant=\"accent\">3</Badge>\n * <Badge variant=\"default\" disabled>0</Badge>\n * ```\n *\n * @see {@link BadgeProps} props 상세\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n  ({ className, variant = 'default', disabled = false, ...props }, ref) => {\n    const finalVariant = disabled ? (`${variant}-disabled` as const) : variant;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(badgeVariants({ variant: finalVariant }), className)}\n        {...props}\n      />\n    );\n  },\n) as BadgeComponent;\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\nexport type { BadgeComponent, BadgeProps };\n"]}

package/dist/chunk-5TVMECVF.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
+var utils = require('@exem-ui/core/utils');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+
+var containerVariants = utils.cva("inline-flex items-center", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    labelPosition: {
+      right: "flex-row",
+      left: "flex-row-reverse"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    labelPosition: "right"
+  }
+});
+var boxVariants = utils.cva(
+  "peer shrink-0 cursor-pointer rounded-weak border border-border-secondary ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed enabled:data-[state=unchecked]:hover:bg-elevation-elevation-2 disabled:data-[state=unchecked]:bg-elevation-elevation-3 bg-background-primary",
+  {
+    variants: {
+      size: {
+        small: "size-4",
+        medium: "size-5",
+        large: "size-6"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var labelVariants = utils.cva(
+  "cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled",
+  {
+    variants: {
+      size: {
+        small: "text-body-3",
+        medium: "text-body-2",
+        large: "text-body-1"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var iconVariants = utils.cva("text-icon-static-light", {
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6"
+    },
+    disabled: {
+      true: "text-icon-inverse-disabled"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var stateClasses = [
+  "data-[state=checked]:bg-solid-accent-default data-[state=checked]:border-transparent",
+  "data-[state=indeterminate]:bg-solid-accent-default data-[state=indeterminate]:border-transparent",
+  "enabled:data-[state=checked]:hover:bg-solid-accent-hovered enabled:data-[state=indeterminate]:hover:bg-solid-accent-hovered",
+  "enabled:data-[state=checked]:hover:border-transparent enabled:data-[state=indeterminate]:hover:border-transparent",
+  "disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=indeterminate]:bg-solid-accent-disabled",
+  "disabled:data-[state=checked]:border-transparent disabled:data-[state=indeterminate]:border-transparent"
+];
+var Checkbox = react.forwardRef(
+  ({
+    className,
+    label,
+    id,
+    size = "medium",
+    labelPosition = "right",
+    checked,
+    onCheckedChange,
+    disabled = false,
+    defaultChecked,
+    ...props
+  }, ref) => {
+    const uniqueId = react.useId();
+    const checkboxId = id || uniqueId;
+    const checkboxState = checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
+    const checkboxProps = {
+      ...props,
+      ref,
+      id: checkboxId,
+      className: utils.cn(boxVariants({ size }), stateClasses, className),
+      onCheckedChange: (state) => {
+        onCheckedChange?.(state === "indeterminate" ? true : !!state);
+      },
+      "data-state": checkboxState,
+      disabled
+    };
+    if (checked !== void 0) {
+      checkboxProps.checked = checked;
+    }
+    if (defaultChecked !== void 0) {
+      checkboxProps.defaultChecked = defaultChecked;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(containerVariants({ size, labelPosition })), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CheckboxPrimitive__namespace.Root,
+        {
+          ...checkboxProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: checkboxState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Minus, { type: "regular", className: utils.cn(iconVariants({ size, disabled })) }) : checkboxState === "checked" ? /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Check, { type: "regular", className: utils.cn(iconVariants({ size, disabled })) }) : null })
+        }
+      ),
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: checkboxId, className: utils.cn(labelVariants({ size })), children: label })
+    ] });
+  }
+);
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=chunk-5TVMECVF.js.map
+//# sourceMappingURL=chunk-5TVMECVF.js.map

package/dist/chunk-5TVMECVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox/Checkbox.tsx"],"names":["cva","forwardRef","useId","cn","jsxs","jsx","CheckboxPrimitive","Minus","Check"],"mappings":"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","file":"chunk-5TVMECVF.js","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport type React from 'react';\nimport { forwardRef, useId } from 'react';\nimport { CheckIcon, MinusIcon } from '../icon';\n\ntype CheckboxSize = 'small' | 'medium' | 'large';\n\ntype LabelPosition = 'left' | 'right';\n\ninterface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** 체크 상태. `'indeterminate'`는 부분 선택을 나타냅니다. */\n  checked?: boolean | 'indeterminate';\n  /** 체크박스 옆에 표시할 레이블 */\n  label?: React.ReactNode;\n  /** 추가 클래스명 */\n  className?: string;\n  /**\n   * 체크박스 크기\n   * @default 'medium'\n   */\n  size?: CheckboxSize;\n  /**\n   * 레이블 위치\n   * @default 'right'\n   */\n  labelPosition?: LabelPosition;\n  /** 체크 상태 변경 핸들러 */\n  onCheckedChange?: (checked: boolean) => void;\n  /** 초기 체크 상태 (비제어) */\n  defaultChecked?: boolean;\n  /**\n   * 비활성화 상태\n   * @default false\n   */\n  disabled?: boolean;\n}\n\ntype CheckboxComponent = React.ForwardRefExoticComponent<\n  CheckboxProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst containerVariants = cva('inline-flex items-center', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    labelPosition: {\n      right: 'flex-row',\n      left: 'flex-row-reverse',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    labelPosition: 'right',\n  },\n});\n\nconst boxVariants = cva(\n  'peer shrink-0 cursor-pointer rounded-weak border border-border-secondary ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed enabled:data-[state=unchecked]:hover:bg-elevation-elevation-2 disabled:data-[state=unchecked]:bg-elevation-elevation-3 bg-background-primary',\n  {\n    variants: {\n      size: {\n        small: 'size-4',\n        medium: 'size-5',\n        large: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\nconst labelVariants = cva(\n  'cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled',\n  {\n    variants: {\n      size: {\n        small: 'text-body-3',\n        medium: 'text-body-2',\n        large: 'text-body-1',\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\nconst iconVariants = cva('text-icon-static-light', {\n  variants: {\n    size: {\n      small: 'size-4',\n      medium: 'size-5',\n      large: 'size-6',\n    },\n    disabled: {\n      true: 'text-icon-inverse-disabled',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst stateClasses = [\n  'data-[state=checked]:bg-solid-accent-default data-[state=checked]:border-transparent',\n  'data-[state=indeterminate]:bg-solid-accent-default data-[state=indeterminate]:border-transparent',\n  'enabled:data-[state=checked]:hover:bg-solid-accent-hovered enabled:data-[state=indeterminate]:hover:bg-solid-accent-hovered',\n  'enabled:data-[state=checked]:hover:border-transparent enabled:data-[state=indeterminate]:hover:border-transparent',\n  'disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=indeterminate]:bg-solid-accent-disabled',\n  'disabled:data-[state=checked]:border-transparent disabled:data-[state=indeterminate]:border-transparent',\n];\n\n/**\n * 하나 이상의 항목을 선택하는 체크박스 컴포넌트입니다.\n * 체크, 미체크, indeterminate(부분 선택) 상태를 지원합니다.\n *\n * @example\n * ```tsx\n * // 기본 사용\n * <Checkbox label=\"이용 약관에 동의합니다\" />\n *\n * // 제어 컴포넌트\n * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} label=\"선택\" />\n *\n * // 부분 선택 상태\n * <Checkbox checked=\"indeterminate\" label=\"전체 선택\" />\n * ```\n *\n * @see {@link CheckboxProps} props 상세\n */\nconst Checkbox = forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  (\n    {\n      className,\n      label,\n      id,\n      size = 'medium',\n      labelPosition = 'right',\n      checked,\n      onCheckedChange,\n      disabled = false,\n      defaultChecked,\n      ...props\n    },\n    ref,\n  ) => {\n    const uniqueId = useId();\n    const checkboxId = id || uniqueId;\n\n    const checkboxState =\n      checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n    const checkboxProps: Record<string, unknown> = {\n      ...props,\n      ref,\n      id: checkboxId,\n      className: cn(boxVariants({ size }), stateClasses, className),\n      onCheckedChange: (state: boolean | 'indeterminate') => {\n        onCheckedChange?.(state === 'indeterminate' ? true : !!state);\n      },\n      'data-state': checkboxState,\n      disabled,\n    };\n\n    if (checked !== undefined) {\n      checkboxProps.checked = checked;\n    }\n\n    if (defaultChecked !== undefined) {\n      checkboxProps.defaultChecked = defaultChecked;\n    }\n\n    return (\n      <div className={cn(containerVariants({ size, labelPosition }))}>\n        <CheckboxPrimitive.Root\n          {...(checkboxProps as React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>)}\n        >\n          <CheckboxPrimitive.Indicator className=\"flex items-center justify-center\">\n            {checkboxState === 'indeterminate' ? (\n              <MinusIcon type=\"regular\" className={cn(iconVariants({ size, disabled }))} />\n            ) : checkboxState === 'checked' ? (\n              <CheckIcon type=\"regular\" className={cn(iconVariants({ size, disabled }))} />\n            ) : null}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n        {label && (\n          <label htmlFor={checkboxId} className={cn(labelVariants({ size }))}>\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n) as CheckboxComponent;\n\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\nexport type { CheckboxComponent, CheckboxProps };\n"]}

package/dist/chunk-5WGNZX7Z.mjs

@@ -0,0 +1,27 @@
+import { Tooltip } from './chunk-YVFLRPFV.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FlatTooltip = ({ children, title, size, description, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(Tooltip.Content, { size, ...props, children: [
+      title && /* @__PURE__ */ jsx(Tooltip.Title, { children: title }),
+      description && /* @__PURE__ */ jsx(Tooltip.Description, { children: description })
+    ] })
+  ] }) });
+};
+function ConditionalTooltip({ children, tooltip }) {
+  if (typeof tooltip === "string") {
+    return /* @__PURE__ */ jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
+  }
+  if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
+    return /* @__PURE__ */ jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
+  }
+  return children;
+}
+FlatTooltip.displayName = "FlatTooltip";
+ConditionalTooltip.displayName = "ConditionalTooltip";
+
+export { ConditionalTooltip, FlatTooltip };
+//# sourceMappingURL=chunk-5WGNZX7Z.mjs.map
+//# sourceMappingURL=chunk-5WGNZX7Z.mjs.map

package/dist/chunk-5WGNZX7Z.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flat/FlatTooltip.tsx"],"names":[],"mappings":";;;AAuCA,IAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAU,OAAO,IAAA,EAAM,WAAA,EAAa,GAAG,KAAA,EAAM,KAAwB;AAC1F,EAAA,uBACE,GAAA,CAAC,QAAQ,QAAA,EAAR,EAAiB,eAAe,CAAA,EAAG,iBAAA,EAAmB,CAAA,EACrD,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAS,CAAA;AAAA,yBAClC,OAAA,CAAQ,OAAA,EAAR,EAAgB,IAAA,EAAa,GAAG,KAAA,EAC9B,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,OAAA,CAAQ,KAAA,EAAR,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC/B,WAAA,oBAAe,GAAA,CAAC,OAAA,CAAQ,WAAA,EAAR,EAAqB,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EACpD;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAiDA,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAU,OAAA,EAAQ,EAA4B;AAC1E,EAAA,IAAI,OAAO,YAAY,QAAA,EAAU;AAC/B,IAAA,2BACG,WAAA,EAAA,EAAY,IAAA,EAAK,MAAA,EAAO,WAAA,EAAa,SACnC,QAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,OAAA,IAAW,OAAO,OAAA,KAAY,QAAA,IAAY,iBAAiB,OAAA,IAAW,OAAA,CAAQ,QAAQ,KAAA,EAAO;AAC/F,IAAA,uBACE,GAAA,CAAC,eAAY,IAAA,EAAM,OAAA,CAAQ,QAAQ,MAAA,EAAS,GAAG,SAC5C,QAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,QAAA;AACT;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAC1B,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"chunk-5WGNZX7Z.mjs","sourcesContent":["import type { ComponentProps } from 'react';\nimport { Tooltip } from '../tooltip/Tooltip';\n\ninterface FlatTooltipProps {\n  /** 툴팁을 적용할 자식 요소 */\n  children: React.ReactNode;\n  /** 툴팁 제목 (선택) */\n  title?: React.ReactNode;\n  /** 툴팁 크기 */\n  size: ComponentProps<typeof Tooltip.Content>['size'];\n  /** 툴팁 표시 위치 */\n  side?: ComponentProps<typeof Tooltip.Content>['side'];\n  /** 툴팁 정렬 */\n  align?: ComponentProps<typeof Tooltip.Content>['align'];\n  /** 사이드 방향 오프셋 (px) */\n  sideOffset?: ComponentProps<typeof Tooltip.Content>['sideOffset'];\n  /** 정렬 방향 오프셋 (px) */\n  alignOffset?: ComponentProps<typeof Tooltip.Content>['alignOffset'];\n  /** 툴팁 설명 텍스트 */\n  description: React.ReactNode;\n}\n\n/**\n * Tooltip 컴포넌트의 간소화된 Flat API입니다.\n * Compound Component 없이 props만으로 간편하게 사용할 수 있습니다.\n *\n * @example\n * ```tsx\n * <FlatTooltip size=\"small\" description=\"도움말 텍스트\">\n *   <button>호버하세요</button>\n * </FlatTooltip>\n *\n * <FlatTooltip size=\"tiny\" title=\"제목\" description=\"설명\">\n *   <span>정보</span>\n * </FlatTooltip>\n * ```\n *\n * @see {@link FlatTooltipProps} props 상세\n */\nconst FlatTooltip = ({ children, title, size, description, ...props }: FlatTooltipProps) => {\n  return (\n    <Tooltip.Provider delayDuration={0} skipDelayDuration={0}>\n      <Tooltip>\n        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>\n        <Tooltip.Content size={size} {...props}>\n          {title && <Tooltip.Title>{title}</Tooltip.Title>}\n          {description && <Tooltip.Description>{description}</Tooltip.Description>}\n        </Tooltip.Content>\n      </Tooltip>\n    </Tooltip.Provider>\n  );\n};\n\n/** FlatTooltip 설정 객체 타입 (children 제외) */\ntype TooltipConfig = Omit<ComponentProps<typeof FlatTooltip>, 'children' | 'size'> & {\n  /**\n   * 툴팁 사용 여부\n   * @default true\n   */\n  use?: boolean;\n  size?: ComponentProps<typeof FlatTooltip>['size'];\n};\n\ninterface ConditionalTooltipProps {\n  /** 툴팁으로 감쌀 자식 요소 */\n  children: React.ReactNode;\n  /**\n   * 툴팁 설정값\n   * - `string`: 기본 tiny 사이즈의 툴팁 description으로 사용\n   * - `object`: FlatTooltip props를 직접 전달 (`use: false`로 비활성화 가능)\n   */\n  tooltip: ComponentProps<typeof FlatTooltip>['description'] | TooltipConfig;\n}\n\n/**\n * 조건부로 FlatTooltip을 적용하는 래퍼 컴포넌트입니다.\n *\n * @description\n * tooltip prop의 타입에 따라 다르게 동작합니다:\n * - `string`: tiny 사이즈의 기본 툴팁으로 렌더링\n * - `object` (`use !== false`): 전달된 props로 FlatTooltip 렌더링\n * - `object` (`use === false`) 또는 기타: children만 반환 (툴팁 없음)\n *\n * @example\n * ```tsx\n * <ConditionalTooltip tooltip=\"도움말 텍스트\">\n *   <button>버튼</button>\n * </ConditionalTooltip>\n *\n * <ConditionalTooltip tooltip={{ description: \"설명\", size: \"small\", side: \"top\" }}>\n *   <button>버튼</button>\n * </ConditionalTooltip>\n *\n * <ConditionalTooltip tooltip={{ use: false, description: \"\" }}>\n *   <button>툴팁 없음</button>\n * </ConditionalTooltip>\n * ```\n *\n * @see {@link ConditionalTooltipProps} props 상세\n */\nfunction ConditionalTooltip({ children, tooltip }: ConditionalTooltipProps) {\n  if (typeof tooltip === 'string') {\n    return (\n      <FlatTooltip size=\"tiny\" description={tooltip}>\n        {children}\n      </FlatTooltip>\n    );\n  }\n\n  if (tooltip && typeof tooltip === 'object' && 'description' in tooltip && tooltip.use !== false) {\n    return (\n      <FlatTooltip size={tooltip.size || 'tiny'} {...tooltip}>\n        {children}\n      </FlatTooltip>\n    );\n  }\n\n  return children;\n}\n\nFlatTooltip.displayName = 'FlatTooltip';\nConditionalTooltip.displayName = 'ConditionalTooltip';\n\nexport { FlatTooltip, ConditionalTooltip };\nexport type { FlatTooltipProps, ConditionalTooltipProps, TooltipConfig };\n"]}

package/dist/chunk-AQ3OIM2T.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var chunkREBHUF4L_js = require('./chunk-REBHUF4L.js');
+var utils = require('@exem-ui/core/utils');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+
+var MessageBoxContext = react.createContext({ variant: "default" });
+var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
+var MessageBox = MessageBoxRoot;
+MessageBox.Trigger = DialogPrimitive__namespace.Trigger;
+MessageBox.Content = react.forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      className: utils.cn(
+        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: utils.cn(
+        "fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }) }));
+MessageBox.Title = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: utils.cn("w-full text-title-2 font-semibold text-text-primary", className),
+    ...props
+  }
+));
+MessageBox.Description = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: utils.cn("w-full text-body-2 text-text-secondary", className),
+    ...props
+  }
+));
+MessageBox.Actions = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("flex flex-row gap-2", className), ...props })
+);
+MessageBox.Cancel = react.forwardRef(
+  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkREBHUF4L_js.Button, { ref, color: "assistive", variant: "contained", size, ...props }) })
+);
+MessageBox.Action = react.forwardRef(
+  ({ size = "medium", ...props }, ref) => {
+    const { variant } = react.useContext(MessageBoxContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkREBHUF4L_js.Button,
+      {
+        ref,
+        color: variant === "critical" ? "critical" : "primary",
+        variant: "contained",
+        size,
+        ...props
+      }
+    ) });
+  }
+);
+MessageBox.displayName = "MessageBox";
+MessageBox.Trigger.displayName = "MessageBox.Trigger";
+MessageBox.Content.displayName = "MessageBox.Content";
+MessageBox.Title.displayName = "MessageBox.Title";
+MessageBox.Description.displayName = "MessageBox.Description";
+MessageBox.Actions.displayName = "MessageBox.Actions";
+MessageBox.Cancel.displayName = "MessageBox.Cancel";
+MessageBox.Action.displayName = "MessageBox.Action";
+
+exports.MessageBox = MessageBox;
+//# sourceMappingURL=chunk-AQ3OIM2T.js.map
+//# sourceMappingURL=chunk-AQ3OIM2T.js.map

package/dist/chunk-AQ3OIM2T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/messageBox/MessageBox.tsx"],"names":["createContext","DialogPrimitive","forwardRef","jsx","jsxs","cn","Button","useContext"],"mappings":"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","file":"chunk-AQ3OIM2T.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\nimport type { ButtonProps } from '../button/Button';\nimport { Button } from '../button/Button';\n\ntype MessageBoxVariant = 'default' | 'critical';\n\ntype MessageBoxRootProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\n\ntype MessageBoxTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\ntype MessageBoxContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  /**\n   * 메시지 박스 variant\n   * @default 'default'\n   */\n  variant?: MessageBoxVariant;\n};\n\ntype MessageBoxTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\ntype MessageBoxDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\ntype MessageBoxActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;\n\ntype MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;\n\ntype MessageBoxComponent = React.FC<MessageBoxRootProps> & {\n  Trigger: typeof DialogPrimitive.Trigger;\n  Content: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxContentProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Content>>\n  >;\n  Title: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxTitleProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Title>>\n  >;\n  Description: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxDescriptionProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Description>>\n  >;\n  Actions: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxActionsProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  Cancel: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxCancelProps> & React.RefAttributes<HTMLButtonElement>\n  >;\n  Action: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<MessageBoxActionProps> & React.RefAttributes<HTMLButtonElement>\n  >;\n};\n\nconst MessageBoxContext = createContext<{ variant: MessageBoxVariant }>({ variant: 'default' });\n\n/**\n * 확인/경고 다이얼로그 컴포넌트입니다.\n * Modal보다 단순한 구조로, title + description + 버튼(취소/확인)으로 구성됩니다.\n *\n * @example\n * ```tsx\n * <MessageBox>\n *   <MessageBox.Trigger>열기</MessageBox.Trigger>\n *   <MessageBox.Content variant=\"default\">\n *     <MessageBox.Title>상태를 확인하시겠습니까?</MessageBox.Title>\n *     <MessageBox.Description>현재 상태에 대한 추가 확인이 필요합니다.</MessageBox.Description>\n *     <MessageBox.Actions>\n *       <MessageBox.Cancel>취소</MessageBox.Cancel>\n *       <MessageBox.Action>확인</MessageBox.Action>\n *     </MessageBox.Actions>\n *   </MessageBox.Content>\n * </MessageBox>\n * ```\n */\nconst MessageBoxRoot: React.FC<MessageBoxRootProps> = (props) => (\n  <DialogPrimitive.Root {...props} />\n);\n\nconst MessageBox = MessageBoxRoot as MessageBoxComponent;\n\nMessageBox.Trigger = DialogPrimitive.Trigger;\n\nMessageBox.Content = forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  MessageBoxContentProps\n>(({ className, children, variant = 'default', ...props }, ref) => (\n  <MessageBoxContext.Provider value={{ variant }}>\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className={cn(\n          'fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        )}\n      />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  </MessageBoxContext.Provider>\n)) as MessageBoxComponent['Content'];\n\nMessageBox.Title = forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  MessageBoxTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('w-full text-title-2 font-semibold text-text-primary', className)}\n    {...props}\n  />\n)) as MessageBoxComponent['Title'];\n\nMessageBox.Description = forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  MessageBoxDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('w-full text-body-2 text-text-secondary', className)}\n    {...props}\n  />\n)) as MessageBoxComponent['Description'];\n\nMessageBox.Actions = forwardRef<HTMLDivElement, MessageBoxActionsProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-row gap-2', className)} {...props} />\n  ),\n) as MessageBoxComponent['Actions'];\n\nMessageBox.Cancel = forwardRef<HTMLButtonElement, MessageBoxCancelProps>(\n  ({ size = 'medium', ...props }, ref) => (\n    <DialogPrimitive.Close asChild>\n      <Button ref={ref} color=\"assistive\" variant=\"contained\" size={size} {...props} />\n    </DialogPrimitive.Close>\n  ),\n) as MessageBoxComponent['Cancel'];\n\nMessageBox.Action = forwardRef<HTMLButtonElement, MessageBoxActionProps>(\n  ({ size = 'medium', ...props }, ref) => {\n    const { variant } = useContext(MessageBoxContext);\n\n    return (\n      <DialogPrimitive.Close asChild>\n        <Button\n          ref={ref}\n          color={variant === 'critical' ? 'critical' : 'primary'}\n          variant=\"contained\"\n          size={size}\n          {...props}\n        />\n      </DialogPrimitive.Close>\n    );\n  },\n) as MessageBoxComponent['Action'];\n\nMessageBox.displayName = 'MessageBox';\nMessageBox.Trigger.displayName = 'MessageBox.Trigger';\nMessageBox.Content.displayName = 'MessageBox.Content';\nMessageBox.Title.displayName = 'MessageBox.Title';\nMessageBox.Description.displayName = 'MessageBox.Description';\nMessageBox.Actions.displayName = 'MessageBox.Actions';\nMessageBox.Cancel.displayName = 'MessageBox.Cancel';\nMessageBox.Action.displayName = 'MessageBox.Action';\n\nexport { MessageBox };\nexport type {\n  MessageBoxActionProps,\n  MessageBoxActionsProps,\n  MessageBoxCancelProps,\n  MessageBoxComponent,\n  MessageBoxContentProps,\n  MessageBoxDescriptionProps,\n  MessageBoxRootProps,\n  MessageBoxTitleProps,\n  MessageBoxTriggerProps,\n  MessageBoxVariant,\n};\n"]}