@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/file-upload/file-upload.css

@@ -0,0 +1,290 @@
+.puzzle-file-upload {
+  gap: var(--puzzle-space-3, .75rem);
+  width: 100%;
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-file-upload__input {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.puzzle-file-upload__dropzone {
+  justify-content: center;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  min-height: 12rem;
+  padding: var(--puzzle-space-6, 1.5rem);
+  border: 1.5px dashed var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  background: var(--puzzle-color-surface);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-file-upload__dropzone:hover {
+  border-color: var(--puzzle-color-primary);
+  background: color-mix(in srgb, var(--puzzle-color-primary), transparent 97%);
+}
+
+.puzzle-file-upload__dropzone:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+.puzzle-file-upload__dropzone[data-dragging="true"] {
+  border: 2px dashed var(--puzzle-color-primary);
+  background: color-mix(in srgb, var(--puzzle-color-primary), transparent 92%);
+}
+
+.puzzle-file-upload__dropzone[data-rejected="true"] {
+  border-color: var(--puzzle-color-danger);
+  background: color-mix(in srgb, var(--puzzle-color-danger), transparent 94%);
+}
+
+.puzzle-file-upload[data-disabled="true"] {
+  opacity: .55;
+}
+
+.puzzle-file-upload[data-disabled="true"] .puzzle-file-upload__dropzone {
+  cursor: not-allowed;
+}
+
+.puzzle-file-upload[data-disabled="true"] .puzzle-file-upload__dropzone:hover {
+  border-color: var(--puzzle-color-border);
+  background: var(--puzzle-color-surface);
+}
+
+.puzzle-file-upload__icon {
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  background: var(--puzzle-color-surface-secondary, var(--puzzle-color-border));
+  width: 3rem;
+  height: 3rem;
+  color: var(--puzzle-color-text-muted);
+  justify-content: center;
+  align-items: center;
+  font-size: 1.75rem;
+  display: flex;
+}
+
+.puzzle-file-upload__title {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-md, 1rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+.puzzle-file-upload__description {
+  max-width: 28rem;
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-file-upload__browse {
+  color: var(--puzzle-color-primary);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+.puzzle-file-upload__hint {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-file-upload__files {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-file-upload__files-header {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  display: flex;
+}
+
+.puzzle-file-upload__list {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-file-upload__item {
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  min-width: 0;
+  padding: var(--puzzle-space-3, .75rem);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  display: flex;
+}
+
+.puzzle-file-upload__file-icon {
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface-secondary, var(--puzzle-color-border));
+  width: 2.25rem;
+  height: 2.25rem;
+  color: var(--puzzle-color-text-muted);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.puzzle-file-upload__file-content {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-file-upload__file-header {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-file-upload__filename {
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.puzzle-file-upload__filesize {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  flex: none;
+}
+
+.puzzle-file-upload__progress {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  display: flex;
+}
+
+.puzzle-file-upload__progress > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.puzzle-file-upload__progress > span {
+  min-width: 2.5rem;
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  flex: none;
+}
+
+.puzzle-file-upload__status {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-file-upload__status--success {
+  color: var(--puzzle-color-success);
+}
+
+.puzzle-file-upload__status--error {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-file-upload__remove, .puzzle-file-upload__retry {
+  border-radius: var(--puzzle-radius-sm, .375rem);
+  width: 2rem;
+  height: 2rem;
+  color: var(--puzzle-color-text-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.puzzle-file-upload__remove:hover, .puzzle-file-upload__retry:hover {
+  background: var(--puzzle-color-surface-secondary, var(--puzzle-color-border));
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-file-upload__remove:focus-visible, .puzzle-file-upload__retry:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-file-upload__remove:disabled, .puzzle-file-upload__retry:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.puzzle-file-upload__retry {
+  color: var(--puzzle-color-primary);
+}
+
+.puzzle-file-upload__rejections {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-file-upload__rejection {
+  align-items: flex-start;
+  gap: var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-color-danger);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  display: flex;
+}
+
+.puzzle-file-upload__rejection svg {
+  flex: none;
+  margin-top: .125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-file-upload__dropzone {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-file-upload__dropzone {
+    border-color: buttontext;
+  }
+
+  .puzzle-file-upload__dropzone:focus-visible, .puzzle-file-upload__remove:focus-visible, .puzzle-file-upload__retry:focus-visible {
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-file-upload__status--success {
+    color: linktext;
+  }
+}

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

@@ -0,0 +1,51 @@
+import { ComponentPropsWithRef } from "react";
+type FileUploadStatus = "queued" | "uploading" | "complete" | "error";
+type FileUploadRejectionCode = "file-type" | "file-too-large" | "total-too-large" | "too-many-files";
+type FileUploadRejection = {
+  file: File;
+  code: FileUploadRejectionCode;
+  message: string;
+};
+type FileUploadUploadContext = {
+  onProgress: (progress: number) => void;
+  signal: AbortSignal;
+};
+type FileUploadUploadHandler = (file: File, context: FileUploadUploadContext) => Promise<void>;
+type FileUploadItem = {
+  id: string;
+  file: File;
+  status: FileUploadStatus;
+  progress: number;
+  error?: string;
+};
+type FileUploadProps = Omit<ComponentPropsWithRef<"div">, "children" | "onChange" | "onDrop"> & {
+  /** Accepted MIME types. Supports wildcards such as image/*. */
+  accept?: readonly string[];
+  /** Allow multiple files. Defaults to false. */
+  multiple?: boolean;
+  /** Maximum number of selected files. Only applies to multiple mode. */
+  maxFiles?: number;
+  /** Maximum size per file, in bytes. */
+  maxFileSize?: number;
+  /** Maximum combined size of selected files, in bytes. */
+  maxTotalSize?: number;
+  /** Native form field name. */
+  name?: string;
+  /** Marks the file input as required. */
+  required?: boolean;
+  /** Whether the component is disabled. */
+  disabled?: boolean;
+  /** Dropzone title. */
+  title?: string;
+  /** Supporting text inside the dropzone. */
+  description?: string;
+  /** Text displayed as the file picker action. */
+  browseLabel?: string;
+  /** Called whenever the accepted file list changes. */
+  onChange?: (files: File[]) => void;
+  /** Called when one or more files are rejected. */
+  onReject?: (rejections: FileUploadRejection[]) => void;
+  /** Upload handler. Accepted files are uploaded automatically. */
+  onUpload?: FileUploadUploadHandler;
+};
+export type { FileUploadItem, FileUploadProps, FileUploadRejection, FileUploadRejectionCode, FileUploadStatus, FileUploadUploadContext, FileUploadUploadHandler };

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

@@ -0,0 +1,51 @@
+import { ComponentPropsWithRef } from "react";
+type FileUploadStatus = "queued" | "uploading" | "complete" | "error";
+type FileUploadRejectionCode = "file-type" | "file-too-large" | "total-too-large" | "too-many-files";
+type FileUploadRejection = {
+  file: File;
+  code: FileUploadRejectionCode;
+  message: string;
+};
+type FileUploadUploadContext = {
+  onProgress: (progress: number) => void;
+  signal: AbortSignal;
+};
+type FileUploadUploadHandler = (file: File, context: FileUploadUploadContext) => Promise<void>;
+type FileUploadItem = {
+  id: string;
+  file: File;
+  status: FileUploadStatus;
+  progress: number;
+  error?: string;
+};
+type FileUploadProps = Omit<ComponentPropsWithRef<"div">, "children" | "onChange" | "onDrop"> & {
+  /** Accepted MIME types. Supports wildcards such as image/*. */
+  accept?: readonly string[];
+  /** Allow multiple files. Defaults to false. */
+  multiple?: boolean;
+  /** Maximum number of selected files. Only applies to multiple mode. */
+  maxFiles?: number;
+  /** Maximum size per file, in bytes. */
+  maxFileSize?: number;
+  /** Maximum combined size of selected files, in bytes. */
+  maxTotalSize?: number;
+  /** Native form field name. */
+  name?: string;
+  /** Marks the file input as required. */
+  required?: boolean;
+  /** Whether the component is disabled. */
+  disabled?: boolean;
+  /** Dropzone title. */
+  title?: string;
+  /** Supporting text inside the dropzone. */
+  description?: string;
+  /** Text displayed as the file picker action. */
+  browseLabel?: string;
+  /** Called whenever the accepted file list changes. */
+  onChange?: (files: File[]) => void;
+  /** Called when one or more files are rejected. */
+  onReject?: (rejections: FileUploadRejection[]) => void;
+  /** Upload handler. Accepted files are uploaded automatically. */
+  onUpload?: FileUploadUploadHandler;
+};
+export type { FileUploadItem, FileUploadProps, FileUploadRejection, FileUploadRejectionCode, FileUploadStatus, FileUploadUploadContext, FileUploadUploadHandler };

package/dist/components/forms/file-upload/file-upload.utils.cjs

@@ -0,0 +1,76 @@
+// src/components/forms/file-upload/file-upload.utils.ts
+const formatFileSize = (bytes) => {
+	if (bytes === 0) return "0 B";
+	if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const value = bytes / 1024 ** index;
+	return `${value >= 10 || index === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;
+};
+const matchesMimeType = (fileType, acceptedTypes) => {
+	const normalizedType = fileType.split(";")[0].trim().toLowerCase();
+	if (!normalizedType) return false;
+	return acceptedTypes.some((acceptedType) => {
+		const accepted = acceptedType.trim().toLowerCase();
+		if (!accepted) return false;
+		if (accepted.endsWith("/*")) return normalizedType.startsWith(accepted.slice(0, -1));
+		return normalizedType === accepted;
+	});
+};
+const createRejection = (file, code, message) => ({
+	file,
+	code,
+	message
+});
+const validateFile = (file, options) => {
+	const { accept = [], maxFileSize } = options;
+	if (accept.length > 0 && !matchesMimeType(file.type, accept)) return createRejection(file, "file-type", "This file type is not allowed.");
+	if (maxFileSize !== void 0 && file.size > maxFileSize) return createRejection(file, "file-too-large", `File exceeds the maximum size of ${formatFileSize(maxFileSize)}.`);
+};
+const validateFiles = (incomingFiles, existingFiles, options = {}) => {
+	const { multiple = false, maxFiles, maxTotalSize } = options;
+	const accepted = [];
+	const rejected = [];
+	const currentFiles = multiple ? [...existingFiles] : [];
+	let totalSize = currentFiles.reduce((total, file) => total + file.size, 0);
+	let fileCount = currentFiles.length;
+	incomingFiles.forEach((file) => {
+		const validationError = validateFile(file, options);
+		if (validationError) {
+			rejected.push(validationError);
+			return;
+		}
+		if (!multiple && accepted.length > 0) {
+			rejected.push(createRejection(file, "too-many-files", "Only one file can be selected."));
+			return;
+		}
+		if (multiple && maxFiles !== void 0 && fileCount >= maxFiles) {
+			rejected.push(createRejection(file, "too-many-files", `You can select a maximum of ${maxFiles} files.`));
+			return;
+		}
+		if (maxTotalSize !== void 0 && totalSize + file.size > maxTotalSize) {
+			rejected.push(createRejection(file, "total-too-large", `The combined file size exceeds ${formatFileSize(maxTotalSize)}.`));
+			return;
+		}
+		accepted.push(file);
+		totalSize += file.size;
+		fileCount++;
+	});
+	return {
+		accepted,
+		rejected
+	};
+};
+exports.createRejection = createRejection;
+exports.formatFileSize = formatFileSize;
+exports.matchesMimeType = matchesMimeType;
+exports.validateFile = validateFile;
+exports.validateFiles = validateFiles;
+
+//# sourceMappingURL=file-upload.utils.cjs.map

package/dist/components/forms/file-upload/file-upload.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.utils.cjs","names":[],"sources":["../../../../src/components/forms/file-upload/file-upload.utils.ts"],"sourcesContent":["import type {\n  FileUploadRejection,\n  FileUploadRejectionCode,\n} from \"./file-upload.types\";\n\ntype FileValidationOptions = {\n  accept?: readonly string[];\n  maxFileSize?: number;\n  maxTotalSize?: number;\n  maxFiles?: number;\n  multiple?: boolean;\n};\n\ntype FileValidationResult = {\n  accepted: File[];\n  rejected: FileUploadRejection[];\n};\n\nconst formatFileSize = (bytes: number): string => {\n  if (bytes === 0) return \"0 B\";\n\n  if (!Number.isFinite(bytes) || bytes < 0) return \"0 B\";\n\n  const units = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\n\n  const index = Math.min(\n    Math.floor(Math.log(bytes) / Math.log(1024)),\n    units.length - 1,\n  );\n\n  const value = bytes / 1024 ** index;\n\n  return `${value >= 10 || index === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;\n};\n\nconst matchesMimeType = (\n  fileType: string,\n  acceptedTypes: readonly string[],\n): boolean => {\n  const normalizedType = fileType.split(\";\")[0].trim().toLowerCase();\n\n  if (!normalizedType) return false;\n\n  return acceptedTypes.some((acceptedType) => {\n    const accepted = acceptedType.trim().toLowerCase();\n\n    if (!accepted) return false;\n\n    if (accepted.endsWith(\"/*\")) {\n      return normalizedType.startsWith(accepted.slice(0, -1));\n    }\n\n    return normalizedType === accepted;\n  });\n};\n\nconst createRejection = (\n  file: File,\n  code: FileUploadRejectionCode,\n  message: string,\n): FileUploadRejection => ({\n  file,\n  code,\n  message,\n});\n\nconst validateFile = (\n  file: File,\n  options: Pick<FileValidationOptions, \"accept\" | \"maxFileSize\">,\n): FileUploadRejection | undefined => {\n  const { accept = [], maxFileSize } = options;\n\n  if (accept.length > 0 && !matchesMimeType(file.type, accept)) {\n    return createRejection(file, \"file-type\", \"This file type is not allowed.\");\n  }\n\n  if (maxFileSize !== undefined && file.size > maxFileSize) {\n    return createRejection(\n      file,\n      \"file-too-large\",\n      `File exceeds the maximum size of ${formatFileSize(maxFileSize)}.`,\n    );\n  }\n\n  return undefined;\n};\n\nconst validateFiles = (\n  incomingFiles: readonly File[],\n  existingFiles: readonly File[],\n  options: FileValidationOptions = {},\n): FileValidationResult => {\n  const { multiple = false, maxFiles, maxTotalSize } = options;\n\n  const accepted: File[] = [];\n  const rejected: FileUploadRejection[] = [];\n\n  const currentFiles = multiple ? [...existingFiles] : [];\n\n  let totalSize = currentFiles.reduce((total, file) => total + file.size, 0);\n\n  let fileCount = currentFiles.length;\n\n  incomingFiles.forEach((file) => {\n    const validationError = validateFile(file, options);\n\n    if (validationError) {\n      rejected.push(validationError);\n      return;\n    }\n\n    if (!multiple && accepted.length > 0) {\n      rejected.push(\n        createRejection(\n          file,\n          \"too-many-files\",\n          \"Only one file can be selected.\",\n        ),\n      );\n      return;\n    }\n\n    if (multiple && maxFiles !== undefined && fileCount >= maxFiles) {\n      rejected.push(\n        createRejection(\n          file,\n          \"too-many-files\",\n          `You can select a maximum of ${maxFiles} files.`,\n        ),\n      );\n      return;\n    }\n\n    if (maxTotalSize !== undefined && totalSize + file.size > maxTotalSize) {\n      rejected.push(\n        createRejection(\n          file,\n          \"total-too-large\",\n          `The combined file size exceeds ${formatFileSize(maxTotalSize)}.`,\n        ),\n      );\n      return;\n    }\n\n    accepted.push(file);\n\n    totalSize += file.size;\n    fileCount++;\n  });\n\n  return { accepted, rejected };\n};\n\nexport {\n  formatFileSize,\n  matchesMimeType,\n  createRejection,\n  validateFile,\n  validateFiles,\n};\n\nexport type { FileValidationOptions, FileValidationResult };\n"],"mappings":";AAkBA,MAAM,kBAAkB,UAA0B;CAChD,IAAI,UAAU,GAAG,OAAO;CAExB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GAAG,OAAO;CAEjD,MAAM,QAAQ;EAAC;EAAK;EAAM;EAAM;EAAM;CAAI;CAE1C,MAAM,QAAQ,KAAK,IACjB,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,GAC3C,MAAM,SAAS,CACjB;CAEA,MAAM,QAAQ,QAAQ,QAAQ;CAE9B,OAAO,GAAG,SAAS,MAAM,UAAU,IAAI,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC,EAAE,GAAG,MAAM;AACtF;AAEA,MAAM,mBACJ,UACA,kBACY;CACZ,MAAM,iBAAiB,SAAS,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,YAAY;CAEjE,IAAI,CAAC,gBAAgB,OAAO;CAE5B,OAAO,cAAc,MAAM,iBAAiB;EAC1C,MAAM,WAAW,aAAa,KAAK,CAAC,CAAC,YAAY;EAEjD,IAAI,CAAC,UAAU,OAAO;EAEtB,IAAI,SAAS,SAAS,IAAI,GACxB,OAAO,eAAe,WAAW,SAAS,MAAM,GAAG,EAAE,CAAC;EAGxD,OAAO,mBAAmB;CAC5B,CAAC;AACH;AAEA,MAAM,mBACJ,MACA,MACA,aACyB;CACzB;CACA;CACA;AACF;AAEA,MAAM,gBACJ,MACA,YACoC;CACpC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAgB;CAErC,IAAI,OAAO,SAAS,KAAK,CAAC,gBAAgB,KAAK,MAAM,MAAM,GACzD,OAAO,gBAAgB,MAAM,aAAa,gCAAgC;CAG5E,IAAI,gBAAgB,KAAA,KAAa,KAAK,OAAO,aAC3C,OAAO,gBACL,MACA,kBACA,oCAAoC,eAAe,WAAW,EAAE,EAClE;AAIJ;AAEA,MAAM,iBACJ,eACA,eACA,UAAiC,CAAC,MACT;CACzB,MAAM,EAAE,WAAW,OAAO,UAAU,iBAAiB;CAErD,MAAM,WAAmB,CAAC;CAC1B,MAAM,WAAkC,CAAC;CAEzC,MAAM,eAAe,WAAW,CAAC,GAAG,aAAa,IAAI,CAAC;CAEtD,IAAI,YAAY,aAAa,QAAQ,OAAO,SAAS,QAAQ,KAAK,MAAM,CAAC;CAEzE,IAAI,YAAY,aAAa;CAE7B,cAAc,SAAS,SAAS;EAC9B,MAAM,kBAAkB,aAAa,MAAM,OAAO;EAElD,IAAI,iBAAiB;GACnB,SAAS,KAAK,eAAe;GAC7B;EACF;EAEA,IAAI,CAAC,YAAY,SAAS,SAAS,GAAG;GACpC,SAAS,KACP,gBACE,MACA,kBACA,gCACF,CACF;GACA;EACF;EAEA,IAAI,YAAY,aAAa,KAAA,KAAa,aAAa,UAAU;GAC/D,SAAS,KACP,gBACE,MACA,kBACA,+BAA+B,SAAS,QAC1C,CACF;GACA;EACF;EAEA,IAAI,iBAAiB,KAAA,KAAa,YAAY,KAAK,OAAO,cAAc;GACtE,SAAS,KACP,gBACE,MACA,mBACA,kCAAkC,eAAe,YAAY,EAAE,EACjE,CACF;GACA;EACF;EAEA,SAAS,KAAK,IAAI;EAElB,aAAa,KAAK;EAClB;CACF,CAAC;CAED,OAAO;EAAE;EAAU;CAAS;AAC9B"}

package/dist/components/forms/file-upload/file-upload.utils.js

@@ -0,0 +1,72 @@
+// src/components/forms/file-upload/file-upload.utils.ts
+const formatFileSize = (bytes) => {
+	if (bytes === 0) return "0 B";
+	if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const value = bytes / 1024 ** index;
+	return `${value >= 10 || index === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;
+};
+const matchesMimeType = (fileType, acceptedTypes) => {
+	const normalizedType = fileType.split(";")[0].trim().toLowerCase();
+	if (!normalizedType) return false;
+	return acceptedTypes.some((acceptedType) => {
+		const accepted = acceptedType.trim().toLowerCase();
+		if (!accepted) return false;
+		if (accepted.endsWith("/*")) return normalizedType.startsWith(accepted.slice(0, -1));
+		return normalizedType === accepted;
+	});
+};
+const createRejection = (file, code, message) => ({
+	file,
+	code,
+	message
+});
+const validateFile = (file, options) => {
+	const { accept = [], maxFileSize } = options;
+	if (accept.length > 0 && !matchesMimeType(file.type, accept)) return createRejection(file, "file-type", "This file type is not allowed.");
+	if (maxFileSize !== void 0 && file.size > maxFileSize) return createRejection(file, "file-too-large", `File exceeds the maximum size of ${formatFileSize(maxFileSize)}.`);
+};
+const validateFiles = (incomingFiles, existingFiles, options = {}) => {
+	const { multiple = false, maxFiles, maxTotalSize } = options;
+	const accepted = [];
+	const rejected = [];
+	const currentFiles = multiple ? [...existingFiles] : [];
+	let totalSize = currentFiles.reduce((total, file) => total + file.size, 0);
+	let fileCount = currentFiles.length;
+	incomingFiles.forEach((file) => {
+		const validationError = validateFile(file, options);
+		if (validationError) {
+			rejected.push(validationError);
+			return;
+		}
+		if (!multiple && accepted.length > 0) {
+			rejected.push(createRejection(file, "too-many-files", "Only one file can be selected."));
+			return;
+		}
+		if (multiple && maxFiles !== void 0 && fileCount >= maxFiles) {
+			rejected.push(createRejection(file, "too-many-files", `You can select a maximum of ${maxFiles} files.`));
+			return;
+		}
+		if (maxTotalSize !== void 0 && totalSize + file.size > maxTotalSize) {
+			rejected.push(createRejection(file, "total-too-large", `The combined file size exceeds ${formatFileSize(maxTotalSize)}.`));
+			return;
+		}
+		accepted.push(file);
+		totalSize += file.size;
+		fileCount++;
+	});
+	return {
+		accepted,
+		rejected
+	};
+};
+export { createRejection, formatFileSize, matchesMimeType, validateFile, validateFiles };
+
+//# sourceMappingURL=file-upload.utils.js.map

package/dist/components/forms/file-upload/file-upload.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.utils.js","names":[],"sources":["../../../../src/components/forms/file-upload/file-upload.utils.ts"],"sourcesContent":["import type {\n  FileUploadRejection,\n  FileUploadRejectionCode,\n} from \"./file-upload.types\";\n\ntype FileValidationOptions = {\n  accept?: readonly string[];\n  maxFileSize?: number;\n  maxTotalSize?: number;\n  maxFiles?: number;\n  multiple?: boolean;\n};\n\ntype FileValidationResult = {\n  accepted: File[];\n  rejected: FileUploadRejection[];\n};\n\nconst formatFileSize = (bytes: number): string => {\n  if (bytes === 0) return \"0 B\";\n\n  if (!Number.isFinite(bytes) || bytes < 0) return \"0 B\";\n\n  const units = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\n\n  const index = Math.min(\n    Math.floor(Math.log(bytes) / Math.log(1024)),\n    units.length - 1,\n  );\n\n  const value = bytes / 1024 ** index;\n\n  return `${value >= 10 || index === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;\n};\n\nconst matchesMimeType = (\n  fileType: string,\n  acceptedTypes: readonly string[],\n): boolean => {\n  const normalizedType = fileType.split(\";\")[0].trim().toLowerCase();\n\n  if (!normalizedType) return false;\n\n  return acceptedTypes.some((acceptedType) => {\n    const accepted = acceptedType.trim().toLowerCase();\n\n    if (!accepted) return false;\n\n    if (accepted.endsWith(\"/*\")) {\n      return normalizedType.startsWith(accepted.slice(0, -1));\n    }\n\n    return normalizedType === accepted;\n  });\n};\n\nconst createRejection = (\n  file: File,\n  code: FileUploadRejectionCode,\n  message: string,\n): FileUploadRejection => ({\n  file,\n  code,\n  message,\n});\n\nconst validateFile = (\n  file: File,\n  options: Pick<FileValidationOptions, \"accept\" | \"maxFileSize\">,\n): FileUploadRejection | undefined => {\n  const { accept = [], maxFileSize } = options;\n\n  if (accept.length > 0 && !matchesMimeType(file.type, accept)) {\n    return createRejection(file, \"file-type\", \"This file type is not allowed.\");\n  }\n\n  if (maxFileSize !== undefined && file.size > maxFileSize) {\n    return createRejection(\n      file,\n      \"file-too-large\",\n      `File exceeds the maximum size of ${formatFileSize(maxFileSize)}.`,\n    );\n  }\n\n  return undefined;\n};\n\nconst validateFiles = (\n  incomingFiles: readonly File[],\n  existingFiles: readonly File[],\n  options: FileValidationOptions = {},\n): FileValidationResult => {\n  const { multiple = false, maxFiles, maxTotalSize } = options;\n\n  const accepted: File[] = [];\n  const rejected: FileUploadRejection[] = [];\n\n  const currentFiles = multiple ? [...existingFiles] : [];\n\n  let totalSize = currentFiles.reduce((total, file) => total + file.size, 0);\n\n  let fileCount = currentFiles.length;\n\n  incomingFiles.forEach((file) => {\n    const validationError = validateFile(file, options);\n\n    if (validationError) {\n      rejected.push(validationError);\n      return;\n    }\n\n    if (!multiple && accepted.length > 0) {\n      rejected.push(\n        createRejection(\n          file,\n          \"too-many-files\",\n          \"Only one file can be selected.\",\n        ),\n      );\n      return;\n    }\n\n    if (multiple && maxFiles !== undefined && fileCount >= maxFiles) {\n      rejected.push(\n        createRejection(\n          file,\n          \"too-many-files\",\n          `You can select a maximum of ${maxFiles} files.`,\n        ),\n      );\n      return;\n    }\n\n    if (maxTotalSize !== undefined && totalSize + file.size > maxTotalSize) {\n      rejected.push(\n        createRejection(\n          file,\n          \"total-too-large\",\n          `The combined file size exceeds ${formatFileSize(maxTotalSize)}.`,\n        ),\n      );\n      return;\n    }\n\n    accepted.push(file);\n\n    totalSize += file.size;\n    fileCount++;\n  });\n\n  return { accepted, rejected };\n};\n\nexport {\n  formatFileSize,\n  matchesMimeType,\n  createRejection,\n  validateFile,\n  validateFiles,\n};\n\nexport type { FileValidationOptions, FileValidationResult };\n"],"mappings":";AAkBA,MAAM,kBAAkB,UAA0B;CAChD,IAAI,UAAU,GAAG,OAAO;CAExB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GAAG,OAAO;CAEjD,MAAM,QAAQ;EAAC;EAAK;EAAM;EAAM;EAAM;CAAI;CAE1C,MAAM,QAAQ,KAAK,IACjB,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,GAC3C,MAAM,SAAS,CACjB;CAEA,MAAM,QAAQ,QAAQ,QAAQ;CAE9B,OAAO,GAAG,SAAS,MAAM,UAAU,IAAI,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC,EAAE,GAAG,MAAM;AACtF;AAEA,MAAM,mBACJ,UACA,kBACY;CACZ,MAAM,iBAAiB,SAAS,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,YAAY;CAEjE,IAAI,CAAC,gBAAgB,OAAO;CAE5B,OAAO,cAAc,MAAM,iBAAiB;EAC1C,MAAM,WAAW,aAAa,KAAK,CAAC,CAAC,YAAY;EAEjD,IAAI,CAAC,UAAU,OAAO;EAEtB,IAAI,SAAS,SAAS,IAAI,GACxB,OAAO,eAAe,WAAW,SAAS,MAAM,GAAG,EAAE,CAAC;EAGxD,OAAO,mBAAmB;CAC5B,CAAC;AACH;AAEA,MAAM,mBACJ,MACA,MACA,aACyB;CACzB;CACA;CACA;AACF;AAEA,MAAM,gBACJ,MACA,YACoC;CACpC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAgB;CAErC,IAAI,OAAO,SAAS,KAAK,CAAC,gBAAgB,KAAK,MAAM,MAAM,GACzD,OAAO,gBAAgB,MAAM,aAAa,gCAAgC;CAG5E,IAAI,gBAAgB,KAAA,KAAa,KAAK,OAAO,aAC3C,OAAO,gBACL,MACA,kBACA,oCAAoC,eAAe,WAAW,EAAE,EAClE;AAIJ;AAEA,MAAM,iBACJ,eACA,eACA,UAAiC,CAAC,MACT;CACzB,MAAM,EAAE,WAAW,OAAO,UAAU,iBAAiB;CAErD,MAAM,WAAmB,CAAC;CAC1B,MAAM,WAAkC,CAAC;CAEzC,MAAM,eAAe,WAAW,CAAC,GAAG,aAAa,IAAI,CAAC;CAEtD,IAAI,YAAY,aAAa,QAAQ,OAAO,SAAS,QAAQ,KAAK,MAAM,CAAC;CAEzE,IAAI,YAAY,aAAa;CAE7B,cAAc,SAAS,SAAS;EAC9B,MAAM,kBAAkB,aAAa,MAAM,OAAO;EAElD,IAAI,iBAAiB;GACnB,SAAS,KAAK,eAAe;GAC7B;EACF;EAEA,IAAI,CAAC,YAAY,SAAS,SAAS,GAAG;GACpC,SAAS,KACP,gBACE,MACA,kBACA,gCACF,CACF;GACA;EACF;EAEA,IAAI,YAAY,aAAa,KAAA,KAAa,aAAa,UAAU;GAC/D,SAAS,KACP,gBACE,MACA,kBACA,+BAA+B,SAAS,QAC1C,CACF;GACA;EACF;EAEA,IAAI,iBAAiB,KAAA,KAAa,YAAY,KAAK,OAAO,cAAc;GACtE,SAAS,KACP,gBACE,MACA,mBACA,kCAAkC,eAAe,YAAY,EAAE,EACjE,CACF;GACA;EACF;EAEA,SAAS,KAAK,IAAI;EAElB,aAAa,KAAK;EAClB;CACF,CAAC;CAED,OAAO;EAAE;EAAU;CAAS;AAC9B"}