@seed-design/lynx-react 0.7.1 → 0.8.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/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";

package/lib/components/ChipTabs/ChipTabs.d.ts

@@ -0,0 +1,41 @@
+import { ChipTabsVariantProps } from '@seed-design/lynx-css/recipes/chip-tabs';
+import { TabsCarouselCameraProps, TabsCarouselProps, TabsContentProps, TabsListProps, TabsRootProps, TabsTriggerProps } from '../Tabs/Tabs';
+import * as React from "@lynx-js/react";
+type ChipTabsPublicVariantProps = Omit<ChipTabsVariantProps, "selected" | "pressed" | "disabled" | "inCarousel">;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `lazyMount`, `unmountOnExit`: native viewpager가 모든 page slot을 유지해야 함
+ * - 키보드 포커스와 roving tabindex
+ */
+export interface ChipTabsRootProps extends Omit<TabsRootProps, "size" | "contentLayout" | "stickyList" | "triggerLayout">, ChipTabsPublicVariantProps {
+}
+/**
+ * Chip recipe와 Tabs의 controlled state, horizontal scrolling, and native pager behavior를 결합합니다.
+ */
+export declare const ChipTabsRoot: React.ForwardRefExoticComponent<ChipTabsRootProps & React.RefAttributes<unknown>>;
+export interface ChipTabsListProps extends Omit<TabsListProps, "scrollAlign"> {
+    /** 선택한 chip을 목록 안에서 정렬할 방식입니다. @defaultValue "nearest" */
+    scrollAlign?: TabsListProps["scrollAlign"];
+}
+/**
+ * ChipTabs는 이미 보이는 선택 chip을 움직이지 않도록 기본적으로 `"nearest"`를 사용합니다.
+ */
+export declare const ChipTabsList: React.ForwardRefExoticComponent<Omit<ChipTabsListProps, "ref"> & React.RefAttributes<unknown>>;
+/** Native text label and optional inline notification slot을 갖는 chip trigger입니다. */
+export interface ChipTabsTriggerProps extends TabsTriggerProps {
+}
+export declare const ChipTabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<unknown>>;
+export interface ChipTabsContentProps extends TabsContentProps {
+}
+export declare const ChipTabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<unknown>>;
+/** @platform Lynx native viewpager를 사용하므로 Tabs Carousel의 미지원 prop과 동일합니다. */
+export interface ChipTabsCarouselProps extends TabsCarouselProps {
+}
+export declare const ChipTabsCarousel: React.ForwardRefExoticComponent<TabsCarouselProps & React.RefAttributes<unknown>>;
+export interface ChipTabsCarouselCameraProps extends TabsCarouselCameraProps {
+}
+export declare const ChipTabsCarouselCamera: React.ForwardRefExoticComponent<TabsCarouselCameraProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=ChipTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChipTabs.d.ts","sourceRoot":"","sources":["../../../src/components/ChipTabs/ChipTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAI9F,OAAO,EAOL,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,cAAc,CAAC;AAUtB,KAAK,0BAA0B,GAAG,IAAI,CACpC,oBAAoB,EACpB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CACnD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe,CAAC,EACpF,0BAA0B;CAAG;AAEjC;;GAEG;AACH,eAAO,MAAM,YAAY,mFA0BvB,CAAC;AAKH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;IAC3E,0DAA0D;IAC1D,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,gGAIxB,CAAC;AAKF,mFAAmF;AACnF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;CAAG;AAEjE,eAAO,MAAM,eAAe,kFAAc,CAAC;AAI3C,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;CAAG;AAEjE,eAAO,MAAM,eAAe,kFAAc,CAAC;AAI3C,6EAA6E;AAC7E,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;CAAG;AAEnE,eAAO,MAAM,gBAAgB,mFAAe,CAAC;AAI7C,MAAM,WAAW,2BAA4B,SAAQ,uBAAuB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,yFAAqB,CAAC"}