@payfit/unity-components 3.15.14 → 3.15.16

package/dist/esm/core/components/dropzone/Dropzone.context.d.ts

@@ -0,0 +1,6 @@
+export interface DropzoneContextValue {
+    descriptionId: string;
+    labelId: string;
+}
+export declare const DropzoneContextProvider: import('react').Provider<DropzoneContextValue | null>;
+export declare function useDropzoneContext(): DropzoneContextValue;

package/dist/esm/core/components/dropzone/Dropzone.context.js

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/core/components/dropzone/Dropzone.context.tsx
+var n = e(null), r = n.Provider;
+function i() {
+	let e = t(n);
+	if (!e) throw Error("Dropzone parts must be used within a Dropzone");
+	return e;
+}
+//#endregion
+export { r as DropzoneContextProvider, i as useDropzoneContext };

package/dist/esm/core/components/dropzone/Dropzone.d.ts

@@ -0,0 +1,82 @@
+import { DropZoneProps as AriaDropZoneProps } from 'react-aria-components';
+export type DropzoneState = 'default' | 'disabled' | 'invalid' | 'valid';
+export interface DropzoneProps extends Omit<AriaDropZoneProps, 'className' | 'isDisabled' | 'style'> {
+    /**
+     * Sets durable workflow feedback without replacing drag-and-drop interaction
+     * feedback.
+     * @default 'default'
+     * @remarks
+     * - `default` presents the normal target.
+     * - `disabled` prevents drops and communicates that the workflow is unavailable.
+     * - `invalid` communicates a form or validation problem.
+     * - `valid` communicates successful validation.
+     */
+    state?: DropzoneState;
+    /** Additional classes applied to the drop target. */
+    className?: string;
+}
+/**
+ * Gives people an accessible destination for content they move into a workflow.
+ *
+ * Dropzone accepts files, directories, text, and custom dragged data without
+ * prescribing transport or validation. Compose it with `DropzoneLabel` and
+ * `DropzoneDescription` so assistive technology can identify the target. Use
+ * `FileUploadDropzone` when the workflow also needs a native file picker.
+ * @param props - Drop behavior, Unity workflow state, and target content.
+ * @param props.children - The visual content or render function for the target.
+ * @param props.getDropOperation - Chooses the advertised `copy`, `move`, or `link` operation.
+ * @param props.onDrop - Receives the accepted drop event.
+ * @param props.state - Sets durable workflow feedback such as `invalid` or `valid`.
+ * @see {@link DropzoneProps} for all drop behavior.
+ * @see {@link DropzoneOverlay} for a target that appears over independent content.
+ * @example
+ * ```tsx
+ * import {
+ *   Dropzone,
+ *   DropzoneContent,
+ *   DropzoneDescription,
+ *   DropzoneIcon,
+ *   DropzoneLabel,
+ * } from '@payfit/unity-components'
+ *
+ * export function TextDropzone() {
+ *   return (
+ *     <Dropzone
+ *       getDropOperation={() => 'copy'}
+ *       onDrop={async event => {
+ *         const text = await event.items
+ *           .filter(item => item.kind === 'text')
+ *           .at(0)
+ *           ?.getText('text/plain')
+ *
+ *         if (text) {
+ *           console.log(text)
+ *         }
+ *       }}
+ *     >
+ *       <DropzoneContent>
+ *         <DropzoneIcon
+ *           src="CloudArrowUpOutlined"
+ *           size={24}
+ *           role="presentation"
+ *         />
+ *         <DropzoneLabel>Drop a planning note</DropzoneLabel>
+ *         <DropzoneDescription>
+ *           The note is copied into the project plan.
+ *         </DropzoneDescription>
+ *       </DropzoneContent>
+ *     </Dropzone>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * Dropzone reacts to hover, focus-visible, and drop-target interactions.
+ * Group its visual cue, label, and description in `DropzoneContent`; add a
+ * sibling `DropzoneActions` for picker buttons. Always give the target a
+ * `DropzoneLabel`; add `DropzoneDescription` when people need acceptance
+ * guidance. Pair a file workflow with
+ * `FileUploadTrigger` or `FileUploadDropzone` so keyboard users can select a
+ * file without dragging.
+ */
+declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Dropzone };

package/dist/esm/core/components/dropzone/Dropzone.js

@@ -0,0 +1,32 @@
+import { DropzoneContextProvider as e } from "./Dropzone.context.js";
+import { dropzone as t } from "./Dropzone.variants.js";
+import { forwardRef as n, useId as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { DropZone as a } from "react-aria-components";
+//#region src/core/components/dropzone/Dropzone.tsx
+var o = n(({ state: n = "default", className: o, "aria-describedby": s, "aria-labelledby": c, ...l }, u) => {
+	let d = r(), f = `unity-dropzone-${d}__label`, p = `unity-dropzone-${d}__description`, m = n === "disabled";
+	return /* @__PURE__ */ i(e, {
+		value: {
+			descriptionId: p,
+			labelId: f
+		},
+		children: /* @__PURE__ */ i(a, {
+			...l,
+			ref: u,
+			isDisabled: m,
+			"aria-invalid": n === "invalid" || void 0,
+			"aria-describedby": [s, p].filter(Boolean).join(" ") || void 0,
+			"aria-labelledby": [c, f].filter(Boolean).join(" ") || void 0,
+			className: t({
+				state: n,
+				className: o
+			}),
+			"data-unity-slot": "dropzone",
+			"data-dropzone-state": n
+		})
+	});
+});
+o.displayName = "Dropzone";
+//#endregion
+export { o as Dropzone };

package/dist/esm/core/components/dropzone/Dropzone.variants.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from '@payfit/unity-themes';
+export declare const dropzone: import('tailwind-variants').TVReturnType<{
+    state: {
+        default: "uy:border-border-neutral-enabled uy:bg-surface-neutral-enabled";
+        disabled: "uy:border-border-neutral-disabled uy:bg-surface-neutral uy:text-content-neutral-disabled";
+        invalid: "uy:border-border-danger uy:bg-surface-danger-lowest-enabled";
+        valid: "uy:border-border-success uy:bg-surface-success-lowest";
+    };
+}, undefined, string[], {
+    state: {
+        default: "uy:border-border-neutral-enabled uy:bg-surface-neutral-enabled";
+        disabled: "uy:border-border-neutral-disabled uy:bg-surface-neutral uy:text-content-neutral-disabled";
+        invalid: "uy:border-border-danger uy:bg-surface-danger-lowest-enabled";
+        valid: "uy:border-border-success uy:bg-surface-success-lowest";
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    state: {
+        default: "uy:border-border-neutral-enabled uy:bg-surface-neutral-enabled";
+        disabled: "uy:border-border-neutral-disabled uy:bg-surface-neutral uy:text-content-neutral-disabled";
+        invalid: "uy:border-border-danger uy:bg-surface-danger-lowest-enabled";
+        valid: "uy:border-border-success uy:bg-surface-success-lowest";
+    };
+}, undefined>>;
+export type DropzoneVariants = VariantProps<typeof dropzone>;

package/dist/esm/core/components/dropzone/Dropzone.variants.js

@@ -0,0 +1,23 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/dropzone/Dropzone.variants.ts
+var t = e({
+	base: [
+		"uy:group uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250",
+		"uy:rounded-300 uy:border uy:border-solid uy:p-400",
+		"uy:bg-surface-neutral-enabled uy:text-center uy:text-content-neutral",
+		"uy:transition-colors",
+		"uy:data-[hovered=\"true\"]:border-border-neutral-hover uy:data-[hovered=\"true\"]:bg-surface-neutral-hover",
+		"uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring",
+		"uy:data-[drop-target=\"true\"]:border-border-primary uy:data-[drop-target=\"true\"]:border-dashed uy:data-[drop-target=\"true\"]:bg-surface-primary-lowest-enabled",
+		"uy:data-[disabled=\"true\"]:cursor-not-allowed"
+	],
+	variants: { state: {
+		default: "uy:border-border-neutral-enabled uy:bg-surface-neutral-enabled",
+		disabled: "uy:border-border-neutral-disabled uy:bg-surface-neutral uy:text-content-neutral-disabled",
+		invalid: "uy:border-border-danger uy:bg-surface-danger-lowest-enabled",
+		valid: "uy:border-border-success uy:bg-surface-success-lowest"
+	} },
+	defaultVariants: { state: "default" }
+});
+//#endregion
+export { t as dropzone };

package/dist/esm/core/components/dropzone/DropzoneOverlay.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { DropZoneProps as AriaDropZoneProps } from 'react-aria-components/DropZone';
+export declare const dropzoneOverlay: import('tailwind-variants').TVReturnType<{
+    isDropTarget: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    target: string;
+    content: string[];
+}, undefined, {
+    isDropTarget: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    target: string;
+    content: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    isDropTarget: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    target: string;
+    content: string[];
+}>>;
+export interface DropzoneOverlayProps extends Omit<AriaDropZoneProps, 'children' | 'style'> {
+    /** Content that remains visible beneath the full-surface drop target. */
+    children: ReactNode;
+    /** Dropzone parts rendered across the content while it is a drop target. */
+    overlay: ReactNode;
+    /** override class names */
+    className?: string;
+}
+/**
+ * Reveals a full-surface drop target over an established workspace or surface.
+ *
+ * Use DropzoneOverlay when a page needs to retain its normal content until a
+ * person drags compatible data over it. It places independently-rendered
+ * `children` below a Dropzone that becomes visible only during a drop target
+ * state.
+ * @param props - Dropzone behavior, underlying content, and overlay presentation.
+ * @param props.children - The content that remains visible before and after a drag.
+ * @see {@link DropzoneProps} for the forwarded drop props.
+ * @remarks
+ * DropzoneOverlay keeps `overlay` mounted so `DropzoneLabel` and
+ * `DropzoneDescription` continue to name and describe the target for
+ * assistive technology when the visual layer is transparent.
+ */
+declare const DropzoneOverlay: import('react').ForwardRefExoticComponent<DropzoneOverlayProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DropzoneOverlay };

package/dist/esm/core/components/dropzone/DropzoneOverlay.js

@@ -0,0 +1,53 @@
+import { DropzoneContextProvider as e } from "./Dropzone.context.js";
+import { DropzoneContent as t } from "./parts/DropzoneContent.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { useId as i } from "react-aria";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { DropZone as c } from "react-aria-components/DropZone";
+//#region src/core/components/dropzone/DropzoneOverlay.tsx
+var l = r({
+	slots: {
+		base: "uy:relative",
+		target: "uy:relative uy:block uy:rounded-none uy:border-0 uy:bg-transparent uy:p-0 uy:text-left",
+		content: [
+			"uy:pointer-events-none uy:absolute uy:inset-0 uy:flex uy:flex-col uy:items-center uy:justify-center",
+			"uy:rounded-300 uy:border uy:border-dashed uy:border-border-primary uy:bg-surface-primary-lowest-enabled uy:p-400",
+			"uy:text-center uy:transition-opacity uy:duration-150"
+		]
+	},
+	variants: { isDropTarget: {
+		true: { content: "uy:opacity-100" },
+		false: { content: "uy:pointer-events-none uy:opacity-0" }
+	} },
+	defaultVariants: { isDropTarget: !1 }
+}), u = n(({ children: n, overlay: r, "aria-describedby": u, "aria-labelledby": d, className: f, ...p }, m) => {
+	let h = i(), { base: g, target: _, content: v } = l(), y = `unity-dropzone-overlay-${h}__label`, b = `unity-dropzone-overlay-${h}__description`;
+	return /* @__PURE__ */ o("div", {
+		className: g(),
+		"data-unity-component": "DropzoneOverlay",
+		children: /* @__PURE__ */ o(e, {
+			value: {
+				descriptionId: b,
+				labelId: y
+			},
+			children: /* @__PURE__ */ o(c, {
+				...p,
+				ref: m,
+				"aria-describedby": [u, b].filter(Boolean).join(" ") || void 0,
+				"aria-labelledby": [d, y].filter(Boolean).join(" ") || void 0,
+				className: _(),
+				children: ({ isDropTarget: e }) => /* @__PURE__ */ s(a, { children: [n, /* @__PURE__ */ o("div", {
+					className: v({
+						isDropTarget: e,
+						className: f
+					}),
+					children: /* @__PURE__ */ o(t, { children: r })
+				})] })
+			})
+		})
+	});
+});
+u.displayName = "DropzoneOverlay";
+//#endregion
+export { u as DropzoneOverlay, l as dropzoneOverlay };

package/dist/esm/core/components/dropzone/parts/DropzoneActions.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type DropzoneActionsProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * Groups actions that complement a Dropzone's drag-and-drop interaction.
+ *
+ * Use DropzoneActions as a sibling of DropzoneContent for file-picker buttons
+ * or another way to add content. Dropzone supplies the 20px gap between the
+ * visual content and this action region.
+ * @param props - Action controls and native div attributes.
+ * @see {@link DropzoneContent} for the visual cue and descriptive text block.
+ */
+declare const DropzoneActions: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { DropzoneActions };

package/dist/esm/core/components/dropzone/parts/DropzoneActions.js

@@ -0,0 +1,13 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/dropzone/parts/DropzoneActions.tsx
+var r = e(({ className: e, ...r }, i) => /* @__PURE__ */ n("div", {
+	...r,
+	ref: i,
+	className: t("uy:flex uy:flex-wrap uy:items-center uy:justify-center uy:gap-100", e),
+	"data-unity-slot": "dropzone.actions"
+}));
+r.displayName = "DropzoneActions";
+//#endregion
+export { r as DropzoneActions };

package/dist/esm/core/components/dropzone/parts/DropzoneContent.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type DropzoneContentProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * Groups a Dropzone's visual cue, label, and description.
+ *
+ * Use DropzoneContent as the first child of Dropzone. Its zero internal gap
+ * keeps the visual cue and supporting text as one cohesive content block;
+ * Dropzone adds the 20px separation before a sibling DropzoneActions section.
+ * @param props - Content and native div attributes for the visual block.
+ * @see {@link DropzoneActions} for file pickers and other secondary actions.
+ */
+declare const DropzoneContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { DropzoneContent };

package/dist/esm/core/components/dropzone/parts/DropzoneContent.js

@@ -0,0 +1,13 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/dropzone/parts/DropzoneContent.tsx
+var r = e(({ className: e, ...r }, i) => /* @__PURE__ */ n("div", {
+	...r,
+	ref: i,
+	className: t("uy:flex uy:flex-col uy:items-center uy:gap-0", e),
+	"data-unity-slot": "dropzone.content"
+}));
+r.displayName = "DropzoneContent";
+//#endregion
+export { r as DropzoneContent };

package/dist/esm/core/components/dropzone/parts/DropzoneDescription.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '../../text/Text.js';
+export type DropzoneDescriptionProps = Pick<TextProps, 'asElement' | 'children' | 'variant'>;
+/** Supplementary text for a Dropzone. */
+declare const DropzoneDescription: import('react').ForwardRefExoticComponent<DropzoneDescriptionProps & import('react').RefAttributes<HTMLElement>>;
+export { DropzoneDescription };

package/dist/esm/core/components/dropzone/parts/DropzoneDescription.js

@@ -0,0 +1,21 @@
+import { Text as e } from "../../text/Text.js";
+import { useDropzoneContext as t } from "../Dropzone.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/dropzone/parts/DropzoneDescription.tsx
+var i = n(({ children: n, variant: i = "body", ...a }, o) => {
+	let { descriptionId: s } = t();
+	return /* @__PURE__ */ r(e, {
+		...a,
+		ref: o,
+		id: s,
+		variant: i,
+		color: "content.neutral.low",
+		className: "uy:group-data-[disabled=true]:text-content-neutral-disabled",
+		"data-unity-slot": "dropzone.description",
+		children: n
+	});
+});
+i.displayName = "DropzoneDescription";
+//#endregion
+export { i as DropzoneDescription };

package/dist/esm/core/components/dropzone/parts/DropzoneIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '@payfit/unity-icons';
+export type DropzoneIconProps = IconProps;
+/** Visual icon region for a Dropzone. */
+declare const DropzoneIcon: ({ className, ...props }: DropzoneIconProps) => import('react/jsx-runtime').JSX.Element;
+export { DropzoneIcon };

package/dist/esm/core/components/dropzone/parts/DropzoneIcon.js

@@ -0,0 +1,11 @@
+import { uyMerge as e } from "@payfit/unity-themes";
+import { jsx as t } from "react/jsx-runtime";
+import { Icon as n } from "@payfit/unity-icons";
+//#region src/core/components/dropzone/parts/DropzoneIcon.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ t(n, {
+	...i,
+	className: e("uy:flex uy:items-center uy:p-100 uy:text-content-neutral uy:group-data-[disabled=true]:text-content-neutral-disabled uy:group-data-[dropzone-state=valid]:text-content-success uy:group-data-[dropzone-state=invalid]:text-content-danger", r),
+	"data-unity-slot": "dropzone.icon"
+});
+//#endregion
+export { r as DropzoneIcon };

package/dist/esm/core/components/dropzone/parts/DropzoneIllustration.d.ts

@@ -0,0 +1,5 @@
+import { LazyIllustrationProps } from '@payfit/unity-illustrations';
+export type DropzoneIllustrationProps = LazyIllustrationProps;
+/** Visual illustration region for a Dropzone. */
+declare const DropzoneIllustration: import('react').ForwardRefExoticComponent<LazyIllustrationProps & import('react').RefAttributes<HTMLImageElement>>;
+export { DropzoneIllustration };

package/dist/esm/core/components/dropzone/parts/DropzoneIllustration.js

@@ -0,0 +1,14 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { LazyIllustration as r } from "@payfit/unity-illustrations";
+//#region src/core/components/dropzone/parts/DropzoneIllustration.tsx
+var i = e(({ className: e, ...i }, a) => /* @__PURE__ */ n(r, {
+	...i,
+	ref: a,
+	className: t("uy:h-auto uy:w-[clamp(100px,50%,160px)]", e),
+	"data-unity-slot": "dropzone.illustration"
+}));
+i.displayName = "DropzoneIllustration";
+//#endregion
+export { i as DropzoneIllustration };

package/dist/esm/core/components/dropzone/parts/DropzoneLabel.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '../../text/Text.js';
+export type DropzoneLabelProps = Pick<TextProps, 'asElement' | 'children' | 'variant'>;
+/** Primary, accessible text label for a Dropzone. */
+declare const DropzoneLabel: import('react').ForwardRefExoticComponent<DropzoneLabelProps & import('react').RefAttributes<HTMLElement>>;
+export { DropzoneLabel };

package/dist/esm/core/components/dropzone/parts/DropzoneLabel.js

@@ -0,0 +1,20 @@
+import { Text as e } from "../../text/Text.js";
+import { useDropzoneContext as t } from "../Dropzone.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/dropzone/parts/DropzoneLabel.tsx
+var i = n(({ children: n, variant: i = "bodyStrong", ...a }, o) => {
+	let { labelId: s } = t();
+	return /* @__PURE__ */ r(e, {
+		...a,
+		ref: o,
+		id: s,
+		variant: i,
+		className: "uy:group-data-[disabled=true]:text-content-neutral-disabled",
+		"data-unity-slot": "dropzone.label",
+		children: n
+	});
+});
+i.displayName = "DropzoneLabel";
+//#endregion
+export { i as DropzoneLabel };

package/dist/esm/core/components/file-upload-dropzone/FileUploadDropzone.d.ts

@@ -0,0 +1,51 @@
+import { ReactElement, ReactNode } from 'react';
+import { DropZoneProps as AriaDropZoneProps, FileTriggerProps as AriaFileTriggerProps } from 'react-aria-components';
+import { DropzoneProps } from '../dropzone/Dropzone.js';
+export interface FileUploadDropzoneProps extends Omit<DropzoneProps, 'children' | 'onDrop'>, Pick<AriaFileTriggerProps, 'acceptDirectory' | 'acceptedFileTypes' | 'allowsMultiple' | 'defaultCamera' | 'onSelect'> {
+    /** Names the native picker input for browser form semantics. */
+    name?: string;
+    /** The visual dropzone content. */
+    children: ReactNode;
+    /** Receives the accepted file drop event. */
+    onDrop?: AriaDropZoneProps['onDrop'];
+    /**
+     * Replaces the default `FileUploadDropzoneButton` picker action.
+     *
+     * The supplied element must accept `isDisabled` so FileUploadDropzone can
+     * keep its picker unavailable while `state="disabled"`.
+     */
+    picker?: ReactElement<{
+        isDisabled?: boolean;
+    }>;
+    /** Whether the whole dropzone or only `picker` opens the file selector. */
+    pickerMode?: 'surface' | 'button';
+}
+/**
+ * Gives file workflows one destination for dropping files and choosing them.
+ *
+ * FileUploadDropzone combines Dropzone with FileUploadTrigger without owning
+ * selected files, validation, or upload transport. Use `pickerMode="surface"`
+ * when the whole target should open the picker; use the default `button` mode
+ * when people should choose files through a separate action.
+ * @param props - Dropzone content, file-selection options, and picker mode.
+ * @param props.children - The visual cue, label, and description for the target.
+ * @param props.acceptDirectory - Lets the native picker select a directory.
+ * @param props.acceptedFileTypes - Restricts files shown by the native picker.
+ * @param props.allowsMultiple - Lets the native picker select several files.
+ * @param props.defaultCamera - Selects the preferred device camera on supported devices.
+ * @param props.name - Names the native picker input for form submission.
+ * @param props.picker - Replaces the compact primary FileUploadDropzoneButton.
+ * @param props.pickerMode - Makes the full surface or only `picker` pressable.
+ * @param props.onSelect - Receives files selected through the native picker.
+ * @param props.onDrop - Receives files dropped on the target.
+ * @see {@link FileUploadDropzoneProps} for all supported file and drop options.
+ * @remarks
+ * The default picker receives the disabled state automatically. Custom
+ * `picker` elements also receive `isDisabled`; provide an alternative
+ * file-selection action whenever dragging is not available.
+ */
+declare const FileUploadDropzone: {
+    ({ pickerMode, picker, children, acceptDirectory, acceptedFileTypes, allowsMultiple, defaultCamera, name, onSelect, ...dropzoneProps }: FileUploadDropzoneProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};
+export { FileUploadDropzone };

package/dist/esm/core/components/file-upload-dropzone/FileUploadDropzone.js

@@ -0,0 +1,46 @@
+import { Actionable as e } from "../actionable/Actionable.js";
+import { Dropzone as t } from "../dropzone/Dropzone.js";
+import { DropzoneContent as n } from "../dropzone/parts/DropzoneContent.js";
+import { DropzoneActions as r } from "../dropzone/parts/DropzoneActions.js";
+import { FileUploadTrigger as i } from "../file-upload-trigger/FileUploadTrigger.js";
+import { FileUploadDropzoneButton as a } from "./parts/FileUploadDropzoneButton.js";
+import { cloneElement as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/core/components/file-upload-dropzone/FileUploadDropzone.tsx
+var l = ({ pickerMode: l = "button", picker: u, children: d, acceptDirectory: f, acceptedFileTypes: p, allowsMultiple: m, defaultCamera: h, name: g, onSelect: _, ...v }) => {
+	let y = v.state === "disabled", b = {
+		acceptDirectory: f,
+		acceptedFileTypes: p,
+		allowsMultiple: m,
+		defaultCamera: h,
+		name: g,
+		onSelect: _
+	};
+	if (l === "surface") return /* @__PURE__ */ s(i, {
+		...b,
+		children: /* @__PURE__ */ s(e, {
+			"aria-label": v["aria-label"],
+			"aria-labelledby": v["aria-labelledby"],
+			"aria-describedby": v["aria-describedby"],
+			"aria-invalid": v.state === "invalid" || void 0,
+			className: "uy:block uy:w-full",
+			"data-unity-slot": "file-upload-dropzone-surface-picker",
+			isDisabled: y,
+			children: /* @__PURE__ */ s(t, {
+				...v,
+				children: /* @__PURE__ */ s(n, { children: d })
+			})
+		})
+	});
+	let x = u ? o(u, { isDisabled: y || u.props.isDisabled }) : /* @__PURE__ */ s(a, { isDisabled: y });
+	return /* @__PURE__ */ c(t, {
+		...v,
+		children: [/* @__PURE__ */ s(n, { children: d }), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(i, {
+			...b,
+			children: x
+		}) })]
+	});
+};
+l.displayName = "FileUploadDropzone";
+//#endregion
+export { l as FileUploadDropzone };

package/dist/esm/core/components/file-upload-dropzone/parts/FileUploadDropzoneButton.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../../button/Button.js';
+export type FileUploadDropzoneButtonProps = Omit<ButtonProps, 'mode' | 'variant'>;
+/**
+ * Provides the default file-picker action for FileUploadDropzone.
+ *
+ * It uses a compact primary Button so file selection remains discoverable
+ * without competing with the dropzone's content. Pass a custom `picker` to
+ * FileUploadDropzone when the surrounding workflow needs another action.
+ * @param props - Button content and interaction props.
+ * @see {@link FileUploadDropzoneProps} for the composed dropzone API.
+ */
+declare const FileUploadDropzoneButton: import('react').ForwardRefExoticComponent<FileUploadDropzoneButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { FileUploadDropzoneButton };

package/dist/esm/core/components/file-upload-dropzone/parts/FileUploadDropzoneButton.js

@@ -0,0 +1,14 @@
+import { Button as e } from "../../button/Button.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/file-upload-dropzone/parts/FileUploadDropzoneButton.tsx
+var r = t(({ children: t = "Choose files", ...r }, i) => /* @__PURE__ */ n(e, {
+	...r,
+	ref: i,
+	mode: "compact",
+	variant: "primary",
+	children: t
+}));
+r.displayName = "FileUploadDropzoneButton";
+//#endregion
+export { r as FileUploadDropzoneButton };

package/dist/esm/core/components/file-upload-trigger/FileUploadTrigger.d.ts

@@ -0,0 +1,52 @@
+import { FileTriggerProps as AriaFileTriggerProps } from 'react-aria-components';
+export interface FileUploadTriggerProps extends Pick<AriaFileTriggerProps, 'acceptDirectory' | 'acceptedFileTypes' | 'allowsMultiple' | 'defaultCamera' | 'onSelect'> {
+    /** Identifies the native file input. */
+    id?: string;
+    /** Names the native file input for browser form semantics. */
+    name?: string;
+    /** The pressable or actionable element that opens the native file picker. */
+    children: AriaFileTriggerProps['children'];
+}
+/**
+ * Gives a familiar control access to the device file picker.
+ * FileUploadTrigger turns its pressable child into the native picker trigger
+ * and returns selected files through `onSelect`. It only acquires files;
+ * validation, display, and upload remain consumer-owned.
+ * @param props - The native picker configuration and pressable child.
+ * @param props.children - The focusable control that opens the native picker.
+ * @param props.acceptDirectory - Lets people choose a directory when supported.
+ * @param props.acceptedFileTypes - Filters visible file types in the native picker.
+ * @param props.allowsMultiple - Lets people select several files at once.
+ * @param props.defaultCamera - Selects a preferred device camera when supported.
+ * @param props.id - Identifies the native file input.
+ * @param props.name - Names the native file input for form submission.
+ * @param props.onSelect - Receives the files chosen through the native picker.
+ * @see {@link FileUploadTriggerProps} for native picker configuration.
+ * @example
+ * ```tsx
+ * import { Button, FileUploadTrigger } from '@payfit/unity-components'
+ *
+ * export function AvatarPicker() {
+ *   return (
+ *     <FileUploadTrigger
+ *       acceptedFileTypes={['image/jpeg', 'image/png']}
+ *       onSelect={files => {
+ *         const avatar = files?.item(0)
+ *         if (avatar) {
+ *           console.log(avatar.name)
+ *         }
+ *       }}
+ *     >
+ *       <Button variant="primary">Choose profile picture</Button>
+ *     </FileUploadTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use a focusable Button or Actionable child with a specific visible label or `aria-label`.
+ * - Reflect disabled, pending, error, and success states on the child.
+ * - Announce asynchronous results in a nearby live region.
+ * - Pair `acceptedFileTypes` with visible acceptance guidance and validate the selection after it is returned.
+ */
+declare const FileUploadTrigger: import('react').ForwardRefExoticComponent<FileUploadTriggerProps & import('react').RefAttributes<HTMLInputElement>>;
+export { FileUploadTrigger };