@salemcobalt/ui 0.2.0-rc.11 → 0.2.0-rc.13

package/dist/index.js

@@ -442,7 +442,19 @@ function XIcon(props) {
 
 // src/components/Dialog/Dialog.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function Root({ dismissible = true, onOpenChange, open, defaultOpen, children }) {
+var REQUESTABLE = /* @__PURE__ */ new Set([
+  "escape-key",
+  "outside-press",
+  "close-press"
+]);
+function Root({
+  dismissible = true,
+  onOpenChange,
+  onRequestClose,
+  open,
+  defaultOpen,
+  children
+}) {
   return /* @__PURE__ */ jsx6(
     BaseDialog.Root,
     {
@@ -454,6 +466,11 @@ function Root({ dismissible = true, onOpenChange, open, defaultOpen, children })
           details.cancel();
           return;
         }
+        if (!next && onRequestClose && REQUESTABLE.has(details.reason)) {
+          details.cancel();
+          onRequestClose(details.reason);
+          return;
+        }
         onOpenChange?.(next);
       },
       children
@@ -3133,6 +3150,331 @@ 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,
+  useEffect as useEffect6,
+  useEffectEvent,
+  useId as useId5,
+  useMemo as useMemo3,
+  useRef as useRef6,
+  useState as useState8
+} from "react";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+var FlowContext = createContext2({ announce: () => {
+} });
+var FrameContext = createContext2(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({
+  open = true,
+  onRequestClose,
+  onNext,
+  onBack,
+  decoration,
+  className,
+  children
+}) {
+  const popupRef = useRef6(null);
+  const [message, setMessage] = useState8("");
+  const timer = useRef6(void 0);
+  const announce = useCallback2((next) => {
+    setMessage("");
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setMessage(next), 30);
+  }, []);
+  useEffect6(() => () => clearTimeout(timer.current), []);
+  const context = useMemo3(() => ({ announce }), [announce]);
+  const handleKeyDown = (event) => {
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+    if (event.nativeEvent.isComposing) return;
+    const target = event.target;
+    if (!event.currentTarget.contains(target)) return;
+    if (event.key === "Enter") {
+      if (!onNext || target.closest(ENTER_IGNORES)) return;
+      event.preventDefault();
+      onNext();
+      return;
+    }
+    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+    if (target.closest(ARROW_IGNORES)) return;
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const forward = event.key === "ArrowRight" !== rtl;
+    const handler = forward ? onNext : onBack;
+    if (!handler) return;
+    event.preventDefault();
+    handler();
+  };
+  return /* @__PURE__ */ jsx34(
+    Dialog.Root,
+    {
+      open,
+      onRequestClose: (reason) => {
+        if (reason !== "outside-press") onRequestClose(reason);
+      },
+      children: /* @__PURE__ */ jsx34(
+        Dialog.Content,
+        {
+          ref: popupRef,
+          variant: "fullscreen",
+          className: cx("sc-flow", className),
+          initialFocus: () => popupRef.current?.querySelector(".sc-flow__step-title") ?? true,
+          onKeyDown: handleKeyDown,
+          children: /* @__PURE__ */ jsxs29(FlowContext.Provider, { value: context, children: [
+            decoration ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__decoration", "aria-hidden": "true", children: decoration }) : null,
+            children,
+            /* @__PURE__ */ jsx34("div", { className: "sc-visually-hidden", "aria-live": "polite", "aria-atomic": "true", children: message })
+          ] })
+        }
+      )
+    }
+  );
+}
+function Header2({
+  title,
+  logo,
+  compactTitle,
+  status,
+  closeLabel = "Close",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__header", className), ...rest, children: [
+    /* @__PURE__ */ jsxs29("div", { className: "sc-flow__heading", "data-compact": compactTitle ? "" : void 0, children: [
+      logo ? /* @__PURE__ */ jsx34("span", { className: "sc-flow__logo", "aria-hidden": "true", children: logo }) : null,
+      /* @__PURE__ */ jsx34(Dialog.Title, { className: "sc-flow__title", children: title }),
+      compactTitle ? /* @__PURE__ */ jsx34("span", { className: "sc-flow__compact-title", children: compactTitle }) : null
+    ] }),
+    children,
+    status ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__status", children: status }) : null,
+    /* @__PURE__ */ jsx34(
+      Dialog.Close,
+      {
+        className: "sc-flow__close",
+        render: /* @__PURE__ */ jsx34(IconButton, { label: closeLabel, "aria-keyshortcuts": "Escape" }),
+        children: /* @__PURE__ */ jsx34(XIcon, { size: "lg" })
+      }
+    )
+  ] });
+}
+function Progress2({
+  chapters,
+  step,
+  label,
+  listLabel = "Progress",
+  className,
+  ...rest
+}) {
+  const starts = chapters.reduce(
+    (acc, chapter, i) => [...acc, i === 0 ? 0 : acc[i - 1] + chapters[i - 1].steps],
+    []
+  );
+  return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__progress", className), ...rest, children: [
+    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 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,
+          children: [
+            /* @__PURE__ */ jsx34("span", { className: "sc-flow__segment-fill", style: { inlineSize: `${percent}%` } }),
+            /* @__PURE__ */ jsx34("span", { className: "sc-visually-hidden", children: chapter.label })
+          ]
+        },
+        chapter.label
+      );
+    }) })
+  ] });
+}
+function Body3({ className, ...rest }) {
+  return /* @__PURE__ */ jsx34("div", { className: cx("sc-flow__body", className), ...rest });
+}
+function Rail({
+  "aria-label": ariaLabel = "Steps",
+  footer,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs29("nav", { className: cx("sc-flow__rail", className), "aria-label": ariaLabel, ...rest, children: [
+    children,
+    footer ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__rail-note", children: footer }) : null
+  ] });
+}
+function RailGroup({ label, className, children, ...rest }) {
+  const id = useId5();
+  return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__rail-group", className), ...rest, children: [
+    /* @__PURE__ */ jsx34("span", { className: "sc-flow__rail-label", id, children: label }),
+    /* @__PURE__ */ jsx34("ol", { className: "sc-flow__rail-list", "aria-labelledby": id, children })
+  ] });
+}
+function RailItem({
+  current = false,
+  done = false,
+  doneLabel = "done",
+  adornment,
+  type = "button",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx34("li", { className: "sc-flow__rail-entry", children: /* @__PURE__ */ jsxs29(
+    "button",
+    {
+      type,
+      className: cx("sc-flow__rail-item", className),
+      "aria-current": current ? "step" : void 0,
+      "data-done": done || void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx34("span", { className: "sc-flow__rail-mark", "aria-hidden": "true", children: done ? /* @__PURE__ */ jsx34(CheckIcon, { size: "sm" }) : null }),
+        /* @__PURE__ */ jsxs29("span", { className: "sc-flow__rail-text", children: [
+          children,
+          done ? /* @__PURE__ */ jsxs29("span", { className: "sc-visually-hidden", children: [
+            ", ",
+            doneLabel
+          ] }) : null
+        ] }),
+        adornment ? /* @__PURE__ */ jsx34("span", { className: "sc-flow__rail-adornment", children: adornment }) : null
+      ]
+    }
+  ) });
+}
+function Viewport2({ direction = "forward", className, children, ...rest }) {
+  const element = Children2.only(children);
+  const key = String(element.key ?? "");
+  const [state, setState] = useState8({
+    current: { key, element, direction },
+    leaving: null,
+    moved: false
+  });
+  if (state.current.key !== key) {
+    setState({
+      current: { key, element, direction },
+      leaving: { ...state.current, direction },
+      moved: true
+    });
+  } else if (state.current.element !== element) {
+    setState((s) => ({ ...s, current: { ...s.current, element } }));
+  }
+  const finishExit = useCallback2((leftKey) => {
+    setState((s) => s.leaving?.key === leftKey ? { ...s, leaving: null } : s);
+  }, []);
+  const ref = useRef6(null);
+  useEffect6(() => {
+    if (state.moved && ref.current) ref.current.scrollTop = 0;
+  }, [key, state.moved]);
+  const frames = [];
+  if (state.leaving && state.leaving.key !== key) frames.push({ frame: state.leaving, phase: "exit" });
+  frames.push({
+    frame: { key, element, direction: state.current.direction },
+    phase: state.moved ? "enter" : void 0
+  });
+  return /* @__PURE__ */ jsx34("div", { ref, className: cx("sc-flow__viewport", className), ...rest, children: frames.map(({ frame, phase }) => /* @__PURE__ */ jsx34(
+    FrameView,
+    {
+      frameKey: frame.key,
+      phase,
+      direction: frame.direction,
+      onExited: finishExit,
+      children: frame.element
+    },
+    frame.key
+  )) });
+}
+function FrameView({
+  frameKey,
+  phase,
+  direction,
+  onExited,
+  children
+}) {
+  const ref = useRef6(null);
+  useEffect6(() => {
+    if (phase !== "exit") return;
+    let cancelled = false;
+    const el = ref.current;
+    const animations = el && typeof el.getAnimations === "function" ? el.getAnimations() : [];
+    const done = () => {
+      if (!cancelled) onExited(frameKey);
+    };
+    Promise.all(animations.map((a) => a.finished)).then(done, done);
+    return () => {
+      cancelled = true;
+    };
+  }, [phase, frameKey, onExited]);
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      ref,
+      className: "sc-flow__frame",
+      "data-phase": phase,
+      "data-direction": direction,
+      inert: phase === "exit",
+      children: /* @__PURE__ */ jsx34(FrameContext.Provider, { value: phase, children })
+    }
+  );
+}
+function Step({
+  title,
+  eyebrow,
+  description,
+  announcement,
+  className,
+  children,
+  ...rest
+}) {
+  const id = useId5();
+  const titleRef = useRef6(null);
+  const phase = useContext2(FrameContext);
+  const { announce } = useContext2(FlowContext);
+  const message = announcement ?? (typeof title === "string" ? title : void 0);
+  const arrive = useEffectEvent(() => {
+    titleRef.current?.focus({ preventScroll: true });
+    if (message) announce(message);
+  });
+  useEffect6(() => {
+    if (phase === "enter") arrive();
+  }, [phase]);
+  return /* @__PURE__ */ jsxs29("section", { className: cx("sc-flow__step", className), "aria-labelledby": id, ...rest, children: [
+    /* @__PURE__ */ jsxs29("div", { className: "sc-flow__step-head", children: [
+      eyebrow ? /* @__PURE__ */ jsx34("p", { className: "sc-flow__eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx34("h2", { className: "sc-flow__step-title", id, ref: titleRef, tabIndex: -1, children: title }),
+      description ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__step-description", children: description }) : null
+    ] }),
+    children
+  ] });
+}
+function Footer({ back, hint, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__footer", className), ...rest, children: [
+    back ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__footer-back", children: back }) : null,
+    hint ? /* @__PURE__ */ jsx34("div", { className: "sc-flow__footer-hint", children: hint }) : null,
+    /* @__PURE__ */ jsx34("div", { className: "sc-flow__footer-actions", children })
+  ] });
+}
+var FullScreenFlow = {
+  Root: Root7,
+  Header: Header2,
+  Progress: Progress2,
+  Body: Body3,
+  Rail,
+  RailGroup,
+  RailItem,
+  Viewport: Viewport2,
+  Step,
+  Footer
+};
+
 // src/index.ts
 var version = "0.1.1";
 export {
@@ -3172,6 +3514,7 @@ export {
   FilePreviewDialog,
   FilterIcon,
   FlagIcon,
+  FullScreenFlow,
   Heading,
   Icon,
   IconButton,