daangn · junghyeonsu · Apr 24, 2026 · Apr 22, 2026 · Apr 22, 2026
diff --git a/.changeset/lynx-bottom-sheet-deps.md b/.changeset/lynx-bottom-sheet-deps.md
@@ -0,0 +1,8 @@
+---
+"@seed-design/lynx-react": patch
+---
+
+`BottomSheet`에 필요한 `@lynx-js/lynx-ui-sheet`를 `@seed-design/lynx-react`의 직접 의존성으로 포함합니다.
+
+- `BottomSheet` 사용 시 `@lynx-js/lynx-ui-sheet`를 별도로 설치하지 않아도 됩니다.
+- Lynx `BottomSheet` 문서와 레지스트리 설치 안내를 패키지 의존성 구조에 맞게 정리합니다.
diff --git a/bun.lock b/bun.lock
diff --git a/docs/content/lynx/components/bottom-sheet.mdx b/docs/content/lynx/components/bottom-sheet.mdx
@@ -12,7 +12,7 @@ npx @seed-design/cli@alpha add ui:bottom-sheet --baseUrl https://lynx.seed-desig
 
 <LynxManualInstallation name="bottom-sheet" />
 
-`@seed-design/lynx-react`의 `BottomSheet`는 [`@lynx-js/lynx-ui-sheet`](https://github.com/lynx-family/lynx-ui/tree/main/packages/lynx-ui-sheet)를 래핑합니다. 드래그·스프링·snap·presence 로직은 lynx-ui-sheet가 담당하고, SEED는 공개 API와 recipe 슬롯 스타일만 제공합니다. 따라서 `@lynx-js/lynx-ui-sheet`가 peerDependency로 설치되어 있어야 합니다.
+`@seed-design/lynx-react`의 `BottomSheet`는 [`@lynx-js/lynx-ui-sheet`](https://github.com/lynx-family/lynx-ui/tree/main/packages/lynx-ui-sheet)를 래핑합니다. 드래그·스프링·snap·presence 로직은 lynx-ui-sheet가 담당하고, SEED는 공개 API와 recipe 슬롯 스타일만 제공합니다. `@seed-design/lynx-react`를 설치하면 `@lynx-js/lynx-ui-sheet`도 함께 설치됩니다.
 
 ## Usage
 
@@ -66,11 +66,10 @@ export function App() {
 
 ```tsx
 import { useRef } from "@lynx-js/react";
-import { BottomSheetRoot } from "@seed-design/lynx-react";
-import type { SheetRootRef } from "@lynx-js/lynx-ui-sheet";
+import { BottomSheetRoot, type BottomSheetRootRef } from "@seed-design/lynx-react";
 
 export function App() {
-  const ref = useRef<SheetRootRef>(null);
+  const ref = useRef<BottomSheetRootRef>(null);
 
   return (
     <BottomSheetRoot ref={ref} snapPoints={["fit", "80%"]}>
@@ -102,7 +101,7 @@ Lynx `BottomSheet`는 React `BottomSheet`와 다음과 같은 차이가 있습
 | `BottomSheetCloseButton` | 존재 | **미포함** — Tier B (SVG 지원 후 추가 예정) |
 | `snapPoints` | 없음 | 지원 (`(number \| string)[]`, 기본값 `["fit"]`) |
 | `BottomSheetTrigger`의 `asChild` | 지원 | **미지원** (기본 `<view>`로만 렌더링) |
-| imperative ref API | — | `SheetRootRef.{open, close, snapTo, expand, collapse}` |
+| imperative ref API | — | `BottomSheetRootRef.{open, close, snapTo, expand, collapse}` |
 
 ## Lynx 미지원 기능
 

diff --git a/docs/public/__registry__/lynx/ui/bottom-sheet.json b/docs/public/__registry__/lynx/ui/bottom-sheet.json
@@ -6,11 +6,10 @@
   "snippets": [
     {
       "path": "bottom-sheet.tsx",
-      "content": "/**\n * @file ui:bottom-sheet\n * @requires @seed-design/lynx-react@~0.1.0-alpha.0\n * @requires @seed-design/lynx-css@~0.1.0-alpha.0\n * @requires @lynx-js/lynx-ui-sheet@^3.130.1\n **/\n\nimport {\n  BottomSheet as SeedBottomSheet,\n  type BottomSheetBodyProps as SeedBottomSheetBodyProps,\n  type BottomSheetContentProps as SeedBottomSheetContentProps,\n  type BottomSheetFooterProps as SeedBottomSheetFooterProps,\n  type BottomSheetRootProps as SeedBottomSheetRootProps,\n  type BottomSheetRootRef as SeedBottomSheetRootRef,\n  type BottomSheetTriggerProps as SeedBottomSheetTriggerProps,\n} from \"@seed-design/lynx-react\";\nimport {\n  forwardRef,\n  type ForwardRefExoticComponent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"@lynx-js/react\";\n\nexport interface BottomSheetRootProps extends SeedBottomSheetRootProps {}\n\n/**\n * @see https://seed-design.io/lynx/components/bottom-sheet\n */\nexport const BottomSheetRoot: ForwardRefExoticComponent<\n  PropsWithoutRef<BottomSheetRootProps> & RefAttributes<SeedBottomSheetRootRef>\n> = forwardRef<SeedBottomSheetRootRef, BottomSheetRootProps>((props, ref) => {\n  return <SeedBottomSheet.Root ref={ref} {...props} />;\n});\nBottomSheetRoot.displayName = \"BottomSheetRoot\";\n\nexport interface BottomSheetTriggerProps extends SeedBottomSheetTriggerProps {}\n\nexport const BottomSheetTrigger = SeedBottomSheet.Trigger;\n\nexport interface BottomSheetContentProps extends Omit<SeedBottomSheetContentProps, \"title\"> {\n  title?: ReactNode;\n\n  description?: ReactNode;\n\n  /**\n   * @default false\n   */\n  showHandle?: boolean;\n}\n\n/**\n * Positioner / Backdrop / Handle / Header / Title / Description을 내부에서 조립해\n * 사용자가 단일 컴포넌트로 콘텐츠를 구성할 수 있도록 한다.\n *\n * 웹 BottomSheetContent와 달리 아래는 Lynx에서 미지원:\n * - `showCloseButton` (Tier B: SVG 지원 후 추가 예정)\n * - `aria-label` 기반 VisuallyHidden 제목 fallback (VisuallyHidden 미구현)\n */\nexport const BottomSheetContent = (props: BottomSheetContentProps) => {\n  const { children, title, description, showHandle = false, ...otherProps } = props;\n\n  const shouldRenderHeader = title || description;\n\n  return (\n    <SeedBottomSheet.Positioner>\n      <SeedBottomSheet.Backdrop />\n      <SeedBottomSheet.Content {...otherProps}>\n        {showHandle && <SeedBottomSheet.Handle />}\n        {shouldRenderHeader && (\n          <SeedBottomSheet.Header>\n            {title && <SeedBottomSheet.Title>{title}</SeedBottomSheet.Title>}\n            {description && (\n              <SeedBottomSheet.Description>{description}</SeedBottomSheet.Description>\n            )}\n          </SeedBottomSheet.Header>\n        )}\n        {children}\n      </SeedBottomSheet.Content>\n    </SeedBottomSheet.Positioner>\n  );\n};\n\nexport interface BottomSheetBodyProps extends SeedBottomSheetBodyProps {}\n\nexport const BottomSheetBody: (props: BottomSheetBodyProps) => ReactNode = SeedBottomSheet.Body;\n\nexport interface BottomSheetFooterProps extends SeedBottomSheetFooterProps {}\n\nexport const BottomSheetFooter: (props: BottomSheetFooterProps) => ReactNode =\n  SeedBottomSheet.Footer;\n\n/**\n * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.\n * You can extend this snippet however you want.\n */\n",
+      "content": "/**\n * @file ui:bottom-sheet\n * @requires @seed-design/lynx-react@~0.1.0-alpha.0\n * @requires @seed-design/lynx-css@~0.1.0-alpha.0\n **/\n\nimport {\n  BottomSheet as SeedBottomSheet,\n  type BottomSheetBodyProps as SeedBottomSheetBodyProps,\n  type BottomSheetContentProps as SeedBottomSheetContentProps,\n  type BottomSheetFooterProps as SeedBottomSheetFooterProps,\n  type BottomSheetRootProps as SeedBottomSheetRootProps,\n  type BottomSheetRootRef as SeedBottomSheetRootRef,\n  type BottomSheetTriggerProps as SeedBottomSheetTriggerProps,\n} from \"@seed-design/lynx-react\";\nimport {\n  forwardRef,\n  type ForwardRefExoticComponent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"@lynx-js/react\";\n\nexport interface BottomSheetRootProps extends SeedBottomSheetRootProps {}\n\n/**\n * @see https://seed-design.io/lynx/components/bottom-sheet\n */\nexport const BottomSheetRoot: ForwardRefExoticComponent<\n  PropsWithoutRef<BottomSheetRootProps> & RefAttributes<SeedBottomSheetRootRef>\n> = forwardRef<SeedBottomSheetRootRef, BottomSheetRootProps>((props, ref) => {\n  return <SeedBottomSheet.Root ref={ref} {...props} />;\n});\nBottomSheetRoot.displayName = \"BottomSheetRoot\";\n\nexport interface BottomSheetTriggerProps extends SeedBottomSheetTriggerProps {}\n\nexport const BottomSheetTrigger = SeedBottomSheet.Trigger;\n\nexport interface BottomSheetContentProps extends Omit<SeedBottomSheetContentProps, \"title\"> {\n  title?: ReactNode;\n\n  description?: ReactNode;\n\n  /**\n   * @default false\n   */\n  showHandle?: boolean;\n}\n\n/**\n * Positioner / Backdrop / Handle / Header / Title / Description을 내부에서 조립해\n * 사용자가 단일 컴포넌트로 콘텐츠를 구성할 수 있도록 한다.\n *\n * 웹 BottomSheetContent와 달리 아래는 Lynx에서 미지원:\n * - `showCloseButton` (Tier B: SVG 지원 후 추가 예정)\n * - `aria-label` 기반 VisuallyHidden 제목 fallback (VisuallyHidden 미구현)\n */\nexport const BottomSheetContent = (props: BottomSheetContentProps) => {\n  const { children, title, description, showHandle = false, ...otherProps } = props;\n\n  const shouldRenderHeader = title || description;\n\n  return (\n    <SeedBottomSheet.Positioner>\n      <SeedBottomSheet.Backdrop />\n      <SeedBottomSheet.Content {...otherProps}>\n        {showHandle && <SeedBottomSheet.Handle />}\n        {shouldRenderHeader && (\n          <SeedBottomSheet.Header>\n            {title && <SeedBottomSheet.Title>{title}</SeedBottomSheet.Title>}\n            {description && (\n              <SeedBottomSheet.Description>{description}</SeedBottomSheet.Description>\n            )}\n          </SeedBottomSheet.Header>\n        )}\n        {children}\n      </SeedBottomSheet.Content>\n    </SeedBottomSheet.Positioner>\n  );\n};\n\nexport interface BottomSheetBodyProps extends SeedBottomSheetBodyProps {}\n\nexport const BottomSheetBody: (props: BottomSheetBodyProps) => ReactNode = SeedBottomSheet.Body;\n\nexport interface BottomSheetFooterProps extends SeedBottomSheetFooterProps {}\n\nexport const BottomSheetFooter: (props: BottomSheetFooterProps) => ReactNode =\n  SeedBottomSheet.Footer;\n\n/**\n * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.\n * You can extend this snippet however you want.\n */\n",
       "dependencies": {
         "@seed-design/lynx-react": "~0.1.0-alpha.0",
-        "@seed-design/lynx-css": "~0.1.0-alpha.0",
-        "@lynx-js/lynx-ui-sheet": "^3.130.1"
+        "@seed-design/lynx-css": "~0.1.0-alpha.0"
       }
     }
   ]

diff --git a/docs/public/__registry__/lynx/ui/index.json b/docs/public/__registry__/lynx/ui/index.json
@@ -30,8 +30,7 @@
           "path": "bottom-sheet.tsx",
           "dependencies": {
             "@seed-design/lynx-react": "~0.1.0-alpha.0",
-            "@seed-design/lynx-css": "~0.1.0-alpha.0",
-            "@lynx-js/lynx-ui-sheet": "^3.130.1"
+            "@seed-design/lynx-css": "~0.1.0-alpha.0"
           }
         }
       ],

diff --git a/docs/registry/lynx/registry-ui.ts b/docs/registry/lynx/registry-ui.ts
@@ -23,7 +23,6 @@ export const registryUI: Registry = {
           dependencies: {
             "@seed-design/lynx-react": "~0.1.0-alpha.0",
             "@seed-design/lynx-css": "~0.1.0-alpha.0",
-            "@lynx-js/lynx-ui-sheet": "^3.130.1",
           },
         },
       ],

diff --git a/packages/lynx-react/TODO/README.md b/packages/lynx-react/TODO/README.md
@@ -105,7 +105,7 @@ Phase 0(`useControllableState`, `usePressTap`)이 완료됐고, ActionButton·Pr
 
 Tier A2에 해당하면:
 
-- `packages/lynx-react/package.json`의 `peerDependencies`에 사용하는 `@lynx-js/lynx-ui-*` 패키지를 등록한다.
+- `packages/lynx-react/package.json`의 `dependencies`에 사용하는 `@lynx-js/lynx-ui-*` 패키지를 등록한다.
 - 컴포넌트 JSDoc에 `@platform Lynx`로 내부적으로 어떤 lynx-ui 패키지를 감싸는지 명시한다.
 - SEED 공개 API는 웹(`@seed-design/react`)과 이름을 일치시킨다. 내부 lynx-ui API 누출 금지.
 

diff --git a/packages/lynx-react/TODO/TIER-A2-wrap.md b/packages/lynx-react/TODO/TIER-A2-wrap.md
@@ -3,7 +3,7 @@
 복잡한 제스처·스프링 물리·프레즌스 상태 머신·플로팅 포지셔닝 로직을 [lynx-ui](https://github.com/lynx-family/lynx-ui)에서 가져온다. SEED는 컴포넌트 API와 스타일만 담당.
 
 **공통 규칙:**
-- `packages/lynx-react/package.json`의 `peerDependencies`에 사용하는 `@lynx-js/lynx-ui-*` 패키지를 등록한다.
+- `packages/lynx-react/package.json`의 `dependencies`에 사용하는 `@lynx-js/lynx-ui-*` 패키지를 등록한다.
 - 컴포넌트 JSDoc에 `@platform Lynx`로 내부적으로 어떤 lynx-ui 패키지를 감싸는지 명시한다.
 - SEED 공개 API는 웹(`@seed-design/react`)과 이름을 일치시킨다. **lynx-ui API 누출 금지.**
 
@@ -49,7 +49,7 @@
 - [ ] `src/components/BottomSheet/BottomSheet.tsx`
 - [ ] `docs/content/lynx/components/bottom-sheet.mdx`
 - [ ] `examples/lynx-spa/src/pages/BottomSheetPage.tsx`
-- [ ] `packages/lynx-react/package.json` peerDependencies: `@lynx-js/lynx-ui-sheet`
+- [ ] `packages/lynx-react/package.json` dependencies: `@lynx-js/lynx-ui-sheet`
 
 ---
 
@@ -80,7 +80,7 @@
 - [ ] `src/components/Dialog/Dialog.tsx`
 - [ ] `docs/content/lynx/components/dialog.mdx`
 - [ ] `examples/lynx-spa/src/pages/DialogPage.tsx`
-- [ ] `packages/lynx-react/package.json` peerDependencies: `@lynx-js/lynx-ui-dialog`
+- [ ] `packages/lynx-react/package.json` dependencies: `@lynx-js/lynx-ui-dialog`
 
 ---
 
@@ -131,7 +131,7 @@
 - [ ] `src/components/HelpBubble/HelpBubble.tsx`
 - [ ] `docs/content/lynx/components/help-bubble.mdx`
 - [ ] `examples/lynx-spa/src/pages/HelpBubblePage.tsx`
-- [ ] `packages/lynx-react/package.json` peerDependencies: `@lynx-js/lynx-ui-popover`
+- [ ] `packages/lynx-react/package.json` dependencies: `@lynx-js/lynx-ui-popover`
 
 ---
 
@@ -165,7 +165,7 @@
 - [ ] `src/components/PullToRefresh/PullToRefresh.tsx`
 - [ ] `docs/content/lynx/components/pull-to-refresh.mdx`
 - [ ] `examples/lynx-spa/src/pages/PullToRefreshPage.tsx`
-- [ ] `packages/lynx-react/package.json` peerDependencies: `@lynx-js/lynx-ui-common`
+- [ ] `packages/lynx-react/package.json` dependencies: `@lynx-js/lynx-ui-common`
 
 ---
 
@@ -204,4 +204,4 @@
 - [ ] `src/components/ScrollFog/ScrollFog.tsx`
 - [ ] `docs/content/lynx/components/scroll-fog.mdx`
 - [ ] `examples/lynx-spa/src/pages/ScrollFogPage.tsx`
-- [ ] `packages/lynx-react/package.json` peerDependencies: `@lynx-js/lynx-ui-scroll-view`, `@lynx-js/lynx-ui-common`
+- [ ] `packages/lynx-react/package.json` dependencies: `@lynx-js/lynx-ui-scroll-view`, `@lynx-js/lynx-ui-common`
diff --git a/packages/lynx-react/package.json b/packages/lynx-react/package.json
@@ -31,11 +31,9 @@
   "peerDependencies": {
     "@seed-design/css": ">=1.1.17",
     "@seed-design/lynx-css": ">=0.1.1-alpha.0",
-    "@lynx-js/react": ">=0.100.0",
-    "@lynx-js/lynx-ui-sheet": ">=3.130.1"
+    "@lynx-js/react": ">=0.100.0"
   },
   "devDependencies": {
-    "@lynx-js/lynx-ui-sheet": "^3.130.1",
     "@lynx-js/react": "^0.116.3",
     "@lynx-js/types": "^3.7.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -48,6 +46,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@lynx-js/lynx-ui-sheet": "^3.130.1",
     "@lynx-js/lynx-ui-common": "^3.130.0",
     "@seed-design/lynx-primitive": "workspace:*",
     "clsx": "^2.1.1"