@yourrealm/bottom-sheet 0.0.0-stage → 0.2.0

package/dist/styled.css

@@ -0,0 +1,168 @@
+/*
+ * @yourrealm/bottom-sheet/styled: the preset look, plus the structural CSS it builds on. Import it once, before
+ * Tailwind:  @import "@yourrealm/bottom-sheet/styled.css";
+ */
+@import "./styles.css";
+/*
+ * The polished preset. Override with the --ybs-* tokens.
+ * Light/dark follow the app's `color-scheme` (inherited from <html>), via light-dark(): an app with its own theme
+ * switch that sets `color-scheme` gets a matching sheet; `html { color-scheme: light dark }` follows the OS.
+ */
+@layer ybs {
+:root { --ybs-css-styled: 1; }
+[data-ybs-root] {
+  --ybs-sheet-bg: light-dark(#fff, #1c1c1e);
+  --ybs-sheet-fg: light-dark(#111, #f2f2f7);
+  --ybs-muted: light-dark(#6b6b70, #98989f);
+  --ybs-handle: light-dark(rgba(60, 60, 67, 0.3), rgba(235, 235, 245, 0.3));
+  --ybs-divider: light-dark(rgba(60, 60, 67, 0.12), rgba(235, 235, 245, 0.12));
+  --ybs-radius: 14px;
+  --ybs-title-size: 17px;
+  /* Side padding of the body, matching the header. 0 for edge-to-edge lists that pad their own rows. */
+  --ybs-body-padding: 16px;
+  --ybs-backdrop: #000;
+  --ybs-backdrop-max: 0.4;
+  --ybs-max-width: 640px;
+  --ybs-content-width: 960px;
+  --ybs-float-gap: 8px;
+  --ybs-float-radius: 32px;
+  /* 1 within the last 10% of travel to full, else 0..: corners square off as a fullscreen sheet reaches the top. */
+  --ybs-at-top: clamp(0, (var(--ybs-progress, 0) - 0.9) * 10, 1);
+}
+.ybs-backdrop {
+  background: var(--ybs-backdrop);
+  opacity: calc(var(--ybs-progress, 0) * var(--ybs-backdrop-max));
+}
+.ybs-bleed { background: var(--ybs-sheet-bg); }
+/* Stacked sheets: the covered sheet recedes (scales back and lifts slightly), like iOS. */
+.ybs-view { transform-origin: 50% 0; transition: none; }
+[data-ybs-root][data-ybs-covered] .ybs-view {
+  transform: translateY(calc(var(--ybs-covered, 0) * -6px)) scale(calc(1 - var(--ybs-covered, 0) * 0.06));
+  border-radius: var(--ybs-radius);
+}
+[data-ybs-root][data-ybs-covered] .ybs-bleed { opacity: 0; }
+.ybs-sheet {
+  background: var(--ybs-sheet-bg);
+  color: var(--ybs-sheet-fg);
+  border-radius: var(--ybs-radius) var(--ybs-radius) 0 0;
+  box-shadow: 0 -1px 0 var(--ybs-divider), 0 -8px 30px rgba(0, 0, 0, 0.08);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  font-family: system-ui, -apple-system, sans-serif;
+  max-width: var(--ybs-max-width); margin-inline: auto;
+  /* The body's real side inset, for content that reaches the edges (Sheet.Edge). The sheet is a size container so
+     a full-width sheet's inset (which depends on the sheet's width) resolves the same at any depth inside it. */
+  container-type: inline-size;
+  --ybs-body-inset: var(--ybs-body-padding);
+}
+/* Full width: the surface spans the window; header and body keep their full width (no corner seams) but pad
+   their contents into a readable centred column. */
+.ybs-sheet.ybs-sheet-full { max-width: none; --ybs-body-inset: max(var(--ybs-body-padding), (100cqw - var(--ybs-content-width)) / 2); }
+.ybs-sheet-full > .ybs-header { padding-inline: max(16px, (100% - var(--ybs-content-width)) / 2); }
+
+/* A page sheet sits lower than the receded page's top edge (+10px), so a strip of that page shows above it, like iOS. */
+[data-ybs-root]:has(.ybs-sheet-page):not([data-ybs-fullscreen]) { --ybs-inset: calc(env(safe-area-inset-top, 0px) + 22px); }
+/* A page sheet fills the screen at full even when its content is short (no fit-content). */
+.ybs-sheet.ybs-sheet-page { min-height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset)); }
+/* Header bar: leading | title | trailing, the title centred like an iOS navigation bar. */
+.ybs-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
+.ybs-bar > .ybs-title { text-align: center; }
+.ybs-leading { justify-self: start; }
+/* Title with the ✕ beside it (closeButton without leading/trailing). */
+.ybs-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.ybs-trailing:has(.ybs-close) { display: flex; align-items: center; gap: 8px; }
+/* The ✕: a soft filled 30px circle, with a 44px tap area. */
+.ybs-close {
+  flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -7px -7px -7px 0; padding: 0;
+  border: 7px solid transparent; box-sizing: content-box; background: color-mix(in srgb, var(--ybs-muted) 18%, transparent);
+  background-clip: padding-box; border-radius: 50%; color: var(--ybs-muted); cursor: pointer;
+}
+.ybs-close:active { background-color: color-mix(in srgb, var(--ybs-muted) 30%, transparent); }
+.ybs-close svg { width: 12px; height: 12px; stroke: var(--ybs-muted); /* not currentColor: app button resets set color */ stroke-width: 1.8; stroke-linecap: round; fill: none; }
+/* Screen-reader close: off screen until focused (then a small pill in the header's corner). */
+.ybs-sr-close {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
+  white-space: nowrap; border: 0;
+}
+.ybs-sr-close:focus-visible {
+  top: 8px; right: 12px; width: auto; height: auto; margin: 0; padding: 4px 12px; overflow: visible; clip-path: none;
+  border-radius: 999px; background: var(--ybs-sheet-fg); color: var(--ybs-sheet-bg); font-size: 14px;
+}
+.ybs-trailing { justify-self: end; }
+/* Floating (iOS 26): at lower detents the sheet floats, inset from the sides and the bottom with large corners;
+   over the last quarter of the travel to full it attaches (the gap closes, the bottom corners slide off-screen).
+   A clip-path, so nothing reflows while the sheet moves. --ybs-visible is the on-screen height of the sheet, so
+   100% - visible is the part below the screen edge. */
+.ybs-sheet.ybs-sheet-floating {
+  --ybs-float: calc(1 - clamp(0, (var(--ybs-progress, 0) - 0.75) * 4, 1));
+  --ybs-g: calc(var(--ybs-float-gap) * var(--ybs-float));
+  --ybs-rt: calc(var(--ybs-radius) + (var(--ybs-float-radius) - var(--ybs-radius)) * var(--ybs-float));
+  --ybs-rb: calc(var(--ybs-float-radius) * var(--ybs-float));
+  clip-path: inset(0 var(--ybs-g) calc((100% - var(--ybs-visible, 0px)) * var(--ybs-float) + var(--ybs-g)) var(--ybs-g)
+    round var(--ybs-rt) var(--ybs-rt) var(--ybs-rb) var(--ybs-rb));
+}
+/* A 'header' detent on a floating sheet: the clip lifts the bottom edge by the gap, so the peek grows by it. */
+[data-ybs-root]:has(.ybs-sheet-floating) { --ybs-header-detent-offset: var(--ybs-float-gap); }
+/* Fullscreen: square corners at the top (they would show the page through), header clear of the notch. */
+[data-ybs-fullscreen] .ybs-sheet, [data-ybs-fullscreen] .ybs-header {
+  --ybs-r: calc(var(--ybs-radius) * (1 - var(--ybs-at-top)));
+  border-radius: var(--ybs-r) var(--ybs-r) 0 0;
+}
+[data-ybs-fullscreen] .ybs-header { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
+.ybs-header {
+  background: var(--ybs-sheet-bg);
+  border-radius: var(--ybs-radius) var(--ybs-radius) 0 0;
+  padding: 6px 16px 12px;
+  /* The divider marks content scrolled under the header, so it only shows then (like iOS/Material bars);
+     at rest the header's bottom padding is the gap. data-ybs-scrolled is set by the controller. */
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 150ms;
+  /* Content scrolls under this sticky header; at fractional positions (device scaling, or a covered
+     sheet's scale) a 1px sliver of it can show above. Cover it with the sheet colour. */
+  box-shadow: 0 -2px 0 0 var(--ybs-sheet-bg);
+}
+[data-ybs-scrolled] .ybs-header { border-bottom-color: var(--ybs-divider); }
+.ybs-handle {
+  width: 36px; height: 5px; border-radius: 3px;
+  background: var(--ybs-handle);
+  margin: 0 auto 10px;
+}
+.ybs-eyebrow { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--ybs-muted); }
+.ybs-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+/* No title (a sheet named by aria-label): the header is just the grabber, without the space a title would need. */
+.ybs-header:has(> .ybs-handle:last-child), .ybs-header:has(> .ybs-handle + .ybs-sr-close:last-child) { padding-bottom: 0; }
+.ybs-title { margin: 0; font-size: var(--ybs-title-size); font-weight: 600; line-height: 1.3; }
+.ybs-description { margin: 4px 0 0; font-size: 14px; color: var(--ybs-muted); }
+.ybs-body { padding: 0 var(--ybs-body-inset) 12px; }
+/* Sheet.Edge: reaches the sheet's edges and pads its contents back in line with the body (a photo strip that
+   scrolls sideways, a full-width tappable row, a separator). */
+.ybs-edge { margin-inline: calc(-1 * var(--ybs-body-inset)); padding-inline: var(--ybs-body-inset); }
+/* Footer: actions pinned to the screen bottom. It takes the safe area from the sheet, and its line (like the
+   header's) shows only while content is hidden behind it (data-ybs-more, set by the controller). */
+.ybs-footer {
+  background: var(--ybs-sheet-bg);
+  padding: 12px var(--ybs-body-inset) calc(12px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid transparent;
+  transition: border-top-color 150ms;
+  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
+}
+[data-ybs-more] .ybs-footer { border-top-color: var(--ybs-divider); }
+.ybs-sheet:has(> .ybs-footer) { padding-bottom: 0; }
+/* Floating: the clip lifts the bottom edge by the gap at lower detents; the footer stays above it. */
+.ybs-sheet-floating > .ybs-footer { bottom: var(--ybs-g); }
+/* Floating: the visible edge is the clip, a gap in from the sheet's box, so the side space adds the gap (fixed, not
+   following the float: padding that changed while dragging would reflow every frame). */
+.ybs-sheet.ybs-sheet-floating:not(.ybs-sheet-full) { --ybs-body-inset: calc(var(--ybs-body-padding) + var(--ybs-float-gap)); }
+.ybs-sheet-floating:not(.ybs-sheet-full) > .ybs-header { padding-inline: calc(16px + var(--ybs-float-gap)); }
+/* The page behind recedes (Sheet.Root recede + data-ybs-background on the app wrapper), like iOS: it scales back
+   from the top of the screen, drops below the status bar and rounds its top corners over black. The wrapper needs
+   its own background (html and body turn black). */
+/* !important: our layer loses to the app's own unlayered html/body background, and this must win while receding. */
+html[data-ybs-recede]:has([data-ybs-background]), html[data-ybs-recede]:has([data-ybs-background]) body { background: #000 !important; }
+html[data-ybs-recede] [data-ybs-background] {
+  /* Like iOS, a sheet covering half the screen only dims the page; it recedes as the sheet covers the screen. */
+  --ybs-r: clamp(0, (var(--ybs-recede, 0) - 0.6) * 2.5, 1);
+  transform-origin: 50% var(--ybs-scroll-y, 0px);
+  transform: translateY(calc(var(--ybs-r) * (env(safe-area-inset-top, 0px) + 10px))) scale(calc(1 - var(--ybs-r) * 0.07));
+  clip-path: inset(var(--ybs-scroll-y, 0px) 0 0 0 round calc(var(--ybs-r) * 12px) calc(var(--ybs-r) * 12px) 0 0);
+}
+}

package/dist/styled.d.ts

@@ -0,0 +1,106 @@
+
+import { a as OpenChangeDetails, c as PortalProps, d as Trigger, f as TriggerProps, g as Detent, i as InteractionType, l as Root, m as ViewProps, n as ContentProps, o as OpenChangeReason, p as TriggerRenderProps, r as InitialFocus, s as Portal, t as Close, u as RootProps } from "./sheet-5lG9EBB5.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+/**
+ * Styled parts: the pieces `BottomSheet` is built from, with the preset look (same API as the headless `Sheet`).
+ * Prefer `BottomSheet`; use these only to arrange a sheet yourself.
+ */
+export declare const StyledSheet: {
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Close: typeof Close;
+  Portal: typeof Portal;
+  Backdrop: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  View: (p: ViewProps) => import("react").JSX.Element;
+  Content: (p: ContentProps) => import("react").JSX.Element;
+  Header: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  Handle: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  Title: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => import("react").JSX.Element;
+  Description: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").JSX.Element;
+  Footer: (p: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
+  /** The padded content area, after `Header`: the same side space as the header, so text lines up with the title. */
+  Body: ({ className, ...p }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+  /**
+   * Content that reaches the sheet's edges, inside the body: a sideways photo strip, a full-width tappable row, a
+   * separator. Its contents stay lined up with the rest of the body. The inset is `--ybs-body-inset`.
+   */
+  Edge: ({ className, ...p }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+};
+interface BottomSheetBaseProps extends Omit<RootProps, 'children'> {
+  /**
+   * What opens the sheet. Content (text, elements) is placed inside our trigger button. A function renders your own
+   * button instead: `trigger={(props) => <Button variant="paper" {...props}>Open</Button>}` (it receives `type`,
+   * `onClick` and the ARIA state; put className, disabled, aria-label on your button).
+   */
+  trigger?: ReactNode | ((props: TriggerRenderProps) => ReactElement);
+  /** A small label above the title (a section, a category). Part of the title, so screen readers read both. */
+  eyebrow?: ReactNode;
+  description?: ReactNode;
+  /**
+   * - `'sheet'` (default): detents as given, a card-width sheet.
+   * - `'page'`: an iOS-style page sheet for a task (compose, edit): opens straight to full,
+   *   spans the full width (`width` default `'full'`), and the page behind recedes (`recede` default true; mark your
+   *   app wrapper with `data-ybs-background`). Pair it with `leading` / `trailing` (Cancel / Save).
+   */
+  variant?: 'sheet' | 'page';
+  /**
+   * - `'card'` (default for `sheet`): the sheet is at most 640px wide (`--ybs-max-width`), centred.
+   * - `'full'` (default for `page`): the sheet spans the window; its header and body stay in a centred column
+   *   (`--ybs-content-width`, default 960px).
+   */
+  width?: 'card' | 'full';
+  /**
+   * iOS 26 style: at lower detents the sheet floats (inset from the screen edges, large corners) and attaches as it
+   * reaches full. Tokens: --ybs-float-gap (8px), --ybs-float-radius (32px).
+   */
+  floating?: boolean;
+  /** Header bar slots, iOS navigation-bar style: e.g. `leading={<BottomSheet.Close>Cancel</BottomSheet.Close>}`. The title centres between them. */
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /** Extra content placed in the sticky header under the title (e.g. a search field). */
+  headerExtra?: ReactNode;
+  /**
+   * Actions pinned to the bottom of the screen (Cancel / Confirm, Show results). They stay reachable while a long
+   * sheet scrolls, reach the sheet's edges, and take the home-bar safe area. A line appears above them only while
+   * content is hidden behind them.
+   */
+  footer?: ReactNode;
+  /**
+   * A visible ✕ button in the header's top right that closes the sheet. Off by default. Without it, a dismissible
+   * sheet still has a close button that only screen readers announce (it shows when focused by keyboard), because
+   * swipes and the dimmed area aren't usable with VoiceOver.
+   */
+  closeButton?: boolean;
+  /** Accessible name of the close button (visible ✕ or screen-reader only). Default `'Close'`. */
+  closeLabel?: string;
+  /**
+   * Where focus goes when the sheet opens, like Base UI's: an element ref, `false`, `true` (the sheet), or a function
+   * of how it was opened, e.g. `(type) => type !== 'touch' && saveRef.current`. Default: the sheet for a modal sheet,
+   * nothing for a non-modal one.
+   */
+  initialFocus?: InitialFocus;
+  children?: ReactNode;
+  className?: string;
+  contentProps?: ComponentPropsWithRef<'section'>;
+}
+/**
+ * Every sheet needs a name for screen readers ("Share photo, dialog"): a visible `title`, or an `aria-label` for a
+ * sheet without one (an action list, a photo viewer). TypeScript refuses a sheet with neither.
+ */
+export type BottomSheetProps = BottomSheetBaseProps & ({
+  title: NonNullable<ReactNode>;
+  'aria-label'?: string;
+} | {
+  title?: undefined; /** Names a sheet that has no visible title. */
+  'aria-label': string;
+});
+/**
+ * The simple path:
+ *   <BottomSheet trigger="Open" title="Settings">…</BottomSheet>
+ */
+export declare function BottomSheet({ trigger, title, eyebrow, description, variant, floating, width, leading, trailing, headerExtra, footer, closeButton, closeLabel, initialFocus, children, className, contentProps, 'aria-label': ariaLabel, ...rootProps }: BottomSheetProps): import("react").JSX.Element;
+export declare namespace BottomSheet {
+  var Edge: ({ className, ...p }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+  var Close: typeof Close;
+}
+export type { ContentProps, Detent, InitialFocus, InteractionType, OpenChangeDetails, OpenChangeReason, PortalProps, RootProps, TriggerProps, TriggerRenderProps, ViewProps };

package/dist/styled.js

@@ -0,0 +1,125 @@
+'use client';
+import { a as Footer, c as Portal, d as Trigger, f as View, i as Description, l as Root, m as checkCss, n as Close, o as Handle, r as Content, s as Header, t as Backdrop, u as Title } from "./sheet-C1fUpy71.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/styled/index.tsx
+const cx = (...c) => c.filter(Boolean).join(" ");
+function withClass(Comp, cls) {
+	return (p) => /* @__PURE__ */ jsx(Comp, {
+		...p,
+		className: cx(cls, p.className)
+	});
+}
+/**
+* Styled parts: the pieces `BottomSheet` is built from, with the preset look (same API as the headless `Sheet`).
+* Prefer `BottomSheet`; use these only to arrange a sheet yourself.
+*/
+const StyledSheet = {
+	Root,
+	Trigger,
+	Close,
+	Portal,
+	Backdrop: withClass(Backdrop, "ybs-backdrop"),
+	View: (p) => {
+		useEffect(() => checkCss("styled", "styled.css"), []);
+		return /* @__PURE__ */ jsx(View, {
+			...p,
+			className: cx("ybs-view", p.className),
+			bleedClassName: cx("ybs-bleed", p.bleedClassName)
+		});
+	},
+	Content: withClass(Content, "ybs-sheet"),
+	Header: withClass(Header, "ybs-header"),
+	Handle: withClass(Handle, "ybs-handle"),
+	Title: withClass(Title, "ybs-title"),
+	Description: withClass(Description, "ybs-description"),
+	Footer: withClass(Footer, "ybs-footer"),
+	/** The padded content area, after `Header`: the same side space as the header, so text lines up with the title. */
+	Body: ({ className, ...p }) => /* @__PURE__ */ jsx("div", {
+		...p,
+		className: cx("ybs-body", className)
+	}),
+	/**
+	* Content that reaches the sheet's edges, inside the body: a sideways photo strip, a full-width tappable row, a
+	* separator. Its contents stay lined up with the rest of the body. The inset is `--ybs-body-inset`.
+	*/
+	Edge: ({ className, ...p }) => /* @__PURE__ */ jsx("div", {
+		...p,
+		className: cx("ybs-edge", className)
+	})
+};
+/**
+* The simple path:
+*   <BottomSheet trigger="Open" title="Settings">…</BottomSheet>
+*/
+function BottomSheet({ trigger, title, eyebrow, description, variant = "sheet", floating = false, width = variant === "page" ? "full" : "card", leading, trailing, headerExtra, footer, closeButton = false, closeLabel = "Close", initialFocus, children, className, contentProps, "aria-label": ariaLabel, ...rootProps }) {
+	const root = variant === "page" ? {
+		recede: true,
+		...rootProps
+	} : rootProps;
+	const bar = leading != null || trailing != null;
+	const heading = title == null ? null : /* @__PURE__ */ jsxs(StyledSheet.Title, { children: [eyebrow != null && /* @__PURE__ */ jsxs("span", {
+		className: "ybs-eyebrow",
+		children: [eyebrow, /* @__PURE__ */ jsx("span", {
+			className: "ybs-sr-only",
+			children: ", "
+		})]
+	}), title] });
+	const close = closeButton ? /* @__PURE__ */ jsx(StyledSheet.Close, {
+		className: "ybs-close",
+		"aria-label": closeLabel,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2l-8 8" })
+		})
+	}) : null;
+	const srClose = !closeButton && rootProps.dismissible !== false && /* @__PURE__ */ jsx(StyledSheet.Close, {
+		className: "ybs-sr-close",
+		children: closeLabel
+	});
+	return /* @__PURE__ */ jsxs(StyledSheet.Root, {
+		...root,
+		children: [typeof trigger === "function" ? /* @__PURE__ */ jsx(StyledSheet.Trigger, { render: trigger }) : trigger != null && /* @__PURE__ */ jsx(StyledSheet.Trigger, {
+			className: "ybs-trigger",
+			children: trigger
+		}), /* @__PURE__ */ jsxs(StyledSheet.Portal, { children: [root.modal !== false && /* @__PURE__ */ jsx(StyledSheet.Backdrop, {}), /* @__PURE__ */ jsx(StyledSheet.View, { children: /* @__PURE__ */ jsxs(StyledSheet.Content, {
+			...contentProps,
+			"aria-label": ariaLabel ?? contentProps?.["aria-label"],
+			initialFocus,
+			className: cx(width === "full" && "ybs-sheet-full", variant === "page" && "ybs-sheet-page", floating && "ybs-sheet-floating", className, contentProps?.className),
+			children: [
+				/* @__PURE__ */ jsxs(StyledSheet.Header, { children: [
+					/* @__PURE__ */ jsx(StyledSheet.Handle, {}),
+					bar ? /* @__PURE__ */ jsxs("div", {
+						className: "ybs-bar",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "ybs-leading",
+								children: leading
+							}),
+							heading ?? /* @__PURE__ */ jsx("span", {}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "ybs-trailing",
+								children: [trailing, close]
+							})
+						]
+					}) : close ? /* @__PURE__ */ jsxs("div", {
+						className: "ybs-title-row",
+						children: [heading ?? /* @__PURE__ */ jsx("span", {}), close]
+					}) : heading,
+					description != null && /* @__PURE__ */ jsx(StyledSheet.Description, { children: description }),
+					headerExtra,
+					srClose
+				] }),
+				/* @__PURE__ */ jsx(StyledSheet.Body, { children }),
+				footer != null && /* @__PURE__ */ jsx(StyledSheet.Footer, { children: footer })
+			]
+		}) })] })]
+	});
+}
+/** Content that reaches the sheet's edges (see `StyledSheet.Edge`), for use inside `<BottomSheet>`. */
+BottomSheet.Edge = StyledSheet.Edge;
+/** Closes the sheet it's in, e.g. a Cancel button in `leading` or `footer`. */
+BottomSheet.Close = StyledSheet.Close;
+export { BottomSheet, StyledSheet };

package/dist/styles.css

@@ -0,0 +1,105 @@
+/*
+ * @yourrealm/bottom-sheet: structural CSS (the mechanics: overlay, scroller, snapping). Import it once, before
+ * Tailwind:  @import "@yourrealm/bottom-sheet/styles.css";  (or styled.css, which includes it).
+ * Everything is in the `ybs` cascade layer, ordered between Tailwind v4's `base` and `components`, so preflight
+ * can't reset it and your utilities and unlayered CSS win. The order statement only counts if this comes first.
+ */
+/*
+ * Structural CSS only: the mechanics that make the single-scroller sheet work.
+ * No colours, radii or spacing; those belong to the consumer or `/styled`.
+ *
+ * CSS variables set by the controller on [data-ybs-root]:
+ *   --ybs-h         available height (px)
+ *   --ybs-vv-top    visualViewport.offsetTop (px)
+ *   --ybs-vv-h      visualViewport.height (px)
+ *   --ybs-progress  0..1, closed -> full
+ *   --ybs-visible   px of the sheet on screen (scrollTop, capped at full)
+ *   --ybs-bleed     0|1, whether the bleed (sheet colour under the visual viewport) shows
+ * Consumer-settable:
+ *   --ybs-inset     gap above the sheet at the full detent (default: safe area + 10px; 0 with fullscreen)
+ *   --ybs-sheet-bg  colour of the bleed, should match the sheet
+ */
+@layer theme, base, ybs, components, utilities;
+@layer ybs {
+/* Marker: tells the library this file is loaded (it logs an error when a sheet opens without it). */
+:root { --ybs-css-core: 1; }
+[data-ybs-root] {
+  --ybs-inset: calc(env(safe-area-inset-top, 0px) + 10px);
+  position: fixed; inset: 0; z-index: 50; pointer-events: none;
+}
+[data-ybs-root][data-ybs-fullscreen] { --ybs-inset: 0px; }
+/* Fullscreen means the full detent covers the screen, even with short content. */
+[data-ybs-root][data-ybs-fullscreen] [data-ybs-sheet] { min-height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset)); }
+[data-ybs-backdrop] {
+  position: fixed; left: 0; right: 0; top: var(--ybs-vv-top, 0px); height: 200lvh;
+  pointer-events: auto;
+}
+[data-ybs-bleed] {
+  position: fixed; left: 0; right: 0; height: 100lvh;
+  top: calc(var(--ybs-vv-top, 0px) + var(--ybs-vv-h, 100dvh));
+  background: var(--ybs-sheet-bg, Canvas);
+  opacity: var(--ybs-bleed, 0);
+}
+[data-ybs-scroller] {
+  position: fixed; left: 0; right: 0;
+  top: calc(var(--ybs-vv-top, 0px) + var(--ybs-inset));
+  height: calc(var(--ybs-vv-h, 100dvh) - var(--ybs-inset));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  pointer-events: auto;
+}
+[data-ybs-scroller]::-webkit-scrollbar { display: none; }
+[data-ybs-root][data-ybs-drag] [data-ybs-scroller],
+[data-ybs-root][data-ybs-glide] [data-ybs-scroller] { scroll-snap-type: none; }
+[data-ybs-track] { position: relative; }
+[data-ybs-spacer] { height: var(--ybs-h, 100dvh); touch-action: none; }
+[data-ybs-markers] { position: absolute; top: 0; left: 0; width: 1px; height: 0; }
+[data-ybs-marker] {
+  position: absolute; left: 0; width: 1px; height: 1px;
+  scroll-snap-align: start; pointer-events: none;
+}
+/* The 'header' peek catches flings (like Material's collapsed state); other partial detents let a fling run past. */
+[data-ybs-marker][data-ybs-catch] { scroll-snap-stop: always; }
+/* scroll-snap-stop: a fling may not skip the full position, in either direction. This is the native
+   way to stop momentum at the content top / full detent; the JS guard is only a fallback. (Firefox
+   Android: the JS overflow toggle made the next touch get swallowed as a "stop the fling" tap.) */
+[data-ybs-sheet] { position: relative; scroll-snap-align: start; scroll-snap-stop: always; outline: none; }
+[data-ybs-root][data-ybs-fit] [data-ybs-sheet] { scroll-snap-align: end; }
+[data-ybs-header] { position: sticky; top: 0; z-index: 1; }
+[data-ybs-footer] {
+  position: sticky; bottom: 0; z-index: 1;
+  /* At a peek lower than header + footer, pinning the footer to the screen bottom would cover the header. Push it
+     down so it sits under the header instead (off screen at a header peek), and let it pin once there's room. */
+  translate: 0 max(0px, var(--ybs-header-h, 0px) + var(--ybs-header-detent-offset, 0px) + 100% - var(--ybs-visible, 100vh));
+}
+/* Content scrolled: a drag on the header moves the whole sheet (JS, "detached drag"), like native, instead of
+   scrolling the content back first. */
+[data-ybs-root][data-ybs-scrolled] [data-ybs-drag] { touch-action: none; }
+/* Non-modal: the layer lets taps, clicks and wheel through to the page; only the sheet takes them. A drag on
+   the sheet still scrolls the scroller (its scroll container), which is how the sheet moves. */
+[data-ybs-root][data-ybs-modeless] [data-ybs-scroller] { pointer-events: none; }
+[data-ybs-root][data-ybs-modeless] [data-ybs-sheet] { pointer-events: auto; }
+/* iOS Safari won't scroll a pointer-events:none scroller from a touch on its pointer-events:auto child unless
+   there is a scroll container under the finger. Make each direct part of the sheet a 1px-wide horizontal
+   scroller (overflow-y stays clipped to its own height, so sticky headers keep sticking to the scroller); the
+   vertical drag then chains to the sheet scroller. WebKit touch only. */
+@supports (-webkit-touch-callout: none) {
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > * {
+    overflow-x: scroll; overflow-y: hidden; overscroll-behavior-x: none; scrollbar-width: none;
+  }
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *::-webkit-scrollbar { display: none; }
+  /* 1px of horizontal overflow, measured from the padding box so side padding can't absorb it. */
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *:not([data-ybs-header], [data-ybs-footer]) { position: relative; }
+  [data-ybs-root][data-ybs-modeless] [data-ybs-sheet] > *::after {
+    content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 1px); height: 1px; pointer-events: none;
+  }
+}
+/* Stacked: a covered sheet is inert (set by the sheet above), so it can't be scrolled. Don't toggle its
+   overflow: Firefox re-snaps on overflow changes. The visual recede lives in /styled. */
+@media (pointer: fine) {
+  [data-ybs-drag] { cursor: grab; user-select: none; -webkit-user-select: none; }
+  [data-ybs-root][data-ybs-drag="active"] [data-ybs-drag] { cursor: grabbing; }
+}
+}

package/package.json

@@ -1,6 +1,66 @@
 {
   "name": "@yourrealm/bottom-sheet",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Native-feeling bottom sheet for the web. One native scroller for sheet travel and content.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourrealm/bottom-sheet.git",
+    "directory": "packages/bottom-sheet"
+  },
+  "homepage": "https://yourrealm.github.io/bottom-sheet/",
+  "bugs": "https://github.com/yourrealm/bottom-sheet/issues",
+  "keywords": [
+    "react",
+    "bottom-sheet",
+    "sheet",
+    "drawer",
+    "scroll-snap",
+    "mobile",
+    "headless"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styled": {
+      "types": "./dist/styled.d.ts",
+      "import": "./dist/styled.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css",
+    "./styled.css": "./dist/styled.css"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsdown": "^0.23.4",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.5"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/build-css.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc -p .",
+    "pack:check": "node scripts/prepack.mjs && pnpm build && pnpm pack; rm -f README.md LICENSE CHANGELOG.md",
+    "release": "node scripts/prepack.mjs && pnpm build && pnpm publish --access public; rm -f README.md LICENSE CHANGELOG.md"
+  }
 }