@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/float-button.js

@@ -0,0 +1,247 @@
+"use client";
+
+import {
+  Tooltip
+} from "./chunk-ZMA7BT2L.js";
+import {
+  Badge
+} from "./chunk-ZXYQ2ZPR.js";
+import "./chunk-NS7FKOFI.js";
+import {
+  elevationClass
+} from "./chunk-TCYDVNSU.js";
+import {
+  bgSolidClass,
+  bgSolidHoverClass,
+  textSolidContrastClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/float-button/FloatButton.tsx
+import { createContext, useContext } from "react";
+import { cn } from "@mari-ui/core";
+
+// src/float-button/utils.ts
+var PLACEMENT_CLASS = {
+  "bottom-right": "right-[calc(1.5rem+env(safe-area-inset-right))] bottom-[calc(1.5rem+env(safe-area-inset-bottom))]",
+  "bottom-left": "left-[calc(1.5rem+env(safe-area-inset-left))] bottom-[calc(1.5rem+env(safe-area-inset-bottom))]",
+  "top-right": "right-[calc(1.5rem+env(safe-area-inset-right))] top-[calc(1.5rem+env(safe-area-inset-top))]",
+  "top-left": "left-[calc(1.5rem+env(safe-area-inset-left))] top-[calc(1.5rem+env(safe-area-inset-top))]"
+};
+var opensUpward = (placement) => placement.startsWith("bottom");
+var shouldShowBackTop = (scrollTop, visibilityHeight) => scrollTop >= visibilityHeight;
+function defaultFocusTarget(root) {
+  const scope = root instanceof Document ? root.body : root;
+  return scope.querySelector("h1") ?? scope.querySelector("main, [role=main]") ?? (root instanceof Document ? null : root);
+}
+
+// src/float-button/FloatButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FloatGroupContext = createContext(null);
+var SHAPE_CLASS = { circle: "rounded-full", square: "rounded-lg" };
+function boxClass(hasDescription, joined) {
+  if (hasDescription) return joined ? "min-h-14 w-full min-w-14 px-1 py-2" : "min-h-14 w-14 px-1 py-2";
+  return joined ? "h-10 w-full min-w-10" : "size-10";
+}
+function floatButtonClass({ color, shape, joined, hasDescription }) {
+  return cn(
+    "relative inline-flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 outline-none transition-colors duration-150",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+    // Dokunmatikte 44px (görsel 40px; görünmez katman — Faz 15 kuralı).
+    "pointer-coarse:before:absolute pointer-coarse:before:-inset-0.5",
+    boxClass(hasDescription, joined),
+    joined ? "rounded-none" : SHAPE_CLASS[shape],
+    color ? cn(bgSolidClass[color], bgSolidHoverClass[color], textSolidContrastClass[color]) : cn("bg-mari-surface text-mari-foreground hover:bg-mari-surface-alt", !joined && "border border-mari-border")
+  );
+}
+function resolveLabel(ariaLabel, hasDescription, tooltip) {
+  if (ariaLabel) return ariaLabel;
+  if (hasDescription) return void 0;
+  return typeof tooltip === "string" ? tooltip : void 0;
+}
+function tooltipPlacement(placement, inGroup) {
+  if (inGroup) return placement.endsWith("right") ? "left" : "right";
+  return placement.startsWith("bottom") ? "top" : "bottom";
+}
+function FloatControl({ href, target, label, onClick, className, children }) {
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, "aria-label": label, onClick, className, children });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": label, onClick, className, children });
+}
+function FloatButton({
+  icon,
+  description,
+  tooltip,
+  color,
+  shape: ownShape = "circle",
+  badge,
+  href,
+  target,
+  onClick,
+  placement = "bottom-right",
+  "aria-label": ariaLabel,
+  className,
+  skeleton = false
+}) {
+  const group = useContext(FloatGroupContext);
+  const shape = group?.shape ?? ownShape;
+  const joined = !!group?.joined;
+  const hasDescription = shape === "square" && description !== void 0 && description !== null;
+  const label = resolveLabel(ariaLabel, hasDescription, tooltip);
+  if (process.env.NODE_ENV !== "production" && !label && !hasDescription) {
+    console.warn("[@mari-ui/components] FloatButton: ikon-yaln\u0131z d\xFC\u011Fmeye `aria-label` (ya da d\xFCz metin `tooltip`) verin.");
+  }
+  const positioned = group ? void 0 : cn("fixed z-mari-sticky", PLACEMENT_CLASS[placement]);
+  const shapeClass = joined ? "rounded-none" : SHAPE_CLASS[shape];
+  if (skeleton || group?.skeleton) {
+    return /* @__PURE__ */ jsx("span", { ...skeletonBoxProps(cn("block", hasDescription ? "min-h-14 w-14" : "size-10", shapeClass, positioned, className)) });
+  }
+  let control = /* @__PURE__ */ jsxs(FloatControl, { href, target, label, onClick, className: floatButtonClass({ color, shape, joined, hasDescription }), children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex items-center justify-center [&_svg]:size-5", children: icon }),
+    hasDescription && /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs leading-tight", children: description })
+  ] });
+  if (badge) {
+    control = /* @__PURE__ */ jsx(Badge, { count: badge.count, dot: badge.dot, color: badge.color ?? "error", children: control });
+  }
+  if (tooltip) control = /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement(placement, !!group), trigger: control });
+  if (!positioned) return control;
+  return /* @__PURE__ */ jsx("div", { className: cn(positioned, elevationClass.lg, shapeClass, className), children: control });
+}
+
+// src/float-button/FloatButtonGroup.tsx
+import { useEffect, useId, useRef } from "react";
+import { XIcon } from "lucide-react";
+import { cn as cn2, useControllableState } from "@mari-ui/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HOVER_CLOSE_MS = 150;
+function useMenuDismiss(open, rootRef, triggerRef, close) {
+  const closeRef = useRef(close);
+  closeRef.current = close;
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) closeRef.current();
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || !rootRef.current?.contains(document.activeElement)) return;
+      e.preventDefault();
+      closeRef.current();
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, rootRef, triggerRef]);
+}
+function MenuGroup(props) {
+  const { trigger, shape = "circle", placement = "bottom-right", icon, color = "primary", tooltip, "aria-label": ariaLabel = "H\u0131zl\u0131 i\u015Flemler", children, className, skeleton = false } = props;
+  const [open, setOpen] = useControllableState({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange });
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuId = useId();
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useMenuDismiss(open, rootRef, triggerRef, () => setOpen(false));
+  const up = opensUpward(placement);
+  const hover = trigger === "hover" ? {
+    onMouseEnter: () => {
+      clearTimeout(timer.current);
+      setOpen(true);
+    },
+    onMouseLeave: () => {
+      timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+    }
+  } : {};
+  let main = /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      "aria-controls": menuId,
+      onClick: () => setOpen(!open),
+      className: cn2(floatButtonClass({ color, shape, joined: false, hasDescription: false }), elevationClass.lg),
+      children: /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: cn2("flex transition-transform duration-200 motion-reduce:transition-none [&_svg]:size-5", open && "rotate-90"), children: open ? /* @__PURE__ */ jsx2(XIcon, {}) : icon })
+    }
+  );
+  if (skeleton) main = /* @__PURE__ */ jsx2("span", { ...skeletonBoxProps(cn2("block size-10", shape === "square" ? "rounded-lg" : "rounded-full")) });
+  else if (tooltip && !open) main = /* @__PURE__ */ jsx2(Tooltip, { content: tooltip, placement: placement.endsWith("right") ? "left" : "right", trigger: main });
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, ...hover, className: cn2("fixed z-mari-sticky flex items-center gap-3", up ? "flex-col-reverse" : "flex-col", PLACEMENT_CLASS[placement], className), children: [
+    main,
+    open && /* @__PURE__ */ jsx2(FloatGroupContext.Provider, { value: { shape, joined: false }, children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        id: menuId,
+        role: "group",
+        "aria-label": ariaLabel,
+        className: cn2(
+          "flex items-center gap-3 transition-[opacity,translate] duration-200 starting:opacity-0 motion-reduce:transition-none",
+          up ? "flex-col-reverse starting:translate-y-2" : "flex-col starting:-translate-y-2",
+          "[&>*]:rounded-full [&>*]:shadow-mari-md"
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+function FloatButtonGroup(props) {
+  if (props.trigger) return /* @__PURE__ */ jsx2(MenuGroup, { ...props });
+  const { shape = "circle", placement = "bottom-right", children, className, skeleton } = props;
+  const joined = shape === "square";
+  return /* @__PURE__ */ jsx2(FloatGroupContext.Provider, { value: { shape, joined, skeleton }, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "group",
+      "aria-busy": skeleton || void 0,
+      className: cn2(
+        "fixed z-mari-sticky flex flex-col",
+        PLACEMENT_CLASS[placement],
+        joined ? cn2("overflow-hidden rounded-lg border border-mari-border divide-y divide-mari-border", elevationClass.lg) : "gap-3 [&>*]:rounded-full [&>*]:shadow-mari-lg",
+        className
+      ),
+      children
+    }
+  ) });
+}
+
+// src/float-button/BackTop.tsx
+import { useEffect as useEffect2, useState } from "react";
+import { ArrowUpIcon } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function BackTop({ visibilityHeight = 400, target, focusTarget, icon = /* @__PURE__ */ jsx3(ArrowUpIcon, {}), "aria-label": ariaLabel = "Ba\u015Fa d\xF6n", tooltip, ...rest }) {
+  const [visible, setVisible] = useState(false);
+  useEffect2(() => {
+    const el = target?.() ?? null;
+    const source = el ?? window;
+    const read = () => setVisible(shouldShowBackTop(el ? el.scrollTop : window.scrollY, visibilityHeight));
+    read();
+    source.addEventListener("scroll", read, { passive: true });
+    return () => source.removeEventListener("scroll", read);
+  }, [target, visibilityHeight]);
+  if (!visible) return null;
+  const backToTop = () => {
+    const el = target?.() ?? null;
+    const behavior = reducedMotion() ? "auto" : "smooth";
+    (el ?? window).scrollTo({ top: 0, behavior });
+    const focusEl = focusTarget?.() ?? defaultFocusTarget(el ?? document);
+    if (focusEl) {
+      if (!focusEl.hasAttribute("tabindex") && !focusEl.matches("a, button, input, select, textarea")) focusEl.setAttribute("tabindex", "-1");
+      focusEl.focus({ preventScroll: true });
+    }
+  };
+  return /* @__PURE__ */ jsx3(FloatButton, { ...rest, icon, "aria-label": ariaLabel, tooltip, onClick: backToTop });
+}
+export {
+  BackTop,
+  FloatButton,
+  FloatButtonGroup
+};
+//# sourceMappingURL=float-button.js.map

package/dist/float-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/float-button/FloatButton.tsx","../src/float-button/utils.ts","../src/float-button/FloatButtonGroup.tsx","../src/float-button/BackTop.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Badge } from \"../badge\";\nimport { bgSolidClass, bgSolidHoverClass, textSolidContrastClass } from \"../lib/colorClasses\";\nimport { elevationClass } from \"../lib/elevationClass\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { Tooltip } from \"../tooltip\";\nimport type { FloatButtonPlacement, FloatButtonProps, FloatButtonShape } from \"./types\";\nimport { PLACEMENT_CLASS } from \"./utils\";\n\nexport type { FloatButtonProps };\n\n/** Grup içindeki düğmeler sabit konumlanmaz; şekil gruptan gelir. */\nexport const FloatGroupContext = createContext<{ shape: FloatButtonShape; joined: boolean; skeleton?: boolean } | null>(null);\n\nconst SHAPE_CLASS: Record<FloatButtonShape, string> = { circle: \"rounded-full\", square: \"rounded-lg\" };\n\n/** Birleşik (kare) grupta düğmeler grubun genişliğine yayılır — açıklamasız olan da diğerleriyle hizalı. */\nfunction boxClass(hasDescription: boolean, joined: boolean) {\n  if (hasDescription) return joined ? \"min-h-14 w-full min-w-14 px-1 py-2\" : \"min-h-14 w-14 px-1 py-2\";\n  return joined ? \"h-10 w-full min-w-10\" : \"size-10\";\n}\n\nexport function floatButtonClass({ color, shape, joined, hasDescription }: { color?: Exclude<FloatButtonProps[\"color\"], undefined>; shape: FloatButtonShape; joined: boolean; hasDescription: boolean }) {\n  return cn(\n    \"relative inline-flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 outline-none transition-colors duration-150\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n    // Dokunmatikte 44px (görsel 40px; görünmez katman — Faz 15 kuralı).\n    \"pointer-coarse:before:absolute pointer-coarse:before:-inset-0.5\",\n    boxClass(hasDescription, joined),\n    joined ? \"rounded-none\" : SHAPE_CLASS[shape],\n    color\n      ? cn(bgSolidClass[color], bgSolidHoverClass[color], textSolidContrastClass[color])\n      : cn(\"bg-mari-surface text-mari-foreground hover:bg-mari-surface-alt\", !joined && \"border border-mari-border\")\n  );\n}\n\n/**\n * Faz 16.6 — yapı ant.design FloatButton'dan: sayfanın köşesinde sabit,\n * içerikten bağımsız eylem düğmesi (yardım, sohbet, yeni oluştur). İkon +\n * (kare şekilde) kısa açıklama, ipucu, rozet, bağlantı. Grup içinde konumu\n * grup belirler.\n *\n * Erişilebilirlik: gerçek `<button>`/`<a>`; ikon-yalnız düğmede ad\n * `aria-label` ya da `tooltip` (düz metinse) — ipucu tek başına ad değildir,\n * metni ada da yazılır. Dokunmatikte 44px hedef. Sayfanın içeriğini örtmemesi\n * tüketicinin işi: alttaki son öğeye yeterli boşluk bırakın.\n */\nfunction resolveLabel(ariaLabel: string | undefined, hasDescription: boolean, tooltip: React.ReactNode): string | undefined {\n  if (ariaLabel) return ariaLabel;\n  if (hasDescription) return undefined;\n  return typeof tooltip === \"string\" ? tooltip : undefined;\n}\n\n/** İpucu ekranın içine doğru: grupta yana, tek başına dikeyde. */\nfunction tooltipPlacement(placement: FloatButtonPlacement, inGroup: boolean) {\n  if (inGroup) return placement.endsWith(\"right\") ? \"left\" : \"right\";\n  return placement.startsWith(\"bottom\") ? \"top\" : \"bottom\";\n}\n\nfunction FloatControl({ href, target, label, onClick, className, children }: Readonly<{ href?: string; target?: React.HTMLAttributeAnchorTarget; label?: string; onClick?: Exclude<FloatButtonProps[\"onClick\"], undefined>; className: string; children: React.ReactNode }>) {\n  if (href) {\n    return (\n      <a href={href} target={target} rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined} aria-label={label} onClick={onClick} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" aria-label={label} onClick={onClick} className={className}>\n      {children}\n    </button>\n  );\n}\n\n/**\n * Faz 16.6 — yapı ant.design FloatButton'dan: sayfanın köşesinde sabit,\n * içerikten bağımsız eylem düğmesi (yardım, sohbet, yeni oluştur). İkon +\n * (kare şekilde) kısa açıklama, ipucu, rozet, bağlantı. Grup içinde konumu\n * grup belirler.\n *\n * Erişilebilirlik: gerçek `<button>`/`<a>`; ikon-yalnız düğmede ad\n * `aria-label` ya da `tooltip` (düz metinse) — ipucu tek başına ad değildir,\n * metni ada da yazılır. Dokunmatikte 44px hedef. Sayfanın içeriğini örtmemesi\n * tüketicinin işi: alttaki son öğeye yeterli boşluk bırakın.\n */\nexport function FloatButton({\n  icon,\n  description,\n  tooltip,\n  color,\n  shape: ownShape = \"circle\",\n  badge,\n  href,\n  target,\n  onClick,\n  placement = \"bottom-right\",\n  \"aria-label\": ariaLabel,\n  className,\n  skeleton = false,\n}: Readonly<FloatButtonProps>) {\n  const group = useContext(FloatGroupContext);\n  const shape = group?.shape ?? ownShape;\n  const joined = !!group?.joined;\n  const hasDescription = shape === \"square\" && description !== undefined && description !== null;\n  const label = resolveLabel(ariaLabel, hasDescription, tooltip);\n  if (process.env.NODE_ENV !== \"production\" && !label && !hasDescription) {\n    console.warn(\"[@mari-ui/components] FloatButton: ikon-yalnız düğmeye `aria-label` (ya da düz metin `tooltip`) verin.\");\n  }\n  const positioned = group ? undefined : cn(\"fixed z-mari-sticky\", PLACEMENT_CLASS[placement]);\n  const shapeClass = joined ? \"rounded-none\" : SHAPE_CLASS[shape];\n\n  // Grubun iskeleti içindeki düğmelere de geçer (tek prop).\n  if (skeleton || group?.skeleton) {\n    return <span {...skeletonBoxProps(cn(\"block\", hasDescription ? \"min-h-14 w-14\" : \"size-10\", shapeClass, positioned, className))} />;\n  }\n\n  let control: React.ReactElement = (\n    <FloatControl href={href} target={target} label={label} onClick={onClick} className={floatButtonClass({ color, shape, joined, hasDescription })}>\n      {icon && (\n        <span aria-hidden className=\"flex items-center justify-center [&_svg]:size-5\">\n          {icon}\n        </span>\n      )}\n      {hasDescription && <span className=\"max-w-full truncate text-xs leading-tight\">{description}</span>}\n    </FloatControl>\n  );\n  if (badge) {\n    control = (\n      <Badge count={badge.count} dot={badge.dot} color={badge.color ?? \"error\"}>\n        {control}\n      </Badge>\n    );\n  }\n  if (tooltip) control = <Tooltip content={tooltip} placement={tooltipPlacement(placement, !!group)} trigger={control} />;\n  if (!positioned) return control;\n  return <div className={cn(positioned, elevationClass.lg, shapeClass, className)}>{control}</div>;\n}\n","import type { FloatButtonPlacement } from \"./types\";\n\n/**\n * Faz 16.6 — FloatButton'ın saf yardımcıları. Konum: ekranın köşesine\n * sabit, kenardan 1.5rem; çentikli telefonlarda güvenli alan (safe-area)\n * eklenir — düğme ana ekran çubuğunun altında kalmasın.\n */\nexport const PLACEMENT_CLASS: Record<FloatButtonPlacement, string> = {\n  \"bottom-right\": \"right-[calc(1.5rem+env(safe-area-inset-right))] bottom-[calc(1.5rem+env(safe-area-inset-bottom))]\",\n  \"bottom-left\": \"left-[calc(1.5rem+env(safe-area-inset-left))] bottom-[calc(1.5rem+env(safe-area-inset-bottom))]\",\n  \"top-right\": \"right-[calc(1.5rem+env(safe-area-inset-right))] top-[calc(1.5rem+env(safe-area-inset-top))]\",\n  \"top-left\": \"left-[calc(1.5rem+env(safe-area-inset-left))] top-[calc(1.5rem+env(safe-area-inset-top))]\",\n};\n\n/** Menü hangi yöne açılır: alttaki grup yukarı, üstteki aşağı. */\nexport const opensUpward = (placement: FloatButtonPlacement) => placement.startsWith(\"bottom\");\n\n/** BackTop görünürlüğü. */\nexport const shouldShowBackTop = (scrollTop: number, visibilityHeight: number) => scrollTop >= visibilityHeight;\n\n/** Başa döndükten sonra odaklanacak öğe: ilk h1 → main → kök. */\nexport function defaultFocusTarget(root: HTMLElement | Document): HTMLElement | null {\n  const scope = root instanceof Document ? root.body : root;\n  return scope.querySelector<HTMLElement>(\"h1\") ?? scope.querySelector<HTMLElement>(\"main, [role=main]\") ?? (root instanceof Document ? null : root);\n}\n","\"use client\";\n\nimport React, { useEffect, useId, useRef } from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport { elevationClass } from \"../lib/elevationClass\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { Tooltip } from \"../tooltip\";\nimport { FloatGroupContext, floatButtonClass } from \"./FloatButton\";\nimport type { FloatButtonGroupMenuProps, FloatButtonGroupProps } from \"./types\";\nimport { opensUpward, PLACEMENT_CLASS } from \"./utils\";\n\nexport type { FloatButtonGroupProps };\n\nconst HOVER_CLOSE_MS = 150;\n\n/** Açılır grubun dışarı tıklama / Escape ile kapanması; Escape'te odak ana düğmeye döner. */\nfunction useMenuDismiss(open: boolean, rootRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, close: () => void) {\n  const closeRef = useRef(close);\n  closeRef.current = close;\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: PointerEvent) => {\n      if (!rootRef.current?.contains(e.target as Node)) closeRef.current();\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\" || !rootRef.current?.contains(document.activeElement)) return;\n      e.preventDefault();\n      closeRef.current();\n      triggerRef.current?.focus();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n    };\n  }, [open, rootRef, triggerRef]);\n}\n\nfunction MenuGroup(props: Readonly<FloatButtonGroupMenuProps>) {\n  const { trigger, shape = \"circle\", placement = \"bottom-right\", icon, color = \"primary\", tooltip, \"aria-label\": ariaLabel = \"Hızlı işlemler\", children, className, skeleton = false } = props;\n  const [open, setOpen] = useControllableState<boolean>({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange });\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuId = useId();\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n  useMenuDismiss(open, rootRef, triggerRef, () => setOpen(false));\n  const up = opensUpward(placement);\n\n  const hover =\n    trigger === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            clearTimeout(timer.current);\n            setOpen(true);\n          },\n          onMouseLeave: () => {\n            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);\n          },\n        }\n      : {};\n\n  let main: React.ReactElement = (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-expanded={open}\n      aria-controls={menuId}\n      onClick={() => setOpen(!open)}\n      className={cn(floatButtonClass({ color, shape, joined: false, hasDescription: false }), elevationClass.lg)}\n    >\n      <span aria-hidden className={cn(\"flex transition-transform duration-200 motion-reduce:transition-none [&_svg]:size-5\", open && \"rotate-90\")}>\n        {open ? <XIcon /> : icon}\n      </span>\n    </button>\n  );\n  if (skeleton) main = <span {...skeletonBoxProps(cn(\"block size-10\", shape === \"square\" ? \"rounded-lg\" : \"rounded-full\"))} />;\n  else if (tooltip && !open) main = <Tooltip content={tooltip} placement={placement.endsWith(\"right\") ? \"left\" : \"right\"} trigger={main} />;\n\n  return (\n    <div ref={rootRef} {...hover} className={cn(\"fixed z-mari-sticky flex items-center gap-3\", up ? \"flex-col-reverse\" : \"flex-col\", PLACEMENT_CLASS[placement], className)}>\n      {main}\n      {/* Kapalıyken DOM'da değil (Tab ile gizli düğmelere gidilmesin). */}\n      {open && (\n        <FloatGroupContext.Provider value={{ shape, joined: false }}>\n          <div\n            id={menuId}\n            role=\"group\"\n            aria-label={ariaLabel}\n            className={cn(\n              \"flex items-center gap-3 transition-[opacity,translate] duration-200 starting:opacity-0 motion-reduce:transition-none\",\n              up ? \"flex-col-reverse starting:translate-y-2\" : \"flex-col starting:-translate-y-2\",\n              \"[&>*]:rounded-full [&>*]:shadow-mari-md\"\n            )}\n          >\n            {children}\n          </div>\n        </FloatGroupContext.Provider>\n      )}\n    </div>\n  );\n}\n\n/**\n * Faz 16.6 — FloatButton.Group: birden çok yüzen düğme. `trigger` yoksa hep\n * görünür bir sütun (kare şekilde tek kart gibi birleşik); `trigger`\n * verilirse ana düğme menüyü açar (`aria-expanded`), Escape/dışarı tıklama\n * kapatır ve odak ana düğmeye döner.\n */\nexport function FloatButtonGroup(props: FloatButtonGroupProps) {\n  if (props.trigger) return <MenuGroup {...props} />;\n  const { shape = \"circle\", placement = \"bottom-right\", children, className, skeleton } = props;\n  const joined = shape === \"square\";\n  return (\n    <FloatGroupContext.Provider value={{ shape, joined, skeleton }}>\n      <div\n        role=\"group\"\n        aria-busy={skeleton || undefined}\n        className={cn(\n          \"fixed z-mari-sticky flex flex-col\",\n          PLACEMENT_CLASS[placement],\n          joined ? cn(\"overflow-hidden rounded-lg border border-mari-border divide-y divide-mari-border\", elevationClass.lg) : \"gap-3 [&>*]:rounded-full [&>*]:shadow-mari-lg\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </FloatGroupContext.Provider>\n  );\n}\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { ArrowUpIcon } from \"lucide-react\";\nimport { FloatButton } from \"./FloatButton\";\nimport type { BackTopProps } from \"./types\";\nimport { defaultFocusTarget, shouldShowBackTop } from \"./utils\";\n\nexport type { BackTopProps };\n\nconst reducedMotion = () => typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n\n/**\n * Faz 16.6 — FloatButton.BackTop: sayfa (ya da `target`) yeterince\n * kaydırılınca beliren \"başa dön\". Hareket azaltma tercihinde anında atlar.\n * Başa dönünce odak sayfanın başına (ilk h1 / main) taşınır — düğme\n * gizlendiğinde odak kaybolmasın ve klavye kullanıcısı baştan devam etsin.\n */\nexport function BackTop({ visibilityHeight = 400, target, focusTarget, icon = <ArrowUpIcon />, \"aria-label\": ariaLabel = \"Başa dön\", tooltip, ...rest }: Readonly<BackTopProps>) {\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    const el = target?.() ?? null;\n    const source: HTMLElement | Window = el ?? window;\n    const read = () => setVisible(shouldShowBackTop(el ? el.scrollTop : window.scrollY, visibilityHeight));\n    read();\n    source.addEventListener(\"scroll\", read, { passive: true });\n    return () => source.removeEventListener(\"scroll\", read);\n  }, [target, visibilityHeight]);\n\n  if (!visible) return null;\n\n  const backToTop = () => {\n    const el = target?.() ?? null;\n    const behavior: ScrollBehavior = reducedMotion() ? \"auto\" : \"smooth\";\n    (el ?? window).scrollTo({ top: 0, behavior });\n    const focusEl = focusTarget?.() ?? defaultFocusTarget(el ?? document);\n    if (focusEl) {\n      if (!focusEl.hasAttribute(\"tabindex\") && !focusEl.matches(\"a, button, input, select, textarea\")) focusEl.setAttribute(\"tabindex\", \"-1\");\n      focusEl.focus({ preventScroll: true });\n    }\n  };\n\n  return <FloatButton {...rest} icon={icon} aria-label={ariaLabel} tooltip={tooltip} onClick={backToTop} />;\n}\n"],"mappings":"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","names":["cn","jsx","jsxs","cn","useEffect","jsx","useEffect"]}

package/dist/image.d.ts

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