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

package/lib/components/Switch/Switch.namespace.js

@@ -1 +1,11 @@
-export { SwitchControl as Control, SwitchLabel as Label, SwitchRoot as Root, SwitchThumb as Thumb, } from "./Switch";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./Switch.jsx";
+//#region src/components/Switch/Switch.namespace.ts
+var Switch_namespace_exports = /* @__PURE__ */ __exportAll({
+	Control: () => SwitchControl,
+	Label: () => SwitchLabel,
+	Root: () => SwitchRoot,
+	Thumb: () => SwitchThumb
+});
+//#endregion
+export { Switch_namespace_exports };

package/lib/components/Switch/index.d.ts

@@ -1,3 +1,3 @@
-export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, type SwitchRootProps, type SwitchControlProps, type SwitchThumbProps, type SwitchLabelProps, } from "./Switch";
-export * as Switch from "./Switch.namespace";
+export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, type SwitchRootProps, type SwitchControlProps, type SwitchThumbProps, type SwitchLabelProps, } from './Switch';
+export * as Switch from './Switch.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/TagGroup/TagGroup.d.ts

@@ -1,6 +1,8 @@
-import * as React from "react";
-import { type TagGroupVariantProps } from "@seed-design/lynx-css/recipes/tag-group";
-import { type TagGroupItemVariantProps } from "@seed-design/lynx-css/recipes/tag-group-item";
+import { TagGroupVariantProps } from '@seed-design/lynx-css/recipes/tag-group';
+import { TagGroupItemVariantProps } from '@seed-design/lynx-css/recipes/tag-group-item';
+import { LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import * as React from "@lynx-js/react";
 /**
  * @platform Lynx
  *
@@ -8,12 +10,9 @@ import { type TagGroupItemVariantProps } from "@seed-design/lynx-css/recipes/tag
  * - `truncate` prop: Lynx flex 모델에서는 item 단위 wrap만 가능해 웹 수준의
  *   "한 줄 유지 + label ellipsis" 조합을 재현할 수 없음
  * - `asChild` prop: Lynx Slot 미지원
- * - `flexShrink` prop: CSS variable 동적 주입 제한
  * - 아이콘 slot: Lynx 3.7 SVG 지원 후 검토 (Tier B)
  */
-export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps {
-    children?: React.ReactNode;
-    className?: string;
+export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps, LynxStyledElementProps {
     /**
      * children 사이에 삽입되는 구분자. 기본값 `" · "`.
      */
@@ -25,16 +24,11 @@ export declare const TagGroupRoot: React.ForwardRefExoticComponent<TagGroupRootP
  *
  * 웹 대비 미지원 기능:
  * - `asChild` prop: Lynx Slot 미지원
- * - `flexShrink` prop: CSS variable 동적 주입 제한
  */
-export interface TagGroupItemProps extends TagGroupItemVariantProps {
-    children?: React.ReactNode;
-    className?: string;
+export interface TagGroupItemProps extends TagGroupItemVariantProps, Pick<StyleProps, "flexShrink">, LynxStyledElementProps {
 }
 export declare const TagGroupItem: React.ForwardRefExoticComponent<TagGroupItemProps & React.RefAttributes<unknown>>;
-export interface TagGroupItemLabelProps {
-    children?: React.ReactNode;
-    className?: string;
+export interface TagGroupItemLabelProps extends LynxStyledElementProps {
 }
 export declare const TagGroupItemLabel: React.ForwardRefExoticComponent<TagGroupItemLabelProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=TagGroup.d.ts.map

package/lib/components/TagGroup/TagGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAQtD;;;;;;;;;GASG;AACH,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,wBAAwB;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAsCvB,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,mFAiBvB,CAAC;AAGH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAiCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}

package/lib/components/TagGroup/TagGroup.jsx

@@ -1,54 +1,57 @@
-import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { toArray } from "../../utils/children.js";
+import { useStyleProps } from "../../utils/styled.js";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import clsx from "clsx";
+import * as React from "@lynx-js/react";
 import { tagGroup } from "@seed-design/lynx-css/recipes/tag-group";
-import { tagGroupItem, } from "@seed-design/lynx-css/recipes/tag-group-item";
-import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
-import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
-const { PropsProvider, useProps, ClassNamesProvider, useClassNames } = createSlotRecipeContext(tagGroupItem);
-export const TagGroupRoot = React.forwardRef((props, ref) => {
-    const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
-    const { children, className, separator = " · ", ...nativeProps } = otherProps;
-    const classes = tagGroup(tagGroupVariantProps);
-    const visibleChildren = React.Children.toArray(children);
-    return (<PropsProvider value={tagGroupItemVariantProps}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+import { tagGroupItem } from "@seed-design/lynx-css/recipes/tag-group-item";
+//#region src/components/TagGroup/TagGroup.tsx
+var { PropsProvider, useProps, ClassNamesProvider, useClassNames } = createSlotRecipeContext(tagGroupItem);
+var TagGroupRoot = React.forwardRef((props, ref) => {
+	const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
+		tagGroup,
+		tagGroupItem
+	});
+	const { children, className, separator = " · ", ...nativeProps } = otherProps;
+	const classes = tagGroup(tagGroupVariantProps);
+	const visibleChildren = toArray(children);
+	return <PropsProvider value={tagGroupItemVariantProps}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
         {visibleChildren.map((child, index) => {
-            if (index === 0)
-                return child;
-            // Lynx <text> separator는 개별 flex item이라 wrap이 발동하면 separator가
-            // 이전 row 끝에 남는다. separator와 뒤따르는 item을 하나의 flex-row wrapper로
-            // 묶어 같은 wrap 단위로 함께 이동시킨다.
-            return (<view key={child.key ?? index} style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    flexShrink: 0,
-                }}>
+		if (index === 0) return child;
+		return <view key={child.key ?? index} className={classes.separatorWrapper}>
               <text className={classes.separator}>{separator}</text>
               {child}
-            </view>);
-        })}
+            </view>;
+	})}
       </view>
-    </PropsProvider>);
+    </PropsProvider>;
 });
 TagGroupRoot.displayName = "TagGroupRoot";
-export const TagGroupItem = React.forwardRef((props, ref) => {
-    const parentVariantProps = useProps();
-    const [localVariantProps, otherProps] = tagGroupItem.splitVariantProps(props);
-    const classes = tagGroupItem({ ...parentVariantProps, ...localVariantProps });
-    const { children, className, ...nativeProps } = otherProps;
-    return (<ClassNamesProvider value={classes}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+var TagGroupItem = React.forwardRef((props, ref) => {
+	const parentVariantProps = useProps();
+	const [localVariantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+	const classes = tagGroupItem({
+		...parentVariantProps,
+		...localVariantProps
+	});
+	const { style, restProps } = useStyleProps(otherProps);
+	const { children, className, ...nativeProps } = restProps;
+	return <ClassNamesProvider value={classes}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} style={style} {...nativeProps}>
         {children}
       </view>
-    </ClassNamesProvider>);
+    </ClassNamesProvider>;
 });
 TagGroupItem.displayName = "TagGroupItem";
-export const TagGroupItemLabel = React.forwardRef((props, ref) => {
-    const classes = useClassNames();
-    const { children, className, ...nativeProps } = props;
-    return (<text {...(ref ? { ref: ref } : {})} className={clsx(classes.label, className)} {...nativeProps}>
+var TagGroupItemLabel = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { children, className, ...nativeProps } = props;
+	return <text {...ref ? { ref } : {}} className={clsx(classes.label, className)} {...nativeProps}>
       {children}
-    </text>);
+    </text>;
 });
 TagGroupItemLabel.displayName = "TagGroupItemLabel";
+//#endregion
+export { TagGroupItem, TagGroupItemLabel, TagGroupRoot };

package/lib/components/TagGroup/TagGroup.namespace.d.ts

@@ -1,2 +1,2 @@
-export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root, type TagGroupItemLabelProps as ItemLabelProps, type TagGroupItemProps as ItemProps, type TagGroupRootProps as RootProps, } from "./TagGroup";
+export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root, type TagGroupItemLabelProps as ItemLabelProps, type TagGroupItemProps as ItemProps, type TagGroupRootProps as RootProps, } from './TagGroup';
 //# sourceMappingURL=TagGroup.namespace.d.ts.map

package/lib/components/TagGroup/TagGroup.namespace.js

@@ -1 +1,10 @@
-export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root, } from "./TagGroup";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./TagGroup.jsx";
+//#region src/components/TagGroup/TagGroup.namespace.ts
+var TagGroup_namespace_exports = /* @__PURE__ */ __exportAll({
+	Item: () => TagGroupItem,
+	ItemLabel: () => TagGroupItemLabel,
+	Root: () => TagGroupRoot
+});
+//#endregion
+export { TagGroup_namespace_exports };

package/lib/components/TagGroup/index.d.ts

@@ -1,3 +1,3 @@
-export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, type TagGroupRootProps, type TagGroupItemProps, type TagGroupItemLabelProps, } from "./TagGroup";
-export * as TagGroup from "./TagGroup.namespace";
+export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, type TagGroupRootProps, type TagGroupItemProps, type TagGroupItemLabelProps, } from './TagGroup';
+export * as TagGroup from './TagGroup.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import { TextStyleProps } from '../../utils/styled';
+import { LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface TextProps extends TextStyleProps, LynxStyledElementProps {
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Text.d.ts.map

package/lib/components/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAYvE,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,sBAAsB;CAAG;AAE5E,eAAO,MAAM,IAAI,2EAkCf,CAAC"}

package/lib/components/Text/Text.jsx

@@ -0,0 +1,28 @@
+import { handleColor, handleFontSize, handleFontWeight, handleLineHeight } from "../../utils/styled.js";
+import { typography } from "@seed-design/lynx-css/vars/component";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+//#region src/components/Text/Text.tsx
+function capitalize(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function getTypographyStyle(textStyle) {
+	return typography[`textStyle${capitalize(textStyle ?? "t5Regular")}`].enabled.root;
+}
+var Text = React.forwardRef((props, ref) => {
+	const { color, textStyle, fontSize, lineHeight, fontWeight, align, children, className, style, ...nativeProps } = props;
+	const typographyStyle = getTypographyStyle(textStyle);
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={{
+		color: handleColor(color),
+		fontSize: handleFontSize(fontSize) ?? typographyStyle.fontSize,
+		lineHeight: handleLineHeight(lineHeight ?? fontSize) ?? typographyStyle.lineHeight,
+		fontWeight: handleFontWeight(fontWeight) ?? typographyStyle.fontWeight,
+		textAlign: align,
+		...style
+	}}>
+      {children}
+    </text>;
+});
+Text.displayName = "Text";
+//#endregion
+export { Text };

package/lib/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text, type TextProps } from './Text';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/index.d.ts

@@ -1,8 +1,14 @@
-export * from "./ActionButton";
-export * from "./BottomSheet";
-export * from "./Checkbox";
-export * from "./ProgressCircle";
-export * from "./RadioGroup";
-export * from "./Switch";
-export * from "./TagGroup";
+export * from './ActionButton';
+export * from './AppBar';
+export * from './Badge';
+export * from './Box';
+export * from './BottomSheet';
+export * from './Checkbox';
+export * from './Icon';
+export * from './ProgressCircle';
+export * from './RadioGroup';
+export * from './Stack';
+export * from './Switch';
+export * from './TagGroup';
+export * from './Text';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}

package/lib/hooks/index.d.ts

@@ -1,4 +1,6 @@
-export * from "./useControllableState";
-export * from "./useIconColor";
-export * from "./usePressTap";
+export * from './useControllableState';
+export * from './useIconColor';
+export * from './usePressTap';
+export * from './useSafeArea';
+export * from './useSeedClassName';
 //# sourceMappingURL=index.d.ts.map

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/lib/hooks/useControllableState.js

@@ -1,27 +1,27 @@
 import { useRef, useState } from "@lynx-js/react";
 import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+//#region src/hooks/useControllableState.ts
 /**
- * Controlled/uncontrolled state pattern for Lynx components.
- *
- * - When `value` is provided, the component is controlled.
- * - When `value` is `undefined`, the component manages its own state
- *   starting from `defaultValue`.
- * - `onChange` fires in both modes.
- */
-export function useControllableState(props) {
-    const { value, defaultValue, onChange } = props;
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const currentValue = isControlled ? value : uncontrolledValue;
-    const prevValueRef = useRef(currentValue);
-    const setValue = useMemoizedFn((nextValue) => {
-        if (!isControlled) {
-            setUncontrolledValue(nextValue);
-        }
-        if (nextValue !== prevValueRef.current) {
-            onChange?.(nextValue);
-            prevValueRef.current = nextValue;
-        }
-    });
-    return [currentValue, setValue];
+* Controlled/uncontrolled state pattern for Lynx components.
+*
+* - When `value` is provided, the component is controlled.
+* - When `value` is `undefined`, the component manages its own state
+*   starting from `defaultValue`.
+* - `onChange` fires in both modes.
+*/
+function useControllableState(props) {
+	const { value, defaultValue, onChange } = props;
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const currentValue = isControlled ? value : uncontrolledValue;
+	const prevValueRef = useRef(currentValue);
+	return [currentValue, useMemoizedFn((nextValue) => {
+		if (!isControlled) setUncontrolledValue(nextValue);
+		if (nextValue !== prevValueRef.current) {
+			onChange?.(nextValue);
+			prevValueRef.current = nextValue;
+		}
+	})];
 }
+//#endregion
+export { useControllableState };

package/lib/hooks/useIconColor.d.ts

@@ -1,5 +1,8 @@
-import type { MainThread } from "@lynx-js/types";
-import type { DependencyList, RefObject } from "react";
+import { MainThread } from '@lynx-js/types';
+import { DependencyList, RefObject } from '@lynx-js/react';
+export interface UseIconColorOptions {
+    sourceRef?: RefObject<MainThread.Element>;
+}
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
  * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
@@ -9,7 +12,7 @@ import type { DependencyList, RefObject } from "react";
  * return cloneElement(iconChild, iconColorProps);
  * ```
  */
-export declare function useIconColor(deps: DependencyList): {
+export declare function useIconColor(deps: DependencyList, options?: UseIconColorOptions): {
     ref: RefObject<MainThread.Element>;
     "main-thread:binduiappear": () => void;
 };

package/lib/hooks/useIconColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG;IAClD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAcA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAeA"}

package/lib/hooks/useIconColor.js

@@ -1,41 +1,38 @@
 import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
-// Lynx `<image>` 의 `tint-color` attribute 에 CSS variable 문자열을 직접 넣는 경로는
-// 안정적으로 동작하지 않는다. CSS `color` 는 computed style 로 resolved color 를 읽을 수
-// 있으므로 main-thread 에서 한 번 읽어 `tint-color` 로 mirror 한다.
-function syncTintColor(ref) {
-    "main thread";
-    const el = ref.current;
-    if (!el)
-        return;
-    let color;
-    if (typeof el.getComputedStyleProperty === "function") {
-        color = el.getComputedStyleProperty("color");
-    }
-    else if (typeof el.getComputedCssProperty === "function") {
-        color = el.getComputedCssProperty("color");
-    }
-    if (color) {
-        el.setAttribute("tint-color", color);
-    }
+//#region src/hooks/useIconColor.ts
+function syncTintColor(targetRef, sourceRef) {
+	"main thread";
+	const target = targetRef.current;
+	if (!target) return;
+	const source = sourceRef?.current ?? target;
+	let color;
+	if (typeof source.getComputedStyleProperty === "function") color = source.getComputedStyleProperty("color");
+	else if (typeof source.getComputedCssProperty === "function") color = source.getComputedCssProperty("color");
+	if (color) target.setAttribute("tint-color", color);
 }
 /**
- * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
- *
- * ```tsx
- * const iconColorProps = useIconColor([variant, disabled, loading]);
- * return cloneElement(iconChild, iconColorProps);
- * ```
- */
-export function useIconColor(deps) {
-    const ref = useMainThreadRef(null);
-    function syncOnUiAppear() {
-        "main thread";
-        syncTintColor(ref);
-    }
-    // deps 는 caller 가 책임.
-    useEffect(() => {
-        runOnMainThread(syncTintColor)(ref);
-    }, deps);
-    return { ref, "main-thread:binduiappear": syncOnUiAppear };
+* Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
+* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+*
+* ```tsx
+* const iconColorProps = useIconColor([variant, disabled, loading]);
+* return cloneElement(iconChild, iconColorProps);
+* ```
+*/
+function useIconColor(deps, options) {
+	const ref = useMainThreadRef(null);
+	const sourceRef = options?.sourceRef;
+	function syncOnUiAppear() {
+		"main thread";
+		syncTintColor(ref, sourceRef);
+	}
+	useEffect(() => {
+		runOnMainThread(syncTintColor)(ref, sourceRef);
+	}, deps);
+	return {
+		ref,
+		"main-thread:binduiappear": syncOnUiAppear
+	};
 }
+//#endregion
+export { useIconColor };

package/lib/hooks/usePressTap.d.ts

@@ -1,16 +1,18 @@
-import type { TouchEvent } from "@lynx-js/types";
+import { BaseTouchEvent, EventHandler, Target } from '@lynx-js/types';
+import { LynxTouchProps } from '../types';
+type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
 export interface UsePressTapOptions {
     disabled?: boolean;
-    onTap?: () => void;
-    mainThreadOnTap?: () => void;
+    onTap?: TouchHandler;
+    mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
 }
 export interface UsePressTapReturn {
     pressed: boolean;
-    bindtap: (e: TouchEvent) => void;
-    bindtouchstart: (e: TouchEvent) => void;
-    bindtouchend: (e: TouchEvent) => void;
-    bindtouchcancel: (e: TouchEvent) => void;
-    "main-thread:bindtap"?: () => void;
+    bindtap: TouchHandler;
+    bindtouchstart: TouchHandler;
+    bindtouchend: TouchHandler;
+    bindtouchcancel: TouchHandler;
+    "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
 }
 /**
  * Hook that provides press/tap interaction state for Lynx elements.
@@ -21,4 +23,5 @@ export interface UsePressTapReturn {
  * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
  */
 export declare function usePressTap(options?: UsePressTapOptions): UsePressTapReturn;
+export {};
 //# sourceMappingURL=usePressTap.d.ts.map

package/lib/hooks/usePressTap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}
+{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}

package/lib/hooks/usePressTap.js

@@ -1,35 +1,35 @@
 import { useState } from "@lynx-js/react";
 import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+//#region src/hooks/usePressTap.ts
 /**
- * Hook that provides press/tap interaction state for Lynx elements.
- *
- * - Tracks `pressed` state via touch events.
- * - When `disabled` is true, the element cannot become active and no tap fires.
- * - If the element becomes disabled during a press, the active state is cleared.
- * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
- */
-export function usePressTap(options = {}) {
-    const { disabled = false, onTap, mainThreadOnTap } = options;
-    const [pressed, setPressed] = useState(false);
-    const press = useMemoizedFn(() => {
-        if (disabled)
-            return;
-        setPressed(true);
-    });
-    const reset = useMemoizedFn(() => {
-        setPressed(false);
-    });
-    const handleTap = useMemoizedFn(() => {
-        if (disabled)
-            return;
-        onTap?.();
-    });
-    return {
-        pressed,
-        bindtap: handleTap,
-        bindtouchstart: press,
-        bindtouchend: reset,
-        bindtouchcancel: reset,
-        ...(!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}),
-    };
+* Hook that provides press/tap interaction state for Lynx elements.
+*
+* - Tracks `pressed` state via touch events.
+* - When `disabled` is true, the element cannot become active and no tap fires.
+* - If the element becomes disabled during a press, the active state is cleared.
+* - `main-thread:bindtap` is conditionally included (only when enabled and provided).
+*/
+function usePressTap(options = {}) {
+	const { disabled = false, onTap, mainThreadOnTap } = options;
+	const [pressed, setPressed] = useState(false);
+	const press = useMemoizedFn(() => {
+		if (disabled) return;
+		setPressed(true);
+	});
+	const reset = useMemoizedFn(() => {
+		setPressed(false);
+	});
+	return {
+		pressed,
+		bindtap: useMemoizedFn((...args) => {
+			if (disabled) return;
+			onTap?.(...args);
+		}),
+		bindtouchstart: press,
+		bindtouchend: reset,
+		bindtouchcancel: reset,
+		...!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}
+	};
 }
+//#endregion
+export { usePressTap };

package/lib/hooks/useSafeArea.d.ts

@@ -0,0 +1,19 @@
+declare module "@lynx-js/types" {
+    interface GlobalProps {
+        safeAreaInsetTop?: number;
+        safeAreaInsetBottom?: number;
+    }
+}
+export interface UseSafeAreaReturn {
+    safeAreaInsetTop: string;
+    safeAreaInsetBottom: string;
+}
+/**
+ * Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+ *
+ * `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
+ * host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
+ * 반환합니다.
+ */
+export declare function useSafeArea(): UseSafeAreaReturn;
+//# sourceMappingURL=useSafeArea.d.ts.map

package/lib/hooks/useSafeArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAIA,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,WAAW;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAuBD,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAW/C"}

package/lib/hooks/useSafeArea.js

@@ -0,0 +1,33 @@
+import { useMemo } from "@lynx-js/react";
+//#region src/hooks/useSafeArea.ts
+var safeAreaProp = {
+	top: "safeAreaInsetTop",
+	bottom: "safeAreaInsetBottom"
+};
+function getSafeAreaEnvInset(edge) {
+	return `env(safe-area-inset-${edge})`;
+}
+function normalizeSafeAreaValue(value) {
+	if (typeof value !== "number" || value <= 0 || !Number.isFinite(value)) return;
+	return `${value}px`;
+}
+function resolveSafeAreaInset(edge, value) {
+	return normalizeSafeAreaValue(value) ?? getSafeAreaEnvInset(edge);
+}
+/**
+* Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+*
+* `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
+* host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
+* 반환합니다.
+*/
+function useSafeArea() {
+	const safeAreaInsetTop = lynx.__globalProps?.[safeAreaProp.top];
+	const safeAreaInsetBottom = lynx.__globalProps?.[safeAreaProp.bottom];
+	return useMemo(() => ({
+		safeAreaInsetTop: resolveSafeAreaInset("top", safeAreaInsetTop),
+		safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom)
+	}), [safeAreaInsetTop, safeAreaInsetBottom]);
+}
+//#endregion
+export { useSafeArea };