@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/date-picker.js

@@ -0,0 +1,310 @@
+"use client";
+// src/date-picker.tsx
+import {
+  datePicker as datePickerPrimitive
+} from "@ui-sdk/core/date-picker";
+import * as React from "react";
+import {
+  CalendarHeading,
+  CalendarGrid,
+  CalendarNext,
+  CalendarPrevious
+} from "./calendar.js";
+import { CalendarContext } from "./calendar-context.js";
+import { ownDescription, useFieldControl } from "./field-context.js";
+import {
+  renderPopup,
+  sheetViewport,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import {
+  createParts,
+  extendHandle,
+  renderElement,
+  slotIn,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  CalendarDay,
+  CalendarGrid as CalendarGrid2,
+  CalendarHeading as CalendarHeading2,
+  CalendarMonthSelect,
+  CalendarNext as CalendarNext2,
+  CalendarPrevious as CalendarPrevious2,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect
+} from "./calendar.js";
+import { createDatePickerController } from "@ui-sdk/core/date-picker";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(datePickerPrimitive, { clear: "button" });
+var DatePickerContext = React.createContext(
+  null
+);
+var ContainerContext = React.createContext(void 0);
+function useDatePicker(part) {
+  const context = React.useContext(DatePickerContext);
+  if (!context) {
+    throw new Error(`${part} must be used inside <DatePicker>.`);
+  }
+  return context;
+}
+function DatePicker({
+  mode,
+  value,
+  defaultValue,
+  onValueChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  onOpenChangeComplete,
+  closeOnSelect,
+  presentation,
+  dismissible,
+  onDismissAttempt,
+  min,
+  max,
+  unavailable,
+  disabled,
+  readOnly,
+  months,
+  pageBy,
+  locale,
+  weekStartsOn,
+  weekdayFormat,
+  monthFormat,
+  fixedWeeks,
+  showOutsideDays,
+  today,
+  timeZone,
+  minDays,
+  maxDays,
+  allowUnavailable,
+  name,
+  startName,
+  endName,
+  form,
+  required,
+  container,
+  controller,
+  debug,
+  children,
+  ...props
+}) {
+  const field = useFieldControl();
+  const picker = usePrimitive(datePickerPrimitive, {
+    mode,
+    value,
+    defaultValue,
+    onValueChange,
+    month,
+    defaultMonth,
+    onMonthChange,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onOpenChangeComplete,
+    closeOnSelect,
+    presentation,
+    dismissible,
+    onDismissAttempt,
+    min,
+    max,
+    unavailable,
+    disabled: disabled || field?.disabled,
+    readOnly,
+    months,
+    pageBy,
+    locale,
+    weekStartsOn,
+    weekdayFormat,
+    monthFormat,
+    fixedWeeks,
+    showOutsideDays,
+    today,
+    timeZone,
+    minDays,
+    maxDays,
+    allowUnavailable,
+    name: name ?? field?.name,
+    startName,
+    endName,
+    form,
+    required,
+    controller,
+    debug
+  });
+  const context = React.useMemo(
+    () => extendHandle(picker, { field }),
+    [picker, field]
+  );
+  const content = (state) => {
+    const range = state.mode === "range";
+    const submitsStart = range ? startName ?? name ?? field?.name : name ?? field?.name;
+    const submitsEnd = range && (endName ?? name ?? field?.name);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DatePickerInput, {}),
+        range && /* @__PURE__ */ jsx(DatePickerInput, { end: true }),
+        /* @__PURE__ */ jsx(DatePickerTrigger, {}),
+        /* @__PURE__ */ jsx(DatePickerContent, {})
+      ] }) : typeof children === "function" ? children(state) : children,
+      submitsStart && /* @__PURE__ */ jsx("input", { ...slotIn(picker, "hidden-input", { id: "start" }) }),
+      submitsEnd && /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...slotIn(picker, "hidden-input", { end: true, id: "end" })
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(CalendarContext.Provider, { value: picker, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children: usePart(picker, "root", {}, { ...props, children: content }) }) }) });
+}
+function DatePickerInput({
+  end,
+  render,
+  ...props
+}) {
+  const picker = useDatePicker("DatePickerInput");
+  const input = (merged, state) => {
+    const field = picker.field && !end ? picker.field : void 0;
+    const [own, element] = field ? ownDescription(merged, render) : [merged, render];
+    const { value, ...rest } = field ? field.props(own) : own;
+    return renderElement(
+      "input",
+      { ...rest, defaultValue: value },
+      element,
+      state
+    );
+  };
+  return usePart(
+    picker,
+    "input",
+    { end, id: end ? "end" : "start" },
+    { ...props, render: input },
+    "input"
+  );
+}
+var calendarIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 6.5h12M5.5 1.5v3M10.5 1.5v3" })
+    ]
+  }
+);
+function DatePickerTrigger({
+  children = calendarIcon,
+  ...props
+}) {
+  return usePart(
+    useDatePicker("DatePickerTrigger"),
+    "trigger",
+    {},
+    { ...props, children },
+    "button"
+  );
+}
+function DatePickerContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  finalFocus,
+  keepMounted,
+  container,
+  render,
+  children,
+  ...props
+}) {
+  const picker = useDatePicker("DatePickerContent");
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    finalFocus,
+    keepMounted
+  };
+  const { months } = picker.state;
+  const body = children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CalendarPrevious, {}),
+      /* @__PURE__ */ jsx(CalendarHeading, {}),
+      /* @__PURE__ */ jsx(CalendarNext, {})
+    ] }),
+    Array.from({ length: months }, (_, offset) => /* @__PURE__ */ jsx(CalendarGrid, { offset }, offset))
+  ] }) : children;
+  const element = usePart(picker, "content", content, {
+    ...props,
+    children: body,
+    render: sheetViewport(picker, render)
+  });
+  return element && renderPopup(element, target);
+}
+function DatePickerHint({
+  children = placeholder,
+  ...props
+}) {
+  return usePart(
+    useDatePicker("DatePickerHint"),
+    "hint",
+    {},
+    { ...props, children },
+    "span"
+  );
+}
+var placeholder = (state) => state.placeholder;
+var DatePickerClear = parts.Clear;
+function DatePickerPreset({
+  value,
+  ...props
+}) {
+  return usePart(
+    datePickerPrimitive,
+    "preset",
+    { value, id: JSON.stringify(value) },
+    props,
+    "button"
+  );
+}
+export {
+  CalendarDay,
+  CalendarGrid2 as CalendarGrid,
+  CalendarHeading2 as CalendarHeading,
+  CalendarMonthSelect,
+  CalendarNext2 as CalendarNext,
+  CalendarPrevious2 as CalendarPrevious,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect,
+  DatePicker,
+  DatePickerClear,
+  DatePickerContent,
+  DatePickerHint,
+  DatePickerInput,
+  DatePickerPreset,
+  DatePickerTrigger,
+  createDatePickerController
+};

package/dist/date.d.ts

@@ -0,0 +1,2 @@
+export { addDays, addMonths, addYears, clampDate, dateFormatter, dateParts, datePattern, daysBetween, daysInMonth, endOfMonth, endOfWeek, firstDayOfWeek, formatDate, formatDateRange, formatDateToParts, isISODate, isSameMonth, isoDate, monthGrid, monthNames, parseDate, startOfMonth, startOfWeek, toISODate, todayDate, weekday, weekdayNames, } from "@ui-sdk/core/date";
+export type { DateField, DateParts, DatePattern, ISODate, } from "@ui-sdk/core/date";

package/dist/date.js

@@ -0,0 +1,60 @@
+"use client";
+// src/date.ts
+import {
+  addDays,
+  addMonths,
+  addYears,
+  clampDate,
+  dateFormatter,
+  dateParts,
+  datePattern,
+  daysBetween,
+  daysInMonth,
+  endOfMonth,
+  endOfWeek,
+  firstDayOfWeek,
+  formatDate,
+  formatDateRange,
+  formatDateToParts,
+  isISODate,
+  isSameMonth,
+  isoDate,
+  monthGrid,
+  monthNames,
+  parseDate,
+  startOfMonth,
+  startOfWeek,
+  toISODate,
+  todayDate,
+  weekday,
+  weekdayNames
+} from "@ui-sdk/core/date";
+export {
+  addDays,
+  addMonths,
+  addYears,
+  clampDate,
+  dateFormatter,
+  dateParts,
+  datePattern,
+  daysBetween,
+  daysInMonth,
+  endOfMonth,
+  endOfWeek,
+  firstDayOfWeek,
+  formatDate,
+  formatDateRange,
+  formatDateToParts,
+  isISODate,
+  isSameMonth,
+  isoDate,
+  monthGrid,
+  monthNames,
+  parseDate,
+  startOfMonth,
+  startOfWeek,
+  toISODate,
+  todayDate,
+  weekday,
+  weekdayNames
+};

package/dist/dialog-parts.d.ts

@@ -0,0 +1,23 @@
+import type { AlertDialogController, dialog as dialogPrimitive, DialogBackdropState, DialogCloseProps, DialogCloseState, DialogContentProps, DialogContentState, DialogController, DialogOptions, DialogShortcutProps, DialogShortcutState, DialogTriggerProps, DialogTriggerState } from "@ui-sdk/core/dialog";
+import * as React from "react";
+import { type sheetViewport } from "./popup.js";
+import { type PartProps } from "./use-primitive.js";
+type TriggerPartProps = Omit<PartProps<"button", DialogTriggerState>, "value" | "defaultValue" | "onChange"> & Omit<DialogTriggerProps, "controller">;
+type ContentPartProps<Payload = unknown> = PartProps<"div", DialogContentState<Payload>> & DialogContentProps;
+type ClosePartProps = Omit<PartProps<"button", DialogCloseState>, "value" | "action"> & DialogCloseProps;
+type ShortcutPartProps = PartProps<"span", DialogShortcutState> & DialogShortcutProps;
+declare function dialogParts(primitive: typeof dialogPrimitive, name: string, viewport?: typeof sheetViewport): {
+    Root: ({ children, container, ...options }: DialogOptions & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Trigger: ({ controller, ...props }: TriggerPartProps & {
+        controller?: DialogController<any, any> | AlertDialogController<any, any>;
+    }) => React.JSX.Element;
+    Backdrop: (props: PartProps<"div", DialogBackdropState>) => React.JSX.Element | null;
+    Content: <Payload = unknown>({ initialFocus, finalFocus, keepMounted, container, render, ...props }: ContentPartProps<Payload>) => React.JSX.Element | null;
+    Title: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "title", "h2">;
+    Description: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "description", "p">;
+    Close: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "close", "button">;
+    Shortcut: (props: ShortcutPartProps) => React.JSX.Element | null;
+};
+export { type ClosePartProps, type ContentPartProps, dialogParts, type ShortcutPartProps, type TriggerPartProps, };

package/dist/dialog-parts.js

@@ -0,0 +1,142 @@
+"use client";
+// src/dialog-parts.tsx
+import * as React from "react";
+import {
+  Connected,
+  renderPopup,
+  useOwnContainer,
+  usePopupContainer,
+  useControllerEntry
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  renderElement,
+  useHandle,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { jsx } from "react/jsx-runtime";
+var TriggerContext = React.createContext(null);
+var text = (state) => state.text;
+function dialogParts(primitive, name, viewport) {
+  const parts = createParts(primitive, {
+    title: "h2",
+    description: "p",
+    close: "button",
+    trigger: "button"
+  });
+  const ContainerContext = React.createContext(void 0);
+  function Root({
+    children,
+    container,
+    ...options
+  }) {
+    const handle = usePrimitive(primitive, options);
+    useControllerEntry(options.controller, handle);
+    return /* @__PURE__ */ jsx(HandleScope, { handle, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children }) });
+  }
+  function Trigger({
+    controller,
+    ...props
+  }) {
+    const {
+      disabled,
+      focusableWhenDisabled,
+      payload: _,
+      shortcut,
+      render,
+      ...rest
+    } = props;
+    const unconnected = () => renderElement(
+      "button",
+      {
+        type: "button",
+        disabled: disabled && !focusableWhenDisabled,
+        "aria-disabled": disabled && focusableWhenDisabled || void 0,
+        ...rest
+      },
+      render,
+      {
+        open: false,
+        disabled: !!disabled
+      }
+    );
+    return /* @__PURE__ */ jsx(TriggerContext.Provider, { value: { shortcut }, children: /* @__PURE__ */ jsx(
+      Connected,
+      {
+        primitive,
+        controller,
+        fallback: unconnected,
+        children: /* @__PURE__ */ jsx(parts.Trigger, { ...props })
+      }
+    ) });
+  }
+  function Backdrop(props) {
+    const target = usePopupContainer(React.useContext(ContainerContext));
+    const element = usePart(primitive, "backdrop", {}, props);
+    return element && renderPopup(element, target);
+  }
+  function Content({
+    initialFocus,
+    finalFocus,
+    keepMounted,
+    container,
+    render,
+    ...props
+  }) {
+    const handle = useHandle(primitive);
+    const target = usePopupContainer(
+      useOwnContainer(container, ContainerContext)
+    );
+    const partProps = {
+      ...props,
+      render: viewport ? viewport(handle, render) : render
+    };
+    const element = usePart(
+      handle,
+      "content",
+      { initialFocus, finalFocus, keepMounted },
+      partProps
+    );
+    return element && renderPopup(element, target);
+  }
+  function Shortcut(props) {
+    const trigger = React.useContext(TriggerContext);
+    if (useNearest(primitive)) {
+      return /* @__PURE__ */ jsx(ShortcutPart, { inherited: trigger?.shortcut, ...props });
+    }
+    if (trigger) {
+      return null;
+    }
+    throw new Error(`${name} parts must be used inside <${name}>.`);
+  }
+  function ShortcutPart({
+    inherited,
+    shortcut,
+    children = text,
+    ...props
+  }) {
+    return usePart(
+      primitive,
+      "shortcut",
+      { shortcut: shortcut ?? inherited },
+      { ...props, children },
+      "span"
+    );
+  }
+  return {
+    Root,
+    Trigger,
+    Backdrop,
+    Content,
+    Title: parts.Title,
+    Description: parts.Description,
+    Close: parts.Close,
+    Shortcut
+  };
+}
+export {
+  dialogParts
+};

package/dist/dialog.d.ts

@@ -0,0 +1,57 @@
+import { type DialogOptions, type DialogTriggerProps } from "@ui-sdk/core/dialog";
+import * as React from "react";
+import { type TriggerPartProps } from "./dialog-parts.js";
+/**
+ * The props of `Dialog`.
+ * @stable
+ */
+type DialogProps = DialogOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A window over the page that asks for the user's attention. Put its trigger, backdrop and content inside.
+ * @stable
+ */
+declare const Dialog: ({ children, container, ...options }: DialogOptions & {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+/**
+ * The button that opens the dialog. A trigger outside the dialog, like one per table row, connects through
+ * `controller`.
+ * @stable
+ */
+declare function DialogTrigger(props: TriggerPartProps & Pick<DialogTriggerProps, "controller">): React.JSX.Element;
+/**
+ * A dim behind the dialog. It's optional: without it, style the content's `::backdrop`.
+ * @stable
+ */
+declare const DialogBackdrop: (props: import("./use-primitive.js").PartProps<"div", import("@ui-sdk/core/dialog").DialogBackdropState>) => React.JSX.Element | null;
+/**
+ * The dialog itself, named by its title and described by its description.
+ * @stable
+ */
+declare const DialogContent: <Payload = unknown>({ initialFocus, finalFocus, keepMounted, container, render, ...props }: import("./dialog-parts.js").ContentPartProps<Payload>) => React.JSX.Element | null;
+/**
+ * The dialog's title, which names it. A level 2 heading by default.
+ * @stable
+ */
+declare const DialogTitle: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "title", "h2">;
+/**
+ * Describes the dialog while it's rendered. A paragraph by default.
+ * @stable
+ */
+declare const DialogDescription: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "description", "p">;
+/**
+ * A button that closes the dialog. An `action` runs first, and a Promise it returns keeps the dialog open
+ * until it settles.
+ * @stable
+ */
+declare const DialogClose: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "close", "button">;
+/**
+ * Shows a trigger's shortcut, like `⌘K`, inside the trigger. Hidden from screen readers, which hear `aria-keyshortcuts`.
+ * @stable
+ */
+declare const DialogShortcut: (props: import("./dialog-parts.js").ShortcutPartProps) => React.JSX.Element | null;
+export { createDialogController } from "@ui-sdk/core/dialog";
+export type { AlertDialogBackdropState, AlertDialogCloseActionDetails, AlertDialogCloseProps, AlertDialogCloseState, AlertDialogContentProps, AlertDialogContentState, AlertDialogController, AlertDialogOpenChangeReason, AlertDialogOptions, AlertDialogPayloadChangeReason, AlertDialogPrimitive, AlertDialogShortcutProps, AlertDialogShortcutState, AlertDialogTriggerProps, AlertDialogTriggerState, ConfirmEntry, ConfirmOptions, DialogApi, DialogBackdropState, DialogCloseActionDetails, DialogCloseProps, DialogCloseState, DialogContentProps, DialogContentState, DialogController, DialogDismissAttemptDetails, DialogDismissReason, DialogFinalFocus, DialogInitialFocus, DialogOpenChangeDetails, DialogOpenChangeReason, DialogOptions, DialogPayloadChangeReason, DialogPrimitive, DialogSharedOptions, DialogShortcutProps, DialogShortcutState, DialogTriggerProps, DialogTriggerState, } from "@ui-sdk/core/dialog";
+export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, type DialogProps, DialogShortcut, DialogTitle, DialogTrigger, };

package/dist/dialog.js

@@ -0,0 +1,32 @@
+"use client";
+// src/dialog.tsx
+import {
+  dialog as dialogPrimitive
+} from "@ui-sdk/core/dialog";
+import "react";
+import { dialogParts } from "./dialog-parts.js";
+import { sheetViewport } from "./popup.js";
+import { createDialogController } from "@ui-sdk/core/dialog";
+import { jsx } from "react/jsx-runtime";
+var parts = dialogParts(dialogPrimitive, "Dialog", sheetViewport);
+var Dialog = parts.Root;
+function DialogTrigger(props) {
+  return /* @__PURE__ */ jsx(parts.Trigger, { ...props });
+}
+var DialogBackdrop = parts.Backdrop;
+var DialogContent = parts.Content;
+var DialogTitle = parts.Title;
+var DialogDescription = parts.Description;
+var DialogClose = parts.Close;
+var DialogShortcut = parts.Shortcut;
+export {
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogShortcut,
+  DialogTitle,
+  DialogTrigger,
+  createDialogController
+};

package/dist/drawer.d.ts

@@ -0,0 +1,70 @@
+import type { DialogShortcutProps, DialogShortcutState, DialogTriggerState } from "@ui-sdk/core/dialog";
+import { type DrawerBackdropState, type DrawerContentProps, type DrawerContentState, type DrawerOptions, type DrawerOutletProps, type DrawerTriggerProps, type DrawerOutletState } from "@ui-sdk/core/drawer";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type TriggerPartProps = Omit<PartProps<"button", DialogTriggerState>, "value" | "defaultValue" | "onChange"> & DrawerTriggerProps;
+type ShortcutPartProps = PartProps<"span", DialogShortcutState> & DialogShortcutProps;
+/**
+ * The props of `Drawer`.
+ * @stable
+ */
+type DrawerProps = DrawerOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A dialog presented as a sheet that slides in from an edge. Put its trigger, backdrop and content inside.
+ * @stable
+ */
+declare function Drawer({ children, container, ...options }: DrawerProps): React.JSX.Element;
+/**
+ * The button that opens the drawer. A trigger outside the drawer, like one per table row, connects through
+ * `controller`.
+ * @stable
+ */
+declare function DrawerTrigger({ controller, ...props }: TriggerPartProps): React.JSX.Element;
+/**
+ * A dim behind the drawer. Its opacity follows the drawer, so give it a color like `bg-black/20`.
+ * @stable
+ */
+declare function DrawerBackdrop(props: PartProps<"div", DrawerBackdropState>): React.JSX.Element | null;
+/**
+ * The sheet itself, a dialog. It renders inside a full-screen viewport the drawer positions it in.
+ * @stable
+ */
+declare function DrawerContent<Payload = unknown>({ initialFocus, finalFocus, keepMounted, container, render, ...props }: PartProps<"div", DrawerContentState<Payload>> & DrawerContentProps): React.JSX.Element | null;
+/**
+ * The grabber. Pressing it moves to the next snap point; arrow keys, Home and End step. Name it, like `aria-label="Resize"`.
+ * @stable
+ */
+declare const DrawerHandle: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/drawer").DrawerPrimitive, "handle", "button">;
+/**
+ * The drawer's title, which names it. A level 2 heading by default.
+ * @stable
+ */
+declare const DrawerTitle: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/drawer").DrawerPrimitive, "title", "h2">;
+/**
+ * Describes the drawer while it's rendered. A paragraph by default.
+ * @stable
+ */
+declare const DrawerDescription: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/drawer").DrawerPrimitive, "description", "p">;
+/**
+ * A button that closes the drawer. An `action` runs first, and a Promise it returns keeps the drawer open
+ * until it settles.
+ * @stable
+ */
+declare const DrawerClose: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/drawer").DrawerPrimitive, "close", "button">;
+/**
+ * Shows a trigger's shortcut, like `⌘K`, inside the trigger. Hidden from screen readers, which hear `aria-keyshortcuts`.
+ * @stable
+ */
+declare function DrawerShortcut(props: ShortcutPartProps): React.JSX.Element | null;
+/**
+ * An element that follows the drawer, like the page behind it: it plays its
+ * `keyframes` as the drawer expands and gets the `--drawer-*` variables.
+ * Outside the drawer, pass the drawer's `controller`.
+ * @stable
+ */
+declare function DrawerOutlet({ controller, ...props }: PartProps<"div", DrawerOutletState> & DrawerOutletProps): React.JSX.Element;
+export { createDrawerController, sheetPhysics } from "@ui-sdk/core/drawer";
+export type { DrawerApi, DrawerBackdropState, DrawerContentProps, DrawerContentState, DrawerController, DrawerDismissAttemptDetails, DrawerDismissReason, DrawerDriver, DrawerHandleState, DrawerKeyframes, DrawerOpenChangeReason, DrawerOptions, DrawerOutletProps, DrawerOutletState, DrawerPayloadChangeReason, DrawerPrimitive, DrawerSide, DrawerSnapPointChangeReason, DrawerTriggerProps, SheetPhysics, SnapPoint, } from "@ui-sdk/core/drawer";
+export { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerOutlet, type DrawerProps, DrawerShortcut, DrawerTitle, DrawerTrigger, };