refactor(FileField): rename from FileUpload and change types

apps/docs/src/components/navigation.tsx

@@ -47,6 +47,11 @@ export function Navigation(props: NavigationProps) {
 															updated
 														</span>
 													</Match>
+													<Match when={link.status === "unreleased"}>
+														<span class="inline-flex items-center font-medium leading-none uppercase px-1.5 py-1 text-[12px] rounded text-gray-400 bg-gray-800">
+															unreleased
+														</span>
+													</Match>
 												</Switch>
 											</a>
 										</li>

apps/docs/src/examples/badge.module.css

@@ -1,8 +1,8 @@
 .badge {
 	display: inline-block;
-	padding: 0.2em 0.4em;
+	padding: 0.2em 0.6em;
 	background-color: hsl(201 96% 32%);
 	color: white;
-	border-radius: 12px;
+	border-radius: 0.5rem;
 	font-size: 0.875rem;
 }

apps/docs/src/examples/badge.tsx

@@ -4,7 +4,7 @@ import style from "./badge.module.css";
 
 export function BasicExample() {
 	return (
-		<Badge class={style.badge} textValue="Unread messages: 5">
+		<Badge class={style.badge} textValue="5 unread messages">
 			5 messages
 		</Badge>
 	);

apps/docs/src/examples/file-upload.module.css → apps/docs/src/examples/file-field.module.css

@@ -1,4 +1,4 @@
-.fileUpload {
+.FileField {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,14 +8,14 @@
 	row-gap: 5px;
 }
 
-.fileUpload__label {
+.FileField__label {
 	color: white;
 	font-size: 14px;
 	font-weight: 500;
 	user-select: none;
 }
 
-.fileUpload__dropzone {
+.FileField__dropzone {
 	padding: 20px;
 	display: flex;
 	flex-direction: column;
@@ -29,21 +29,21 @@
 	border-radius: 6px;
 }
 
-.fileUpload__trigger {
+.FileField__trigger {
 	background-color: hsl(201 96% 32%);
 	color: white;
 	padding: 5px 10px;
 	border-radius: 4px;
 }
 
-.fileUpload__itemGroup {
+.FileField__itemGroup {
 	display: flex;
 	flex-direction: column;
 	gap: 3px;
 	width: 100%;
 }
 
-.fileUpload__item {
+.FileField__item {
 	width: 100%;
 	display: grid;
 	padding: 16px;
@@ -53,35 +53,33 @@
 	grid-template-areas:
 		"preview name delete"
 		"preview size delete";
-	column-gap: 5px;
 	border: 1px solid rgb(42, 42, 40);
-	padding: 10px;
 }
 
-.fileUpload__itemPreview {
+.FileField__itemPreview {
 	grid-area: preview;
 }
 
-.fileUpload__itemPreviewImage {
+.FileField__itemPreviewImage {
 	width: 50px;
 	object-fit: scale-down;
 	height: auto;
 	aspect-ratio: 1;
 }
 
-.fileUpload__itemName {
+.FileField__itemName {
 	grid-area: name;
 	font-size: 14px;
 	color: #fff;
 }
 
-.fileUpload__itemSize {
+.FileField__itemSize {
 	grid-area: size;
 	font-size: 14px;
 	color: rgb(181, 179, 173);
 }
 
-.fileUpload__itemDeleteTrigger {
+.FileField__itemDeleteTrigger {
 	grid-area: delete;
 	cursor: pointer;
 	background-color: #a23434;
@@ -101,7 +99,7 @@
 	row-gap: 5px;
 }
 
-.formContainer > .fileUpload__dropzone {
+.formContainer > .FileField__dropzone {
 	min-height: 200px;
 }
 

apps/docs/src/examples/file-field.tsx

@@ -0,0 +1,103 @@
+import { FileField } from "@kobalte/core/file-field";
+
+import style from "./file-field.module.css";
+
+export function BasicExample() {
+	return (
+		<FileField
+			class={style.FileField}
+			multiple
+			maxFiles={5}
+			onFileAccept={(data) => console.log("data", data)}
+			onFileReject={(data) => console.log("data", data)}
+			onFileChange={(data) => console.log("data", data)}
+		>
+			<FileField.Label class={style.FileField__label}>
+				File Upload
+			</FileField.Label>
+			<FileField.Dropzone class={style.FileField__dropzone}>
+				Drop your files here...
+				<FileField.Trigger class={style.FileField__trigger}>
+					Choose files!
+				</FileField.Trigger>
+			</FileField.Dropzone>
+			<FileField.HiddenInput />
+			<FileField.ItemList class={style.FileField__itemGroup}>
+				{(file) => (
+					<FileField.Item class={style.FileField__item}>
+						<FileField.ItemPreviewImage
+							class={style.FileField__itemPreviewImage}
+						/>
+						<FileField.ItemName class={style.FileField__itemName} />
+						<FileField.ItemSize class={style.FileField__itemSize} />
+						<FileField.ItemDeleteTrigger
+							class={style.FileField__itemDeleteTrigger}
+						>
+							Delete
+						</FileField.ItemDeleteTrigger>
+					</FileField.Item>
+				)}
+			</FileField.ItemList>
+		</FileField>
+	);
+}
+
+export function HTMLFormExample() {
+	let formRef: HTMLFormElement | undefined;
+
+	const onSubmit = (event: SubmitEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const formData = new FormData(formRef);
+		const uploadedFiles = formData.getAll("uploaded-files");
+
+		const fileNames = uploadedFiles
+			.filter((file): file is File => file instanceof File)
+			.map((file) => file.name);
+
+		alert(JSON.stringify(fileNames, null, 2));
+	};
+
+	return (
+		<form class={style.formContainer} ref={formRef} onSubmit={onSubmit}>
+			<FileField
+				multiple
+				maxFiles={5}
+				onFileAccept={(data) => console.log("data", data)}
+				onFileReject={(data) => console.log("data", data)}
+				onFileChange={(data) => console.log("data", data)}
+			>
+				<FileField.Label class={style.FileField__label}>
+					File Upload
+				</FileField.Label>
+				<FileField.Dropzone class={style.FileField__dropzone}>
+					Drop your files here...
+					<FileField.Trigger class={style.FileField__trigger}>
+						Choose files!
+					</FileField.Trigger>
+				</FileField.Dropzone>
+				<FileField.HiddenInput name="uploaded-files" />
+				<FileField.ItemList class={style.FileField__itemGroup}>
+					{(file) => (
+						<FileField.Item class={style.FileField__item}>
+							<FileField.ItemPreviewImage
+								class={style.FileField__itemPreviewImage}
+							/>
+							<FileField.ItemName class={style.FileField__itemName} />
+							<FileField.ItemSize class={style.FileField__itemSize} />
+							<FileField.ItemDeleteTrigger
+								class={style.FileField__itemDeleteTrigger}
+							>
+								Delete
+							</FileField.ItemDeleteTrigger>
+						</FileField.Item>
+					)}
+				</FileField.ItemList>
+			</FileField>
+			<button type="submit" class={style["submit-btn"]}>
+				Submit Files
+			</button>
+		</form>
+	);
+}

apps/docs/src/model/navigation.ts

@@ -1,7 +1,7 @@
 interface NavLink {
 	title: string;
 	href: string;
-	status?: "new" | "updated";
+	status?: "new" | "updated" | "unreleased";
 }
 
 export interface NavSection {