@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/select/search-list.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
+import { menuStyles } from "../menu/menu-styles.js";
+import { OptionList } from "./option-list.js";
+import { searchBarStyles } from "../search/search-styles.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAutocomplete, useFocusRing, useSearchField } from "react-aria";
+import { useListState } from "react-stately";
+//#region src/components/select/search-list.tsx
+/** Material Symbols `search`. */
+const SearchIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
+});
+/**
+* Keeps the items that match, and the sections that still hold one (as React Stately's
+* combobox filters), so a section with no matches disappears with its heading.
+*/
+function filterNodes(nodes, matches) {
+	const kept = [];
+	for (const node of nodes) if (node.type === "section") {
+		const children = filterNodes(node.childNodes, matches);
+		if (children.some((child) => child.type === "item")) kept.push({
+			...node,
+			childNodes: children
+		});
+	} else if (node.type !== "item" || matches(node)) kept.push(node);
+	return kept;
+}
+const denseSearchTarget = [
+	"relative",
+	"before:absolute before:inset-x-0 before:bottom-full before:h-[clamp(0px,calc(var(--md-sys-density,0)*-4px-clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)),4px)] before:content-['']",
+	"after:absolute after:inset-x-0 after:top-full after:h-[clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)] after:content-['']"
+];
+/**
+* A search field over an option list, wired as one editable combobox with list autocomplete
+* (React Aria `useAutocomplete`): typing filters the options, the arrow keys move through
+* them while focus stays in the search (`aria-activedescendant`), Enter chooses, and Escape
+* clears the search, then reaches the menu or sheet to close it. The search is the M3 search
+* bar's field at 48px, M3's minimum touch target, so it doesn't dominate the 44px rows.
+* Used by `Select`'s `searchable` and `PhoneField`'s country field.
+*/
+function SearchList({ listProps, search, onSearchChange, filter, autoFocusSearch, labelling, dialogProps, labels, loading, isBlocked, embedded, classNames }) {
+	const matches = useCallback((nodes) => filter ? filterNodes(nodes, (node) => filter(node.textValue, search, node.key)) : [...nodes], [filter, search]);
+	const state = useListState({
+		...listProps,
+		...FOCUSABLE_DISABLED_OPTIONS,
+		filter: matches
+	});
+	const [focusedNodeId, setFocusedNodeId] = useState(null);
+	const inputRef = useRef(null);
+	const listBoxRef = useRef(null);
+	const { inputProps: autocompleteInputProps, collectionProps, collectionRef } = useAutocomplete({
+		inputRef,
+		collectionRef: listBoxRef
+	}, {
+		inputValue: search,
+		setInputValue: onSearchChange,
+		focusedNodeId,
+		setFocusedNodeId
+	});
+	const { inputProps } = useSearchField({
+		...autocompleteInputProps,
+		"aria-label": labels.search,
+		placeholder: labels.search
+	}, {
+		value: search,
+		setValue: onSearchChange
+	}, inputRef);
+	const { focusProps, isFocusVisible } = useFocusRing({
+		within: true,
+		isTextInput: true
+	});
+	useEffect(() => {
+		if (autoFocusSearch) inputRef.current?.focus();
+	}, [autoFocusSearch]);
+	const field = searchBarStyles({ hasLeading: true });
+	const menu = menuStyles({
+		variant: "standard",
+		groupPosition: "only"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...dialogProps,
+		"data-tokens": "md-comp-menus",
+		"data-variant": "standard",
+		className: cn("flex min-h-0 flex-col", embedded ? "flex-1" : [menu.group(), "max-h-[inherit] overflow-hidden"]),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]",
+			children: /* @__PURE__ */ jsxs("div", {
+				...focusProps,
+				"data-tokens": "md-comp-search-bar",
+				"data-focus-visible": isFocusVisible || void 0,
+				onPointerDown: (event) => {
+					if (event.target !== event.currentTarget) return;
+					event.preventDefault();
+					inputRef.current?.focus();
+				},
+				className: field.field({ class: cn(denseSearchTarget, classNames?.search) }),
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "leading",
+					className: field.leading({ class: "h-full" }),
+					children: /* @__PURE__ */ jsx(SearchIcon, {})
+				}), /* @__PURE__ */ jsx("input", {
+					...inputProps,
+					ref: inputRef,
+					"data-slot": "input",
+					className: field.input()
+				})]
+			})
+		}), /* @__PURE__ */ jsx(OptionList, {
+			embedded: true,
+			animateFiltering: true,
+			listBoxProps: {
+				...collectionProps,
+				...labelling,
+				escapeKeyBehavior: "none"
+			},
+			state,
+			listBoxRef: collectionRef,
+			emptyLabel: labels.noResults,
+			loading,
+			loadingLabel: labels.loading,
+			isBlocked,
+			classNames
+		})]
+	});
+}
+//#endregion
+export { SearchList };
+
+//# sourceMappingURL=search-list.js.map

package/dist/components/select/search-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-list.js","names":[],"sources":["../../../src/components/select/search-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type RefObject,\n} from 'react';\nimport { useAutocomplete, useFocusRing, useSearchField } from 'react-aria';\nimport { useListState, type Node } from 'react-stately';\nimport type { ListProps } from 'react-stately/useListState';\nimport { cn } from '../../utils/cn';\nimport { menuStyles } from '../menu/menu-styles';\nimport { searchBarStyles } from '../search/search-styles';\nimport { FOCUSABLE_DISABLED_OPTIONS, OptionList, type OptionListClassNames } from './option-list';\n\n/** Material Symbols `search`. */\nconst SearchIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n);\n\n/**\n * Keeps the items that match, and the sections that still hold one (as React Stately's\n * combobox filters), so a section with no matches disappears with its heading.\n */\nfunction filterNodes<T>(nodes: Iterable<Node<T>>, matches: (node: Node<T>) => boolean): Node<T>[] {\n  const kept: Node<T>[] = [];\n  for (const node of nodes) {\n    if (node.type === 'section') {\n      const children = filterNodes(node.childNodes, matches);\n      if (children.some((child) => child.type === 'item')) {\n        kept.push({ ...node, childNodes: children });\n      }\n    } else if (node.type !== 'item' || matches(node)) {\n      kept.push(node);\n    }\n  }\n  return kept;\n}\n\nexport interface SearchListProps<T> {\n  /** The options, their selection and disabled keys, as for `useListState`. */\n  listProps: ListProps<T>;\n  /** The typed text. */\n  search: string;\n  onSearchChange: (search: string) => void;\n  /** Whether an option matches the search; `null` when the app filters the options itself. */\n  filter: ((textValue: string, search: string, key: Node<T>['key']) => boolean) | null;\n  /** Focus the search when the list opens (in a menu; a sheet shows the list first). */\n  autoFocusSearch: boolean;\n  /** Names the list (the field's label): `aria-labelledby`, or `aria-label` without one. */\n  labelling: { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined };\n  /** In a menu, the panel is the dialog the field opens (`role`, `id`, its name). */\n  dialogProps?: HTMLAttributes<HTMLDivElement> | undefined;\n  labels: { search: string; noResults: string; loading: string };\n  loading: boolean;\n  isBlocked: ((key: Node<T>['key']) => boolean) | undefined;\n  /** In a sheet: no menu panel of its own. */\n  embedded: boolean;\n  classNames?: (OptionListClassNames & { search?: string }) | undefined;\n}\n\n/*\n * A dense search field (44, 40 or 36px tall at -1 to -3) extends its hit area by up to 4px\n * below it (the gap above the list) and up to 4px above it (the panel's padding, which clips\n * anything further): 48px at -1 and -2, 44px at -3. Like dense menu rows, it can't reach 48px\n * at -3 without covering the first option; it stays well above WCAG 2.5.8's 24px.\n */\nconst denseSearchTarget = [\n  'relative',\n  \"before:absolute before:inset-x-0 before:bottom-full before:h-[clamp(0px,calc(var(--md-sys-density,0)*-4px-clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)),4px)] before:content-['']\",\n  \"after:absolute after:inset-x-0 after:top-full after:h-[clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)] after:content-['']\",\n];\n\n/**\n * A search field over an option list, wired as one editable combobox with list autocomplete\n * (React Aria `useAutocomplete`): typing filters the options, the arrow keys move through\n * them while focus stays in the search (`aria-activedescendant`), Enter chooses, and Escape\n * clears the search, then reaches the menu or sheet to close it. The search is the M3 search\n * bar's field at 48px, M3's minimum touch target, so it doesn't dominate the 44px rows.\n * Used by `Select`'s `searchable` and `PhoneField`'s country field.\n */\nexport function SearchList<T>({\n  listProps,\n  search,\n  onSearchChange,\n  filter,\n  autoFocusSearch,\n  labelling,\n  dialogProps,\n  labels,\n  loading,\n  isBlocked,\n  embedded,\n  classNames,\n}: SearchListProps<T>) {\n  const matches = useCallback(\n    (nodes: Iterable<Node<T>>) =>\n      filter ? filterNodes(nodes, (node) => filter(node.textValue, search, node.key)) : [...nodes],\n    [filter, search],\n  );\n  const state = useListState<T>({ ...listProps, ...FOCUSABLE_DISABLED_OPTIONS, filter: matches });\n\n  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const {\n    inputProps: autocompleteInputProps,\n    collectionProps,\n    collectionRef,\n  } = useAutocomplete(\n    { inputRef, collectionRef: listBoxRef },\n    { inputValue: search, setInputValue: onSearchChange, focusedNodeId, setFocusedNodeId },\n  );\n  const { inputProps } = useSearchField(\n    { ...autocompleteInputProps, 'aria-label': labels.search, placeholder: labels.search },\n    { value: search, setValue: onSearchChange },\n    inputRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing({ within: true, isTextInput: true });\n\n  useEffect(() => {\n    if (autoFocusSearch) inputRef.current?.focus();\n  }, [autoFocusSearch]);\n\n  const field = searchBarStyles({ hasLeading: true });\n  const menu = menuStyles({ variant: 'standard', groupPosition: 'only' });\n\n  return (\n    <div\n      {...dialogProps}\n      // The menu's component tokens (menu-tokens.ts) for its panel and options.\n      data-tokens=\"md-comp-menus\"\n      data-variant=\"standard\"\n      className={cn(\n        'flex min-h-0 flex-col',\n        embedded ? 'flex-1' : [menu.group(), 'max-h-[inherit] overflow-hidden'],\n      )}\n    >\n      {/* 48px (4px less per density step), 4px above the list, like the panel's 4px padding\n          around it. */}\n      <div className=\"flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]\">\n        <div\n          {...focusProps}\n          data-tokens=\"md-comp-search-bar\"\n          data-focus-visible={isFocusVisible || undefined}\n          // A press on the hit area around a dense field (below) puts the caret in the input.\n          onPointerDown={(event) => {\n            if (event.target !== event.currentTarget) return;\n            event.preventDefault();\n            inputRef.current?.focus();\n          }}\n          className={field.field({ class: cn(denseSearchTarget, classNames?.search) })}\n        >\n          <span data-slot=\"leading\" className={field.leading({ class: 'h-full' })}>\n            <SearchIcon />\n          </span>\n          <input {...inputProps} ref={inputRef} data-slot=\"input\" className={field.input()} />\n        </div>\n      </div>\n      <OptionList\n        embedded\n        animateFiltering\n        listBoxProps={{\n          ...collectionProps,\n          ...labelling,\n          // Escape belongs to the search and then the menu; the list must not take it to\n          // clear the selection (which also kept a chosen option's menu from closing).\n          escapeKeyBehavior: 'none',\n        }}\n        state={state}\n        listBoxRef={collectionRef as RefObject<HTMLUListElement | null>}\n        emptyLabel={labels.noResults}\n        loading={loading}\n        loadingLabel={labels.loading}\n        isBlocked={isBlocked}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/select/selection-cap.js

@@ -0,0 +1,30 @@
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/select/selection-cap.ts
+/**
+* `maxSelections` for multiple selection: owns the chosen keys (controlled or not), turns
+* away a change that would pass the cap (a click or the keyboard's Enter alike), and tells
+* the list which options to show as disabled while the cap is reached.
+*/
+function useSelectionCap({ multiple, maxSelections, value, defaultValue, onChange }) {
+	const capped = multiple && maxSelections !== void 0;
+	const [keys, setKeys] = useControlledState(value, defaultValue ?? [], onChange);
+	if (!capped) return {
+		valueProps: {},
+		isBlocked: () => false
+	};
+	const atCap = keys.length >= maxSelections;
+	return {
+		valueProps: {
+			value: keys,
+			defaultValue: defaultValue ?? [],
+			onChange: (next) => {
+				if (next.length <= maxSelections) setKeys(next);
+			}
+		},
+		isBlocked: (key) => atCap && !keys.includes(key)
+	};
+}
+//#endregion
+export { useSelectionCap };
+
+//# sourceMappingURL=selection-cap.js.map

package/dist/components/select/selection-cap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-cap.js","names":[],"sources":["../../../src/components/select/selection-cap.ts"],"sourcesContent":["import type { Key } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\n\ninterface SelectionCapOptions {\n  multiple: boolean;\n  maxSelections: number | undefined;\n  value: unknown;\n  defaultValue: unknown;\n  onChange: ((value: never) => void) | undefined;\n}\n\nexport interface SelectionCap {\n  /** Value props for the React Stately state: the capped selection when a cap applies. */\n  valueProps: Record<string, unknown>;\n  /** Whether an option can't be chosen because the cap is reached. */\n  isBlocked: (key: Key) => boolean;\n}\n\n/**\n * `maxSelections` for multiple selection: owns the chosen keys (controlled or not), turns\n * away a change that would pass the cap (a click or the keyboard's Enter alike), and tells\n * the list which options to show as disabled while the cap is reached.\n */\nexport function useSelectionCap({\n  multiple,\n  maxSelections,\n  value,\n  defaultValue,\n  onChange,\n}: SelectionCapOptions): SelectionCap {\n  const capped = multiple && maxSelections !== undefined;\n  const [keys, setKeys] = useControlledState<readonly Key[], Key[]>(\n    value as readonly Key[] | undefined,\n    (defaultValue as readonly Key[] | undefined) ?? [],\n    onChange as ((value: Key[]) => void) | undefined,\n  );\n  if (!capped) return { valueProps: {}, isBlocked: () => false };\n\n  const atCap = keys.length >= maxSelections;\n  return {\n    valueProps: {\n      value: keys,\n      defaultValue: (defaultValue as readonly Key[] | undefined) ?? [],\n      onChange: (next: Key[]) => {\n        if (next.length <= maxSelections) setKeys(next);\n      },\n    },\n    isBlocked: (key) => atCap && !keys.includes(key),\n  };\n}\n"],"mappings":";;;;;;;AAuBA,SAAgB,gBAAgB,EAC9B,UACA,eACA,OACA,cACA,YACoC;CACpC,MAAM,SAAS,YAAY,kBAAkB,KAAA;CAC7C,MAAM,CAAC,MAAM,WAAW,mBACtB,OACC,gBAA+C,CAAC,GACjD,QACF;CACA,IAAI,CAAC,QAAQ,OAAO;EAAE,YAAY,CAAC;EAAG,iBAAiB;CAAM;CAE7D,MAAM,QAAQ,KAAK,UAAU;CAC7B,OAAO;EACL,YAAY;GACV,OAAO;GACP,cAAe,gBAA+C,CAAC;GAC/D,WAAW,SAAgB;IACzB,IAAI,KAAK,UAAU,eAAe,QAAQ,IAAI;GAChD;EACF;EACA,YAAY,QAAQ,SAAS,CAAC,KAAK,SAAS,GAAG;CACjD;AACF"}

package/dist/components/sheet/BottomSheet.d.ts

@@ -0,0 +1,154 @@
+import { ClosedBy } from "../../utils/closed-by.js";
+import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode, Ref } from "react";
+//#region src/components/sheet/BottomSheet.d.ts
+export interface BottomSheetClassNames {
+  /**
+   * The outermost element, which places the sheet (where `className` and `style` go too):
+   * `fixed` to the window's bottom by default, or, for example, `absolute` to a region.
+   */
+  container?: string;
+  /** The dimmed layer behind a modal sheet. */
+  scrim?: string;
+  /** The sheet's surface: its colour, corners and shadow. */
+  panel?: string;
+  /** The drag handle's 48px pressable area. */
+  handle?: string;
+  /** The drag handle's visible bar, inside `handle`. */
+  handleBar?: string;
+  /** The row holding the close (modal) or collapse (standard) button. */
+  closeRow?: string;
+  /** The close or collapse icon button. */
+  close?: string;
+  /** The scrollable content area. */
+  content?: string;
+}
+/** Words the bottom sheet announces. */
+export interface BottomSheetLabels {
+  /**
+   * The drag handle while the sheet is half open or collapsed (it expands the sheet).
+   * @default "Expand sheet"
+   */
+  expand: string;
+  /** The drag handle and collapse button of a fully open standard sheet. @default "Collapse sheet" */
+  collapse: string;
+  /** The drag handle of a fully open modal sheet (it closes the sheet). @default "Close sheet" */
+  dismiss: string;
+  /** The close button of a modal sheet that fills the window height. @default "Close" */
+  close: string;
+}
+/**
+ * Where a standard bottom sheet rests: `collapsed` to its `peekHeight`, or `expanded` to its
+ * full height (Compose `SheetValue.PartiallyExpanded` and `SheetValue.Expanded`). A sheet whose
+ * content is no taller than the peek height is always expanded.
+ */
+export type BottomSheetDetent = 'collapsed' | 'expanded';
+type Naming = {
+  /** Accessible name when there's no visible title. Required without `aria-labelledby`. */
+  'aria-label': string;
+} | {
+  /** Id of the visible title that names the sheet. Required without `aria-label`. */
+  'aria-labelledby': string;
+};
+interface BottomSheetOwnProps {
+  /**
+   * `modal` opens over a scrim as a dialog that blocks the page; `standard` sits over the
+   * page without a scrim, so both can be used at once, and rests collapsed at `peekHeight`
+   * or expanded (`detent`). @default "modal"
+   */
+  variant?: 'modal' | 'standard';
+  /** Whether the sheet is open (controlled). */
+  open?: boolean;
+  /** Whether the sheet starts open when uncontrolled. @default false, or true when standard */
+  defaultOpen?: boolean;
+  /** Called when the sheet opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Show the drag handle. Without it, the top 48px of the sheet still drags. @default true */
+  dragHandle?: boolean;
+  /**
+   * Whether dragging the handle, the top of the sheet or (touch and pen) its content moves
+   * the sheet. Without it the handle stays a button (a press, Enter or Space), and Escape,
+   * the scrim and the close button work as before.
+   * @default true
+   */
+  swipeable?: boolean;
+  /**
+   * Open fully instead of to half the window when the content is taller than half the
+   * window (modal). @default false
+   */
+  skipPartiallyExpanded?: boolean;
+  /**
+   * Height of a collapsed standard sheet, px. While collapsed, the content's top-level parts
+   * that don't fit entirely in it are `inert`. @default 56
+   */
+  peekHeight?: number;
+  /**
+   * Where a standard sheet rests (controlled): `collapsed` at `peekHeight` or `expanded` to
+   * its full height, so the app can raise or lower it ("can be set by the system or toggled
+   * by the user", m3.material.io). Its handle, a drag, Escape and its collapse button then
+   * only call `onDetentChange`. A modal sheet ignores it.
+   */
+  detent?: BottomSheetDetent;
+  /**
+   * Where a standard sheet first rests when uncontrolled; `expanded` opens it fully raised
+   * (Compose `rememberStandardBottomSheetState(initialValue = SheetValue.Expanded)`). It
+   * applies each time the sheet opens. A modal sheet ignores it.
+   * @default "collapsed"
+   */
+  defaultDetent?: BottomSheetDetent;
+  /**
+   * Called when a standard sheet moves to another detent: by its handle (a press, Enter or
+   * Space, or a drag), Escape or its collapse button. Not called for a modal sheet.
+   */
+  onDetentChange?: (detent: BottomSheetDetent) => void;
+  /**
+   * How the user can close a modal sheet, as HTML's `<dialog closedby>`: `any` (Escape, a
+   * press on the scrim or a drag down), `closerequest` (Escape or a drag down) or `none`
+   * (only its buttons or the app). @default "any"
+   */
+  closedBy?: ClosedBy;
+  /**
+   * While the sheet fills the window height, show a close button (modal) or a collapse
+   * button (standard) at its top end. @default true
+   */
+  closeButton?: boolean;
+  /** Replaces the close button's icon. */
+  closeIcon?: ReactElement;
+  /** Replaces the collapse button's icon. */
+  collapseIcon?: ReactElement;
+  /** Words the sheet announces, with English defaults. */
+  labels?: Partial<BottomSheetLabels>;
+  children?: ReactNode | ((props: {
+    close: () => void;
+  }) => ReactNode);
+  /** Classes for each part, by slot. */
+  classNames?: BottomSheetClassNames;
+  /**
+   * Goes with `style` on the outermost element, the container that places the sheet, so a
+   * layout class (`absolute`, `fixed`, a transform) moves the whole sheet and never clips or
+   * stretches its surface. Style the surface with `classNames.panel`; `ref`, `data-*` and
+   * other attributes go on the panel.
+   */
+  className?: string;
+  /** Goes on the outermost element, with `className`. */
+  style?: CSSProperties;
+  /** Ref to the panel, the sheet's surface (`role="dialog"`). */
+  ref?: Ref<HTMLDivElement>;
+}
+export type BottomSheetProps = BottomSheetOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, keyof BottomSheetOwnProps | 'aria-label' | 'aria-labelledby'>;
+/**
+ * M3 bottom sheet. A `modal` sheet slides up over a scrim, opening to half the window when
+ * its content is taller (drag the handle up, or press it, to expand), and closes on a drag
+ * down, a press on the scrim or Escape, in one press from any height. A
+ * `standard` sheet sits over the page without a scrim, collapsed to `peekHeight` until it
+ * is expanded, or opening expanded with `defaultDetent="expanded"`; `detent` and
+ * `onDetentChange` control it.
+ *
+ * @example
+ * <SheetTrigger>
+ *   <Button>Share</Button>
+ *   <BottomSheet aria-label="Share">{({ close }) => <ShareOptions onPick={close} />}</BottomSheet>
+ * </SheetTrigger>
+ */
+export declare function BottomSheet({ variant, open, defaultOpen, onOpenChange, ...props }: BottomSheetProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=BottomSheet.d.ts.map