@bug-on/m3-expressive 1.0.0

package/dist/overlays.d.mts

@@ -0,0 +1,161 @@
+import { W as SheetValue } from './side-sheet-modal-BY6VCC8p.mjs';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-BY6VCC8p.mjs';
+import * as React$1 from 'react';
+import { useMotionValue, PanInfo } from 'motion/react';
+import 'react/jsx-runtime';
+import '@radix-ui/react-dialog';
+import './scroll-area-CVS6HyLl.mjs';
+import '@radix-ui/react-scroll-area';
+
+/**
+ * @file sheets/bottom-sheet/bottom-sheet-scaffold.tsx
+ *
+ * Standard Bottom Sheet Scaffold — persistent sheet layout component.
+ *
+ * Mirrors Android Jetpack Compose `BottomSheetScaffold`:
+ * - Sheet is always visible at minimum `sheetPeekHeight` (no hidden/dismiss state)
+ * - Body content lives above the sheet peek via `paddingBottom`
+ * - Optional `topBar` slot
+ * - Drag to expand (full container height) / collapse (peek height only)
+ * - No scrim (standard sheet, not modal)
+ * - Drag handle keyboard accessible: click/Space/Enter toggles state
+ *
+ * API (Option A — matches Kotlin):
+ * ```tsx
+ * <BottomSheetScaffold sheetContent={<SheetBody />}>
+ *   {(paddingBottom) => <PageBody style={{ paddingBottom }} />}
+ * </BottomSheetScaffold>
+ * ```
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview#standard
+ */
+
+interface BottomSheetScaffoldProps {
+    /**
+     * Content rendered inside the bottom sheet panel.
+     * Equivalent to Kotlin's `sheetContent: @Composable ColumnScope.() -> Unit`.
+     */
+    sheetContent: React$1.ReactNode;
+    /**
+     * Body content of the page. Receives `paddingBottom` string to push
+     * content above the visible sheet peek area.
+     *
+     * @example
+     * ```tsx
+     * {(paddingBottom) => <main style={{ paddingBottom }}>{page}</main>}
+     * ```
+     */
+    children: (paddingBottom: string) => React$1.ReactNode;
+    /**
+     * Visible height of the sheet when collapsed.
+     * Default: `"var(--m3-bottom-sheet-peek-height, 56px)"`
+     */
+    sheetPeekHeight?: number;
+    /**
+     * Maximum width of the sheet.
+     * Default: `"var(--m3-bottom-sheet-max-width, 640px)"`
+     */
+    sheetMaxWidth?: string | number;
+    /**
+     * Custom drag handle. Pass `null` to hide the handle entirely.
+     * Default: MD3 drag handle indicator bar.
+     */
+    sheetDragHandle?: React$1.ReactNode | null;
+    /**
+     * Enable/disable swipe gestures on the sheet.
+     * @default true
+     */
+    sheetSwipeEnabled?: boolean;
+    /**
+     * Optional top app bar slot rendered above the page body.
+     */
+    topBar?: React$1.ReactNode;
+    /**
+     * Background color of the sheet panel.
+     * Defaults to `surfaceContainerLow` token.
+     */
+    sheetContainerColor?: string;
+    /**
+     * Called when the sheet transitions between states.
+     */
+    onSheetStateChange?: (state: Extract<SheetValue, "partiallyExpanded" | "expanded">) => void;
+    /** Initial state of the sheet. @default "partiallyExpanded" */
+    initialSheetState?: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+    /** Additional CSS class for the outer scaffold container. */
+    className?: string;
+}
+/**
+ * Standard Bottom Sheet Scaffold.
+ *
+ * Renders a persistent bottom sheet that stays on screen (never fully hidden).
+ * The body content is offset by `sheetPeekHeight` so it is never obscured.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetScaffold
+ *   sheetContent={<p>Player controls</p>}
+ *   topBar={<AppBar />}
+ * >
+ *   {(paddingBottom) => (
+ *     <AlbumList style={{ paddingBottom }} />
+ *   )}
+ * </BottomSheetScaffold>
+ * ```
+ */
+declare const BottomSheetScaffold: React$1.ForwardRefExoticComponent<BottomSheetScaffoldProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/bottom-sheet/use-bottom-sheet-scaffold.ts
+ *
+ * Core logic for `BottomSheetScaffold` — the standard (non-modal, persistent)
+ * bottom sheet layout component.
+ *
+ * Mirrors Android's `BottomSheetScaffoldState` / `BottomSheetState`:
+ * - 2-state machine: `partiallyExpanded` ↔ `expanded` (no `hidden` state)
+ * - Sheet is ALWAYS visible at minimum `peekHeight`
+ * - Velocity-based fling + nearest-snap logic on drag-end
+ * - BoundaryDampeningZone prevents over-flinging
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview#standard
+ */
+
+interface UseBottomSheetScaffoldOptions {
+    /** Visible height when partially collapsed. Default: 56px. */
+    peekHeight?: number;
+    /** Whether swipe gestures are enabled. Default: true. */
+    swipeEnabled?: boolean;
+    /** Called when the sheet state changes. */
+    onStateChange?: (state: Extract<SheetValue, "partiallyExpanded" | "expanded">) => void;
+    /** Initial state. Default: "partiallyExpanded". */
+    initialState?: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+}
+interface UseBottomSheetScaffoldReturn {
+    /** Current discrete sheet state. */
+    sheetState: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+    /** Y MotionValue of the sheet panel (absolute from top of scaffold container). */
+    y: ReturnType<typeof useMotionValue<number>>;
+    /** Expand to full height. */
+    expand: () => void;
+    /** Collapse to peek height. */
+    partialExpand: () => void;
+    /** Toggle between partiallyExpanded and expanded. */
+    toggle: () => void;
+    /** Whether drag is allowed. */
+    isDragEnabled: boolean;
+    /** Drag constraints for m.div. */
+    dragConstraints: {
+        top: number;
+        bottom: number;
+    };
+    /** Drag-end handler — snaps to closest anchor. */
+    handleDragEnd: (e: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+    /** Scroll handler for nested content. */
+    handleContentScroll: (e: React.UIEvent<HTMLElement>) => void;
+    /** Height of the content area above the sheet peek. */
+    contentPaddingBottom: string;
+    /** Callback ref for the scaffold's container element. */
+    containerRef: React.RefCallback<HTMLDivElement | null>;
+}
+declare function useBottomSheetScaffold({ peekHeight, swipeEnabled, onStateChange, initialState, }?: UseBottomSheetScaffoldOptions): UseBottomSheetScaffoldReturn;
+
+export { BottomSheetScaffold, type BottomSheetScaffoldProps, SheetValue, type UseBottomSheetScaffoldOptions, type UseBottomSheetScaffoldReturn, useBottomSheetScaffold };

package/dist/overlays.d.ts

@@ -0,0 +1,161 @@
+import { W as SheetValue } from './side-sheet-modal-CglP6KYA.js';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-CglP6KYA.js';
+import * as React$1 from 'react';
+import { useMotionValue, PanInfo } from 'motion/react';
+import 'react/jsx-runtime';
+import '@radix-ui/react-dialog';
+import './scroll-area-CVS6HyLl.js';
+import '@radix-ui/react-scroll-area';
+
+/**
+ * @file sheets/bottom-sheet/bottom-sheet-scaffold.tsx
+ *
+ * Standard Bottom Sheet Scaffold — persistent sheet layout component.
+ *
+ * Mirrors Android Jetpack Compose `BottomSheetScaffold`:
+ * - Sheet is always visible at minimum `sheetPeekHeight` (no hidden/dismiss state)
+ * - Body content lives above the sheet peek via `paddingBottom`
+ * - Optional `topBar` slot
+ * - Drag to expand (full container height) / collapse (peek height only)
+ * - No scrim (standard sheet, not modal)
+ * - Drag handle keyboard accessible: click/Space/Enter toggles state
+ *
+ * API (Option A — matches Kotlin):
+ * ```tsx
+ * <BottomSheetScaffold sheetContent={<SheetBody />}>
+ *   {(paddingBottom) => <PageBody style={{ paddingBottom }} />}
+ * </BottomSheetScaffold>
+ * ```
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview#standard
+ */
+
+interface BottomSheetScaffoldProps {
+    /**
+     * Content rendered inside the bottom sheet panel.
+     * Equivalent to Kotlin's `sheetContent: @Composable ColumnScope.() -> Unit`.
+     */
+    sheetContent: React$1.ReactNode;
+    /**
+     * Body content of the page. Receives `paddingBottom` string to push
+     * content above the visible sheet peek area.
+     *
+     * @example
+     * ```tsx
+     * {(paddingBottom) => <main style={{ paddingBottom }}>{page}</main>}
+     * ```
+     */
+    children: (paddingBottom: string) => React$1.ReactNode;
+    /**
+     * Visible height of the sheet when collapsed.
+     * Default: `"var(--m3-bottom-sheet-peek-height, 56px)"`
+     */
+    sheetPeekHeight?: number;
+    /**
+     * Maximum width of the sheet.
+     * Default: `"var(--m3-bottom-sheet-max-width, 640px)"`
+     */
+    sheetMaxWidth?: string | number;
+    /**
+     * Custom drag handle. Pass `null` to hide the handle entirely.
+     * Default: MD3 drag handle indicator bar.
+     */
+    sheetDragHandle?: React$1.ReactNode | null;
+    /**
+     * Enable/disable swipe gestures on the sheet.
+     * @default true
+     */
+    sheetSwipeEnabled?: boolean;
+    /**
+     * Optional top app bar slot rendered above the page body.
+     */
+    topBar?: React$1.ReactNode;
+    /**
+     * Background color of the sheet panel.
+     * Defaults to `surfaceContainerLow` token.
+     */
+    sheetContainerColor?: string;
+    /**
+     * Called when the sheet transitions between states.
+     */
+    onSheetStateChange?: (state: Extract<SheetValue, "partiallyExpanded" | "expanded">) => void;
+    /** Initial state of the sheet. @default "partiallyExpanded" */
+    initialSheetState?: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+    /** Additional CSS class for the outer scaffold container. */
+    className?: string;
+}
+/**
+ * Standard Bottom Sheet Scaffold.
+ *
+ * Renders a persistent bottom sheet that stays on screen (never fully hidden).
+ * The body content is offset by `sheetPeekHeight` so it is never obscured.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetScaffold
+ *   sheetContent={<p>Player controls</p>}
+ *   topBar={<AppBar />}
+ * >
+ *   {(paddingBottom) => (
+ *     <AlbumList style={{ paddingBottom }} />
+ *   )}
+ * </BottomSheetScaffold>
+ * ```
+ */
+declare const BottomSheetScaffold: React$1.ForwardRefExoticComponent<BottomSheetScaffoldProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/bottom-sheet/use-bottom-sheet-scaffold.ts
+ *
+ * Core logic for `BottomSheetScaffold` — the standard (non-modal, persistent)
+ * bottom sheet layout component.
+ *
+ * Mirrors Android's `BottomSheetScaffoldState` / `BottomSheetState`:
+ * - 2-state machine: `partiallyExpanded` ↔ `expanded` (no `hidden` state)
+ * - Sheet is ALWAYS visible at minimum `peekHeight`
+ * - Velocity-based fling + nearest-snap logic on drag-end
+ * - BoundaryDampeningZone prevents over-flinging
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview#standard
+ */
+
+interface UseBottomSheetScaffoldOptions {
+    /** Visible height when partially collapsed. Default: 56px. */
+    peekHeight?: number;
+    /** Whether swipe gestures are enabled. Default: true. */
+    swipeEnabled?: boolean;
+    /** Called when the sheet state changes. */
+    onStateChange?: (state: Extract<SheetValue, "partiallyExpanded" | "expanded">) => void;
+    /** Initial state. Default: "partiallyExpanded". */
+    initialState?: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+}
+interface UseBottomSheetScaffoldReturn {
+    /** Current discrete sheet state. */
+    sheetState: Extract<SheetValue, "partiallyExpanded" | "expanded">;
+    /** Y MotionValue of the sheet panel (absolute from top of scaffold container). */
+    y: ReturnType<typeof useMotionValue<number>>;
+    /** Expand to full height. */
+    expand: () => void;
+    /** Collapse to peek height. */
+    partialExpand: () => void;
+    /** Toggle between partiallyExpanded and expanded. */
+    toggle: () => void;
+    /** Whether drag is allowed. */
+    isDragEnabled: boolean;
+    /** Drag constraints for m.div. */
+    dragConstraints: {
+        top: number;
+        bottom: number;
+    };
+    /** Drag-end handler — snaps to closest anchor. */
+    handleDragEnd: (e: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+    /** Scroll handler for nested content. */
+    handleContentScroll: (e: React.UIEvent<HTMLElement>) => void;
+    /** Height of the content area above the sheet peek. */
+    contentPaddingBottom: string;
+    /** Callback ref for the scaffold's container element. */
+    containerRef: React.RefCallback<HTMLDivElement | null>;
+}
+declare function useBottomSheetScaffold({ peekHeight, swipeEnabled, onStateChange, initialState, }?: UseBottomSheetScaffoldOptions): UseBottomSheetScaffoldReturn;
+
+export { BottomSheetScaffold, type BottomSheetScaffoldProps, SheetValue, type UseBottomSheetScaffoldOptions, type UseBottomSheetScaffoldReturn, useBottomSheetScaffold };