[pull] main from chakra-ui:main

.changeset/drawer-initial-release.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/drawer": minor
+---
+
+**Drawer [New]**: Initial release of the drawer state machine. This replaces the previous `bottom-sheet` implementation and API naming.

.claude/docs/documentation-structure-guide.md

@@ -42,7 +42,7 @@ Defines the component's parts (elements) using the anatomy API.
 ```typescript
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("bottom-sheet").parts(
+export const anatomy = createAnatomy("drawer").parts(
   "content",
   "title",
   "trigger",
@@ -65,7 +65,7 @@ export const parts = anatomy.build()
 
 ```typescript
 parts.content.attrs
-// => { "data-scope": "bottom-sheet", "data-part": "content" }
+// => { "data-scope": "drawer", "data-part": "content" }
 ```
 
 ### 2. DOM File (`{component}.dom.ts`)
@@ -85,13 +85,13 @@ import { queryAll } from "@zag-js/dom-query"
 
 // ID Generators
 export const getContentId = (ctx: Scope) =>
-  ctx.ids?.content ?? `bottom-sheet:${ctx.id}:content`
+  ctx.ids?.content ?? `drawer:${ctx.id}:content`
 
 export const getTitleId = (ctx: Scope) =>
-  ctx.ids?.title ?? `bottom-sheet:${ctx.id}:title`
+  ctx.ids?.title ?? `drawer:${ctx.id}:title`
 
 export const getTriggerId = (ctx: Scope) =>
-  ctx.ids?.trigger ?? `bottom-sheet:${ctx.id}:trigger`
+  ctx.ids?.trigger ?? `drawer:${ctx.id}:trigger`
 
 // Element Getters
 export const getContentEl = (ctx: Scope) =>
@@ -130,13 +130,13 @@ export const getScrollEls = (scope: Scope) => {
 {component}:{instance-id}:{part}
 ```
 
-Example: `bottom-sheet:my-sheet-1:content`
+Example: `drawer:my-sheet-1:content`
 
 **Custom IDs:**
 Users can override IDs via the `ids` prop:
 
 ```typescript
-useMachine(bottomSheet.machine, {
+useMachine(drawer.machine, {
   id: "my-sheet",
   ids: {
     content: "custom-content-id",
@@ -177,11 +177,11 @@ export type ElementIds = Partial<{
 }>
 
 // Component props
-export interface BottomSheetProps
+export interface DrawerProps
   extends DirectionProperty,
           CommonProperties {
   /**
-   * The ids of the elements in the bottom sheet. Useful for composition.
+   * The ids of the elements in the drawer. Useful for composition.
    */
   ids?: ElementIds
 
@@ -192,12 +192,12 @@ export interface BottomSheetProps
   trapFocus?: boolean | undefined
 
   /**
-   * Whether the bottom sheet is open.
+   * Whether the drawer is open.
    */
   open?: boolean | undefined
 
   /**
-   * The initial open state of the bottom sheet.
+   * The initial open state of the drawer.
    */
   defaultOpen?: boolean | undefined
 
@@ -214,8 +214,8 @@ type PropsWithDefault =
   | "closeOnEscape"
 
 // Machine schema
-export interface BottomSheetSchema {
-  props: RequiredBy<BottomSheetProps, PropsWithDefault>
+export interface DrawerSchema {
+  props: RequiredBy<DrawerProps, PropsWithDefault>
   state: "open" | "closed" | "closing"
   tag: "open" | "closed"
   context: {
@@ -235,13 +235,13 @@ export interface BottomSheetSchema {
 }
 
 // Service types
-export type BottomSheetService = Service<BottomSheetSchema>
-export type BottomSheetMachine = Machine<BottomSheetSchema>
+export type DrawerService = Service<DrawerSchema>
+export type DrawerMachine = Machine<DrawerSchema>
 
 // Connect API
-export interface BottomSheetApi<T extends PropTypes = PropTypes> {
+export interface DrawerApi<T extends PropTypes = PropTypes> {
   /**
-   * Whether the bottom sheet is open.
+   * Whether the drawer is open.
    */
   open: boolean
 
@@ -443,11 +443,11 @@ export function connect<T extends PropTypes>(
 Main export file for the package.
 
 ```typescript
-export { anatomy } from "./bottom-sheet.anatomy"
-export { connect } from "./bottom-sheet.connect"
-export { machine } from "./bottom-sheet.machine"
-export * as dom from "./bottom-sheet.dom"
-export type * from "./bottom-sheet.types"
+export { anatomy } from "./drawer.anatomy"
+export { connect } from "./drawer.connect"
+export { machine } from "./drawer.machine"
+export * as dom from "./drawer.dom"
+export type * from "./drawer.types"
 ```
 
 **Export Conventions:**
@@ -503,10 +503,10 @@ export class DragManager {
 
 ```json
 {
-  "name": "@zag-js/bottom-sheet",
+  "name": "@zag-js/drawer",
   "version": "0.1.0",
-  "description": "Core logic for the bottom sheet widget",
-  "keywords": ["js", "machine", "xstate", "statechart", "bottom-sheet"],
+  "description": "Core logic for the drawer widget",
+  "keywords": ["js", "machine", "xstate", "statechart", "drawer"],
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "license": "MIT",
   "repository": {
@@ -557,9 +557,9 @@ export class DragManager {
 ### Component Files
 
 ```
-bottom-sheet.anatomy.ts     ✓ Correct
-bottomSheet.anatomy.ts      ✗ Wrong
-BottomSheet.anatomy.ts      ✗ Wrong
+drawer.anatomy.ts     ✓ Correct
+drawer.anatomy.ts      ✗ Wrong
+Drawer.anatomy.ts      ✗ Wrong
 ```
 
 ### Utility Files

.claude/docs/framework-integration-guide.md

@@ -26,16 +26,16 @@ Zag.js provides framework-specific adapters that handle reactivity and prop norm
 **Example:**
 
 ```tsx
-import * as bottomSheet from "@zag-js/bottom-sheet"
+import * as drawer from "@zag-js/drawer"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
 export default function Page() {
-  const service = useMachine(bottomSheet.machine, {
+  const service = useMachine(drawer.machine, {
     id: useId(),
   })
 
-  const api = bottomSheet.connect(service, normalizeProps)
+  const api = drawer.connect(service, normalizeProps)
 
   return (
     <>
@@ -72,14 +72,14 @@ export default function Page() {
 
 ```vue
 <script setup lang="ts">
-import * as bottomSheet from "@zag-js/bottom-sheet"
+import * as drawer from "@zag-js/drawer"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 
-const service = useMachine(bottomSheet.machine, {
+const service = useMachine(drawer.machine, {
   id: useId(),
 })
 
-const api = computed(() => bottomSheet.connect(service, normalizeProps))
+const api = computed(() => drawer.connect(service, normalizeProps))
 </script>
 
 <template>
@@ -116,16 +116,16 @@ const api = computed(() => bottomSheet.connect(service, normalizeProps))
 **Example:**
 
 ```tsx
-import * as bottomSheet from "@zag-js/bottom-sheet"
+import * as drawer from "@zag-js/drawer"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId, For } from "solid-js"
 
 export default function Page() {
-  const service = useMachine(bottomSheet.machine, {
+  const service = useMachine(drawer.machine, {
     id: createUniqueId(),
   })
 
-  const api = createMemo(() => bottomSheet.connect(service, normalizeProps))
+  const api = createMemo(() => drawer.connect(service, normalizeProps))
 
   return (
     <>
@@ -162,13 +162,13 @@ export default function Page() {
 
 ```svelte
 <script lang="ts">
-  import * as bottomSheet from "@zag-js/bottom-sheet"
+  import * as drawer from "@zag-js/drawer"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
   const id = $props.id()
-  const service = useMachine(bottomSheet.machine, { id })
+  const service = useMachine(drawer.machine, { id })
 
-  const api = $derived(bottomSheet.connect(service, normalizeProps))
+  const api = $derived(drawer.connect(service, normalizeProps))
 </script>
 
 <main>
@@ -199,21 +199,21 @@ When adding a new component or feature, you need to create examples in all frame
 ```
 examples/
 ├── next-ts/pages/           # React (Next.js)
-│   ├── bottom-sheet.tsx
-│   ├── bottom-sheet-snap-points.tsx
-│   └── bottom-sheet-draggable-false.tsx
+│   ├── drawer.tsx
+│   ├── drawer-snap-points.tsx
+│   └── drawer-draggable-false.tsx
 ├── nuxt-ts/app/pages/       # Vue (Nuxt)
-│   ├── bottom-sheet.vue
-│   ├── bottom-sheet-snap-points.vue
-│   └── bottom-sheet-draggable-false.vue
+│   ├── drawer.vue
+│   ├── drawer-snap-points.vue
+│   └── drawer-draggable-false.vue
 ├── solid-ts/src/routes/     # Solid
-│   ├── bottom-sheet.tsx
-│   ├── bottom-sheet-snap-points.tsx
-│   └── bottom-sheet-draggable-false.tsx
+│   ├── drawer.tsx
+│   ├── drawer-snap-points.tsx
+│   └── drawer-draggable-false.tsx
 └── svelte-ts/src/routes/    # Svelte
-    ├── bottom-sheet/+page.svelte
-    ├── bottom-sheet-snap-points/+page.svelte
-    └── bottom-sheet-draggable-false/+page.svelte
+    ├── drawer/+page.svelte
+    ├── drawer-snap-points/+page.svelte
+    └── drawer-draggable-false/+page.svelte
 ```
 
 ### Example Template Pattern
@@ -374,7 +374,7 @@ export default function Page() {
 **Variations:**
 
 - Base example: `component.tsx`
-- Feature variations: `component-feature.tsx` (e.g., `bottom-sheet-snap-points.tsx`)
+- Feature variations: `component-feature.tsx` (e.g., `drawer-snap-points.tsx`)
 
 ### Adding Controls
 
@@ -543,10 +543,10 @@ pnpm start-svelte
 
 Once started, navigate to:
 
-- React: `http://localhost:3000/bottom-sheet`
-- Vue: `http://localhost:3000/bottom-sheet`
-- Solid: `http://localhost:3000/bottom-sheet`
-- Svelte: `http://localhost:5173/bottom-sheet`
+- React: `http://localhost:3000/drawer`
+- Vue: `http://localhost:3000/drawer`
+- Solid: `http://localhost:3000/drawer`
+- Svelte: `http://localhost:5173/drawer`
 
 ## Testing Examples