@seed-design/lynx-react 0.7.1 → 0.9.0

package/lib/components/AttachmentInput/AttachmentInput.jsx

@@ -0,0 +1,520 @@
+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 { toArray } from "../../utils/children.js";
+import { mergeProps } from "../../utils/merge-props.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { IconSlotProvider, InternalIcon } from "../Icon/Icon.jsx";
+import { useFieldContext } from "../Field/context.js";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { attachmentInput } from "@seed-design/lynx-css/recipes/attachment-input";
+import { attachmentInputItem } from "@seed-design/lynx-css/recipes/attachment-input-item";
+import { attachmentInputTrigger } from "@seed-design/lynx-css/recipes/attachment-input-trigger";
+//#region src/components/AttachmentInput/AttachmentInput.tsx
+function pickNativeViewProps(props) {
+	return {
+		id: props.id,
+		flatten: props.flatten,
+		style: props.style,
+		"accessibility-label": props["accessibility-label"],
+		"accessibility-traits": props["accessibility-traits"],
+		"accessibility-element": props["accessibility-element"],
+		"accessibility-value": props["accessibility-value"],
+		"accessibility-role-description": props["accessibility-role-description"],
+		"accessibility-elements-hidden": props["accessibility-elements-hidden"],
+		"accessibility-heading": props["accessibility-heading"],
+		"accessibility-actions": props["accessibility-actions"],
+		"accessibility-exclusive-focus": props["accessibility-exclusive-focus"],
+		"ios-platform-accessibility-id": props["ios-platform-accessibility-id"]
+	};
+}
+var rootRecipe = createSlotRecipeContext(attachmentInput);
+var triggerRecipe = createSlotRecipeContext(attachmentInputTrigger);
+var itemRecipe = createSlotRecipeContext(attachmentInputItem);
+var AttachmentInputContextObject = React.createContext(null);
+var AttachmentInputItemContextObject = React.createContext(null);
+function useAttachmentInputContext() {
+	const context = React.useContext(AttachmentInputContextObject);
+	if (!context) throw new Error("AttachmentInput components must be used within AttachmentInput.Root");
+	return context;
+}
+function useAttachmentInputItemContext() {
+	const context = React.useContext(AttachmentInputItemContextObject);
+	if (!context) throw new Error("AttachmentInput item components must be used within AttachmentInput.Item");
+	return context;
+}
+function isAcceptedType(file, accept) {
+	if (!accept) return true;
+	const patterns = (Array.isArray(accept) ? accept : accept.split(",")).map((value) => value.trim().toLowerCase()).filter(Boolean);
+	const fileName = file.name.toLowerCase();
+	const fileType = file.type.toLowerCase();
+	return patterns.some((pattern) => {
+		if (pattern.startsWith(".")) return fileName.endsWith(pattern);
+		if (pattern.endsWith("/*")) return fileType.startsWith(pattern.slice(0, -1));
+		if (pattern.includes("*")) {
+			const [type] = pattern.split("/");
+			return fileType.startsWith(`${type}/`);
+		}
+		return fileType === pattern;
+	});
+}
+function isImageAcceptPattern(pattern) {
+	if (pattern.startsWith("image/")) return true;
+	return [
+		".avif",
+		".bmp",
+		".gif",
+		".heic",
+		".heif",
+		".jpeg",
+		".jpg",
+		".png",
+		".webp"
+	].some((extension) => pattern === extension);
+}
+function getAcceptType(accept) {
+	if (!accept) return void 0;
+	const patterns = (Array.isArray(accept) ? accept : accept.split(",")).map((value) => value.trim().toLowerCase()).filter(Boolean);
+	return patterns.length > 0 && patterns.every(isImageAcceptPattern) ? "image" : void 0;
+}
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	return `${Number.parseFloat((bytes / 1024 ** index).toFixed(1))} ${units[index]}`;
+}
+function useAttachmentInput(props = {}) {
+	const { acceptedFileEntries: value, defaultAcceptedFileEntries = [], onAcceptedFileEntriesChange, onFileAccept, onFileReject, accept, disabled: disabledProp, required: requiredProp, invalid: invalidProp, readOnly: readOnlyProp, maxFiles: maxFilesProp = 1, maxFileSize = Number.POSITIVE_INFINITY, minFileSize = 0, validate, onSelectFiles, onSelectError } = props;
+	const fieldContext = useFieldContext({ strict: false });
+	const disabled = disabledProp ?? fieldContext?.disabled ?? false;
+	const required = requiredProp ?? fieldContext?.required ?? false;
+	const invalid = invalidProp ?? fieldContext?.invalid ?? false;
+	const readOnly = readOnlyProp ?? fieldContext?.readOnly ?? false;
+	const maxFiles = Math.max(1, maxFilesProp);
+	const [acceptedFileEntries, setAcceptedFileEntries] = useControllableState({
+		value,
+		defaultValue: defaultAcceptedFileEntries,
+		onChange: onAcceptedFileEntriesChange
+	});
+	const entries = acceptedFileEntries ?? [];
+	const entriesRef = React.useRef(entries);
+	entriesRef.current = entries;
+	const optionsRef = React.useRef({
+		disabled,
+		readOnly,
+		accept,
+		maxFiles,
+		maxFileSize,
+		minFileSize,
+		validate,
+		onSelectFiles,
+		onSelectError,
+		onFileAccept,
+		onFileReject
+	});
+	optionsRef.current = {
+		disabled,
+		readOnly,
+		accept,
+		maxFiles,
+		maxFileSize,
+		minFileSize,
+		validate,
+		onSelectFiles,
+		onSelectError,
+		onFileAccept,
+		onFileReject
+	};
+	const idCounterRef = React.useRef(0);
+	const pickerRequestRef = React.useRef(0);
+	const mountedRef = React.useRef(true);
+	React.useEffect(() => {
+		return () => {
+			mountedRef.current = false;
+			pickerRequestRef.current += 1;
+		};
+	}, []);
+	const multiple = maxFiles > 1;
+	const maxFilesReached = entries.length >= maxFiles;
+	const triggerDisabled = disabled || readOnly || maxFilesReached;
+	const acceptType = getAcceptType(accept);
+	const updateFileEntryStatus = React.useCallback((id, details) => {
+		const next = entriesRef.current.map((entry) => entry.id === id ? {
+			...entry,
+			...details
+		} : entry);
+		entriesRef.current = next;
+		setAcceptedFileEntries(next);
+	}, [setAcceptedFileEntries]);
+	const validateFiles = React.useCallback((files) => {
+		const { accept: currentAccept, maxFileSize: currentMaxFileSize, minFileSize: currentMinFileSize, maxFiles: currentMaxFiles, validate: currentValidate } = optionsRef.current;
+		const accepted = [];
+		const rejected = [];
+		let addedCount = 0;
+		for (const file of files) {
+			const errors = [];
+			if (entriesRef.current.length + addedCount >= currentMaxFiles) errors.push("TOO_MANY_FILES");
+			if (!isAcceptedType(file, currentAccept)) errors.push("INVALID_TYPE");
+			if (file.size > currentMaxFileSize) errors.push("FILE_TOO_LARGE");
+			if (file.size < currentMinFileSize) errors.push("FILE_TOO_SMALL");
+			const customErrors = currentValidate?.(file);
+			if (customErrors) errors.push(...customErrors);
+			if (errors.length > 0) rejected.push({
+				file,
+				errors
+			});
+			else {
+				accepted.push(file);
+				addedCount += 1;
+			}
+		}
+		return {
+			accepted,
+			rejected
+		};
+	}, []);
+	const setFileEntries = React.useCallback((files) => {
+		const currentOptions = optionsRef.current;
+		if (currentOptions.disabled || currentOptions.readOnly) return;
+		const { accepted, rejected } = validateFiles(files);
+		const acceptedEntries = accepted.map((file) => ({
+			id: `attachment-${Date.now()}-${++idCounterRef.current}`,
+			file,
+			status: "pending"
+		}));
+		if (acceptedEntries.length > 0) {
+			const acceptedForCallback = currentOptions.maxFiles > 1 ? acceptedEntries : [acceptedEntries[0]];
+			const nextEntries = currentOptions.maxFiles > 1 ? [...entriesRef.current, ...acceptedEntries] : acceptedForCallback;
+			entriesRef.current = nextEntries;
+			setAcceptedFileEntries(nextEntries);
+			currentOptions.onFileAccept?.(acceptedForCallback, { updateFileEntryStatus });
+		}
+		if (rejected.length > 0) currentOptions.onFileReject?.(rejected);
+	}, [
+		setAcceptedFileEntries,
+		updateFileEntryStatus,
+		validateFiles
+	]);
+	const openFilePicker = React.useCallback(() => {
+		const currentOptions = optionsRef.current;
+		if (currentOptions.disabled || currentOptions.readOnly || entriesRef.current.length >= currentOptions.maxFiles) return;
+		const picker = currentOptions.onSelectFiles;
+		if (!picker) return;
+		const requestId = ++pickerRequestRef.current;
+		let result;
+		try {
+			result = picker();
+		} catch (error) {
+			currentOptions.onSelectError?.(error);
+			return;
+		}
+		Promise.resolve(result).then((files) => {
+			if (!mountedRef.current || requestId !== pickerRequestRef.current) return;
+			if (!Array.isArray(files) || files.length === 0) return;
+			if (optionsRef.current.disabled || optionsRef.current.readOnly) return;
+			setFileEntries(files);
+		}).catch((error) => {
+			if (mountedRef.current && requestId === pickerRequestRef.current) optionsRef.current.onSelectError?.(error);
+		});
+	}, [setFileEntries]);
+	const removeFileEntry = React.useCallback((id) => {
+		if (optionsRef.current.readOnly) return;
+		const next = entriesRef.current.filter((entry) => entry.id !== id);
+		entriesRef.current = next;
+		setAcceptedFileEntries(next);
+	}, [setAcceptedFileEntries]);
+	const clearFileEntries = React.useCallback(() => {
+		if (optionsRef.current.readOnly) return;
+		entriesRef.current = [];
+		setAcceptedFileEntries([]);
+	}, [setAcceptedFileEntries]);
+	const reorderFileEntry = React.useCallback((fromIndex, toIndex) => {
+		if (optionsRef.current.disabled || optionsRef.current.readOnly) return;
+		const currentEntries = entriesRef.current;
+		if (fromIndex < 0 || toIndex < 0 || fromIndex >= currentEntries.length || toIndex >= currentEntries.length || fromIndex === toIndex) return;
+		const next = [...currentEntries];
+		const [entry] = next.splice(fromIndex, 1);
+		next.splice(toIndex, 0, entry);
+		entriesRef.current = next;
+		setAcceptedFileEntries(next);
+	}, [setAcceptedFileEntries]);
+	const stateProps = {
+		"data-disabled": triggerDisabled,
+		"data-readonly": readOnly,
+		"data-invalid": invalid,
+		"data-required": required
+	};
+	return {
+		...props,
+		acceptedFileEntries: entries,
+		currentFileEntryCount: entries.length,
+		acceptType,
+		multiple,
+		maxFiles,
+		disabled,
+		required,
+		invalid,
+		readOnly,
+		triggerDisabled,
+		stateProps,
+		openFilePicker,
+		setFileEntries,
+		updateFileEntryStatus,
+		removeFileEntry,
+		clearFileEntries,
+		reorderFileEntry
+	};
+}
+var AttachmentInputRoot = React.forwardRef((props, forwardedRef) => {
+	const [variantProps, otherProps] = attachmentInput.splitVariantProps(props);
+	const { children, className, acceptedFileEntries, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, onFileReject, onFileAccept, accept, disabled, required, invalid, readOnly, maxFiles, maxFileSize, minFileSize, validate, onSelectFiles, onSelectError } = otherProps;
+	const api = useAttachmentInput({
+		acceptedFileEntries,
+		defaultAcceptedFileEntries,
+		onAcceptedFileEntriesChange,
+		onFileReject,
+		onFileAccept,
+		accept,
+		disabled,
+		required,
+		invalid,
+		readOnly,
+		maxFiles,
+		maxFileSize,
+		minFileSize,
+		validate,
+		onSelectFiles,
+		onSelectError
+	});
+	const classes = attachmentInput(variantProps);
+	return <AttachmentInputContextObject.Provider value={api}>
+        <rootRecipe.ClassNamesProvider value={classes}>
+          <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, api.stateProps, pickNativeViewProps(props))} className={clsx(classes.root, className)}>
+            {children}
+          </view>
+        </rootRecipe.ClassNamesProvider>
+      </AttachmentInputContextObject.Provider>;
+});
+AttachmentInputRoot.displayName = "AttachmentInputRoot";
+var AttachmentInputContainer = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = rootRecipe.useClassNames();
+	return <scroll-view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} scroll-orientation="horizontal" scroll-bar-enable={false} className={clsx(classes.container, className)}>
+        <view className={classes.containerContent}>{children}</view>
+      </scroll-view>;
+});
+AttachmentInputContainer.displayName = "AttachmentInputContainer";
+var AttachmentInputItemGroup = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = rootRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.itemGroup, className)}>
+        {children}
+      </view>;
+});
+AttachmentInputItemGroup.displayName = "AttachmentInputItemGroup";
+var AttachmentInputTrigger = React.forwardRef((props, forwardedRef) => {
+	const [variantProps, restProps] = attachmentInputTrigger.splitVariantProps(props);
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...nativeProps } = restProps;
+	const context = useAttachmentInputContext();
+	const press = usePressTap({
+		disabled: context.triggerDisabled,
+		onTap: (event) => {
+			context.openFilePicker();
+			bindtap?.(event);
+		},
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = attachmentInputTrigger({
+		...variantProps,
+		pressed: press.pressed,
+		disabled: context.triggerDisabled
+	});
+	return <triggerRecipe.ClassNamesProvider value={classes}>
+        <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, press, nativeProps)} accessibility-element={accessibilityElement} accessibility-traits={accessibilityTraits ?? (context.triggerDisabled ? "disabled" : "button")} className={clsx(classes.root, className)}>
+          {children}
+        </view>
+      </triggerRecipe.ClassNamesProvider>;
+});
+AttachmentInputTrigger.displayName = "AttachmentInputTrigger";
+var AttachmentInputTriggerIcon = React.forwardRef(({ image, general, children, className, ...nativeProps }, forwardedRef) => {
+	const context = useAttachmentInputContext();
+	const classes = attachmentInputTrigger({
+		pressed: false,
+		disabled: context.triggerDisabled
+	});
+	const icon = context.acceptType === "image" ? image ?? children : general ?? children;
+	if (!React.isValidElement(icon)) return null;
+	return <triggerRecipe.ClassNamesProvider value={classes}>
+      <InternalIcon icon={icon} {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.icon, className)} />
+    </triggerRecipe.ClassNamesProvider>;
+});
+AttachmentInputTriggerIcon.displayName = "AttachmentInputTriggerIcon";
+var AttachmentInputTriggerItemCount = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const context = useAttachmentInputContext();
+	const classes = attachmentInputTrigger({
+		pressed: false,
+		disabled: context.triggerDisabled
+	});
+	return <triggerRecipe.ClassNamesProvider value={classes}>
+      <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.itemCountArea, className)}>
+        <text className={classes.itemCount}>{context.currentFileEntryCount}</text>
+        <text className={classes.maxItemCount}>/{context.maxFiles}</text>
+        {children}
+      </view>
+    </triggerRecipe.ClassNamesProvider>;
+});
+AttachmentInputTriggerItemCount.displayName = "AttachmentInputTriggerItemCount";
+var AttachmentInputItem = React.forwardRef(({ fileEntry, children, className, ...props }, forwardedRef) => {
+	const root = useAttachmentInputContext();
+	const [variantProps] = attachmentInputItem.splitVariantProps(props);
+	const type = variantProps.type ?? root.acceptType ?? "general";
+	const classes = attachmentInputItem({
+		...variantProps,
+		type,
+		disabled: root.disabled,
+		readOnly: root.readOnly,
+		pressed: false,
+		dragging: variantProps.dragging ?? false
+	});
+	const imageSource = fileEntry.file.previewUrl ?? fileEntry.file.uri;
+	const itemContext = {
+		...fileEntry,
+		imageProps: type === "image" && imageSource ? {
+			src: imageSource,
+			alt: fileEntry.file.name
+		} : void 0,
+		removeButtonProps: { bindtap: () => {
+			if (!root.readOnly) root.removeFileEntry(fileEntry.id);
+		} }
+	};
+	return <AttachmentInputItemContextObject.Provider value={itemContext}>
+        <itemRecipe.ClassNamesProvider value={classes}>
+          <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, root.stateProps, pickNativeViewProps(props))} className={clsx(classes.root, className)}>
+            {children}
+          </view>
+        </itemRecipe.ClassNamesProvider>
+      </AttachmentInputItemContextObject.Provider>;
+});
+AttachmentInputItem.displayName = "AttachmentInputItem";
+var AttachmentInputItemName = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const item = useAttachmentInputItemContext();
+	const classes = itemRecipe.useClassNames();
+	return <text {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} text-maxline="1" className={clsx(classes.name, className)}>
+        {children ?? item.file.name}
+      </text>;
+});
+AttachmentInputItemName.displayName = "AttachmentInputItemName";
+var AttachmentInputItemSize = React.forwardRef(({ children, className, formatBytes = formatFileSize, ...nativeProps }, forwardedRef) => {
+	const item = useAttachmentInputItemContext();
+	const classes = itemRecipe.useClassNames();
+	return <text {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.size, className)}>
+        {children ?? formatBytes(item.file.size)}
+      </text>;
+});
+AttachmentInputItemSize.displayName = "AttachmentInputItemSize";
+var AttachmentInputItemSurface = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = itemRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.surface, className)}>
+      {children}
+    </view>;
+});
+AttachmentInputItemSurface.displayName = "AttachmentInputItemSurface";
+var AttachmentInputItemImage = React.forwardRef(({ className, "accessibility-label": accessibilityLabel, ...nativeProps }, forwardedRef) => {
+	const item = useAttachmentInputItemContext();
+	const classes = itemRecipe.useClassNames();
+	if (!item.imageProps) return null;
+	return <image {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} src={item.imageProps.src} accessibility-label={accessibilityLabel ?? item.imageProps.alt} className={clsx(classes.image, className)} />;
+});
+AttachmentInputItemImage.displayName = "AttachmentInputItemImage";
+var AttachmentInputItemThumbnail = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = itemRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.thumbnail, className)}>
+      <IconSlotProvider value={{ classNames: { icon: classes.thumbnailIcon } }}>
+        {children}
+      </IconSlotProvider>
+    </view>;
+});
+AttachmentInputItemThumbnail.displayName = "AttachmentInputItemThumbnail";
+var AttachmentInputItemMetadata = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = itemRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.metadata, className)}>
+      {children}
+    </view>;
+});
+AttachmentInputItemMetadata.displayName = "AttachmentInputItemMetadata";
+var AttachmentInputItemBadge = React.forwardRef(({ children, className, ...nativeProps }, forwardedRef) => {
+	const classes = itemRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.badge, className)}>
+        <text className={classes.badgeLabel}>{children}</text>
+      </view>;
+});
+AttachmentInputItemBadge.displayName = "AttachmentInputItemBadge";
+var AttachmentInputItemActionButton = React.forwardRef(({ children, className, bindtap, ...nativeProps }, forwardedRef) => {
+	const classes = itemRecipe.useClassNames();
+	const actionChildren = toArray(children).map((child) => {
+		if (typeof child === "string" || typeof child === "number") return <text className={classes.actionLabel}>{child}</text>;
+		return child;
+	});
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps, { bindtap })} className={clsx(classes.actionButton, className)}>
+      <IconSlotProvider value={{ classNames: { icon: classes.actionIcon } }}>
+        {actionChildren}
+      </IconSlotProvider>
+    </view>;
+});
+AttachmentInputItemActionButton.displayName = "AttachmentInputItemActionButton";
+var AttachmentInputItemBackdrop = React.forwardRef(({ status, children, className, ...nativeProps }, forwardedRef) => {
+	const entry = useAttachmentInputItemContext();
+	const classes = itemRecipe.useClassNames();
+	if (entry.status !== status) return null;
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, nativeProps)} className={clsx(classes.backdrop, className)}>
+      {typeof children === "function" ? children(entry) : children}
+    </view>;
+});
+AttachmentInputItemBackdrop.displayName = "AttachmentInputItemBackdrop";
+var AttachmentInputItemRemoveButton = React.forwardRef((props, forwardedRef) => {
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const item = useAttachmentInputItemContext();
+	const context = useAttachmentInputContext();
+	const press = usePressTap({
+		disabled: context.readOnly,
+		onTap: (event) => {
+			context.removeFileEntry(item.id);
+			bindtap?.(event);
+		},
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = itemRecipe.useClassNames();
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, press, nativeProps)} accessibility-element={accessibilityElement} accessibility-traits={accessibilityTraits ?? (context.readOnly ? "disabled" : "button")} className={clsx(classes.removeButton, className)}>
+      <IconSlotProvider value={{ classNames: { icon: classes.removeIcon } }}>
+        {children}
+      </IconSlotProvider>
+    </view>;
+});
+AttachmentInputItemRemoveButton.displayName = "AttachmentInputItemRemoveButton";
+var AttachmentInputContext = ({ children }) => children(useAttachmentInputContext());
+var AttachmentInput = {
+	Root: AttachmentInputRoot,
+	Container: AttachmentInputContainer,
+	ItemGroup: AttachmentInputItemGroup,
+	Trigger: AttachmentInputTrigger,
+	TriggerIcon: AttachmentInputTriggerIcon,
+	TriggerItemCount: AttachmentInputTriggerItemCount,
+	Item: AttachmentInputItem,
+	ItemName: AttachmentInputItemName,
+	ItemSize: AttachmentInputItemSize,
+	ItemImage: AttachmentInputItemImage,
+	ItemThumbnail: AttachmentInputItemThumbnail,
+	ItemMetadata: AttachmentInputItemMetadata,
+	ItemBadge: AttachmentInputItemBadge,
+	ItemActionButton: AttachmentInputItemActionButton,
+	ItemBackdrop: AttachmentInputItemBackdrop,
+	ItemRemoveButton: AttachmentInputItemRemoveButton,
+	ItemSurface: AttachmentInputItemSurface,
+	Context: AttachmentInputContext
+};
+//#endregion
+export { AttachmentInput, AttachmentInputContainer, AttachmentInputContext, AttachmentInputItem, AttachmentInputItemActionButton, AttachmentInputItemBackdrop, AttachmentInputItemBadge, AttachmentInputItemGroup, AttachmentInputItemImage, AttachmentInputItemMetadata, AttachmentInputItemName, AttachmentInputItemRemoveButton, AttachmentInputItemSize, AttachmentInputItemSurface, AttachmentInputItemThumbnail, AttachmentInputRoot, AttachmentInputTrigger, AttachmentInputTriggerIcon, AttachmentInputTriggerItemCount, useAttachmentInput, useAttachmentInputContext, useAttachmentInputItemContext };

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

@@ -0,0 +1,2 @@
+export { AttachmentInput, AttachmentInputRoot, AttachmentInputContainer, AttachmentInputItemGroup, AttachmentInputTrigger, AttachmentInputTriggerIcon, AttachmentInputTriggerItemCount, AttachmentInputItem, AttachmentInputItemName, AttachmentInputItemSize, AttachmentInputItemImage, AttachmentInputItemThumbnail, AttachmentInputItemMetadata, AttachmentInputItemBadge, AttachmentInputItemActionButton, AttachmentInputItemBackdrop, AttachmentInputItemSurface, AttachmentInputItemRemoveButton, AttachmentInputContext, useAttachmentInput, useAttachmentInputContext, useAttachmentInputItemContext, type NativeFile, type AttachmentFileError, type AttachmentFileRejection, type AttachmentFileStatusDetails, type AttachmentFileEntry, type AttachmentInputProps, type AttachmentInputStateProps, type AttachmentInputContextValue, type AttachmentInputRootProps, type AttachmentInputContainerProps, type AttachmentInputItemGroupProps, type AttachmentInputTriggerProps, type AttachmentInputTriggerIconProps, type AttachmentInputTriggerItemCountProps, type AttachmentInputItemProps, type AttachmentInputItemNameProps, type AttachmentInputItemSizeProps, type AttachmentInputItemSurfaceProps, type AttachmentInputItemImageProps, type AttachmentInputItemThumbnailProps, type AttachmentInputItemMetadataProps, type AttachmentInputItemBadgeProps, type AttachmentInputItemBackdropProps, type AttachmentInputItemActionButtonProps, type AttachmentInputItemRemoveButtonProps, } from './AttachmentInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,0BAA0B,EAC1B,+BAA+B,EAC/B,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,EACxB,4BAA4B,EAC5B,2BAA2B,EAC3B,wBAAwB,EACxB,+BAA+B,EAC/B,2BAA2B,EAC3B,0BAA0B,EAC1B,+BAA+B,EAC/B,sBAAsB,EACtB,kBAAkB,EAClB,yBAAyB,EACzB,6BAA6B,EAC7B,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,2BAA2B,EAChC,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,6BAA6B,EAClC,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EAChC,KAAK,+BAA+B,EACpC,KAAK,oCAAoC,EACzC,KAAK,wBAAwB,EAC7B,KAAK,4BAA4B,EACjC,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,6BAA6B,EAClC,KAAK,iCAAiC,EACtC,KAAK,gCAAgC,EACrC,KAAK,6BAA6B,EAClC,KAAK,gCAAgC,EACrC,KAAK,oCAAoC,EACzC,KAAK,oCAAoC,GAC1C,MAAM,mBAAmB,CAAC"}

package/lib/components/BottomSheet/BottomSheet.d.ts

@@ -73,7 +73,7 @@ export interface BottomSheetHeaderProps extends BottomSheetSlotProps {
 export declare const BottomSheetHeader: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
 export interface BottomSheetBodyProps extends BottomSheetSlotProps {
 }
-export declare const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetBodyProps>;
+export declare const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
 export interface BottomSheetFooterProps extends BottomSheetSlotProps {
 }
 export declare const BottomSheetFooter: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAML,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAKrB,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAC5D,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CACtC,CAAC;AAmEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,YAAY,EAAE,oBAAoB,CA6CpF,CAAC;AAOL,MAAM,WAAW,uBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE1C,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CA+BrF,CAAC;AAOL,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,EAAE,uBAAuB,CAAC,OAAO,EAAE,0BAA0B,CACpB,CAAC;AAY5E,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,EAAE,uBAAuB,CAAC,OAAO,EAAE,wBAAwB,CAChB,CAAC;AAG5E,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CAsCrF,CAAC;AAOL,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAW7E;yBAXe,iBAAiB;;;AAwBjC,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;CAAG;AA0CvE,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,OAAO,EAAE,oBAAoB,CAiBjF,CAAC;AAGH,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,wDAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,wDAAgC,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAML,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAKrB,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAC5D,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CACtC,CAAC;AAmEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,YAAY,EAAE,oBAAoB,CA6CpF,CAAC;AAOL,MAAM,WAAW,uBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE1C,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CA+BrF,CAAC;AAOL,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,EAAE,uBAAuB,CAAC,OAAO,EAAE,0BAA0B,CACpB,CAAC;AAY5E,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,EAAE,uBAAuB,CAAC,OAAO,EAAE,wBAAwB,CAChB,CAAC;AAG5E,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CAsCrF,CAAC;AAOL,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAW7E;yBAXe,iBAAiB;;;AAwBjC,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;CAAG;AA0CvE,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAE1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,wDAAyB,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,wDAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,wDAAgC,CAAC"}

package/lib/components/BottomSheet/BottomSheet.jsx

@@ -148,13 +148,7 @@ function createTextSlot(slotName) {
 }
 var BottomSheetHeader = createViewSlot("header");
 BottomSheetHeader.displayName = "BottomSheetHeader";
-var BottomSheetBody = forwardRef((props, ref) => {
-	const { children, className, style } = props;
-	const classNames = useClassNames();
-	return <scroll-view {...ref ? { ref } : {}} scroll-y className={clsx(classNames.body, className)} style={style}>
-      {children}
-    </scroll-view>;
-});
+var BottomSheetBody = createViewSlot("body");
 BottomSheetBody.displayName = "BottomSheetBody";
 var BottomSheetFooter = createViewSlot("footer");
 BottomSheetFooter.displayName = "BottomSheetFooter";

package/lib/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { LynxPressableProps, LynxStyledElementProps } from '../../types';
-import { StyleProps } from '../../utils/styled';
+import { MarginBleedStyleProps, StyleProps } from '../../utils/styled';
 import * as React from "@lynx-js/react";
 /**
  * @platform Lynx
@@ -11,10 +11,10 @@ import * as React from "@lynx-js/react";
  * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
  * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
  */
-export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
+export type BoxProps = StyleProps & MarginBleedStyleProps & LynxStyledElementProps & LynxPressableProps & {
     bindtouchstart?: () => void;
     bindtouchend?: () => void;
     bindtouchcancel?: () => void;
-}
+};
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpE;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,GAAG,0EAad,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhG;;;;;;;;;GASG;AACH,MAAM,MAAM,QAAQ,GAAG,UAAU,GAC/B,qBAAqB,GACrB,sBAAsB,GACtB,kBAAkB,GAAG;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,GAAG,0EAad,CAAC"}

package/lib/components/Callout/Callout.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 { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";

package/lib/components/Checkbox/Checkbox.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 { mergeProps } from "../../utils/merge-props.js";
 import { InternalIcon } from "../Icon/Icon.jsx";

package/lib/components/Chip/Chip.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 { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";