sellmate-design-system-react 0.1.7 → 0.1.9

package/dist/components/SPortal/SPortal.cjs

@@ -41,12 +41,20 @@ function cn(...inputs) {
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
   "data-[state=closed]:data-[side=top]:animate-floating-out-top",
   "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
   "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
   "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
   "data-[state=closed]:data-[side=left]:animate-floating-out-left",
   "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 var PortalContainerContext = react.createContext(null);

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;ACfO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;ACFV,IAAM,sBAAA,GAAyBC,oBAAkC,IAAI,CAAA;AAE9B,sBAAA,CAAuB;AAOvD,SAAS,kBAAA,GAA8C;AAC5D,EAAA,OAAOC,gBAAA,CAAW,sBAAsB,CAAA,IAAK,MAAA;AAC/C;ACqCO,SAAS,OAAA,CAAQ;AAAA,EACtB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,QAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,CAAA;AAAA,EACT,WAAA,GAAc,CAAA;AAAA,EACd,GAAA,GAAM,KAAA;AAAA,EACN,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,eAAA,GAAkB,CAAA;AAAA,EAClB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,EAAA,uBACEC,eAAA;AAAA,IAAUC,mBAAA,CAAA,IAAA;AAAA,IAAT;AAAA,MACC,IAAA;AAAA,MACA,cAAc,CAAA,IAAA,KAAQ;AACpB,QAAA,YAAA,GAAe,IAAI,CAAA;AACnB,QAAA,IAAI,CAAC,MAAM,OAAA,IAAU;AAAA,MACvB,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAUD,mBAAA,CAAA,MAAA,EAAT,EAAgB,UAAA,EAAY,SAAA,EAAoC,CAAA;AAAA,wBACjEC,cAAA,CAAUD,mBAAA,CAAA,MAAA,EAAT,EAAgB,SAAA,EAAW,eAAA,EAC1B,QAAA,kBAAAC,cAAA;AAAA,UAAUD,mBAAA,CAAA,OAAA;AAAA,UAAT;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,KAAA;AAAA,YACA,UAAA,EAAY,MAAA;AAAA,YACZ,WAAA;AAAA,YACA,gBAAA,EAAkB,eAAA;AAAA,YAClB,YAAA,EAAY,SAAA;AAAA,YAGZ,sBAAsB,CAAA,CAAA,KAAK;AACzB,cAAA,IAAI,cAAc,SAAA,CAAU,OAAA,EAAS,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAC/D,gBAAA,CAAA,CAAE,cAAA,EAAe;AAAA,cACnB;AAAA,YACF,CAAA;AAAA,YAGA,gBAAgB,CAAA,CAAA,KAAK;AACnB,cAAA,IAAI,cAAc,SAAA,CAAU,OAAA,EAAS,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAC/D,gBAAA,CAAA,CAAE,cAAA,EAAe;AAAA,cACnB;AAAA,YACF,CAAA;AAAA,YACA,eAAA,EAAiB,UAAA,GAAa,CAAA,CAAA,KAAK,CAAA,CAAE,gBAAe,GAAI,MAAA;AAAA,YACxD,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,OAAA,EAAS,SAAA,GAAY,MAAM,OAAA,IAAU,GAAI,MAAA;AAAA,YACzC,SAAA,EAAW,EAAA;AAAA,cACT,iGAAA;AAAA,cACA,aAAa,IAAA,IAAQ,iBAAA;AAAA,cACrB,GAAA,IAAO,uCAAA;AAAA,cACP,mBAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,YAE5B;AAAA;AAAA,SACH,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","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) 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 */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=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=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=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=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);\n\nexport const PortalContainerProvider = PortalContainerContext.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","'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) py-4 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);\n\nexport const PortalContainerProvider = PortalContainerContext.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","'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) py-4 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.js

@@ -19,12 +19,20 @@ function cn(...inputs) {
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
   "data-[state=closed]:data-[side=top]:animate-floating-out-top",
   "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
   "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
   "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
   "data-[state=closed]:data-[side=left]:animate-floating-out-left",
   "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 var PortalContainerContext = createContext(null);

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) 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 */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=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=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=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=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);\n\nexport const PortalContainerProvider = PortalContainerContext.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","'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) py-4 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);\n\nexport const PortalContainerProvider = PortalContainerContext.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","'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) py-4 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/SSelect/SSelect.cjs

@@ -2883,12 +2883,20 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
   "data-[state=closed]:data-[side=top]:animate-floating-out-top",
   "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
   "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
   "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
   "data-[state=closed]:data-[side=left]:animate-floating-out-left",
   "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 
@@ -3083,7 +3091,8 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)) });
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -3141,7 +3150,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -3186,11 +3195,17 @@ var STooltip = react.forwardRef(function STooltip2({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover2__namespace.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
@@ -3228,8 +3243,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
 };
 var ALIGN = {
   start: "flex-start",
@@ -3244,6 +3259,7 @@ var SField = react.forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -3258,6 +3274,7 @@ var SField = react.forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -3291,8 +3308,8 @@ var SField = react.forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = 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 = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  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)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3309,7 +3326,7 @@ var SField = react.forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -3335,14 +3352,14 @@ var SField = react.forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "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]",
+                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 && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -3387,15 +3404,28 @@ function flattenOptions(options, depth = 1) {
   const out = [];
   for (const o of options) {
     const hasChildren = Array.isArray(o.children) && o.children.length > 0;
-    out.push({
-      value: String(o.value),
-      label: o.label,
-      disabled: !!o.disabled,
-      depth,
-      isGroup: hasChildren,
-      raw: o.value
-    });
-    if (hasChildren) out.push(...flattenOptions(o.children, depth + 1));
+    if (hasChildren) {
+      const childFlat = flattenOptions(o.children, depth + 1);
+      const allChildrenDisabled = childFlat.every((c) => c.disabled);
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled || allChildrenDisabled,
+        depth,
+        isGroup: true,
+        raw: o.value
+      });
+      out.push(...childFlat);
+    } else {
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled,
+        depth,
+        isGroup: false,
+        raw: o.value
+      });
+    }
   }
   return out;
 }
@@ -3519,6 +3549,9 @@ var SSelect = react.forwardRef(function SSelect2({
   );
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
+  const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
+  const allOptionsDisabled = hasLeaf && selectable.length === 0;
+  const effectiveDisabled = disabled || allOptionsDisabled;
   const showSearch = useSearch && selectable.length >= SEARCH_THRESHOLD;
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
@@ -3569,6 +3602,7 @@ var SSelect = react.forwardRef(function SSelect2({
   const selectStore = /* @__PURE__ */ jsxRuntime.jsxs(
     Ariakit__namespace.SelectProvider,
     {
+      animated: portalContainer == null ? 150 : false,
       value: multi ? selected : selected[0] ?? "",
       setValue: (v) => emit(Array.isArray(v) ? v : v === "" ? [] : [v]),
       open,
@@ -3584,10 +3618,10 @@ var SSelect = react.forwardRef(function SSelect2({
           Ariakit__namespace.Select,
           {
             ref: triggerRef,
-            disabled,
+            disabled: effectiveDisabled,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
             style: {
-              color: disabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
+              color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
               isHtmlLabel(triggerText) ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3602,7 +3636,7 @@ var SSelect = react.forwardRef(function SSelect2({
                 {
                   name: "chevronDown",
                   size: 12,
-                  color: disabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
+                  color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
                   className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
                 }
               )
@@ -3616,7 +3650,7 @@ var SSelect = react.forwardRef(function SSelect2({
             portalElement: portalContainer,
             gutter: 4,
             sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
             style: {
               maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
@@ -3657,7 +3691,7 @@ var SSelect = react.forwardRef(function SSelect2({
               ),
               hasItems ? /* @__PURE__ */ jsxRuntime.jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
                 // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
               )
             ]
           }
@@ -3680,7 +3714,7 @@ var SSelect = react.forwardRef(function SSelect2({
       error: error || ruleError !== "",
       status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled,
+      disabled: effectiveDisabled,
       width,
       className,
       style,
@@ -3715,7 +3749,11 @@ function ItemList({
         {
           className: cn(
             "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium"
+            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+            o.disabled && "text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
           children: o.label
@@ -3742,15 +3780,21 @@ function ItemList({
             "span",
             {
               className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
-                isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                o.disabled ? (
+                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                ) : cn(
+                  "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
+                  isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                )
               ),
               children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
+                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }