@exem-ui/react 0.1.0

package/dist/chunk-RGB3QLQT.js

@@ -0,0 +1,275 @@
+'use strict';
+
+var chunkFOMIUDRM_js = require('./chunk-FOMIUDRM.js');
+var chunkREBHUF4L_js = require('./chunk-REBHUF4L.js');
+var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.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 MODAL_PADDING = {
+  body: "px-4 pb-4",
+  footer: "px-4 py-3"
+};
+var ModalContext = react.createContext({ size: "medium" });
+var Modal = DialogPrimitive__namespace.Root;
+Modal.Trigger = DialogPrimitive__namespace.Trigger;
+Modal.Portal = DialogPrimitive__namespace.Portal;
+Modal.Close = react.forwardRef(({ size, ...props }, ref) => {
+  const { size: modalSize } = react.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    chunkREBHUF4L_js.Button,
+    {
+      ...props,
+      ref,
+      color: "assistive",
+      variant: "contained",
+      size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+    }
+  ) });
+});
+Modal.Overlay = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      ref,
+      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",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Modal.Content = react.forwardRef(
+  ({ className, children, size = "medium", onInteractOutside, onFocusOutside, ...props }, ref) => {
+    const isFullSize = size === "fullsize";
+    const sizeWidthMap = {
+      small: "max-w-[640px]",
+      medium: "max-w-[800px]",
+      large: "max-w-[960px]",
+      xlarge: "max-w-[1120px]"
+    };
+    const shouldPreventDismissForSelect = (target) => {
+      const isSelectOpen = Boolean(
+        document.querySelector('[data-radix-select-content][data-state="open"]')
+      );
+      if (isSelectOpen) {
+        return true;
+      }
+      if (!(target instanceof Element)) {
+        return false;
+      }
+      return Boolean(
+        target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
+      );
+    };
+    const handleInteractOutside = (event) => {
+      if (shouldPreventDismissForSelect(event.target)) {
+        event.preventDefault();
+      }
+      onInteractOutside?.(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Modal.Overlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DialogPrimitive__namespace.Content,
+        {
+          ref,
+          className: utils.cn(
+            // 공통 스타일
+            "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-elevation-elevation-0 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            // fullsize일 때
+            isFullSize ? "inset-0 m-10" : (
+              // 일반 모달일 때
+              utils.cn(
+                "left-[50%] top-[50%] w-full max-h-[90vh] translate-x-[-50%] translate-y-[-50%] shadow-strong 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%]",
+                sizeWidthMap[size]
+              )
+            ),
+            className
+          ),
+          ...props,
+          onInteractOutside: handleInteractOutside,
+          children
+        }
+      )
+    ] }) });
+  }
+);
+Modal.Header = react.forwardRef(
+  ({ className, line = false, showCloseIcon = true, children, ...props }, ref) => {
+    const { size } = react.useContext(ModalContext);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "flex shrink-0 flex-row items-center gap-2 pl-4 pr-3",
+          line && "border-b border-border-primary",
+          size === "fullsize" ? "h-16" : "h-14",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
+          showCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            DialogPrimitive__namespace.Close,
+            {
+              className: utils.cn(
+                "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.X, { type: "regular", size: 20 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Modal.Body = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex-1 flex flex-col min-h-0 h-full",
+        "[&_[data-slot=scroll-area-viewport]>div]:h-full"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunkFOMIUDRM_js.ScrollArea, { className: "h-full flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(MODAL_PADDING.body, className), children }) })
+    }
+  )
+);
+Modal.Footer = react.forwardRef(
+  ({ className, line = true, ...props }, ref) => {
+    const { size } = react.useContext(ModalContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "flex flex-row items-center justify-between",
+          line && "border-t border-border-primary",
+          size === "fullsize" ? "gap-3" : "h-14 gap-3",
+          MODAL_PADDING.footer,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Modal.FooterDescription = react.forwardRef(
+  ({ className, error = false, icon, children, ...props }, ref) => {
+    const { size } = react.useContext(ModalContext);
+    const isLargeFooter = size === "fullsize";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "flex flex-row items-center gap-1",
+          isLargeFooter ? "text-body-2" : "text-body-3",
+          error ? "text-text-critical" : "text-text-tertiary",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Modal.Actions = react.forwardRef(({ className, ...props }, ref) => {
+  const { size } = react.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "ml-auto flex flex-row items-center",
+        size === "fullsize" ? "gap-3" : "gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Modal.Action = react.forwardRef(
+  ({ color = "primary", size, ...props }, ref) => {
+    const { size: modalSize } = react.useContext(ModalContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkREBHUF4L_js.Button,
+      {
+        ...props,
+        ref,
+        color,
+        variant: "contained",
+        size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+      }
+    ) });
+  }
+);
+Modal.Title = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      ref,
+      className: utils.cn(
+        "text-title-2 font-semibold leading-none tracking-tight text-text-primary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Modal.Description = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: utils.cn("text-body-2 text-text-tertiary", className),
+    ...props
+  }
+));
+Modal.displayName = "Modal";
+Modal.Trigger.displayName = "Modal.Trigger";
+Modal.Portal.displayName = "Modal.Portal";
+Modal.Close.displayName = "Modal.Close";
+Modal.Overlay.displayName = "Modal.Overlay";
+Modal.Content.displayName = "Modal.Content";
+Modal.Header.displayName = "Modal.Header";
+Modal.Body.displayName = "Modal.Body";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.FooterDescription.displayName = "Modal.FooterDescription";
+Modal.Actions.displayName = "Modal.Actions";
+Modal.Action.displayName = "Modal.Action";
+Modal.Title.displayName = "Modal.Title";
+Modal.Description.displayName = "Modal.Description";
+
+exports.Modal = Modal;
+//# sourceMappingURL=chunk-RGB3QLQT.js.map
+//# sourceMappingURL=chunk-RGB3QLQT.js.map

package/dist/chunk-RGB3QLQT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal/Modal.tsx"],"names":["createContext","DialogPrimitive","forwardRef","useContext","jsx","Button","cn","jsxs","X","ScrollArea"],"mappings":"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","file":"chunk-RGB3QLQT.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';\nimport { XIcon } from '../icon';\nimport { ScrollArea } from '../scrollArea/ScrollArea';\n\ntype ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullsize';\n\ntype ModalRootProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\n\ntype ModalTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\ntype ModalPortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;\n\ntype ModalOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\n\ntype ModalContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  /**\n   * 모달 크기\n   * @default 'medium'\n   */\n  size?: ModalSize;\n};\n\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ntype InteractOutsideEvent = Parameters<NonNullable<DialogContentProps['onInteractOutside']>>[0];\n\ntype ModalCloseProps = Omit<ButtonProps, 'color' | 'variant'>;\n\ntype ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * 하단 구분선 표시 여부\n   * @default false\n   */\n  line?: boolean;\n  /**\n   * 닫기 아이콘 표시 여부\n   * @default true\n   */\n  showCloseIcon?: boolean;\n};\n\ntype ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * 상단 구분선 표시 여부\n   * @default true\n   */\n  line?: boolean;\n};\n\ntype ModalFooterDescriptionProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** 에러 상태 표시 여부 */\n  error?: boolean;\n  /** 설명 앞에 표시할 아이콘 요소 */\n  icon?: React.ReactNode;\n};\n\ntype ModalActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype ModalActionProps = Omit<ButtonProps, 'color' | 'variant'> & {\n  /**\n   * 버튼 색상\n   * @default 'primary'\n   */\n  color?: 'primary' | 'critical';\n};\n\ntype ModalTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\ntype ModalDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\n\ntype ModalComponent = typeof DialogPrimitive.Root & {\n  Trigger: typeof DialogPrimitive.Trigger;\n  Portal: typeof DialogPrimitive.Portal;\n  Close: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalCloseProps> & React.RefAttributes<HTMLButtonElement>\n  >;\n  Overlay: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalOverlayProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Overlay>>\n  >;\n  Content: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalContentProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Content>>\n  >;\n  Header: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalHeaderProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  Body: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalBodyProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  Footer: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalFooterProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  FooterDescription: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalFooterDescriptionProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  Actions: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalActionsProps> & React.RefAttributes<HTMLDivElement>\n  >;\n  Action: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalActionProps> & React.RefAttributes<HTMLButtonElement>\n  >;\n  Title: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalTitleProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Title>>\n  >;\n  Description: React.ForwardRefExoticComponent<\n    React.PropsWithoutRef<ModalDescriptionProps> &\n      React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Description>>\n  >;\n};\n\nconst MODAL_PADDING = {\n  body: 'px-4 pb-4',\n  footer: 'px-4 py-3',\n};\n\nconst ModalContext = createContext<{ size: ModalSize }>({ size: 'medium' });\n\n/**\n * 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.\n * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Modal>\n *   <Modal.Trigger>열기</Modal.Trigger>\n *   <Modal.Content size=\"medium\">\n *     <Modal.Header>\n *       <Modal.Title>제목</Modal.Title>\n *     </Modal.Header>\n *     <Modal.Body>내용</Modal.Body>\n *     <Modal.Footer>\n *       <Modal.Actions>\n *         <Modal.Close>닫기</Modal.Close>\n *       </Modal.Actions>\n *     </Modal.Footer>\n *   </Modal.Content>\n * </Modal>\n * ```\n *\n * @see {@link ModalContentProps} Content props 상세\n */\nconst Modal = DialogPrimitive.Root as ModalComponent;\n\nModal.Trigger = DialogPrimitive.Trigger;\n\nModal.Portal = DialogPrimitive.Portal;\n\nModal.Close = forwardRef<HTMLButtonElement, ModalCloseProps>(({ size, ...props }, ref) => {\n  const { size: modalSize } = useContext(ModalContext);\n\n  return (\n    <DialogPrimitive.Close asChild>\n      <Button\n        {...props}\n        ref={ref}\n        color=\"assistive\"\n        variant=\"contained\"\n        size={size ?? (modalSize === 'fullsize' ? 'large' : 'medium')}\n      />\n    </DialogPrimitive.Close>\n  );\n}) as ModalComponent['Close'];\n\nModal.Overlay = forwardRef<React.ComponentRef<typeof DialogPrimitive.Overlay>, ModalOverlayProps>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Overlay\n      ref={ref}\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        className,\n      )}\n      {...props}\n    />\n  ),\n) as ModalComponent['Overlay'];\n\nModal.Content = forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, ModalContentProps>(\n  ({ className, children, size = 'medium', onInteractOutside, onFocusOutside, ...props }, ref) => {\n    const isFullSize = size === 'fullsize';\n\n    const sizeWidthMap: Record<Exclude<ModalSize, 'fullsize'>, string> = {\n      small: 'max-w-[640px]',\n      medium: 'max-w-[800px]',\n      large: 'max-w-[960px]',\n      xlarge: 'max-w-[1120px]',\n    };\n\n    const shouldPreventDismissForSelect = (target: EventTarget | null) => {\n      const isSelectOpen = Boolean(\n        document.querySelector('[data-radix-select-content][data-state=\"open\"]'),\n      );\n      if (isSelectOpen) {\n        return true;\n      }\n\n      if (!(target instanceof Element)) {\n        return false;\n      }\n\n      return Boolean(\n        target.closest('[data-radix-select-content]') ||\n          target.closest('[data-radix-select-viewport]'),\n      );\n    };\n\n    const handleInteractOutside = (event: InteractOutsideEvent) => {\n      // Select가 열려있는 경우: Modal 닫힘 방지\n      if (shouldPreventDismissForSelect(event.target)) {\n        event.preventDefault();\n      }\n\n      onInteractOutside?.(event);\n    };\n\n    return (\n      <ModalContext.Provider value={{ size }}>\n        <Modal.Portal>\n          <Modal.Overlay />\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              // 공통 스타일\n              'fixed z-50 flex flex-col rounded-strong border border-border-primary bg-elevation-elevation-0 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              // fullsize일 때\n              isFullSize\n                ? 'inset-0 m-10'\n                : // 일반 모달일 때\n                  cn(\n                    'left-[50%] top-[50%] w-full max-h-[90vh] translate-x-[-50%] translate-y-[-50%] shadow-strong 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                    sizeWidthMap[size],\n                  ),\n              className,\n            )}\n            {...props}\n            onInteractOutside={handleInteractOutside}\n          >\n            {children}\n          </DialogPrimitive.Content>\n        </Modal.Portal>\n      </ModalContext.Provider>\n    );\n  },\n) as ModalComponent['Content'];\n\nModal.Header = forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ className, line = false, showCloseIcon = true, children, ...props }, ref) => {\n    const { size } = useContext(ModalContext);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex shrink-0 flex-row items-center gap-2 pl-4 pr-3',\n          line && 'border-b border-border-primary',\n          size === 'fullsize' ? 'h-16' : 'h-14',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex flex-1 flex-row items-center gap-1\">{children}</div>\n        {showCloseIcon && (\n          <DialogPrimitive.Close\n            className={cn(\n              'flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none',\n            )}\n          >\n            <XIcon type=\"regular\" size={20} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n) as ModalComponent['Header'];\n\nModal.Body = forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex-1 flex flex-col min-h-0 h-full',\n        '[&_[data-slot=scroll-area-viewport]>div]:h-full',\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"h-full flex flex-col\">\n        <div className={cn(MODAL_PADDING.body, className)}>{children}</div>\n      </ScrollArea>\n    </div>\n  ),\n) as ModalComponent['Body'];\n\nModal.Footer = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ className, line = true, ...props }, ref) => {\n    const { size } = useContext(ModalContext);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-row items-center justify-between',\n          line && 'border-t border-border-primary',\n          size === 'fullsize' ? 'gap-3' : 'h-14 gap-3',\n          MODAL_PADDING.footer,\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n) as ModalComponent['Footer'];\n\nModal.FooterDescription = forwardRef<HTMLDivElement, ModalFooterDescriptionProps>(\n  ({ className, error = false, icon, children, ...props }, ref) => {\n    const { size } = useContext(ModalContext);\n    const isLargeFooter = size === 'fullsize';\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-row items-center gap-1',\n          isLargeFooter ? 'text-body-2' : 'text-body-3',\n          error ? 'text-text-critical' : 'text-text-tertiary',\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 size-4 items-center justify-center [&>svg]:size-4\">\n            {icon}\n          </span>\n        )}\n        {children}\n      </div>\n    );\n  },\n) as ModalComponent['FooterDescription'];\n\nModal.Actions = forwardRef<HTMLDivElement, ModalActionsProps>(({ className, ...props }, ref) => {\n  const { size } = useContext(ModalContext);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'ml-auto flex flex-row items-center',\n        size === 'fullsize' ? 'gap-3' : 'gap-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}) as ModalComponent['Actions'];\n\nModal.Action = forwardRef<HTMLButtonElement, ModalActionProps>(\n  ({ color = 'primary', size, ...props }, ref) => {\n    const { size: modalSize } = useContext(ModalContext);\n\n    return (\n      <DialogPrimitive.Close asChild>\n        <Button\n          {...props}\n          ref={ref}\n          color={color}\n          variant=\"contained\"\n          size={size ?? (modalSize === 'fullsize' ? 'large' : 'medium')}\n        />\n      </DialogPrimitive.Close>\n    );\n  },\n) as ModalComponent['Action'];\n\nModal.Title = forwardRef<React.ComponentRef<typeof DialogPrimitive.Title>, ModalTitleProps>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\n        'text-title-2 font-semibold leading-none tracking-tight text-text-primary',\n        className,\n      )}\n      {...props}\n    />\n  ),\n) as ModalComponent['Title'];\n\nModal.Description = forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  ModalDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-body-2 text-text-tertiary', className)}\n    {...props}\n  />\n)) as ModalComponent['Description'];\n\nModal.displayName = 'Modal';\nModal.Trigger.displayName = 'Modal.Trigger';\nModal.Portal.displayName = 'Modal.Portal';\nModal.Close.displayName = 'Modal.Close';\nModal.Overlay.displayName = 'Modal.Overlay';\nModal.Content.displayName = 'Modal.Content';\nModal.Header.displayName = 'Modal.Header';\nModal.Body.displayName = 'Modal.Body';\nModal.Footer.displayName = 'Modal.Footer';\nModal.FooterDescription.displayName = 'Modal.FooterDescription';\nModal.Actions.displayName = 'Modal.Actions';\nModal.Action.displayName = 'Modal.Action';\nModal.Title.displayName = 'Modal.Title';\nModal.Description.displayName = 'Modal.Description';\n\nexport { Modal };\nexport type {\n  ModalComponent,\n  ModalRootProps,\n  ModalTriggerProps,\n  ModalPortalProps,\n  ModalOverlayProps,\n  ModalContentProps,\n  ModalCloseProps,\n  ModalHeaderProps,\n  ModalBodyProps,\n  ModalFooterProps,\n  ModalFooterDescriptionProps,\n  ModalActionsProps,\n  ModalActionProps,\n  ModalTitleProps,\n  ModalDescriptionProps,\n};\n"]}

package/dist/chunk-T7U2QRLC.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+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 TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+
+// src/tooltip/Tooltip.tsx
+var tooltipContentVariants = utils.cva(
+  [
+    // Base layout
+    "z-50 flex flex-col items-start overflow-hidden",
+    "rounded-medium",
+    "text-text-static-light",
+    "bg-component-tooltip border border-border-primary",
+    "shadow-medium",
+    "animate-in fade-in-0 zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2",
+    "data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {
+      size: {
+        tiny: "px-2 py-1 text-body-3",
+        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
+        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
+        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
+        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
+      }
+    },
+    defaultVariants: { size: "small" }
+  }
+);
+var tooltipTitleVariants = utils.cva([
+  "text-body-1 font-semibold text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var tooltipTextVariants = utils.cva([
+  "text-body-2 font-regular text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var Tooltip = TooltipPrimitive__namespace.Root;
+Tooltip.Provider = TooltipPrimitive__namespace.Provider;
+Tooltip.Trigger = TooltipPrimitive__namespace.Trigger;
+Tooltip.Content = react.forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    "data-size": size,
+    className: utils.cn("group/tooltip-content", tooltipContentVariants({ size }), className),
+    ...props,
+    children
+  }
+) }));
+Tooltip.Title = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTitleVariants(), className), ...props, children })
+);
+Tooltip.Description = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTextVariants(), className), ...props, children })
+);
+Tooltip.displayName = "Tooltip";
+Tooltip.Content.displayName = "Tooltip.Content";
+Tooltip.Title.displayName = "Tooltip.Title";
+Tooltip.Description.displayName = "Tooltip.Description";
+Tooltip.Trigger.displayName = "Tooltip.Trigger";
+Tooltip.Provider.displayName = "Tooltip.Provider";
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=chunk-T7U2QRLC.js.map
+//# sourceMappingURL=chunk-T7U2QRLC.js.map

package/dist/chunk-T7U2QRLC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/Tooltip.tsx"],"names":["cva","TooltipPrimitive","forwardRef","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,sBAAA,GAAyBA,SAAA;AAAA,EAC7B;AAAA;AAAA,IAEE,gDAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,mDAAA;AAAA,IACA,eAAA;AAAA,IACA,iCAAA;AAAA,IACA,gGAAA;AAAA,IACA,wCAAA;AAAA,IACA,wCAAA;AAAA,IACA,wCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO,yCAAA;AAAA,QACP,MAAA,EAAQ,yCAAA;AAAA,QACR,KAAA,EAAO,yCAAA;AAAA,QACP,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA;AAAQ;AAErC,CAAA;AAEA,IAAM,uBAAuBA,SAAA,CAAI;AAAA,EAC/B,kDAAA;AAAA,EACA;AACF,CAAC,CAAA;AAED,IAAM,sBAAsBA,SAAA,CAAI;AAAA,EAC9B,iDAAA;AAAA,EACA;AACF,CAAC,CAAA;AAED,IAAM,OAAA,GAA2BC,2BAAA,CAAA;AAEjC,OAAA,CAAQ,QAAA,GAA4BA,2BAAA,CAAA,QAAA;AAEpC,OAAA,CAAQ,OAAA,GAA2BA,2BAAA,CAAA,OAAA;AAEnC,OAAA,CAAQ,UAAUC,gBAAA,CAGhB,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,GAAG,IAAA,EAAM,QAAA,EAAU,eAAA,EAAiB,GAAG,OAAM,EAAG,GAAA,oCACzDD,2BAAA,CAAA,MAAA,EAAjB,EAAwB,WAAW,eAAA,EAClC,QAAA,kBAAAE,cAAA;AAAA,EAAkBF,2BAAA,CAAA,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAWG,SAAG,uBAAA,EAAyB,sBAAA,CAAuB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,IACjF,GAAG,KAAA;AAAA,IAEH;AAAA;AACH,CAAA,EACF,CACD,CAAA;AAED,OAAA,CAAQ,KAAA,GAAQF,gBAAA;AAAA,EACd,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,qBAClCC,cAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAWC,SAAG,oBAAA,EAAqB,EAAG,SAAS,CAAA,EAAI,GAAG,OAClE,QAAA,EACH;AAEJ,CAAA;AAEA,OAAA,CAAQ,WAAA,GAAcF,gBAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,qBAClCC,cAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAWC,SAAG,mBAAA,EAAoB,EAAG,SAAS,CAAA,EAAI,GAAG,OACjE,QAAA,EACH;AAEJ,CAAA;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AACtB,OAAA,CAAQ,QAAQ,WAAA,GAAc,iBAAA;AAC9B,OAAA,CAAQ,MAAM,WAAA,GAAc,eAAA;AAC5B,OAAA,CAAQ,YAAY,WAAA,GAAc,qBAAA;AAClC,OAAA,CAAQ,QAAQ,WAAA,GAAc,iBAAA;AAC9B,OAAA,CAAQ,SAAS,WAAA,GAAc,kBAAA","file":"chunk-T7U2QRLC.js","sourcesContent":["import { cn, cva, type VariantProps } from '@exem-ui/core/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type React from 'react';\nimport { forwardRef } from 'react';\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &\n  VariantProps<typeof tooltipContentVariants> & {\n    portalContainer?: HTMLElement | null;\n  };\n\ntype TooltipTitleProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype TooltipDescriptionProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype TooltipComponent = typeof TooltipPrimitive.Root & {\n  Provider: typeof TooltipPrimitive.Provider;\n  Trigger: typeof TooltipPrimitive.Trigger;\n  Content: React.ForwardRefExoticComponent<\n    TooltipContentProps & React.RefAttributes<React.ElementRef<typeof TooltipPrimitive.Content>>\n  >;\n  Title: React.ForwardRefExoticComponent<TooltipTitleProps & React.RefAttributes<HTMLDivElement>>;\n  Description: React.ForwardRefExoticComponent<\n    TooltipDescriptionProps & React.RefAttributes<HTMLDivElement>\n  >;\n};\n\nconst tooltipContentVariants = cva(\n  [\n    // Base layout\n    'z-50 flex flex-col items-start overflow-hidden',\n    'rounded-medium',\n    'text-text-static-light',\n    'bg-component-tooltip border border-border-primary',\n    'shadow-medium',\n    'animate-in fade-in-0 zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'data-[side=bottom]:slide-in-from-top-2',\n    'data-[side=left]:slide-in-from-right-2',\n    'data-[side=right]:slide-in-from-left-2',\n    'data-[side=top]:slide-in-from-bottom-2',\n  ],\n  {\n    variants: {\n      size: {\n        tiny: 'px-2 py-1 text-body-3',\n        small: 'w-[160px] gap-[8px] px-[12px] py-[10px]',\n        medium: 'w-[240px] gap-[8px] px-[12px] py-[10px]',\n        large: 'w-[320px] gap-[8px] px-[12px] py-[10px]',\n        xlarge: 'w-[400px] gap-[8px] px-[12px] py-[10px]',\n      },\n    },\n    defaultVariants: { size: 'small' },\n  },\n);\n\nconst tooltipTitleVariants = cva([\n  'text-body-1 font-semibold text-text-static-light',\n  'group-data-[size=tiny]/tooltip-content:text-body-3',\n]);\n\nconst tooltipTextVariants = cva([\n  'text-body-2 font-regular text-text-static-light',\n  'group-data-[size=tiny]/tooltip-content:text-body-3',\n]);\n\nconst Tooltip = TooltipPrimitive.Root as TooltipComponent;\n\nTooltip.Provider = TooltipPrimitive.Provider;\n\nTooltip.Trigger = TooltipPrimitive.Trigger;\n\nTooltip.Content = forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => (\n  <TooltipPrimitive.Portal container={portalContainer}>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      data-size={size}\n      className={cn('group/tooltip-content', tooltipContentVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n)) as TooltipComponent['Content'];\n\nTooltip.Title = forwardRef<HTMLDivElement, TooltipTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn(tooltipTitleVariants(), className)} {...props}>\n      {children}\n    </div>\n  ),\n) as TooltipComponent['Title'];\n\nTooltip.Description = forwardRef<HTMLDivElement, TooltipDescriptionProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn(tooltipTextVariants(), className)} {...props}>\n      {children}\n    </div>\n  ),\n) as TooltipComponent['Description'];\n\nTooltip.displayName = 'Tooltip';\nTooltip.Content.displayName = 'Tooltip.Content';\nTooltip.Title.displayName = 'Tooltip.Title';\nTooltip.Description.displayName = 'Tooltip.Description';\nTooltip.Trigger.displayName = 'Tooltip.Trigger';\nTooltip.Provider.displayName = 'Tooltip.Provider';\n\nexport { Tooltip };\nexport type {\n  TooltipComponent,\n  TooltipContentProps,\n  TooltipDescriptionProps,\n  TooltipProviderProps,\n  TooltipRootProps,\n  TooltipTitleProps,\n  TooltipTriggerProps,\n};\n"]}

package/dist/chunk-TEHHJ3CS.mjs

@@ -0,0 +1,73 @@
+import { cn } from '@exem-ui/core/utils';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/scrollArea/ScrollArea.tsx
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-opacity",
+        orientation === "vertical" && "w-[10px] p-[2px] opacity-0 duration-300 ease-out group-hover:opacity-100",
+        orientation === "horizontal" && "h-[10px] flex-col px-[3px] py-[2px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-component-scroll"
+        }
+      )
+    }
+  );
+}
+function ScrollArea({
+  className,
+  children,
+  onScroll,
+  scrollRef,
+  hideVerticalScrollbar = false,
+  hideHorizontalScrollbar = false,
+  disableHorizontalScroll = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("group relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            ref: scrollRef,
+            onScroll,
+            className: cn(
+              "size-full rounded-[inherit]",
+              disableHorizontalScroll && "!overflow-x-hidden"
+            ),
+            children
+          }
+        ),
+        !hideVerticalScrollbar && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", forceMount: true }),
+        !(hideHorizontalScrollbar || disableHorizontalScroll) && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", forceMount: true }),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=chunk-TEHHJ3CS.mjs.map
+//# sourceMappingURL=chunk-TEHHJ3CS.mjs.map

package/dist/chunk-TEHHJ3CS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollArea/ScrollArea.tsx"],"names":[],"mappings":";;;;;AAeA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACE,GAAA;AAAA,IAAqB,mBAAA,CAAA,mBAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,gBAAgB,UAAA,IACd,0EAAA;AAAA,QACF,gBAAgB,YAAA,IAAgB,qCAAA;AAAA,QAChC;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAqB,mBAAA,CAAA,eAAA;AAAA,QAApB;AAAA,UACC,WAAA,EAAU,mBAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,GACF;AAEJ;AAeA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA,GAAwB,KAAA;AAAA,EACxB,uBAAA,GAA0B,KAAA;AAAA,EAC1B,uBAAA,GAA0B,KAAA;AAAA,EAC1B,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAqB,mBAAA,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAqB,mBAAA,CAAA,QAAA;AAAA,UAApB;AAAA,YACC,WAAA,EAAU,sBAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACT,6BAAA;AAAA,cACA,uBAAA,IAA2B;AAAA,aAC7B;AAAA,YAEC;AAAA;AAAA,SACH;AAAA,QACC,CAAC,qBAAA,oBAAyB,GAAA,CAAC,aAAU,WAAA,EAAY,UAAA,EAAW,YAAU,IAAA,EAAC,CAAA;AAAA,QACvE,EAAE,2BAA2B,uBAAA,CAAA,oBAC5B,GAAA,CAAC,aAAU,WAAA,EAAY,YAAA,EAAa,YAAU,IAAA,EAAC,CAAA;AAAA,wBAEjD,GAAA,CAAqB,4BAApB,EAA2B;AAAA;AAAA;AAAA,GAC9B;AAEJ","file":"chunk-TEHHJ3CS.mjs","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport type React from 'react';\n\ninterface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {\n  /** 스크롤 뷰포트의 ref. 스크롤 위치 제어 시 사용합니다. */\n  scrollRef?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['ref'];\n  /** 세로 스크롤바 숨김 여부 */\n  hideVerticalScrollbar?: boolean;\n  /** 가로 스크롤바 숨김 여부 */\n  hideHorizontalScrollbar?: boolean;\n  /** 가로 스크롤 비활성화 (overflow-x: hidden) */\n  disableHorizontalScroll?: boolean;\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none transition-opacity',\n        orientation === 'vertical' &&\n          'w-[10px] p-[2px] opacity-0 duration-300 ease-out group-hover:opacity-100',\n        orientation === 'horizontal' && 'h-[10px] flex-col px-[3px] py-[2px]',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-component-scroll\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\n/**\n * 커스텀 스크롤바를 제공하는 스크롤 영역 컴포넌트입니다.\n * 마우스 호버 시 스크롤바가 나타나는 UX를 제공합니다.\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-[300px]\">\n *   <div>스크롤 가능한 콘텐츠</div>\n * </ScrollArea>\n * ```\n *\n * @see {@link ScrollAreaProps} props 상세\n */\nfunction ScrollArea({\n  className,\n  children,\n  onScroll,\n  scrollRef,\n  hideVerticalScrollbar = false,\n  hideHorizontalScrollbar = false,\n  disableHorizontalScroll = false,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('group relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        ref={scrollRef}\n        onScroll={onScroll}\n        className={cn(\n          'size-full rounded-[inherit]',\n          disableHorizontalScroll && '!overflow-x-hidden',\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {!hideVerticalScrollbar && <ScrollBar orientation=\"vertical\" forceMount />}\n      {!(hideHorizontalScrollbar || disableHorizontalScroll) && (\n        <ScrollBar orientation=\"horizontal\" forceMount />\n      )}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\nexport type { ScrollAreaProps };\n"]}

package/dist/chunk-TJY4MIBC.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+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 TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+
+// src/tabs/Tabs.tsx
+var TabsContext = react.createContext({ type: "primary" });
+var useTabsContext = () => {
+  const context = react.useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
+  return context;
+};
+var tabsListVariants = utils.cva("inline-flex items-center", {
+  variants: {
+    type: {
+      primary: "h-9 gap-5 border-b border-border-primary",
+      secondary: "h-8 gap-1"
+    }
+  },
+  defaultVariants: {
+    type: "primary"
+  }
+});
+var tabsTriggerVariants = utils.cva(
+  "group inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-pretendard font-semibold text-body-2 leading-[140%] transition-all disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      type: {
+        primary: [
+          "h-9 border-b-2 border-transparent p-0 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:border-border-focused data-[state=active]:text-text-primary"
+        ],
+        secondary: [
+          "h-8 rounded-strong px-2 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:rounded-medium data-[state=active]:bg-elevation-elevation-2 data-[state=active]:text-text-primary"
+        ]
+      }
+    },
+    defaultVariants: {
+      type: "primary"
+    }
+  }
+);
+var Tabs = react.forwardRef(
+  ({ type = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { type }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children }) })
+);
+Tabs.List = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.List,
+      {
+        ref,
+        className: utils.cn(tabsListVariants({ type }), className),
+        ...props
+      }
+    );
+  }
+);
+Tabs.Trigger = react.forwardRef(
+  ({ className, leftIcon, rightIcon, badge, children, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      TabsPrimitive__namespace.Trigger,
+      {
+        ref,
+        className: utils.cn(tabsTriggerVariants({ type }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4", children: leftIcon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+            children,
+            badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-tertiary group-data-[state=active]:text-text-accent", children: badge })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Tabs.Content = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ref, className: utils.cn(className), ...props })
+);
+Tabs.displayName = "Tabs";
+Tabs.List.displayName = "Tabs.List";
+Tabs.Trigger.displayName = "Tabs.Trigger";
+Tabs.Content.displayName = "Tabs.Content";
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=chunk-TJY4MIBC.js.map
+//# sourceMappingURL=chunk-TJY4MIBC.js.map

package/dist/chunk-TJY4MIBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.tsx"],"names":["createContext","useContext","cva","forwardRef","jsx","TabsPrimitive","cn","jsxs"],"mappings":"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","file":"chunk-TJY4MIBC.js","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\n\ntype TabsType = 'primary' | 'secondary';\n\ntype TabsContextType = {\n  type: TabsType;\n};\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n  /**\n   * 탭 스타일 유형\n   * @default 'primary'\n   */\n  type?: TabsType;\n};\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n  /** 텍스트 왼쪽에 표시할 아이콘 요소 */\n  leftIcon?: React.ReactElement<{ className?: string }>;\n  /** 텍스트 오른쪽에 표시할 아이콘 요소 */\n  rightIcon?: React.ReactElement<{ className?: string }>;\n  /** 탭 라벨 옆에 표시할 배지 텍스트 */\n  badge?: string | number;\n};\n\ntype TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\ntype TabsComponent = React.ForwardRefExoticComponent<\n  TabsRootProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>\n> & {\n  List: React.ForwardRefExoticComponent<TabsListProps>;\n  Trigger: React.ForwardRefExoticComponent<TabsTriggerProps>;\n  Content: React.ForwardRefExoticComponent<TabsContentProps>;\n};\n\nconst TabsContext = createContext<TabsContextType>({ type: 'primary' });\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('useTabsContext must be used within a TabsProvider');\n  }\n  return context;\n};\n\n// TabsList variants\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    type: {\n      primary: 'h-9 gap-5 border-b border-border-primary',\n      secondary: 'h-8 gap-1',\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n  },\n});\n\n// TabsTrigger variants\nconst tabsTriggerVariants = cva(\n  'group inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-pretendard font-semibold text-body-2 leading-[140%] transition-all disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      type: {\n        primary: [\n          'h-9 border-b-2 border-transparent p-0 text-text-tertiary',\n          'hover:text-text-primary',\n          'data-[state=active]:border-border-focused data-[state=active]:text-text-primary',\n        ],\n        secondary: [\n          'h-8 rounded-strong px-2 text-text-tertiary',\n          'hover:text-text-primary',\n          'data-[state=active]:rounded-medium data-[state=active]:bg-elevation-elevation-2 data-[state=active]:text-text-primary',\n        ],\n      },\n    },\n    defaultVariants: {\n      type: 'primary',\n    },\n  },\n);\n\n/**\n * 탭 형태의 콘텐츠 전환 컴포넌트입니다.\n * Compound Component 패턴으로 `Tabs.List`, `Tabs.Trigger`, `Tabs.Content`와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"tab1\" type=\"primary\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"tab1\">첫 번째</Tabs.Trigger>\n *     <Tabs.Trigger value=\"tab2\">두 번째</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"tab1\">첫 번째 내용</Tabs.Content>\n *   <Tabs.Content value=\"tab2\">두 번째 내용</Tabs.Content>\n * </Tabs>\n * ```\n *\n * @see {@link TabsRootProps} 루트 props 상세\n * @see {@link TabsTriggerProps} 트리거 props 상세\n */\nconst Tabs = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsRootProps>(\n  ({ type = 'primary', children, ...props }, ref) => (\n    <TabsContext.Provider value={{ type }}>\n      <TabsPrimitive.Root ref={ref} {...props}>\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContext.Provider>\n  ),\n) as TabsComponent;\n\nTabs.List = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, ...props }, ref) => {\n    const { type } = useTabsContext();\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(tabsListVariants({ type }), className)}\n        {...props}\n      />\n    );\n  },\n) as TabsComponent['List'];\n\nTabs.Trigger = forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, leftIcon, rightIcon, badge, children, ...props }, ref) => {\n    const { type } = useTabsContext();\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(tabsTriggerVariants({ type }), className)}\n        {...props}\n      >\n        {leftIcon && <span className=\"size-4\">{leftIcon}</span>}\n        <span className=\"flex items-center gap-1\">\n          {children}\n          {badge && (\n            <span className=\"text-text-tertiary group-data-[state=active]:text-text-accent\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {rightIcon && <span className=\"size-4\">{rightIcon}</span>}\n      </TabsPrimitive.Trigger>\n    );\n  },\n) as TabsComponent['Trigger'];\n\nTabs.Content = forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(\n  ({ className, ...props }, ref) => (\n    <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />\n  ),\n) as TabsComponent['Content'];\n\nTabs.displayName = 'Tabs';\nTabs.List.displayName = 'Tabs.List';\nTabs.Trigger.displayName = 'Tabs.Trigger';\nTabs.Content.displayName = 'Tabs.Content';\n\nexport { Tabs };\nexport type { TabsComponent, TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"]}