@seed-design/lynx-react 0.7.0 → 0.8.0

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

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

package/lib/components/AttachmentDisplay/AttachmentDisplay.jsx

@@ -0,0 +1,444 @@
+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 * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+import clsx from "clsx";
+import { fieldLabel } from "@seed-design/lynx-css/recipes/field-label";
+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/AttachmentDisplay/AttachmentDisplay.tsx
+var { ClassNamesProvider: RootClassNamesProvider, useClassNames: useRootClassNames } = createSlotRecipeContext(attachmentInput);
+var { ClassNamesProvider: TriggerClassNamesProvider, useClassNames: useTriggerClassNames } = createSlotRecipeContext(attachmentInputTrigger);
+var { ClassNamesProvider: ItemClassNamesProvider, useClassNames: useItemClassNames } = createSlotRecipeContext(attachmentInputItem);
+var { ClassNamesProvider: LabelClassNamesProvider, useClassNames: useLabelClassNames } = createSlotRecipeContext(fieldLabel);
+var DisplayContextObject = React.createContext(null);
+var DisplayItemContextObject = React.createContext(null);
+function useAttachmentDisplayContext() {
+	const context = React.useContext(DisplayContextObject);
+	if (!context) throw new Error("AttachmentDisplay components must be used within AttachmentDisplay.Root");
+	return context;
+}
+function useAttachmentDisplayItemContext() {
+	const context = React.useContext(DisplayItemContextObject);
+	if (!context) throw new Error("AttachmentDisplay item components must be used within AttachmentDisplay.Item");
+	return context;
+}
+function withUpdatedStatus(entry, details) {
+	const metadata = {
+		id: entry.id,
+		thumbnailUrl: entry.thumbnailUrl,
+		name: entry.name,
+		type: entry.type,
+		size: entry.size
+	};
+	return details.status === "uploading" ? {
+		...metadata,
+		status: details.status,
+		progress: details.progress
+	} : {
+		...metadata,
+		status: details.status
+	};
+}
+function useAttachmentDisplay(props = {}) {
+	const { entries: value, defaultEntries = [], onEntriesChange, disabled = false, invalid = false, readOnly = false, required = false, maxEntries = 1, onTriggerTap } = props;
+	const [entries, setEntries] = useControllableState({
+		value,
+		defaultValue: defaultEntries,
+		onChange: onEntriesChange
+	});
+	const currentEntries = entries ?? [];
+	const entriesRef = React.useRef(currentEntries);
+	entriesRef.current = currentEntries;
+	const optionsRef = React.useRef({
+		disabled,
+		readOnly,
+		maxEntries,
+		onTriggerTap
+	});
+	optionsRef.current = {
+		disabled,
+		readOnly,
+		maxEntries,
+		onTriggerTap
+	};
+	const triggerDisabled = disabled || readOnly || currentEntries.length >= maxEntries;
+	const addEntries = React.useCallback((incoming) => {
+		const options = optionsRef.current;
+		if (options.disabled || options.readOnly || incoming.length === 0) return;
+		const current = entriesRef.current;
+		const next = options.maxEntries > 1 ? [...current, ...incoming.slice(0, Math.max(0, options.maxEntries - current.length))] : [incoming[0]];
+		entriesRef.current = next;
+		setEntries(next);
+	}, [setEntries]);
+	const removeEntry = React.useCallback((id) => {
+		if (optionsRef.current.readOnly) return;
+		const next = entriesRef.current.filter((entry) => entry.id !== id);
+		entriesRef.current = next;
+		setEntries(next);
+	}, [setEntries]);
+	const clearEntries = React.useCallback(() => {
+		if (optionsRef.current.readOnly) return;
+		entriesRef.current = [];
+		setEntries([]);
+	}, [setEntries]);
+	const reorderEntry = React.useCallback((fromIndex, toIndex) => {
+		const options = optionsRef.current;
+		if (options.disabled || options.readOnly) return;
+		const next = [...entriesRef.current];
+		if (fromIndex < 0 || toIndex < 0 || fromIndex >= next.length || toIndex >= next.length) return;
+		const [entry] = next.splice(fromIndex, 1);
+		next.splice(toIndex, 0, entry);
+		entriesRef.current = next;
+		setEntries(next);
+	}, [setEntries]);
+	const updateEntryStatus = React.useCallback((id, details) => {
+		const next = entriesRef.current.map((entry) => entry.id === id ? withUpdatedStatus(entry, details) : entry);
+		entriesRef.current = next;
+		setEntries(next);
+	}, [setEntries]);
+	return {
+		entries: currentEntries,
+		currentEntryCount: currentEntries.length,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		maxEntries,
+		triggerDisabled,
+		stateProps: {
+			"data-disabled": disabled,
+			"data-readonly": readOnly,
+			"data-invalid": invalid,
+			"data-required": required
+		},
+		addEntries,
+		removeEntry,
+		reorderEntry,
+		clearEntries,
+		updateEntryStatus,
+		onTriggerTap
+	};
+}
+var AttachmentDisplayRoot = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = attachmentInput.splitVariantProps(props);
+	const { children, className, entries, defaultEntries, onEntriesChange, disabled, invalid, readOnly, required, maxEntries, onTriggerTap, ...nativeProps } = otherProps;
+	const api = useAttachmentDisplay({
+		entries,
+		defaultEntries,
+		onEntriesChange,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		maxEntries,
+		onTriggerTap
+	});
+	const classes = attachmentInput(variantProps);
+	return <DisplayContextObject.Provider value={api}>
+        <RootClassNamesProvider value={classes}>
+          <view {...mergeProps(ref ? { ref } : {}, api.stateProps, nativeProps)} className={clsx(classes.root, className)}>
+            {children}
+          </view>
+        </RootClassNamesProvider>
+      </DisplayContextObject.Provider>;
+});
+AttachmentDisplayRoot.displayName = "AttachmentDisplayRoot";
+var AttachmentDisplayControl = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const [variantProps] = attachmentInput.splitVariantProps(props);
+	const classes = attachmentInput(variantProps);
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
+        {children}
+      </view>;
+});
+AttachmentDisplayControl.displayName = "AttachmentDisplayControl";
+var AttachmentDisplayContainer = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useRootClassNames();
+	return <scroll-view {...mergeProps(ref ? { ref } : {}, nativeProps)} scroll-orientation="horizontal" scroll-bar-enable={false} className={clsx(classes.container, className)}>
+      <view className={classes.containerContent}>{children}</view>
+    </scroll-view>;
+});
+AttachmentDisplayContainer.displayName = "AttachmentDisplayContainer";
+var AttachmentDisplayItemGroup = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useRootClassNames();
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.itemGroup, className)}>
+        {children}
+      </view>;
+});
+AttachmentDisplayItemGroup.displayName = "AttachmentDisplayItemGroup";
+var AttachmentDisplayFooter = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	return <view {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={className}>
+        {children}
+      </view>;
+});
+AttachmentDisplayFooter.displayName = "AttachmentDisplayFooter";
+var AttachmentDisplayDescription = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	return <text {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={className}>
+        {children}
+      </text>;
+});
+AttachmentDisplayDescription.displayName = "AttachmentDisplayDescription";
+var AttachmentDisplayErrorMessage = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	return <text {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={className}>
+        {children}
+      </text>;
+});
+AttachmentDisplayErrorMessage.displayName = "AttachmentDisplayErrorMessage";
+var AttachmentDisplayHeader = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	return <view {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={className}>
+        {children}
+      </view>;
+});
+AttachmentDisplayHeader.displayName = "AttachmentDisplayHeader";
+var AttachmentDisplayLabel = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = fieldLabel.splitVariantProps(props);
+	const { children, className, ...nativeProps } = otherProps;
+	const classes = fieldLabel(variantProps);
+	const context = useAttachmentDisplayContext();
+	return <LabelClassNamesProvider value={classes}>
+        <text {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={clsx(classes.root, className)}>
+          {children}
+        </text>
+      </LabelClassNamesProvider>;
+});
+AttachmentDisplayLabel.displayName = "AttachmentDisplayLabel";
+var AttachmentDisplayIndicatorText = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useLabelClassNames();
+	const context = useAttachmentDisplayContext();
+	return <text {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} className={clsx(classes.indicatorText, className)}>
+      {"\xA0"}
+      {children}
+    </text>;
+});
+AttachmentDisplayIndicatorText.displayName = "AttachmentDisplayIndicatorText";
+var AttachmentDisplayRequiredIndicator = React.forwardRef((props, ref) => {
+	const { children = "*", className, ...nativeProps } = props;
+	const classes = useLabelClassNames();
+	const context = useAttachmentDisplayContext();
+	return <text {...mergeProps(ref ? { ref } : {}, context.stateProps, nativeProps)} accessibility-elements-hidden={true} className={clsx(classes.indicatorIcon, className)}>
+      {" "}
+      {children}
+    </text>;
+});
+AttachmentDisplayRequiredIndicator.displayName = "AttachmentDisplayRequiredIndicator";
+var AttachmentDisplayTrigger = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = attachmentInputTrigger.splitVariantProps(props);
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, ...nativeProps } = restProps;
+	const context = useAttachmentDisplayContext();
+	const press = usePressTap({
+		disabled: context.triggerDisabled,
+		onTap: () => context.onTriggerTap?.({
+			addEntries: context.addEntries,
+			updateEntryStatus: context.updateEntryStatus
+		}),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = attachmentInputTrigger({
+		...variantProps,
+		pressed: press.pressed,
+		disabled: context.triggerDisabled
+	});
+	return <TriggerClassNamesProvider value={classes}>
+        <view {...mergeProps(ref ? { ref } : {}, press, { bindtap: context.triggerDisabled ? void 0 : bindtap }, nativeProps, context.stateProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (context.triggerDisabled ? "disabled" : "button")} flatten={false} className={clsx(classes.root, className)}>
+          {children}
+        </view>
+      </TriggerClassNamesProvider>;
+});
+AttachmentDisplayTrigger.displayName = "AttachmentDisplayTrigger";
+var AttachmentDisplayTriggerIcon = React.forwardRef((props, ref) => {
+	const { image, children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	const classes = useTriggerClassNames();
+	const icon = image ?? children;
+	if (!isValidElement(icon)) return null;
+	return <InternalIcon icon={icon} ref={ref} {...nativeProps} className={clsx(classes.icon, className)} accessibility-elements-hidden={true} deps={[context.triggerDisabled]} />;
+});
+AttachmentDisplayTriggerIcon.displayName = "AttachmentDisplayTriggerIcon";
+var AttachmentDisplayTriggerItemCount = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useAttachmentDisplayContext();
+	const classes = useTriggerClassNames();
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.itemCountArea, className)}>
+      <text {...context.currentEntryCount === 0 ? { "data-empty": true } : {}} {...context.stateProps} className={classes.itemCount}>
+        {context.currentEntryCount}
+      </text>
+      <text {...context.stateProps} className={classes.maxItemCount}>
+        /{context.maxEntries}
+      </text>
+      {children}
+    </view>;
+});
+AttachmentDisplayTriggerItemCount.displayName = "AttachmentDisplayTriggerItemCount";
+var AttachmentDisplayItem = React.forwardRef((props, ref) => {
+	const { entry, children, className, ...restProps } = props;
+	const [variantProps, nativeProps] = attachmentInputItem.splitVariantProps({
+		type: "image",
+		...restProps
+	});
+	const root = useAttachmentDisplayContext();
+	const classes = attachmentInputItem({
+		...variantProps,
+		type: "image",
+		disabled: root.disabled,
+		readOnly: root.readOnly,
+		pressed: false,
+		dragging: variantProps.dragging ?? false
+	});
+	const item = {
+		...entry,
+		imageProps: entry.thumbnailUrl ? {
+			src: entry.thumbnailUrl,
+			alt: entry.name
+		} : void 0
+	};
+	return <DisplayItemContextObject.Provider value={item}>
+        <ItemClassNamesProvider value={classes}>
+          <view {...mergeProps(ref ? { ref } : {}, root.stateProps, nativeProps)} className={clsx(classes.root, className)}>
+            {children}
+          </view>
+        </ItemClassNamesProvider>
+      </DisplayItemContextObject.Provider>;
+});
+AttachmentDisplayItem.displayName = "AttachmentDisplayItem";
+var AttachmentDisplayItemSurface = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useItemClassNames();
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.surface, className)}>
+        {children}
+      </view>;
+});
+AttachmentDisplayItemSurface.displayName = "AttachmentDisplayItemSurface";
+var AttachmentDisplayItemImage = React.forwardRef((props, ref) => {
+	const { className, ...nativeProps } = props;
+	const item = useAttachmentDisplayItemContext();
+	const classes = useItemClassNames();
+	if (!item.imageProps) return null;
+	return <image {...mergeProps(ref ? { ref } : {}, nativeProps)} src={item.imageProps.src} accessibility-label={item.imageProps.alt} className={clsx(classes.image, className)} />;
+});
+AttachmentDisplayItemImage.displayName = "AttachmentDisplayItemImage";
+var AttachmentDisplayItemThumbnail = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useItemClassNames();
+	const context = useAttachmentDisplayContext();
+	return <IconSlotProvider value={{
+		classNames: { icon: classes.thumbnailIcon },
+		deps: [context.disabled, context.readOnly]
+	}}>
+        <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.thumbnail, className)}>
+          {children}
+        </view>
+      </IconSlotProvider>;
+});
+AttachmentDisplayItemThumbnail.displayName = "AttachmentDisplayItemThumbnail";
+var AttachmentDisplayItemMetadata = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useItemClassNames();
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.metadata, className)}>
+        {children}
+      </view>;
+});
+AttachmentDisplayItemMetadata.displayName = "AttachmentDisplayItemMetadata";
+var AttachmentDisplayItemBadge = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useItemClassNames();
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.badge, className)}>
+        <text className={classes.badgeLabel}>{children}</text>
+      </view>;
+});
+AttachmentDisplayItemBadge.displayName = "AttachmentDisplayItemBadge";
+var AttachmentDisplayItemActionButton = React.forwardRef((props, ref) => {
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, ...nativeProps } = props;
+	const classes = useItemClassNames();
+	const context = useAttachmentDisplayContext();
+	const actionChildren = toArray(children).map((child, index) => typeof child === "string" || typeof child === "number" ? <text key={index} className={classes.actionLabel}>
+        {child}
+      </text> : child);
+	return <IconSlotProvider value={{
+		classNames: { icon: classes.actionIcon },
+		deps: [context.disabled, context.readOnly]
+	}}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps, {
+		bindtap,
+		"main-thread:bindtap": mainThreadBindtap
+	})} className={clsx(classes.actionButton, className)}>
+        {actionChildren}
+      </view>
+    </IconSlotProvider>;
+});
+AttachmentDisplayItemActionButton.displayName = "AttachmentDisplayItemActionButton";
+var AttachmentDisplayItemBackdrop = React.forwardRef((props, ref) => {
+	const { status, children, className, ...nativeProps } = props;
+	const entry = useAttachmentDisplayItemContext();
+	const classes = useItemClassNames();
+	if (entry.status !== status) return null;
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.backdrop, className)}>
+      {typeof children === "function" ? children(entry) : children}
+    </view>;
+});
+AttachmentDisplayItemBackdrop.displayName = "AttachmentDisplayItemBackdrop";
+var AttachmentDisplayItemRemoveButton = React.forwardRef((props, ref) => {
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const item = useAttachmentDisplayItemContext();
+	const context = useAttachmentDisplayContext();
+	const classes = useItemClassNames();
+	const press = usePressTap({
+		disabled: context.readOnly,
+		onTap: () => context.removeEntry(item.id),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	return <IconSlotProvider value={{
+		classNames: { icon: classes.removeIcon },
+		deps: [context.disabled, context.readOnly]
+	}}>
+      <view {...mergeProps(ref ? { ref } : {}, press, { bindtap: context.readOnly ? void 0 : bindtap }, nativeProps, context.stateProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (context.readOnly ? "disabled" : "button")} flatten={false} className={clsx(classes.removeButton, className)}>
+        {children}
+      </view>
+    </IconSlotProvider>;
+});
+AttachmentDisplayItemRemoveButton.displayName = "AttachmentDisplayItemRemoveButton";
+var AttachmentDisplayContext = (props) => props.children(useAttachmentDisplayContext());
+var AttachmentDisplay = {
+	Root: AttachmentDisplayRoot,
+	Control: AttachmentDisplayControl,
+	Container: AttachmentDisplayContainer,
+	ItemGroup: AttachmentDisplayItemGroup,
+	Footer: AttachmentDisplayFooter,
+	Header: AttachmentDisplayHeader,
+	Label: AttachmentDisplayLabel,
+	IndicatorText: AttachmentDisplayIndicatorText,
+	RequiredIndicator: AttachmentDisplayRequiredIndicator,
+	Description: AttachmentDisplayDescription,
+	ErrorMessage: AttachmentDisplayErrorMessage,
+	Trigger: AttachmentDisplayTrigger,
+	TriggerIcon: AttachmentDisplayTriggerIcon,
+	TriggerItemCount: AttachmentDisplayTriggerItemCount,
+	Item: AttachmentDisplayItem,
+	ItemSurface: AttachmentDisplayItemSurface,
+	ItemImage: AttachmentDisplayItemImage,
+	ItemThumbnail: AttachmentDisplayItemThumbnail,
+	ItemMetadata: AttachmentDisplayItemMetadata,
+	ItemBadge: AttachmentDisplayItemBadge,
+	ItemActionButton: AttachmentDisplayItemActionButton,
+	ItemBackdrop: AttachmentDisplayItemBackdrop,
+	ItemRemoveButton: AttachmentDisplayItemRemoveButton,
+	Context: AttachmentDisplayContext
+};
+//#endregion
+export { AttachmentDisplay, AttachmentDisplayContainer, AttachmentDisplayContext, AttachmentDisplayControl, AttachmentDisplayDescription, AttachmentDisplayErrorMessage, AttachmentDisplayFooter, AttachmentDisplayHeader, AttachmentDisplayIndicatorText, AttachmentDisplayItem, AttachmentDisplayItemActionButton, AttachmentDisplayItemBackdrop, AttachmentDisplayItemBadge, AttachmentDisplayItemGroup, AttachmentDisplayItemImage, AttachmentDisplayItemMetadata, AttachmentDisplayItemRemoveButton, AttachmentDisplayItemSurface, AttachmentDisplayItemThumbnail, AttachmentDisplayLabel, AttachmentDisplayRequiredIndicator, AttachmentDisplayRoot, AttachmentDisplayTrigger, AttachmentDisplayTriggerIcon, AttachmentDisplayTriggerItemCount, useAttachmentDisplay, useAttachmentDisplayContext, useAttachmentDisplayItemContext };

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

@@ -0,0 +1,2 @@
+export { AttachmentDisplay, AttachmentDisplayRoot, AttachmentDisplayControl, AttachmentDisplayContainer, AttachmentDisplayItemGroup, AttachmentDisplayFooter, AttachmentDisplayHeader, AttachmentDisplayLabel, AttachmentDisplayIndicatorText, AttachmentDisplayRequiredIndicator, AttachmentDisplayDescription, AttachmentDisplayErrorMessage, AttachmentDisplayTrigger, AttachmentDisplayTriggerIcon, AttachmentDisplayTriggerItemCount, AttachmentDisplayItem, AttachmentDisplayItemSurface, AttachmentDisplayItemImage, AttachmentDisplayItemThumbnail, AttachmentDisplayItemMetadata, AttachmentDisplayItemBadge, AttachmentDisplayItemActionButton, AttachmentDisplayItemBackdrop, AttachmentDisplayItemRemoveButton, AttachmentDisplayContext, useAttachmentDisplay, useAttachmentDisplayContext, useAttachmentDisplayItemContext, type AttachmentDisplayEntry, type AttachmentDisplayStatusDetails, type AttachmentDisplayHeaderProps, type AttachmentDisplayLabelProps, type AttachmentDisplayIndicatorTextProps, type AttachmentDisplayRequiredIndicatorProps, type AttachmentDisplayTriggerItemCountProps, type AttachmentDisplayProps, type AttachmentDisplayRootProps, type AttachmentDisplayControlProps, type AttachmentDisplayContainerProps, type AttachmentDisplayTriggerProps, type AttachmentDisplayTriggerIconProps, type AttachmentDisplayItemProps, type AttachmentDisplayItemBackdropProps, type AttachmentDisplayItemRemoveButtonProps, type AttachmentDisplayItemActionButtonProps, type AttachmentDisplayContextProps, } from './AttachmentDisplay';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentDisplay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,8BAA8B,EAC9B,kCAAkC,EAClC,4BAA4B,EAC5B,6BAA6B,EAC7B,wBAAwB,EACxB,4BAA4B,EAC5B,iCAAiC,EACjC,qBAAqB,EACrB,4BAA4B,EAC5B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,EAC7B,0BAA0B,EAC1B,iCAAiC,EACjC,6BAA6B,EAC7B,iCAAiC,EACjC,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC3B,+BAA+B,EAC/B,KAAK,sBAAsB,EAC3B,KAAK,8BAA8B,EACnC,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,mCAAmC,EACxC,KAAK,uCAAuC,EAC5C,KAAK,sCAAsC,EAC3C,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,6BAA6B,EAClC,KAAK,+BAA+B,EACpC,KAAK,6BAA6B,EAClC,KAAK,iCAAiC,EACtC,KAAK,0BAA0B,EAC/B,KAAK,kCAAkC,EACvC,KAAK,sCAAsC,EAC3C,KAAK,sCAAsC,EAC3C,KAAK,6BAA6B,GACnC,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,179 @@
+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 { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps, LynxTextProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface NativeFile {
+    uri: string;
+    name: string;
+    type: string;
+    size: number;
+    previewUrl?: string;
+}
+export type AttachmentFileError = "FILE_TOO_LARGE" | "FILE_TOO_SMALL" | "TOO_MANY_FILES" | "INVALID_TYPE" | (string & {});
+export interface AttachmentFileRejection {
+    file: NativeFile;
+    errors: AttachmentFileError[];
+}
+export type AttachmentFileStatusDetails = {
+    status: "pending";
+} | {
+    status: "uploading";
+    progress?: number;
+} | {
+    status: "success";
+} | {
+    status: "error";
+};
+export type AttachmentFileEntry = {
+    id: string;
+    file: NativeFile;
+} & AttachmentFileStatusDetails;
+export interface AttachmentInputStateProps {
+    acceptedFileEntries?: AttachmentFileEntry[];
+    defaultAcceptedFileEntries?: AttachmentFileEntry[];
+    onAcceptedFileEntriesChange?: (entries: AttachmentFileEntry[]) => void;
+    onFileReject?: (rejections: AttachmentFileRejection[]) => void;
+    onFileAccept?: (entries: AttachmentFileEntry[], helpers: {
+        updateFileEntryStatus: (id: string, details: AttachmentFileStatusDetails) => void;
+    }) => void;
+}
+export interface AttachmentInputProps extends AttachmentInputStateProps {
+    accept?: string | string[];
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    minFileSize?: number;
+    validate?: (file: NativeFile) => AttachmentFileError[] | null;
+    onSelectFiles?: () => NativeFile[] | Promise<NativeFile[]>;
+    onSelectError?: (error: unknown) => void;
+}
+export type AttachmentInputItemContextValue = AttachmentFileEntry & {
+    removeButtonProps: LynxPressableProps;
+    imageProps?: {
+        src: string;
+        alt?: string;
+    };
+};
+interface AttachmentInputStateDataProps {
+    "data-disabled": boolean;
+    "data-readonly": boolean;
+    "data-invalid": boolean;
+    "data-required": boolean;
+}
+export interface AttachmentInputContextValue extends AttachmentInputProps {
+    acceptedFileEntries: AttachmentFileEntry[];
+    currentFileEntryCount: number;
+    acceptType?: "image";
+    multiple: boolean;
+    maxFiles: number;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    triggerDisabled: boolean;
+    stateProps: AttachmentInputStateDataProps;
+    openFilePicker: () => void;
+    setFileEntries: (files: NativeFile[]) => void;
+    updateFileEntryStatus: (id: string, details: AttachmentFileStatusDetails) => void;
+    removeFileEntry: (id: string) => void;
+    clearFileEntries: () => void;
+    reorderFileEntry: (fromIndex: number, toIndex: number) => void;
+}
+interface NativeViewProps extends LynxAccessibilityProps {
+    id?: string;
+    flatten?: boolean;
+}
+type NativeTextElementProps = Omit<LynxTextProps, "children" | "className" | "style">;
+type NativeImageProps = Omit<IntrinsicElements["image"], "children" | "className" | "style" | "src">;
+type NativeScrollViewProps = Omit<IntrinsicElements["scroll-view"], "children" | "className" | "style">;
+export declare function useAttachmentInputContext(): AttachmentInputContextValue;
+export declare function useAttachmentInputItemContext(): AttachmentInputItemContextValue;
+export declare function useAttachmentInput(props?: AttachmentInputProps): AttachmentInputContextValue;
+export interface AttachmentInputRootProps extends AttachmentInputProps, AttachmentInputVariantProps, LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputRoot: React.ForwardRefExoticComponent<AttachmentInputRootProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputContainerProps extends LynxStyledElementProps, Omit<NativeScrollViewProps, "scroll-orientation" | "scroll-bar-enable"> {
+}
+export declare const AttachmentInputContainer: React.ForwardRefExoticComponent<Omit<AttachmentInputContainerProps, "ref"> & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemGroupProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputItemGroup: React.ForwardRefExoticComponent<AttachmentInputItemGroupProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputTriggerProps extends AttachmentInputTriggerVariantProps, LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap">, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const AttachmentInputTrigger: React.ForwardRefExoticComponent<AttachmentInputTriggerProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputTriggerIconProps extends LynxStyledElementProps {
+    image?: React.ReactNode;
+    general?: React.ReactNode;
+}
+export declare const AttachmentInputTriggerIcon: React.ForwardRefExoticComponent<AttachmentInputTriggerIconProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputTriggerItemCountProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputTriggerItemCount: React.ForwardRefExoticComponent<AttachmentInputTriggerItemCountProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemProps extends AttachmentInputItemVariantProps, LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+    fileEntry: AttachmentFileEntry;
+}
+export declare const AttachmentInputItem: React.ForwardRefExoticComponent<AttachmentInputItemProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemNameProps extends LynxStyledElementProps, Omit<NativeTextElementProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputItemName: React.ForwardRefExoticComponent<Omit<AttachmentInputItemNameProps, "ref"> & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemSizeProps extends LynxStyledElementProps, Omit<NativeTextElementProps, "bindtap" | "main-thread:bindtap"> {
+    formatBytes?: (bytes: number) => string;
+}
+export declare const AttachmentInputItemSize: React.ForwardRefExoticComponent<Omit<AttachmentInputItemSizeProps, "ref"> & React.RefAttributes<NodesRef>>;
+export declare const AttachmentInputItemSurface: React.ForwardRefExoticComponent<AttachmentInputItemSurfaceProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemSurfaceProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export interface AttachmentInputItemImageProps extends LynxStyledElementProps, NativeImageProps {
+}
+export declare const AttachmentInputItemImage: React.ForwardRefExoticComponent<Omit<AttachmentInputItemImageProps, "ref"> & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemThumbnailProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputItemThumbnail: React.ForwardRefExoticComponent<AttachmentInputItemThumbnailProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemMetadataProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputItemMetadata: React.ForwardRefExoticComponent<AttachmentInputItemMetadataProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemBadgeProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap"> {
+}
+export declare const AttachmentInputItemBadge: React.ForwardRefExoticComponent<AttachmentInputItemBadgeProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemActionButtonProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap">, LynxPressableProps {
+}
+export declare const AttachmentInputItemActionButton: React.ForwardRefExoticComponent<AttachmentInputItemActionButtonProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemBackdropProps extends Omit<LynxStyledElementProps, "children">, Omit<NativeViewProps, "children" | "bindtap" | "main-thread:bindtap"> {
+    status: AttachmentFileEntry["status"];
+    children?: React.ReactNode | ((entry: AttachmentFileEntry) => React.ReactNode);
+}
+export declare const AttachmentInputItemBackdrop: React.ForwardRefExoticComponent<AttachmentInputItemBackdropProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputItemRemoveButtonProps extends LynxStyledElementProps, Omit<NativeViewProps, "bindtap" | "main-thread:bindtap">, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const AttachmentInputItemRemoveButton: React.ForwardRefExoticComponent<AttachmentInputItemRemoveButtonProps & React.RefAttributes<NodesRef>>;
+export interface AttachmentInputContextProps {
+    children: (context: AttachmentInputContextValue) => React.ReactNode;
+}
+export declare const AttachmentInputContext: ({ children }: AttachmentInputContextProps) => React.ReactNode;
+export declare const AttachmentInput: {
+    Root: React.ForwardRefExoticComponent<AttachmentInputRootProps & React.RefAttributes<NodesRef>>;
+    Container: React.ForwardRefExoticComponent<Omit<AttachmentInputContainerProps, "ref"> & React.RefAttributes<NodesRef>>;
+    ItemGroup: React.ForwardRefExoticComponent<AttachmentInputItemGroupProps & React.RefAttributes<NodesRef>>;
+    Trigger: React.ForwardRefExoticComponent<AttachmentInputTriggerProps & React.RefAttributes<NodesRef>>;
+    TriggerIcon: React.ForwardRefExoticComponent<AttachmentInputTriggerIconProps & React.RefAttributes<NodesRef>>;
+    TriggerItemCount: React.ForwardRefExoticComponent<AttachmentInputTriggerItemCountProps & React.RefAttributes<NodesRef>>;
+    Item: React.ForwardRefExoticComponent<AttachmentInputItemProps & React.RefAttributes<NodesRef>>;
+    ItemName: React.ForwardRefExoticComponent<Omit<AttachmentInputItemNameProps, "ref"> & React.RefAttributes<NodesRef>>;
+    ItemSize: React.ForwardRefExoticComponent<Omit<AttachmentInputItemSizeProps, "ref"> & React.RefAttributes<NodesRef>>;
+    ItemImage: React.ForwardRefExoticComponent<Omit<AttachmentInputItemImageProps, "ref"> & React.RefAttributes<NodesRef>>;
+    ItemThumbnail: React.ForwardRefExoticComponent<AttachmentInputItemThumbnailProps & React.RefAttributes<NodesRef>>;
+    ItemMetadata: React.ForwardRefExoticComponent<AttachmentInputItemMetadataProps & React.RefAttributes<NodesRef>>;
+    ItemBadge: React.ForwardRefExoticComponent<AttachmentInputItemBadgeProps & React.RefAttributes<NodesRef>>;
+    ItemActionButton: React.ForwardRefExoticComponent<AttachmentInputItemActionButtonProps & React.RefAttributes<NodesRef>>;
+    ItemBackdrop: React.ForwardRefExoticComponent<AttachmentInputItemBackdropProps & React.RefAttributes<NodesRef>>;
+    ItemRemoveButton: React.ForwardRefExoticComponent<AttachmentInputItemRemoveButtonProps & React.RefAttributes<NodesRef>>;
+    ItemSurface: React.ForwardRefExoticComponent<AttachmentInputItemSurfaceProps & React.RefAttributes<NodesRef>>;
+    Context: ({ children }: AttachmentInputContextProps) => React.ReactNode;
+};
+export {};
+//# sourceMappingURL=AttachmentInput.d.ts.map