@salemcobalt/ui 0.2.0-rc.22 → 0.2.0-rc.24

package/README.md

@@ -33,7 +33,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 | `Card`                   | `variant` outlined · elevated · filled · plain (a quiet row: no surface, a hover wash without border or shadow, selected is `accent.wash` with a 1px `accent.border`); `padding` none · sm · md · lg; `interactive`; `selected` (visual only: pair with `aria-pressed`/`aria-selected`/`aria-current`; also turns a Score inside solid); `as` or `render` to make it an `a`/`button`/`li`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `Stack`, `Inline`        | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `Kbd`                    | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `Dialog`                 | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`, `onRequestClose(reason)`: Esc, backdrop and every `Close` ask instead of closing; close by setting `open`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`; `variant="fullscreen"` covers the viewport, inset 16px from 900px, with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `Dialog`                 | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`, `onRequestClose(reason)`: Esc, backdrop and every `Close` ask instead of closing; close by setting `open`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body` and swipe-down-to-dismiss from its handle or header (top 64px, outside controls and `Body`; closes past 30% of its height or on a flick, otherwise springs back; the handle is a `Close` named "Dismiss"; `dismissOnSwipe={false}` where an accidental close loses work, also off when the Root is not `dismissible`); `variant="fullscreen"` covers the viewport, inset 16px from 900px, with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FullScreenFlow`         | A multi-step takeover on `Dialog variant="fullscreen"` (docs/adr/0006). `Root` (`open` default `true`, required `onRequestClose(reason)` for Esc and the ×, `onNext`/`onBack` for Enter and the arrow keys outside controls, `decoration`), `Header` (`title` names the dialog, `logo`, `compactTitle` below 760px, `status`, `closeLabel`; children: `Progress`), `Progress` (`chapters` `{ label, steps }[]`, `step` counted from 1, `label`; current chapter `aria-current="step"`), `Body`, `Rail` (from 1000px, `footer`) › `RailGroup` (`label`) › `RailItem` (`current`, `done`, `disabled`, `adornment`), `Viewport` (`direction` forward · back; one keyed `Step`), `Step` (`title` an `<h2>` that takes focus, `eyebrow`, `description`, `announcement` for the live region), `Footer` (`back`, `hint`, children; 44px buttons). The app owns the step state; the flow owns motion, focus and announcements.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `Toolbar`                | `Root` (required `aria-label`, `wrap`, `gap`), `Group` (`aria-label`, `gap`), `Separator`, `Spacer`, `Button` (`render={<IconButton … />}` or `render={<Menu.Trigger render={…} />}` so the control joins the roving focus: Tab enters, arrows move, Tab leaves), `Link` (an anchor in the same navigation; `render={<IconButton label render={<a href />} />}` for an icon link).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `Banner`                 | `tone` info (default) · success · warning · danger · neutral; `icon` (or `false`); `action` slot; `dismissible` + `onDismiss` (`open` to control); warning and danger are `role="alert"`, the rest `role="status"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |

package/dist/index.d.ts

@@ -738,13 +738,21 @@ interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
      * the Root when leaving needs a confirmation.
      */
     variant?: DialogVariant | undefined;
+    /**
+     * `sheet` only. Below 640px a downward drag on the handle or the header (the top 64px, outside controls
+     * and `Dialog.Body`) moves the sheet; letting go past 30% of its height, or flicking down, closes it the
+     * way a press on the handle does (the handle is a `Dialog.Close` named "Dismiss"). Set `false` where an
+     * accidental close loses work; the handle then stays as decoration only. Off whenever the Root is not
+     * `dismissible`. Default `true`.
+     */
+    dismissOnSwipe?: boolean | undefined;
     className?: string | undefined;
 }
 /**
  * Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close.
  * Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
  */
-declare function Content$2({ size, variant, className, children, ...rest }: DialogContentProps): react.JSX.Element;
+declare function Content$2({ size, variant, dismissOnSwipe, className, children, ...rest }: DialogContentProps): react.JSX.Element;
 interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
     className?: string | undefined;
 }

package/dist/index.js

@@ -167,6 +167,141 @@ var Kbd = Object.assign(KbdBase, { Group: KbdGroup });
 
 // src/components/Dialog/Dialog.tsx
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { createContext, useCallback, useContext } from "react";
+
+// src/components/Dialog/sheetSwipe.ts
+var SHEET_SWIPE = {
+  /** Height in px, from the sheet's top edge, where a drag may start: the handle and the header. */
+  zone: 64,
+  /** Movement in px before a press becomes a drag, so taps stay taps. */
+  slop: 6,
+  /** Fraction of the sheet's height past which a release dismisses. */
+  distance: 0.3,
+  /** Release speed in px/ms: this fast downward dismisses at any distance, this fast upward keeps it open. */
+  velocity: 0.5,
+  /** Only samples this recent (ms) before the release count toward its speed. */
+  window: 100
+};
+function dragIntent(dx, dy, slop = SHEET_SWIPE.slop) {
+  if (Math.abs(dx) < slop && Math.abs(dy) < slop) return "pending";
+  return dy > 0 && dy >= Math.abs(dx) ? "drag" : "cancel";
+}
+function releaseVelocity(samples, window2 = SHEET_SWIPE.window) {
+  const last = samples[samples.length - 1];
+  if (!last) return 0;
+  const first = samples.find((s) => last.t - s.t <= window2) ?? last;
+  const dt = last.t - first.t;
+  return dt > 0 ? (last.y - first.y) / dt : 0;
+}
+function shouldDismissSheet({ offset, height, velocity }) {
+  if (offset <= 0 || height <= 0) return false;
+  if (velocity >= SHEET_SWIPE.velocity) return true;
+  if (velocity <= -SHEET_SWIPE.velocity) return false;
+  return offset >= height * SHEET_SWIPE.distance;
+}
+var IGNORE = 'a,button,input,select,textarea,label,[role="button"],[contenteditable]';
+function attachSheetSwipe(handle) {
+  const popup = handle.parentElement;
+  if (!popup) return () => {
+  };
+  let press = null;
+  let dragging = false;
+  let height = 0;
+  let samples = [];
+  let suppressClick = false;
+  const startsDrag = (e) => {
+    if (!e.isPrimary || e.pointerType === "mouse" && e.button !== 0) return false;
+    if (handle.getClientRects().length === 0) return false;
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target || handle.contains(target)) return true;
+    if (target.closest(IGNORE) || target.closest(".sc-dialog__body")) return false;
+    return e.clientY - popup.getBoundingClientRect().top <= SHEET_SWIPE.zone;
+  };
+  const settle = () => {
+    delete popup.dataset.swiping;
+    popup.style.removeProperty("transform");
+  };
+  const onDown = (e) => {
+    if (press || !startsDrag(e)) return;
+    press = { id: e.pointerId, x: e.clientX, y: e.clientY };
+    samples = [{ t: e.timeStamp, y: e.clientY }];
+  };
+  const onMove = (e) => {
+    if (!press || e.pointerId !== press.id) return;
+    const dy = e.clientY - press.y;
+    if (!dragging) {
+      const intent = dragIntent(e.clientX - press.x, dy);
+      if (intent === "pending") return;
+      if (intent === "cancel") {
+        press = null;
+        return;
+      }
+      dragging = true;
+      height = popup.getBoundingClientRect().height;
+      popup.dataset.swiping = "";
+      popup.setPointerCapture?.(e.pointerId);
+      window.getSelection()?.removeAllRanges();
+    }
+    e.preventDefault();
+    samples.push({ t: e.timeStamp, y: e.clientY });
+    if (samples.length > 32) samples = samples.slice(-16);
+    popup.style.transform = `translateY(${Math.max(0, dy)}px)`;
+  };
+  const end = (e, cancelled) => {
+    if (!press || e.pointerId !== press.id) return;
+    const startY = press.y;
+    const wasDragging = dragging;
+    press = null;
+    dragging = false;
+    if (!wasDragging) return;
+    window.setTimeout(() => {
+      suppressClick = false;
+    }, 0);
+    if (cancelled) {
+      suppressClick = true;
+      settle();
+      return;
+    }
+    samples.push({ t: e.timeStamp, y: e.clientY });
+    const release = {
+      offset: Math.max(0, e.clientY - startY),
+      height,
+      velocity: releaseVelocity(samples)
+    };
+    if (shouldDismissSheet(release)) {
+      delete popup.dataset.swiping;
+      handle.click();
+      suppressClick = true;
+      window.requestAnimationFrame(() => {
+        if (popup.isConnected && popup.hasAttribute("data-open")) settle();
+      });
+    } else {
+      suppressClick = true;
+      settle();
+    }
+  };
+  const onUp = (e) => end(e, false);
+  const onCancel = (e) => end(e, true);
+  const onClick = (e) => {
+    if (!suppressClick) return;
+    suppressClick = false;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  popup.addEventListener("pointerdown", onDown);
+  popup.addEventListener("pointermove", onMove);
+  popup.addEventListener("pointerup", onUp);
+  popup.addEventListener("pointercancel", onCancel);
+  popup.addEventListener("click", onClick, true);
+  return () => {
+    popup.removeEventListener("pointerdown", onDown);
+    popup.removeEventListener("pointermove", onMove);
+    popup.removeEventListener("pointerup", onUp);
+    popup.removeEventListener("pointercancel", onCancel);
+    popup.removeEventListener("click", onClick, true);
+    settle();
+  };
+}
 
 // src/components/Icon/Icon.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -447,6 +582,7 @@ var REQUESTABLE = /* @__PURE__ */ new Set([
   "outside-press",
   "close-press"
 ]);
+var DismissibleContext = createContext(true);
 function Root({
   dismissible = true,
   onOpenChange,
@@ -473,27 +609,49 @@ function Root({
         }
         onOpenChange?.(next);
       },
-      children
+      children: /* @__PURE__ */ jsx6(DismissibleContext.Provider, { value: dismissible, children })
     }
   );
 }
 var Trigger = BaseDialog.Trigger;
-function Content({ size = "md", variant = "dialog", className, children, ...rest }) {
+function Content({
+  size = "md",
+  variant = "dialog",
+  dismissOnSwipe = true,
+  className,
+  children,
+  ...rest
+}) {
+  const dismissible = useContext(DismissibleContext);
+  const isSheet = variant === "sheet";
+  const swipe = isSheet && dismissOnSwipe && dismissible;
   return /* @__PURE__ */ jsxs5(BaseDialog.Portal, { children: [
     /* @__PURE__ */ jsx6(BaseDialog.Backdrop, { className: "sc-dialog__backdrop" }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs5(
       BaseDialog.Popup,
       {
         className: cx("sc-dialog__popup", className),
         "data-size": size,
         "data-variant": variant,
+        "data-swipe-dismiss": swipe ? "" : void 0,
         "aria-modal": "true",
         ...rest,
-        children
+        children: [
+          isSheet && /* @__PURE__ */ jsx6(SheetHandle, { swipe }),
+          children
+        ]
       }
     )
   ] });
 }
+function SheetHandle({ swipe }) {
+  const attach = useCallback(
+    (node) => node ? attachSheetSwipe(node) : void 0,
+    []
+  );
+  if (!swipe) return /* @__PURE__ */ jsx6("div", { className: "sc-dialog__handle", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx6(BaseDialog.Close, { ref: attach, className: "sc-dialog__handle", "aria-label": "Dismiss" });
+}
 function Title({ className, ...rest }) {
   return /* @__PURE__ */ jsx6(BaseDialog.Title, { className: cx("sc-dialog__title", className), ...rest });
 }
@@ -1402,14 +1560,14 @@ function Text({
 // src/components/Table/Table.tsx
 import { Checkbox as BaseCheckbox2 } from "@base-ui/react/checkbox";
 import {
-  createContext,
-  useContext
+  createContext as createContext2,
+  useContext as useContext2
 } from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var SelectionContext = createContext(null);
-var RowIdContext = createContext(void 0);
+var SelectionContext = createContext2(null);
+var RowIdContext = createContext2(void 0);
 function useSelection(part) {
-  const selection = useContext(SelectionContext);
+  const selection = useContext2(SelectionContext);
   if (!selection) throw new Error(`${part} needs Table.Root selection={useRowSelection(ids)}`);
   return selection;
 }
@@ -1498,7 +1656,7 @@ function Row({
   onMouseDown,
   ...rest
 }) {
-  const selection = useContext(SelectionContext);
+  const selection = useContext2(SelectionContext);
   const selectable = selection !== null && selectionId !== void 0;
   const isSelected = selected ?? (selectable && selection.isSelected(selectionId));
   const row = /* @__PURE__ */ jsx21(
@@ -1571,7 +1729,7 @@ function SelectionHeader({
 }
 function SelectionCell({ label, className, onClick, onClickCapture, ...rest }) {
   const selection = useSelection("Table.SelectionCell");
-  const id = useContext(RowIdContext);
+  const id = useContext2(RowIdContext);
   if (id === void 0) throw new Error("Table.SelectionCell goes inside a Table.Row with selectionId");
   return /* @__PURE__ */ jsx21(
     "td",
@@ -2255,9 +2413,9 @@ function fileTypeLabel(file) {
 }
 
 // src/utils/useMediaQuery.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
 function useMediaQuery(query) {
-  const subscribe = useCallback(
+  const subscribe = useCallback2(
     (onChange) => {
       if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
       };
@@ -3190,9 +3348,9 @@ function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest })
 // src/components/FullScreenFlow/FullScreenFlow.tsx
 import {
   Children as Children2,
-  createContext as createContext2,
-  useCallback as useCallback2,
-  useContext as useContext2,
+  createContext as createContext3,
+  useCallback as useCallback3,
+  useContext as useContext3,
   useEffect as useEffect6,
   useId as useId5,
   useMemo as useMemo3,
@@ -3200,9 +3358,9 @@ import {
   useState as useState8
 } from "react";
 import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
-var FlowContext = createContext2({ announce: () => {
+var FlowContext = createContext3({ announce: () => {
 } });
-var FrameContext = createContext2(void 0);
+var FrameContext = createContext3(void 0);
 var ENTER_IGNORES = 'textarea, button, a[href], summary, select, [contenteditable], [role="combobox"], [data-flow-keys="local"]';
 var ARROW_IGNORES = 'input, textarea, select, button, a[href], summary, [contenteditable], [role="radiogroup"], [role="slider"], [role="listbox"], [role="tablist"], [role="menu"], [role="grid"], [role="combobox"], [data-flow-keys="local"]';
 function Root7({
@@ -3217,7 +3375,7 @@ function Root7({
   const popupRef = useRef6(null);
   const [message, setMessage] = useState8("");
   const timer = useRef6(void 0);
-  const announce = useCallback2((next) => {
+  const announce = useCallback3((next) => {
     setMessage("");
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setMessage(next), 30);
@@ -3403,7 +3561,7 @@ function Viewport2({ direction = "forward", className, children, ...rest }) {
   } else if (state.current.element !== element) {
     setState((s) => ({ ...s, current: { ...s.current, element } }));
   }
-  const finishExit = useCallback2((leftKey) => {
+  const finishExit = useCallback3((leftKey) => {
     setState((s) => s.leaving?.key === leftKey ? { ...s, leaving: null } : s);
   }, []);
   const ref = useRef6(null);
@@ -3472,8 +3630,8 @@ function Step({
 }) {
   const id = useId5();
   const titleRef = useRef6(null);
-  const phase = useContext2(FrameContext);
-  const { announce } = useContext2(FlowContext);
+  const phase = useContext3(FrameContext);
+  const { announce } = useContext3(FlowContext);
   const message = announcement ?? (typeof title === "string" ? title : void 0);
   const latest = useRef6({ message, announce });
   useEffect6(() => {