@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/chunk-47FHUOLT.js

@@ -0,0 +1,166 @@
+"use client";
+
+// src/loading/Loading.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@mari-ui/core";
+
+// src/loading/utils.ts
+var strokeClass = {
+  primary: "stroke-mari-primary",
+  accent: "stroke-mari-accent",
+  success: "stroke-mari-success",
+  error: "stroke-mari-error",
+  warning: "stroke-mari-warning",
+  info: "stroke-mari-info",
+  neutral: "stroke-mari-neutral"
+};
+var SPINNER_VIEWBOX = { sm: 16, md: 24, lg: 40 };
+var SPINNER_SIZE = { sm: "1rem", md: "1.5rem", lg: "2.5rem" };
+var STROKE_WIDTH = { sm: 2, md: 2.5, lg: 3.5 };
+var TIP_CLASS = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+function clampPercent(percent) {
+  return Math.min(100, Math.max(0, percent ?? 0));
+}
+
+// src/loading/Loading.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function useDelayedVisible(spinning, delay) {
+  const [delayed, setDelayed] = useState(delay <= 0 && spinning);
+  useEffect(() => {
+    if (!spinning) {
+      setDelayed(false);
+      return;
+    }
+    if (delay <= 0) {
+      setDelayed(true);
+      return;
+    }
+    const timer = setTimeout(() => setDelayed(true), delay);
+    return () => clearTimeout(timer);
+  }, [spinning, delay]);
+  return spinning && delayed;
+}
+function Spinner({ size, color, percent }) {
+  const box = SPINNER_VIEWBOX[size];
+  const stroke = STROKE_WIDTH[size];
+  const radius = (box - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const determinate = percent !== void 0;
+  const dash = determinate ? clampPercent(percent) / 100 * circumference : circumference * 0.28;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: `0 0 ${box} ${box}`,
+      style: { width: SPINNER_SIZE[size], height: SPINNER_SIZE[size] },
+      className: cn(
+        "shrink-0",
+        // Hareket azaltma tercihinde de döner (durum bilgisi taşıyor) ama yavaş.
+        !determinate && "animate-spin motion-reduce:animate-[spin_2s_linear_infinite]",
+        determinate && "-rotate-90"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: box / 2, cy: box / 2, r: radius, fill: "none", strokeWidth: stroke, className: "stroke-mari-border" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: box / 2,
+            cy: box / 2,
+            r: radius,
+            fill: "none",
+            strokeWidth: stroke,
+            strokeLinecap: "round",
+            strokeDasharray: `${dash} ${circumference}`,
+            className: cn(strokeClass[color], determinate && "transition-[stroke-dasharray] duration-300 motion-reduce:transition-none")
+          }
+        )
+      ]
+    }
+  );
+}
+function IndicatorBlock({ size, color, percent, tip, indicator, row }) {
+  const determinate = percent !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-mari-muted", row ? "flex-row" : "flex-col"), children: [
+    indicator ?? /* @__PURE__ */ jsx(Spinner, { size, color, percent }),
+    (tip || determinate) && /* @__PURE__ */ jsxs("span", { className: cn("tabular-nums", TIP_CLASS[size]), children: [
+      tip,
+      determinate && /* @__PURE__ */ jsxs("span", { className: cn(tip ? "ml-1.5" : "", "font-medium text-mari-foreground"), children: [
+        "%",
+        Math.round(clampPercent(percent))
+      ] })
+    ] })
+  ] });
+}
+function getA11yProps(label, percent) {
+  if (percent === void 0) return { role: "status", "aria-live": "polite", "aria-label": label };
+  return { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(clampPercent(percent)) };
+}
+function WrapperLoading({
+  visible,
+  label,
+  a11yProps,
+  determinate,
+  className,
+  children,
+  indicator
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "aria-busy": visible || void 0, children: [
+    /* @__PURE__ */ jsx("div", { inert: visible || void 0, className: cn("transition-opacity duration-200 motion-reduce:transition-none", visible && "pointer-events-none select-none opacity-40"), children }),
+    !determinate && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: visible ? label : "" }),
+    visible && // Uzun içerikte spinner ilk 400px'in ortasında kalsın (ant.design) — sayfanın dibinde kaybolmasın.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...determinate ? a11yProps : { "aria-hidden": true },
+        className: "absolute inset-x-0 top-0 z-10 flex h-full max-h-[25rem] items-center justify-center transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0",
+        children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-mari-border bg-mari-surface/95 px-4 py-3 shadow-mari-md", children: indicator })
+      }
+    )
+  ] });
+}
+function Loading({
+  spinning = true,
+  size = "md",
+  tip,
+  delay = 0,
+  percent,
+  fullscreen = false,
+  children,
+  color = "primary",
+  indicator,
+  className
+}) {
+  const visible = useDelayedVisible(spinning, delay);
+  const label = typeof tip === "string" ? tip : "Y\xFCkleniyor";
+  const a11yProps = getA11yProps(label, percent);
+  const indicatorBlock = /* @__PURE__ */ jsx(IndicatorBlock, { size, color, percent, tip, indicator, row: size === "sm" && !fullscreen });
+  if (children !== void 0 && !fullscreen) {
+    return /* @__PURE__ */ jsx(WrapperLoading, { visible, label, a11yProps, determinate: percent !== void 0, className, indicator: indicatorBlock, children });
+  }
+  if (!visible) return null;
+  if (fullscreen) {
+    if (typeof document === "undefined") return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...a11yProps,
+          className: cn(
+            "fixed inset-0 z-mari-modal flex items-center justify-center bg-mari-surface/80 backdrop-blur-sm",
+            "transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0",
+            className
+          ),
+          children: indicatorBlock
+        }
+      ),
+      document.body
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ...a11yProps, className: cn("inline-flex", className), children: indicatorBlock });
+}
+
+export {
+  Loading
+};
+//# sourceMappingURL=chunk-47FHUOLT.js.map

package/dist/chunk-47FHUOLT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loading/Loading.tsx","../src/loading/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn, type ColorRole, type Size } from \"@mari-ui/core\";\nimport type { LoadingProps } from \"./types\";\nimport { clampPercent, SPINNER_SIZE, SPINNER_VIEWBOX, STROKE_WIDTH, strokeClass, TIP_CLASS } from \"./utils\";\n\nexport type { LoadingProps };\n\n/**\n * Faz 13.6 — yapı ant.design Spin'den, görünüm kendi token'larımızdan.\n *\n * Eski sürüm tek bir şey yapabiliyordu: `fixed inset-0` tam ekran bir spinner.\n * - Bir kartın/formun İÇİNDE kullanılamıyordu; örtü de yoktu — alttaki\n *   sayfa yükleme sırasında tıklanabiliyordu.\n * - `role=\"status\"` yoktu (gizli \"Yükleniyor...\" metni hiç duyurulmuyordu);\n *   boyut, açıklama, gecikme yoktu.\n *\n * Artık üç mod: satır içi (varsayılan), sarmalama (`children` — içerik yerinde\n * kalır, soluklaşır, `inert` olur; düzen kaymaz), tam ekran (`fullscreen`).\n * `delay` hızlı biten isteklerde yanıp sönmeyi önler; `percent` belirli ilerleme.\n *\n * Faz 15.6: spinner boyutu rem (px kök fontla ölçeklenmiyordu); `aria-valuenow`\n * da sınırlanır (percent=150 → 150/100 duyuruluyordu); tam ekran `document.body`'ye\n * portal edilir (transform'lu bir atanın içinde `fixed` ekranı kaplamıyordu);\n * mod başına ayrık bileşenler (sonar cognitive-complexity).\n */\n\nfunction useDelayedVisible(spinning: boolean, delay: number): boolean {\n  const [delayed, setDelayed] = useState(delay <= 0 && spinning);\n  useEffect(() => {\n    if (!spinning) {\n      setDelayed(false);\n      return;\n    }\n    if (delay <= 0) {\n      setDelayed(true);\n      return;\n    }\n    const timer = setTimeout(() => setDelayed(true), delay);\n    return () => clearTimeout(timer);\n  }, [spinning, delay]);\n  return spinning && delayed;\n}\n\nfunction Spinner({ size, color, percent }: Readonly<{ size: Size; color: ColorRole; percent?: number }>) {\n  const box = SPINNER_VIEWBOX[size];\n  const stroke = STROKE_WIDTH[size];\n  const radius = (box - stroke) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const determinate = percent !== undefined;\n  const dash = determinate ? (clampPercent(percent) / 100) * circumference : circumference * 0.28;\n\n  return (\n    <svg\n      aria-hidden\n      viewBox={`0 0 ${box} ${box}`}\n      style={{ width: SPINNER_SIZE[size], height: SPINNER_SIZE[size] }}\n      className={cn(\n        \"shrink-0\",\n        // Hareket azaltma tercihinde de döner (durum bilgisi taşıyor) ama yavaş.\n        !determinate && \"animate-spin motion-reduce:animate-[spin_2s_linear_infinite]\",\n        determinate && \"-rotate-90\"\n      )}\n    >\n      <circle cx={box / 2} cy={box / 2} r={radius} fill=\"none\" strokeWidth={stroke} className=\"stroke-mari-border\" />\n      <circle\n        cx={box / 2}\n        cy={box / 2}\n        r={radius}\n        fill=\"none\"\n        strokeWidth={stroke}\n        strokeLinecap=\"round\"\n        strokeDasharray={`${dash} ${circumference}`}\n        className={cn(strokeClass[color], determinate && \"transition-[stroke-dasharray] duration-300 motion-reduce:transition-none\")}\n      />\n    </svg>\n  );\n}\n\ninterface IndicatorProps {\n  size: Size;\n  color: ColorRole;\n  percent?: number;\n  tip?: React.ReactNode;\n  indicator?: React.ReactNode;\n  /** Küçük satır içi gösterge yan yana, diğerleri alt alta. */\n  row: boolean;\n}\n\nfunction IndicatorBlock({ size, color, percent, tip, indicator, row }: Readonly<IndicatorProps>) {\n  const determinate = percent !== undefined;\n  return (\n    <div className={cn(\"flex items-center gap-2 text-mari-muted\", row ? \"flex-row\" : \"flex-col\")}>\n      {indicator ?? <Spinner size={size} color={color} percent={percent} />}\n      {(tip || determinate) && (\n        <span className={cn(\"tabular-nums\", TIP_CLASS[size])}>\n          {tip}\n          {determinate && <span className={cn(tip ? \"ml-1.5\" : \"\", \"font-medium text-mari-foreground\")}>%{Math.round(clampPercent(percent))}</span>}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** Belirli ilerlemede progressbar, aksi halde canlı durum bölgesi. */\nfunction getA11yProps(label: string, percent: number | undefined): React.HTMLAttributes<HTMLDivElement> {\n  if (percent === undefined) return { role: \"status\", \"aria-live\": \"polite\", \"aria-label\": label };\n  return { role: \"progressbar\", \"aria-label\": label, \"aria-valuemin\": 0, \"aria-valuemax\": 100, \"aria-valuenow\": Math.round(clampPercent(percent)) };\n}\n\nfunction WrapperLoading({\n  visible,\n  label,\n  a11yProps,\n  determinate,\n  className,\n  children,\n  indicator,\n}: Readonly<{\n  visible: boolean;\n  label: string;\n  a11yProps: React.HTMLAttributes<HTMLDivElement>;\n  determinate: boolean;\n  className?: string;\n  children: React.ReactNode;\n  indicator: React.ReactNode;\n}>) {\n  return (\n    <div className={cn(\"relative\", className)} aria-busy={visible || undefined}>\n      {/* Yüklenirken içerik etkileşime kapalı (inert) — formda çift gönderimi, listede yarım veriye tıklamayı önler. */}\n      <div inert={visible || undefined} className={cn(\"transition-opacity duration-200 motion-reduce:transition-none\", visible && \"pointer-events-none select-none opacity-40\")}>\n        {children}\n      </div>\n      {/* Canlı bölge HEP DOM'da, sadece metni değişir — yükleme başlayınca yeni\n          eklenen bir role=status'u bazı ekran okuyucular duyurmuyor. */}\n      {!determinate && (\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {visible ? label : \"\"}\n        </span>\n      )}\n      {visible && (\n        // Uzun içerikte spinner ilk 400px'in ortasında kalsın (ant.design) — sayfanın dibinde kaybolmasın.\n        <div\n          {...(determinate ? a11yProps : { \"aria-hidden\": true })}\n          className=\"absolute inset-x-0 top-0 z-10 flex h-full max-h-[25rem] items-center justify-center transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0\"\n        >\n          {/* Soluk içeriğin (grafik, metin) üstünde okunur kalsın diye yüzey kutusu. */}\n          <div className=\"rounded-xl border border-mari-border bg-mari-surface/95 px-4 py-3 shadow-mari-md\">{indicator}</div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function Loading({\n  spinning = true,\n  size = \"md\",\n  tip,\n  delay = 0,\n  percent,\n  fullscreen = false,\n  children,\n  color = \"primary\",\n  indicator,\n  className,\n}: Readonly<LoadingProps>) {\n  const visible = useDelayedVisible(spinning, delay);\n  const label = typeof tip === \"string\" ? tip : \"Yükleniyor\";\n  const a11yProps = getA11yProps(label, percent);\n  const indicatorBlock = (\n    <IndicatorBlock size={size} color={color} percent={percent} tip={tip} indicator={indicator} row={size === \"sm\" && !fullscreen} />\n  );\n\n  if (children !== undefined && !fullscreen) {\n    return (\n      <WrapperLoading visible={visible} label={label} a11yProps={a11yProps} determinate={percent !== undefined} className={className} indicator={indicatorBlock}>\n        {children}\n      </WrapperLoading>\n    );\n  }\n\n  if (!visible) return null;\n\n  if (fullscreen) {\n    if (typeof document === \"undefined\") return null;\n    return createPortal(\n      <div\n        {...a11yProps}\n        className={cn(\n          \"fixed inset-0 z-mari-modal flex items-center justify-center bg-mari-surface/80 backdrop-blur-sm\",\n          \"transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0\",\n          className\n        )}\n      >\n        {indicatorBlock}\n      </div>,\n      document.body\n    );\n  }\n\n  return (\n    <div {...a11yProps} className={cn(\"inline-flex\", className)}>\n      {indicatorBlock}\n    </div>\n  );\n}\n","import type { ColorRole, Size } from \"@mari-ui/core\";\n\n/** SVG `stroke` rengi — Tailwind tarayıcısı için literal (bkz. lib/colorClasses). */\nexport const strokeClass: Record<ColorRole, string> = {\n  primary: \"stroke-mari-primary\",\n  accent: \"stroke-mari-accent\",\n  success: \"stroke-mari-success\",\n  error: \"stroke-mari-error\",\n  warning: \"stroke-mari-warning\",\n  info: \"stroke-mari-info\",\n  neutral: \"stroke-mari-neutral\",\n};\n\n/**\n * SVG'nin iç koordinat sistemi (viewBox birimi) — ekrandaki boyut `SPINNER_SIZE`.\n * Faz 15.6: eskiden `width/height` bu sayılarla px'ti; kök font büyüyünce\n * (4K, erişilebilirlik yazı boyutu) spinner küçük kalıyordu (px yasak kuralı).\n */\nexport const SPINNER_VIEWBOX: Record<Size, number> = { sm: 16, md: 24, lg: 40 };\nexport const SPINNER_SIZE: Record<Size, string> = { sm: \"1rem\", md: \"1.5rem\", lg: \"2.5rem\" };\n/** Halka kalınlığı (viewBox birimi) çapla birlikte — küçükte ince çizgi kaybolmasın. */\nexport const STROKE_WIDTH: Record<Size, number> = { sm: 2, md: 2.5, lg: 3.5 };\nexport const TIP_CLASS: Record<Size, string> = { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" };\n\nexport function clampPercent(percent: number | undefined): number {\n  return Math.min(100, Math.max(0, percent ?? 0));\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-54HHEXXD.js

@@ -0,0 +1,20 @@
+// src/lib/skeleton.ts
+import { cn } from "@mari-ui/core";
+function skeletonFill(active) {
+  return active ? "bg-linear-to-r from-mari-border/70 via-mari-surface-alt to-mari-border/70 bg-[length:400%_100%] animate-[mari-skeleton-shimmer_1.4s_ease_infinite] motion-reduce:animate-none" : "bg-mari-border/70";
+}
+function skeletonBoxProps(className) {
+  return {
+    "aria-hidden": true,
+    "data-skeleton": "",
+    // Dolgu ve şeffaf metin SONDA: `className` bir metin rengi (ör. Typography'nin
+    // `text-mari-foreground`'u) taşısa bile twMerge onları ezmesin.
+    className: cn("pointer-events-none select-none", className, skeletonFill(true), "text-transparent")
+  };
+}
+
+export {
+  skeletonFill,
+  skeletonBoxProps
+};
+//# sourceMappingURL=chunk-54HHEXXD.js.map

package/dist/chunk-54HHEXXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/skeleton.ts"],"sourcesContent":["import { cn } from \"@mari-ui/core\";\n\n/**\n * Faz 15 — component'lerin ortak `skeleton` sözleşmesi.\n *\n * `loading` ≠ `skeleton`: `loading` = bir EYLEM sürüyor (Button spinner'ı,\n * component etkileşimli kalır ya da disabled olur). `skeleton` = VERİ henüz\n * yok; component kendi geometrisinde (aynı boyut + radius sınıfları) içeriksiz\n * bir yer tutucu çizer → yüklenince layout zıplamaz.\n *\n * Yer tutucu ekran okuyucudan gizlidir; \"yükleniyor\" duyurusu tüketicinin\n * işidir (yüklenen bölgeye `aria-busy`, ya da tek bir `<Skeleton label>`).\n */\nexport interface SkeletonableProps {\n  /** Veri gelene kadar component'in kendi boyutunda iskelet çizer. */\n  skeleton?: boolean;\n}\n\n/**\n * Tek kaynak dolgu: `active` → parıltı (gradyan kayar), değilse düz.\n * `prefers-reduced-motion`da parıltı durur.\n */\nexport function skeletonFill(active: boolean | undefined): string {\n  return active\n    ? \"bg-linear-to-r from-mari-border/70 via-mari-surface-alt to-mari-border/70 bg-[length:400%_100%] animate-[mari-skeleton-shimmer_1.4s_ease_infinite] motion-reduce:animate-none\"\n    : \"bg-mari-border/70\";\n}\n\n/**\n * Bir component'in `skeleton` dalında kök elemana yayılacak prop'lar.\n * `className`e component'in GERÇEK boyut/radius sınıflarını verin (örn.\n * `sizeClass[size]`) ki iskelet ile yüklenmiş hali birebir aynı kutuyu kaplasın.\n */\nexport function skeletonBoxProps(className?: string) {\n  return {\n    \"aria-hidden\": true as const,\n    \"data-skeleton\": \"\",\n    // Dolgu ve şeffaf metin SONDA: `className` bir metin rengi (ör. Typography'nin\n    // `text-mari-foreground`'u) taşısa bile twMerge onları ezmesin.\n    className: cn(\"pointer-events-none select-none\", className, skeletonFill(true), \"text-transparent\"),\n  };\n}\n"],"mappings":";AAAA,SAAS,UAAU;AAsBZ,SAAS,aAAa,QAAqC;AAChE,SAAO,SACH,kLACA;AACN;AAOO,SAAS,iBAAiB,WAAoB;AACnD,SAAO;AAAA,IACL,eAAe;AAAA,IACf,iBAAiB;AAAA;AAAA;AAAA,IAGjB,WAAW,GAAG,mCAAmC,WAAW,aAAa,IAAI,GAAG,kBAAkB;AAAA,EACpG;AACF;","names":[]}

package/dist/chunk-BDV4GOEN.js

@@ -0,0 +1,53 @@
+"use client";
+
+// src/lib/infiniteScroll.tsx
+import { useEffect, useRef } from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useInfiniteScroll(sentinel, { hasMore, loading = false, onLoadMore, rootMargin = "200px" }) {
+  const callback = useRef(onLoadMore);
+  callback.current = onLoadMore;
+  useEffect(() => {
+    const el = sentinel.current;
+    if (!el || !hasMore || loading || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) callback.current();
+    }, { rootMargin });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [sentinel, hasMore, loading, rootMargin]);
+}
+function InfiniteScrollFooter({ options, className }) {
+  const sentinel = useRef(null);
+  useInfiniteScroll(sentinel, options);
+  const { hasMore, loading = false, onLoadMore, endMessage = "Hepsi bu kadar", loadMoreLabel = "Daha fazla y\xFCkle" } = options;
+  return (
+    // `relative`: içindeki sr-only düğme konumlanmamış bir kaydırma kabından kaçıp sayfayı genişletmesin.
+    /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col items-center gap-2 py-3 text-sm text-mari-muted", className), children: [
+      /* @__PURE__ */ jsx("div", { ref: sentinel, "aria-hidden": true, className: "h-px w-full" }),
+      /* @__PURE__ */ jsxs("div", { role: "status", className: "flex min-h-5 items-center gap-2", children: [
+        loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Loader2Icon, { size: 16, "aria-hidden": true, className: "animate-spin motion-reduce:animate-none" }),
+          "Y\xFCkleniyor\u2026"
+        ] }),
+        !loading && !hasMore && endMessage
+      ] }),
+      hasMore && !loading && // Fare kullanıcısında görünmez (kaydırma yetiyor); klavyeyle odaklanınca belirir.
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onLoadMore,
+          className: "sr-only rounded-md px-3 py-1.5 font-medium text-mari-primary focus-visible:not-sr-only focus-visible:outline-2 focus-visible:outline-mari-ring",
+          children: loadMoreLabel
+        }
+      )
+    ] })
+  );
+}
+
+export {
+  InfiniteScrollFooter
+};
+//# sourceMappingURL=chunk-BDV4GOEN.js.map

package/dist/chunk-BDV4GOEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/infiniteScroll.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { Loader2Icon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\n\n/**\n * Faz 16.3 — List ve Masonry'nin ortak sonsuz kaydırma sözleşmesi.\n *\n * Erişilebilirlik: yalnız kaydırmaya bağlı yükleme klavye kullanıcısını\n * sayfa sonuna (alt bilgiye) hiç ulaştırmayabilir. Bu yüzden işaretçinin\n * yanında her zaman odaklanabilir bir \"Daha fazla yükle\" düğmesi de olur\n * (fare kullanıcısı için kendiliğinden, klavye için düğmeyle). Yükleme ve\n * \"hepsi bu kadar\" durumu `role=\"status\"` ile duyurulur.\n */\nexport interface InfiniteScrollOptions {\n  /** Yüklenecek kayıt kaldı mı. `false` olunca işaretçi kalkar, `endMessage` görünür. */\n  hasMore: boolean;\n  /** Sonraki sayfa yüklenirken `true` verin — bu sırada yeni istek tetiklenmez. */\n  loading?: boolean;\n  /** Liste sonu görünüme girince (ya da düğmeyle) çağrılır. */\n  onLoadMore: () => void;\n  /** İşaretçinin görünüme ne kadar erken sayılacağı. Varsayılan: `\"200px\"` (sona gelmeden yükler). */\n  rootMargin?: string;\n  /** Tüm kayıtlar yüklenince. Varsayılan: \"Hepsi bu kadar\". `null` gizler. */\n  endMessage?: React.ReactNode;\n  /** Düğme metni. Varsayılan: \"Daha fazla yükle\". */\n  loadMoreLabel?: string;\n}\n\n/**\n * İşaretçi görünüme girince `onLoadMore`. Yükleme bitip işaretçi hâlâ\n * görünürse (içerik ekranı doldurmadıysa) gözlem yeniden kurulur ve bir\n * sonraki sayfa da istenir — ekran dolana kadar.\n */\nexport function useInfiniteScroll(sentinel: React.RefObject<HTMLElement | null>, { hasMore, loading = false, onLoadMore, rootMargin = \"200px\" }: InfiniteScrollOptions) {\n  const callback = useRef(onLoadMore);\n  callback.current = onLoadMore;\n\n  useEffect(() => {\n    const el = sentinel.current;\n    if (!el || !hasMore || loading || typeof IntersectionObserver === \"undefined\") return;\n    // `root: null` yine de kaydırılan ata kaplarının kırpmasını hesaba katar → hem sayfa hem iç kaydırma alanında çalışır.\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((e) => e.isIntersecting)) callback.current();\n    }, { rootMargin });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [sentinel, hasMore, loading, rootMargin]);\n}\n\n/** Liste sonu: gözlenen işaretçi + durum + klavye için düğme. */\nexport function InfiniteScrollFooter({ options, className }: Readonly<{ options: InfiniteScrollOptions; className?: string }>) {\n  const sentinel = useRef<HTMLDivElement>(null);\n  useInfiniteScroll(sentinel, options);\n  const { hasMore, loading = false, onLoadMore, endMessage = \"Hepsi bu kadar\", loadMoreLabel = \"Daha fazla yükle\" } = options;\n\n  return (\n    // `relative`: içindeki sr-only düğme konumlanmamış bir kaydırma kabından kaçıp sayfayı genişletmesin.\n    <div className={cn(\"relative flex flex-col items-center gap-2 py-3 text-sm text-mari-muted\", className)}>\n      <div ref={sentinel} aria-hidden className=\"h-px w-full\" />\n      <div role=\"status\" className=\"flex min-h-5 items-center gap-2\">\n        {loading && (\n          <>\n            <Loader2Icon size={16} aria-hidden className=\"animate-spin motion-reduce:animate-none\" />\n            Yükleniyor…\n          </>\n        )}\n        {!loading && !hasMore && endMessage}\n      </div>\n      {hasMore && !loading && (\n        // Fare kullanıcısında görünmez (kaydırma yetiyor); klavyeyle odaklanınca belirir.\n        <button\n          type=\"button\"\n          onClick={onLoadMore}\n          className=\"sr-only rounded-md px-3 py-1.5 font-medium text-mari-primary focus-visible:not-sr-only focus-visible:outline-2 focus-visible:outline-mari-ring\"\n        >\n          {loadMoreLabel}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAgB,WAAW,cAAc;AACzC,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAwDb,SAGI,UAHJ,KAGI,YAHJ;AAzBC,SAAS,kBAAkB,UAA+C,EAAE,SAAS,UAAU,OAAO,YAAY,aAAa,QAAQ,GAA0B;AACtK,QAAM,WAAW,OAAO,UAAU;AAClC,WAAS,UAAU;AAEnB,YAAU,MAAM;AACd,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,MAAM,CAAC,WAAW,WAAW,OAAO,yBAAyB,YAAa;AAE/E,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,UAAI,QAAQ,KAAK,CAAC,MAAM,EAAE,cAAc,EAAG,UAAS,QAAQ;AAAA,IAC9D,GAAG,EAAE,WAAW,CAAC;AACjB,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,SAAS,SAAS,UAAU,CAAC;AAC7C;AAGO,SAAS,qBAAqB,EAAE,SAAS,UAAU,GAAqE;AAC7H,QAAM,WAAW,OAAuB,IAAI;AAC5C,oBAAkB,UAAU,OAAO;AACnC,QAAM,EAAE,SAAS,UAAU,OAAO,YAAY,aAAa,kBAAkB,gBAAgB,sBAAmB,IAAI;AAEpH;AAAA;AAAA,IAEE,qBAAC,SAAI,WAAW,GAAG,0EAA0E,SAAS,GACpG;AAAA,0BAAC,SAAI,KAAK,UAAU,eAAW,MAAC,WAAU,eAAc;AAAA,MACxD,qBAAC,SAAI,MAAK,UAAS,WAAU,mCAC1B;AAAA,mBACC,iCACE;AAAA,8BAAC,eAAY,MAAM,IAAI,eAAW,MAAC,WAAU,2CAA0C;AAAA,UAAE;AAAA,WAE3F;AAAA,QAED,CAAC,WAAW,CAAC,WAAW;AAAA,SAC3B;AAAA,MACC,WAAW,CAAC;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA;AAEJ;","names":[]}