@drivenets/design-system 0.0.1 → 0.0.3

package/dist/components/ds-file-upload/components/file-upload/file-upload.cjs

@@ -0,0 +1,96 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../../../ds-icon/ds-icon.cjs');
+require('../../../ds-icon/index.cjs');
+const require_ds_typography = require('../../../ds-typography/ds-typography.cjs');
+require('../../../ds-typography/index.cjs');
+const require_ds_button = require('../../../ds-button/ds-button.cjs');
+require('../../../ds-button/index.cjs');
+const require_file_upload_item = require('../file-upload-item/file-upload-item.cjs');
+require('../file-upload-item/index.cjs');
+const require_constants = require('../../utils/constants.cjs');
+const require_accept_utils = require('../../utils/accept-utils.cjs');
+const require_generate_helper_text = require('../../utils/generate-helper-text.cjs');
+const require_file_upload_module = require('./file-upload.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __ark_ui_react = require("@ark-ui/react");
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.tsx
+/**
+* Design system base File Upload component
+* Used in conjunction with the useFileUpload hook
+*/
+const FileUpload = ({ style = {}, className, files, acceptedFiles, errorText, dropzoneText = "Drag and drop files here or ", triggerText = "Select file...", hideProgress = false, disableDrop = false, onFileAccept, onFileReject, onFileRemove, onFileDelete, onFileCancel, onFileRetry, accept = require_constants.DEFAULT_ALLOWED_FILE_TYPES, maxFiles = require_constants.DEFAULT_MAX_FILES, maxFileSize = require_constants.DEFAULT_MAX_FILE_SIZE, compact = false, disabled = false }) => {
+	const infoText = require_generate_helper_text.generateHelperText(accept, maxFileSize, maxFiles);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react.FileUpload.Root, {
+		style,
+		className: (0, classnames.default)(require_file_upload_module.default.fileUploadRoot, className),
+		maxFiles,
+		maxFileSize,
+		accept: require_accept_utils.getMimeTypes(accept),
+		disabled,
+		allowDrop: !disableDrop,
+		acceptedFiles,
+		onFileAccept,
+		onFileReject,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react.FileUpload.Dropzone, {
+				className: (0, classnames.default)(require_file_upload_module.default.dropzone, { [require_file_upload_module.default.dropzoneCompact]: compact }),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: "upload",
+						className: require_file_upload_module.default.dropzoneIcon
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+						className: require_file_upload_module.default.dropzoneText,
+						variant: "body-xs-reg",
+						children: dropzoneText
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.FileUpload.Trigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+							design: "v1.2",
+							variant: "ghost",
+							size: "small",
+							disabled,
+							children: triggerText
+						})
+					})
+				]
+			}),
+			infoText && !disabled && !errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_file_upload_module.default.infoText,
+				variant: "body-xs-reg",
+				children: infoText
+			}),
+			errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_typography.default, {
+				className: require_file_upload_module.default.errorText,
+				variant: "body-xs-reg",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "error",
+					size: "tiny"
+				}), errorText]
+			}),
+			!!files?.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_file_upload_module.default.fileList,
+				children: files.map((uploadFile) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_file_upload_item.FileUploadItem, {
+					id: uploadFile.id,
+					name: uploadFile.name,
+					progress: uploadFile.progress,
+					hideProgress,
+					status: uploadFile.status,
+					errors: uploadFile.errors,
+					onRemove: onFileRemove,
+					onDelete: onFileDelete,
+					onCancel: onFileCancel,
+					onRetry: onFileRetry
+				}, uploadFile.id))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.FileUpload.HiddenInput, {})
+		]
+	});
+};
+
+//#endregion
+exports.FileUpload = FileUpload;

package/dist/components/ds-file-upload/components/file-upload/file-upload.d.cts

@@ -0,0 +1,13 @@
+import { FileUploadProps } from "./file-upload.types.cjs";
+import React from "react";
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.d.ts
+
+/**
+ * Design system base File Upload component
+ * Used in conjunction with the useFileUpload hook
+ */
+declare const FileUpload: React.FC<FileUploadProps>;
+//#endregion
+export { FileUpload };
+//# sourceMappingURL=file-upload.d.cts.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.cts","names":[],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAiBA;;cAAa,YAAY,KAAA,CAAM,GAAG"}

package/dist/components/ds-file-upload/components/file-upload/file-upload.d.ts

@@ -0,0 +1,13 @@
+import { FileUploadProps } from "./file-upload.types.js";
+import React from "react";
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.d.ts
+
+/**
+ * Design system base File Upload component
+ * Used in conjunction with the useFileUpload hook
+ */
+declare const FileUpload: React.FC<FileUploadProps>;
+//#endregion
+export { FileUpload };
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAiBA;;cAAa,YAAY,KAAA,CAAM,GAAG"}

package/dist/components/ds-file-upload/components/file-upload/file-upload.js

@@ -0,0 +1,95 @@
+import ds_icon_default from "../../../ds-icon/ds-icon.js";
+import "../../../ds-icon/index.js";
+import ds_typography_default from "../../../ds-typography/ds-typography.js";
+import "../../../ds-typography/index.js";
+import ds_button_default from "../../../ds-button/ds-button.js";
+import "../../../ds-button/index.js";
+import { FileUploadItem } from "../file-upload-item/file-upload-item.js";
+import "../file-upload-item/index.js";
+import { DEFAULT_ALLOWED_FILE_TYPES, DEFAULT_MAX_FILES, DEFAULT_MAX_FILE_SIZE } from "../../utils/constants.js";
+import { getMimeTypes } from "../../utils/accept-utils.js";
+import { generateHelperText } from "../../utils/generate-helper-text.js";
+import file_upload_module_default from "./file-upload.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileUpload } from "@ark-ui/react";
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.tsx
+/**
+* Design system base File Upload component
+* Used in conjunction with the useFileUpload hook
+*/
+const FileUpload$1 = ({ style = {}, className, files, acceptedFiles, errorText, dropzoneText = "Drag and drop files here or ", triggerText = "Select file...", hideProgress = false, disableDrop = false, onFileAccept, onFileReject, onFileRemove, onFileDelete, onFileCancel, onFileRetry, accept = DEFAULT_ALLOWED_FILE_TYPES, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE, compact = false, disabled = false }) => {
+	const infoText = generateHelperText(accept, maxFileSize, maxFiles);
+	return /* @__PURE__ */ jsxs(FileUpload.Root, {
+		style,
+		className: classNames(file_upload_module_default.fileUploadRoot, className),
+		maxFiles,
+		maxFileSize,
+		accept: getMimeTypes(accept),
+		disabled,
+		allowDrop: !disableDrop,
+		acceptedFiles,
+		onFileAccept,
+		onFileReject,
+		children: [
+			/* @__PURE__ */ jsxs(FileUpload.Dropzone, {
+				className: classNames(file_upload_module_default.dropzone, { [file_upload_module_default.dropzoneCompact]: compact }),
+				children: [
+					/* @__PURE__ */ jsx(ds_icon_default, {
+						icon: "upload",
+						className: file_upload_module_default.dropzoneIcon
+					}),
+					/* @__PURE__ */ jsx(ds_typography_default, {
+						className: file_upload_module_default.dropzoneText,
+						variant: "body-xs-reg",
+						children: dropzoneText
+					}),
+					/* @__PURE__ */ jsx(FileUpload.Trigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(ds_button_default, {
+							design: "v1.2",
+							variant: "ghost",
+							size: "small",
+							disabled,
+							children: triggerText
+						})
+					})
+				]
+			}),
+			infoText && !disabled && !errorText && /* @__PURE__ */ jsx(ds_typography_default, {
+				className: file_upload_module_default.infoText,
+				variant: "body-xs-reg",
+				children: infoText
+			}),
+			errorText && /* @__PURE__ */ jsxs(ds_typography_default, {
+				className: file_upload_module_default.errorText,
+				variant: "body-xs-reg",
+				children: [/* @__PURE__ */ jsx(ds_icon_default, {
+					icon: "error",
+					size: "tiny"
+				}), errorText]
+			}),
+			!!files?.length && /* @__PURE__ */ jsx("div", {
+				className: file_upload_module_default.fileList,
+				children: files.map((uploadFile) => /* @__PURE__ */ jsx(FileUploadItem, {
+					id: uploadFile.id,
+					name: uploadFile.name,
+					progress: uploadFile.progress,
+					hideProgress,
+					status: uploadFile.status,
+					errors: uploadFile.errors,
+					onRemove: onFileRemove,
+					onDelete: onFileDelete,
+					onCancel: onFileCancel,
+					onRetry: onFileRetry
+				}, uploadFile.id))
+			}),
+			/* @__PURE__ */ jsx(FileUpload.HiddenInput, {})
+		]
+	});
+};
+
+//#endregion
+export { FileUpload$1 as FileUpload };
+//# sourceMappingURL=file-upload.js.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":["FileUpload: React.FC<FileUploadProps>","ArkUiFileUpload","styles","DsIcon","DsTypography","DsButton"],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { FileUpload as ArkUiFileUpload } from '@ark-ui/react';\nimport { DsIcon } from '../../../ds-icon';\nimport { DsTypography } from '../../../ds-typography';\nimport { DsButton } from '../../../ds-button';\nimport { FileUploadItem } from '../file-upload-item';\nimport type { FileUploadProps } from './file-upload.types';\nimport { DEFAULT_ALLOWED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DEFAULT_MAX_FILES } from '../../utils/constants';\nimport { generateHelperText } from '../../utils/generate-helper-text';\nimport { getMimeTypes } from '../../utils/accept-utils';\nimport styles from './file-upload.module.scss';\n\n/**\n * Design system base File Upload component\n * Used in conjunction with the useFileUpload hook\n */\nexport const FileUpload: React.FC<FileUploadProps> = ({\n\tstyle = {},\n\tclassName,\n\tfiles,\n\tacceptedFiles,\n\terrorText,\n\tdropzoneText = 'Drag and drop files here or ',\n\ttriggerText = 'Select file...',\n\thideProgress = false,\n\tdisableDrop = false,\n\tonFileAccept,\n\tonFileReject,\n\tonFileRemove,\n\tonFileDelete,\n\tonFileCancel,\n\tonFileRetry,\n\taccept = DEFAULT_ALLOWED_FILE_TYPES,\n\tmaxFiles = DEFAULT_MAX_FILES,\n\tmaxFileSize = DEFAULT_MAX_FILE_SIZE,\n\tcompact = false,\n\tdisabled = false,\n}) => {\n\tconst infoText = generateHelperText(accept, maxFileSize, maxFiles);\n\n\treturn (\n\t\t<ArkUiFileUpload.Root\n\t\t\tstyle={style}\n\t\t\tclassName={classNames(styles.fileUploadRoot, className)}\n\t\t\tmaxFiles={maxFiles}\n\t\t\tmaxFileSize={maxFileSize}\n\t\t\taccept={getMimeTypes(accept)}\n\t\t\tdisabled={disabled}\n\t\t\tallowDrop={!disableDrop}\n\t\t\tacceptedFiles={acceptedFiles}\n\t\t\tonFileAccept={onFileAccept}\n\t\t\tonFileReject={onFileReject}\n\t\t>\n\t\t\t<ArkUiFileUpload.Dropzone\n\t\t\t\tclassName={classNames(styles.dropzone, {\n\t\t\t\t\t[styles.dropzoneCompact]: compact,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<DsIcon icon=\"upload\" className={styles.dropzoneIcon} />\n\t\t\t\t<DsTypography className={styles.dropzoneText} variant=\"body-xs-reg\">\n\t\t\t\t\t{dropzoneText}\n\t\t\t\t</DsTypography>\n\t\t\t\t<ArkUiFileUpload.Trigger asChild>\n\t\t\t\t\t<DsButton design=\"v1.2\" variant=\"ghost\" size=\"small\" disabled={disabled}>\n\t\t\t\t\t\t{triggerText}\n\t\t\t\t\t</DsButton>\n\t\t\t\t</ArkUiFileUpload.Trigger>\n\t\t\t</ArkUiFileUpload.Dropzone>\n\n\t\t\t{infoText && !disabled && !errorText && (\n\t\t\t\t<DsTypography className={styles.infoText} variant=\"body-xs-reg\">\n\t\t\t\t\t{infoText}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\t\t\t{errorText && (\n\t\t\t\t<DsTypography className={styles.errorText} variant=\"body-xs-reg\">\n\t\t\t\t\t<DsIcon icon=\"error\" size=\"tiny\" />\n\t\t\t\t\t{errorText}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t{!!files?.length && (\n\t\t\t\t<div className={styles.fileList}>\n\t\t\t\t\t{files.map((uploadFile) => (\n\t\t\t\t\t\t<FileUploadItem\n\t\t\t\t\t\t\tkey={uploadFile.id}\n\t\t\t\t\t\t\tid={uploadFile.id}\n\t\t\t\t\t\t\tname={uploadFile.name}\n\t\t\t\t\t\t\tprogress={uploadFile.progress}\n\t\t\t\t\t\t\thideProgress={hideProgress}\n\t\t\t\t\t\t\tstatus={uploadFile.status}\n\t\t\t\t\t\t\terrors={uploadFile.errors}\n\t\t\t\t\t\t\tonRemove={onFileRemove}\n\t\t\t\t\t\t\tonDelete={onFileDelete}\n\t\t\t\t\t\t\tonCancel={onFileCancel}\n\t\t\t\t\t\t\tonRetry={onFileRetry}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<ArkUiFileUpload.HiddenInput />\n\t\t</ArkUiFileUpload.Root>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,MAAaA,gBAAyC,EACrD,QAAQ,EAAE,EACV,WACA,OACA,eACA,WACA,eAAe,gCACf,cAAc,kBACd,eAAe,OACf,cAAc,OACd,cACA,cACA,cACA,cACA,cACA,aACA,SAAS,4BACT,WAAW,mBACX,cAAc,uBACd,UAAU,OACV,WAAW,YACN;CACL,MAAM,WAAW,mBAAmB,QAAQ,aAAa,SAAS;AAElE,QACC,qBAACC,WAAgB;EACT;EACP,WAAW,WAAWC,2BAAO,gBAAgB,UAAU;EAC7C;EACG;EACb,QAAQ,aAAa,OAAO;EAClB;EACV,WAAW,CAAC;EACG;EACD;EACA;;GAEd,qBAACD,WAAgB;IAChB,WAAW,WAAWC,2BAAO,UAAU,GACrCA,2BAAO,kBAAkB,SAC1B,CAAC;;KAEF,oBAACC;MAAO,MAAK;MAAS,WAAWD,2BAAO;OAAgB;KACxD,oBAACE;MAAa,WAAWF,2BAAO;MAAc,SAAQ;gBACpD;OACa;KACf,oBAACD,WAAgB;MAAQ;gBACxB,oBAACI;OAAS,QAAO;OAAO,SAAQ;OAAQ,MAAK;OAAkB;iBAC7D;QACS;OACc;;KACA;GAE1B,YAAY,CAAC,YAAY,CAAC,aAC1B,oBAACD;IAAa,WAAWF,2BAAO;IAAU,SAAQ;cAChD;KACa;GAEf,aACA,qBAACE;IAAa,WAAWF,2BAAO;IAAW,SAAQ;eAClD,oBAACC;KAAO,MAAK;KAAQ,MAAK;MAAS,EAClC;KACa;GAGf,CAAC,CAAC,OAAO,UACT,oBAAC;IAAI,WAAWD,2BAAO;cACrB,MAAM,KAAK,eACX,oBAAC;KAEA,IAAI,WAAW;KACf,MAAM,WAAW;KACjB,UAAU,WAAW;KACP;KACd,QAAQ,WAAW;KACnB,QAAQ,WAAW;KACnB,UAAU;KACV,UAAU;KACV,UAAU;KACV,SAAS;OAVJ,WAAW,GAWf,CACD;KACG;GAGP,oBAACD,WAAgB,gBAAc;;GACT"}

package/dist/components/ds-file-upload/components/file-upload/file-upload.module.cjs

@@ -0,0 +1,15 @@
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.module.scss
+var file_upload_module_default = {
+	"fileUploadRoot": "_fileUploadRoot_1jafp_1",
+	"dropzone": "_dropzone_1jafp_1",
+	"dropzoneCompact": "_dropzoneCompact_1jafp_1",
+	"dropzoneIcon": "_dropzoneIcon_1jafp_1",
+	"dropzoneText": "_dropzoneText_1jafp_1",
+	"fileList": "_fileList_1jafp_1",
+	"infoText": "_infoText_1jafp_1",
+	"errorText": "_errorText_1jafp_1"
+};
+
+//#endregion
+exports.default = file_upload_module_default;

package/dist/components/ds-file-upload/components/file-upload/file-upload.module.js

@@ -0,0 +1,15 @@
+//#region src/components/ds-file-upload/components/file-upload/file-upload.module.scss
+var file_upload_module_default = {
+	"fileUploadRoot": "_fileUploadRoot_1jafp_1",
+	"dropzone": "_dropzone_1jafp_1",
+	"dropzoneCompact": "_dropzoneCompact_1jafp_1",
+	"dropzoneIcon": "_dropzoneIcon_1jafp_1",
+	"dropzoneText": "_dropzoneText_1jafp_1",
+	"fileList": "_fileList_1jafp_1",
+	"infoText": "_infoText_1jafp_1",
+	"errorText": "_errorText_1jafp_1"
+};
+
+//#endregion
+export { file_upload_module_default as default };
+//# sourceMappingURL=file-upload.module.js.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.module.js","names":[],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.module.scss"],"sourcesContent":["@use '../../../../styles/typography';\n\n.fileUploadRoot {\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n}\n\n.dropzone {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: var(--exo-spacing-small) var(--exo-spacing-standard);\n\tborder: var(--exo-spacing-4x-small) dashed var(--color-border);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tbackground-color: var(--color-background);\n\ttransition: all 0.2s ease;\n\tcursor: pointer;\n\n\t&.dropzoneCompact {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\t.dropzoneIcon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.dropzoneText {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.dropzoneIcon {\n\t\tcolor: var(--color-icon-secondary);\n\t}\n\n\t.dropzoneText {\n\t\tcolor: var(--color-background-deselected);\n\t\ttext-align: center;\n\t\tpadding: var(--spacing-3xs) 0 var(--spacing-sm) 0;\n\t}\n\n\t[data-part='trigger'] {\n\t\talign-self: center;\n\t}\n\n\t&:hover:not([data-disabled]) {\n\t\tborder-color: var(--color-background-selected);\n\t\tbackground-color: var(--color-background-selected-weak);\n\t}\n\n\t&[data-dragging] {\n\t\tborder-color: var(--color-background-selected);\n\t\tbackground-color: var(--color-background-selected-weak);\n\t\tborder-style: solid;\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: not-allowed;\n\n\t\t.dropzoneIcon,\n\t\t.dropzoneText {\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n}\n\n.fileList {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--exo-spacing-x-small);\n\tmargin-top: var(--exo-spacing-x-small);\n\tpadding: var(--spacing-xs);\n\tborder-radius: var(--exo-spacing-2x-small);\n\tbackground: var(--color-background-secondary);\n}\n\n.infoText {\n\tcolor: var(--color-font-secondary);\n\tmargin-top: var(--spacing-2xs);\n}\n\n.errorText {\n\tcolor: var(--color-background-danger-strong);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\tmargin-top: var(--spacing-2xs);\n}\n"],"mappings":""}

package/dist/components/ds-file-upload/components/file-upload/file-upload.types.d.cts

@@ -0,0 +1,98 @@
+import { UploadedFile } from "../../ds-file-upload-api.types.cjs";
+import { AcceptedFileType } from "../../types/accept-types.cjs";
+import { CSSProperties } from "react";
+import { FileUploadFileAcceptDetails, FileUploadFileRejectDetails } from "@ark-ui/react";
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.types.d.ts
+interface FileUploadProps {
+  /**
+   * Error text displayed when validation fails
+   */
+  errorText?: string;
+  /**
+   * Text displayed in the dropzone area
+   */
+  dropzoneText?: string;
+  /**
+   * Text for the upload trigger button
+   */
+  triggerText?: string;
+  /**
+   * Whether to hide upload progress
+   * @default false
+   */
+  hideProgress?: boolean;
+  /**
+   * Whether to disable drag and drop functionality
+   * @default false
+   */
+  disableDrop?: boolean;
+  /**
+   * The maximum number of files that can be uploaded
+   */
+  maxFiles?: number;
+  /**
+   * Maximum file size in bytes
+   * @default 25MB
+   */
+  maxFileSize?: number;
+  /**
+   * Callback when files are accepted
+   */
+  onFileAccept?: (details: FileUploadFileAcceptDetails) => void;
+  /**
+   * Callback when files are rejected
+   */
+  onFileReject?: (details: FileUploadFileRejectDetails) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles
+   */
+  style?: CSSProperties;
+  /**
+   * The file types that are accepted
+   * Use shorthand for common MIME types (extensions provided automatically)
+   * or explicit form for custom types
+   * @example ['application/pdf', 'image/png']
+   * @example ['application/pdf', { mimeType: 'application/x-custom', extensions: ['.custom'] }]
+   */
+  accept?: AcceptedFileType[];
+  /**
+   * File states to display (managed externally)
+   */
+  files?: UploadedFile[];
+  /**
+   * Callback when files are removed
+   */
+  onFileRemove?: (fileId: string) => void;
+  /**
+   * Callback when files are deleted
+   */
+  onFileDelete?: (fileId: string) => void;
+  /**
+   * Callback when files upload is canceled
+   */
+  onFileCancel?: (fileId: string) => void;
+  /**
+   * Callback when files upload is retried
+   */
+  onFileRetry?: (fileId: string) => void;
+  /**
+   * Controlled accepted files
+   */
+  acceptedFiles?: File[];
+  /**
+   * Whether the file upload is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the file upload layout is compact (inline)
+   */
+  compact?: boolean;
+}
+//#endregion
+export { FileUploadProps };
+//# sourceMappingURL=file-upload.types.d.cts.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.types.d.cts","names":[],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.types.tsx"],"sourcesContent":[],"mappings":";;;;;;UAKiB,eAAA;;AAAjB;;EAuC0B,SAAA,CAAA,EAAA,MAAA;EAQjB;;;EAgCQ,YAAA,CAAA,EAAA,MAAA;EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;2BA5CK;;;;2BAIA;;;;;;;;UAQjB;;;;;;;;WAQC;;;;UAID;;;;;;;;;;;;;;;;;;;;kBAoBQ"}

package/dist/components/ds-file-upload/components/file-upload/file-upload.types.d.ts

@@ -0,0 +1,98 @@
+import { UploadedFile } from "../../ds-file-upload-api.types.js";
+import { AcceptedFileType } from "../../types/accept-types.js";
+import { CSSProperties } from "react";
+import { FileUploadFileAcceptDetails, FileUploadFileRejectDetails } from "@ark-ui/react";
+
+//#region src/components/ds-file-upload/components/file-upload/file-upload.types.d.ts
+interface FileUploadProps {
+  /**
+   * Error text displayed when validation fails
+   */
+  errorText?: string;
+  /**
+   * Text displayed in the dropzone area
+   */
+  dropzoneText?: string;
+  /**
+   * Text for the upload trigger button
+   */
+  triggerText?: string;
+  /**
+   * Whether to hide upload progress
+   * @default false
+   */
+  hideProgress?: boolean;
+  /**
+   * Whether to disable drag and drop functionality
+   * @default false
+   */
+  disableDrop?: boolean;
+  /**
+   * The maximum number of files that can be uploaded
+   */
+  maxFiles?: number;
+  /**
+   * Maximum file size in bytes
+   * @default 25MB
+   */
+  maxFileSize?: number;
+  /**
+   * Callback when files are accepted
+   */
+  onFileAccept?: (details: FileUploadFileAcceptDetails) => void;
+  /**
+   * Callback when files are rejected
+   */
+  onFileReject?: (details: FileUploadFileRejectDetails) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles
+   */
+  style?: CSSProperties;
+  /**
+   * The file types that are accepted
+   * Use shorthand for common MIME types (extensions provided automatically)
+   * or explicit form for custom types
+   * @example ['application/pdf', 'image/png']
+   * @example ['application/pdf', { mimeType: 'application/x-custom', extensions: ['.custom'] }]
+   */
+  accept?: AcceptedFileType[];
+  /**
+   * File states to display (managed externally)
+   */
+  files?: UploadedFile[];
+  /**
+   * Callback when files are removed
+   */
+  onFileRemove?: (fileId: string) => void;
+  /**
+   * Callback when files are deleted
+   */
+  onFileDelete?: (fileId: string) => void;
+  /**
+   * Callback when files upload is canceled
+   */
+  onFileCancel?: (fileId: string) => void;
+  /**
+   * Callback when files upload is retried
+   */
+  onFileRetry?: (fileId: string) => void;
+  /**
+   * Controlled accepted files
+   */
+  acceptedFiles?: File[];
+  /**
+   * Whether the file upload is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the file upload layout is compact (inline)
+   */
+  compact?: boolean;
+}
+//#endregion
+export { FileUploadProps };
+//# sourceMappingURL=file-upload.types.d.ts.map

package/dist/components/ds-file-upload/components/file-upload/file-upload.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.types.d.ts","names":[],"sources":["../../../../../src/components/ds-file-upload/components/file-upload/file-upload.types.tsx"],"sourcesContent":[],"mappings":";;;;;;UAKiB,eAAA;;AAAjB;;EAuC0B,SAAA,CAAA,EAAA,MAAA;EAQjB;;;EAgCQ,YAAA,CAAA,EAAA,MAAA;EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;2BA5CK;;;;2BAIA;;;;;;;;UAQjB;;;;;;;;WAQC;;;;UAID;;;;;;;;;;;;;;;;;;;;kBAoBQ"}

package/dist/components/ds-file-upload/components/file-upload/index.cjs

@@ -0,0 +1 @@
+const require_file_upload = require('./file-upload.cjs');

package/dist/components/ds-file-upload/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+import { FileUploadProps } from "./file-upload.types.js";
+import { FileUpload } from "./file-upload.js";

package/dist/components/ds-file-upload/components/file-upload/index.js

@@ -0,0 +1 @@
+import { FileUpload } from "./file-upload.js";

package/dist/components/ds-file-upload/components/file-upload-item/file-upload-item.cjs

@@ -0,0 +1,156 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../../../ds-icon/ds-icon.cjs');
+require('../../../ds-icon/index.cjs');
+const require_ds_button = require('../../../ds-button/ds-button.cjs');
+require('../../../ds-button/index.cjs');
+const require_ds_tooltip = require('../../../ds-tooltip/ds-tooltip.cjs');
+require('../../../ds-tooltip/index.cjs');
+const require_get_error_message = require('../../utils/get-error-message.cjs');
+const require_file_upload_item_module = require('./file-upload-item.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __ark_ui_react = require("@ark-ui/react");
+
+//#region src/components/ds-file-upload/components/file-upload-item/file-upload-item.tsx
+/**
+* Individual file upload item component
+* Displays a single file with its upload status, progress, and action buttons
+*/
+const FileUploadItem = ({ id, name, progress, hideProgress = false, status, errors, onCancel, onRetry, onRemove, onDelete }) => {
+	const fileItemClass = (0, classnames.default)(require_file_upload_item_module.default.fileItemContent, {
+		[require_file_upload_item_module.default.fileItemError]: status === "error",
+		[require_file_upload_item_module.default.fileItemCompleted]: status === "completed",
+		[require_file_upload_item_module.default.fileItemUploading]: status === "uploading",
+		[require_file_upload_item_module.default.fileItemInterrupted]: status === "interrupted" || status === "cancelled"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_file_upload_item_module.default.fileItem,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: fileItemClass,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						className: require_file_upload_item_module.default.filePreview,
+						icon: "upload_file",
+						size: "tiny"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_file_upload_item_module.default.fileInfo,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: require_file_upload_item_module.default.fileName,
+							title: name,
+							children: name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Root, {
+							value: status === "error" ? 1 : progress,
+							className: require_file_upload_item_module.default.progressBar,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Track, {
+								className: require_file_upload_item_module.default.progressTrack,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Progress.Range, { className: require_file_upload_item_module.default.progressRange })
+							})
+						})]
+					}),
+					(status === "interrupted" || status === "cancelled") && onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+						content: "Retry",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+							type: "button",
+							design: "v1.2",
+							buttonType: "tertiary",
+							"aria-label": `Retry ${name} upload`,
+							onClick: () => onRetry(id),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "refresh",
+								size: "small"
+							})
+						})
+					}),
+					(status === "pending" || status === "error" || status === "interrupted") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+						content: "Remove",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+							type: "button",
+							design: "v1.2",
+							buttonType: "tertiary",
+							"aria-label": `Remove ${name} upload`,
+							onClick: () => onRemove?.(id),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "do_not_disturb_on",
+								size: "small"
+							})
+						})
+					}),
+					status === "uploading" && onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+						content: "Cancel",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+							type: "button",
+							design: "v1.2",
+							buttonType: "tertiary",
+							"aria-label": `Cancel ${name} upload`,
+							onClick: () => onCancel(id),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "close",
+								size: "small"
+							})
+						})
+					}),
+					status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+						content: "Delete",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+							type: "button",
+							design: "v1.2",
+							buttonType: "tertiary",
+							"aria-label": `Delete ${name}`,
+							onClick: () => onDelete?.(id),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+								icon: "delete",
+								size: "small"
+							})
+						})
+					})
+				]
+			}),
+			status === "completed" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_file_upload_item_module.default.completedText,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "check_circle",
+					size: "tiny",
+					filled: true
+				}), "Upload complete"]
+			}),
+			status === "interrupted" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_file_upload_item_module.default.interruptedText,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "info",
+					size: "tiny",
+					filled: true
+				}), "Upload interrupted"]
+			}),
+			status === "cancelled" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_file_upload_item_module.default.interruptedText,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "info",
+					size: "tiny",
+					filled: true
+				}), "Upload cancelled"]
+			}),
+			status === "error" && errors?.length && errors.map((error) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_file_upload_item_module.default.errorMessage,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "cancel",
+					size: "tiny",
+					filled: true
+				}), require_get_error_message.getErrorMessage(error)]
+			}, error)),
+			!hideProgress && status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: require_file_upload_item_module.default.progressText,
+				children: [
+					"Uploading...(",
+					Math.round(progress),
+					"%)"
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+exports.FileUploadItem = FileUploadItem;