@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/dropzone.js

@@ -1,490 +1,351 @@
-// src/components/ui/dropzone.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { UploadCloud } from "lucide-react";
-import {
-  createContext,
-  use
-} from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/lib/use-file-picker.ts
-import {
-  useCallback,
-  useRef,
-  useState
-} from "react";
-function useFilePicker({
-  accept = "*",
-  disabled = false,
-  maxFiles = Number.POSITIVE_INFINITY,
-  maxSize = Number.POSITIVE_INFINITY,
-  multiple = false,
-  onFilesAccepted,
-  onFilesChange,
-  onFilesRejected
-} = {}) {
-  const inputRef = useRef(null);
-  const dragDepthRef = useRef(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const pickFiles = useCallback(
-    (files) => {
-      const incomingFiles = Array.from(files);
-      const limit = multiple ? maxFiles : 1;
-      const acceptedFiles = [];
-      const rejectedFiles = [];
-      if (incomingFiles.length === 0 || disabled) {
-        return { acceptedFiles, rejectedFiles };
-      }
-      for (const [index, file] of incomingFiles.entries()) {
-        const errors = [];
-        if (index >= limit) {
-          errors.push({
-            code: "too-many-files",
-            message: multiple ? `You can only select up to ${limit} files.` : "You can only select one file."
-          });
-        } else {
-          errors.push(...validateFile(file, { accept, maxSize }));
-        }
-        if (errors.length > 0) {
-          rejectedFiles.push({ file, errors });
-          continue;
-        }
-        acceptedFiles.push(file);
-      }
-      const result = { acceptedFiles, rejectedFiles };
-      if (acceptedFiles.length > 0) {
-        onFilesAccepted?.(acceptedFiles);
-      }
-      if (rejectedFiles.length > 0) {
-        onFilesRejected?.(rejectedFiles);
-      }
-      onFilesChange?.(result);
-      if (inputRef.current) {
-        inputRef.current.value = "";
-      }
-      return result;
-    },
-    [
-      accept,
-      disabled,
-      maxFiles,
-      maxSize,
-      multiple,
-      onFilesAccepted,
-      onFilesChange,
-      onFilesRejected
-    ]
-  );
-  const handleFileChange = useCallback(
-    (event) => {
-      if (event.target.files) {
-        pickFiles(event.target.files);
-      }
-    },
-    [pickFiles]
-  );
-  const openFileDialog = useCallback(() => {
-    if (disabled) return;
-    inputRef.current?.click();
-  }, [disabled]);
-  const handleDragEnter = useCallback(
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (disabled) return;
-      dragDepthRef.current += 1;
-      setIsDragging(true);
-    },
-    [disabled]
-  );
-  const handleDragLeave = useCallback(
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (disabled) return;
-      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
-      if (dragDepthRef.current === 0) {
-        setIsDragging(false);
-      }
-    },
-    [disabled]
-  );
-  const handleDragOver = useCallback((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  const handleDrop = useCallback(
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      dragDepthRef.current = 0;
-      setIsDragging(false);
-      if (event.dataTransfer.files.length > 0) {
-        pickFiles(event.dataTransfer.files);
-      }
-    },
-    [pickFiles]
-  );
-  const getInputProps = useCallback(
-    (props = {}) => {
-      const { onChange, ref, ...inputProps } = props;
-      return {
-        ...inputProps,
-        type: "file",
-        accept: inputProps.accept ?? accept,
-        disabled: inputProps.disabled ?? disabled,
-        multiple: inputProps.multiple ?? multiple,
-        ref: (node) => {
-          inputRef.current = node;
-          assignRef(ref, node);
-        },
-        onChange: (event) => {
-          onChange?.(event);
-          if (!event.defaultPrevented) {
-            handleFileChange(event);
-          }
-        }
-      };
-    },
-    [accept, disabled, handleFileChange, multiple]
-  );
-  return {
-    getInputProps,
-    handleDragEnter,
-    handleDragLeave,
-    handleDragOver,
-    handleDrop,
-    handleFileChange,
-    inputRef,
-    isDragging,
-    openFileDialog,
-    pickFiles
-  };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useCallback, useRef, useState } from "react";
+//#region src/lib/use-file-picker.ts
+function useFilePicker({ accept = "*", disabled = false, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, multiple = false, onFilesAccepted, onFilesChange, onFilesRejected } = {}) {
+	const inputRef = useRef(null);
+	const dragDepthRef = useRef(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const pickFiles = useCallback((files) => {
+		const incomingFiles = Array.from(files);
+		const limit = multiple ? maxFiles : 1;
+		const acceptedFiles = [];
+		const rejectedFiles = [];
+		if (incomingFiles.length === 0 || disabled) return {
+			acceptedFiles,
+			rejectedFiles
+		};
+		for (const [index, file] of incomingFiles.entries()) {
+			const errors = [];
+			if (index >= limit) errors.push({
+				code: "too-many-files",
+				message: multiple ? `You can only select up to ${limit} files.` : "You can only select one file."
+			});
+			else errors.push(...validateFile(file, {
+				accept,
+				maxSize
+			}));
+			if (errors.length > 0) {
+				rejectedFiles.push({
+					file,
+					errors
+				});
+				continue;
+			}
+			acceptedFiles.push(file);
+		}
+		const result = {
+			acceptedFiles,
+			rejectedFiles
+		};
+		if (acceptedFiles.length > 0) onFilesAccepted?.(acceptedFiles);
+		if (rejectedFiles.length > 0) onFilesRejected?.(rejectedFiles);
+		onFilesChange?.(result);
+		if (inputRef.current) inputRef.current.value = "";
+		return result;
+	}, [
+		accept,
+		disabled,
+		maxFiles,
+		maxSize,
+		multiple,
+		onFilesAccepted,
+		onFilesChange,
+		onFilesRejected
+	]);
+	const handleFileChange = useCallback((event) => {
+		if (event.target.files) pickFiles(event.target.files);
+	}, [pickFiles]);
+	const openFileDialog = useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const handleDragEnter = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current += 1;
+		setIsDragging(true);
+	}, [disabled]);
+	const handleDragLeave = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setIsDragging(false);
+	}, [disabled]);
+	const handleDragOver = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	}, []);
+	const handleDrop = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dragDepthRef.current = 0;
+		setIsDragging(false);
+		if (event.dataTransfer.files.length > 0) pickFiles(event.dataTransfer.files);
+	}, [pickFiles]);
+	return {
+		getInputProps: useCallback((props = {}) => {
+			const { onChange, ref, ...inputProps } = props;
+			return {
+				...inputProps,
+				type: "file",
+				accept: inputProps.accept ?? accept,
+				disabled: inputProps.disabled ?? disabled,
+				multiple: inputProps.multiple ?? multiple,
+				ref: (node) => {
+					inputRef.current = node;
+					assignRef(ref, node);
+				},
+				onChange: (event) => {
+					onChange?.(event);
+					if (!event.defaultPrevented) handleFileChange(event);
+				}
+			};
+		}, [
+			accept,
+			disabled,
+			handleFileChange,
+			multiple
+		]),
+		handleDragEnter,
+		handleDragLeave,
+		handleDragOver,
+		handleDrop,
+		handleFileChange,
+		inputRef,
+		isDragging,
+		openFileDialog,
+		pickFiles
+	};
 }
 function validateFile(file, options = {}) {
-  const { accept = "*", maxSize = Number.POSITIVE_INFINITY } = options;
-  const errors = [];
-  if (file.size > maxSize) {
-    errors.push({
-      code: "file-too-large",
-      message: `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
-    });
-  }
-  if (!isAcceptedFile(file, accept)) {
-    errors.push({
-      code: "file-invalid-type",
-      message: `File "${file.name}" is not an accepted file type.`
-    });
-  }
-  return errors;
+	const { accept = "*", maxSize = Number.POSITIVE_INFINITY } = options;
+	const errors = [];
+	if (file.size > maxSize) errors.push({
+		code: "file-too-large",
+		message: `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
+	});
+	if (!isAcceptedFile(file, accept)) errors.push({
+		code: "file-invalid-type",
+		message: `File "${file.name}" is not an accepted file type.`
+	});
+	return errors;
 }
 function isAcceptedFile(file, accept = "*") {
-  if (accept === "*" || accept.trim() === "") return true;
-  const acceptedTypes = accept.split(",").map((type) => type.trim().toLowerCase()).filter(Boolean);
-  if (acceptedTypes.length === 0) return true;
-  const fileType = file.type.toLowerCase();
-  const fileExtension = getFileExtension(file.name);
-  return acceptedTypes.some((acceptedType) => {
-    if (acceptedType.startsWith(".")) {
-      return fileExtension === acceptedType;
-    }
-    if (acceptedType.endsWith("/*")) {
-      return fileType.startsWith(acceptedType.slice(0, -1));
-    }
-    return fileType === acceptedType;
-  });
+	if (accept === "*" || accept.trim() === "") return true;
+	const acceptedTypes = accept.split(",").map((type) => type.trim().toLowerCase()).filter(Boolean);
+	if (acceptedTypes.length === 0) return true;
+	const fileType = file.type.toLowerCase();
+	const fileExtension = getFileExtension(file.name);
+	return acceptedTypes.some((acceptedType) => {
+		if (acceptedType.startsWith(".")) return fileExtension === acceptedType;
+		if (acceptedType.endsWith("/*")) return fileType.startsWith(acceptedType.slice(0, -1));
+		return fileType === acceptedType;
+	});
 }
 function formatBytes(bytes, decimals = 2) {
-  if (bytes === 0) return "0 Bytes";
-  if (!Number.isFinite(bytes)) return "unlimited";
-  const unit = 1024;
-  const precision = Math.max(0, decimals);
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB"];
-  const sizeIndex = Math.min(
-    Math.floor(Math.log(bytes) / Math.log(unit)),
-    sizes.length - 1
-  );
-  return `${Number.parseFloat((bytes / unit ** sizeIndex).toFixed(precision))} ${sizes[sizeIndex]}`;
+	if (bytes === 0) return "0 Bytes";
+	if (!Number.isFinite(bytes)) return "unlimited";
+	const unit = 1024;
+	const precision = Math.max(0, decimals);
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB",
+		"TB",
+		"PB"
+	];
+	const sizeIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(unit)), sizes.length - 1);
+	return `${Number.parseFloat((bytes / unit ** sizeIndex).toFixed(precision))} ${sizes[sizeIndex]}`;
 }
 function getFileExtension(fileName) {
-  const extension = fileName.toLowerCase().split(".").pop();
-  return extension && extension !== fileName.toLowerCase() ? `.${extension}` : "";
+	const extension = fileName.toLowerCase().split(".").pop();
+	return extension && extension !== fileName.toLowerCase() ? `.${extension}` : "";
 }
 function assignRef(ref, value) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  ref.current = value;
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
 }
-
-// src/components/ui/dropzone.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var DropzoneContext = createContext(null);
+//#endregion
+//#region src/dropzone.tsx
+const DropzoneContext = createContext(null);
 function useDropzoneContext() {
-  const ctx = use(DropzoneContext);
-  if (!ctx) {
-    throw new Error(
-      "Dropzone compound components must be rendered inside <Dropzone>."
-    );
-  }
-  return ctx;
+	const ctx = use(DropzoneContext);
+	if (!ctx) throw new Error("Dropzone compound components must be rendered inside <Dropzone>.");
+	return ctx;
 }
-function Dropzone({
-  children,
-  className,
-  disabled,
-  ...options
-}) {
-  const {
-    isDragging,
-    openFileDialog,
-    getInputProps,
-    handleDragEnter,
-    handleDragLeave,
-    handleDragOver,
-    handleDrop
-  } = useFilePicker({ ...options, disabled });
-  return /* @__PURE__ */ jsx(
-    DropzoneContext.Provider,
-    {
-      value: {
-        isDragging,
-        isDisabled: disabled ?? false,
-        openFileDialog,
-        getInputProps,
-        handleDragEnter,
-        handleDragLeave,
-        handleDragOver,
-        handleDrop
-      },
-      children: /* @__PURE__ */ jsx("div", { "data-slot": "dropzone", className: cn("relative", className), children })
-    }
-  );
+/**
+* Context provider that owns the `useFilePicker` instance.
+* Wrap `<DropzoneArea>` and `<DropzoneInput>` (plus any content helpers)
+* inside this component.
+*
+* @example
+* ```tsx
+* <Dropzone accept="image/*" multiple maxFiles={5} onFilesAccepted={handleFiles}>
+*   <DropzoneArea>
+*     <DropzoneIcon />
+*     <DropzoneTitle>Choose a file or drag & drop</DropzoneTitle>
+*     <DropzoneDescription>JPEG, PNG – up to 2 MB</DropzoneDescription>
+*     <DropzoneTrigger />
+*   </DropzoneArea>
+*   <DropzoneInput />
+* </Dropzone>
+* ```
+*/
+function Dropzone({ children, className, disabled, ...options }) {
+	const { isDragging, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop } = useFilePicker({
+		...options,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
+		value: {
+			isDragging,
+			isDisabled: disabled ?? false,
+			openFileDialog,
+			getInputProps,
+			handleDragEnter,
+			handleDragLeave,
+			handleDragOver,
+			handleDrop
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "dropzone",
+			className: cn("relative", className),
+			children
+		})
+	});
 }
-function DropzoneArea({
-  children,
-  className,
-  label = "Upload files. Click to browse, or drag and drop files here.",
-  ...props
-}) {
-  const {
-    isDragging,
-    isDisabled,
-    openFileDialog,
-    handleDragEnter,
-    handleDragLeave,
-    handleDragOver,
-    handleDrop
-  } = useDropzoneContext();
-  function handleKeyDown(e) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      openFileDialog();
-    }
-  }
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: The dropzone contains block-level compound content and owns drag events.
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-slot": "dropzone-area",
-        "data-dragging": isDragging ? "true" : void 0,
-        "data-disabled": isDisabled ? "true" : void 0,
-        role: "button",
-        tabIndex: isDisabled ? -1 : 0,
-        "aria-label": label,
-        "aria-disabled": isDisabled,
-        onClick: isDisabled ? void 0 : openFileDialog,
-        onKeyDown: isDisabled ? void 0 : handleKeyDown,
-        onDragEnter: isDisabled ? void 0 : handleDragEnter,
-        onDragLeave: isDisabled ? void 0 : handleDragLeave,
-        onDragOver: isDisabled ? void 0 : handleDragOver,
-        onDrop: isDisabled ? void 0 : handleDrop,
-        className: cn(
-          // Layout & base
-          "flex min-h-48 w-full cursor-pointer flex-col items-center justify-center rounded-xl border p-8 text-center transition-colors duration-150 select-none",
-          // Default colours (design tokens)
-          "border-line bg-surface-brand-subtle",
-          // Focus ring – matches other interactive controls in the system
-          "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/20 focus-visible:border-ring",
-          // Dragging variant
-          "data-[dragging=true]:border-dashed data-[dragging=true]:border-line-focus data-[dragging=true]:bg-surface-brand/10",
-          // Disabled variant
-          "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: isDragging ? "Drop files to upload." : "" })
-        ]
-      }
-    )
-  );
+/**
+* The visual, interactive drop zone.
+*
+* - Behaves as a `button` (role, tabIndex, Enter/Space keyboard support).
+* - Announces drag-state changes to screen readers via a live region.
+* - Applies design-token-based styles and reacts to `data-dragging` /
+*   `data-disabled` for visual feedback.
+*/
+function DropzoneArea({ children, className, label = "Upload files. Click to browse, or drag and drop files here.", ...props }) {
+	const { isDragging, isDisabled, openFileDialog, handleDragEnter, handleDragLeave, handleDragOver, handleDrop } = useDropzoneContext();
+	function handleKeyDown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			openFileDialog();
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dropzone-area",
+		"data-dragging": isDragging ? "true" : void 0,
+		"data-disabled": isDisabled ? "true" : void 0,
+		role: "button",
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-label": label,
+		"aria-disabled": isDisabled,
+		onClick: isDisabled ? void 0 : openFileDialog,
+		onKeyDown: isDisabled ? void 0 : handleKeyDown,
+		onDragEnter: isDisabled ? void 0 : handleDragEnter,
+		onDragLeave: isDisabled ? void 0 : handleDragLeave,
+		onDragOver: isDisabled ? void 0 : handleDragOver,
+		onDrop: isDisabled ? void 0 : handleDrop,
+		className: cn("flex min-h-48 w-full cursor-pointer flex-col items-center justify-center rounded-xl border p-8 text-center transition-colors duration-150 select-none", "border-line bg-surface-brand-subtle", "focus-visible:border-line-focus focus-visible:ring-2 focus-visible:ring-line-focus/35 focus-visible:outline-none", "data-[dragging=true]:border-dashed data-[dragging=true]:border-line-focus data-[dragging=true]:bg-surface-brand/10", "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: isDragging ? "Drop files to upload." : ""
+		})]
+	});
 }
+/**
+* The hidden `<input type="file">` that backs the drop zone.
+* Rendered off-screen (not `display:none`) so it remains accessible.
+* Place it as a sibling to `<DropzoneArea>` inside `<Dropzone>`.
+*/
 function DropzoneInput({ className, ...props }) {
-  const { getInputProps } = useDropzoneContext();
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ...getInputProps({
-        // sr-only keeps it in the a11y tree without being visible
-        className: cn("sr-only", className),
-        // Prevent it from receiving keyboard focus independently
-        tabIndex: -1,
-        ...props
-      })
-    }
-  );
+	const { getInputProps } = useDropzoneContext();
+	return /* @__PURE__ */ jsx("input", { ...getInputProps({
+		className: cn("sr-only", className),
+		tabIndex: -1,
+		...props
+	}) });
 }
-function useDropzoneStateLabel({
-  children,
-  disabledLabel,
-  draggingLabel,
-  idleLabel
-}) {
-  const { isDragging, isDisabled } = useDropzoneContext();
-  if (isDisabled && disabledLabel !== void 0) {
-    return disabledLabel;
-  }
-  if (isDragging && draggingLabel !== void 0) {
-    return draggingLabel;
-  }
-  return idleLabel ?? children;
+function useDropzoneStateLabel({ children, disabledLabel, draggingLabel, idleLabel }) {
+	const { isDragging, isDisabled } = useDropzoneContext();
+	if (isDisabled && disabledLabel !== void 0) return disabledLabel;
+	if (isDragging && draggingLabel !== void 0) return draggingLabel;
+	return idleLabel ?? children;
 }
-function DropzoneIcon({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dropzone-icon",
-      "aria-hidden": "true",
-      className: cn(
-        "mb-4 flex size-11 shrink-0 items-center justify-center rounded-full",
-        // Solid brand fill with an inset ring for depth
-        "bg-surface-brand text-fg-on-brand ring-1 ring-inset ring-white/10",
-        className
-      ),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(UploadCloud, { className: "size-5" })
-    }
-  );
+/**
+* A centred, brand-coloured icon container pre-populated with an upload cloud
+* icon. Pass `children` to swap the icon.
+*/
+function DropzoneIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropzone-icon",
+		"aria-hidden": "true",
+		className: cn("mb-4 flex size-11 shrink-0 items-center justify-center rounded-full", "bg-surface-brand text-fg-on-brand ring-1 ring-fg-on-brand/10 ring-inset", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(UploadCloud, { className: "size-5" })
+	});
 }
-function DropzoneTitle({
-  className,
-  children,
-  disabledLabel,
-  draggingLabel,
-  idleLabel,
-  ...props
-}) {
-  const label = useDropzoneStateLabel({
-    children,
-    disabledLabel,
-    draggingLabel,
-    idleLabel
-  });
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "dropzone-title",
-      className: cn(
-        "text-lg font-semibold leading-snug text-fg-primary",
-        className
-      ),
-      ...props,
-      children: label
-    }
-  );
+/**
+* Primary heading text inside the drop zone.
+*/
+function DropzoneTitle({ className, children, disabledLabel, draggingLabel, idleLabel, ...props }) {
+	const label = useDropzoneStateLabel({
+		children,
+		disabledLabel,
+		draggingLabel,
+		idleLabel
+	});
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "dropzone-title",
+		className: cn("text-gdt-md font-semibold leading-snug text-fg-primary", className),
+		...props,
+		children: label
+	});
 }
-function DropzoneDescription({
-  className,
-  children,
-  disabledLabel,
-  draggingLabel,
-  idleLabel,
-  ...props
-}) {
-  const label = useDropzoneStateLabel({
-    children,
-    disabledLabel,
-    draggingLabel,
-    idleLabel
-  });
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "dropzone-description",
-      className: cn("mt-1 text-sm text-fg-muted", className),
-      ...props,
-      children: label
-    }
-  );
+/**
+* Secondary descriptive text inside the drop zone (file-type hints, size
+* limits, etc.).
+*/
+function DropzoneDescription({ className, children, disabledLabel, draggingLabel, idleLabel, ...props }) {
+	const label = useDropzoneStateLabel({
+		children,
+		disabledLabel,
+		draggingLabel,
+		idleLabel
+	});
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "dropzone-description",
+		className: cn("mt-1 text-gdt-sm text-fg-secondary", className),
+		...props,
+		children: label
+	});
 }
-function DropzoneTrigger({
-  className,
-  children = "Browse File",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "dropzone-trigger",
-      "aria-hidden": "true",
-      className: cn(
-        "mt-5 inline-flex h-8 shrink-0 items-center justify-center rounded-lg px-4",
-        "bg-primary text-sm font-medium text-primary-foreground",
-        "transition-colors duration-150",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
+/**
+* A decorative "Browse File" pill that visually suggests the click action.
+*
+* This element is `aria-hidden` because the surrounding `<DropzoneArea>`
+* already exposes a labelled `button` role to assistive technologies.
+* The pill is purely a visual affordance.
+*/
+function DropzoneTrigger({ className, children = "Browse File", ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropzone-trigger",
+		"aria-hidden": "true",
+		className: cn("mt-5 inline-flex h-8 shrink-0 items-center justify-center rounded-full px-4", "bg-action-primary text-gdt-sm font-medium text-fg-on-brand", "transition-colors duration-150", className),
+		...props,
+		children
+	});
 }
-export {
-  Dropzone,
-  DropzoneArea,
-  DropzoneDescription,
-  DropzoneIcon,
-  DropzoneInput,
-  DropzoneTitle,
-  DropzoneTrigger,
-  useDropzoneContext
-};
-//# sourceMappingURL=dropzone.js.map
+//#endregion
+export { Dropzone, DropzoneArea, DropzoneDescription, DropzoneIcon, DropzoneInput, DropzoneTitle, DropzoneTrigger, useDropzoneContext };