@columenlabs/lumen-ui 0.1.291 → 0.1.292

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendar
 export { DetailsTable, type DetailsTableProps, FactsTable } from './details-table.js';
 export { DrawerSection, type DrawerSectionProps } from './drawer-section.js';
 export { type DrawerAction, LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
+export { LumenBottomSheet, type LumenBottomSheetProps, type SheetSnap } from './lumen-bottom-sheet.js';
 export { LumenCode, type LumenCodeProps, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, type LumenCodeEditorProps, type LumenCodeLang, } from './lumen-code-editor.js';
 export { RenameField, type RenameFieldProps } from './rename-field.js';

package/dist/index.js

@@ -47,6 +47,7 @@ export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';
 export { DetailsTable, FactsTable } from './details-table.js';
 export { DrawerSection } from './drawer-section.js';
 export { LumenDrawer } from './lumen-drawer.js';
+export { LumenBottomSheet } from './lumen-bottom-sheet.js';
 export { LumenCode, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, } from './lumen-code-editor.js';
 export { RenameField } from './rename-field.js';

package/dist/lumen-bottom-sheet.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/** A snap point: a share of the screen's height (0 to 1) or a height in px ("76px"). */
+export type SheetSnap = number | string;
+export interface LumenBottomSheetProps {
+    /** The heights it rests at, smallest first: `['76px', 0.5, 0.92]` is peek, half and full. */
+    snaps: SheetSnap[];
+    /** Where it rests now (one of `snaps`). */
+    snap: SheetSnap;
+    /** The person dragged it to another snap. */
+    onSnap: (snap: SheetSnap) => void;
+    /** Its name for screen readers. */
+    title: string;
+    /** What it holds. It stays mounted at every snap, so running work inside keeps going. */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * A bottom sheet that stays on screen and leaves the page under it live: no dim, no blur, taps and
+ * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
+ * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
+ */
+export declare function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }: LumenBottomSheetProps): React.JSX.Element;

package/dist/lumen-bottom-sheet.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Drawer } from 'vaul';
+import { cn } from './lib/utils.js';
+/** A snap point in px against a screen `h` px tall. */
+function px(s, h) {
+    if (typeof s === 'number')
+        return s * h;
+    return Number.parseFloat(s);
+}
+/** The screen's height, kept up to date. */
+function useScreenHeight() {
+    const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : window.innerHeight);
+    React.useEffect(() => {
+        const on = () => setH(window.innerHeight);
+        window.addEventListener('resize', on);
+        return () => window.removeEventListener('resize', on);
+    }, []);
+    return h;
+}
+/**
+ * A bottom sheet that stays on screen and leaves the page under it live: no dim, no blur, taps and
+ * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
+ * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
+ */
+export function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }) {
+    const h = useScreenHeight();
+    // The sheet is as tall as the screen and slides down to its snap; what it holds fills only the
+    // part on screen, so a composer or footer at its bottom stays in view at every snap.
+    const shown = Math.min(h, Math.max(0, px(snap, h)));
+    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: snaps, activeSnapPoint: snap, setActiveSnapPoint: (s) => s != null && onSnap(s), children: _jsx(Drawer.Portal, { children: _jsxs(Drawer.Content, { "data-slot": "lumen-bottom-sheet", "aria-describedby": undefined, 
+                // Focus stays where the person was: the sheet is always there, opening it is not a move.
+                onOpenAutoFocus: (e) => e.preventDefault(), className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: children })] })] }) }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.291",
+  "version": "0.1.292",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.291",
+    "@columenlabs/lumen-ui-types": "0.1.292",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -82,6 +82,7 @@
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "topojson-client": "3.1.0",
+    "vaul": "1.1.2",
     "web-vitals": "6.2.3",
     "world-atlas": "2.0.2"
   },