@seed-design/lynx-react 0.7.0 → 0.8.0

package/lib/components/Accordion/Accordion.jsx

@@ -1,5 +1,5 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { toArray } from "../../utils/children.js";
 import { mergeProps } from "../../utils/merge-props.js";

package/lib/components/ActionButton/ActionButton.jsx

@@ -1,4 +1,4 @@
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { toArray } from "../../utils/children.js";
 import { mergeProps } from "../../utils/merge-props.js";

package/lib/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,64 @@
+import { DialogBackdropProps as DialogPrimitiveBackdropProps, DialogCloseProps as DialogPrimitiveCloseProps, DialogContentProps as DialogPrimitiveContentProps, DialogRootProps as DialogPrimitiveRootProps, DialogTriggerProps as DialogPrimitiveTriggerProps, DialogViewProps as DialogPrimitiveViewProps } from '@lynx-js/lynx-ui-dialog';
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from '@lynx-js/react';
+import { AlertDialogVariantProps } from '@seed-design/lynx-css/recipes/alert-dialog';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+type AlertDialogComponent<Props> = ((props: Props) => ReactElement) & {
+    displayName?: string;
+};
+type LynxForwardRefComponent<T, Props> = ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<T>>;
+export interface AlertDialogRootProps extends AlertDialogVariantProps, Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+    /** Whether the alert dialog is open (controlled mode). */
+    open?: boolean;
+    /** Whether the alert dialog is open by default (uncontrolled mode). */
+    defaultOpen?: boolean;
+    /** Called when the alert dialog's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+ * Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+ * not supported by the Lynx primitive.
+ */
+export declare const AlertDialogRoot: AlertDialogComponent<AlertDialogRootProps>;
+export interface AlertDialogTriggerProps extends DialogPrimitiveTriggerProps {
+}
+/** @platform Lynx — `asChild` and refs are unsupported. */
+export declare const AlertDialogTrigger: AlertDialogComponent<AlertDialogTriggerProps>;
+export interface AlertDialogPositionerProps extends DialogPrimitiveViewProps {
+}
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+export declare const AlertDialogPositioner: AlertDialogComponent<AlertDialogPositionerProps>;
+export interface AlertDialogBackdropProps extends DialogPrimitiveBackdropProps {
+}
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+ * Alert dialogs do not dismiss when the backdrop is tapped by default.
+ */
+export declare const AlertDialogBackdrop: AlertDialogComponent<AlertDialogBackdropProps>;
+export interface AlertDialogContentProps extends DialogPrimitiveContentProps, LynxAccessibilityProps {
+}
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted.
+ */
+export declare const AlertDialogContent: AlertDialogComponent<AlertDialogContentProps>;
+export interface AlertDialogHeaderProps extends StyleProps, LynxStyledElementProps {
+}
+export declare const AlertDialogHeader: LynxForwardRefComponent<unknown, AlertDialogHeaderProps>;
+export interface AlertDialogTitleProps extends StyleProps, LynxStyledElementProps, LynxAccessibilityProps {
+}
+export declare const AlertDialogTitle: LynxForwardRefComponent<unknown, AlertDialogTitleProps>;
+export interface AlertDialogDescriptionProps extends StyleProps, LynxStyledElementProps, LynxAccessibilityProps {
+}
+export declare const AlertDialogDescription: LynxForwardRefComponent<unknown, AlertDialogDescriptionProps>;
+export interface AlertDialogFooterProps extends StyleProps, LynxStyledElementProps {
+}
+export declare const AlertDialogFooter: LynxForwardRefComponent<unknown, AlertDialogFooterProps>;
+export interface AlertDialogActionProps extends DialogPrimitiveCloseProps {
+}
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+export declare const AlertDialogAction: AlertDialogComponent<AlertDialogActionProps>;
+export {};
+//# sourceMappingURL=AlertDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"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"}

package/lib/components/AlertDialog/AlertDialog.jsx

@@ -0,0 +1,138 @@
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { useStyleProps } from "../../utils/styled.js";
+import { forwardRef } from "@lynx-js/react";
+import clsx from "clsx";
+import { DialogBackdrop, DialogClose, DialogContent, DialogRoot, DialogTrigger, DialogView } from "@lynx-js/lynx-ui-dialog";
+import { alertDialog } from "@seed-design/lynx-css/recipes/alert-dialog";
+//#region src/components/AlertDialog/AlertDialog.tsx
+var { ClassNamesProvider, PropsProvider, useClassNames, useProps } = createSlotRecipeContext(alertDialog);
+function omitHeadlessLifecycleHandlers(props) {
+	if (!props) return props;
+	const { bindanimationstart: _bindanimationstart, bindanimationend: _bindanimationend, bindanimationcancel: _bindanimationcancel, bindtransitionstart: _bindtransitionstart, bindtransitionend: _bindtransitionend, bindtap: _bindtap, ...nativeProps } = props;
+	return nativeProps;
+}
+function useAlertDialogTransition(transition) {
+	return useProps()?.skipAnimation === true ? false : transition ?? true;
+}
+/**
+* @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+* Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+* not supported by the Lynx primitive.
+*/
+var AlertDialogRoot = forwardRef((props, _ref) => {
+	const [variantProps, restProps] = alertDialog.splitVariantProps(props);
+	const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+	const classNames = alertDialog(variantProps);
+	return <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRoot {...nativeProps} show={open} defaultShow={defaultOpen} onShowChange={onOpenChange}>
+          {children}
+        </DialogRoot>
+      </PropsProvider>
+    </ClassNamesProvider>;
+});
+AlertDialogRoot.displayName = "AlertDialogRoot";
+/** @platform Lynx — `asChild` and refs are unsupported. */
+var AlertDialogTrigger = forwardRef((props, _ref) => {
+	const { children, transition, ...nativeProps } = props;
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogTrigger {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTrigger>;
+});
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+var AlertDialogPositioner = forwardRef((props, _ref) => {
+	const { children, className, container, style, transition, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	const positionerStyle = container ? {
+		width: "100%",
+		height: "100%",
+		...style
+	} : style;
+	return <DialogView {...nativeProps} container={container} className={clsx(classNames.positioner, className)} style={positionerStyle} transition={resolvedTransition}>
+        {children}
+      </DialogView>;
+});
+AlertDialogPositioner.displayName = "AlertDialogPositioner";
+/**
+* @platform Lynx — refs are unsupported. Native lifecycle handlers in
+* `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+* Alert dialogs do not dismiss when the backdrop is tapped by default.
+*/
+var AlertDialogBackdrop = forwardRef((props, _ref) => {
+	const { children, className, transition, clickToClose = false, dialogBackdropProps, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogBackdrop {...nativeProps} className={clsx(classNames.backdrop, className)} transition={resolvedTransition} clickToClose={clickToClose} dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}>
+      {children}
+    </DialogBackdrop>;
+});
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
+/**
+* @platform Lynx — refs are unsupported. Native lifecycle handlers in
+* `dialogContentProps` are reserved by the headless primitive and are omitted.
+*/
+var AlertDialogContent = forwardRef((props, _ref) => {
+	const { children, className, transition, dialogContentProps, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "alertdialog", ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	const resolvedDialogContentProps = {
+		"accessibility-element": accessibilityElement,
+		"accessibility-role-description": accessibilityRoleDescription,
+		...omitHeadlessLifecycleHandlers(dialogContentProps)
+	};
+	return <DialogContent {...nativeProps} className={clsx(classNames.content, className)} transition={resolvedTransition} dialogContentProps={resolvedDialogContentProps}>
+      {children}
+    </DialogContent>;
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+var AlertDialogHeader = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.header, className)} style={style}>
+        {children}
+      </view>;
+});
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogTitle = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, "accessibility-heading": accessibilityHeading = true, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.title, className)} style={style} accessibility-heading={accessibilityHeading}>
+      {children}
+    </text>;
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+var AlertDialogDescription = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.description, className)} style={style}>
+        {children}
+      </text>;
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+var AlertDialogFooter = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.footer, className)} style={style}>
+        {children}
+      </view>;
+});
+AlertDialogFooter.displayName = "AlertDialogFooter";
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+var AlertDialogAction = forwardRef((props, _ref) => {
+	const { children, className, transition, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogClose {...nativeProps} className={clsx(classNames.action, className)} transition={resolvedTransition}>
+      {children}
+    </DialogClose>;
+});
+AlertDialogAction.displayName = "AlertDialogAction";
+//#endregion
+export { AlertDialogAction, AlertDialogBackdrop, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPositioner, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,2 @@
+export { AlertDialogAction as Action, AlertDialogBackdrop as Backdrop, AlertDialogContent as Content, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogPositioner as Positioner, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, type AlertDialogActionProps as ActionProps, type AlertDialogBackdropProps as BackdropProps, type AlertDialogContentProps as ContentProps, type AlertDialogDescriptionProps as DescriptionProps, type AlertDialogFooterProps as FooterProps, type AlertDialogHeaderProps as HeaderProps, type AlertDialogPositionerProps as PositionerProps, type AlertDialogRootProps as RootProps, type AlertDialogTitleProps as TitleProps, type AlertDialogTriggerProps as TriggerProps, } from './AlertDialog';
+//# sourceMappingURL=AlertDialog.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,IAAI,MAAM,EAC3B,mBAAmB,IAAI,QAAQ,EAC/B,kBAAkB,IAAI,OAAO,EAC7B,sBAAsB,IAAI,WAAW,EACrC,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,qBAAqB,IAAI,UAAU,EACnC,eAAe,IAAI,IAAI,EACvB,gBAAgB,IAAI,KAAK,EACzB,kBAAkB,IAAI,OAAO,EAC7B,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,wBAAwB,IAAI,aAAa,EAC9C,KAAK,uBAAuB,IAAI,YAAY,EAC5C,KAAK,2BAA2B,IAAI,gBAAgB,EACpD,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,0BAA0B,IAAI,eAAe,EAClD,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,qBAAqB,IAAI,UAAU,EACxC,KAAK,uBAAuB,IAAI,YAAY,GAC7C,MAAM,eAAe,CAAC"}

package/lib/components/AlertDialog/AlertDialog.namespace.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AlertDialogAction, AlertDialogBackdrop, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPositioner, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.jsx";
+//#region src/components/AlertDialog/AlertDialog.namespace.ts
+var AlertDialog_namespace_exports = /* @__PURE__ */ __exportAll({
+	Action: () => AlertDialogAction,
+	Backdrop: () => AlertDialogBackdrop,
+	Content: () => AlertDialogContent,
+	Description: () => AlertDialogDescription,
+	Footer: () => AlertDialogFooter,
+	Header: () => AlertDialogHeader,
+	Positioner: () => AlertDialogPositioner,
+	Root: () => AlertDialogRoot,
+	Title: () => AlertDialogTitle,
+	Trigger: () => AlertDialogTrigger
+});
+//#endregion
+export { AlertDialog_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { AlertDialogAction, type AlertDialogActionProps, AlertDialogBackdrop, type AlertDialogBackdropProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPositioner, type AlertDialogPositionerProps, AlertDialogRoot, type AlertDialogRootProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, } from './AlertDialog';
+export * as AlertDialog from './AlertDialog.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAC"}

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

@@ -2,6 +2,10 @@ 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";
+/**
+ * 아이콘 버튼의 bleed 보정 방향. `leading`은 왼쪽, `trailing`은 오른쪽, `both`는 양쪽.
+ */
+export type AppBarEdge = "leading" | "trailing" | "both";
 export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {
 }
 export declare const AppBarRoot: React.ForwardRefExoticComponent<AppBarRootProps & React.RefAttributes<unknown>>;
@@ -22,14 +26,23 @@ export declare const AppBarTitle: React.ForwardRefExoticComponent<AppBarTitlePro
 export interface AppBarSubtitleProps extends LynxElementProps {
 }
 export declare const AppBarSubtitle: React.ForwardRefExoticComponent<AppBarSubtitleProps & React.RefAttributes<unknown>>;
-export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+export interface AppBarIconButtonProps extends Omit<LynxElementProps, "flatten">, LynxPressableProps {
     icon?: React.ReactElement<LynxIconElementProps>;
     "accessibility-label"?: LynxViewProps["accessibility-label"];
     "accessibility-element"?: LynxViewProps["accessibility-element"];
     "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+    /**
+     * 슬롯의 첫·마지막 자식이 아이콘 버튼이면 해당 방향을, 유일한 자식이면 양쪽을 자동 보정한다.
+     * 명시하면 `AppBarLeft` / `AppBarRight`에서 감지한 자동 보정 방향을 덮어쓴다.
+     */
+    edge?: AppBarEdge;
 }
 export declare const AppBarIconButton: React.ForwardRefExoticComponent<AppBarIconButtonProps & React.RefAttributes<unknown>>;
 export interface AppBarSlotProps extends LynxStyledElementProps {
+    /**
+     * @internal 커스텀 슬롯에서는 bleed 보정을 적용하지 않는다. 전달된 값은 native 속성에서 제외한다.
+     */
+    edge?: AppBarEdge;
 }
 export declare const AppBarSlot: React.ForwardRefExoticComponent<AppBarSlotProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=AppBar.d.ts.map

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

@@ -1 +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;AAoCrB,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAmCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,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,uFA2B3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;CAAG;AAElE,eAAO,MAAM,UAAU,iFAYrB,CAAC"}
+{"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;AAoCrB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AA2DzD,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAmCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,CAAC;AAKH,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EACvC,kBAAkB;IACpB,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;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,uFA8C3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,iFAcrB,CAAC"}

package/lib/components/AppBar/AppBar.jsx

@@ -1,6 +1,7 @@
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
-import { Icon } from "../Icon/Icon.jsx";
+import { Icon, IconSlotProvider } from "../Icon/Icon.jsx";
 import { AppBarProvider, useAppBarContext } from "./context.js";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar.js";
 import * as React from "@lynx-js/react";
@@ -24,6 +25,31 @@ function useAppBarMainClassNames(consumer) {
 		throw new Error(`<${consumer}/> must be rendered inside <AppBarMain/>.`);
 	}
 }
+var AppBarEdgeContext = React.createContext(void 0);
+/** Fragments and arrays do not create layout boxes; retain their keys and nesting. */
+function countEdgeChildren(children) {
+	if (children == null || children === "" || typeof children === "boolean") return 0;
+	if (Array.isArray(children)) return children.reduce((count, child) => count + countEdgeChildren(child), 0);
+	if (React.isValidElement(children) && children.type === React.Fragment) return countEdgeChildren(children.props.children);
+	return 1;
+}
+function provideEdgeToChildren(children) {
+	const lastIndex = countEdgeChildren(children) - 1;
+	let index = 0;
+	function visit(child) {
+		if (child == null || child === "" || typeof child === "boolean") return child;
+		if (Array.isArray(child)) return child.map(visit);
+		if (React.isValidElement(child) && child.type === React.Fragment) return React.cloneElement(child, { children: visit(child.props.children) });
+		const childIndex = index++;
+		const edge = childIndex === 0 ? childIndex === lastIndex ? "both" : "leading" : childIndex === lastIndex ? "trailing" : void 0;
+		if (!React.isValidElement(child)) return child;
+		const automaticEdge = typeof child.type !== "string" && child.type !== AppBarSlot ? edge : void 0;
+		return <AppBarEdgeContext.Provider key={child.key} value={automaticEdge}>
+        {child}
+      </AppBarEdgeContext.Provider>;
+	}
+	return visit(children);
+}
 var AppBarRoot = React.forwardRef((props, ref) => {
 	const [variantProps, otherProps] = appBar.splitVariantProps(props);
 	const { children, className, style, ...nativeProps } = otherProps;
@@ -54,7 +80,7 @@ var AppBarLeft = React.forwardRef((props, ref) => {
 		if (width != null) setLeftWidth(width);
 	}, [bindlayoutchange, setLeftWidth]);
 	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, nativeProps)} className={clsx(classNames.left, className)}>
-      {children}
+      {provideEdgeToChildren(children)}
     </view>;
 });
 AppBarLeft.displayName = "AppBarLeft";
@@ -68,7 +94,7 @@ var AppBarRight = React.forwardRef((props, ref) => {
 		if (width != null) setRightWidth(width);
 	}, [bindlayoutchange, setRightWidth]);
 	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, nativeProps)} className={clsx(classNames.right, className)}>
-      {children}
+      {provideEdgeToChildren(children)}
     </view>;
 });
 AppBarRight.displayName = "AppBarRight";
@@ -113,20 +139,30 @@ var AppBarSubtitle = React.forwardRef((props, ref) => {
 });
 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 { children, className, icon, edge, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
 	const classNames = useAppBarClassNames("AppBarIconButton");
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
+	const automaticEdge = React.useContext(AppBarEdgeContext);
+	const resolvedEdge = edge ?? automaticEdge;
 	if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
-	return <view {...mergeProps(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}
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTriggerProps, scaleFeedbackTargetProps, nativeProps)} flatten={false} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.iconButton, (resolvedEdge === "leading" || resolvedEdge === "both") && "seed-app-bar__icon-button-edge-leading", (resolvedEdge === "trailing" || resolvedEdge === "both") && "seed-app-bar__icon-button-edge-trailing", className)}>
+      <IconSlotProvider value={{
+		classNames: { icon: classNames.icon },
+		deps: [classNames.icon]
+	}}>
+        {icon ? <Icon icon={icon} /> : children}
+      </IconSlotProvider>
     </view>;
 });
 AppBarIconButton.displayName = "AppBarIconButton";
 var AppBarSlot = React.forwardRef((props, ref) => {
-	const { children, className, ...nativeProps } = props;
+	const { children, className, edge: _edge, ...nativeProps } = props;
 	const classNames = useAppBarClassNames("AppBarSlot");
-	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.custom, className)}>
-      {children}
-    </view>;
+	return <AppBarEdgeContext.Provider value={void 0}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.custom, className)}>
+        {children}
+      </view>
+    </AppBarEdgeContext.Provider>;
 });
 AppBarSlot.displayName = "AppBarSlot";
 //#endregion

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

@@ -1,2 +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';
+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 AppBarEdge as Edge, 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

@@ -1 +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"}
+{"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,UAAU,IAAI,IAAI,EACvB,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/index.d.ts

@@ -1,3 +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 { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, type AppBarEdge, 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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}
+{"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,UAAU,EACf,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/AttachmentDisplay/AttachmentDisplay.d.ts

@@ -0,0 +1,182 @@
+import { IntrinsicElements, NodesRef } from '@lynx-js/types';
+import { AttachmentInputVariantProps } from '@seed-design/lynx-css/recipes/attachment-input';
+import { AttachmentInputItemVariantProps } from '@seed-design/lynx-css/recipes/attachment-input-item';
+import { AttachmentInputTriggerVariantProps } from '@seed-design/lynx-css/recipes/attachment-input-trigger';
+import { FieldLabelVariantProps } from '@seed-design/lynx-css/recipes/field-label';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+export type AttachmentDisplayStatusDetails = {
+    status: "pending";
+} | {
+    status: "uploading";
+    progress?: number;
+} | {
+    status: "success";
+} | {
+    status: "error";
+};
+export type AttachmentDisplayEntry = {
+    id: string;
+    thumbnailUrl?: string;
+    name?: string;
+    type?: string;
+    size?: number;
+} & AttachmentDisplayStatusDetails;
+export interface AttachmentDisplayProps {
+    entries?: AttachmentDisplayEntry[];
+    defaultEntries?: AttachmentDisplayEntry[];
+    onEntriesChange?: (entries: AttachmentDisplayEntry[]) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    maxEntries?: number;
+    onTriggerTap?: (helpers: {
+        addEntries: (entries: AttachmentDisplayEntry[]) => void;
+        updateEntryStatus: (id: string, details: AttachmentDisplayStatusDetails) => void;
+    }) => void;
+}
+interface AttachmentDisplayStateProps {
+    "data-disabled": boolean;
+    "data-readonly": boolean;
+    "data-invalid": boolean;
+    "data-required": boolean;
+}
+interface AttachmentDisplayContextValue {
+    entries: AttachmentDisplayEntry[];
+    currentEntryCount: number;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    maxEntries: number;
+    triggerDisabled: boolean;
+    stateProps: AttachmentDisplayStateProps;
+    onTriggerTap?: AttachmentDisplayProps["onTriggerTap"];
+    addEntries: (entries: AttachmentDisplayEntry[]) => void;
+    removeEntry: (id: string) => void;
+    reorderEntry: (fromIndex: number, toIndex: number) => void;
+    clearEntries: () => void;
+    updateEntryStatus: (id: string, details: AttachmentDisplayStatusDetails) => void;
+}
+type AttachmentDisplayItemContextValue = AttachmentDisplayEntry & {
+    imageProps?: {
+        src: string;
+        alt?: string;
+    };
+};
+type NativeScrollViewProps = Omit<IntrinsicElements["scroll-view"], "children" | "className" | "style">;
+export declare function useAttachmentDisplayContext(): AttachmentDisplayContextValue;
+export declare function useAttachmentDisplayItemContext(): AttachmentDisplayItemContextValue;
+export declare function useAttachmentDisplay(props?: AttachmentDisplayProps): {
+    entries: AttachmentDisplayEntry[];
+    currentEntryCount: number;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    maxEntries: number;
+    triggerDisabled: boolean;
+    stateProps: {
+        "data-disabled": boolean;
+        "data-readonly": boolean;
+        "data-invalid": boolean;
+        "data-required": boolean;
+    };
+    addEntries: (incoming: AttachmentDisplayEntry[]) => void;
+    removeEntry: (id: string) => void;
+    reorderEntry: (fromIndex: number, toIndex: number) => void;
+    clearEntries: () => void;
+    updateEntryStatus: (id: string, details: AttachmentDisplayStatusDetails) => void;
+    onTriggerTap: ((helpers: {
+        addEntries: (entries: AttachmentDisplayEntry[]) => void;
+        updateEntryStatus: (id: string, details: AttachmentDisplayStatusDetails) => void;
+    }) => void) | undefined;
+};
+export interface AttachmentDisplayRootProps extends AttachmentDisplayProps, AttachmentInputVariantProps, LynxStyledElementProps {
+}
+export declare const AttachmentDisplayRoot: React.ForwardRefExoticComponent<AttachmentDisplayRootProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayControlProps extends AttachmentInputVariantProps, LynxStyledElementProps {
+}
+export declare const AttachmentDisplayControl: React.ForwardRefExoticComponent<AttachmentDisplayControlProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayContainerProps extends LynxStyledElementProps, Omit<NativeScrollViewProps, "scroll-orientation" | "scroll-bar-enable"> {
+}
+export declare const AttachmentDisplayContainer: React.ForwardRefExoticComponent<Omit<AttachmentDisplayContainerProps, "ref"> & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemGroup: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayFooter: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayDescription: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayErrorMessage: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayHeaderProps extends LynxStyledElementProps {
+}
+export declare const AttachmentDisplayHeader: React.ForwardRefExoticComponent<AttachmentDisplayHeaderProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayLabelProps extends FieldLabelVariantProps, LynxStyledElementProps {
+}
+export declare const AttachmentDisplayLabel: React.ForwardRefExoticComponent<AttachmentDisplayLabelProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayIndicatorTextProps extends LynxStyledElementProps {
+}
+export declare const AttachmentDisplayIndicatorText: React.ForwardRefExoticComponent<AttachmentDisplayIndicatorTextProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayRequiredIndicatorProps extends LynxStyledElementProps {
+}
+export declare const AttachmentDisplayRequiredIndicator: React.ForwardRefExoticComponent<AttachmentDisplayRequiredIndicatorProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayTriggerProps extends AttachmentInputTriggerVariantProps, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const AttachmentDisplayTrigger: React.ForwardRefExoticComponent<AttachmentDisplayTriggerProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayTriggerIconProps extends LynxStyledElementProps {
+    image?: React.ReactNode;
+}
+export declare const AttachmentDisplayTriggerIcon: React.ForwardRefExoticComponent<AttachmentDisplayTriggerIconProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayTriggerItemCountProps extends LynxStyledElementProps {
+}
+export declare const AttachmentDisplayTriggerItemCount: React.ForwardRefExoticComponent<AttachmentDisplayTriggerItemCountProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayItemProps extends Omit<AttachmentInputItemVariantProps, "type">, LynxStyledElementProps {
+    entry: AttachmentDisplayEntry;
+}
+export declare const AttachmentDisplayItem: React.ForwardRefExoticComponent<AttachmentDisplayItemProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemSurface: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemImage: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemThumbnail: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemMetadata: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export declare const AttachmentDisplayItemBadge: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayItemActionButtonProps extends LynxStyledElementProps, LynxPressableProps {
+}
+export declare const AttachmentDisplayItemActionButton: React.ForwardRefExoticComponent<AttachmentDisplayItemActionButtonProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayItemBackdropProps extends Omit<LynxStyledElementProps, "children"> {
+    status: AttachmentDisplayEntry["status"];
+    children?: React.ReactNode | ((entry: AttachmentDisplayEntry) => React.ReactNode);
+}
+export declare const AttachmentDisplayItemBackdrop: React.ForwardRefExoticComponent<AttachmentDisplayItemBackdropProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayItemRemoveButtonProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const AttachmentDisplayItemRemoveButton: React.ForwardRefExoticComponent<AttachmentDisplayItemRemoveButtonProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentDisplayContextProps {
+    children: (context: AttachmentDisplayContextValue) => React.ReactNode;
+}
+export declare const AttachmentDisplayContext: (props: AttachmentDisplayContextProps) => React.ReactNode;
+export declare const AttachmentDisplay: {
+    Root: React.ForwardRefExoticComponent<AttachmentDisplayRootProps & React.RefAttributes<NodesRef>>;
+    Control: React.ForwardRefExoticComponent<AttachmentDisplayControlProps & React.RefAttributes<NodesRef>>;
+    Container: React.ForwardRefExoticComponent<Omit<AttachmentDisplayContainerProps, "ref"> & React.RefAttributes<NodesRef>>;
+    ItemGroup: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    Footer: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    Header: React.ForwardRefExoticComponent<AttachmentDisplayHeaderProps & React.RefAttributes<NodesRef>>;
+    Label: React.ForwardRefExoticComponent<AttachmentDisplayLabelProps & React.RefAttributes<NodesRef>>;
+    IndicatorText: React.ForwardRefExoticComponent<AttachmentDisplayIndicatorTextProps & React.RefAttributes<NodesRef>>;
+    RequiredIndicator: React.ForwardRefExoticComponent<AttachmentDisplayRequiredIndicatorProps & React.RefAttributes<NodesRef>>;
+    Description: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ErrorMessage: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    Trigger: React.ForwardRefExoticComponent<AttachmentDisplayTriggerProps & React.RefAttributes<NodesRef>>;
+    TriggerIcon: React.ForwardRefExoticComponent<AttachmentDisplayTriggerIconProps & React.RefAttributes<NodesRef>>;
+    TriggerItemCount: React.ForwardRefExoticComponent<AttachmentDisplayTriggerItemCountProps & React.RefAttributes<NodesRef>>;
+    Item: React.ForwardRefExoticComponent<AttachmentDisplayItemProps & React.RefAttributes<NodesRef>>;
+    ItemSurface: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ItemImage: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ItemThumbnail: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ItemMetadata: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ItemBadge: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<NodesRef>>;
+    ItemActionButton: React.ForwardRefExoticComponent<AttachmentDisplayItemActionButtonProps & React.RefAttributes<NodesRef>>;
+    ItemBackdrop: React.ForwardRefExoticComponent<AttachmentDisplayItemBackdropProps & React.RefAttributes<NodesRef>>;
+    ItemRemoveButton: React.ForwardRefExoticComponent<AttachmentDisplayItemRemoveButtonProps & React.RefAttributes<NodesRef>>;
+    Context: (props: AttachmentDisplayContextProps) => React.ReactNode;
+};
+export {};
+//# sourceMappingURL=AttachmentDisplay.d.ts.map