@seed-design/lynx-react 0.0.0-alpha-20260622094810

package/lib/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/lib/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,49 @@
+import { ActionButtonVariantProps } from '@seed-design/lynx-css/recipes/action-button';
+import { LynxElementProps, LynxPressableProps, LynxViewProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import { IconProps, PrefixIconProps, SuffixIconProps } from '../Icon/Icon';
+import * as React from "@lynx-js/react";
+interface ActionButtonAccessibilityProps {
+    "accessibility-label"?: LynxViewProps["accessibility-label"];
+    "accessibility-element"?: LynxViewProps["accessibility-element"];
+    "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+}
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 차이:
+ * - 아이콘 렌더링: 웹의 SVG `currentColor` 대신 Lynx `<image>` 의 `tint-color` 를
+ *   `Icon` / `PrefixIcon` / `SuffixIcon` wrapper 가 동기화한다.
+ * - 호환 API: 기존 `prefixIcon` / `suffixIcon` / `icon` prop 도 유지한다.
+ * - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한)
+ *
+ * ```tsx
+ * import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
+ * import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill";
+ * import { Icon, PrefixIcon, SuffixIcon } from "@seed-design/lynx-react";
+ *
+ * // withText (기본)
+ * <ActionButton variant="brandSolid">
+ *   <PrefixIcon icon={<IconPlusFill />} />
+ *   라벨
+ *   <SuffixIcon icon={<IconChevronDownFill />} />
+ * </ActionButton>
+ *
+ * // iconOnly — `<Icon />` child 와 `accessibility-label` 필수
+ * <ActionButton
+ *   layout="iconOnly"
+ *   variant="neutralSolid"
+ *   accessibility-label="추가"
+ * >
+ *   <Icon icon={<IconPlusFill />} />
+ * </ActionButton>
+ * ```
+ */
+export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "pressed">, Pick<StyleProps, "flexGrow">, LynxElementProps, LynxPressableProps, ActionButtonAccessibilityProps {
+    icon?: IconProps["icon"];
+    prefixIcon?: PrefixIconProps["icon"];
+    suffixIcon?: SuffixIconProps["icon"];
+}
+export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=ActionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AAI5F,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAIxC,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAIlB,aAAa,EAEd,MAAM,aAAa,CAAC;AAIrB,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAiBtB,UAAU,8BAA8B;IACtC,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAChE;AA0LD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAC/C,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,gBAAgB,EAChB,kBAAkB,EAClB,8BAA8B;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,mFA2EvB,CAAC"}

package/lib/components/ActionButton/ActionButton.jsx

@@ -0,0 +1,158 @@
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { toArray } from "../../utils/children.js";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token.js";
+import { resolveFlexValue } from "../../utils/styled.js";
+import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
+import { Icon, IconRequired, IconSlotProvider, PrefixIcon, SuffixIcon, getIconSlotName } from "../Icon/Icon.jsx";
+import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
+import { progressCircleVariantMap } from "@seed-design/lynx-css/recipes/progress-circle";
+import { actionButton as actionButton$1 } from "@seed-design/lynx-css/vars/component";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement, useMemo } from "@lynx-js/react";
+//#region src/components/ActionButton/ActionButton.tsx
+var { ClassNamesProvider, useClassNames, PropsProvider } = createSlotRecipeContext(actionButton);
+function resolveProgressCircleSize(actionButtonSize) {
+	const token = resolveRecipeToken(actionButton$1, [
+		`size${capitalize(actionButtonSize ?? "medium")}`,
+		"enabled",
+		"progressCircle",
+		"size"
+	]);
+	const normalized = token?.endsWith("px") ? token.slice(0, -2) : token;
+	return progressCircleVariantMap.size.find((size) => size === normalized) ?? "16";
+}
+var ActionButtonRoot = React.forwardRef((innerProps, ref) => {
+	const props = {
+		layout: "withText",
+		...innerProps
+	};
+	const [variantProps, otherProps] = actionButton.splitVariantProps(props);
+	const classNames = actionButton(variantProps);
+	const { className: userClassName, children, ...rest } = otherProps;
+	const propsForContext = useMemo(() => variantProps, [
+		variantProps.variant,
+		variantProps.size,
+		variantProps.layout,
+		variantProps.pressed,
+		variantProps.disabled,
+		variantProps.loading
+	]);
+	const iconSlotContextValue = useMemo(() => ({
+		classNames: {
+			icon: classNames.icon,
+			prefixIcon: classNames.prefixIcon,
+			suffixIcon: classNames.suffixIcon
+		},
+		deps: [
+			variantProps.variant ?? null,
+			variantProps.disabled ?? false,
+			variantProps.loading ?? false,
+			variantProps.pressed ?? false
+		]
+	}), [
+		classNames.icon,
+		classNames.prefixIcon,
+		classNames.suffixIcon,
+		variantProps.variant,
+		variantProps.disabled,
+		variantProps.loading,
+		variantProps.pressed
+	]);
+	return <ClassNamesProvider value={classNames}>
+      <PropsProvider value={propsForContext}>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view {...ref ? { ref } : {}} {...rest} className={clsx(classNames.root, userClassName)}>
+            {children}
+          </view>
+        </IconSlotProvider>
+      </PropsProvider>
+    </ClassNamesProvider>;
+});
+ActionButtonRoot.displayName = "ActionButtonRoot";
+var ActionButtonTextSlot = React.forwardRef((props, ref) => {
+	const { children, className: userClassName, ...rest } = props;
+	const classNames = useClassNames();
+	return <text {...ref ? { ref } : {}} {...rest} className={clsx(classNames.text, userClassName)}>
+      {children}
+    </text>;
+});
+ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
+function ActionButtonContent({ children, isIconOnly, icon, prefixIcon, suffixIcon }) {
+	const childArray = toArray(children);
+	const prefixIconChildren = [];
+	const suffixIconChildren = [];
+	const iconChildren = [];
+	const textChildren = [];
+	for (const child of childArray) {
+		const slotName = getIconSlotName(child);
+		if (slotName === "prefixIcon") {
+			prefixIconChildren.push(child);
+			continue;
+		}
+		if (slotName === "suffixIcon") {
+			suffixIconChildren.push(child);
+			continue;
+		}
+		if (slotName === "icon") {
+			iconChildren.push(child);
+			continue;
+		}
+		textChildren.push(child);
+	}
+	if (isIconOnly) {
+		if (icon != null && isValidElement(icon)) return <Icon icon={icon} />;
+		return iconChildren.length > 0 ? <>{iconChildren}</> : null;
+	}
+	return <>
+      {prefixIcon != null && isValidElement(prefixIcon) ? <PrefixIcon icon={prefixIcon} /> : null}
+      {prefixIconChildren}
+      {textChildren.length > 0 ? <ActionButtonTextSlot>{textChildren}</ActionButtonTextSlot> : null}
+      {suffixIconChildren}
+      {suffixIcon != null && isValidElement(suffixIcon) ? <SuffixIcon icon={suffixIcon} /> : null}
+    </>;
+}
+function ActionButtonLoadingContent(props) {
+	const classNames = useClassNames();
+	return <view className={classNames.content}>
+      <ActionButtonContent {...props} />
+    </view>;
+}
+function ActionButtonLoadingIndicator({ size }) {
+	const classNames = useClassNames();
+	const progressCircleSize = resolveProgressCircleSize(size);
+	return <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size={progressCircleSize} tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>;
+}
+var ActionButton = React.forwardRef((props, ref) => {
+	const { children, flexGrow, layout, icon, prefixIcon, suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...variantAndRest } = props;
+	const { disabled = false, loading = false } = variantAndRest;
+	const isInteractive = !disabled && !loading;
+	const isIconOnly = layout === "iconOnly";
+	const size = variantAndRest.size;
+	if (process.env.NODE_ENV !== "production" && isIconOnly && accessibilityElement && !accessibilityLabel) console.warn("ActionButton: `layout=\"iconOnly\"` requires `accessibility-label` for accessibility.");
+	const { pressed, ...pressTapHandlers } = usePressTap({
+		disabled: !isInteractive,
+		onTap: bindtap,
+		mainThreadOnTap: mainThreadBindtap
+	});
+	return <IconRequired enabled={isIconOnly}>
+      <ActionButtonRoot {...variantAndRest} layout={layout} pressed={pressed} ref={ref} style={flexGrow != null ? { flexGrow: resolveFlexValue(flexGrow) } : void 0} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} {...pressTapHandlers}>
+        {loading ? <>
+            <ActionButtonLoadingIndicator size={size} />
+            <ActionButtonLoadingContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
+              {children}
+            </ActionButtonLoadingContent>
+          </> : <ActionButtonContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
+            {children}
+          </ActionButtonContent>}
+      </ActionButtonRoot>
+    </IconRequired>;
+});
+ActionButton.displayName = "ActionButton";
+//#endregion
+export { ActionButton };

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

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

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

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

package/lib/components/AppBar/AppBar.d.ts

@@ -0,0 +1,35 @@
+import { AppBarVariantProps } from '@seed-design/lynx-css/recipes/app-bar';
+import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
+import { LynxElementProps, LynxIconElementProps, LynxPressableProps, LynxStyledElementProps, LynxViewProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {
+}
+export declare const AppBarRoot: React.ForwardRefExoticComponent<AppBarRootProps & React.RefAttributes<unknown>>;
+export interface AppBarLeftProps extends LynxStyledElementProps {
+    bindlayoutchange?: LynxViewProps["bindlayoutchange"];
+}
+export declare const AppBarLeft: React.ForwardRefExoticComponent<AppBarLeftProps & React.RefAttributes<unknown>>;
+export interface AppBarRightProps extends LynxStyledElementProps {
+    bindlayoutchange?: LynxViewProps["bindlayoutchange"];
+}
+export declare const AppBarRight: React.ForwardRefExoticComponent<AppBarRightProps & React.RefAttributes<unknown>>;
+export interface AppBarMainProps extends AppBarMainVariantProps, LynxStyledElementProps {
+}
+export declare const AppBarMain: React.ForwardRefExoticComponent<AppBarMainProps & React.RefAttributes<unknown>>;
+export interface AppBarTitleProps extends LynxElementProps {
+}
+export declare const AppBarTitle: React.ForwardRefExoticComponent<AppBarTitleProps & React.RefAttributes<unknown>>;
+export interface AppBarSubtitleProps extends LynxElementProps {
+}
+export declare const AppBarSubtitle: React.ForwardRefExoticComponent<AppBarSubtitleProps & React.RefAttributes<unknown>>;
+export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+    icon?: React.ReactElement<LynxIconElementProps>;
+    "accessibility-label"?: LynxViewProps["accessibility-label"];
+    "accessibility-element"?: LynxViewProps["accessibility-element"];
+    "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+}
+export declare const AppBarIconButton: React.ForwardRefExoticComponent<AppBarIconButtonProps & React.RefAttributes<unknown>>;
+export interface AppBarSlotProps extends LynxStyledElementProps {
+}
+export declare const AppBarSlot: React.ForwardRefExoticComponent<AppBarSlotProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=AppBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,aAAa,CAAC;AAmCrB,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA0BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA0BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAoCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAatB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAazB,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,EAAE,kBAAkB;IACjF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,uFA4B3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;CAAG;AAElE,eAAO,MAAM,UAAU,iFAarB,CAAC"}

package/lib/components/AppBar/AppBar.jsx

@@ -0,0 +1,132 @@
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { Icon } from "../Icon/Icon.jsx";
+import { AppBarProvider, useAppBarContext } from "./context.js";
+import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { appBar } from "@seed-design/lynx-css/recipes/app-bar";
+import { appBarMain } from "@seed-design/lynx-css/recipes/app-bar-main";
+//#region src/components/AppBar/AppBar.tsx
+var { ClassNamesProvider: AppBarClassNamesProvider, useClassNames: useAppBarRecipeClassNames } = createSlotRecipeContext(appBar);
+var { ClassNamesProvider: AppBarMainClassNamesProvider, useClassNames: useAppBarMainRecipeClassNames } = createSlotRecipeContext(appBarMain);
+function useAppBarClassNames(consumer) {
+	try {
+		return useAppBarRecipeClassNames();
+	} catch {
+		throw new Error(`<${consumer}/> must be rendered inside <AppBarRoot/>.`);
+	}
+}
+function useAppBarMainClassNames(consumer) {
+	try {
+		return useAppBarMainRecipeClassNames();
+	} catch {
+		throw new Error(`<${consumer}/> must be rendered inside <AppBarMain/>.`);
+	}
+}
+var AppBarRoot = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = appBar.splitVariantProps(props);
+	const { children, className, style, ...nativeProps } = otherProps;
+	const { contextValue, resolvedVariantProps, rootLayoutStyle } = useAppBar(variantProps);
+	const classNames = appBar(resolvedVariantProps);
+	return <AppBarProvider value={contextValue}>
+      <AppBarClassNamesProvider value={classNames}>
+        <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={{
+		"--seed-safe-area-top": contextValue.safeAreaInsetTop,
+		"--centered-title-padding-x": contextValue.centeredTitlePaddingX,
+		...rootLayoutStyle,
+		...style
+	}}>
+          <view accessibility-elements-hidden className={classNames.background} />
+          {children}
+        </view>
+      </AppBarClassNamesProvider>
+    </AppBarProvider>;
+});
+AppBarRoot.displayName = "AppBarRoot";
+var AppBarLeft = React.forwardRef((props, ref) => {
+	const { children, className, bindlayoutchange, ...nativeProps } = props;
+	const { setLeftWidth } = useAppBarContext("AppBarLeft");
+	const classNames = useAppBarClassNames("AppBarLeft");
+	const handleLayoutChange = React.useCallback((...args) => {
+		bindlayoutchange?.(...args);
+		const width = getLayoutWidth(args[0]);
+		if (width != null) setLeftWidth(width);
+	}, [bindlayoutchange, setLeftWidth]);
+	return <view {...ref ? { ref } : {}} {...nativeProps} bindlayoutchange={handleLayoutChange} className={clsx(classNames.left, className)}>
+      {children}
+    </view>;
+});
+AppBarLeft.displayName = "AppBarLeft";
+var AppBarRight = React.forwardRef((props, ref) => {
+	const { children, className, bindlayoutchange, ...nativeProps } = props;
+	const { setRightWidth } = useAppBarContext("AppBarRight");
+	const classNames = useAppBarClassNames("AppBarRight");
+	const handleLayoutChange = React.useCallback((...args) => {
+		bindlayoutchange?.(...args);
+		const width = getLayoutWidth(args[0]);
+		if (width != null) setRightWidth(width);
+	}, [bindlayoutchange, setRightWidth]);
+	return <view {...ref ? { ref } : {}} {...nativeProps} bindlayoutchange={handleLayoutChange} className={clsx(classNames.right, className)}>
+      {children}
+    </view>;
+});
+AppBarRight.displayName = "AppBarRight";
+var AppBarMain = React.forwardRef((props, ref) => {
+	const { centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps } = useAppBarContext("AppBarMain");
+	const [variantProps, otherProps] = appBarMain.splitVariantProps({
+		...sharedVariantProps,
+		...props
+	});
+	const resolvedTheme = variantProps.theme ?? "cupertino";
+	const classNames = appBarMain(variantProps);
+	const { children, className, style, ...nativeProps } = otherProps;
+	const centeredTitleStyle = variantProps.theme === "cupertino" ? {
+		paddingLeft: centeredTitlePaddingX,
+		paddingRight: centeredTitlePaddingX
+	} : void 0;
+	return <AppBarMainClassNamesProvider value={classNames}>
+      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={{
+		...centeredTitleStyle,
+		...getMainLayoutStyle(resolvedTheme, safeAreaInsetTop),
+		...style
+	}}>
+        {children}
+      </view>
+    </AppBarMainClassNamesProvider>;
+});
+AppBarMain.displayName = "AppBarMain";
+var AppBarTitle = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classNames = useAppBarMainClassNames("AppBarTitle");
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.title, className)}>
+      {children}
+    </text>;
+});
+AppBarTitle.displayName = "AppBarTitle";
+var AppBarSubtitle = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classNames = useAppBarMainClassNames("AppBarSubtitle");
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.subtitle, className)}>
+      {children}
+    </text>;
+});
+AppBarSubtitle.displayName = "AppBarSubtitle";
+var AppBarIconButton = React.forwardRef((props, ref) => {
+	const { children, className, icon, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
+	const classNames = useAppBarClassNames("AppBarIconButton");
+	if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
+	return <view {...ref ? { ref } : {}} {...nativeProps} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.iconButton, className)}>
+      {icon ? <Icon className={classNames.icon} icon={icon} /> : children}
+    </view>;
+});
+AppBarIconButton.displayName = "AppBarIconButton";
+var AppBarSlot = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classNames = useAppBarClassNames("AppBarSlot");
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.custom, className)}>
+      {children}
+    </view>;
+});
+AppBarSlot.displayName = "AppBarSlot";
+//#endregion
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle };

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

@@ -0,0 +1,2 @@
+export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSlot as Slot, AppBarSubtitle as Subtitle, AppBarTitle as Title, type AppBarIconButtonProps as IconButtonProps, type AppBarLeftProps as LeftProps, type AppBarMainProps as MainProps, type AppBarRightProps as RightProps, type AppBarRootProps as RootProps, type AppBarSlotProps as SlotProps, type AppBarSubtitleProps as SubtitleProps, type AppBarTitleProps as TitleProps, } from './AppBar';
+//# sourceMappingURL=AppBar.namespace.d.ts.map

package/lib/components/AppBar/AppBar.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,UAAU,EAC9B,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,WAAW,IAAI,KAAK,EACpB,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,cAAc,IAAI,QAAQ,EAC1B,WAAW,IAAI,KAAK,EACpB,KAAK,qBAAqB,IAAI,eAAe,EAC7C,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,mBAAmB,IAAI,aAAa,EACzC,KAAK,gBAAgB,IAAI,UAAU,GACpC,MAAM,UAAU,CAAC"}

package/lib/components/AppBar/AppBar.namespace.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from "./AppBar.jsx";
+//#region src/components/AppBar/AppBar.namespace.ts
+var AppBar_namespace_exports = /* @__PURE__ */ __exportAll({
+	IconButton: () => AppBarIconButton,
+	Left: () => AppBarLeft,
+	Main: () => AppBarMain,
+	Right: () => AppBarRight,
+	Root: () => AppBarRoot,
+	Slot: () => AppBarSlot,
+	Subtitle: () => AppBarSubtitle,
+	Title: () => AppBarTitle
+});
+//#endregion
+export { AppBar_namespace_exports };

package/lib/components/AppBar/context.d.ts

@@ -0,0 +1,13 @@
+import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
+import * as React from "@lynx-js/react";
+export type SharedAppBarVariantProps = Pick<AppBarMainVariantProps, "theme" | "tone" | "transitionStyle">;
+export interface AppBarContextValue {
+    centeredTitlePaddingX: string;
+    safeAreaInsetTop: string;
+    sharedVariantProps: SharedAppBarVariantProps;
+    setLeftWidth: (width: number) => void;
+    setRightWidth: (width: number) => void;
+}
+export declare const AppBarProvider: React.Provider<AppBarContextValue | null>;
+export declare function useAppBarContext(consumer: string): AppBarContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/components/AppBar/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACtB,OAAO,GAAG,MAAM,GAAG,iBAAiB,CACrC,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,wBAAwB,CAAC;IAC7C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAID,eAAO,MAAM,cAAc,2CAAyB,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,kBAAkB,CAMrE"}

package/lib/components/AppBar/context.js

@@ -0,0 +1,12 @@
+import * as React from "@lynx-js/react";
+import "@seed-design/lynx-css/recipes/app-bar-main";
+//#region src/components/AppBar/context.ts
+var AppBarContext = React.createContext(null);
+var AppBarProvider = AppBarContext.Provider;
+function useAppBarContext(consumer) {
+	const ctx = React.useContext(AppBarContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <AppBarRoot/>.`);
+	return ctx;
+}
+//#endregion
+export { AppBarProvider, useAppBarContext };

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

@@ -0,0 +1,3 @@
+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';
+export * as AppBar from './AppBar.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/AppBar/useAppBar.d.ts

@@ -0,0 +1,15 @@
+import { AppBarVariantProps, AppBarVariant } from '@seed-design/lynx-css/recipes/app-bar';
+import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
+import { LynxViewProps } from '../../types';
+import { AppBarContextValue } from './context';
+type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
+type AppBarStyleObject = Record<string, string | number>;
+export declare function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): number | null;
+export declare function getMainLayoutStyle(theme: AppBarMainVariantProps["theme"], safeAreaInsetTop: string): AppBarStyleObject | undefined;
+export declare function useAppBar(variantProps: AppBarVariantProps): {
+    contextValue: AppBarContextValue;
+    resolvedVariantProps: Partial< AppBarVariant>;
+    rootLayoutStyle: AppBarStyleObject;
+};
+export {};
+//# sourceMappingURL=useAppBar.d.ts.map

package/lib/components/AppBar/useAppBar.d.ts.map

@@ -0,0 +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"}

package/lib/components/AppBar/useAppBar.js

@@ -0,0 +1,72 @@
+import { useSafeArea } from "../../hooks/useSafeArea.js";
+import * as React from "@lynx-js/react";
+//#region src/components/AppBar/useAppBar.ts
+var APP_BAR_HEIGHT_BY_THEME = {
+	cupertino: "44px",
+	android: "56px"
+};
+function getDefaultAppBarTheme() {
+	const systemInfo = globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo);
+	if (systemInfo == null) return "cupertino";
+	return systemInfo.platform === "Android" ? "android" : "cupertino";
+}
+function getLayoutWidth(event) {
+	const eventWithWidth = event;
+	const nextWidth = event.detail?.width ?? event.params?.width ?? eventWithWidth.width;
+	if (typeof nextWidth !== "number" || !Number.isFinite(nextWidth)) return null;
+	return Math.max(0, nextWidth);
+}
+function getCenteredTitlePadding(leftWidth, rightWidth) {
+	return `${Math.max(leftWidth, rightWidth)}px`;
+}
+function getRootLayoutStyle(theme, safeAreaInsetTop) {
+	return {
+		height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
+		paddingTop: safeAreaInsetTop
+	};
+}
+function getMainLayoutStyle(theme, safeAreaInsetTop) {
+	if (theme !== "cupertino") return void 0;
+	return {
+		top: safeAreaInsetTop,
+		bottom: "0px"
+	};
+}
+function useAppBar(variantProps) {
+	const { safeAreaInsetTop } = useSafeArea();
+	const [leftWidth, setLeftWidth] = React.useState(0);
+	const [rightWidth, setRightWidth] = React.useState(0);
+	const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
+	const resolvedVariantProps = {
+		...variantProps,
+		theme: resolvedTheme
+	};
+	const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
+	const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
+	const sharedVariantProps = React.useMemo(() => ({
+		theme: resolvedVariantProps.theme,
+		tone: resolvedVariantProps.tone,
+		transitionStyle: resolvedVariantProps.transitionStyle
+	}), [
+		resolvedVariantProps.theme,
+		resolvedVariantProps.tone,
+		resolvedVariantProps.transitionStyle
+	]);
+	return {
+		contextValue: React.useMemo(() => ({
+			centeredTitlePaddingX,
+			safeAreaInsetTop,
+			sharedVariantProps,
+			setLeftWidth,
+			setRightWidth
+		}), [
+			centeredTitlePaddingX,
+			safeAreaInsetTop,
+			sharedVariantProps
+		]),
+		resolvedVariantProps,
+		rootLayoutStyle
+	};
+}
+//#endregion
+export { getLayoutWidth, getMainLayoutStyle, useAppBar };

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { BadgeVariantProps } from '@seed-design/lynx-css/recipes/badge';
+import { LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+/**
+ * @platform Lynx
+ *
+ * 웹 Badge와 동일한 variant surface를 제공하지만, Lynx native `<view>` / `<text>`를
+ * 직접 렌더링합니다. Badge는 정적 정보 표시 컴포넌트이므로 press/tap API를 별도
+ * 소유하지 않습니다.
+ */
+export interface BadgeProps extends BadgeVariantProps, LynxStyledElementProps {
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Badge/Badge.jsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { badge } from "@seed-design/lynx-css/recipes/badge";
+//#region src/components/Badge/Badge.tsx
+var Badge = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = badge.splitVariantProps(props);
+	const classes = badge(variantProps);
+	const { children, className, ...nativeProps } = otherProps;
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classes.root, className)}>
+      <text className={classes.label}>{children}</text>
+    </view>;
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };

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

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

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

@@ -0,0 +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"}