@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

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

@@ -1,54 +1,48 @@
-import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
-import type { MainThread } from "@lynx-js/types";
-import * as React from "react";
-import { type ReactElement } from "react";
-type IconElementProps = {
-    className?: string;
-    style?: React.CSSProperties;
-    ref?: React.Ref<MainThread.Element>;
-};
+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
  *
  * 웹 대비 차이:
- * - 아이콘 전달 방식: 웹의 `<ActionButton.PrefixIcon svg={...} />` 가 아니라 `prefixIcon` /
- *   `suffixIcon` / `icon` prop 으로 ReactElement 를 직접 넘긴다. Lynx `<text>` 가 flex
- *   컨테이너가 아니라 children 전체를 text 로 감싸면 아이콘이 flex item 이 안 되기 때문.
+ * - 아이콘 렌더링: 웹의 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={<IconPlusFill />}
- *   suffixIcon={<IconChevronDownFill />}
- * >
+ * <ActionButton variant="brandSolid">
+ *   <PrefixIcon icon={<IconPlusFill />} />
  *   라벨
+ *   <SuffixIcon icon={<IconChevronDownFill />} />
  * </ActionButton>
  *
- * // iconOnly — `icon` prop 과 `aria-label` 필수
+ * // iconOnly — `<Icon />` child 와 `accessibility-label` 필수
  * <ActionButton
  *   layout="iconOnly"
  *   variant="neutralSolid"
- *   icon={<IconPlusFill />}
- *   aria-label="추가"
- * />
+ *   accessibility-label="추가"
+ * >
+ *   <Icon icon={<IconPlusFill />} />
+ * </ActionButton>
  * ```
  */
-export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "layout" | "pressed"> {
-    children?: React.ReactNode;
-    className?: string;
-    flexGrow?: number;
-    layout?: "withText" | "iconOnly";
-    icon?: ReactElement<IconElementProps>;
-    prefixIcon?: ReactElement<IconElementProps>;
-    suffixIcon?: ReactElement<IconElementProps>;
-    "aria-label"?: string;
-    bindtap?: () => void;
-    "main-thread:bindtap"?: () => void;
+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 {};

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

@@ -1 +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;AAE5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAsBjF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;AAuLF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,mFA4DvB,CAAC"}
+{"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

@@ -1,139 +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 { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
+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 "react";
-import { cloneElement, isValidElement, useMemo } from "react";
-import { useIconColor } from "../../hooks/use-icon-color";
-import { usePressTap } from "../../hooks/use-press-tap";
-import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
-import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
-import { ProgressCircleRange, ProgressCircleRoot, } from "../ProgressCircle";
-// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다.
-// intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의
-// 리터럴 JSX 정적 분석을 우회하고 `BackgroundSnapshot not found: view` 런타임 에러를 유발한다.
-// (자세한 내용: `packages/lynx-react/AGENTS.md` 의 "Native tag literal JSX constraint" 섹션)
-const { ClassNamesProvider, useClassNames, PropsProvider, useProps } = createSlotRecipeContext(actionButton);
-const progressCircleSizeMap = {
-    xsmall: "14",
-    small: "14",
-    medium: "16",
-    large: "18",
-};
-const 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,
-    ]);
-    return (<ClassNamesProvider value={classNames}>
+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}>
-        <view {...(ref ? { ref: ref } : {})} {...rest} className={clsx(classNames.root, userClassName)}>
-          {children}
-        </view>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view {...ref ? { ref } : {}} {...rest} className={clsx(classNames.root, userClassName)}>
+            {children}
+          </view>
+        </IconSlotProvider>
       </PropsProvider>
-    </ClassNamesProvider>);
+    </ClassNamesProvider>;
 });
 ActionButtonRoot.displayName = "ActionButtonRoot";
-const ActionButtonTextSlot = React.forwardRef((props, ref) => {
-    const { children, className: userClassName, ...rest } = props;
-    const classNames = useClassNames();
-    return (<text {...(ref ? { ref: ref } : {})} {...rest} className={clsx(classNames.text, userClassName)}>
+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>);
+    </text>;
 });
 ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
-/**
- * rootage vars 에서 현재 variant/size/layout 조합의 slot `size` 토큰
- * (예: `"var(--seed-dimension-x4)"`) 을 꺼낸다. 아이콘 컴포넌트가 inline
- * `style={{ width, height }}` 를 박기 때문에 style prop 으로 덮어 씌워야 recipe 사이즈가 적용된다.
- */
-function resolveIconSize(variantProps, slot) {
-    const size = variantProps?.size ?? "medium";
-    // `icon` slot is only rendered under `layout="iconOnly"` and keyed at
-    // `sizeXxxLayoutIconOnly.enabled.icon.size`. prefixIcon/suffixIcon follow
-    // the current `layout` (`withText` by default) path.
-    const layout = slot === "icon" ? "iconOnly" : (variantProps?.layout ?? "withText");
-    return resolveRecipeToken(actionButtonVars, [
-        `size${capitalize(size)}Layout${capitalize(layout)}`,
-        "enabled",
-        slot,
-        "size",
-    ]);
-}
-/**
- * `prefixIcon` / `suffixIcon` prop 으로 전달된 아이콘 element 에 slot className +
- * size(style) + main-thread tint-color ref 를 주입한다.
- */
-function ActionButtonIconSlot({ icon, slot, }) {
-    const classNames = useClassNames();
-    const variantProps = useProps();
-    const { ref } = useIconColor([
-        variantProps?.variant ?? null,
-        variantProps?.disabled ?? false,
-        variantProps?.loading ?? false,
-    ]);
-    const sizeVar = resolveIconSize(variantProps, slot);
-    const childProps = icon.props;
-    return cloneElement(icon, {
-        className: clsx(classNames[slot], childProps.className),
-        style: sizeVar != null ? { width: sizeVar, height: sizeVar, ...childProps.style } : childProps.style,
-        ref: ref,
-    });
-}
-function ActionButtonContent({ children, isIconOnly, icon, prefixIcon, suffixIcon, }) {
-    if (isIconOnly) {
-        return icon != null && isValidElement(icon) ? (<ActionButtonIconSlot icon={icon} slot="icon"/>) : null;
-    }
-    return (<>
-      {prefixIcon != null && isValidElement(prefixIcon) ? (<ActionButtonIconSlot icon={prefixIcon} slot="prefixIcon"/>) : null}
-      <ActionButtonTextSlot>{children}</ActionButtonTextSlot>
-      {suffixIcon != null && isValidElement(suffixIcon) ? (<ActionButtonIconSlot icon={suffixIcon} slot="suffixIcon"/>) : null}
-    </>);
+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>);
+	const classNames = useClassNames();
+	return <view className={classNames.content}>
+      <ActionButtonContent {...props} />
+    </view>;
 }
 function ActionButtonLoadingIndicator({ size }) {
-    const classNames = useClassNames();
-    return (<view className={classNames.loadingIndicator}>
-      <ProgressCircleRoot size={progressCircleSizeMap[size]} tone="inherit">
+	const classNames = useClassNames();
+	const progressCircleSize = resolveProgressCircleSize(size);
+	return <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size={progressCircleSize} tone="inherit">
         <ProgressCircleRange />
       </ProgressCircleRoot>
-    </view>);
+    </view>;
 }
-export const ActionButton = React.forwardRef((props, ref) => {
-    const { children, flexGrow, layout, icon, prefixIcon, suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, ...variantAndRest } = props;
-    const { disabled = false, loading = false } = variantAndRest;
-    const isInteractive = !disabled && !loading;
-    const isIconOnly = layout === "iconOnly";
-    const size = variantAndRest.size ?? "medium";
-    if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) {
-        console.warn('ActionButton: `layout="iconOnly"` requires `aria-label` for accessibility.');
-    }
-    const { pressed, ...pressTapHandlers } = usePressTap({
-        disabled: !isInteractive,
-        onTap: bindtap,
-        mainThreadOnTap: mainThreadBindtap,
-    });
-    return (<ActionButtonRoot {...variantAndRest} layout={layout} pressed={pressed} ref={ref} style={flexGrow != null ? { flexGrow } : undefined} {...pressTapHandlers}>
-      {loading ? (<>
-          <ActionButtonLoadingIndicator size={size}/>
-          <ActionButtonLoadingContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
+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}
-          </ActionButtonLoadingContent>
-        </>) : (<ActionButtonContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
-          {children}
-        </ActionButtonContent>)}
-    </ActionButtonRoot>);
+          </ActionButtonContent>}
+      </ActionButtonRoot>
+    </IconRequired>;
 });
 ActionButton.displayName = "ActionButton";
+//#endregion
+export { ActionButton };

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

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

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