From 29983db3d41cdb590a0743444917f1d55a414b2f Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Tue, 29 Aug 2023 21:07:13 +0100
Subject: [PATCH 1/3] chore:  Rename `file-upload` to `file-picker`

---
 .changeset/big-bears-study.md                 |  5 +
 .xstate/file-picker.js                        | 85 ++++++++++++++++
 examples/next-ts/package.json                 |  4 +-
 .../{file-upload.tsx => file-picker.tsx}      | 12 +--
 examples/nuxt-ts/package.json                 |  4 +-
 .../{file-upload.vue => file-picker.vue}      | 12 +--
 examples/shadow-dom/package.json              |  4 +-
 examples/solid-ts/package.json                |  4 +-
 .../{file-upload.tsx => file-picker.tsx}      | 12 +--
 examples/solid-ts/src/routes.ts               |  2 +-
 examples/vue-ts/package.json                  |  4 +-
 examples/vue-ts/src/pages/file-picker.tsx     | 58 +++++++++++
 examples/vue-ts/src/pages/file-upload.tsx     | 14 +--
 examples/vue-ts/src/routes.ts                 |  2 +-
 .../{file-upload.tsx => file-picker.tsx}      |  2 +-
 .../anatomy-icons/src/components/index.ts     |  4 +-
 packages/docs/api.json                        |  4 +-
 .../{file-upload => file-picker}/CHANGELOG.md |  2 +-
 .../{file-upload => file-picker}/README.md    |  8 +-
 .../{file-upload => file-picker}/package.json | 10 +-
 .../src/file-picker.anatomy.ts}               |  2 +-
 .../src/file-picker.connect.ts}               |  8 +-
 .../file-picker/src/file-picker.dom.ts        | 11 +++
 .../src/file-picker.machine.ts}               |  8 +-
 .../src/file-picker.types.ts}                 |  0
 .../src/file-picker.utils.ts}                 |  2 +-
 packages/machines/file-picker/src/index.ts    |  4 +
 .../tsconfig.json                             |  0
 .../file-upload/src/file-upload.dom.ts        | 11 ---
 packages/machines/file-upload/src/index.ts    |  4 -
 pnpm-lock.yaml                                | 26 ++---
 shared/src/controls.ts                        |  2 +-
 shared/src/routes.ts                          |  2 +-
 shared/src/style.css                          |  8 +-
 .../{file-upload.tsx => file-picker.tsx}      |  8 +-
 website/components/showcase.tsx               |  6 +-
 .../{file-upload.mdx => file-picker.mdx}      | 97 +++++++++----------
 .../react/file-picker/installation.mdx        |  5 +
 .../{file-upload => file-picker}/usage.mdx    |  8 +-
 .../react/file-upload/installation.mdx        |  5 -
 .../solid/file-picker/installation.mdx        |  5 +
 .../{file-upload => file-picker}/usage.mdx    |  8 +-
 .../solid/file-upload/installation.mdx        |  5 -
 .../vue-jsx/file-picker/installation.mdx      |  5 +
 .../{file-upload => file-picker}/usage.mdx    | 10 +-
 .../vue-jsx/file-upload/installation.mdx      |  5 -
 .../vue-sfc/file-picker/installation.mdx      |  5 +
 .../{file-upload => file-picker}/usage.mdx    |  6 +-
 .../vue-sfc/file-upload/installation.mdx      |  5 -
 website/package.json                          |  4 +-
 website/sidebar.config.ts                     |  2 +-
 51 files changed, 338 insertions(+), 191 deletions(-)
 create mode 100644 .changeset/big-bears-study.md
 create mode 100644 .xstate/file-picker.js
 rename examples/next-ts/pages/{file-upload.tsx => file-picker.tsx} (78%)
 rename examples/nuxt-ts/pages/{file-upload.vue => file-picker.vue} (74%)
 rename examples/solid-ts/src/pages/{file-upload.tsx => file-picker.tsx} (80%)
 create mode 100644 examples/vue-ts/src/pages/file-picker.tsx
 rename packages/anatomy-icons/src/components/{file-upload.tsx => file-picker.tsx} (99%)
 rename packages/machines/{file-upload => file-picker}/CHANGELOG.md (99%)
 rename packages/machines/{file-upload => file-picker}/README.md (68%)
 rename packages/machines/{file-upload => file-picker}/package.json (89%)
 rename packages/machines/{file-upload/src/file-upload.anatomy.ts => file-picker/src/file-picker.anatomy.ts} (68%)
 rename packages/machines/{file-upload/src/file-upload.connect.ts => file-picker/src/file-picker.connect.ts} (95%)
 create mode 100644 packages/machines/file-picker/src/file-picker.dom.ts
 rename packages/machines/{file-upload/src/file-upload.machine.ts => file-picker/src/file-picker.machine.ts} (96%)
 rename packages/machines/{file-upload/src/file-upload.types.ts => file-picker/src/file-picker.types.ts} (100%)
 rename packages/machines/{file-upload/src/file-upload.utils.ts => file-picker/src/file-picker.utils.ts} (97%)
 create mode 100644 packages/machines/file-picker/src/index.ts
 rename packages/machines/{file-upload => file-picker}/tsconfig.json (100%)
 delete mode 100644 packages/machines/file-upload/src/file-upload.dom.ts
 delete mode 100644 packages/machines/file-upload/src/index.ts
 rename website/components/machines/{file-upload.tsx => file-picker.tsx} (87%)
 rename website/data/components/{file-upload.mdx => file-picker.mdx} (58%)
 create mode 100644 website/data/snippets/react/file-picker/installation.mdx
 rename website/data/snippets/react/{file-upload => file-picker}/usage.mdx (79%)
 delete mode 100644 website/data/snippets/react/file-upload/installation.mdx
 create mode 100644 website/data/snippets/solid/file-picker/installation.mdx
 rename website/data/snippets/solid/{file-upload => file-picker}/usage.mdx (81%)
 delete mode 100644 website/data/snippets/solid/file-upload/installation.mdx
 create mode 100644 website/data/snippets/vue-jsx/file-picker/installation.mdx
 rename website/data/snippets/vue-jsx/{file-upload => file-picker}/usage.mdx (79%)
 delete mode 100644 website/data/snippets/vue-jsx/file-upload/installation.mdx
 create mode 100644 website/data/snippets/vue-sfc/file-picker/installation.mdx
 rename website/data/snippets/vue-sfc/{file-upload => file-picker}/usage.mdx (77%)
 delete mode 100644 website/data/snippets/vue-sfc/file-upload/installation.mdx

diff --git a/.changeset/big-bears-study.md b/.changeset/big-bears-study.md
new file mode 100644
index 0000000000..0a6aeb89e1
--- /dev/null
+++ b/.changeset/big-bears-study.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/file-picker": patch
+---
+
+Rename `file-upload` to `file-picker`
diff --git a/.xstate/file-picker.js b/.xstate/file-picker.js
new file mode 100644
index 0000000000..63c33c879d
--- /dev/null
+++ b/.xstate/file-picker.js
@@ -0,0 +1,85 @@
+"use strict";
+
+var _xstate = require("xstate");
+const {
+  actions,
+  createMachine,
+  assign
+} = _xstate;
+const {
+  choose
+} = actions;
+const fetchMachine = createMachine({
+  id: "filePicker",
+  initial: "idle",
+  context: {
+    "!isWithinRange": false
+  },
+  on: {
+    "FILES.SET": {
+      actions: ["setFilesFromEvent"]
+    },
+    "FILE.DELETE": {
+      actions: ["removeFile"]
+    }
+  },
+  on: {
+    UPDATE_CONTEXT: {
+      actions: "updateContext"
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        OPEN: "open",
+        "DROPZONE.CLICK": "open",
+        "DROPZONE.FOCUS": "focused",
+        "DROPZONE.DRAG_OVER": [{
+          cond: "!isWithinRange",
+          target: "dragging",
+          actions: ["setInvalid"]
+        }, {
+          target: "dragging"
+        }]
+      }
+    },
+    focused: {
+      on: {
+        OPEN: "open",
+        "DROPZONE.CLICK": "open",
+        "DROPZONE.ENTER": "open",
+        "DROPZONE.BLUR": "idle"
+      }
+    },
+    dragging: {
+      on: {
+        "DROPZONE.DROP": {
+          target: "idle",
+          actions: ["clearInvalid", "setFilesFromEvent"]
+        },
+        "DROPZONE.DRAG_LEAVE": {
+          target: "idle",
+          actions: ["clearInvalid"]
+        }
+      }
+    },
+    open: {
+      activities: ["trackWindowFocus"],
+      entry: ["openFilePicker"],
+      on: {
+        CLOSE: "idle"
+      }
+    }
+  }
+}, {
+  actions: {
+    updateContext: assign((context, event) => {
+      return {
+        [event.contextKey]: true
+      };
+    })
+  },
+  guards: {
+    "!isWithinRange": ctx => ctx["!isWithinRange"]
+  }
+});
\ No newline at end of file
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index 726c3765be..1527cde335 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -33,7 +33,7 @@
     "@zag-js/editable": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -90,4 +90,4 @@
     "typescript": "5.1.6"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/examples/next-ts/pages/file-upload.tsx b/examples/next-ts/pages/file-picker.tsx
similarity index 78%
rename from examples/next-ts/pages/file-upload.tsx
rename to examples/next-ts/pages/file-picker.tsx
index 477730a6b3..6ec0ed9dd6 100644
--- a/examples/next-ts/pages/file-upload.tsx
+++ b/examples/next-ts/pages/file-picker.tsx
@@ -1,19 +1,19 @@
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { fileUploadControls, formatFileSize } from "@zag-js/shared"
+import { filePickerControls, formatFileSize } from "@zag-js/shared"
 import { useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(fileUploadControls)
-  const [state, send] = useMachine(fileUpload.machine({ id: useId() }), { context: controls.context })
-  const api = fileUpload.connect(state, send, normalizeProps)
+  const controls = useControls(filePickerControls)
+  const [state, send] = useMachine(filePicker.machine({ id: useId() }), { context: controls.context })
+  const api = filePicker.connect(state, send, normalizeProps)
 
   return (
     <>
-      <main className="file-upload">
+      <main className="file-picker">
         <div {...api.rootProps}>
           <div {...api.dropzoneProps}>
             <input {...api.hiddenInputProps} />
diff --git a/examples/nuxt-ts/package.json b/examples/nuxt-ts/package.json
index d349ad87a7..34e5e1c8bb 100644
--- a/examples/nuxt-ts/package.json
+++ b/examples/nuxt-ts/package.json
@@ -31,7 +31,7 @@
     "@zag-js/editable": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -80,4 +80,4 @@
     "@types/node": "^20.5.3",
     "nuxt": "^3.6.5"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/nuxt-ts/pages/file-upload.vue b/examples/nuxt-ts/pages/file-picker.vue
similarity index 74%
rename from examples/nuxt-ts/pages/file-upload.vue
rename to examples/nuxt-ts/pages/file-picker.vue
index 08904795bb..262203a43b 100644
--- a/examples/nuxt-ts/pages/file-upload.vue
+++ b/examples/nuxt-ts/pages/file-picker.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import * as fileUpload from "@zag-js/file-upload"
-import { fileUploadControls, formatFileSize } from "@zag-js/shared"
+import * as filePicker from "@zag-js/file-picker"
+import { filePickerControls, formatFileSize } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 
-const controls = useControls(fileUploadControls)
+const controls = useControls(filePickerControls)
 
-const [state, send] = useMachine(fileUpload.machine({ id: "1" }), {
+const [state, send] = useMachine(filePicker.machine({ id: "1" }), {
   context: controls.context,
 })
 
-const api = computed(() => fileUpload.connect(state.value, send, normalizeProps))
+const api = computed(() => filePicker.connect(state.value, send, normalizeProps))
 </script>
 
 <template>
-  <main class="file-upload">
+  <main class="file-picker">
     <div v-bind="api.rootProps">
       <div v-bind="api.dropzoneProps">
         <input v-bind="api.hiddenInputProps" />
diff --git a/examples/shadow-dom/package.json b/examples/shadow-dom/package.json
index a6699707f4..f705d29847 100644
--- a/examples/shadow-dom/package.json
+++ b/examples/shadow-dom/package.json
@@ -30,7 +30,7 @@
     "@zag-js/editable": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -80,4 +80,4 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.9"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
index 3d3240a86b..64b52569b2 100644
--- a/examples/solid-ts/package.json
+++ b/examples/solid-ts/package.json
@@ -40,7 +40,7 @@
     "@zag-js/editable": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -84,4 +84,4 @@
     "form-serialize": "0.7.2",
     "solid-js": "1.7.11"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/solid-ts/src/pages/file-upload.tsx b/examples/solid-ts/src/pages/file-picker.tsx
similarity index 80%
rename from examples/solid-ts/src/pages/file-upload.tsx
rename to examples/solid-ts/src/pages/file-picker.tsx
index 98488a957b..440ec97835 100644
--- a/examples/solid-ts/src/pages/file-upload.tsx
+++ b/examples/solid-ts/src/pages/file-picker.tsx
@@ -1,5 +1,5 @@
-import * as fileUpload from "@zag-js/file-upload"
-import { fileUploadControls, formatFileSize } from "@zag-js/shared"
+import * as filePicker from "@zag-js/file-picker"
+import { filePickerControls, formatFileSize } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { For, createMemo, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
@@ -7,17 +7,17 @@ import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(fileUploadControls)
+  const controls = useControls(filePickerControls)
 
-  const [state, send] = useMachine(fileUpload.machine({ id: createUniqueId() }), {
+  const [state, send] = useMachine(filePicker.machine({ id: createUniqueId() }), {
     context: controls.context,
   })
 
-  const api = createMemo(() => fileUpload.connect(state, send, normalizeProps))
+  const api = createMemo(() => filePicker.connect(state, send, normalizeProps))
 
   return (
     <>
-      <main class="file-upload">
+      <main class="file-picker">
         <div {...api().rootProps}>
           <div {...api().dropzoneProps}>
             <input {...api().hiddenInputProps} />
diff --git a/examples/solid-ts/src/routes.ts b/examples/solid-ts/src/routes.ts
index f63453fc7e..418163416c 100644
--- a/examples/solid-ts/src/routes.ts
+++ b/examples/solid-ts/src/routes.ts
@@ -4,7 +4,7 @@ import { lazy } from "solid-js"
 import Home from "./pages/home"
 
 export const routes: RouteDefinition[] = [
-  { path: "/file-upload", component: lazy(() => import("./pages/file-upload")) },
+  { path: "/file-picker", component: lazy(() => import("./pages/file-picker")) },
   { path: "/presence", component: lazy(() => import("./pages/presence")) },
   { path: "/avatar", component: lazy(() => import("./pages/avatar")) },
   { path: "/color-picker", component: lazy(() => import("./pages/color-picker")) },
diff --git a/examples/vue-ts/package.json b/examples/vue-ts/package.json
index d78c28c788..ad0d96eefa 100644
--- a/examples/vue-ts/package.json
+++ b/examples/vue-ts/package.json
@@ -32,7 +32,7 @@
     "@zag-js/editable": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -94,4 +94,4 @@
     "vue-tsc": "1.8.8"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/examples/vue-ts/src/pages/file-picker.tsx b/examples/vue-ts/src/pages/file-picker.tsx
new file mode 100644
index 0000000000..589a12b86f
--- /dev/null
+++ b/examples/vue-ts/src/pages/file-picker.tsx
@@ -0,0 +1,58 @@
+import * as filePicker from "@zag-js/file-picker"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { computed, defineComponent, h, Fragment } from "vue"
+import { filePickerControls, formatFileSize } from "@zag-js/shared"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default defineComponent({
+  name: "filePicker",
+  setup() {
+    const controls = useControls(filePickerControls)
+
+    const [state, send] = useMachine(filePicker.machine({ id: "1" }), {
+      context: controls.context,
+    })
+
+    const apiRef = computed(() => filePicker.connect(state.value, send, normalizeProps))
+
+    return () => {
+      const api = apiRef.value
+
+      return (
+        <>
+          <main class="file-picker">
+            <div {...api.rootProps}>
+              <div {...api.dropzoneProps}>
+                <input {...api.hiddenInputProps} />
+                Drag your files here
+              </div>
+
+              <button {...api.triggerProps}>Choose Files...</button>
+
+              <ul>
+                {api.files.map((file) => {
+                  return (
+                    <li class="file" key={file.name}>
+                      <div>
+                        <b>{file.name}</b>
+                      </div>
+                      <div>{formatFileSize(file.size)}</div>
+                      <div>{file.type}</div>
+                      <button {...api.getDeleteTriggerProps({ file })}>X</button>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          </main>
+
+          <Toolbar controls={controls.ui}>
+            <StateVisualizer state={state} />
+          </Toolbar>
+        </>
+      )
+    }
+  },
+})
diff --git a/examples/vue-ts/src/pages/file-upload.tsx b/examples/vue-ts/src/pages/file-upload.tsx
index 0460936710..589a12b86f 100644
--- a/examples/vue-ts/src/pages/file-upload.tsx
+++ b/examples/vue-ts/src/pages/file-upload.tsx
@@ -1,28 +1,28 @@
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import { computed, defineComponent, h, Fragment } from "vue"
-import { fileUploadControls, formatFileSize } from "@zag-js/shared"
+import { filePickerControls, formatFileSize } from "@zag-js/shared"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default defineComponent({
-  name: "fileUpload",
+  name: "filePicker",
   setup() {
-    const controls = useControls(fileUploadControls)
+    const controls = useControls(filePickerControls)
 
-    const [state, send] = useMachine(fileUpload.machine({ id: "1" }), {
+    const [state, send] = useMachine(filePicker.machine({ id: "1" }), {
       context: controls.context,
     })
 
-    const apiRef = computed(() => fileUpload.connect(state.value, send, normalizeProps))
+    const apiRef = computed(() => filePicker.connect(state.value, send, normalizeProps))
 
     return () => {
       const api = apiRef.value
 
       return (
         <>
-          <main class="file-upload">
+          <main class="file-picker">
             <div {...api.rootProps}>
               <div {...api.dropzoneProps}>
                 <input {...api.hiddenInputProps} />
diff --git a/examples/vue-ts/src/routes.ts b/examples/vue-ts/src/routes.ts
index d1735a029b..df21bbf704 100644
--- a/examples/vue-ts/src/routes.ts
+++ b/examples/vue-ts/src/routes.ts
@@ -4,7 +4,7 @@ import Home from "./pages/index"
 export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: "/file-upload", component: () => import("./pages/file-upload") },
+    { path: "/file-picker", component: () => import("./pages/file-picker") },
     { path: "/presence", component: () => import("./pages/presence") },
     { path: "/avatar", component: () => import("./pages/avatar") },
     { path: "/color-picker", component: () => import("./pages/color-picker") },
diff --git a/packages/anatomy-icons/src/components/file-upload.tsx b/packages/anatomy-icons/src/components/file-picker.tsx
similarity index 99%
rename from packages/anatomy-icons/src/components/file-upload.tsx
rename to packages/anatomy-icons/src/components/file-picker.tsx
index 62dd54226c..cde3355600 100644
--- a/packages/anatomy-icons/src/components/file-upload.tsx
+++ b/packages/anatomy-icons/src/components/file-picker.tsx
@@ -1,6 +1,6 @@
 import { createComponent } from "../create-component"
 
-export const FileUploadAnatomy = createComponent((props) => {
+export const filePickerAnatomy = createComponent((props) => {
   const { palette, ...rest } = props
   return (
     <svg width={1456} height={812} viewBox="0 0 1456 812" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
diff --git a/packages/anatomy-icons/src/components/index.ts b/packages/anatomy-icons/src/components/index.ts
index 116dd3fd80..a5f288b316 100644
--- a/packages/anatomy-icons/src/components/index.ts
+++ b/packages/anatomy-icons/src/components/index.ts
@@ -4,7 +4,7 @@ import { CheckboxAnatomy } from "./checkbox"
 import { ComboboxAnatomy } from "./combobox"
 import { DialogAnatomy } from "./dialog"
 import { EditableAnatomy } from "./editable"
-import { FileUploadAnatomy } from "./file-upload"
+import { filePickerAnatomy } from "./file-picker"
 import { HoverCardAnatomy } from "./hover-card"
 import { MenuAnatomy } from "./menu"
 import { NumberInputAnatomy } from "./number-input"
@@ -27,7 +27,7 @@ import { RadioGroupAnatomy } from "./radio-group"
 export const allComponents = {
   "radio-group": RadioGroupAnatomy,
   "toggle-group": ToggleGroupAnatomy,
-  "file-upload": FileUploadAnatomy,
+  "file-picker": filePickerAnatomy,
   accordion: AccordionAnatomy,
   avatar: AvatarAnatomy,
   checkbox: CheckboxAnatomy,
diff --git a/packages/docs/api.json b/packages/docs/api.json
index 7ac60ec606..24826e66c7 100644
--- a/packages/docs/api.json
+++ b/packages/docs/api.json
@@ -1028,7 +1028,7 @@
       }
     }
   },
-  "file-upload": {
+  "file-picker": {
     "api": {
       "isDragging": {
         "type": "boolean",
@@ -3065,4 +3065,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/machines/file-upload/CHANGELOG.md b/packages/machines/file-picker/CHANGELOG.md
similarity index 99%
rename from packages/machines/file-upload/CHANGELOG.md
rename to packages/machines/file-picker/CHANGELOG.md
index e21e21fe5e..998d1c5297 100644
--- a/packages/machines/file-upload/CHANGELOG.md
+++ b/packages/machines/file-picker/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @zag-js/file-upload
+# @zag-js/file-picker
 
 ## 0.17.0
 
diff --git a/packages/machines/file-upload/README.md b/packages/machines/file-picker/README.md
similarity index 68%
rename from packages/machines/file-upload/README.md
rename to packages/machines/file-picker/README.md
index 644b8adb30..a090022608 100644
--- a/packages/machines/file-upload/README.md
+++ b/packages/machines/file-picker/README.md
@@ -1,13 +1,13 @@
-# @zag-js/file-upload
+# @zag-js/file-picker
 
-Core logic for the file-upload widget implemented as a state machine
+Core logic for the file-picker widget implemented as a state machine
 
 ## Installation
 
 ```sh
-yarn add @zag-js/file-upload
+yarn add @zag-js/file-picker
 # or
-npm i @zag-js/file-upload
+npm i @zag-js/file-picker
 ```
 
 ## Contribution
diff --git a/packages/machines/file-upload/package.json b/packages/machines/file-picker/package.json
similarity index 89%
rename from packages/machines/file-upload/package.json
rename to packages/machines/file-picker/package.json
index 5242acde9b..e579b2d516 100644
--- a/packages/machines/file-upload/package.json
+++ b/packages/machines/file-picker/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@zag-js/file-upload",
+  "name": "@zag-js/file-picker",
   "version": "0.17.0",
-  "description": "Core logic for the file-upload widget implemented as a state machine",
+  "description": "Core logic for the file-picker widget implemented as a state machine",
   "keywords": [
     "js",
     "machine",
@@ -9,13 +9,13 @@
     "statechart",
     "component",
     "chakra-ui",
-    "file-upload"
+    "file-picker"
   ],
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
   "main": "src/index.ts",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/file-upload",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/file-picker",
   "sideEffects": false,
   "files": [
     "dist",
@@ -46,4 +46,4 @@
     "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
+}
\ No newline at end of file
diff --git a/packages/machines/file-upload/src/file-upload.anatomy.ts b/packages/machines/file-picker/src/file-picker.anatomy.ts
similarity index 68%
rename from packages/machines/file-upload/src/file-upload.anatomy.ts
rename to packages/machines/file-picker/src/file-picker.anatomy.ts
index c73e41f0b7..a07596db69 100644
--- a/packages/machines/file-upload/src/file-upload.anatomy.ts
+++ b/packages/machines/file-picker/src/file-picker.anatomy.ts
@@ -1,5 +1,5 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("file-upload").parts("root", "dropzone", "trigger", "label", "deleteTrigger")
+export const anatomy = createAnatomy("file-picker").parts("root", "dropzone", "trigger", "label", "deleteTrigger")
 
 export const parts = anatomy.build()
diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-picker/src/file-picker.connect.ts
similarity index 95%
rename from packages/machines/file-upload/src/file-upload.connect.ts
rename to packages/machines/file-picker/src/file-picker.connect.ts
index 375f4bdbd7..2bea39d559 100644
--- a/packages/machines/file-upload/src/file-upload.connect.ts
+++ b/packages/machines/file-picker/src/file-picker.connect.ts
@@ -1,10 +1,10 @@
 import { contains, dataAttr, isSelfEvent } from "@zag-js/dom-query"
 import { type NormalizeProps, type PropTypes } from "@zag-js/types"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
-import { parts } from "./file-upload.anatomy"
-import { dom } from "./file-upload.dom"
-import { type MachineApi, type Send, type State } from "./file-upload.types"
-import { isEventWithFiles } from "./file-upload.utils"
+import { parts } from "./file-picker.anatomy"
+import { dom } from "./file-picker.dom"
+import { type MachineApi, type Send, type State } from "./file-picker.types"
+import { isEventWithFiles } from "./file-picker.utils"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const disabled = state.context.disabled
diff --git a/packages/machines/file-picker/src/file-picker.dom.ts b/packages/machines/file-picker/src/file-picker.dom.ts
new file mode 100644
index 0000000000..149f48c1e2
--- /dev/null
+++ b/packages/machines/file-picker/src/file-picker.dom.ts
@@ -0,0 +1,11 @@
+import { createScope } from "@zag-js/dom-query"
+import type { MachineContext as Ctx } from "./file-picker.types"
+
+export const dom = createScope({
+  getRootId: (ctx: Ctx) => `filePicker:${ctx.id}`,
+  getDropzoneId: (ctx: Ctx) => `filePicker:${ctx.id}:dropzone`,
+  getHiddenInputId: (ctx: Ctx) => `filePicker:${ctx.id}:input`,
+  getTriggerId: (ctx: Ctx) => `filePicker:${ctx.id}:trigger`,
+  getLabelId: (ctx: Ctx) => `filePicker:${ctx.id}:label`,
+  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
+})
diff --git a/packages/machines/file-upload/src/file-upload.machine.ts b/packages/machines/file-picker/src/file-picker.machine.ts
similarity index 96%
rename from packages/machines/file-upload/src/file-upload.machine.ts
rename to packages/machines/file-picker/src/file-picker.machine.ts
index ea679ee10f..d4ea0fe074 100644
--- a/packages/machines/file-upload/src/file-upload.machine.ts
+++ b/packages/machines/file-picker/src/file-picker.machine.ts
@@ -1,9 +1,9 @@
 import { createMachine, guards, ref } from "@zag-js/core"
 import { raf } from "@zag-js/dom-query"
 import { compact } from "@zag-js/utils"
-import { dom } from "./file-upload.dom"
-import type { MachineContext, MachineState, RejectedFile, UserDefinedContext } from "./file-upload.types"
-import { getAcceptAttrString, getFilesFromEvent, isFilesWithinRange } from "./file-upload.utils"
+import { dom } from "./file-picker.dom"
+import type { MachineContext, MachineState, RejectedFile, UserDefinedContext } from "./file-picker.types"
+import { getAcceptAttrString, getFilesFromEvent, isFilesWithinRange } from "./file-picker.utils"
 
 const { not } = guards
 
@@ -11,7 +11,7 @@ export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
   return createMachine<MachineContext, MachineState>(
     {
-      id: "fileupload",
+      id: "filePicker",
       initial: "idle",
       context: {
         minFileSize: 0,
diff --git a/packages/machines/file-upload/src/file-upload.types.ts b/packages/machines/file-picker/src/file-picker.types.ts
similarity index 100%
rename from packages/machines/file-upload/src/file-upload.types.ts
rename to packages/machines/file-picker/src/file-picker.types.ts
diff --git a/packages/machines/file-upload/src/file-upload.utils.ts b/packages/machines/file-picker/src/file-picker.utils.ts
similarity index 97%
rename from packages/machines/file-upload/src/file-upload.utils.ts
rename to packages/machines/file-picker/src/file-picker.utils.ts
index d2163168e0..91ef7ed4c1 100644
--- a/packages/machines/file-upload/src/file-upload.utils.ts
+++ b/packages/machines/file-picker/src/file-picker.utils.ts
@@ -1,4 +1,4 @@
-import { type MachineContext, type RejectedFile } from "./file-upload.types"
+import { type MachineContext, type RejectedFile } from "./file-picker.types"
 
 export function isEventWithFiles(event: Pick<DragEvent, "dataTransfer" | "target">) {
   if (!event.dataTransfer) {
diff --git a/packages/machines/file-picker/src/index.ts b/packages/machines/file-picker/src/index.ts
new file mode 100644
index 0000000000..7f88541127
--- /dev/null
+++ b/packages/machines/file-picker/src/index.ts
@@ -0,0 +1,4 @@
+export { anatomy } from "./file-picker.anatomy"
+export { connect } from "./file-picker.connect"
+export { machine } from "./file-picker.machine"
+export type { MachineApi as Api, UserDefinedContext as Context } from "./file-picker.types"
diff --git a/packages/machines/file-upload/tsconfig.json b/packages/machines/file-picker/tsconfig.json
similarity index 100%
rename from packages/machines/file-upload/tsconfig.json
rename to packages/machines/file-picker/tsconfig.json
diff --git a/packages/machines/file-upload/src/file-upload.dom.ts b/packages/machines/file-upload/src/file-upload.dom.ts
deleted file mode 100644
index 70e086c98c..0000000000
--- a/packages/machines/file-upload/src/file-upload.dom.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createScope } from "@zag-js/dom-query"
-import type { MachineContext as Ctx } from "./file-upload.types"
-
-export const dom = createScope({
-  getRootId: (ctx: Ctx) => `fileupload:${ctx.id}`,
-  getDropzoneId: (ctx: Ctx) => `fileupload:${ctx.id}:dropzone`,
-  getHiddenInputId: (ctx: Ctx) => `fileupload:${ctx.id}:input`,
-  getTriggerId: (ctx: Ctx) => `fileupload:${ctx.id}:trigger`,
-  getLabelId: (ctx: Ctx) => `fileupload:${ctx.id}:label`,
-  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
-})
diff --git a/packages/machines/file-upload/src/index.ts b/packages/machines/file-upload/src/index.ts
deleted file mode 100644
index 9d5ed1443c..0000000000
--- a/packages/machines/file-upload/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { anatomy } from "./file-upload.anatomy"
-export { connect } from "./file-upload.connect"
-export { machine } from "./file-upload.machine"
-export type { MachineApi as Api, UserDefinedContext as Context } from "./file-upload.types"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22b0c47aca..f0f6bcd98a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -203,9 +203,9 @@ importers:
       '@zag-js/element-size':
         specifier: workspace:*
         version: link:../../packages/utilities/element-size
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../../packages/machines/file-upload
+        version: link:../../packages/machines/file-picker
       '@zag-js/focus-scope':
         specifier: workspace:*
         version: link:../../packages/utilities/focus-scope
@@ -432,9 +432,9 @@ importers:
       '@zag-js/element-size':
         specifier: workspace:*
         version: link:../../packages/utilities/element-size
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../../packages/machines/file-upload
+        version: link:../../packages/machines/file-picker
       '@zag-js/focus-scope':
         specifier: workspace:*
         version: link:../../packages/utilities/focus-scope
@@ -637,9 +637,9 @@ importers:
       '@zag-js/element-size':
         specifier: workspace:*
         version: link:../../packages/utilities/element-size
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../../packages/machines/file-upload
+        version: link:../../packages/machines/file-picker
       '@zag-js/focus-scope':
         specifier: workspace:*
         version: link:../../packages/utilities/focus-scope
@@ -851,9 +851,9 @@ importers:
       '@zag-js/element-size':
         specifier: workspace:*
         version: link:../../packages/utilities/element-size
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../../packages/machines/file-upload
+        version: link:../../packages/machines/file-picker
       '@zag-js/focus-scope':
         specifier: workspace:*
         version: link:../../packages/utilities/focus-scope
@@ -1059,9 +1059,9 @@ importers:
       '@zag-js/element-size':
         specifier: workspace:*
         version: link:../../packages/utilities/element-size
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../../packages/machines/file-upload
+        version: link:../../packages/machines/file-picker
       '@zag-js/focus-scope':
         specifier: workspace:*
         version: link:../../packages/utilities/focus-scope
@@ -1657,7 +1657,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
 
-  packages/machines/file-upload:
+  packages/machines/file-picker:
     dependencies:
       '@zag-js/anatomy':
         specifier: workspace:*
@@ -2630,9 +2630,9 @@ importers:
       '@zag-js/editable':
         specifier: workspace:*
         version: link:../packages/machines/editable
-      '@zag-js/file-upload':
+      '@zag-js/file-picker':
         specifier: workspace:*
-        version: link:../packages/machines/file-upload
+        version: link:../packages/machines/file-picker
       '@zag-js/hover-card':
         specifier: workspace:*
         version: link:../packages/machines/hover-card
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 50dd7bf872..50b6ee15ac 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -203,7 +203,7 @@ export const colorPickerControls = defineControls({
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
 })
 
-export const fileUploadControls = defineControls({
+export const filePickerControls = defineControls({
   accept: { type: "string", defaultValue: "" },
   maxFiles: { type: "number", defaultValue: 1 },
   disabled: { type: "boolean", defaultValue: false },
diff --git a/shared/src/routes.ts b/shared/src/routes.ts
index ec105c5b32..4b9ccd0aa5 100644
--- a/shared/src/routes.ts
+++ b/shared/src/routes.ts
@@ -4,7 +4,7 @@ type RouteData = {
 }
 
 export const routesData: RouteData[] = [
-  { label: "File Upload", path: "/file-upload" },
+  { label: "File Picker", path: "/file-picker" },
   { label: "Presence", path: "/presence" },
   { label: "Avatar", path: "/avatar" },
   { label: "Color Picker", path: "/color-picker" },
diff --git a/shared/src/style.css b/shared/src/style.css
index c43c487a41..01779437aa 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -1650,10 +1650,10 @@ main [data-testid="scrubber"] {
 }
 
 /* -----------------------------------------------------------------------------
-* File Upload
+* File Picker
 * -----------------------------------------------------------------------------*/
 
-[data-scope="file-upload"][data-part="dropzone"] {
+[data-scope="file-picker"][data-part="dropzone"] {
   width: 260px;
   display: flex;
   flex-direction: column;
@@ -1663,12 +1663,12 @@ main [data-testid="scrubber"] {
   border: 2px dashed #d5d5d5;
 }
 
-[data-scope="file-upload"][data-part="dropzone"][data-dragging] {
+[data-scope="file-picker"][data-part="dropzone"][data-dragging] {
   border-color: blue;
   background-color: lightblue;
 }
 
-[data-scope="file-upload"][data-part="dropzone"][data-invalid] {
+[data-scope="file-picker"][data-part="dropzone"][data-invalid] {
   border-color: red;
   background-color: lightpink;
 }
diff --git a/website/components/machines/file-upload.tsx b/website/components/machines/file-picker.tsx
similarity index 87%
rename from website/components/machines/file-upload.tsx
rename to website/components/machines/file-picker.tsx
index 6267532609..22ad03e3d4 100644
--- a/website/components/machines/file-upload.tsx
+++ b/website/components/machines/file-picker.tsx
@@ -1,20 +1,20 @@
 import { HStack, Stack, VStack } from "@chakra-ui/layout"
 import { chakra } from "@chakra-ui/system"
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { Button } from "components/button"
 import { useId } from "react"
 import { HiX } from "react-icons/hi"
 
-export function FileUpload(props: { controls: any }) {
+export function filePicker(props: { controls: any }) {
   const [state, send] = useMachine(
-    fileUpload.machine({
+    filePicker.machine({
       id: useId(),
     }),
     { context: props.controls },
   )
 
-  const api = fileUpload.connect(state, send, normalizeProps)
+  const api = filePicker.connect(state, send, normalizeProps)
 
   return (
     <Stack width="80%" {...api.rootProps}>
diff --git a/website/components/showcase.tsx b/website/components/showcase.tsx
index 7d865e782d..d6b06de421 100644
--- a/website/components/showcase.tsx
+++ b/website/components/showcase.tsx
@@ -12,7 +12,7 @@ import { Avatar } from "./machines/avatar"
 import { Checkbox } from "./machines/checkbox"
 import { Dialog } from "./machines/dialog"
 import { Editable } from "./machines/editable"
-import { FileUpload } from "./machines/file-upload"
+import { filePicker } from "./machines/file-picker"
 import { Menu } from "./machines/menu"
 import { NumberInput } from "./machines/number-input"
 import { PinInput } from "./machines/pin-input"
@@ -287,9 +287,9 @@ const components = {
       }}
     />
   ),
-  FileUpload: () => (
+  filePicker: () => (
     <Playground
-      component={FileUpload}
+      component={filePicker}
       defaultProps={{
         disabled: false,
         allowDrop: true,
diff --git a/website/data/components/file-upload.mdx b/website/data/components/file-picker.mdx
similarity index 58%
rename from website/data/components/file-upload.mdx
rename to website/data/components/file-picker.mdx
index b33a26ae50..3303cfb848 100644
--- a/website/data/components/file-upload.mdx
+++ b/website/data/components/file-picker.mdx
@@ -1,76 +1,76 @@
 ---
-title: File Upload
-description: Using the file-upload machine in your project.
-package: "@zag-js/file-upload"
+title: File Picker
+description: Using the file-picker machine in your project.
+package: "@zag-js/file-picker"
 ---
 
-# File Upload
+# File Picker
 
-File upload component is used to upload multiple files.
+File picker component is used to pick multiple files.
 
 The native input file element is quite difficult to style and doesn't provide a
 drag-n-drop version.
 
-> The file upload component doesn't handle the actual file uploading process. It
-> only handles the UI and the state of the file upload.
+> The file picker component doesn't handle the actual file uploading process. It
+> only handles the UI and the state of the file picker.
 
-<Resources pkg="@zag-js/file-upload" />
+<Resources pkg="@zag-js/file-picker" />
 
-<Showcase id="FileUpload" />
+<Showcase id="filePicker" />
 
 **Features**
 
 - Supports a button to open the file dialog.
-- Supports drag and drop to upload files.
-- Set the maximum number of files that can be uploaded.
-- Set the maximum size of the files that can be uploaded.
+- Supports drag and drop to pick files.
+- Set the maximum number of files that can be picked.
+- Set the maximum size of the files that can be picked.
 - Set the accepted file types.
 
 ## Installation
 
-To use the file upload machine in your project, run the following command in
+To use the file picker machine in your project, run the following command in
 your command line:
 
-<CodeSnippet id="file-upload/installation.mdx" />
+<CodeSnippet id="file-picker/installation.mdx" />
 
-This command will install the framework agnostic file upload logic and the
+This command will install the framework agnostic file picker logic and the
 reactive utilities for your framework of choice.
 
 ## Anatomy
 
-To set up the file upload correctly, you'll need to understand its anatomy and
+To set up the file picker correctly, you'll need to understand its anatomy and
 how we name its parts.
 
 > Each part includes a `data-part` attribute to help identify them in the DOM.
 
-<Anatomy id="file-upload" />
+<Anatomy id="file-picker" />
 
-On a high level, the file upload consists of:
+On a high level, the file picker consists of:
 
-- **Root**: The root element of the file upload.
+- **Root**: The root element of the file picker.
 - **Dropzone**: The element that handles the drag and drop functionality.
 - **Input**: The visually hidden input element.
-- **Trigger**: The element that triggers the file upload.
+- **Trigger**: The element that triggers the file picker.
 - **Delete Trigger**: The element that triggers the deletion of a file.
 
 ## Usage
 
-First, import the file upload package into your project
+First, import the file picker package into your project
 
 ```jsx
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 ```
 
-The file upload package exports two key functions:
+The file picker package exports two key functions:
 
-- `machine` — The state machine logic for the file upload widget.
+- `machine` — The state machine logic for the file picker widget.
 - `connect` — The function that translates the machine's state to JSX attributes
   and event handlers.
 
 Next, import the required hooks and functions for your framework and use the
 file uplaod machine in your project 🔥
 
-<CodeSnippet id="file-upload/usage.mdx" />
+<CodeSnippet id="file-picker/usage.mdx" />
 
 ## Setting the accepted file types
 
@@ -78,7 +78,7 @@ Use the `accept` attribute to set the accepted file types.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     accept: "image/*",
   }),
 )
@@ -87,12 +87,11 @@ const [state, send] = useMachine(
 ## Setting the maximum number of files
 
 Use the `maxFiles` attribute to set the maximum number of files that can be
-uploaded. This will set the `multiple` attribute on the underlying input
-element.
+picked. This will set the `multiple` attribute on the underlying input element.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     maxFiles: 5,
   }),
 )
@@ -101,24 +100,24 @@ const [state, send] = useMachine(
 ## Setting the maximum size per file
 
 Use the `maxFileSize` attribute to set the maximum size per file that can be
-uploaded.
+picked.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     maxFileSize: 1024 * 1024 * 10, // 10MB
   }),
 )
 ```
 
-## Listening to file upload events
+## Listening to file picker events
 
-When files are uploaded, the `onChange` callback is invoked with the details of
+When files are picked, the `onChange` callback is invoked with the details of
 the accepted and rejected files.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     onChange: (details) => {
       console.log(details.acceptedFiles) // File[]
       console.log(details.rejectedFiles) // { file: File, errors: [] }
@@ -129,12 +128,12 @@ const [state, send] = useMachine(
 
 ## Usage within a form
 
-To use the file upload within a form, set the `name` attribute in the machine's
+To use the file picker within a form, set the `name` attribute in the machine's
 context, and ensure you render the input element `api.hiddenInputProps`
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     name: "avatar",
   }),
 )
@@ -142,12 +141,12 @@ const [state, send] = useMachine(
 
 ## Displaying image preview
 
-To display a preview of the uploaded image, use the built-in FileReader API to
+To display a preview of the picked image, use the built-in FileReader API to
 read the file and set the `src` attribute of an image element.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     onChange: (details) => {
       const reader = new FileReader()
       reader.onload = (event) => {
@@ -167,7 +166,7 @@ to `false`.
 
 ```jsx
 const [state, send] = useMachine(
-  fileUpload.machine({
+  filePicker.machine({
     allowDrop: false,
   }),
 )
@@ -175,7 +174,7 @@ const [state, send] = useMachine(
 
 ## Styling guide
 
-Earlier, we mentioned that each file upload part has a `data-part` attribute
+Earlier, we mentioned that each file picker part has a `data-part` attribute
 added to them to select and style them in the DOM.
 
 ```css
@@ -198,40 +197,40 @@ added to them to select and style them in the DOM.
 
 ### Dragging State
 
-When the user drags a file over the file upload, the `data-dragging` attribute
+When the user drags a file over the file picker, the `data-dragging` attribute
 is added to the root element.
 
 ```css
 [data-part="dropzone"] [data-dragging] {
-  /* styles for when the user is dragging a file over the file upload */
+  /* styles for when the user is dragging a file over the file picker */
 }
 ```
 
 ### Disabled State
 
-When the file upload is disabled, the `data-disabled` attribute is added to the
+When the file picker is disabled, the `data-disabled` attribute is added to the
 root element.
 
 ```css
 [data-part="root"] [data-disabled] {
-  /* styles for when the file upload is disabled */
+  /* styles for when the file picker is disabled */
 }
 
 [data-part="dropzone"] [data-disabled] {
-  /* styles for when the file upload is disabled */
+  /* styles for when the file picker is disabled */
 }
 
 [data-part="trigger"] [data-disabled] {
-  /* styles for when the file upload trigger is disabled */
+  /* styles for when the file picker trigger is disabled */
 }
 
 [data-part="label"] [data-disabled] {
-  /* styles for when the file upload label is disabled */
+  /* styles for when the file picker label is disabled */
 }
 ```
 
 ## Methods and Properties
 
-The file upload's `api` method exposes the following methods:
+The file picker's `api` method exposes the following methods:
 
-<ApiTable name="file-upload" />
+<ApiTable name="file-picker" />
diff --git a/website/data/snippets/react/file-picker/installation.mdx b/website/data/snippets/react/file-picker/installation.mdx
new file mode 100644
index 0000000000..f398606c6c
--- /dev/null
+++ b/website/data/snippets/react/file-picker/installation.mdx
@@ -0,0 +1,5 @@
+```bash
+npm install @zag-js/file-picker @zag-js/react
+# or
+yarn add @zag-js/file-picker @zag-js/react
+```
diff --git a/website/data/snippets/react/file-upload/usage.mdx b/website/data/snippets/react/file-picker/usage.mdx
similarity index 79%
rename from website/data/snippets/react/file-upload/usage.mdx
rename to website/data/snippets/react/file-picker/usage.mdx
index bf90ae8d9c..6fcf8300b8 100644
--- a/website/data/snippets/react/file-upload/usage.mdx
+++ b/website/data/snippets/react/file-picker/usage.mdx
@@ -1,16 +1,16 @@
 ```jsx
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function FileUpload() {
+export function filePicker() {
   const [state, send] = useMachine(
-    fileUpload.machine({
+    filePicker.machine({
       id: useId(),
     }),
   )
 
-  const api = fileUpload.connect(state, send, normalizeProps)
+  const api = filePicker.connect(state, send, normalizeProps)
 
   return (
     <div {...api.rootProps}>
diff --git a/website/data/snippets/react/file-upload/installation.mdx b/website/data/snippets/react/file-upload/installation.mdx
deleted file mode 100644
index 33298d2829..0000000000
--- a/website/data/snippets/react/file-upload/installation.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```bash
-npm install @zag-js/file-upload @zag-js/react
-# or
-yarn add @zag-js/file-upload @zag-js/react
-```
diff --git a/website/data/snippets/solid/file-picker/installation.mdx b/website/data/snippets/solid/file-picker/installation.mdx
new file mode 100644
index 0000000000..9876887ae2
--- /dev/null
+++ b/website/data/snippets/solid/file-picker/installation.mdx
@@ -0,0 +1,5 @@
+```bash
+npm install @zag-js/file-picker @zag-js/solid
+# or
+yarn add @zag-js/file-picker @zag-js/solid
+```
diff --git a/website/data/snippets/solid/file-upload/usage.mdx b/website/data/snippets/solid/file-picker/usage.mdx
similarity index 81%
rename from website/data/snippets/solid/file-upload/usage.mdx
rename to website/data/snippets/solid/file-picker/usage.mdx
index f1486fd6c0..6509cc7bd5 100644
--- a/website/data/snippets/solid/file-upload/usage.mdx
+++ b/website/data/snippets/solid/file-picker/usage.mdx
@@ -1,16 +1,16 @@
 ```jsx
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createUniqueId, createMemo } from "solid-js"
 
-export function FileUpload() {
+export function filePicker() {
   const [state, send] = useMachine(
-    fileUpload.machine({
+    filePicker.machine({
       id: createUniqueId(),
     }),
   )
 
-  const api = createMemo(() => fileUpload.connect(state, send, normalizeProps))
+  const api = createMemo(() => filePicker.connect(state, send, normalizeProps))
 
   return (
     <div {...api.rootProps}>
diff --git a/website/data/snippets/solid/file-upload/installation.mdx b/website/data/snippets/solid/file-upload/installation.mdx
deleted file mode 100644
index c08b546f1c..0000000000
--- a/website/data/snippets/solid/file-upload/installation.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```bash
-npm install @zag-js/file-upload @zag-js/solid
-# or
-yarn add @zag-js/file-upload @zag-js/solid
-```
diff --git a/website/data/snippets/vue-jsx/file-picker/installation.mdx b/website/data/snippets/vue-jsx/file-picker/installation.mdx
new file mode 100644
index 0000000000..dae40f5b2b
--- /dev/null
+++ b/website/data/snippets/vue-jsx/file-picker/installation.mdx
@@ -0,0 +1,5 @@
+```bash
+npm install @zag-js/file-picker @zag-js/vue
+# or
+yarn add @zag-js/file-picker @zag-js/vue
+```
diff --git a/website/data/snippets/vue-jsx/file-upload/usage.mdx b/website/data/snippets/vue-jsx/file-picker/usage.mdx
similarity index 79%
rename from website/data/snippets/vue-jsx/file-upload/usage.mdx
rename to website/data/snippets/vue-jsx/file-picker/usage.mdx
index 84518e3a2f..df81bca092 100644
--- a/website/data/snippets/vue-jsx/file-upload/usage.mdx
+++ b/website/data/snippets/vue-jsx/file-picker/usage.mdx
@@ -1,17 +1,17 @@
 ```jsx
-import * as fileUpload from "@zag-js/file-upload"
+import * as filePicker from "@zag-js/file-picker"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import { computed, defineComponent } from "vue"
 
-export const FileUpload = defineComponent({
-  name: "FileUpload",
+export const filePicker = defineComponent({
+  name: "filePicker",
   setup() {
-    const [state, send] = useMachine(fileUpload.machine({ id: "1" }), {
+    const [state, send] = useMachine(filePicker.machine({ id: "1" }), {
       context: controls.context,
     })
 
     const apiRef = computed(() =>
-      fileUpload.connect(state.value, send, normalizeProps),
+      filePicker.connect(state.value, send, normalizeProps),
     )
 
     return () => {
diff --git a/website/data/snippets/vue-jsx/file-upload/installation.mdx b/website/data/snippets/vue-jsx/file-upload/installation.mdx
deleted file mode 100644
index 42137d61cb..0000000000
--- a/website/data/snippets/vue-jsx/file-upload/installation.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```bash
-npm install @zag-js/file-upload @zag-js/vue
-# or
-yarn add @zag-js/file-upload @zag-js/vue
-```
diff --git a/website/data/snippets/vue-sfc/file-picker/installation.mdx b/website/data/snippets/vue-sfc/file-picker/installation.mdx
new file mode 100644
index 0000000000..dae40f5b2b
--- /dev/null
+++ b/website/data/snippets/vue-sfc/file-picker/installation.mdx
@@ -0,0 +1,5 @@
+```bash
+npm install @zag-js/file-picker @zag-js/vue
+# or
+yarn add @zag-js/file-picker @zag-js/vue
+```
diff --git a/website/data/snippets/vue-sfc/file-upload/usage.mdx b/website/data/snippets/vue-sfc/file-picker/usage.mdx
similarity index 77%
rename from website/data/snippets/vue-sfc/file-upload/usage.mdx
rename to website/data/snippets/vue-sfc/file-picker/usage.mdx
index 6f42976e9d..f3e4c1b4e6 100644
--- a/website/data/snippets/vue-sfc/file-upload/usage.mdx
+++ b/website/data/snippets/vue-sfc/file-picker/usage.mdx
@@ -1,13 +1,13 @@
 ```html
 <script setup>
-  import * as fileUpload from "@zag-js/file-upload"
+  import * as filePicker from "@zag-js/file-picker"
   import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed } from "vue"
 
-  const [state, send] = useMachine(fileUpload.machine({ id: "1" }))
+  const [state, send] = useMachine(filePicker.machine({ id: "1" }))
 
   const api = computed(() =>
-    fileUpload.connect(state.value, send, normalizeProps),
+    filePicker.connect(state.value, send, normalizeProps),
   )
 </script>
 
diff --git a/website/data/snippets/vue-sfc/file-upload/installation.mdx b/website/data/snippets/vue-sfc/file-upload/installation.mdx
deleted file mode 100644
index 42137d61cb..0000000000
--- a/website/data/snippets/vue-sfc/file-upload/installation.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```bash
-npm install @zag-js/file-upload @zag-js/vue
-# or
-yarn add @zag-js/file-upload @zag-js/vue
-```
diff --git a/website/package.json b/website/package.json
index eac73e8582..d29e81641b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -32,7 +32,7 @@
     "@zag-js/dialog": "workspace:*",
     "@zag-js/docs": "workspace:*",
     "@zag-js/editable": "workspace:*",
-    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-picker": "workspace:*",
     "@zag-js/hover-card": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
@@ -83,4 +83,4 @@
     "remark-gfm": "3.0.1",
     "typescript": "5.1.6"
   }
-}
+}
\ No newline at end of file
diff --git a/website/sidebar.config.ts b/website/sidebar.config.ts
index fab98798c4..bbd56c95aa 100644
--- a/website/sidebar.config.ts
+++ b/website/sidebar.config.ts
@@ -65,7 +65,7 @@ const sidebar: Record<"docs", SidebarItem[]> = {
         { type: "doc", label: "Combobox", id: "combobox" },
         { type: "doc", label: "Dialog", id: "dialog" },
         { type: "doc", label: "Editable", id: "editable" },
-        { type: "doc", label: "File Upload", id: "file-upload" },
+        { type: "doc", label: "File Picker", id: "file-picker" },
         { type: "doc", label: "Hover Card", id: "hover-card" },
         { type: "doc", label: "Menu", id: "menu" },
         { type: "doc", label: "Context Menu", id: "context-menu" },

From 2bafc26f82984e07f02870229f43b1348eda803d Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Tue, 29 Aug 2023 21:09:06 +0100
Subject: [PATCH 2/3] chore: update changeset

---
 .changeset/big-bears-study.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/big-bears-study.md b/.changeset/big-bears-study.md
index 0a6aeb89e1..f06f8e357b 100644
--- a/.changeset/big-bears-study.md
+++ b/.changeset/big-bears-study.md
@@ -1,5 +1,6 @@
 ---
 "@zag-js/file-picker": patch
+"@zag-js/anatomy-icons": patch
 ---
 
 Rename `file-upload` to `file-picker`

From 72dd7d2ba2dd421bb072283c900f9a5ea69b9e1a Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Thu, 31 Aug 2023 12:04:12 +0100
Subject: [PATCH 3/3] chore: prettier fixes

---
 packages/docs/api.json                     | 2 +-
 packages/machines/file-picker/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/api.json b/packages/docs/api.json
index 24826e66c7..1c5ea68d70 100644
--- a/packages/docs/api.json
+++ b/packages/docs/api.json
@@ -3065,4 +3065,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/machines/file-picker/package.json b/packages/machines/file-picker/package.json
index e579b2d516..fc44d2920e 100644
--- a/packages/machines/file-picker/package.json
+++ b/packages/machines/file-picker/package.json
@@ -46,4 +46,4 @@
     "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}