sellmate-design-system-react 0.7.0 → 0.8.1

package/dist/components/SPortal/SPortal.cjs

@@ -80,6 +80,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -108,7 +109,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {

package/dist/components/SPortal/SPortal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":["extendTailwindMerge","clsx","createContext","useContext","jsxs","RPopover","jsx"],"mappings":"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","file":"SPortal.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":["extendTailwindMerge","clsx","createContext","useContext","jsxs","RPopover","jsx"],"mappings":"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","file":"SPortal.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */\n  onPointerDownOutside?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onPointerDownOutside,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n              return;\n            }\n            onPointerDownOutside?.(e);\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}

package/dist/components/SPortal/SPortal.d.ts

@@ -35,6 +35,8 @@ export interface SPortalProps {
     onOpenAutoFocus?: (event: Event) => void;
     /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */
     onCloseAutoFocus?: (event: Event) => void;
+    /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */
+    onPointerDownOutside?: (event: Event) => void;
     /** 본문 내용 (콘텐츠 자유). */
     children?: ReactNode;
     className?: string;
@@ -48,7 +50,7 @@ export interface SPortalProps {
  * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은
  * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.
  */
-export declare function SPortal({ open, onClose, onOpenChange, anchorRef, placement, align, offset, alignOffset, fit, maxHeight, autoClose, persistent, viewportPadding, onOpenAutoFocus, onCloseAutoFocus, children, className, style, ariaLabel, }: SPortalProps): import("react").JSX.Element;
+export declare function SPortal({ open, onClose, onOpenChange, anchorRef, placement, align, offset, alignOffset, fit, maxHeight, autoClose, persistent, viewportPadding, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, children, className, style, ariaLabel, }: SPortalProps): import("react").JSX.Element;
 export declare namespace SPortal {
     var displayName: string;
 }

package/dist/components/SPortal/SPortal.js

@@ -58,6 +58,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -86,7 +87,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {

package/dist/components/SPortal/SPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":[],"mappings":"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","file":"SPortal.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":[],"mappings":"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","file":"SPortal.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */\n  onPointerDownOutside?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onPointerDownOutside,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n              return;\n            }\n            onPointerDownOutside?.(e);\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}

package/dist/components/SScrollArea/SScrollArea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SScrollArea","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAMrB,IAAM,wBAAA,GACX,kNAAA;AAUK,IAAM,4BAAA,GACX,2TAAA;ACzBF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAcC,gBAAA,CAA6C,SAASC,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SScrollArea","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAarB,IAAM,wBAAA,GACX,kNAAA;AAkBK,IAAM,4BAAA,GACX,2TAAA;ACxCF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAcC,gBAAA,CAA6C,SAASC,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}

package/dist/components/SScrollArea/SScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["SScrollArea"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAMrB,IAAM,wBAAA,GACX,kNAAA;AAUK,IAAM,4BAAA,GACX,2TAAA;ACzBF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAc,UAAA,CAA6C,SAASA,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["SScrollArea"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAarB,IAAM,wBAAA,GACX,kNAAA;AAkBK,IAAM,4BAAA,GACX,2TAAA;ACxCF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAc,UAAA,CAA6C,SAASA,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}

package/dist/components/SSelect/SSelect.cjs

@@ -3394,6 +3394,7 @@ var SField = react.forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
+  const hug = cssLen(width) !== void 0;
   const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
@@ -3402,7 +3403,13 @@ var SField = react.forwardRef(function SField2({
     {
       ref: rootRef,
       "data-name": name || void 0,
-      className: cn("inline-flex h-fit w-full flex-col", className),
+      className: cn(
+        "h-fit flex-col",
+        // hug 시 inline-flex 를 유지하면 기존에 세로로 쌓여 있던 필드들이 한 줄에 붙어버리므로
+        // 블록 레벨(flex)로 두어 쌓임은 그대로 유지한다. 나란히 놓으려면 부모를 flex 로.
+        hug ? "flex w-fit max-w-full" : "inline-flex w-full",
+        className
+      ),
       style,
       onMouseEnter,
       onMouseLeave,
@@ -3440,55 +3447,60 @@ var SField = react.forwardRef(function SField2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
-                disabled && "cursor-not-allowed"
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex min-w-0 flex-col", !hug && "flex-1"),
+            style: { width: cssLen(width), minWidth: cssLen(minWidth) },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
+                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                    disabled && "cursor-not-allowed"
+                  ),
+                  style: {
+                    // @ts-expect-error CSS 변수
+                    "--field-bc": borderColor,
+                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
+                    ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                    ...multiline ? { minHeight: s.height } : { height: s.height },
+                    "borderRadius": s.radius,
+                    "background": bgColor,
+                    "color": textColor
+                  },
+                  "data-focused": focused || void 0,
+                  "data-hovered": hovered || void 0,
+                  children: [
+                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
+                        style: {
+                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
+                          width: cssLen(labelWidth),
+                          justifyContent: ALIGN[addonAlign],
+                          background: "var(--cmp-field-addonLabel-bg)",
+                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
+                          borderTopLeftRadius: s.radius - 1,
+                          borderBottomLeftRadius: s.radius - 1
+                        },
+                        children: [
+                          icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                          effectiveAddonLabel
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1", children })
+                  ]
+                }
               ),
-              style: {
-                // @ts-expect-error CSS 변수
-                "--field-bc": borderColor,
-                // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
-                ...multiline ? { minHeight: s.height } : { height: s.height },
-                "minWidth": cssLen(minWidth),
-                "width": cssLen(width),
-                "borderRadius": s.radius,
-                "background": bgColor,
-                "color": textColor
-              },
-              "data-focused": focused || void 0,
-              "data-hovered": hovered || void 0,
-              children: [
-                effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
-                    style: {
-                      // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
-                      width: cssLen(labelWidth),
-                      justifyContent: ALIGN[addonAlign],
-                      background: "var(--cmp-field-addonLabel-bg)",
-                      borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
-                      borderTopLeftRadius: s.radius - 1,
-                      borderBottomLeftRadius: s.radius - 1
-                    },
-                    children: [
-                      icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                      effectiveAddonLabel
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1", children })
-              ]
-            }
-          ),
-          showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
-        ] })
+              showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3509,6 +3521,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -3537,7 +3550,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
@@ -3642,6 +3657,7 @@ var SSelect = react.forwardRef(function SSelect2({
   const triggerRef = react.useRef(null);
   const searchInputRef = react.useRef(null);
   const listRef = react.useRef(null);
+  const dismissedByPointerRef = react.useRef(false);
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -3671,7 +3687,9 @@ var SSelect = react.forwardRef(function SSelect2({
   const commitOpen = (next) => {
     setOpen(next);
     onOpenChange?.(next);
-    if (!next) {
+    if (next) {
+      dismissedByPointerRef.current = false;
+    } else {
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
@@ -3895,8 +3913,12 @@ var SSelect = react.forwardRef(function SSelect2({
               event.preventDefault();
               requestAnimationFrame(() => searchInputRef.current?.focus());
             },
+            onPointerDownOutside: () => {
+              dismissedByPointerRef.current = true;
+            },
             onCloseAutoFocus: (event) => {
               event.preventDefault();
+              if (dismissedByPointerRef.current) return;
               triggerRef.current?.focus();
             },
             className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",