@podoba/react 0.0.32 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.32",
+	"version": "0.0.34",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -28,8 +28,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.32",
-		"@podoba/tailwind": "^0.0.32",
+		"@podoba/tokens": "^0.0.34",
+		"@podoba/tailwind": "^0.0.34",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react'
+import { type ReactNode, useEffect, useId, useRef, useState } from 'react'
 import { Button } from './button'
 import { DisplayHeading } from './text'
 
@@ -8,10 +8,9 @@ import { DisplayHeading } from './text'
  *
  * gs-platform's header is a two-column grid: a left "welcome" section
  * (optional breadcrumbs + a large greeting line) and a right section holding an
- * `ExpandableCTA` — a collapsed teal pill that expands into an inline
- * create-hub panel. We port that interaction to React Aria + Tailwind + the
- * teal accent token (`brand-secondary`), dropping gs-platform's mobile
- * fixed-sheet behaviour for a simpler inline disclosure.
+ * `ExpandableCTA` — a collapsed teal pill that expands into a create-hub panel.
+ * The supplied hero `CtaPill` owns the source mobile fixed-bar treatment; this
+ * header switches to the desktop 2/3 + 1/3 grid at the matching 768px breakpoint.
  *
  * The expandable CTA is a controlled disclosure: the collapsed teal pill is a
  * React Aria `Button` (keyboard + focus ring + press handling) wired to a
@@ -28,6 +27,12 @@ export type BrandPageHeaderCrumb = {
 	onPress?: () => void
 }
 
+export type BrandPageHeaderCtaRenderProps = {
+	expanded: boolean
+	controls: string
+	toggle: () => void
+}
+
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
@@ -44,11 +49,12 @@ export type BrandPageHeaderProps = {
 	/** Optional breadcrumb trail rendered above the greeting. */
 	breadcrumbs?: BrandPageHeaderCrumb[]
 	/**
-	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner). When
-	 * set it REPLACES the collapsed-pill ExpandableCTA — use this for the
-	 * gs-faithful "Let's create something" hero. `ctaLabel`/`createHub` are ignored.
+	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner), or a
+	 * render function receiving the disclosure state and generated controls id.
+	 * Prefer the render function when the CTA opens `createHub`, so its trigger can
+	 * expose `aria-expanded` and `aria-controls`.
 	 */
-	cta?: ReactNode
+	cta?: ReactNode | ((state: BrandPageHeaderCtaRenderProps) => ReactNode)
 	/** Label on the collapsed teal "Create" pill. Required to render the CTA. */
 	ctaLabel?: ReactNode
 	/** Inline content revealed when the CTA expands (the create hub). */
@@ -60,11 +66,14 @@ export type BrandPageHeaderProps = {
 	closeLabel?: string
 	/** Sticky header on scroll. */
 	sticky?: boolean
+	/**
+	 * Dock the supplied CTA to the safe bottom edge below 768px, matching the
+	 * source Manager's collapsed ExpandableCTA. Enabled by default.
+	 */
+	mobileCtaDocked?: boolean
 	className?: string
 }
 
-const PANEL_ID = 'brand-page-header-create-hub'
-
 export function BrandPageHeader({
 	greeting,
 	headingLevel = 1,
@@ -77,18 +86,152 @@ export function BrandPageHeader({
 	onExpandedChange,
 	closeLabel = 'Close',
 	sticky = false,
+	mobileCtaDocked = true,
 	className,
 }: BrandPageHeaderProps) {
 	const [internalExpanded, setInternalExpanded] = useState(false)
+	const [mobileSheet, setMobileSheet] = useState(false)
+	const [mobileFull, setMobileFull] = useState(false)
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
 	const HeadingTag = `h${headingLevel}` as const
+	const panelId = useId()
+	const panelRef = useRef<HTMLDivElement>(null)
+	const contentRef = useRef<HTMLDivElement>(null)
+	const returnFocusRef = useRef<HTMLElement | null>(null)
+	const touchStartYRef = useRef(0)
+	const touchStartScrollTopRef = useRef(0)
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
 		onExpandedChange?.(next)
 	}
+	const renderedCta =
+		typeof cta === 'function'
+			? cta({
+					expanded,
+					controls: panelId,
+					toggle: () => setExpanded(!expanded),
+				})
+			: cta
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+
+		returnFocusRef.current =
+			document.activeElement instanceof HTMLElement ? document.activeElement : null
+
+		let lockedScrollY = 0
+		let restoreBody: (() => void) | undefined
+
+		const updateComposition = () => {
+			const isMobile = window.innerWidth < 768
+			setMobileSheet(isMobile)
+
+			const content = contentRef.current
+			setMobileFull(Boolean(isMobile && content && content.scrollHeight >= window.innerHeight * 0.4))
+
+			if (isMobile && !restoreBody) {
+				lockedScrollY = window.scrollY
+				const previous = {
+					overflow: document.body.style.overflow,
+					position: document.body.style.position,
+					top: document.body.style.top,
+					width: document.body.style.width,
+				}
+				document.body.style.overflow = 'hidden'
+				document.body.style.position = 'fixed'
+				document.body.style.top = `-${lockedScrollY}px`
+				document.body.style.width = '100%'
+				restoreBody = () => {
+					document.body.style.overflow = previous.overflow
+					document.body.style.position = previous.position
+					document.body.style.top = previous.top
+					document.body.style.width = previous.width
+					window.scrollTo(0, lockedScrollY)
+				}
+			} else if (!isMobile && restoreBody) {
+				restoreBody()
+				restoreBody = undefined
+			}
+		}
+
+		const keepFocusInsideMobileSheet = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				event.preventDefault()
+				setExpanded(false)
+				return
+			}
+			if (event.key !== 'Tab' || window.innerWidth >= 768 || !panelRef.current) return
+
+			const focusable = Array.from(
+				panelRef.current.querySelectorAll<HTMLElement>(
+					'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+				),
+			).filter((node) => {
+				const style = window.getComputedStyle(node)
+				return (
+					!node.hidden &&
+					!node.closest('[hidden]') &&
+					node.getAttribute('aria-hidden') !== 'true' &&
+					style.display !== 'none' &&
+					style.visibility !== 'hidden'
+				)
+			})
+			if (focusable.length === 0) {
+				event.preventDefault()
+				panelRef.current.focus()
+				return
+			}
+			const first = focusable[0]
+			const last = focusable[focusable.length - 1]
+			if (!panelRef.current.contains(document.activeElement)) {
+				event.preventDefault()
+				const boundary = event.shiftKey ? last : first
+				boundary?.focus()
+				return
+			}
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault()
+				last?.focus()
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault()
+				first?.focus()
+			}
+		}
+
+		updateComposition()
+		const observer =
+			typeof ResizeObserver === 'undefined' || !contentRef.current
+				? undefined
+				: new ResizeObserver(updateComposition)
+		if (contentRef.current) observer?.observe(contentRef.current)
+		window.addEventListener('resize', updateComposition)
+		document.addEventListener('keydown', keepFocusInsideMobileSheet)
+
+		return () => {
+			observer?.disconnect()
+			window.removeEventListener('resize', updateComposition)
+			document.removeEventListener('keydown', keepFocusInsideMobileSheet)
+			restoreBody?.()
+			returnFocusRef.current?.focus()
+			returnFocusRef.current = null
+			setMobileSheet(false)
+			setMobileFull(false)
+		}
+	}, [expanded, hasExpandable])
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+		const frame = window.requestAnimationFrame(() => {
+			const selector = mobileSheet
+				? '[data-create-hub-focus="mobile"]'
+				: '[data-create-hub-focus="desktop"]'
+			panelRef.current?.querySelector<HTMLElement>(selector)?.focus()
+		})
+		return () => window.cancelAnimationFrame(frame)
+	}, [expanded, hasExpandable, mobileSheet])
 
 	return (
 		<div
@@ -100,8 +243,8 @@ export function BrandPageHeader({
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 sm:grid sm:grid-cols-3 sm:items-stretch sm:gap-4">
-				<div className="flex min-w-0 flex-1 flex-col gap-1 sm:col-span-2">
+			<div className="flex flex-col gap-2 md:grid md:grid-cols-3 md:items-stretch md:gap-4">
+				<div className="flex min-w-0 flex-1 flex-col gap-1 md:col-span-2">
 					{breadcrumbs && breadcrumbs.length > 0 ? (
 						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
 							{breadcrumbs.map((crumb, i) => (
@@ -142,14 +285,25 @@ export function BrandPageHeader({
 
 				{cta ? (
 					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
-					<div className="h-full min-w-0">{cta}</div>
+					<div
+						className={
+							[
+								mobileCtaDocked
+									? 'fixed inset-x-0 bottom-0 z-40 min-w-0 px-3 pb-mobile-cta-bottom md:static md:inset-auto md:z-auto md:h-full md:p-0'
+									: 'h-full min-w-0',
+								expanded ? 'hidden' : '',
+							].join(' ')
+						}
+					>
+						{renderedCta}
+					</div>
 				) : ctaLabel ? (
 					<div className="shrink-0">
 						{hasExpandable ? (
 							<Button
 								onPress={() => setExpanded(!expanded)}
 								aria-expanded={expanded}
-								aria-controls={PANEL_ID}
+								aria-controls={panelId}
 								className="h-10 rounded-full bg-brand-secondary px-5 text-small font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
 							>
 								{ctaLabel}
@@ -163,35 +317,80 @@ export function BrandPageHeader({
 				) : null}
 			</div>
 
-			{hasExpandable ? (
-				<div
-					id={PANEL_ID}
-					role="region"
-					aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
-					hidden={!expanded}
-					className="mt-4"
-				>
-					{expanded ? (
-						<div className="relative rounded-lg border border-border bg-surface-card p-4 animate-expand-cta motion-reduce:animate-none">
-							<Button
-								variant="ghost"
-								aria-label={closeLabel}
-								onPress={() => setExpanded(false)}
-								className="absolute right-2 top-2 h-7 w-7 rounded-full p-0 text-fg-muted data-[hovered]:bg-surface-muted data-[hovered]:text-fg"
-							>
-								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-									<path
-										d="M6 6l12 12M18 6L6 18"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-									/>
-								</svg>
-							</Button>
+			{hasExpandable && expanded ? (
+				<>
+					<div
+						aria-hidden="true"
+						onClick={() => setExpanded(false)}
+						className="fixed inset-0 z-40 bg-black/50 animate-create-hub-backdrop md:hidden motion-reduce:animate-none"
+					/>
+					<div
+						ref={panelRef}
+						id={panelId}
+						role={mobileSheet ? 'dialog' : 'region'}
+						aria-modal={mobileSheet || undefined}
+						aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
+						tabIndex={-1}
+						onTouchStart={(event) => {
+							const touch = event.touches[0]
+							if (!touch || !contentRef.current) return
+							touchStartYRef.current = touch.clientY
+							touchStartScrollTopRef.current = contentRef.current.scrollTop
+						}}
+						onTouchMove={(event) => {
+							const touch = event.touches[0]
+							if (
+								!touch ||
+								touchStartScrollTopRef.current > 10 ||
+								touch.clientY - touchStartYRef.current < 80
+							) {
+								return
+							}
+							event.preventDefault()
+							setExpanded(false)
+						}}
+						className={[
+							'fixed inset-x-0 bottom-0 z-50 flex flex-col overflow-hidden bg-brand-green',
+							'outline-none motion-reduce:animate-none',
+							'md:relative md:inset-auto md:z-auto md:mt-4 md:max-h-none md:origin-top-right md:rounded-lg md:animate-create-hub-desktop',
+							mobileFull
+								? 'top-0 max-h-create-hub-full animate-create-hub-full'
+								: 'max-h-create-hub-partial animate-create-hub-sheet',
+						].join(' ')}
+					>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="mobile"
+							onPress={() => setExpanded(false)}
+							className="h-10 w-full shrink-0 rounded-none p-0 md:hidden data-[hovered]:bg-transparent"
+						>
+							<span className="h-1 w-10 rounded-full bg-fg/25" aria-hidden="true" />
+						</Button>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="desktop"
+							onPress={() => setExpanded(false)}
+							className="absolute right-4 top-14 z-10 hidden h-8 w-8 rounded-md p-0 text-fg md:flex data-[hovered]:bg-black/5"
+						>
+							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+								<path
+									d="M6 6l12 12M18 6L6 18"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+								/>
+							</svg>
+						</Button>
+						<div
+							ref={contentRef}
+							className="min-h-0 flex-1 overflow-y-auto overscroll-contain md:overflow-visible"
+						>
 							{createHub}
 						</div>
-					) : null}
-				</div>
+					</div>
+				</>
 			) : null}
 		</div>
 	)

package/src/components/cta-pill.tsx

@@ -5,8 +5,11 @@ import type { ReactNode } from 'react'
  * something" (the middle word emphasised) with an action control on the right.
  *
  * The copy is three fragments (`lead` · `emphasis` · `tail`) so a consumer can
- * translate each per-locale while keeping the middle-word highlight. Presentational
- * only (hard rule #1): every string arrives via props — no i18n, no domain data.
+ * translate each per-locale while keeping the middle-word highlight. With
+ * `mobileHeader`, it adopts the source ExpandableCTA's 99px mobile touch surface;
+ * `BrandPageHeader` owns the safe-bottom positioning and returns it to the one-third
+ * desktop grid at the `md` breakpoint. Presentational only (hard rule #1): every
+ * string arrives via props — no i18n, no domain data.
  *
  * a11y NOTE: the background is the FIXED light brand-secondary (#6eddb1) — it does
  * not flip with the theme, so every sentence fragment sits on `fg-on-brand` (stable
@@ -23,11 +26,23 @@ export interface CtaPillProps {
 	tail: ReactNode
 	/** Right-side action control (e.g. a Create button). */
 	children: ReactNode
+	/**
+	 * Use the source mobile header density (99px minimum height and doubled
+	 * horizontal content padding). Positioning stays with `BrandPageHeader`.
+	 */
+	mobileHeader?: boolean
 }
 
-export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
+export function CtaPill({ lead, emphasis, tail, children, mobileHeader = false }: CtaPillProps) {
 	return (
-		<div className="flex h-full min-h-16 w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green py-2.5 pr-3 pl-4.5">
+		<div
+			className={[
+				'flex h-full w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green',
+				mobileHeader
+					? 'min-h-mobile-cta px-12 py-5 shadow-mobile-cta md:min-h-16 md:py-2.5 md:pr-3 md:pl-4.5 md:shadow-none'
+					: 'min-h-16 py-2.5 pr-3 pl-4.5',
+			].join(' ')}
+		>
 			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-tight text-fg-on-brand">
 				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>

package/src/components/side-panel.examples.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+
+import { Button } from './button'
+import { SidePanel } from './side-panel'
+
+function DefaultExample(): React.ReactNode {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Open panel</Button>
+			<SidePanel
+				isOpen={open}
+				onOpenChange={setOpen}
+				title="Assistant"
+				description="Acme Robotics"
+				closeLabel="Close assistant"
+				footer={<Button className="w-full">Send</Button>}
+			>
+				<p className="text-small text-fg-muted">Ask a question about the current Brand.</p>
+			</SidePanel>
+		</>
+	)
+}
+
+function SizeExample({ size }: { size: 'sm' | 'md' | 'lg' }): React.ReactNode {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button variant="secondary" onPress={() => setOpen(true)}>
+				{size.toUpperCase()}
+			</Button>
+			<SidePanel
+				isOpen={open}
+				onOpenChange={setOpen}
+				title={`${size.toUpperCase()} panel`}
+				closeLabel="Close panel"
+				size={size}
+			>
+				<p className="text-small text-fg">Responsive owned-scroll content.</p>
+			</SidePanel>
+		</>
+	)
+}
+
+function PendingExample(): React.ReactNode {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button variant="secondary" onPress={() => setOpen(true)}>Pending state</Button>
+			<SidePanel
+				isOpen={open}
+				onOpenChange={setOpen}
+				title="Saving"
+				description="Dismissal is temporarily disabled."
+				closeLabel="Close panel"
+				isDismissable={false}
+			>
+				<div role="status" className="text-small text-fg-muted">Working…</div>
+			</SidePanel>
+		</>
+	)
+}
+
+export const examples = {
+	default: () => <DefaultExample />,
+	sizes: () => (
+		<div className="flex gap-2">
+			<SizeExample size="sm" />
+			<SizeExample size="md" />
+			<SizeExample size="lg" />
+		</div>
+	),
+	states: () => <PendingExample />,
+}
+
+export const meta = {
+	category: 'Layout',
+	description: 'Accessible right-side modal panel with responsive full-screen mobile behavior.',
+}
+

package/src/components/side-panel.tsx

@@ -0,0 +1,140 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	Dialog as RACDialog,
+	Heading,
+	Modal as RACModal,
+	ModalOverlay as RACModalOverlay,
+} from 'react-aria-components'
+
+import { uic } from '../utils/uic'
+
+export type SidePanelSize = 'sm' | 'md' | 'lg'
+
+export interface SidePanelProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Called for Escape, backdrop dismissal and the close control. */
+	onOpenChange: (isOpen: boolean) => void
+	/** Accessible panel title. */
+	title: ReactNode
+	/** Optional supporting copy below the title. */
+	description?: ReactNode
+	/** App-supplied localized label for the close control. */
+	closeLabel: string
+	/** Panel width from the shared responsive scale. */
+	size?: SidePanelSize
+	/** Disable Escape/backdrop dismissal while a critical operation is pending. */
+	isDismissable?: boolean
+	/** Owned-scroll panel content. */
+	children: ReactNode | ((options: { close: () => void }) => ReactNode)
+	/** Optional pinned action area below the scroll region. */
+	footer?: ReactNode | ((options: { close: () => void }) => ReactNode)
+	/** Optional test id forwarded to the dialog element. */
+	'data-testid'?: string
+}
+
+const SidePanelOverlay = uic(RACModalOverlay, {
+	displayName: 'SidePanel.Overlay',
+	baseClass:
+		'fixed inset-0 z-50 flex justify-end bg-modal-backdrop backdrop-blur-modal-backdrop ' +
+		'data-[entering]:animate-modal-overlay-in data-[exiting]:animate-modal-overlay-out ' +
+		'motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none',
+})
+
+const SidePanelSurface = uic(RACModal, {
+	displayName: 'SidePanel.Surface',
+	baseClass:
+		'ml-auto flex h-dvh w-full flex-col overflow-hidden bg-surface outline-none shadow-modal-surface ' +
+		'sm:rounded-l-lg data-[entering]:animate-side-panel-in data-[exiting]:animate-side-panel-out ' +
+		'motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none',
+	variants: {
+		size: {
+			sm: 'sm:max-w-sm',
+			md: 'sm:max-w-md',
+			lg: 'sm:max-w-lg',
+		},
+	},
+	defaultVariants: { size: 'md' },
+})
+
+const SidePanelClose = uic(RACButton, {
+	displayName: 'SidePanel.Close',
+	baseClass:
+		'inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-fg-subtle outline-none ' +
+		'transition-colors hover:bg-surface-muted hover:text-fg ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2',
+})
+
+/**
+ * Responsive modal side panel.
+ *
+ * React Aria owns focus containment, Escape/backdrop dismissal, scroll locking
+ * and trigger focus return. The surface is a full-screen owned-scroll sheet on
+ * mobile and a right-aligned panel on larger viewports. All copy and product
+ * content are supplied by the consuming application.
+ */
+export function SidePanel({
+	isOpen,
+	onOpenChange,
+	title,
+	description,
+	closeLabel,
+	size = 'md',
+	isDismissable = true,
+	children,
+	footer,
+	'data-testid': testId,
+}: SidePanelProps): React.ReactNode {
+	return (
+		<SidePanelOverlay
+			isOpen={isOpen}
+			onOpenChange={onOpenChange}
+			isDismissable={isDismissable}
+		>
+			<SidePanelSurface size={size}>
+				<RACDialog
+					data-testid={testId}
+					className="flex min-h-0 flex-1 flex-col outline-none"
+				>
+					{renderProps => (
+						<>
+							<header className="flex shrink-0 items-start justify-between gap-4 border-b border-border px-5 py-4">
+								<div className="min-w-0 pt-1">
+									<Heading slot="title" className="text-heading1 font-medium tracking-tight text-fg">
+										{title}
+									</Heading>
+									{description ? (
+										<p className="mt-1 text-small text-fg-muted">{description}</p>
+									) : null}
+								</div>
+								<SidePanelClose aria-label={closeLabel} onClick={() => onOpenChange(false)}>
+									<svg
+										width="20"
+										height="20"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+										aria-hidden="true"
+									>
+										<path d="M6 6l12 12M18 6 6 18" />
+									</svg>
+								</SidePanelClose>
+							</header>
+							<div className="min-h-0 flex-1 overflow-y-auto p-5">
+								{typeof children === 'function' ? children(renderProps) : children}
+							</div>
+							{footer ? (
+								<footer className="shrink-0 border-t border-border px-5 pt-4 pb-mobile-cta-bottom sm:pb-4">
+									{typeof footer === 'function' ? footer(renderProps) : footer}
+								</footer>
+							) : null}
+						</>
+					)}
+				</RACDialog>
+			</SidePanelSurface>
+		</SidePanelOverlay>
+	)
+}

package/src/index.ts

@@ -30,6 +30,7 @@ export * from "./components/file-upload";
 export * from "./components/date-field";
 export * from "./components/date-picker";
 export * from "./components/dialog";
+export * from "./components/side-panel";
 export * from "./components/dropdown-menu";
 export * from "./components/context-menu";
 export * from "./components/tooltip";