@seed-design/lynx-react 0.2.0-alpha.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/lib/_virtual/_rolldown/runtime.js +13 -0
  2. package/lib/components/ActionButton/ActionButton.d.ts +26 -33
  3. package/lib/components/ActionButton/ActionButton.d.ts.map +1 -1
  4. package/lib/components/ActionButton/ActionButton.jsx +139 -120
  5. package/lib/components/ActionButton/index.d.ts +1 -1
  6. package/lib/components/AppBar/AppBar.d.ts +35 -0
  7. package/lib/components/AppBar/AppBar.d.ts.map +1 -0
  8. package/lib/components/AppBar/AppBar.jsx +132 -0
  9. package/lib/components/AppBar/AppBar.namespace.d.ts +2 -0
  10. package/lib/components/AppBar/AppBar.namespace.d.ts.map +1 -0
  11. package/lib/components/AppBar/AppBar.namespace.js +15 -0
  12. package/lib/components/AppBar/context.d.ts +13 -0
  13. package/lib/components/AppBar/context.d.ts.map +1 -0
  14. package/lib/components/AppBar/context.js +12 -0
  15. package/lib/components/AppBar/index.d.ts +3 -0
  16. package/lib/components/AppBar/index.d.ts.map +1 -0
  17. package/lib/components/AppBar/useAppBar.d.ts +15 -0
  18. package/lib/components/AppBar/useAppBar.d.ts.map +1 -0
  19. package/lib/components/AppBar/useAppBar.js +72 -0
  20. package/lib/components/Badge/Badge.d.ts +14 -0
  21. package/lib/components/Badge/Badge.d.ts.map +1 -0
  22. package/lib/components/Badge/Badge.jsx +15 -0
  23. package/lib/components/Badge/index.d.ts +2 -0
  24. package/lib/components/Badge/index.d.ts.map +1 -0
  25. package/lib/components/BottomSheet/BottomSheet.d.ts +22 -27
  26. package/lib/components/BottomSheet/BottomSheet.d.ts.map +1 -1
  27. package/lib/components/BottomSheet/BottomSheet.jsx +127 -142
  28. package/lib/components/BottomSheet/BottomSheet.namespace.d.ts +1 -1
  29. package/lib/components/BottomSheet/BottomSheet.namespace.js +18 -1
  30. package/lib/components/BottomSheet/index.d.ts +2 -2
  31. package/lib/components/Box/Box.d.ts +20 -0
  32. package/lib/components/Box/Box.d.ts.map +1 -0
  33. package/lib/components/Box/Box.jsx +14 -0
  34. package/lib/components/Box/index.d.ts +2 -0
  35. package/lib/components/Box/index.d.ts.map +1 -0
  36. package/lib/components/Checkbox/Checkbox.d.ts +14 -31
  37. package/lib/components/Checkbox/Checkbox.d.ts.map +1 -1
  38. package/lib/components/Checkbox/Checkbox.jsx +107 -98
  39. package/lib/components/Checkbox/Checkbox.namespace.d.ts +1 -1
  40. package/lib/components/Checkbox/Checkbox.namespace.js +12 -1
  41. package/lib/components/Checkbox/index.d.ts +2 -2
  42. package/lib/components/Icon/Icon.d.ts +37 -0
  43. package/lib/components/Icon/Icon.d.ts.map +1 -0
  44. package/lib/components/Icon/Icon.jsx +143 -0
  45. package/lib/components/Icon/index.d.ts +2 -0
  46. package/lib/components/Icon/index.d.ts.map +1 -0
  47. package/lib/components/ProgressCircle/ProgressCircle.d.ts +4 -8
  48. package/lib/components/ProgressCircle/ProgressCircle.d.ts.map +1 -1
  49. package/lib/components/ProgressCircle/ProgressCircle.jsx +255 -260
  50. package/lib/components/ProgressCircle/ProgressCircle.namespace.d.ts +1 -1
  51. package/lib/components/ProgressCircle/ProgressCircle.namespace.js +9 -1
  52. package/lib/components/ProgressCircle/index.d.ts +2 -2
  53. package/lib/components/RadioGroup/RadioGroup.d.ts +12 -29
  54. package/lib/components/RadioGroup/RadioGroup.d.ts.map +1 -1
  55. package/lib/components/RadioGroup/RadioGroup.jsx +134 -118
  56. package/lib/components/RadioGroup/RadioGroup.namespace.d.ts +1 -1
  57. package/lib/components/RadioGroup/RadioGroup.namespace.js +12 -1
  58. package/lib/components/RadioGroup/index.d.ts +2 -2
  59. package/lib/components/Stack/Stack.d.ts +33 -0
  60. package/lib/components/Stack/Stack.d.ts.map +1 -0
  61. package/lib/components/Stack/Stack.jsx +39 -0
  62. package/lib/components/Stack/index.d.ts +2 -0
  63. package/lib/components/Stack/index.d.ts.map +1 -0
  64. package/lib/components/Switch/Switch.d.ts +8 -14
  65. package/lib/components/Switch/Switch.d.ts.map +1 -1
  66. package/lib/components/Switch/Switch.jsx +82 -56
  67. package/lib/components/Switch/Switch.namespace.d.ts +1 -1
  68. package/lib/components/Switch/Switch.namespace.js +11 -1
  69. package/lib/components/Switch/index.d.ts +2 -2
  70. package/lib/components/TagGroup/TagGroup.d.ts +8 -14
  71. package/lib/components/TagGroup/TagGroup.d.ts.map +1 -1
  72. package/lib/components/TagGroup/TagGroup.jsx +42 -39
  73. package/lib/components/TagGroup/TagGroup.namespace.d.ts +1 -1
  74. package/lib/components/TagGroup/TagGroup.namespace.js +10 -1
  75. package/lib/components/TagGroup/index.d.ts +2 -2
  76. package/lib/components/Text/Text.d.ts +7 -0
  77. package/lib/components/Text/Text.d.ts.map +1 -0
  78. package/lib/components/Text/Text.jsx +28 -0
  79. package/lib/components/Text/index.d.ts +2 -0
  80. package/lib/components/Text/index.d.ts.map +1 -0
  81. package/lib/components/index.d.ts +13 -7
  82. package/lib/components/index.d.ts.map +1 -1
  83. package/lib/hooks/index.d.ts +5 -3
  84. package/lib/hooks/index.d.ts.map +1 -1
  85. package/lib/hooks/useControllableState.js +23 -23
  86. package/lib/hooks/useIconColor.d.ts +6 -3
  87. package/lib/hooks/useIconColor.d.ts.map +1 -1
  88. package/lib/hooks/useIconColor.js +34 -37
  89. package/lib/hooks/usePressTap.d.ts +11 -8
  90. package/lib/hooks/usePressTap.d.ts.map +1 -1
  91. package/lib/hooks/usePressTap.js +31 -31
  92. package/lib/hooks/useSafeArea.d.ts +19 -0
  93. package/lib/hooks/useSafeArea.d.ts.map +1 -0
  94. package/lib/hooks/useSafeArea.js +33 -0
  95. package/lib/hooks/useSeedClassName.d.ts +27 -0
  96. package/lib/hooks/useSeedClassName.d.ts.map +1 -0
  97. package/lib/hooks/useSeedClassName.js +32 -0
  98. package/lib/index.d.ts +4 -3
  99. package/lib/index.d.ts.map +1 -1
  100. package/lib/index.js +30 -3
  101. package/lib/types.d.ts +51 -0
  102. package/lib/types.d.ts.map +1 -0
  103. package/lib/utils/children.d.ts +3 -0
  104. package/lib/utils/children.d.ts.map +1 -0
  105. package/lib/utils/children.js +8 -0
  106. package/lib/utils/create-slot-recipe-context.d.ts +13 -12
  107. package/lib/utils/create-slot-recipe-context.d.ts.map +1 -1
  108. package/lib/utils/create-slot-recipe-context.jsx +88 -70
  109. package/lib/utils/get-seed-class-name.d.ts +9 -7
  110. package/lib/utils/get-seed-class-name.d.ts.map +1 -1
  111. package/lib/utils/get-seed-class-name.js +29 -37
  112. package/lib/utils/index.d.ts +4 -4
  113. package/lib/utils/resolve-recipe-token.js +45 -43
  114. package/lib/utils/split-multiple-variants-props.js +32 -32
  115. package/lib/utils/styled.d.ts +83 -0
  116. package/lib/utils/styled.d.ts.map +1 -0
  117. package/lib/utils/styled.js +144 -0
  118. package/package.json +10 -9
  119. package/src/components/ActionButton/ActionButton.test.tsx +167 -0
  120. package/src/components/ActionButton/ActionButton.tsx +210 -169
  121. package/src/components/AppBar/AppBar.namespace.ts +18 -0
  122. package/src/components/AppBar/AppBar.test.tsx +270 -0
  123. package/src/components/AppBar/AppBar.tsx +288 -0
  124. package/src/components/AppBar/context.ts +27 -0
  125. package/src/components/AppBar/index.ts +21 -0
  126. package/src/components/AppBar/useAppBar.ts +100 -0
  127. package/src/components/Badge/Badge.test.tsx +54 -0
  128. package/src/components/Badge/Badge.tsx +32 -0
  129. package/src/components/Badge/index.ts +1 -0
  130. package/src/components/BottomSheet/BottomSheet.test.tsx +219 -0
  131. package/src/components/BottomSheet/BottomSheet.tsx +120 -83
  132. package/src/components/Box/Box.test.tsx +85 -0
  133. package/src/components/Box/Box.tsx +39 -0
  134. package/src/components/Box/index.ts +1 -0
  135. package/src/components/Checkbox/Checkbox.tsx +106 -116
  136. package/src/components/Icon/Icon.tsx +265 -0
  137. package/src/components/Icon/index.ts +8 -0
  138. package/src/components/ProgressCircle/ProgressCircle.tsx +39 -25
  139. package/src/components/RadioGroup/RadioGroup.tsx +98 -117
  140. package/src/components/Stack/Stack.tsx +97 -0
  141. package/src/components/Stack/index.ts +1 -0
  142. package/src/components/Switch/Switch.tsx +59 -50
  143. package/src/components/TagGroup/TagGroup.tsx +27 -25
  144. package/src/components/Text/Text.tsx +64 -0
  145. package/src/components/Text/index.ts +1 -0
  146. package/src/components/index.ts +6 -0
  147. package/src/hooks/index.ts +2 -0
  148. package/src/hooks/{__tests__/useControllableState.test.ts → useControllableState.test.ts} +1 -1
  149. package/src/hooks/{__tests__/useIconColor.test.ts → useIconColor.test.ts} +1 -1
  150. package/src/hooks/useIconColor.ts +22 -12
  151. package/src/hooks/{__tests__/usePressTap.test.ts → usePressTap.test.ts} +1 -1
  152. package/src/hooks/usePressTap.ts +14 -10
  153. package/src/hooks/useSafeArea.test.ts +83 -0
  154. package/src/hooks/useSafeArea.ts +56 -0
  155. package/src/hooks/useSeedClassName.ts +35 -0
  156. package/src/index.ts +1 -0
  157. package/src/types.ts +76 -0
  158. package/src/utils/children.ts +13 -0
  159. package/src/utils/create-slot-recipe-context.test.tsx +96 -0
  160. package/src/utils/create-slot-recipe-context.tsx +55 -15
  161. package/src/utils/get-seed-class-name.ts +10 -12
  162. package/src/utils/{__tests__/split-multiple-variants-props.test.ts → split-multiple-variants-props.test.ts} +1 -1
  163. package/src/utils/styled.ts +442 -0
  164. package/lib/components/ActionButton/index.js +0 -1
  165. package/lib/components/BottomSheet/index.js +0 -2
  166. package/lib/components/Checkbox/index.js +0 -2
  167. package/lib/components/ProgressCircle/index.js +0 -2
  168. package/lib/components/RadioGroup/index.js +0 -2
  169. package/lib/components/Switch/index.js +0 -2
  170. package/lib/components/TagGroup/index.js +0 -2
  171. package/lib/components/index.js +0 -7
  172. package/lib/hooks/index.js +0 -3
  173. package/lib/utils/index.js +0 -4
  174. package/src/components/ActionButton/__tests__/ActionButton.test.tsx +0 -35
  175. package/src/components/BottomSheet/__tests__/BottomSheet.test.tsx +0 -119
  176. package/src/components/__tests__/ProgressCircle.test.ts +0 -33
  177. package/src/components/__tests__/exports.test.ts +0 -38
  178. package/src/components/__tests__/switch.test.ts +0 -34
  179. package/src/utils/__tests__/create-slot-recipe-context.test.tsx +0 -228
@@ -0,0 +1,3 @@
1
+ export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, type AppBarIconButtonProps, type AppBarLeftProps, type AppBarMainProps, type AppBarRightProps, type AppBarRootProps, type AppBarRootProps as AppBarProps, type AppBarSlotProps, type AppBarSubtitleProps, type AppBarTitleProps, } from './AppBar';
2
+ export * as AppBar from './AppBar.namespace';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { AppBarVariantProps, AppBarVariant } from '@seed-design/lynx-css/recipes/app-bar';
2
+ import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
3
+ import { LynxViewProps } from '../../types';
4
+ import { AppBarContextValue } from './context';
5
+ type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
6
+ type AppBarStyleObject = Record<string, string | number>;
7
+ export declare function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): number | null;
8
+ export declare function getMainLayoutStyle(theme: AppBarMainVariantProps["theme"], safeAreaInsetTop: string): AppBarStyleObject | undefined;
9
+ export declare function useAppBar(variantProps: AppBarVariantProps): {
10
+ contextValue: AppBarContextValue;
11
+ resolvedVariantProps: Partial< AppBarVariant>;
12
+ rootLayoutStyle: AppBarStyleObject;
13
+ };
14
+ export {};
15
+ //# sourceMappingURL=useAppBar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/useAppBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAA4B,MAAM,WAAW,CAAC;AAO9E,KAAK,mBAAmB,GAAG,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC1E,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAkBzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAMvF;AAaD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,EACtC,gBAAgB,EAAE,MAAM,GACvB,iBAAiB,GAAG,SAAS,CAO/B;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,kBAAkB;;;;EAoCzD"}
@@ -0,0 +1,72 @@
1
+ import { useSafeArea } from "../../hooks/useSafeArea.js";
2
+ import * as React from "@lynx-js/react";
3
+ //#region src/components/AppBar/useAppBar.ts
4
+ var APP_BAR_HEIGHT_BY_THEME = {
5
+ cupertino: "44px",
6
+ android: "56px"
7
+ };
8
+ function getDefaultAppBarTheme() {
9
+ const systemInfo = globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo);
10
+ if (systemInfo == null) return "cupertino";
11
+ return systemInfo.platform === "Android" ? "android" : "cupertino";
12
+ }
13
+ function getLayoutWidth(event) {
14
+ const eventWithWidth = event;
15
+ const nextWidth = event.detail?.width ?? event.params?.width ?? eventWithWidth.width;
16
+ if (typeof nextWidth !== "number" || !Number.isFinite(nextWidth)) return null;
17
+ return Math.max(0, nextWidth);
18
+ }
19
+ function getCenteredTitlePadding(leftWidth, rightWidth) {
20
+ return `${Math.max(leftWidth, rightWidth)}px`;
21
+ }
22
+ function getRootLayoutStyle(theme, safeAreaInsetTop) {
23
+ return {
24
+ height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
25
+ paddingTop: safeAreaInsetTop
26
+ };
27
+ }
28
+ function getMainLayoutStyle(theme, safeAreaInsetTop) {
29
+ if (theme !== "cupertino") return void 0;
30
+ return {
31
+ top: safeAreaInsetTop,
32
+ bottom: "0px"
33
+ };
34
+ }
35
+ function useAppBar(variantProps) {
36
+ const { safeAreaInsetTop } = useSafeArea();
37
+ const [leftWidth, setLeftWidth] = React.useState(0);
38
+ const [rightWidth, setRightWidth] = React.useState(0);
39
+ const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
40
+ const resolvedVariantProps = {
41
+ ...variantProps,
42
+ theme: resolvedTheme
43
+ };
44
+ const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
45
+ const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
46
+ const sharedVariantProps = React.useMemo(() => ({
47
+ theme: resolvedVariantProps.theme,
48
+ tone: resolvedVariantProps.tone,
49
+ transitionStyle: resolvedVariantProps.transitionStyle
50
+ }), [
51
+ resolvedVariantProps.theme,
52
+ resolvedVariantProps.tone,
53
+ resolvedVariantProps.transitionStyle
54
+ ]);
55
+ return {
56
+ contextValue: React.useMemo(() => ({
57
+ centeredTitlePaddingX,
58
+ safeAreaInsetTop,
59
+ sharedVariantProps,
60
+ setLeftWidth,
61
+ setRightWidth
62
+ }), [
63
+ centeredTitlePaddingX,
64
+ safeAreaInsetTop,
65
+ sharedVariantProps
66
+ ]),
67
+ resolvedVariantProps,
68
+ rootLayoutStyle
69
+ };
70
+ }
71
+ //#endregion
72
+ export { getLayoutWidth, getMainLayoutStyle, useAppBar };
@@ -0,0 +1,14 @@
1
+ import { BadgeVariantProps } from '@seed-design/lynx-css/recipes/badge';
2
+ import { LynxStyledElementProps } from '../../types';
3
+ import * as React from "@lynx-js/react";
4
+ /**
5
+ * @platform Lynx
6
+ *
7
+ * 웹 Badge와 동일한 variant surface를 제공하지만, Lynx native `<view>` / `<text>`를
8
+ * 직접 렌더링합니다. Badge는 정적 정보 표시 컴포넌트이므로 press/tap API를 별도
9
+ * 소유하지 않습니다.
10
+ */
11
+ export interface BadgeProps extends BadgeVariantProps, LynxStyledElementProps {
12
+ }
13
+ export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<unknown>>;
14
+ //# sourceMappingURL=Badge.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAEpF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,WAAW,UAAW,SAAQ,iBAAiB,EAAE,sBAAsB;CAAG;AAEhF,eAAO,MAAM,KAAK,4EAchB,CAAC"}
@@ -0,0 +1,15 @@
1
+ import clsx from "clsx";
2
+ import * as React from "@lynx-js/react";
3
+ import { badge } from "@seed-design/lynx-css/recipes/badge";
4
+ //#region src/components/Badge/Badge.tsx
5
+ var Badge = React.forwardRef((props, ref) => {
6
+ const [variantProps, otherProps] = badge.splitVariantProps(props);
7
+ const classes = badge(variantProps);
8
+ const { children, className, ...nativeProps } = otherProps;
9
+ return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classes.root, className)}>
10
+ <text className={classes.label}>{children}</text>
11
+ </view>;
12
+ });
13
+ Badge.displayName = "Badge";
14
+ //#endregion
15
+ export { Badge };
@@ -0,0 +1,2 @@
1
+ export { Badge, type BadgeProps } from './Badge';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
@@ -1,7 +1,8 @@
1
- import { type BottomSheetVariantProps } from "@seed-design/lynx-css/recipes/bottom-sheet";
2
- import { type SheetBackdropProps, type SheetContentProps, type SheetHandleProps, type SheetRootProps, type SheetRootRef, type SheetViewProps } from "@lynx-js/lynx-ui-sheet";
3
- import { type ReactNode } from "@lynx-js/react";
4
- import type { CSSProperties } from "react";
1
+ import { BottomSheetVariantProps } from '@seed-design/lynx-css/recipes/bottom-sheet';
2
+ import { SheetBackdropProps, SheetContentProps, SheetHandleProps, SheetRootProps, SheetRootRef, SheetViewProps } from '@lynx-js/lynx-ui-sheet';
3
+ import { ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from '@lynx-js/react';
4
+ import { LynxPressableProps, LynxStyledElementProps } from '../../types';
5
+ type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
5
6
  export type BottomSheetRootRef = SheetRootRef;
6
7
  export interface BottomSheetRootProps extends BottomSheetVariantProps, Omit<SheetRootProps, "show" | "defaultShow" | "onShowChange"> {
7
8
  /**
@@ -30,14 +31,10 @@ export interface BottomSheetRootProps extends BottomSheetVariantProps, Omit<Shee
30
31
  * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
31
32
  * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
32
33
  */
33
- export declare const BottomSheetRoot: import("react").ForwardRefExoticComponent<BottomSheetRootProps & import("react").RefAttributes<SheetRootRef>>;
34
- export interface BottomSheetTriggerProps {
35
- children?: ReactNode;
36
- className?: string;
37
- style?: CSSProperties;
38
- bindtap?: () => void;
34
+ export declare const BottomSheetRoot: LynxForwardRefComponent<SheetRootRef, BottomSheetRootProps>;
35
+ export interface BottomSheetTriggerProps extends LynxStyledElementProps, Pick<LynxPressableProps, "bindtap"> {
39
36
  }
40
- export declare const BottomSheetTrigger: import("react").ForwardRefExoticComponent<BottomSheetTriggerProps & import("react").RefAttributes<unknown>>;
37
+ export declare const BottomSheetTrigger: LynxForwardRefComponent<unknown, BottomSheetTriggerProps>;
41
38
  export interface BottomSheetPositionerProps extends SheetViewProps {
42
39
  }
43
40
  /**
@@ -50,43 +47,41 @@ export interface BottomSheetPositionerProps extends SheetViewProps {
50
47
  * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
51
48
  * 뷰포트 커버 레이아웃을 보장한다.
52
49
  */
53
- export declare const BottomSheetPositioner: import("react").ForwardRefExoticComponent<BottomSheetPositionerProps & import("react").RefAttributes<unknown>>;
50
+ export declare const BottomSheetPositioner: LynxForwardRefComponent<unknown, BottomSheetPositionerProps>;
54
51
  export interface BottomSheetBackdropProps extends SheetBackdropProps {
55
52
  }
56
- export declare const BottomSheetBackdrop: import("react").ForwardRefExoticComponent<BottomSheetBackdropProps & import("react").RefAttributes<unknown>>;
53
+ export declare const BottomSheetBackdrop: LynxForwardRefComponent<unknown, BottomSheetBackdropProps>;
57
54
  export interface BottomSheetContentProps extends SheetContentProps {
58
55
  }
59
- export declare const BottomSheetContent: import("react").ForwardRefExoticComponent<BottomSheetContentProps & import("react").RefAttributes<unknown>>;
56
+ export declare const BottomSheetContent: LynxForwardRefComponent<unknown, BottomSheetContentProps>;
60
57
  export interface BottomSheetHandleProps extends SheetHandleProps {
61
58
  }
62
59
  /**
63
60
  * @remarks
64
- * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
65
- * `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
66
- * BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
61
+ * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다.
62
+ * Lynx drag handler는 `SheetHandle`의 outer view에 붙으므로, 44x44 target
63
+ * area는 `SheetHandle`에 적용하고 보이는 handle은 그 중심에 배치한다.
67
64
  */
68
- export declare function BottomSheetHandle(props: BottomSheetHandleProps): import("react").JSX.Element;
65
+ export declare function BottomSheetHandle(props: BottomSheetHandleProps): ReactElement;
69
66
  export declare namespace BottomSheetHandle {
70
67
  var displayName: string;
71
68
  }
72
- export interface BottomSheetSlotProps {
73
- children?: ReactNode;
74
- className?: string;
75
- style?: CSSProperties;
69
+ export interface BottomSheetSlotProps extends LynxStyledElementProps {
76
70
  }
77
71
  export interface BottomSheetHeaderProps extends BottomSheetSlotProps {
78
72
  }
79
- export declare const BottomSheetHeader: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
73
+ export declare const BottomSheetHeader: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
80
74
  export interface BottomSheetBodyProps extends BottomSheetSlotProps {
81
75
  }
82
- export declare const BottomSheetBody: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
76
+ export declare const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetBodyProps>;
83
77
  export interface BottomSheetFooterProps extends BottomSheetSlotProps {
84
78
  }
85
- export declare const BottomSheetFooter: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
79
+ export declare const BottomSheetFooter: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
86
80
  export interface BottomSheetTitleProps extends BottomSheetSlotProps {
87
81
  }
88
- export declare const BottomSheetTitle: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
82
+ export declare const BottomSheetTitle: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
89
83
  export interface BottomSheetDescriptionProps extends BottomSheetSlotProps {
90
84
  }
91
- export declare const BottomSheetDescription: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
85
+ export declare const BottomSheetDescription: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
86
+ export {};
92
87
  //# sourceMappingURL=BottomSheet.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAOL,KAAK,SAAS,EAGf,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwE3C,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,+GAuD3B,CAAC;AAOF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,6GA4B7B,CAAC;AAOH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,gHAGjC,CAAC;AAYF,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,8GAG/B,CAAC;AAGF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,6GAiB7B,CAAC;AAOH,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAK9D;yBALe,iBAAiB;;;AAkBjC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsCD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,0GAA2B,CAAC;AAG1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,0GAAyB,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,0GAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,0GAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,0GAAgC,CAAC"}
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAOL,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAC5D,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CACtC,CAAC;AAmEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,YAAY,EAAE,oBAAoB,CAsDpF,CAAC;AAOL,MAAM,WAAW,uBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE1C,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CA6BrF,CAAC;AAOL,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,EAAE,uBAAuB,CAAC,OAAO,EAAE,0BAA0B,CACpB,CAAC;AAY5E,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,EAAE,uBAAuB,CAAC,OAAO,EAAE,wBAAwB,CAChB,CAAC;AAG5E,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CA2BrF,CAAC;AAOL,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAW7E;yBAXe,iBAAiB;;;AAwBjC,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;CAAG;AA0CvE,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,OAAO,EAAE,oBAAoB,CAiBjF,CAAC;AAGH,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,wDAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,wDAAgC,CAAC"}
@@ -1,178 +1,163 @@
1
- import { bottomSheet, } from "@seed-design/lynx-css/recipes/bottom-sheet";
2
- import { bottomSheetHandle } from "@seed-design/lynx-css/recipes/bottom-sheet-handle";
3
- import { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView, } from "@lynx-js/lynx-ui-sheet";
4
- import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, } from "@lynx-js/react";
1
+ import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
2
+ import { useSafeArea } from "../../hooks/useSafeArea.js";
5
3
  import clsx from "clsx";
6
- import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
7
- const { ClassNamesProvider, useClassNames, withContext } = createSlotRecipeContext(bottomSheet);
8
- const DEFAULT_SNAP_POINTS = ["fit"];
9
- const SKIP_ANIMATION_TRANSITION = {
10
- type: "tween",
11
- duration: 0,
4
+ import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "@lynx-js/react";
5
+ import { bottomSheet } from "@seed-design/lynx-css/recipes/bottom-sheet";
6
+ import { bottomSheetHandle } from "@seed-design/lynx-css/recipes/bottom-sheet-handle";
7
+ import { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView } from "@lynx-js/lynx-ui-sheet";
8
+ //#region src/components/BottomSheet/BottomSheet.tsx
9
+ var { ClassNamesProvider, useClassNames, withContext } = createSlotRecipeContext(bottomSheet);
10
+ var DEFAULT_SNAP_POINTS = ["fit"];
11
+ var SKIP_ANIMATION_TRANSITION = {
12
+ type: "tween",
13
+ duration: 0
12
14
  };
13
- ////////////////////////////////////////////////////////////////////////////////////
14
- // SEED Transitions — 웹 SEED BottomSheet (recipe: d6/d4 + enter-expressive/enter/exit)
15
- // 의 감각을 lynx-ui-sheet의 spring으로 근사한 기본값.
16
- //
17
- // spring을 사용하는 이유:
18
- // - lynx-ui-sheet 내장 main-thread 구현이라 stiffness/damping/mass만 JSON 직렬화로
19
- // 안전 전달 (ease 함수 크로스스레드 문제 없음)
20
- // - lynx-ui 공식 예제도 spring 기본 — 런타임 안정성 검증됨
21
- //
22
- // 튜닝 기준 (300ms 수준의 빠르고 약간의 탄성감):
23
- // - 웹 d6 + enter-expressive ≈ stiffness 400, damping 35 (snap 드래그 settle)
24
- // - 웹 d6 + enter ≈ stiffness 350, damping 32 (첫 open)
25
- // - 웹 d4 + exit ≈ stiffness 400, damping 40 (close, critically damped)
26
- ////////////////////////////////////////////////////////////////////////////////////
27
- const SEED_SNAP_ANIMATION = {
28
- type: "spring",
29
- stiffness: 400,
30
- damping: 35,
15
+ var SEED_SNAP_ANIMATION = {
16
+ type: "spring",
17
+ stiffness: 400,
18
+ damping: 35
31
19
  };
32
- const SEED_ENTER_ANIMATION = {
33
- type: "spring",
34
- stiffness: 350,
35
- damping: 32,
20
+ var SEED_ENTER_ANIMATION = {
21
+ type: "spring",
22
+ stiffness: 350,
23
+ damping: 32
36
24
  };
37
- const SEED_EXIT_ANIMATION = {
38
- type: "spring",
39
- stiffness: 400,
40
- damping: 40,
25
+ var SEED_EXIT_ANIMATION = {
26
+ type: "spring",
27
+ stiffness: 400,
28
+ damping: 40
41
29
  };
42
- const BottomSheetContext = createContext(null);
30
+ var BottomSheetContext = createContext(null);
43
31
  function useBottomSheetContext() {
44
- const ctx = useContext(BottomSheetContext);
45
- if (!ctx) {
46
- throw new Error("BottomSheet compound components must be used within BottomSheetRoot");
47
- }
48
- return ctx;
32
+ const ctx = useContext(BottomSheetContext);
33
+ if (!ctx) throw new Error("BottomSheet compound components must be used within BottomSheetRoot");
34
+ return ctx;
49
35
  }
50
36
  /**
51
- * @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
52
- *
53
- * 웹 대비 미지원 기능:
54
- * - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
55
- * - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
56
- * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
57
- * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
58
- */
59
- export const BottomSheetRoot = forwardRef((props, forwardedRef) => {
60
- const [variantProps, restProps] = bottomSheet.splitVariantProps(props);
61
- const { open, defaultOpen, onOpenChange, snapPoints, children, ...nativeProps } = restProps;
62
- const { headerAlign, skipAnimation } = variantProps;
63
- const internalRef = useRef(null);
64
- // `SheetRoot`에 직접 ref를 넘겨 Trigger 컨텍스트와 외부 ref에 같은 인스턴스를 동기화한다.
65
- // `useImperativeHandle([])`은 마운트 시점 값(null)을 고정시키는 함정이 있어 사용하지 않는다.
66
- const mergedRef = useCallback((value) => {
67
- internalRef.current = value;
68
- if (typeof forwardedRef === "function") {
69
- forwardedRef(value);
70
- }
71
- else if (forwardedRef) {
72
- forwardedRef.current = value;
73
- }
74
- }, [forwardedRef]);
75
- const classNames = useMemo(() => bottomSheet(variantProps),
76
- // variantProps 객체는 매 렌더 새로 생성되므로 개별 variant 값으로 의존성을 고정한다.
77
- [headerAlign, skipAnimation]);
78
- const shouldSkipAnimation = skipAnimation === true;
79
- const context = useMemo(() => ({
80
- rootRef: internalRef,
81
- options: {
82
- skipAnimation: shouldSkipAnimation,
83
- },
84
- }), [shouldSkipAnimation]);
85
- return (<BottomSheetContext.Provider value={context}>
37
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
38
+ *
39
+ * 웹 대비 미지원 기능:
40
+ * - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
41
+ * - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
42
+ * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
43
+ * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
44
+ */
45
+ var BottomSheetRoot = forwardRef((props, forwardedRef) => {
46
+ const [variantProps, restProps] = bottomSheet.splitVariantProps(props);
47
+ const { open, defaultOpen, onOpenChange, snapPoints, children, ...nativeProps } = restProps;
48
+ const { headerAlign, skipAnimation } = variantProps;
49
+ const internalRef = useRef(null);
50
+ const mergedRef = useCallback((value) => {
51
+ internalRef.current = value;
52
+ if (typeof forwardedRef === "function") forwardedRef(value);
53
+ else if (forwardedRef) forwardedRef.current = value;
54
+ }, [forwardedRef]);
55
+ const classNames = useMemo(() => bottomSheet(variantProps), [headerAlign, skipAnimation]);
56
+ const shouldSkipAnimation = skipAnimation === true;
57
+ const context = useMemo(() => ({
58
+ rootRef: internalRef,
59
+ options: { skipAnimation: shouldSkipAnimation }
60
+ }), [shouldSkipAnimation]);
61
+ return <BottomSheetContext.Provider value={context}>
86
62
  <ClassNamesProvider value={classNames}>
87
63
  <SheetRoot ref={mergedRef} show={open} defaultShow={defaultOpen} onShowChange={onOpenChange} snapPoints={snapPoints ?? DEFAULT_SNAP_POINTS} {...nativeProps}>
88
64
  {children}
89
65
  </SheetRoot>
90
66
  </ClassNamesProvider>
91
- </BottomSheetContext.Provider>);
67
+ </BottomSheetContext.Provider>;
92
68
  });
93
69
  BottomSheetRoot.displayName = "BottomSheetRoot";
94
- export const BottomSheetTrigger = forwardRef((props, ref) => {
95
- const { children, className, style, bindtap: userBindtap } = props;
96
- const { rootRef, options } = useBottomSheetContext();
97
- // `bindtap`을 직접 prop으로 쓰면 React DOM `<view>` 타입(SVG)이 적용되어 TS가 거부한다.
98
- // Lynx JSX 런타임은 이 prop을 올바르게 처리하므로 spread로 우회한다 (ActionButton과 동일 패턴).
99
- const handlers = {
100
- bindtap: () => {
101
- if (options.skipAnimation) {
102
- rootRef.current?.open({ animate: false });
103
- }
104
- else {
105
- rootRef.current?.open();
106
- }
107
- userBindtap?.();
108
- },
109
- };
110
- return (<view {...(ref ? { ref: ref } : {})} {...handlers} className={className} style={style}>
111
- {children}
112
- </view>);
70
+ var BottomSheetTrigger = forwardRef((props, ref) => {
71
+ const { children, className, style, bindtap: userBindtap } = props;
72
+ const { rootRef, options } = useBottomSheetContext();
73
+ const handlers = { bindtap: (event, instance) => {
74
+ if (options.skipAnimation) rootRef.current?.open({ animate: false });
75
+ else rootRef.current?.open();
76
+ userBindtap?.(event, instance);
77
+ } };
78
+ return <view {...ref ? { ref } : {}} {...handlers} className={className} style={style}>
79
+ {children}
80
+ </view>;
113
81
  });
114
82
  BottomSheetTrigger.displayName = "BottomSheetTrigger";
115
83
  /**
116
- * Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
117
- *
118
- * `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
119
- * 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
120
- * 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
121
- *
122
- * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
123
- * 뷰포트 커버 레이아웃을 보장한다.
124
- */
125
- export const BottomSheetPositioner = withContext(SheetView, "positioner");
84
+ * Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
85
+ *
86
+ * `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
87
+ * 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
88
+ * 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
89
+ *
90
+ * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
91
+ * 뷰포트 커버 레이아웃을 보장한다.
92
+ */
93
+ var BottomSheetPositioner = withContext(SheetView, "positioner");
126
94
  BottomSheetPositioner.displayName = "BottomSheetPositioner";
127
- export const BottomSheetBackdrop = withContext(SheetBackdrop, "backdrop");
95
+ var BottomSheetBackdrop = withContext(SheetBackdrop, "backdrop");
128
96
  BottomSheetBackdrop.displayName = "BottomSheetBackdrop";
129
- export const BottomSheetContent = forwardRef((props, ref) => {
130
- const { className, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
131
- const classNames = useClassNames();
132
- const { options } = useBottomSheetContext();
133
- const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : undefined;
134
- return (<SheetContent {...(ref ? { ref } : {})} {...restProps} className={clsx(classNames.content, className)} snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION} enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION} exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION}/>);
97
+ var BottomSheetContent = forwardRef((props, ref) => {
98
+ const { className, innerStyle, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
99
+ const classNames = useClassNames();
100
+ const { options } = useBottomSheetContext();
101
+ const { safeAreaInsetBottom } = useSafeArea();
102
+ const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : void 0;
103
+ return <SheetContent {...ref ? { ref } : {}} {...restProps} className={clsx(classNames.content, className)} innerStyle={{
104
+ display: "flex",
105
+ flexDirection: "column",
106
+ minHeight: "0",
107
+ paddingBottom: safeAreaInsetBottom,
108
+ ...innerStyle
109
+ }} snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION} enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION} exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION} />;
135
110
  });
136
111
  BottomSheetContent.displayName = "BottomSheetContent";
137
112
  /**
138
- * @remarks
139
- * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
140
- * `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
141
- * BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
142
- */
143
- export function BottomSheetHandle(props) {
144
- const { className, style, ...rest } = props;
145
- const classNames = bottomSheetHandle();
146
- return <SheetHandle className={clsx(classNames.root, className)} style={style} {...rest}/>;
113
+ * @remarks
114
+ * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다.
115
+ * Lynx drag handler는 `SheetHandle`의 outer view에 붙으므로, 44x44 target
116
+ * area는 `SheetHandle`에 적용하고 보이는 handle은 그 중심에 배치한다.
117
+ */
118
+ function BottomSheetHandle(props) {
119
+ const { children, className, style, ...rest } = props;
120
+ const classNames = bottomSheetHandle();
121
+ return <SheetHandle className={classNames.touchArea} {...rest}>
122
+ <view className={clsx(classNames.root, className)} style={style}>
123
+ {children}
124
+ </view>
125
+ </SheetHandle>;
147
126
  }
148
127
  BottomSheetHandle.displayName = "BottomSheetHandle";
149
128
  function createViewSlot(slotName) {
150
- const Slot = forwardRef((props, ref) => {
151
- const { children, className, style } = props;
152
- const classNames = useClassNames();
153
- return (<view {...(ref ? { ref: ref } : {})} className={clsx(classNames[slotName], className)} style={style}>
129
+ return forwardRef((props, ref) => {
130
+ const { children, className, style } = props;
131
+ const classNames = useClassNames();
132
+ return <view {...ref ? { ref } : {}} className={clsx(classNames[slotName], className)} style={style}>
154
133
  {children}
155
- </view>);
156
- });
157
- return Slot;
134
+ </view>;
135
+ });
158
136
  }
159
137
  function createTextSlot(slotName) {
160
- const Slot = forwardRef((props, ref) => {
161
- const { children, className, style } = props;
162
- const classNames = useClassNames();
163
- return (<text {...(ref ? { ref: ref } : {})} className={clsx(classNames[slotName], className)} style={style}>
138
+ return forwardRef((props, ref) => {
139
+ const { children, className, style } = props;
140
+ const classNames = useClassNames();
141
+ return <text {...ref ? { ref } : {}} className={clsx(classNames[slotName], className)} style={style}>
164
142
  {children}
165
- </text>);
166
- });
167
- return Slot;
143
+ </text>;
144
+ });
168
145
  }
169
- export const BottomSheetHeader = createViewSlot("header");
146
+ var BottomSheetHeader = createViewSlot("header");
170
147
  BottomSheetHeader.displayName = "BottomSheetHeader";
171
- export const BottomSheetBody = createViewSlot("body");
148
+ var BottomSheetBody = forwardRef((props, ref) => {
149
+ const { children, className, style } = props;
150
+ const classNames = useClassNames();
151
+ return <scroll-view {...ref ? { ref } : {}} scroll-y className={clsx(classNames.body, className)} style={style}>
152
+ {children}
153
+ </scroll-view>;
154
+ });
172
155
  BottomSheetBody.displayName = "BottomSheetBody";
173
- export const BottomSheetFooter = createViewSlot("footer");
156
+ var BottomSheetFooter = createViewSlot("footer");
174
157
  BottomSheetFooter.displayName = "BottomSheetFooter";
175
- export const BottomSheetTitle = createTextSlot("title");
158
+ var BottomSheetTitle = createTextSlot("title");
176
159
  BottomSheetTitle.displayName = "BottomSheetTitle";
177
- export const BottomSheetDescription = createTextSlot("description");
160
+ var BottomSheetDescription = createTextSlot("description");
178
161
  BottomSheetDescription.displayName = "BottomSheetDescription";
162
+ //#endregion
163
+ export { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger };
@@ -1,2 +1,2 @@
1
- export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, type BottomSheetBackdropProps as BackdropProps, type BottomSheetBodyProps as BodyProps, type BottomSheetContentProps as ContentProps, type BottomSheetDescriptionProps as DescriptionProps, type BottomSheetFooterProps as FooterProps, type BottomSheetHandleProps as HandleProps, type BottomSheetHeaderProps as HeaderProps, type BottomSheetPositionerProps as PositionerProps, type BottomSheetRootProps as RootProps, type BottomSheetTitleProps as TitleProps, type BottomSheetTriggerProps as TriggerProps, } from "./BottomSheet";
1
+ export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, type BottomSheetBackdropProps as BackdropProps, type BottomSheetBodyProps as BodyProps, type BottomSheetContentProps as ContentProps, type BottomSheetDescriptionProps as DescriptionProps, type BottomSheetFooterProps as FooterProps, type BottomSheetHandleProps as HandleProps, type BottomSheetHeaderProps as HeaderProps, type BottomSheetPositionerProps as PositionerProps, type BottomSheetRootProps as RootProps, type BottomSheetTitleProps as TitleProps, type BottomSheetTriggerProps as TriggerProps, } from './BottomSheet';
2
2
  //# sourceMappingURL=BottomSheet.namespace.d.ts.map
@@ -1 +1,18 @@
1
- export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, } from "./BottomSheet";
1
+ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
2
+ import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./BottomSheet.jsx";
3
+ //#region src/components/BottomSheet/BottomSheet.namespace.ts
4
+ var BottomSheet_namespace_exports = /* @__PURE__ */ __exportAll({
5
+ Backdrop: () => BottomSheetBackdrop,
6
+ Body: () => BottomSheetBody,
7
+ Content: () => BottomSheetContent,
8
+ Description: () => BottomSheetDescription,
9
+ Footer: () => BottomSheetFooter,
10
+ Handle: () => BottomSheetHandle,
11
+ Header: () => BottomSheetHeader,
12
+ Positioner: () => BottomSheetPositioner,
13
+ Root: () => BottomSheetRoot,
14
+ Title: () => BottomSheetTitle,
15
+ Trigger: () => BottomSheetTrigger
16
+ });
17
+ //#endregion
18
+ export { BottomSheet_namespace_exports };
@@ -1,3 +1,3 @@
1
- export { BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetBody, type BottomSheetBodyProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHandle, type BottomSheetHandleProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetPositioner, type BottomSheetPositionerProps, BottomSheetRoot, type BottomSheetRootProps, type BottomSheetRootRef, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, } from "./BottomSheet";
2
- export * as BottomSheet from "./BottomSheet.namespace";
1
+ export { BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetBody, type BottomSheetBodyProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHandle, type BottomSheetHandleProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetPositioner, type BottomSheetPositionerProps, BottomSheetRoot, type BottomSheetRootProps, type BottomSheetRootRef, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, } from './BottomSheet';
2
+ export * as BottomSheet from './BottomSheet.namespace';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,20 @@
1
+ import { LynxPressableProps, LynxStyledElementProps } from '../../types';
2
+ import { StyleProps } from '../../utils/styled';
3
+ import * as React from "@lynx-js/react";
4
+ /**
5
+ * @platform Lynx
6
+ *
7
+ * `Box`는 SEED style prop을 native `<view>`의 object style로 변환하는 편의
8
+ * primitive입니다. 많은 항목을 반복 렌더링하는 화면에서는 primitive 컴포넌트
9
+ * 렌더링과 style prop 해석 비용이 누적될 수 있습니다. 앱 코드에서는 native
10
+ * `<view>`/`<text>`와 Tailwind utility className을 우선 고려하세요. 패키지
11
+ * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
12
+ * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
13
+ */
14
+ export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
15
+ bindtouchstart?: () => void;
16
+ bindtouchend?: () => void;
17
+ bindtouchcancel?: () => void;
18
+ }
19
+ export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<unknown>>;
20
+ //# sourceMappingURL=Box.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,GAAG,0EAcd,CAAC"}