@exem-ui/react 0.3.4-next.20260727012122 → 0.3.4-next.20260728024650

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { ConditionalTooltip, overlayListVariants, commonInputVariants, ScrollArea } from './chunk-NZR3A6CI.mjs';
-export { ColorPalette, ColorPaletteColors, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-NZR3A6CI.mjs';
+import { ConditionalTooltip, overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea } from './chunk-G65KBUWQ.mjs';
+export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-G65KBUWQ.mjs';
 import { X, MoreHorizontal, iconSizes, Minus, Check, Person, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-GWP7YKJP.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as React from 'react';
@@ -1347,118 +1347,6 @@ var useTextFieldContext = () => {
   }
   return context;
 };
-var textFieldVariants = {
-  container: commonInputVariants.container,
-  label: commonInputVariants.label,
-  wrapper: cva(
-    "flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none",
-    {
-      variants: {
-        variant: {
-          fill: "border-transparent bg-elevation-elevation-2",
-          line: "border-border-primary",
-          lineBackground: "border-border-primary bg-background-primary"
-        },
-        size: {
-          xsmall: "h-6 gap-0 px-1",
-          small: "h-7 gap-0.5 px-1.5",
-          medium: "h-8 gap-0.5 px-2",
-          large: "h-10 gap-1 px-2.5"
-        },
-        state: {
-          default: "text-text-primary",
-          error: "text-text-primary",
-          disabled: "cursor-not-allowed text-text-disabled"
-        }
-      },
-      compoundVariants: [
-        { variant: "fill", state: "error", class: "border-border-critical" },
-        {
-          variant: "fill",
-          state: "disabled",
-          class: "bg-elevation-elevation-2 border-transparent"
-        },
-        { variant: "line", state: "error", class: "border-border-critical" },
-        { variant: "line", state: "disabled", class: "border-border-primary" },
-        { variant: "lineBackground", state: "error", class: "border-border-critical" },
-        { variant: "lineBackground", state: "disabled", class: "border-border-primary" }
-      ],
-      defaultVariants: { variant: "fill", size: "medium", state: "default" }
-    }
-  ),
-  input: cva(
-    "w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
-    {
-      variants: {
-        size: {
-          xsmall: "text-body-3 placeholder:text-body-3",
-          small: "text-body-2 placeholder:text-body-2",
-          medium: "text-body-2 placeholder:text-body-2",
-          large: "text-body-1 placeholder:text-body-1"
-        },
-        state: {
-          default: "text-text-primary placeholder:text-text-tertiary",
-          error: "text-text-primary placeholder:text-text-tertiary",
-          disabled: "text-text-disabled placeholder:text-text-disabled"
-        }
-      },
-      defaultVariants: { size: "medium", state: "default" }
-    }
-  ),
-  description: cva("mt-0.5 font-regular text-text-tertiary", {
-    variants: {
-      size: {
-        xsmall: "text-caption",
-        small: "text-body-3",
-        medium: "text-body-3",
-        large: "text-body-2"
-      },
-      error: {
-        true: "text-text-critical",
-        false: ""
-      },
-      disabled: {
-        true: "text-text-disabled",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: true,
-        error: true,
-        class: "text-text-disabled"
-        // disabled가 error보다 우선
-      }
-    ],
-    defaultVariants: { size: "medium", error: false, disabled: false }
-  }),
-  subText: cva("ml-1 shrink-0 font-regular", {
-    variants: {
-      size: {
-        xsmall: "text-body-3",
-        small: "text-body-2",
-        medium: "text-body-2",
-        large: "text-body-1"
-      },
-      disabled: {
-        true: "text-text-disabled",
-        false: "text-text-tertiary"
-      }
-    },
-    defaultVariants: { size: "medium", disabled: false }
-  }),
-  icon: cva("shrink-0 text-icon-tertiary", {
-    variants: {
-      size: {
-        xsmall: "size-4",
-        small: "size-4",
-        medium: "size-4",
-        large: "size-5"
-      }
-    },
-    defaultVariants: { size: "medium" }
-  })
-};
 var TextField = forwardRef(
   ({
     children,
@@ -1556,6 +1444,44 @@ TextField.displayName = "TextField";
 TextField.Label.displayName = "TextField.Label";
 TextField.Input.displayName = "TextField.Input";
 TextField.Description.displayName = "TextField.Description";
+
+// src/hooks/useOverlayDismissGuard.ts
+var isBaseUiPopupOpen = () => Boolean(
+  document.querySelector('[data-base-ui-portal] [data-slot="combobox-content"][data-open]')
+);
+var isTargetInsideBaseUiPopup = (target) => target instanceof Element && Boolean(target.closest("[data-base-ui-portal]"));
+var 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]")
+  );
+};
+function useOverlayDismissGuard({
+  onInteractOutside,
+  onEscapeKeyDown
+}) {
+  const handleInteractOutside = (event) => {
+    if (shouldPreventDismissForSelect(event.target) || isTargetInsideBaseUiPopup(event.target)) {
+      event.preventDefault();
+    }
+    onInteractOutside?.(event);
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (isBaseUiPopupOpen()) {
+      event.preventDefault();
+    }
+    onEscapeKeyDown?.(event);
+  };
+  return { onEscapeKeyDown: handleEscapeKeyDown, onInteractOutside: handleInteractOutside };
+}
 var MODAL_PADDING = {
   body: "px-4 pb-4",
   footer: "px-4 py-3"
@@ -1593,28 +1519,9 @@ Modal.Overlay = forwardRef(
   )
 );
 Modal.Content = forwardRef(
-  ({ className, children, size = "default", onInteractOutside, onFocusOutside, ...props }, ref) => {
+  ({ className, children, size = "default", onInteractOutside, onEscapeKeyDown, ...props }, ref) => {
     const isFullSize = size === "fullsize";
-    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);
-    };
+    const dismissGuard = useOverlayDismissGuard({ onEscapeKeyDown, onInteractOutside });
     return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs(Modal.Portal, { children: [
       /* @__PURE__ */ jsx(Modal.Overlay, {}),
       /* @__PURE__ */ jsx(
@@ -1632,7 +1539,7 @@ Modal.Content = forwardRef(
             className
           ),
           ...props,
-          onInteractOutside: handleInteractOutside,
+          ...dismissGuard,
           children
         }
       )
@@ -1912,29 +1819,18 @@ Sheet.Overlay = forwardRef(
   )
 );
 Sheet.Content = forwardRef(
-  ({ className, children, side = "right", resizable = false, onInteractOutside, ...props }, ref) => {
+  ({
+    className,
+    children,
+    side = "right",
+    resizable = false,
+    onInteractOutside,
+    onEscapeKeyDown,
+    ...props
+  }, ref) => {
     const resizeOptions = typeof resizable === "object" ? resizable : { use: resizable };
     const isResizable = resizeOptions.use ?? true;
-    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);
-    };
+    const dismissGuard = useOverlayDismissGuard({ onEscapeKeyDown, onInteractOutside });
     return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxs(Sheet.Portal, { children: [
       /* @__PURE__ */ jsx(Sheet.Overlay, {}),
       /* @__PURE__ */ jsx(
@@ -1948,7 +1844,7 @@ Sheet.Content = forwardRef(
             className
           ),
           ...props,
-          onInteractOutside: handleInteractOutside,
+          ...dismissGuard,
           children: isResizable ? /* @__PURE__ */ jsx(SheetResizableBox, { side, options: resizeOptions, children }) : children
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20260727012122",
+  "version": "0.3.4-next.20260728024650",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -74,6 +74,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.11",
+    "@base-ui/react": "^1.6.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -99,7 +100,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20260727012122"
+    "@exem-ui/core": "0.3.3-next.20260728024650"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -135,7 +136,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20260727012122"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20260728024650"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",

package/dist/{FlatTooltip-CKMkf_th.d.mts → FlatTooltip-DqHMNx-V.d.mts}

@@ -141,6 +141,12 @@ declare namespace ColorPaletteSwatch {
     var displayName: string;
 }
 
+type Size = 'xsmall' | 'small' | 'medium' | 'large';
+type Variant = 'fill' | 'line' | 'lineBackground';
+type Icon = React.ReactElement<{
+    className?: string;
+}>;
+
 type SegmentSize = 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
@@ -188,12 +194,6 @@ type SegmentComponent = {
  */
 declare const Segment: SegmentComponent;
 
-type Size = 'xsmall' | 'small' | 'medium' | 'large';
-type Variant = 'fill' | 'line' | 'lineBackground';
-type Icon = React.ReactElement<{
-    className?: string;
-}>;
-
 /**
  * SelectGroup에서 사용 가능한 variant.
  * lineBackground는 그룹 디자인에 정의되어 있지 않으므로 제외한다.

package/dist/{FlatTooltip-CKMkf_th.d.ts → FlatTooltip-DqHMNx-V.d.ts}

@@ -141,6 +141,12 @@ declare namespace ColorPaletteSwatch {
     var displayName: string;
 }
 
+type Size = 'xsmall' | 'small' | 'medium' | 'large';
+type Variant = 'fill' | 'line' | 'lineBackground';
+type Icon = React.ReactElement<{
+    className?: string;
+}>;
+
 type SegmentSize = 'small' | 'medium' | 'large';
 type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
@@ -188,12 +194,6 @@ type SegmentComponent = {
  */
 declare const Segment: SegmentComponent;
 
-type Size = 'xsmall' | 'small' | 'medium' | 'large';
-type Variant = 'fill' | 'line' | 'lineBackground';
-type Icon = React.ReactElement<{
-    className?: string;
-}>;
-
 /**
  * SelectGroup에서 사용 가능한 variant.
  * lineBackground는 그룹 디자인에 정의되어 있지 않으므로 제외한다.