@astryxdesign/lab 0.4.1-canary.9e8a72a → 0.4.1-canary.e07f38f

package/dist/BottomSheet/BottomSheet.d.ts

@@ -1,138 +1,56 @@
 /**
  * @file BottomSheet.tsx
- * @input Uses React, StyleX, theme tokens, core hooks (useScrollLock), utils, useMobileKeyboard, useSheetGestures
+ * @input Uses React, StyleX, core hooks/utils, BottomSheetPanel, BottomSheetSwitcherContext
  * @output Exports BottomSheet component and BottomSheetProps
- * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
+ * @position Public BottomSheet router plus private standalone/switcher hosts
  *
- * A mobile touch surface that rises from the bottom edge: grab handle, snap
- * points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
- * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
- * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
- * heavier overlay component — so it controls its own sizing and can render a
- * full-height transparent shell with the visible sheet bottom-anchored inside.
- * That shell is what lets the sheet translate freely (including a little past
- * fully-open) without clipping against a fixed dialog edge.
- *
- * Form controls stay usable above mobile on-screen keyboards: the outer sheet
- * keeps its measured height while visual-viewport overlap extends the internal
- * scroll range and focused controls scroll into view. Short sheets lift only
- * far enough to expose a usable focus area. Starting sheet travel or closing
- * the sheet blurs the field to dismiss the keyboard.
- *
- * `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
- * layer, focus trap, scrim, scroll lock, background inert); `false` uses
- * `show()` for a non-modal sheet with no scrim, leaving the page behind
- * interactive and scrollable (the transparent shell is pointer-events:none so
- * taps pass through). Both modes keep the native dialog presented but inert
- * until the slide-out transition ends.
- *
- * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
- * geometry lives in the pure, tested `snapOffsets` module. Both are internal
- * to BottomSheet and not exported from the lab entry point.
+ * BottomSheet selects one of two focused hosts. A standalone host owns its
+ * native dialog lifecycle; a switcher item participates in the parent's shared
+ * dialog and transition state machine. Both render the same BottomSheetPanel,
+ * which owns sheet presentation, gestures, mobile-keyboard accommodation, and
+ * motion completion.
  *
  * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs (props table, features, usage)
- * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
- * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
+ * - /packages/lab/src/BottomSheet/BottomSheetPanel.tsx
+ * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs
+ * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx
+ * - /packages/lab/src/BottomSheet/BottomSheetSwitcher.tsx
+ * - /packages/lab/src/BottomSheet/BottomSheetSwitcher.test.tsx
+ * - /apps/storybook/stories/BottomSheet.stories.tsx
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
-/**
- * Height budget for each named size, as a fraction of the viewport:
- * - `hug` — fits its content, never taller than 92%.
- * - `capped` — a scrolling mid-height panel (62%).
- * - `tall` — a pinned near-full panel (92%); use when content streams in so
- *   the sheet doesn't resize under the user.
- */
-declare const HEIGHT_BUDGETS: {
-    readonly hug: "92dvh";
-    readonly capped: "62dvh";
-    readonly tall: "92dvh";
-};
-export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
-export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
-    /** Ref forwarded to the underlying <dialog> element. */
-    ref?: React.Ref<HTMLDialogElement>;
-    /** Whether the sheet is open. Fully controlled — pair with `onOpenChange`. */
-    isOpen: boolean;
-    /**
-     * Called when the sheet opens or closes. The boolean is the requested next
-     * state (`false` on Escape, scrim click, or a swipe past the dismiss
-     * threshold). The caller owns the open state.
-     */
-    onOpenChange: (isOpen: boolean) => void;
-    /**
-     * Accessible label for the sheet (required — the sheet has no built-in
-     * heading to derive a name from).
-     */
+export type { BottomSheetHeight } from './BottomSheetPanel';
+import type { BottomSheetHeight } from './BottomSheetPanel';
+interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
+    /** Ref forwarded to the visual sheet panel <div>. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Accessible label for the sheet. */
     label: string;
-    /**
-     * Sheet content, rendered below the grab handle in a scrollable,
-     * mobile-keyboard-aware area.
-     */
+    /** Sheet content, rendered below the grab handle in a scrollable area. */
     children: ReactNode;
-    /**
-     * How tall the sheet is. A named budget, or any explicit height:
-     * - `'hug'` — fits its content, never taller than 92% of the viewport.
-     * - `'capped'` — a scrolling mid-height panel (~62%).
-     * - `'tall'` — a pinned near-full panel (~92%); use when content streams in
-     *   so the sheet doesn't resize under the user.
-     * - a `number` (px) or CSS length string (e.g. `'70dvh'`, `480`) for a
-     *   custom budget.
-     *
-     * The user can still drag between snap points regardless of the starting
-     * height. On viewports shorter than the budget the sheet fills the
-     * available height.
-     * @default 'capped'
-     */
+    /** Height budget or custom CSS length. @default 'capped' */
     height?: BottomSheetHeight | number | string;
-    /**
-     * Whether to render a modal scrim behind the sheet.
-     * - `true` (default) — `showModal()`: renders in the top layer with a focus
-     *   trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
-     *   The background is inert. Use for focused tasks (filters, forms).
-     * - `false`: `show()` renders a viewport-anchored overlay with **no scrim**. It is
-     *   still layered above the page, not rendered inline, but the page behind
-     *   stays interactive and scrollable (like Material's *standard* bottom
-     *   sheet or an iOS undimmed detent). Escape still closes while focus is
-     *   inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
-     *   surface that coexists with the page (e.g. a panel over a live map).
-     * @default true
-     */
+}
+interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
     hasScrim?: boolean;
-    /** Test ID for the root element. */
-    'data-testid'?: string;
+    sheetId?: never;
+}
+interface SwitcherBottomSheetProps extends BottomSheetSharedProps {
+    sheetId: string;
+    isOpen?: never;
+    onOpenChange?: never;
+    hasScrim?: never;
 }
+export type BottomSheetProps = StandaloneBottomSheetProps | SwitcherBottomSheetProps;
 /**
- * A mobile touch sheet that rises from the bottom edge, with a grab handle,
- * drag-to-resize snap points, and swipe-to-dismiss. It owns a native
- * `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
- * trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
- * nearest snap point, a flick down dismisses, and Escape closes — so the swipe
- * always has a keyboard equivalent.
- *
- * With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
- * the page behind interactive and scrollable.
- *
- * Focused form controls scroll above the mobile on-screen keyboard without
- * resizing the sheet. A short sheet temporarily lifts when it has no usable
- * area above the keyboard. Moving the sheet dismisses the keyboard.
- *
- * @example
- * ```
- * const [isOpen, setIsOpen] = useState(false);
- * <BottomSheet
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   label="Filters">
- *   <FilterControls />
- * </BottomSheet>
- * ```
+ * A mobile touch sheet that either owns a native dialog or participates in a
+ * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
  */
-export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, hasScrim, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
 export declare namespace BottomSheet {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=BottomSheet.d.ts.map

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA4BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AA2M5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA+NlB;yBAzOe,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,YAAY,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AA4D1D,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;CAC9C;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AA6UxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}