@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/tour.js

@@ -0,0 +1,253 @@
+"use client";
+
+import {
+  useModalBehavior
+} from "./chunk-JNZODUXP.js";
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  FLOATING_ARROW_GAP_PX,
+  FLOATING_ARROW_INSET_PX,
+  FLOATING_EDGE_PX,
+  FLOATING_GAP_PX,
+  FloatingArrow
+} from "./chunk-S66GKX2W.js";
+import {
+  useFloatingPosition
+} from "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import {
+  elevationClass
+} from "./chunk-TCYDVNSU.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/tour/Tour.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "lucide-react";
+import { cn, useControllableState } from "@mari-ui/core";
+
+// src/tour/utils.ts
+function spotlightPath(vw, vh, box, pad, r) {
+  const outer = `M0 0H${vw}V${vh}H0Z`;
+  if (!box) return outer;
+  const x = box.left - pad;
+  const y = box.top - pad;
+  const w = box.width + pad * 2;
+  const h = box.height + pad * 2;
+  const rr = Math.max(0, Math.min(r, w / 2, h / 2));
+  const hole = `M${x + rr} ${y}H${x + w - rr}A${rr} ${rr} 0 0 1 ${x + w} ${y + rr}V${y + h - rr}A${rr} ${rr} 0 0 1 ${x + w - rr} ${y + h}H${x + rr}A${rr} ${rr} 0 0 1 ${x} ${y + h - rr}V${y + rr}A${rr} ${rr} 0 0 1 ${x + rr} ${y}Z`;
+  return `${outer}${hole}`;
+}
+function isFullyVisible(box, vw, vh) {
+  return box.top >= 0 && box.left >= 0 && box.top + box.height <= vh && box.left + box.width <= vw;
+}
+function stepFromKey(key, current, total, editable) {
+  if (editable) return null;
+  if (key === "ArrowRight" && current < total - 1) return current + 1;
+  if (key === "ArrowLeft" && current > 0) return current - 1;
+  return null;
+}
+
+// src/tour/Tour.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SPOT_PAD_REM = 0.375;
+var SPOT_RADIUS_REM = 0.5;
+var remToPx = (rem) => rem * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+var TOUR_PLACEHOLDER = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pr-6", children: [
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "10rem", height: "1rem", radius: "sm" }),
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "100%", height: "0.75rem", radius: "sm" }),
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "70%", height: "0.75rem", radius: "sm" })
+] });
+var reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function useTargetBox(active, el) {
+  const [box, setBox] = useState(null);
+  useEffect(() => {
+    if (!active || !el) {
+      setBox(null);
+      return;
+    }
+    let frame = 0;
+    const read = () => {
+      const r = el.getBoundingClientRect();
+      setBox((prev) => prev && prev.top === r.top && prev.left === r.left && prev.width === r.width && prev.height === r.height ? prev : { top: r.top, left: r.left, width: r.width, height: r.height });
+      frame = requestAnimationFrame(read);
+    };
+    read();
+    return () => cancelAnimationFrame(frame);
+  }, [active, el]);
+  return box;
+}
+function Mask({ box }) {
+  const [size, setSize] = useState(() => ({ w: typeof window === "undefined" ? 0 : window.innerWidth, h: typeof window === "undefined" ? 0 : window.innerHeight }));
+  useEffect(() => {
+    const onResize = () => setSize({ w: window.innerWidth, h: window.innerHeight });
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "fixed inset-0 z-mari-modal", children: /* @__PURE__ */ jsx("svg", { width: size.w, height: size.h, className: "absolute inset-0 transition-opacity duration-200 starting:opacity-0 motion-reduce:transition-none", children: /* @__PURE__ */ jsx("path", { d: spotlightPath(size.w, size.h, box, remToPx(SPOT_PAD_REM), remToPx(SPOT_RADIUS_REM)), fillRule: "evenodd", style: { fill: "var(--mari-color-scrim)" } }) }) });
+}
+function Footer({ current, total, step, onPrev, onNext, skeleton }) {
+  const last = current === total - 1;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+    total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex items-center gap-1", children: Array.from({ length: total }, (_, i) => (
+        // Konumsal göstergeler.
+        /* @__PURE__ */ jsx("span", { className: cn("h-1.5 rounded-full transition-all duration-200 motion-reduce:transition-none", i === current ? "w-4 bg-mari-primary" : "w-1.5 bg-mari-border") }, i)
+      )) }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-mari-muted tabular-nums", children: [
+        current + 1,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "ml-auto flex gap-2", children: [
+      current > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", color: "neutral", "data-tour-back": true, onClick: onPrev, skeleton, children: "Geri" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", "data-tour-primary": true, onClick: onNext, skeleton, children: step.nextButtonText ?? (last ? "Bitir" : "Sonraki") })
+    ] })
+  ] });
+}
+function Tour({
+  steps,
+  mask = true,
+  arrow = true,
+  scrollIntoView = true,
+  onClose,
+  onFinish,
+  "aria-label": ariaLabel = "Tan\u0131t\u0131m turu",
+  className,
+  skeleton = false,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange });
+  const [current, setCurrent] = useControllableState({ value: props.current, defaultValue: props.defaultCurrent ?? 0, onChange: props.onChange });
+  const step = open ? steps[current] : void 0;
+  const masked = step ? step.mask ?? mask : false;
+  const titleId = useId();
+  const descId = useId();
+  const panelRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [targetEl, setTargetEl] = useState(null);
+  useEffect(() => {
+    setTargetEl(open ? steps[current]?.target?.() ?? null : null);
+  }, [open, current, steps]);
+  anchorRef.current = targetEl;
+  const coords = useFloatingPosition(open && targetEl !== null, anchorRef, panelRef, {
+    placement: step?.placement ?? "bottom",
+    gap: arrow ? FLOATING_ARROW_GAP_PX : FLOATING_GAP_PX,
+    edge: FLOATING_EDGE_PX,
+    arrow: arrow ? { inset: FLOATING_ARROW_INSET_PX, pointAtCenter: true } : void 0
+  });
+  const box = useTargetBox(open && masked, targetEl);
+  const refocusPrimary = useRef(false);
+  useEffect(() => {
+    if (!refocusPrimary.current) return;
+    refocusPrimary.current = false;
+    panelRef.current?.querySelector("[data-tour-primary]")?.focus();
+  }, [current]);
+  const close = (finished = false) => {
+    setOpen(false);
+    if (finished) onFinish?.();
+    else onClose?.(current);
+  };
+  useModalBehavior(open && masked, panelRef, () => close(), {
+    lockScroll: false,
+    getInitialFocus: (panel) => panel.querySelector("[data-tour-primary]")
+  });
+  useEffect(() => {
+    if (!open || masked) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      e.preventDefault();
+      setOpen(false);
+      onClose?.(current);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, masked, current, setOpen, onClose]);
+  useEffect(() => {
+    if (!scrollIntoView || !targetEl) return;
+    const r = targetEl.getBoundingClientRect();
+    if (!isFullyVisible(r, window.innerWidth, window.innerHeight)) targetEl.scrollIntoView?.({ block: "center", inline: "nearest", behavior: reducedMotion() ? "auto" : "smooth" });
+  }, [targetEl, scrollIntoView]);
+  if (!open || !step || typeof document === "undefined") return null;
+  const go = (next2) => {
+    const to = Math.max(0, Math.min(steps.length - 1, next2));
+    if (to === 0 && document.activeElement?.hasAttribute("data-tour-back")) refocusPrimary.current = true;
+    setCurrent(to);
+  };
+  const next = () => current >= steps.length - 1 ? close(true) : go(current + 1);
+  const centered = targetEl === null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      masked && /* @__PURE__ */ jsx(Mask, { box }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": masked || void 0,
+          "aria-label": ariaLabel,
+          "aria-describedby": `${titleId} ${descId}`,
+          tabIndex: -1,
+          onKeyDown: (e) => {
+            const editable = e.target.closest("input, textarea, [contenteditable=true]") !== null;
+            const to = stepFromKey(e.key, current, steps.length, editable);
+            if (to === null) return;
+            e.preventDefault();
+            go(to);
+          },
+          className: cn(
+            "fixed z-mari-modal w-80 max-w-[calc(100vw-1rem)] rounded-lg bg-mari-surface p-4 text-sm text-mari-foreground outline-none",
+            "transition-opacity duration-200 starting:opacity-0 motion-reduce:transition-none",
+            elevationClass.lg,
+            centered && "top-1/2 left-1/2 -translate-1/2",
+            // Konum ölçülene kadar `invisible` DEĞİL: görünmez öğedeki odak (Sonraki) tarayıcıda düşer, ←/→ kopardı.
+            !centered && !coords && "pointer-events-none opacity-0",
+            className
+          ),
+          style: centered ? void 0 : { top: coords?.top ?? 0, left: coords?.left ?? 0 },
+          children: [
+            arrow && !centered && coords && /* @__PURE__ */ jsx(FloatingArrow, { side: coords.side, offset: coords.arrowOffset }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Turu kapat",
+                onClick: () => close(),
+                className: "absolute top-2 right-2 grid size-7 place-items-center rounded-md text-mari-muted outline-none hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring pointer-coarse:size-10",
+                children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": true, size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: TOUR_PLACEHOLDER, children: /* @__PURE__ */ jsxs("div", { children: [
+              step.cover && /* @__PURE__ */ jsx("div", { className: "mb-3 overflow-hidden rounded-md [&_img]:w-full", children: step.cover }),
+              /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "pr-6", children: [
+                /* @__PURE__ */ jsxs("h2", { id: titleId, className: "font-semibold", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Ad\u0131m ${current + 1} / ${steps.length}: ` }),
+                  step.title
+                ] }),
+                step.description && /* @__PURE__ */ jsx("div", { id: descId, className: "mt-1 text-mari-muted", children: step.description })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(Footer, { current, total: steps.length, step, onPrev: () => go(current - 1), onNext: next, skeleton })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  Tour
+};
+//# sourceMappingURL=tour.js.map

package/dist/tour.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tour/Tour.tsx","../src/tour/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { XIcon } from \"lucide-react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport { Button } from \"../button\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { elevationClass } from \"../lib/elevationClass\";\nimport { FLOATING_ARROW_GAP_PX, FLOATING_ARROW_INSET_PX, FLOATING_EDGE_PX, FLOATING_GAP_PX, FloatingArrow } from \"../lib/FloatingArrow\";\nimport { useModalBehavior } from \"../lib/overlay\";\nimport { useFloatingPosition } from \"../lib/useFloatingPosition\";\nimport { SkeletonBlock } from \"../skeleton\";\nimport type { TourProps, TourStep } from \"./types\";\nimport { isFullyVisible, spotlightPath, stepFromKey, type Box } from \"./utils\";\n\nexport type { TourProps, TourStep };\n\n/** Hedef çevresindeki boşluk ve köşe yarıçapı (rem). */\nconst SPOT_PAD_REM = 0.375;\nconst SPOT_RADIUS_REM = 0.5;\n\nconst remToPx = (rem: number) => rem * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);\n\nconst TOUR_PLACEHOLDER = (\n  <div className=\"flex flex-col gap-2 pr-6\">\n    <SkeletonBlock active width=\"10rem\" height=\"1rem\" radius=\"sm\" />\n    <SkeletonBlock active width=\"100%\" height=\"0.75rem\" radius=\"sm\" />\n    <SkeletonBlock active width=\"70%\" height=\"0.75rem\" radius=\"sm\" />\n  </div>\n);\n\nconst reducedMotion = () => typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n\n/** Hedefin ekrandaki kutusu, her karede (kaydırma/yeniden düzen sırasında karartma deliği hedefi izlesin). */\nfunction useTargetBox(active: boolean, el: HTMLElement | null): Box | null {\n  const [box, setBox] = useState<Box | null>(null);\n  useEffect(() => {\n    if (!active || !el) {\n      setBox(null);\n      return;\n    }\n    let frame = 0;\n    const read = () => {\n      const r = el.getBoundingClientRect();\n      setBox((prev) => (prev && prev.top === r.top && prev.left === r.left && prev.width === r.width && prev.height === r.height ? prev : { top: r.top, left: r.left, width: r.width, height: r.height }));\n      frame = requestAnimationFrame(read);\n    };\n    read();\n    return () => cancelAnimationFrame(frame);\n  }, [active, el]);\n  return box;\n}\n\n/** Karartma: hedef dışını örter ve sayfa tıklamalarını engeller (delik de dahil — tur modal). */\nfunction Mask({ box }: Readonly<{ box: Box | null }>) {\n  const [size, setSize] = useState(() => ({ w: typeof window === \"undefined\" ? 0 : window.innerWidth, h: typeof window === \"undefined\" ? 0 : window.innerHeight }));\n  useEffect(() => {\n    const onResize = () => setSize({ w: window.innerWidth, h: window.innerHeight });\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, []);\n  return (\n    <div aria-hidden className=\"fixed inset-0 z-mari-modal\">\n      <svg width={size.w} height={size.h} className=\"absolute inset-0 transition-opacity duration-200 starting:opacity-0 motion-reduce:transition-none\">\n        <path d={spotlightPath(size.w, size.h, box, remToPx(SPOT_PAD_REM), remToPx(SPOT_RADIUS_REM))} fillRule=\"evenodd\" style={{ fill: \"var(--mari-color-scrim)\" }} />\n      </svg>\n    </div>\n  );\n}\n\ninterface FooterProps {\n  current: number;\n  total: number;\n  step: TourStep;\n  onPrev: () => void;\n  onNext: () => void;\n  skeleton: boolean;\n}\n\nfunction Footer({ current, total, step, onPrev, onNext, skeleton }: Readonly<FooterProps>) {\n  const last = current === total - 1;\n  return (\n    <div className=\"mt-4 flex items-center gap-2\">\n      {total > 1 && (\n        <>\n          <span aria-hidden className=\"flex items-center gap-1\">\n            {Array.from({ length: total }, (_, i) => (\n              // Konumsal göstergeler.\n              <span key={i} className={cn(\"h-1.5 rounded-full transition-all duration-200 motion-reduce:transition-none\", i === current ? \"w-4 bg-mari-primary\" : \"w-1.5 bg-mari-border\")} />\n            ))}\n          </span>\n          <span className=\"text-xs text-mari-muted tabular-nums\">\n            {current + 1} / {total}\n          </span>\n        </>\n      )}\n      <span className=\"ml-auto flex gap-2\">\n        {current > 0 && (\n          <Button size=\"sm\" variant=\"outline\" color=\"neutral\" data-tour-back onClick={onPrev} skeleton={skeleton}>\n            Geri\n          </Button>\n        )}\n        <Button size=\"sm\" data-tour-primary onClick={onNext} skeleton={skeleton}>\n          {step.nextButtonText ?? (last ? \"Bitir\" : \"Sonraki\")}\n        </Button>\n      </span>\n    </div>\n  );\n}\n\n/**\n * Faz 16.6 — yapı ant.design Tour'dan: arayüzü adım adım tanıtan rehber.\n * Her adım bir öğeyi vurgular (sayfa kararır, hedefin çevresi açık kalır) ve\n * yanında başlık/açıklama/görsel taşıyan bir panel açar; hedefsiz adım\n * ortada. Panel konumu ve ok Popover ile ortak (`useFloatingPosition`,\n * `FloatingArrow`).\n *\n * Erişilebilirlik: panel `role=\"dialog\"`; karartmalıyken modal (odak\n * panelde döner, Escape kapatır, kapanınca odak açılıştan önceki öğeye\n * döner). Açılışta odak \"Sonraki\"de; adım değişince içerik (adım no +\n * başlık + açıklama) `aria-live` ile okunur, odak düğmede kalır. ←/→ adım\n * değiştirir. Hareket azaltma tercihinde kaydırma anlık.\n */\nexport function Tour({\n  steps,\n  mask = true,\n  arrow = true,\n  scrollIntoView = true,\n  onClose,\n  onFinish,\n  \"aria-label\": ariaLabel = \"Tanıtım turu\",\n  className,\n  skeleton = false,\n  ...props\n}: TourProps) {\n  const [open, setOpen] = useControllableState<boolean>({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange });\n  const [current, setCurrent] = useControllableState<number>({ value: props.current, defaultValue: props.defaultCurrent ?? 0, onChange: props.onChange });\n  const step = open ? steps[current] : undefined;\n  const masked = step ? (step.mask ?? mask) : false;\n  const titleId = useId();\n  const descId = useId();\n  const panelRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const [targetEl, setTargetEl] = useState<HTMLElement | null>(null);\n\n  // Hedef DOM'dan adım değişince çözülür (render sırasında DOM okunmaz).\n  useEffect(() => {\n    setTargetEl(open ? (steps[current]?.target?.() ?? null) : null);\n  }, [open, current, steps]);\n  anchorRef.current = targetEl;\n\n  const coords = useFloatingPosition(open && targetEl !== null, anchorRef, panelRef, {\n    placement: step?.placement ?? \"bottom\",\n    gap: arrow ? FLOATING_ARROW_GAP_PX : FLOATING_GAP_PX,\n    edge: FLOATING_EDGE_PX,\n    arrow: arrow ? { inset: FLOATING_ARROW_INSET_PX, pointAtCenter: true } : undefined,\n  });\n  const box = useTargetBox(open && masked, targetEl);\n  const refocusPrimary = useRef(false);\n  useEffect(() => {\n    if (!refocusPrimary.current) return;\n    refocusPrimary.current = false;\n    panelRef.current?.querySelector<HTMLElement>(\"[data-tour-primary]\")?.focus();\n  }, [current]);\n\n  const close = (finished = false) => {\n    setOpen(false);\n    if (finished) onFinish?.();\n    else onClose?.(current);\n  };\n\n  useModalBehavior(open && masked, panelRef, () => close(), {\n    lockScroll: false,\n    getInitialFocus: (panel) => panel.querySelector<HTMLElement>(\"[data-tour-primary]\"),\n  });\n\n  // Karartmasız turda da Escape kapatır (modal davranışı yokken).\n  useEffect(() => {\n    if (!open || masked) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\" || e.defaultPrevented) return;\n      e.preventDefault();\n      setOpen(false);\n      onClose?.(current);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, masked, current, setOpen, onClose]);\n\n  useEffect(() => {\n    if (!scrollIntoView || !targetEl) return;\n    const r = targetEl.getBoundingClientRect();\n    if (!isFullyVisible(r, window.innerWidth, window.innerHeight)) targetEl.scrollIntoView?.({ block: \"center\", inline: \"nearest\", behavior: reducedMotion() ? \"auto\" : \"smooth\" });\n  }, [targetEl, scrollIntoView]);\n\n  if (!open || !step || typeof document === \"undefined\") return null;\n\n\n  const go = (next: number) => {\n    const to = Math.max(0, Math.min(steps.length - 1, next));\n    // İlk adıma dönünce \"Geri\" DOM'dan kalkar — odaktaysa body'ye düşmesin, \"Sonraki\"ye geçsin.\n    if (to === 0 && document.activeElement?.hasAttribute(\"data-tour-back\")) refocusPrimary.current = true;\n    setCurrent(to);\n  };\n  const next = () => (current >= steps.length - 1 ? close(true) : go(current + 1));\n  const centered = targetEl === null;\n\n  return createPortal(\n    <>\n      {masked && <Mask box={box} />}\n      {/* ←/→ adım kısayolu dialog düzeyinde (içindeki düğmelerden kabarır). */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal={masked || undefined}\n        aria-label={ariaLabel}\n        aria-describedby={`${titleId} ${descId}`}\n        tabIndex={-1}\n        onKeyDown={(e) => {\n          const editable = (e.target as HTMLElement).closest(\"input, textarea, [contenteditable=true]\") !== null;\n          const to = stepFromKey(e.key, current, steps.length, editable);\n          if (to === null) return;\n          e.preventDefault();\n          go(to);\n        }}\n        className={cn(\n          \"fixed z-mari-modal w-80 max-w-[calc(100vw-1rem)] rounded-lg bg-mari-surface p-4 text-sm text-mari-foreground outline-none\",\n          \"transition-opacity duration-200 starting:opacity-0 motion-reduce:transition-none\",\n          elevationClass.lg,\n          centered && \"top-1/2 left-1/2 -translate-1/2\",\n          // Konum ölçülene kadar `invisible` DEĞİL: görünmez öğedeki odak (Sonraki) tarayıcıda düşer, ←/→ kopardı.\n          !centered && !coords && \"pointer-events-none opacity-0\",\n          className\n        )}\n        style={centered ? undefined : { top: coords?.top ?? 0, left: coords?.left ?? 0 }}\n      >\n        {arrow && !centered && coords && <FloatingArrow side={coords.side} offset={coords.arrowOffset} />}\n        <button\n          type=\"button\"\n          aria-label=\"Turu kapat\"\n          onClick={() => close()}\n          className=\"absolute top-2 right-2 grid size-7 place-items-center rounded-md text-mari-muted outline-none hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring pointer-coarse:size-10\"\n        >\n          <XIcon aria-hidden size={16} />\n        </button>\n        <ContentSkeleton on={skeleton} fallback={TOUR_PLACEHOLDER}>\n        <div>\n        {step.cover && <div className=\"mb-3 overflow-hidden rounded-md [&_img]:w-full\">{step.cover}</div>}\n        {/* Adım değişince içerik okunur; odak \"Sonraki\"de kalır. */}\n        <div aria-live=\"polite\" className=\"pr-6\">\n          <h2 id={titleId} className=\"font-semibold\">\n            <span className=\"sr-only\">{`Adım ${current + 1} / ${steps.length}: `}</span>\n            {step.title}\n          </h2>\n          {step.description && (\n            <div id={descId} className=\"mt-1 text-mari-muted\">\n              {step.description}\n            </div>\n          )}\n        </div>\n        </div>\n        </ContentSkeleton>\n        <Footer current={current} total={steps.length} step={step} onPrev={() => go(current - 1)} onNext={next} skeleton={skeleton} />\n      </div>\n    </>,\n    document.body\n  );\n}\n","/** Faz 16.6 — Tour'un saf yardımcıları. */\n\nexport interface Box {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Karartma yolu: tüm ekranı kaplayan dikdörtgen + hedefin çevresinde\n * yuvarlatılmış bir delik (`fill-rule=\"evenodd\"`). `pad` hedefin çevresindeki\n * boşluk, `r` köşe yarıçapı (px; çağıran rem'den çevirir).\n */\nexport function spotlightPath(vw: number, vh: number, box: Box | null, pad: number, r: number): string {\n  const outer = `M0 0H${vw}V${vh}H0Z`;\n  if (!box) return outer;\n  const x = box.left - pad;\n  const y = box.top - pad;\n  const w = box.width + pad * 2;\n  const h = box.height + pad * 2;\n  const rr = Math.max(0, Math.min(r, w / 2, h / 2));\n  const hole = `M${x + rr} ${y}H${x + w - rr}A${rr} ${rr} 0 0 1 ${x + w} ${y + rr}V${y + h - rr}A${rr} ${rr} 0 0 1 ${x + w - rr} ${y + h}H${x + rr}A${rr} ${rr} 0 0 1 ${x} ${y + h - rr}V${y + rr}A${rr} ${rr} 0 0 1 ${x + rr} ${y}Z`;\n  return `${outer}${hole}`;\n}\n\n/** Öğe görünür alanda tamamen mi (kaydırma gerekmez). */\nexport function isFullyVisible(box: Box, vw: number, vh: number): boolean {\n  return box.top >= 0 && box.left >= 0 && box.top + box.height <= vh && box.left + box.width <= vw;\n}\n\n/** Yön tuşlarıyla adım: ←/→, sınırlarda kesilir. Yazı alanındayken (`editable`) uygulanmaz. */\nexport function stepFromKey(key: string, current: number, total: number, editable: boolean): number | null {\n  if (editable) return null;\n  if (key === \"ArrowRight\" && current < total - 1) return current + 1;\n  if (key === \"ArrowLeft\" && current > 0) return current - 1;\n  return null;\n}\n\n"],"mappings":"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","names":["next"]}

package/dist/transfer.d.ts

@@ -0,0 +1 @@
+export * from "./types/transfer/index";