breaking: Rename file-upload to file-picker

.changeset/big-bears-study.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/file-picker": patch
+"@zag-js/anatomy-icons": patch
+---
+
+Rename `file-upload` to `file-picker`

.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"]
+  }
+});

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"
-}
+}

examples/next-ts/pages/file-upload.tsx → 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} />

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"
   }
-}
+}

examples/nuxt-ts/pages/file-upload.vue → 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" />

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"
   }
-}
+}

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"
   }
-}
+}

examples/solid-ts/src/pages/file-upload.tsx → examples/solid-ts/src/pages/file-picker.tsx

@@ -1,23 +1,23 @@
-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"
 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} />

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")) },

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"
-}
+}

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>
+        </>
+      )
+    }
+  },
+})

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} />

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") },

packages/anatomy-icons/src/components/file-upload.tsx → 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}>

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,