@salemcobalt/ui 0.2.0-rc.34 → 0.2.0-rc.36

package/dist/index.d.ts

@@ -1310,12 +1310,19 @@ declare const Toolbar: {
 };
 
 type BannerTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type BannerPlacement = 'inline' | 'page';
 interface BannerProps extends ComponentPropsWithRef<'div'> {
     /** Colour and default icon. `warning` and `danger` are announced as alerts; the rest as status. */
     tone?: BannerTone | undefined;
+    /**
+     * `inline` (default): a rounded strip inside a view. `page`: a full-bleed notice across the top of the page, above
+     * the header: square, compact, with a hairline under it. A page notice is there on every load, so pass
+     * `role="status"` with a `warning` tone unless it must interrupt.
+     */
+    placement?: BannerPlacement | undefined;
     /** Replaces the tone's icon; `false` removes it. */
     icon?: ReactNode | false | undefined;
-    /** One Button, usually `variant="ghost" size="sm"`, at the end of the strip. */
+    /** One Button, usually `variant="ghost" size="sm"`, at the end of the strip; or an Inline of two (Details, Hide). */
     action?: ReactNode | undefined;
     /** Shows a close button that hides the banner. */
     dismissible?: boolean | undefined;
@@ -1327,7 +1334,7 @@ interface BannerProps extends ComponentPropsWithRef<'div'> {
     dismissLabel?: string | undefined;
 }
 /** A single-line status strip across the top of a view: paused, offline, "3 new since you looked". */
-declare function Banner({ tone, icon, action, dismissible, onDismiss, open, dismissLabel, role, className, children, ...rest }: BannerProps): react.JSX.Element | null;
+declare function Banner({ tone, placement, icon, action, dismissible, onDismiss, open, dismissLabel, role, className, children, ...rest }: BannerProps): react.JSX.Element | null;
 
 interface SpinnerProps extends ComponentPropsWithRef<'span'> {
     /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the font size. */

package/dist/index.js

@@ -743,6 +743,51 @@ import { useRender as useRender2 } from "@base-ui/react/use-render";
 
 // src/components/Tooltip/Tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+
+// src/utils/useSafeAreaPadding.ts
+import { useSyncExternalStore } from "react";
+var EDGE = 5;
+var NONE = { top: EDGE, right: EDGE, bottom: EDGE, left: EDGE };
+var current = NONE;
+var listeners = /* @__PURE__ */ new Set();
+function measure() {
+  const probe = document.createElement("div");
+  probe.setAttribute("data-sc-safe-area-probe", "");
+  probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)";
+  document.body.appendChild(probe);
+  const style = getComputedStyle(probe);
+  const px = (value) => EDGE + (parseFloat(value) || 0);
+  const next = {
+    top: px(style.paddingTop),
+    right: px(style.paddingRight),
+    bottom: px(style.paddingBottom),
+    left: px(style.paddingLeft)
+  };
+  probe.remove();
+  if (next.top === current.top && next.right === current.right && next.bottom === current.bottom && next.left === current.left) {
+    return;
+  }
+  current = next;
+  listeners.forEach((listener) => listener());
+}
+function subscribe(onChange) {
+  if (listeners.size === 0) window.addEventListener("resize", measure);
+  listeners.add(onChange);
+  measure();
+  return () => {
+    listeners.delete(onChange);
+    if (listeners.size === 0) window.removeEventListener("resize", measure);
+  };
+}
+function useSafeAreaPadding() {
+  return useSyncExternalStore(
+    subscribe,
+    () => current,
+    () => NONE
+  );
+}
+
+// src/components/Tooltip/Tooltip.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function TooltipBase({
   content,
@@ -757,6 +802,7 @@ function TooltipBase({
   disabled,
   className
 }) {
+  const collisionPadding = useSafeAreaPadding();
   return /* @__PURE__ */ jsxs6(
     BaseTooltip.Root,
     {
@@ -766,10 +812,20 @@ function TooltipBase({
       disabled,
       children: [
         /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { render: children, delay, closeDelay }),
-        /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(BaseTooltip.Positioner, { side, align, sideOffset: 6, className: "sc-tooltip__positioner", children: /* @__PURE__ */ jsxs6(BaseTooltip.Popup, { role: "tooltip", className: cx("sc-tooltip", className), children: [
-          /* @__PURE__ */ jsx7(BaseTooltip.Arrow, { className: "sc-tooltip__arrow" }),
-          content
-        ] }) }) })
+        /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(
+          BaseTooltip.Positioner,
+          {
+            side,
+            align,
+            sideOffset: 6,
+            collisionPadding,
+            className: "sc-tooltip__positioner",
+            children: /* @__PURE__ */ jsxs6(BaseTooltip.Popup, { role: "tooltip", className: cx("sc-tooltip", className), children: [
+              /* @__PURE__ */ jsx7(BaseTooltip.Arrow, { className: "sc-tooltip__arrow" }),
+              content
+            ] })
+          }
+        ) })
       ]
     }
   );
@@ -866,7 +922,18 @@ function Content2({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx9(BaseMenu.Portal, { children: /* @__PURE__ */ jsx9(BaseMenu.Positioner, { side, align, sideOffset, className: "sc-menu__positioner", children: /* @__PURE__ */ jsx9(BaseMenu.Popup, { className: cx("sc-menu", className), ...rest, children }) }) });
+  const collisionPadding = useSafeAreaPadding();
+  return /* @__PURE__ */ jsx9(BaseMenu.Portal, { children: /* @__PURE__ */ jsx9(
+    BaseMenu.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      collisionPadding,
+      className: "sc-menu__positioner",
+      children: /* @__PURE__ */ jsx9(BaseMenu.Popup, { className: cx("sc-menu", className), ...rest, children })
+    }
+  ) });
 }
 function useItemBody({
   icon,
@@ -1195,12 +1262,13 @@ function Select({
   const items = options.flatMap((entry) => isGroup(entry) ? entry.options : [entry]);
   const [internal, setInternal] = useState(defaultValue ?? null);
   const controlled = value !== void 0;
-  const current = controlled ? value : internal;
+  const current2 = controlled ? value : internal;
   const setValue = (next) => {
     if (!controlled) setInternal(next);
     onValueChange?.(next);
   };
-  const canClear = clearable && current != null && !disabled && !readOnly;
+  const canClear = clearable && current2 != null && !disabled && !readOnly;
+  const collisionPadding = useSafeAreaPadding();
   const onTriggerKeyDown = (event) => {
     if (canClear && (event.key === "Backspace" || event.key === "Delete")) {
       event.preventDefault();
@@ -1224,7 +1292,7 @@ function Select({
         BaseSelect.Root,
         {
           items,
-          value: current,
+          value: current2,
           onValueChange: (next) => setValue(next),
           disabled,
           required,
@@ -1262,6 +1330,7 @@ function Select({
               {
                 className: "sc-select__positioner",
                 sideOffset: 4,
+                collisionPadding,
                 alignItemWithTrigger: false,
                 children: /* @__PURE__ */ jsx13(BaseSelect.Popup, { className: "sc-select__popup", children: /* @__PURE__ */ jsx13(BaseSelect.List, { children: options.map(
                   (entry, i) => isGroup(entry) ? /* @__PURE__ */ jsxs11(BaseSelect.Group, { className: "sc-select__group", children: [
@@ -1436,6 +1505,7 @@ var toneIcons = {
 };
 function Banner({
   tone = "info",
+  placement = "inline",
   icon,
   action,
   dismissible = false,
@@ -1457,6 +1527,7 @@ function Banner({
       role: role ?? (tone === "warning" || tone === "danger" ? "alert" : "status"),
       className: cx("sc-banner", className),
       "data-tone": tone,
+      "data-placement": placement === "page" ? "page" : void 0,
       ...rest,
       children: [
         glyph ? /* @__PURE__ */ jsx18("span", { className: "sc-banner__icon", "aria-hidden": "true", children: glyph }) : null,
@@ -1533,12 +1604,12 @@ function Progress({
   className,
   ...rest
 }) {
-  const current = value ?? null;
-  const hasValueText = valueText != null || showValue && current !== null;
+  const current2 = value ?? null;
+  const hasValueText = valueText != null || showValue && current2 !== null;
   return /* @__PURE__ */ jsxs17(
     BaseProgress.Root,
     {
-      value: current,
+      value: current2,
       max,
       min,
       getAriaValueText: (formatted) => typeof valueText === "string" ? valueText : formatted ?? "",
@@ -2478,9 +2549,9 @@ function fileTypeLabel(file) {
 }
 
 // src/utils/useMediaQuery.ts
-import { useCallback as useCallback2, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useMediaQuery(query) {
-  const subscribe = useCallback2(
+  const subscribe2 = useCallback2(
     (onChange) => {
       if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
       };
@@ -2490,8 +2561,8 @@ function useMediaQuery(query) {
     },
     [query]
   );
-  return useSyncExternalStore(
-    subscribe,
+  return useSyncExternalStore2(
+    subscribe2,
     () => typeof window.matchMedia === "function" && window.matchMedia(query).matches,
     () => false
   );
@@ -2646,7 +2717,7 @@ function FileInput({
   const messagesId = `${id}messages`;
   const controlled = files !== void 0;
   const [uncontrolledFiles, setUncontrolledFiles] = useState6(defaultFiles ?? []);
-  const current = controlled ? files : uncontrolledFiles;
+  const current2 = controlled ? files : uncontrolledFiles;
   const [rejections, setRejections] = useState6([]);
   const [inputId, setInputId] = useState6();
   const [previewFile, setPreviewFile] = useState6(null);
@@ -2658,21 +2729,21 @@ function FileInput({
   const moduleRef = useRef4(null);
   const patchRef = useRef4(() => {
   });
-  const settledRef = useRef4(current);
+  const settledRef = useRef4(current2);
   const targetRef = useRef4(null);
   const acceptList = parseAccept(accept);
   const acceptAttr = acceptList.join(",");
   const maxBytes = parseSize(maxFileSize);
   const messages = [...rejections, ...error != null ? [error] : []];
   const isInvalid = invalid || messages.length > 0;
-  const idleText = idleLabel ?? (multiple ? "Drop files here or" : current.length > 0 ? "Drop another file to replace it, or" : "Drop a file here or");
+  const idleText = idleLabel ?? (multiple ? "Drop files here or" : current2.length > 0 ? "Drop another file to replace it, or" : "Drop a file here or");
   const live = {
     acceptList,
     acceptLabel: acceptLabel ?? describeAccept(acceptList),
     maxBytes,
     maxFiles: multiple ? maxFiles : 1,
     multiple,
-    current,
+    current: current2,
     controlled,
     onFilesChange,
     labelId,
@@ -2914,15 +2985,15 @@ function FileInput({
     const items = pond.getFiles();
     const idle = items.filter((item) => item.status === mod.FileStatus.IDLE);
     const inPond = idle.map((item) => item.file);
-    if (sameFiles(inPond, current)) {
-      settledRef.current = current;
+    if (sameFiles(inPond, current2)) {
+      settledRef.current = current2;
       return;
     }
-    targetRef.current = current;
-    for (const item of idle) if (!current.includes(item.file)) pond.removeFile(item.id);
-    const toAdd = current.filter((file) => !inPond.includes(file));
+    targetRef.current = current2;
+    for (const item of idle) if (!current2.includes(item.file)) pond.removeFile(item.id);
+    const toAdd = current2.filter((file) => !inPond.includes(file));
     if (toAdd.length > 0) void pond.addFiles(toAdd);
-  }, [current, pondVersion]);
+  }, [current2, pondVersion]);
   const ready = pondVersion > 0;
   return /* @__PURE__ */ jsxs25(
     "div",
@@ -3001,15 +3072,15 @@ function rowWidth(widths, gap) {
   for (const w of widths) total += w;
   return widths.length > 1 ? total + gap * (widths.length - 1) : total;
 }
-function fitCount({ widths, current, available, more, gap }) {
+function fitCount({ widths, current: current2, available, more, gap }) {
   const n = widths.length;
-  const hasCurrent = current >= 0 && current < n;
+  const hasCurrent = current2 >= 0 && current2 < n;
   const others = hasCurrent ? n - 1 : n;
   if (rowWidth(widths, gap) <= available + EPSILON) return others;
-  let used = more + (hasCurrent ? widths[current] + gap : 0);
+  let used = more + (hasCurrent ? widths[current2] + gap : 0);
   let count = 0;
   for (let i = 0; i < n; i++) {
-    if (i === current) continue;
+    if (i === current2) continue;
     const next = used + widths[i] + gap;
     if (next > available + EPSILON) break;
     used = next;
@@ -3017,11 +3088,11 @@ function fitCount({ widths, current, available, more, gap }) {
   }
   return count;
 }
-function inlineFlags(length, current, count) {
+function inlineFlags(length, current2, count) {
   const flags = [];
   let seen = 0;
   for (let i = 0; i < length; i++) {
-    if (i === current) flags.push(true);
+    if (i === current2) flags.push(true);
     else flags.push(seen++ < count);
   }
   return flags;
@@ -3080,7 +3151,7 @@ function PriorityNav({
   ...rest
 }) {
   const signature = signatureOf(items);
-  const current = items.findIndex((item) => item.current);
+  const current2 = items.findIndex((item) => item.current);
   const [fit, setFit] = useState7({ signature: null, current: -1, count: 0, overflowing: false });
   const [open, setOpen] = useState7(false);
   const panelId = useId5();
@@ -3089,7 +3160,7 @@ function PriorityNav({
   const toggleRef = useRef5(null);
   const panelRef = useRef5(null);
   const measured = useRef5(null);
-  const currentRef = useRef5(current);
+  const currentRef = useRef5(current2);
   const fitRef = useRef5(fit);
   const hysteresisRef = useRef5(overflowHysteresis);
   const onOverflowRef = useRef5(onOverflowChange);
@@ -3099,7 +3170,7 @@ function PriorityNav({
   });
   const measuring = fit.signature !== signature;
   useLayoutEffect2(() => {
-    currentRef.current = current;
+    currentRef.current = current2;
     fitRef.current = fit;
     hysteresisRef.current = overflowHysteresis;
     onOverflowRef.current = onOverflowChange;
@@ -3119,11 +3190,11 @@ function PriorityNav({
         gap: parseFloat(getComputedStyle(list).columnGap) || 0,
         available: list.clientWidth
       };
-    } else if (fit.current === current) return;
+    } else if (fit.current === current2) return;
     const m = measured.current;
     if (!m) return;
-    setFit({ signature, current, ...solve(m, current, fit.overflowing) });
-  }, [measuring, signature, current, fit]);
+    setFit({ signature, current: current2, ...solve(m, current2, fit.overflowing) });
+  }, [measuring, signature, current2, fit]);
   useEffect5(() => {
     const list = listRef.current;
     const more = moreRef.current;
@@ -3165,7 +3236,7 @@ function PriorityNav({
       live = false;
     };
   }, []);
-  const flags = measuring ? null : inlineFlags(items.length, current, fit.count);
+  const flags = measuring ? null : inlineFlags(items.length, current2, fit.count);
   const overflow = flags ? items.filter((_, i) => !flags[i]) : [];
   const expanded = open && overflow.length > 0;
   const overflowBadges = overflow.map(badgeOf).filter((b) => b !== null);
@@ -3340,6 +3411,7 @@ function Content3({
   children,
   ...rest
 }) {
+  const collisionPadding = useSafeAreaPadding();
   return /* @__PURE__ */ jsx32(BasePopover.Portal, { children: /* @__PURE__ */ jsx32(
     BasePopover.Positioner,
     {
@@ -3348,6 +3420,7 @@ function Content3({
       sideOffset: sideOffset ?? (arrow ? 8 : 4),
       anchor,
       collisionAvoidance: COLLISION_AVOIDANCE,
+      collisionPadding,
       className: "sc-popover__positioner",
       children: /* @__PURE__ */ jsxs27(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
         arrow ? /* @__PURE__ */ jsx32(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
@@ -3540,15 +3613,15 @@ function Progress2({
     label ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__progress-label", children: label }) : null,
     /* @__PURE__ */ jsx34("ol", { className: "sc-flow__segments", "aria-label": listLabel, children: chapters.map((chapter, i) => {
       const from = starts[i];
-      const current = step > from && step <= from + chapter.steps;
-      const done = Math.min(chapter.steps, Math.max(0, step - 1 - from)) + (current ? 0.5 : 0);
+      const current2 = step > from && step <= from + chapter.steps;
+      const done = Math.min(chapter.steps, Math.max(0, step - 1 - from)) + (current2 ? 0.5 : 0);
       const percent = chapter.steps > 0 ? Math.min(100, done / chapter.steps * 100) : 0;
       return /* @__PURE__ */ jsxs29(
         "li",
         {
           className: "sc-flow__segment",
           style: { flexGrow: chapter.steps },
-          "aria-current": current ? "step" : void 0,
+          "aria-current": current2 ? "step" : void 0,
           children: [
             /* @__PURE__ */ jsx34("span", { className: "sc-flow__segment-fill", style: { inlineSize: `${percent}%` } }),
             /* @__PURE__ */ jsx34("span", { className: "sc-visually-hidden", children: chapter.label })
@@ -3582,7 +3655,7 @@ function RailGroup({ label, className, children, ...rest }) {
   ] });
 }
 function RailItem({
-  current = false,
+  current: current2 = false,
   done = false,
   doneLabel = "done",
   adornment,
@@ -3596,7 +3669,7 @@ function RailItem({
     {
       type,
       className: cx("sc-flow__rail-item", className),
-      "aria-current": current ? "step" : void 0,
+      "aria-current": current2 ? "step" : void 0,
       "data-done": done || void 0,
       ...rest,
       children: [