docs: bottom sheet (#2735)

* docs: add bottom sheet docs

* docs(bottom-sheet): add more sections

* chore: update lockfile

* refactor: update website css for bottom sheet in dark mode

* refactor: docs

---------

Co-authored-by: Segun Adebayo <[email protected]>

Author: nelsonlaidev

packages/docs/data/css-vars.json

@@ -176,6 +176,16 @@
       "--slide-item-size": "The calculated size of each slide item"
     }
   },
+  "bottom-sheet": {
+    "Content": {
+      "--bottom-sheet-translate": "The bottom sheet translate value for the Content",
+      "--layer-index": "The index of the dismissable in the layer stack",
+      "--nested-layer-count": "The number of nested bottom-sheets"
+    },
+    "Backdrop": {
+      "--layer-index": "The index of the dismissable in the layer stack"
+    }
+  },
   "angle-slider": {
     "Root": {
       "--value": "The current value",

packages/docs/data/data-attr.json

@@ -86,6 +86,18 @@
       "data-state": "\"hidden\" | \"visible\""
     }
   },
+  "bottom-sheet": {
+    "Content": {
+      "data-scope": "bottom-sheet",
+      "data-part": "content",
+      "data-state": "\"open\" | \"closed\""
+    },
+    "Backdrop": {
+      "data-scope": "bottom-sheet",
+      "data-part": "backdrop",
+      "data-state": "\"open\" | \"closed\""
+    }
+  },
   "carousel": {
     "Root": {
       "data-scope": "carousel",

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

@@ -1,37 +1,36 @@
+import { getEventPoint, getEventTarget, isLeftClick } from "@zag-js/dom-query"
 import type { JSX, NormalizeProps, PropTypes } from "@zag-js/types"
-import type { BottomSheetApi, BottomSheetService } from "./bottom-sheet.types"
+import { toPx } from "@zag-js/utils"
 import { parts } from "./bottom-sheet.anatomy"
 import * as dom from "./bottom-sheet.dom"
-import { getEventPoint, getEventTarget, isLeftClick } from "@zag-js/dom-query"
-
-const tap = <T, R>(v: T | null, fn: (v: T) => R): R | undefined => (v != null ? fn(v) : undefined)
+import type { BottomSheetApi, BottomSheetService } from "./bottom-sheet.types"
 
 export function connect<T extends PropTypes>(
   service: BottomSheetService,
   normalize: NormalizeProps<T>,
 ): BottomSheetApi<T> {
   const { state, send, context, scope, prop } = service
 
+  const open = state.hasTag("open")
+  const dragging = state.hasTag("dragging")
+  const dragOffset = context.get("dragOffset")
+
+  const activeSnapPoint = context.get("activeSnapPoint")
+  const resolvedActiveSnapPoint = context.get("resolvedActiveSnapPoint")
+  const translate = dragOffset ?? resolvedActiveSnapPoint?.offset
+
   function onPointerDown(event: JSX.PointerEvent<HTMLElement>) {
     if (!isLeftClick(event)) return
-
     const target = getEventTarget<HTMLElement>(event)
     if (target?.hasAttribute("data-no-drag") || target?.closest("[data-no-drag]")) return
-
     if (state.matches("closing")) return
-
     const point = getEventPoint(event)
     send({ type: "POINTER_DOWN", point })
   }
 
-  const open = state.hasTag("open")
-  const dragging = state.hasTag("dragging")
-
-  const translate = context.get("dragOffset") ?? context.get("resolvedActiveSnapPoint")?.offset
-
   return {
     open,
-    activeSnapPoint: context.get("activeSnapPoint"),
+    activeSnapPoint,
 
     setOpen(nextOpen) {
       const open = state.hasTag("open")
@@ -52,14 +51,14 @@ export function connect<T extends PropTypes>(
         id: dom.getContentId(scope),
         tabIndex: -1,
         role: "dialog",
-        "aria-modal": "true",
+        "aria-modal": prop("modal"),
         "aria-labelledby": dom.getTitleId(scope),
         hidden: !open,
         "data-state": open ? "open" : "closed",
         style: {
           transform: "translate3d(0, var(--bottom-sheet-translate, 0), 0)",
           transitionDuration: dragging ? "0s" : undefined,
-          "--bottom-sheet-translate": tap(translate, (v) => `${v}px`),
+          "--bottom-sheet-translate": toPx(translate),
           willChange: "transform",
         },
         onPointerDown(event) {

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

@@ -1,15 +1,15 @@
+import { ariaHidden } from "@zag-js/aria-hidden"
 import { createMachine } from "@zag-js/core"
-import type { BottomSheetSchema, ResolvedSnapPoint } from "./bottom-sheet.types"
-import type { Point } from "@zag-js/types"
-import { addDomEvent, getEventPoint, getEventTarget, raf } from "@zag-js/dom-query"
-import * as dom from "./bottom-sheet.dom"
-import { resolveSnapPoint } from "./utils/resolve-snap-point"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { findClosestSnapPoint } from "./utils/find-closest-snap-point"
+import { addDomEvent, getEventPoint, getEventTarget, raf } from "@zag-js/dom-query"
 import { trapFocus } from "@zag-js/focus-trap"
 import { preventBodyScroll } from "@zag-js/remove-scroll"
-import { ariaHidden } from "@zag-js/aria-hidden"
+import type { Point } from "@zag-js/types"
+import * as dom from "./bottom-sheet.dom"
+import type { BottomSheetSchema, ResolvedSnapPoint } from "./bottom-sheet.types"
+import { findClosestSnapPoint } from "./utils/find-closest-snap-point"
 import { getScrollInfo } from "./utils/get-scroll-info"
+import { resolveSnapPoint } from "./utils/resolve-snap-point"
 
 export const machine = createMachine<BottomSheetSchema>({
   props({ props, scope }) {