@exem-ui/react 0.1.0-next.bf3c711

package/dist/chunk-FDX4IQK5.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var chunkMQVHREEI_js = require('./chunk-MQVHREEI.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function FlatSelect({
+  options,
+  placeholder,
+  onBlur,
+  onFocus,
+  onOpenChange,
+  label,
+  description,
+  required,
+  listClassName,
+  leftIcon,
+  ...props
+}) {
+  const { className, ...selectProps } = props;
+  const selectRef = react.useRef(null);
+  const { handleBlur, handleFocus } = useFocusWithin(selectRef, {
+    onBlur,
+    onFocus
+  });
+  const handleOpenChange = (open) => {
+    if (open) {
+      handleFocus();
+    }
+    onOpenChange?.(open);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: selectRef, className, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkMQVHREEI_js.Select, { ...selectProps, onOpenChange: handleOpenChange, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Label, { required, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Trigger, { onBlur: handleBlur, onFocus: handleFocus, leftIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Value, { placeholder, className: "truncate" }) }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Description, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkMQVHREEI_js.Select.List, { className: listClassName, children: [
+      options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Empty, { children: placeholder }),
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkMQVHREEI_js.Select.Item,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          className: "flex max-w-full items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block flex-1 truncate", children: option.label }),
+            option.rightSlot
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] }) });
+}
+function useFocusWithin(containerRef, callbacks) {
+  const [isFocused, setIsFocused] = react.useState(false);
+  const handleBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    setIsFocused(false);
+    callbacks?.onBlur?.();
+  };
+  const handleFocus = () => {
+    if (isFocused) {
+      return;
+    }
+    setIsFocused(true);
+    callbacks?.onFocus?.();
+  };
+  return { handleBlur, handleFocus, isFocused };
+}
+FlatSelect.displayName = "FlatSelect";
+
+exports.FlatSelect = FlatSelect;
+//# sourceMappingURL=chunk-FDX4IQK5.js.map
+//# sourceMappingURL=chunk-FDX4IQK5.js.map

package/dist/chunk-FDX4IQK5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flat/FlatSelect.tsx"],"names":["useRef","jsx","Select","jsxs","useState"],"mappings":"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","file":"chunk-FDX4IQK5.js","sourcesContent":["import type { ComponentProps, RefObject } from 'react';\nimport { useRef, useState } from 'react';\nimport { Select } from '../input/Select';\n\ntype FlatSelectOption = {\n  value: string;\n  label: string | React.ReactNode;\n  /** 아이템 오른쪽에 표시할 슬롯 요소 */\n  rightSlot?: React.ReactNode;\n  disabled?: boolean;\n};\n\ninterface FlatSelectProps extends React.ComponentProps<typeof Select> {\n  /** 선택 가능한 옵션 배열 */\n  options: FlatSelectOption[];\n  /** 값이 선택되지 않았을 때 표시할 텍스트 */\n  placeholder?: string;\n  /** 드롭다운 열림/닫힘 상태 변경 핸들러 */\n  onOpenChange?: (open: boolean) => void;\n  /** 포커스 획득 핸들러 */\n  onFocus?: () => void;\n  /** 포커스 해제 핸들러 */\n  onBlur?: () => void;\n  /** 트리거 왼쪽에 표시할 아이콘 */\n  leftIcon?: ComponentProps<typeof Select.Trigger>['leftIcon'];\n  /** 라벨 텍스트 */\n  label?: ComponentProps<typeof Select.Label>['children'];\n  /** 필수 입력 여부 */\n  required?: ComponentProps<typeof Select.Label>['required'];\n  /** 설명 텍스트 */\n  description?: ComponentProps<typeof Select.Description>['children'];\n  /** 드롭다운 리스트 className */\n  listClassName?: string;\n}\n\n/**\n * Select 컴포넌트의 간소화된 Flat API입니다.\n * options 배열만 전달하면 Compound Component 없이 간편하게 사용할 수 있습니다.\n *\n * @example\n * ```tsx\n * <FlatSelect\n *   options={[\n *     { value: '1', label: '옵션 1' },\n *     { value: '2', label: '옵션 2' },\n *   ]}\n *   placeholder=\"선택하세요\"\n *   label=\"항목\"\n * />\n * ```\n *\n * @see {@link FlatSelectProps} props 상세\n */\nfunction FlatSelect({\n  options,\n  placeholder,\n  onBlur,\n  onFocus,\n  onOpenChange,\n  label,\n  description,\n  required,\n  listClassName,\n  leftIcon,\n  ...props\n}: FlatSelectProps) {\n  const { className, ...selectProps } = props;\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { handleBlur, handleFocus } = useFocusWithin(selectRef, {\n    onBlur,\n    onFocus,\n  });\n\n  const handleOpenChange = (open: boolean) => {\n    if (open) {\n      handleFocus();\n    }\n    onOpenChange?.(open);\n  };\n\n  return (\n    <div ref={selectRef} className={className}>\n      <Select {...selectProps} onOpenChange={handleOpenChange}>\n        {label && <Select.Label required={required}>{label}</Select.Label>}\n        <Select.Trigger onBlur={handleBlur} onFocus={handleFocus} leftIcon={leftIcon}>\n          <Select.Value placeholder={placeholder} className=\"truncate\" />\n        </Select.Trigger>\n        {description && <Select.Description>{description}</Select.Description>}\n        <Select.List className={listClassName}>\n          {options.length === 0 && <Select.Empty>{placeholder}</Select.Empty>}\n          {options.map((option) => (\n            <Select.Item\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n              className=\"flex max-w-full items-center justify-between\"\n            >\n              <div className=\"block flex-1 truncate\">{option.label}</div>\n              {option.rightSlot}\n            </Select.Item>\n          ))}\n        </Select.List>\n      </Select>\n    </div>\n  );\n}\n\nfunction useFocusWithin(\n  containerRef: RefObject<HTMLElement | null>,\n  callbacks?: { onFocus?: () => void; onBlur?: () => void },\n) {\n  const [isFocused, setIsFocused] = useState(false);\n\n  const handleBlur = (event: React.FocusEvent) => {\n    if (containerRef.current?.contains(event.relatedTarget as Node)) {\n      return;\n    }\n    setIsFocused(false);\n    callbacks?.onBlur?.();\n  };\n\n  const handleFocus = () => {\n    if (isFocused) {\n      return;\n    }\n    setIsFocused(true);\n    callbacks?.onFocus?.();\n  };\n\n  return { handleBlur, handleFocus, isFocused };\n}\n\nFlatSelect.displayName = 'FlatSelect';\n\nexport { FlatSelect };\nexport type { FlatSelectProps, FlatSelectOption };\n"]}

package/dist/chunk-FOMIUDRM.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+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 ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+
+// src/scrollArea/ScrollArea.tsx
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: utils.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__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.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__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      "data-slot": "scroll-area",
+      className: utils.cn("group relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            ref: scrollRef,
+            onScroll,
+            className: utils.cn(
+              "size-full rounded-[inherit]",
+              disableHorizontalScroll && "!overflow-x-hidden"
+            ),
+            children
+          }
+        ),
+        !hideVerticalScrollbar && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical", forceMount: true }),
+        !(hideHorizontalScrollbar || disableHorizontalScroll) && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal", forceMount: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  );
+}
+
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
+//# sourceMappingURL=chunk-FOMIUDRM.js.map
+//# sourceMappingURL=chunk-FOMIUDRM.js.map

package/dist/chunk-FOMIUDRM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollArea/ScrollArea.tsx"],"names":["jsx","ScrollAreaPrimitive","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACEA,cAAA;AAAA,IAAqBC,8BAAA,CAAA,mBAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAWC,QAAA;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,kBAAAF,cAAA;AAAA,QAAqBC,8BAAA,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,uBACEE,eAAA;AAAA,IAAqBF,8BAAA,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAWC,QAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAAqBC,8BAAA,CAAA,QAAA;AAAA,UAApB;AAAA,YACC,WAAA,EAAU,sBAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAA,EAAWC,QAAA;AAAA,cACT,6BAAA;AAAA,cACA,uBAAA,IAA2B;AAAA,aAC7B;AAAA,YAEC;AAAA;AAAA,SACH;AAAA,QACC,CAAC,qBAAA,oBAAyBF,cAAA,CAAC,aAAU,WAAA,EAAY,UAAA,EAAW,YAAU,IAAA,EAAC,CAAA;AAAA,QACvE,EAAE,2BAA2B,uBAAA,CAAA,oBAC5BA,cAAA,CAAC,aAAU,WAAA,EAAY,YAAA,EAAa,YAAU,IAAA,EAAC,CAAA;AAAA,wBAEjDA,cAAA,CAAqBC,uCAApB,EAA2B;AAAA;AAAA;AAAA,GAC9B;AAEJ","file":"chunk-FOMIUDRM.js","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-FR5F3VTU.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
+var utils = require('@exem-ui/core/utils');
+var react = require('react');
+var reactDayPicker = require('react-day-picker');
+var jsxRuntime = require('react/jsx-runtime');
+
+function DatePickerChevron({ orientation }) {
+  if (orientation === "left") {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.ChevronLeft, { type: "regular", className: "size-5" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.ChevronRight, { type: "regular", className: "size-5" });
+}
+function DatePickerDayButton({
+  day,
+  modifiers,
+  children,
+  className,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: utils.cn(className, "relative"), ...buttonProps, children: [
+    children,
+    modifiers.today && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full",
+          modifiers.selected ? "bg-text-inverse" : "bg-icon-critical"
+        )
+      }
+    )
+  ] });
+}
+function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
+  const dayPickerProps = { ...rest, mode: type };
+  const defaultClassNames = reactDayPicker.getDefaultClassNames();
+  const [month, setMonth] = react.useState(
+    dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
+  );
+  const rangeSelected = type === "range" ? rest.selected : void 0;
+  const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;
+  const handleMonthChange = (newMonth) => {
+    setMonth(newMonth);
+    dayPickerProps.onMonthChange?.(newMonth);
+  };
+  const handleDayClick = (day, modifiers, e) => {
+    if (modifiers.outside) {
+      setMonth(new Date(day.getFullYear(), day.getMonth()));
+    }
+    dayPickerProps.onDayClick?.(day, modifiers, e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      ...dayPickerProps,
+      month,
+      onMonthChange: handleMonthChange,
+      onDayClick: handleDayClick,
+      showOutsideDays,
+      formatters: {
+        formatCaption: (date) => {
+          const year = date.getFullYear();
+          const month2 = String(date.getMonth() + 1).padStart(2, "0");
+          return `${year}\uB144 ${month2}\uC6D4`;
+        },
+        formatWeekdayName: (date) => date.toLocaleDateString("en-US", { weekday: "short" }),
+        ...dayPickerProps.formatters
+      },
+      components: {
+        Chevron: DatePickerChevron,
+        DayButton: DatePickerDayButton,
+        ...dayPickerProps.components
+      },
+      classNames: {
+        root: utils.cn(
+          defaultClassNames.root,
+          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
+        ),
+        months: utils.cn(defaultClassNames.months, "relative"),
+        month: utils.cn(defaultClassNames.month, "flex flex-col gap-2"),
+        month_caption: utils.cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
+        caption_label: "text-body-2 font-semibold text-text-primary",
+        nav: utils.cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
+        button_previous: utils.cn(
+          defaultClassNames.button_previous,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        button_next: utils.cn(
+          defaultClassNames.button_next,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        weekday: utils.cn(
+          defaultClassNames.weekday,
+          "size-8 text-body-3 font-regular text-text-tertiary"
+        ),
+        month_grid: utils.cn(
+          defaultClassNames.month_grid,
+          "border-separate border-spacing-x-0 border-spacing-y-1"
+        ),
+        week: utils.cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
+        day: utils.cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
+        day_button: utils.cn(
+          defaultClassNames.day_button,
+          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
+        ),
+        outside: "!text-text-disabled",
+        selected: utils.cn(
+          "[&>button]:bg-solid-primary-default",
+          "[&>button]:text-text-inverse",
+          "[&>button]:border-0",
+          "[&>button]:hover:border-0"
+        ),
+        range_start: utils.cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_end: utils.cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_middle: utils.cn(
+          "bg-elevation-elevation-2 rounded-none",
+          "[&>button]:!bg-transparent",
+          "[&>button]:!text-text-secondary"
+        ),
+        ...dayPickerProps.classNames
+      },
+      modifiersClassNames: {
+        today: "rdp-calendar-today",
+        ...dayPickerProps.modifiersClassNames
+      }
+    }
+  );
+}
+
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=chunk-FR5F3VTU.js.map
+//# sourceMappingURL=chunk-FR5F3VTU.js.map

package/dist/chunk-FR5F3VTU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/picker/DatePicker.tsx"],"names":["jsx","ChevronLeft","ChevronRight","jsxs","cn","getDefaultClassNames","useState","DayPicker","month"],"mappings":"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","file":"chunk-FR5F3VTU.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport { type ComponentProps, useState } from 'react';\nimport { type DayButtonProps, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport { ChevronLeft, ChevronRight } from '../icon';\n\ntype DistributiveOmit<T, K extends string> = T extends unknown ? Omit<T, K> : never;\n\ntype DatePickerProps = DistributiveOmit<ComponentProps<typeof DayPicker>, 'mode'> & {\n  /** 날짜 선택 유형 */\n  type?: 'single' | 'range';\n};\n\nfunction DatePickerChevron({ orientation }: { orientation?: string }) {\n  if (orientation === 'left') {\n    return <ChevronLeft type=\"regular\" className=\"size-5\" />;\n  }\n  return <ChevronRight type=\"regular\" className=\"size-5\" />;\n}\n\nfunction DatePickerDayButton({\n  day,\n  modifiers,\n  children,\n  className,\n  ...buttonProps\n}: DayButtonProps) {\n  return (\n    <button className={cn(className, 'relative')} {...buttonProps}>\n      {children}\n      {modifiers.today && (\n        <span\n          className={cn(\n            'absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full',\n            modifiers.selected ? 'bg-text-inverse' : 'bg-icon-critical',\n          )}\n        />\n      )}\n    </button>\n  );\n}\n\nfunction DatePicker({ type = 'single', showOutsideDays = true, ...rest }: DatePickerProps) {\n  const dayPickerProps = { ...rest, mode: type } as ComponentProps<typeof DayPicker>;\n  const defaultClassNames = getDefaultClassNames();\n  const [month, setMonth] = useState(\n    dayPickerProps.month ?? dayPickerProps.defaultMonth ?? new Date(),\n  );\n\n  const rangeSelected =\n    type === 'range' ? (rest as { selected?: { from?: Date; to?: Date } }).selected : undefined;\n  const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;\n\n  const handleMonthChange = (newMonth: Date) => {\n    setMonth(newMonth);\n    dayPickerProps.onMonthChange?.(newMonth);\n  };\n\n  const handleDayClick: ComponentProps<typeof DayPicker>['onDayClick'] = (day, modifiers, e) => {\n    if (modifiers.outside) {\n      setMonth(new Date(day.getFullYear(), day.getMonth()));\n    }\n    dayPickerProps.onDayClick?.(day, modifiers, e);\n  };\n\n  return (\n    <DayPicker\n      {...dayPickerProps}\n      month={month}\n      onMonthChange={handleMonthChange}\n      onDayClick={handleDayClick}\n      showOutsideDays={showOutsideDays}\n      formatters={{\n        formatCaption: (date) => {\n          const year = date.getFullYear();\n          const month = String(date.getMonth() + 1).padStart(2, '0');\n          return `${year}년 ${month}월`;\n        },\n        formatWeekdayName: (date) => date.toLocaleDateString('en-US', { weekday: 'short' }),\n        ...dayPickerProps.formatters,\n      }}\n      components={{\n        Chevron: DatePickerChevron,\n        DayButton: DatePickerDayButton,\n        ...dayPickerProps.components,\n      }}\n      classNames={{\n        root: cn(\n          defaultClassNames.root,\n          'rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium',\n        ),\n        months: cn(defaultClassNames.months, 'relative'),\n        month: cn(defaultClassNames.month, 'flex flex-col gap-2'),\n        month_caption: cn(defaultClassNames.month_caption, 'flex h-7 items-center px-0.5'),\n        caption_label: 'text-body-2 font-semibold text-text-primary',\n        nav: cn(defaultClassNames.nav, 'absolute right-0 top-0 flex h-7 items-center gap-2'),\n        button_previous: cn(\n          defaultClassNames.button_previous,\n          'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n        ),\n        button_next: cn(\n          defaultClassNames.button_next,\n          'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n        ),\n        weekday: cn(\n          defaultClassNames.weekday,\n          'size-8 text-body-3 font-regular text-text-tertiary',\n        ),\n        month_grid: cn(\n          defaultClassNames.month_grid,\n          'border-separate border-spacing-x-0 border-spacing-y-1',\n        ),\n        week: cn(defaultClassNames.week, 'overflow-hidden rounded-medium'),\n        day: cn(defaultClassNames.day, 'size-8 text-body-2 font-medium text-text-secondary'),\n        day_button: cn(\n          defaultClassNames.day_button,\n          'size-8 cursor-pointer rounded-full hover:border hover:border-border-focused',\n        ),\n        outside: '!text-text-disabled',\n        selected: cn(\n          '[&>button]:bg-solid-primary-default',\n          '[&>button]:text-text-inverse',\n          '[&>button]:border-0',\n          '[&>button]:hover:border-0',\n        ),\n        range_start: cn(\n          'rounded-none',\n          isRangeComplete &&\n            '[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n        ),\n        range_end: cn(\n          'rounded-none',\n          isRangeComplete &&\n            '[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n        ),\n        range_middle: cn(\n          'bg-elevation-elevation-2 rounded-none',\n          '[&>button]:!bg-transparent',\n          '[&>button]:!text-text-secondary',\n        ),\n        ...dayPickerProps.classNames,\n      }}\n      modifiersClassNames={{\n        today: 'rdp-calendar-today',\n        ...dayPickerProps.modifiersClassNames,\n      }}\n    />\n  );\n}\n\nexport { DatePicker };\nexport type { DatePickerProps };\n"]}

package/dist/chunk-GW53LH3I.mjs

@@ -0,0 +1,81 @@
+import { Button } from './chunk-DJHGCJR4.mjs';
+import { cn } from '@exem-ui/core/utils';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createContext, forwardRef, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var MessageBoxContext = createContext({ variant: "default" });
+var MessageBoxRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
+var MessageBox = MessageBoxRoot;
+MessageBox.Trigger = DialogPrimitive.Trigger;
+MessageBox.Content = forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      className: 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__ */ jsx(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: 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 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("w-full text-title-2 font-semibold text-text-primary", className),
+    ...props
+  }
+));
+MessageBox.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("w-full text-body-2 text-text-secondary", className),
+    ...props
+  }
+));
+MessageBox.Actions = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-row gap-2", className), ...props })
+);
+MessageBox.Cancel = forwardRef(
+  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, color: "assistive", variant: "contained", size, ...props }) })
+);
+MessageBox.Action = forwardRef(
+  ({ size = "medium", ...props }, ref) => {
+    const { variant } = useContext(MessageBoxContext);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+      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";
+
+export { MessageBox };
+//# sourceMappingURL=chunk-GW53LH3I.mjs.map
+//# sourceMappingURL=chunk-GW53LH3I.mjs.map

package/dist/chunk-GW53LH3I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/messageBox/MessageBox.tsx"],"names":[],"mappings":"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","file":"chunk-GW53LH3I.mjs","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"]}

package/dist/chunk-GXMRIT5E.mjs

@@ -0,0 +1,94 @@
+import { Button } from './chunk-DJHGCJR4.mjs';
+import { ConditionalTooltip } from './chunk-5WGNZX7Z.mjs';
+import { cn } from '@exem-ui/core/utils';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var iconButtonSizeClasses = {
+  xsmall: "size-6",
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10",
+  xlarge: "size-12"
+};
+var IconButton = forwardRef(
+  ({
+    className,
+    tooltip,
+    variant = "contained",
+    icon,
+    size = "medium",
+    color = "primary",
+    ...props
+  }, ref) => {
+    const buttonProps = {
+      className: cn(iconButtonSizeClasses[size], "px-0", className),
+      color,
+      icon,
+      size,
+      variant,
+      ...props
+    };
+    return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
+  }
+);
+IconButton.displayName = "IconButton";
+var ButtonGroup = forwardRef(
+  ({
+    variant = "contained",
+    iconOnly = false,
+    hasBackground = false,
+    size = "medium",
+    items,
+    className
+  }, ref) => {
+    if (items.length === 0) {
+      return null;
+    }
+    const isOutlined = variant === "outlined";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: 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 = 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: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+              icon: item.icon,
+              onClick: item.onClick,
+              size
+            };
+            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "assistive", variant: "contained" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
+          }
+          const buttonBaseProps = {
+            className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+            icon: item.icon,
+            onClick: item.onClick,
+            size
+          };
+          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "assistive", variant: "contained", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
+        })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup, IconButton };
+//# sourceMappingURL=chunk-GXMRIT5E.mjs.map
+//# sourceMappingURL=chunk-GXMRIT5E.mjs.map

package/dist/chunk-GXMRIT5E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/IconButton.tsx","../src/button/ButtonGroup.tsx"],"names":["forwardRef","jsx","cn"],"mappings":"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","file":"chunk-GXMRIT5E.mjs","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"]}