feat: bottom sheet

examples/next-ts/package.json

@@ -22,6 +22,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",

examples/next-ts/pages/bottom-sheet.tsx

@@ -0,0 +1,63 @@
+import * as bottomSheet from "@zag-js/bottom-sheet"
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { bottomSheetControls } from "@zag-js/shared"
+import { TicketPlusIcon } from "lucide-react"
+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(bottomSheetControls)
+
+  const service = useMachine(bottomSheet.machine, {
+    id: useId(),
+    ...controls.context,
+  })
+
+  const api = bottomSheet.connect(service, normalizeProps)
+
+  return (
+    <>
+      <main className="bottom-sheet">
+        <button {...api.triggerProps}>Open</button>
+        <div {...api.backdropProps} />
+
+        <div {...api.grabberProps}>
+          <div {...api.contentProps}>
+            <div>
+              <div className="x">
+                {Array.from({ length: 10 }).map((_, i) => (
+                  <div key={i} className="x-trigger">
+                    <button>
+                      <TicketPlusIcon />
+                    </button>
+                    <span className="x-trigger-text">Whats new</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="y">
+                {Array.from({ length: 10 }).map((_, i) => (
+                  <div key={i} className="y-trigger">
+                    <button>
+                      <span>Whats new</span>
+                      <TicketPlusIcon />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+            {/* <button {...api.closeTriggerProps}>
+            <XIcon />
+          </button> */}
+          </div>
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui} viz>
+        <StateVisualizer state={service} />
+      </Toolbar>
+    </>
+  )
+}

examples/nuxt-ts/package.json

@@ -18,6 +18,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
@@ -96,4 +97,4 @@
     "@types/node": "24.0.3",
     "nuxt": "3.17.5"
   }
-}
+}

examples/nuxt-ts/pages/bottom-sheet.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import * as bottomSheet from "@zag-js/bottom-sheet"
+import { bottomSheetControls, bottomSheetData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { useId } from "vue"
+
+const service = useMachine(bottomSheet.machine, {
+  id: useId(),
+})
+
+const api = computed(() => bottomSheet.connect(service, normalizeProps))
+</script>
+
+<template>
+  <main className="bottom-sheet">
+    <div v-bind="api.rootProps"></div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="service" />
+  </Toolbar>
+</template>

examples/preact-ts/package.json

@@ -17,6 +17,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
@@ -95,4 +96,4 @@
     "typescript": "5.8.3",
     "vite": "6.3.5"
   }
-}
+}

examples/solid-ts/package.json

@@ -21,6 +21,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",

examples/solid-ts/src/routes/bottom-sheet.tsx

@@ -0,0 +1,32 @@
+import * as sheet from "@zag-js/bottom-sheet"
+import { bottomSheetControls } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { 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(bottomSheetControls)
+
+  const service = useMachine(
+    sheet.machine,
+    controls.mergeProps({
+      id: createUniqueId(),
+    }),
+  )
+
+  const api = createMemo(() => sheet.connect(service, normalizeProps))
+
+  return (
+    <>
+      <main class="bottom-sheet">
+        <div {...api().headerProps}></div>
+      </main>
+
+      <Toolbar controls={controls}>
+        <StateVisualizer state={service} />
+      </Toolbar>
+    </>
+  )
+}

examples/svelte-ts/package.json

@@ -19,6 +19,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
@@ -100,4 +101,4 @@
     "vite": "6.3.5",
     "vite-tsconfig-paths": "5.1.4"
   }
-}
+}

examples/vanilla-ts/package.json

@@ -22,6 +22,7 @@
     "@zag-js/async-list": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
@@ -90,4 +91,4 @@
     "match-sorter": "8.0.3",
     "nanoid": "^5.1.5"
   }
-}
+}

examples/vue-ts/src/pages/bottom-sheet.tsx

@@ -0,0 +1,38 @@
+import * as bottomSheet from "@zag-js/bottom-sheet"
+import { normalizeProps, useMachine, mergeProps } from "@zag-js/vue"
+import { computed, defineComponent, h, Fragment } from "vue"
+import { bottomSheetControls, bottomSheetData } 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: "bottom-sheet",
+  setup() {
+    const controls = useControls(bottomSheetControls)
+
+    const [state, send] = useMachine(bottomSheet.machine({ id: "1" }), {
+      context: controls.context,
+    })
+
+    const apiRef = computed(() => bottomSheet.connect(state.value, send, normalizeProps))
+
+    return () => {
+      const api = apiRef.value
+
+      return (
+        <>
+          <main class="bottom-sheet">
+            <div {...api.rootProps}>
+
+            </div>
+          </main>
+
+          <Toolbar controls={controls.ui}>
+            <StateVisualizer state={state} />
+          </Toolbar>
+        </>
+      )
+    }
+  },
+})

packages/machines/bottom-sheet/README.md

@@ -0,0 +1,19 @@
+# @zag-js/bottom-sheet
+
+Core logic for the bottom-sheet widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/bottom-sheet
+# or
+npm i @zag-js/bottom-sheet
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

packages/machines/bottom-sheet/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zag-js/bottom-sheet",
+  "version": "0.0.0",
+  "description": "Core logic for the bottom-sheet widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "bottom-sheet"
+  ],
+  "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/bottom-sheet",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/anatomy": "workspace:*",
+    "@zag-js/core": "workspace:*",
+    "@zag-js/dom-query": "workspace:*",
+    "@zag-js/dom-event": "workspace:*",
+    "@zag-js/utils": "workspace:*",
+    "@zag-js/types": "workspace:*"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/machines/bottom-sheet/src/bottom-sheet.anatomy.ts

@@ -0,0 +1,14 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("bottom-sheet").parts(
+  "content",
+  "trigger",
+  "overlay",
+  "backdrop",
+  "header",
+  "grabber",
+  "grabberIndicator",
+  "closeTrigger",
+)
+
+export const parts = anatomy.build()