@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/table.js

@@ -0,0 +1,471 @@
+"use client";
+
+import {
+  Tooltip
+} from "./chunk-ZMA7BT2L.js";
+import {
+  Pagination
+} from "./chunk-TXRQCHOR.js";
+import {
+  Empty
+} from "./chunk-LBXIPDAB.js";
+import {
+  Drawer
+} from "./chunk-KCYM2JXP.js";
+import {
+  useScrollable
+} from "./chunk-KG6A32KX.js";
+import "./chunk-JNZODUXP.js";
+import "./chunk-V7KDUUV6.js";
+import {
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import {
+  Input
+} from "./chunk-P7Z5BREP.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  SkeletonSlot
+} from "./chunk-DKENCYHA.js";
+import "./chunk-YZ7MDC6B.js";
+import "./chunk-KSPM2Z3T.js";
+import "./chunk-DUCIAQGR.js";
+import "./chunk-LBQMEHK6.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-TCYDVNSU.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/table/Table.tsx
+import { useMemo, useRef as useRef2 } from "react";
+import { cn as cn6 } from "@mari-ui/core";
+
+// src/table/_components/TableAccordion.tsx
+import React3, { useState as useState3 } from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/table/utils.ts
+function clearRowDraft(setDrafts, id) {
+  setDrafts((prev) => {
+    const next = { ...prev };
+    delete next[id];
+    return next;
+  });
+}
+function setRowDraftValue(setDrafts, id, columnName, value) {
+  setDrafts((prev) => {
+    const rowDraft = { ...prev[id], [columnName]: value };
+    return { ...prev, [id]: rowDraft };
+  });
+}
+var ALIGN_CLASS = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+function getAlignClass(align) {
+  return ALIGN_CLASS[align ?? "start"];
+}
+var ACTIONS_JUSTIFY_CLASS = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+function getActionsJustifyClass(align) {
+  return ACTIONS_JUSTIFY_CLASS[align ?? "start"];
+}
+function getRowLabel(columns, item) {
+  const first = columns.find((c) => !c.actions && c.columnName);
+  const value = first?.columnName ? item[first.columnName] : void 0;
+  const text = value == null ? "" : String(value);
+  return text || item.id;
+}
+var SKELETON_WIDTHS = ["70%", "45%", "60%", "85%", "50%", "75%"];
+function skeletonWidth(columnIndex, rowIndex = 0) {
+  return SKELETON_WIDTHS[(columnIndex + rowIndex) % SKELETON_WIDTHS.length];
+}
+function skeletonRowCount(pageSize) {
+  return Math.min(pageSize ?? 5, 10);
+}
+
+// src/table/_components/TableCellSkeleton.tsx
+import { cn } from "@mari-ui/core";
+import { jsx } from "react/jsx-runtime";
+function TableCellSkeleton({ width, height = "0.75rem", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex h-5 items-center", className), children: /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width, height, radius: "sm" }) });
+}
+
+// src/table/_components/TableInfoValue.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TableInfoValue({ info, value }) {
+  const ref = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setIsTruncated(el.scrollHeight > el.clientHeight + 1);
+  }, [value]);
+  const showTooltip = info || isTruncated;
+  const content = (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- kasıtlı: bu span tıklanabilir değil, TEK amacı kırpılan değerin tooltip'ini klavyeyle de erişilebilir kılmak (bkz. yukarıdaki not).
+    /* @__PURE__ */ jsx2("span", { ref, tabIndex: showTooltip ? 0 : void 0, className: "text-pretty line-clamp-2", children: value })
+  );
+  return showTooltip ? /* @__PURE__ */ jsx2(Tooltip, { color: "neutral", variant: "soft", className: "max-w-2xs text-xs", placement: "bottom", trigger: content, content: /* @__PURE__ */ jsx2("span", { children: value }) }) : content;
+}
+
+// src/table/_components/TableRowActions.tsx
+import { useState as useState2 } from "react";
+import { CheckIcon, ChevronRightIcon, PencilIcon, Trash2Icon, XIcon } from "lucide-react";
+
+// src/table/_components/TableEditDrawer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TableEditDrawer({ title, description, open, onClose, children }) {
+  return (
+    // Faz 13.6: eskiden `header`'a yan yana iki <span> veriliyordu (başlık ve
+    // açıklama arasında boşluk bile yoktu, ortalanmıştı). Artık Drawer'ın
+    // kendi `title`/`description`'ı — dialog'un erişilebilir adı da başlık.
+    /* @__PURE__ */ jsx3(Drawer, { open, onClose, title, description, "aria-label": title ? void 0 : "Kayd\u0131 d\xFCzenle", children })
+  );
+}
+
+// src/table/_components/TableRowActions.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function TableRowActions({
+  actions,
+  item,
+  rowLabel,
+  isInlineEditing,
+  onStartInlineEdit,
+  onSaveInlineEdit,
+  onCancelInlineEdit
+}) {
+  const [drawerOpen, setDrawerOpen] = useState2(false);
+  const name = (action) => `${action}: ${rowLabel}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    actions.editRowInInline && (isInlineEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "success", size: "sm", onClick: onSaveInlineEdit, icon: /* @__PURE__ */ jsx4(CheckIcon, { size: 16, "aria-hidden": true }), "aria-label": name("Kaydet") }),
+      /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "neutral", size: "sm", onClick: onCancelInlineEdit, icon: /* @__PURE__ */ jsx4(XIcon, { size: 16, "aria-hidden": true }), "aria-label": name("Vazge\xE7") })
+    ] }) : /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "neutral", size: "sm", onClick: onStartInlineEdit, icon: /* @__PURE__ */ jsx4(PencilIcon, { size: 16, "aria-hidden": true }), "aria-label": name("D\xFCzenle") })),
+    actions.onEditWithDrawer && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "neutral", size: "sm", onClick: () => setDrawerOpen(true), icon: /* @__PURE__ */ jsx4(PencilIcon, { size: 16, "aria-hidden": true }), "aria-label": name("D\xFCzenle") }),
+      /* @__PURE__ */ jsx4(TableEditDrawer, { title: actions.onEditWithDrawer.title, description: actions.onEditWithDrawer.description, open: drawerOpen, onClose: () => setDrawerOpen(false), children: /* @__PURE__ */ jsx4(actions.onEditWithDrawer.form, { refetch: actions.refetch ?? (() => {
+      }), initialData: item, closeModal: () => setDrawerOpen(false) }) })
+    ] }),
+    actions.navigateRow && /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "neutral", size: "sm", onClick: () => actions.navigateRow?.(item.id), icon: /* @__PURE__ */ jsx4(ChevronRightIcon, { size: 16, "aria-hidden": true }), "aria-label": name("Detaya git") }),
+    actions.deleteRow && /* @__PURE__ */ jsx4(Button, { variant: "ghost", color: "error", size: "sm", onClick: () => actions.deleteRow?.(item.id), icon: /* @__PURE__ */ jsx4(Trash2Icon, { size: 16, "aria-hidden": true }), "aria-label": name("Sil") })
+  ] });
+}
+
+// src/table/_components/TableAccordion.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function renderTitle(column, value, item, rowIndex) {
+  if (column?.render) return column.render(value, item, rowIndex);
+  return value != null ? String(value) : "-";
+}
+function renderValue(col, value, item, rowIndex) {
+  if (col.render) return col.render(value, item, rowIndex);
+  return /* @__PURE__ */ jsx5(TableInfoValue, { info: col.info, value: value != null ? String(value) : "-" });
+}
+function TableAccordion({ data, columns, emptyState, className, skeleton = false, pageSize }) {
+  const [openId, setOpenId] = useState3(null);
+  const [editingRowId, setEditingRowId] = useState3(null);
+  const [drafts, setDrafts] = useState3({});
+  const actionsColumn = columns.find((c) => c.actions);
+  const fieldColumns = columns.filter((c) => !c.actions);
+  const [titleColumn, ...restColumns] = fieldColumns;
+  if (skeleton && data.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { "aria-hidden": true, className: cn2("flex flex-col divide-y divide-mari-border rounded-md border border-mari-border", className), children: Array.from({ length: skeletonRowCount(pageSize) }, (_, i) => (
+      // h-6 = başlık düğmesinin satır yüksekliği, h-8 = `sm` eylem düğmesi.
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsx5(TableCellSkeleton, { width: skeletonWidth(0, i), className: "h-6 flex-1" }),
+        actionsColumn && /* @__PURE__ */ jsx5(TableCellSkeleton, { width: "3rem", className: "h-8 w-16 justify-end" })
+      ] }, i)
+    )) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { className: cn2("rounded-md border border-mari-border", className), children: /* @__PURE__ */ jsx5(Empty, { size: "sm", title: emptyState?.title ?? "Veri Bulunamad\u0131", description: emptyState?.description }) });
+  }
+  return /* @__PURE__ */ jsx5("div", { className: cn2("flex flex-col divide-y divide-mari-border rounded-md border border-mari-border", className), children: data.map((item, rowIndex) => {
+    const isOpen = !skeleton && openId === item.id;
+    const isEditing = !skeleton && editingRowId === item.id;
+    const draft = drafts[item.id] ?? {};
+    const titleValue = titleColumn?.columnName ? item[titleColumn.columnName] : void 0;
+    const displayTitle = renderTitle(titleColumn, titleValue, item, rowIndex);
+    const panelId = `table-accordion-panel-${item.id}`;
+    return /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsx5(SkeletonSlot, { on: skeleton, className: "min-w-0 flex-1 items-center", placeholder: /* @__PURE__ */ jsx5(TableCellSkeleton, { width: skeletonWidth(0, rowIndex), className: "h-6" }), children: /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpenId(isOpen ? null : item.id),
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            className: "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-start font-medium text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+            children: [
+              /* @__PURE__ */ jsx5(ChevronDownIcon, { "aria-hidden": true, className: cn2("h-4 w-4 shrink-0 text-mari-muted transition-transform", isOpen && "rotate-180") }),
+              /* @__PURE__ */ jsx5("span", { className: "min-w-0", children: displayTitle })
+            ]
+          }
+        ) }),
+        actionsColumn?.actions && /* @__PURE__ */ jsx5(SkeletonSlot, { on: skeleton, flow: "flex", className: "items-center justify-items-end", placeholder: /* @__PURE__ */ jsx5(TableCellSkeleton, { width: "3rem", className: "h-8 justify-end" }), children: /* @__PURE__ */ jsx5(
+          TableRowActions,
+          {
+            actions: actionsColumn.actions,
+            item,
+            rowLabel: getRowLabel(columns, item),
+            isInlineEditing: isEditing,
+            onStartInlineEdit: () => {
+              setEditingRowId(item.id);
+              setOpenId(item.id);
+            },
+            onSaveInlineEdit: () => {
+              actionsColumn.actions?.editRowInInline?.onChange({ ...item, ...draft });
+              setEditingRowId(null);
+              clearRowDraft(setDrafts, item.id);
+            },
+            onCancelInlineEdit: () => {
+              setEditingRowId(null);
+              clearRowDraft(setDrafts, item.id);
+            }
+          }
+        ) })
+      ] }),
+      isOpen && restColumns.length > 0 && /* @__PURE__ */ jsx5("dl", { id: panelId, className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-mari-border bg-mari-surface-alt/40 px-3 py-3 text-sm", children: restColumns.map((col, idx) => {
+        const columnName = col.columnName;
+        const rawValue = columnName ? item[columnName] : void 0;
+        const displayValue = rawValue != null ? String(rawValue) : "-";
+        const draftValue = columnName ? draft[columnName] : void 0;
+        return /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
+          /* @__PURE__ */ jsx5("dt", { className: "text-mari-muted", children: col.header }),
+          /* @__PURE__ */ jsx5("dd", { className: "text-mari-foreground", children: isEditing && columnName ? /* @__PURE__ */ jsx5(
+            Input,
+            {
+              "aria-label": typeof col.header === "string" ? col.header : void 0,
+              value: draftValue !== void 0 ? String(draftValue) : displayValue,
+              onChange: (e) => {
+                const nextValue = e.target.value;
+                setRowDraftValue(setDrafts, item.id, columnName, nextValue);
+              }
+            }
+          ) : renderValue(col, rawValue, item, rowIndex) })
+        ] }, idx);
+      }) })
+    ] }, item.id);
+  }) });
+}
+
+// src/table/_components/TableBody.tsx
+import { useState as useState4 } from "react";
+import { cn as cn3 } from "@mari-ui/core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ACTIONS_CELL_CLASS = "sticky right-0 w-px whitespace-nowrap border-l border-mari-border bg-mari-surface px-4 py-2.5";
+var DATA_CELL_CLASS = "max-w-64 px-4 py-2.5 text-sm break-words";
+function DataCell({ col, item, rowIndex, columnIndex, isEditing, draft, setDrafts, skeleton }) {
+  const columnName = col.columnName;
+  const rawValue = columnName ? item[columnName] : void 0;
+  const displayValue = rawValue != null ? String(rawValue) : "-";
+  let content;
+  if (isEditing && columnName) {
+    const draftValue = draft[columnName];
+    content = /* @__PURE__ */ jsx6(
+      Input,
+      {
+        "aria-label": typeof col.header === "string" ? col.header : void 0,
+        className: "min-w-36",
+        value: draftValue !== void 0 ? String(draftValue) : displayValue,
+        onChange: (e) => setRowDraftValue(setDrafts, item.id, columnName, e.target.value)
+      }
+    );
+  } else if (col.render) {
+    content = col.render(rawValue, item, rowIndex);
+  } else {
+    content = /* @__PURE__ */ jsx6(TableInfoValue, { info: col.info, value: displayValue });
+  }
+  return /* @__PURE__ */ jsx6("td", { className: cn3(DATA_CELL_CLASS, getAlignClass(col.align)), children: /* @__PURE__ */ jsx6(
+    SkeletonSlot,
+    {
+      on: skeleton,
+      className: "items-center",
+      placeholder: /* @__PURE__ */ jsx6(TableCellSkeleton, { width: skeletonWidth(columnIndex, rowIndex), className: getActionsJustifyClass(col.align) }),
+      children: content
+    }
+  ) });
+}
+function PlaceholderRows({ columns, count }) {
+  return /* @__PURE__ */ jsx6("tbody", { "aria-hidden": true, children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx6("tr", { className: "border-b border-mari-border last:border-b-0", children: columns.map(
+    (col, columnIndex) => col.actions ? /* @__PURE__ */ jsx6("td", { className: ACTIONS_CELL_CLASS, children: /* @__PURE__ */ jsx6(TableCellSkeleton, { width: "3rem", className: getActionsJustifyClass(col.align) }) }, columnIndex) : /* @__PURE__ */ jsx6("td", { className: DATA_CELL_CLASS, children: /* @__PURE__ */ jsx6(TableCellSkeleton, { width: skeletonWidth(columnIndex, rowIndex), className: getActionsJustifyClass(col.align) }) }, columnIndex)
+  ) }, rowIndex)) });
+}
+function TableBody({ data, columns, emptyState, skeleton = false, pageSize }) {
+  const [editingRowId, setEditingRowId] = useState4(null);
+  const [drafts, setDrafts] = useState4({});
+  if (skeleton && data.length === 0) return /* @__PURE__ */ jsx6(PlaceholderRows, { columns, count: skeletonRowCount(pageSize) });
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx6("tbody", { children: /* @__PURE__ */ jsx6("tr", { children: /* @__PURE__ */ jsx6("td", { colSpan: columns.length, className: "p-0 text-start", children: /* @__PURE__ */ jsx6(Empty, { size: "sm", title: emptyState?.title ?? "Veri Bulunamad\u0131", description: emptyState?.description }) }) }) });
+  }
+  return /* @__PURE__ */ jsx6("tbody", { children: data.map((item, rowIndex) => {
+    const draft = drafts[item.id] ?? {};
+    const isEditing = !skeleton && editingRowId === item.id;
+    return /* @__PURE__ */ jsx6("tr", { className: cn3("border-b border-mari-border last:border-b-0", !skeleton && "transition-colors hover:bg-mari-surface-alt/50"), children: columns.map(
+      (col, columnIndex) => col.actions ? /* @__PURE__ */ jsx6("td", { className: ACTIONS_CELL_CLASS, children: /* @__PURE__ */ jsx6(SkeletonSlot, { on: skeleton, flow: "flex", className: "items-center", placeholder: /* @__PURE__ */ jsx6(TableCellSkeleton, { width: "3rem", className: getActionsJustifyClass(col.align) }), children: /* @__PURE__ */ jsx6("div", { className: cn3("flex", getActionsJustifyClass(col.align)), children: /* @__PURE__ */ jsx6(
+        TableRowActions,
+        {
+          actions: col.actions,
+          item,
+          rowLabel: getRowLabel(columns, item),
+          isInlineEditing: isEditing,
+          onStartInlineEdit: () => setEditingRowId(item.id),
+          onSaveInlineEdit: () => {
+            col.actions?.editRowInInline?.onChange({ ...item, ...draft });
+            setEditingRowId(null);
+            clearRowDraft(setDrafts, item.id);
+          },
+          onCancelInlineEdit: () => {
+            setEditingRowId(null);
+            clearRowDraft(setDrafts, item.id);
+          }
+        }
+      ) }) }) }, columnIndex) : /* @__PURE__ */ jsx6(
+        DataCell,
+        {
+          col,
+          item,
+          rowIndex,
+          columnIndex,
+          isEditing,
+          draft,
+          setDrafts,
+          skeleton
+        },
+        columnIndex
+      )
+    ) }, item.id);
+  }) });
+}
+
+// src/table/_components/TableHeader.tsx
+import { cn as cn4 } from "@mari-ui/core";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableHeader({ columns, skeleton = false }) {
+  return /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { className: "w-full", children: columns.map((col, index) => /* @__PURE__ */ jsxs3(
+    "th",
+    {
+      scope: "col",
+      className: cn4(
+        "px-4 py-2.5 text-xs font-medium tracking-wide text-mari-muted uppercase border-b border-mari-border whitespace-nowrap",
+        getAlignClass(col.align),
+        // İşlemler sütunu içeriğe (ikonlara) göre DAR kalır, kalan
+        // boşluğu almaz — kullanıcı bulgusu: eskiden sütun gereksiz
+        // yere genişti, başlık metniyle ikonlar aynı hizada değildi
+        // (`text-align` blok/flex bir elemanı değil sadece satır-içi
+        // içeriği hizalar — bkz. `TableBody`'deki asıl düzeltme).
+        col.actions && "sticky right-0 w-px bg-mari-surface border-l border-mari-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx7(
+          SkeletonSlot,
+          {
+            on: skeleton,
+            className: "items-center",
+            placeholder: /* @__PURE__ */ jsx7(TableCellSkeleton, { width: col.actions ? "2.5rem" : skeletonWidth(index + 2), height: "0.625rem", className: cn4("h-4", getActionsJustifyClass(col.align)) }),
+            children: col.header
+          }
+        ),
+        skeleton && /* @__PURE__ */ jsx7("span", { className: "sr-only", children: col.header })
+      ]
+    },
+    index
+  )) }) });
+}
+
+// src/table/_components/TablePagination.tsx
+import { cn as cn5 } from "@mari-ui/core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function TablePagination({ pagination, className, skeleton = false }) {
+  const { page, pageSize, total, pageSizeOptions, onPageChange, onPageSizeChange } = pagination;
+  return /* @__PURE__ */ jsx8("div", { className: cn5("border-t border-mari-border px-3 py-2.5", className), children: /* @__PURE__ */ jsx8(
+    Pagination,
+    {
+      skeleton,
+      currentPage: page,
+      pageSize,
+      totalItems: total,
+      onPageChange: (next) => onPageChange(next),
+      onPageSizeChange: onPageSizeChange && ((next) => onPageSizeChange(next)),
+      pageSizeOptions,
+      showTotal: true
+    }
+  ) });
+}
+
+// src/table/Table.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Table({
+  data,
+  columns,
+  className,
+  emptyState,
+  responsive = "scroll",
+  pagination,
+  paginationMode = "server",
+  label,
+  skeleton = false
+}) {
+  const scrollRef = useRef2(null);
+  const scrollable = useScrollable(scrollRef, "x");
+  const pageData = useMemo(() => {
+    if (!pagination || paginationMode !== "client") return data;
+    const start = (pagination.page - 1) * pagination.pageSize;
+    return data.slice(start, start + pagination.pageSize);
+  }, [data, pagination, paginationMode]);
+  return (
+    // Kullanıcı bulgusu: eskiden tablo dolu, kalın bir kutu (`border` + `bg-
+    // mari-neutral-subtle` başlık) içindeydi — "çok irrite duruyor" tepkisi
+    // aldı. Modern dashboard tabloları (Linear/Stripe/Vercel tarzı) ağır bir
+    // kutu yerine sadece satır ayırıcılarına güvenir; sınır artık `rounded-lg`
+    // + tek bir ince kenarlıkla (kutu değil) daha sessiz bir çerçeve çiziyor.
+    /* @__PURE__ */ jsxs4("div", { className: cn6("rounded-lg border border-mari-border", className), "aria-busy": skeleton || void 0, children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: scrollRef,
+          className: cn6(
+            // `relative`: içerideki `sr-only` (position:absolute) öğelerin taşıyıcısı
+            // olsun — yoksa kaydırma kutusundan kaçıp sayfayı yatay taşırıyorlardı (375px'te ölçüldü).
+            "relative overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+            responsive === "accordion" && "hidden md:block"
+          ),
+          ...scrollable ? { role: "region", "aria-label": label ?? "Tablo", tabIndex: 0 } : {},
+          children: /* @__PURE__ */ jsxs4("table", { className: "w-full min-w-[36rem]", children: [
+            label && /* @__PURE__ */ jsx9("caption", { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsx9(TableHeader, { columns, skeleton }),
+            /* @__PURE__ */ jsx9(TableBody, { data: pageData, columns, emptyState, skeleton, pageSize: pagination?.pageSize })
+          ] })
+        }
+      ),
+      responsive === "accordion" && /* @__PURE__ */ jsx9(
+        TableAccordion,
+        {
+          data: pageData,
+          columns,
+          emptyState,
+          skeleton,
+          pageSize: pagination?.pageSize,
+          className: "block border-0 md:hidden"
+        }
+      ),
+      pagination && /* @__PURE__ */ jsx9(TablePagination, { pagination, skeleton })
+    ] })
+  );
+}
+export {
+  Table
+};
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/table/Table.tsx","../src/table/_components/TableAccordion.tsx","../src/table/utils.ts","../src/table/_components/TableCellSkeleton.tsx","../src/table/_components/TableInfoValue.tsx","../src/table/_components/TableRowActions.tsx","../src/table/_components/TableEditDrawer.tsx","../src/table/_components/TableBody.tsx","../src/table/_components/TableHeader.tsx","../src/table/_components/TablePagination.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useMemo, useRef } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { useScrollable } from \"../lib/useScrollable\";\nimport { TableAccordion } from \"./_components/TableAccordion\";\nimport { TableBody } from \"./_components/TableBody\";\nimport { TableHeader } from \"./_components/TableHeader\";\nimport { TablePagination } from \"./_components/TablePagination\";\nimport type { TableProps } from \"./types\";\n\nexport type { TableProps };\n\n/**\n * Eskiden `tableHeader: string[]` ve `tableBody: ColumnProps<T>[]` İKİ AYRI\n * paralel diziydi, elle senkron tutuluyordu (bkz. plan denetimi). Artık tek\n * bir `columns` dizisi.\n *\n * Kullanıcı bulgularına göre (bkz. plan/sohbet) tamamen elden geçirildi:\n * - Sütun hizalaması artık DOM index'ine göre değil `col.align`'a göre\n *   (varsayılan sola hizalı, hepsi tutarlı).\n * - `loading` prop'u KALDIRILDI — anlamsız bir spinner gösteriyordu; gerçek\n *   skeleton yapısı ileride TÜM component'ler için birlikte gelecek.\n * - Veri boşken artık gerçek `Empty` component'i (bkz. `TableBody`).\n * - İşlemler sütunu tablo yatay kaydırıldığında sağda `sticky` kalır\n *   (`overflow-x-auto` + `<td>`/`<th>`'de `sticky right-0`).\n * - `responsive=\"accordion\"` dar ekranda (`md` altı) satırları tablo yerine\n *   açılır/kapanır kartlar olarak gösterir (bkz. `TableAccordion`).\n * - `pagination` verilirse altta sayfalama kontrolleri render edilir;\n *   `paginationMode=\"client\"` iken `Table` kendi diler, `\"server\"`\n *   (varsayılan) iken `data`'nın zaten o sayfaya ait dilim olduğu varsayılır.\n */\nexport function Table<T extends { id: string }>({\n  data,\n  columns,\n  className,\n  emptyState,\n  responsive = \"scroll\",\n  pagination,\n  paginationMode = \"server\",\n  label,\n  skeleton = false,\n}: Readonly<TableProps<T>>) {\n  // Yatay kaydırılan bölge klavyeyle de kaydırılabilmeli (axe\n  // `scrollable-region-focusable`): SADECE gerçekten taşarken tab durağı olur —\n  // sığan bir tabloya boşuna bir durak eklemesin.\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const scrollable = useScrollable(scrollRef, \"x\");\n\n  const pageData = useMemo(() => {\n    if (!pagination || paginationMode !== \"client\") return data;\n    const start = (pagination.page - 1) * pagination.pageSize;\n    return data.slice(start, start + pagination.pageSize);\n  }, [data, pagination, paginationMode]);\n\n  return (\n    // Kullanıcı bulgusu: eskiden tablo dolu, kalın bir kutu (`border` + `bg-\n    // mari-neutral-subtle` başlık) içindeydi — \"çok irrite duruyor\" tepkisi\n    // aldı. Modern dashboard tabloları (Linear/Stripe/Vercel tarzı) ağır bir\n    // kutu yerine sadece satır ayırıcılarına güvenir; sınır artık `rounded-lg`\n    // + tek bir ince kenarlıkla (kutu değil) daha sessiz bir çerçeve çiziyor.\n    <div className={cn(\"rounded-lg border border-mari-border\", className)} aria-busy={skeleton || undefined}>\n      <div\n        ref={scrollRef}\n        className={cn(\n          // `relative`: içerideki `sr-only` (position:absolute) öğelerin taşıyıcısı\n          // olsun — yoksa kaydırma kutusundan kaçıp sayfayı yatay taşırıyorlardı (375px'te ölçüldü).\n          \"relative overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n          responsive === \"accordion\" && \"hidden md:block\"\n        )}\n        {...(scrollable ? { role: \"region\", \"aria-label\": label ?? \"Tablo\", tabIndex: 0 } : {})}\n      >\n        <table className=\"w-full min-w-[36rem]\">\n          {label && <caption className=\"sr-only\">{label}</caption>}\n          <TableHeader columns={columns} skeleton={skeleton} />\n          <TableBody data={pageData} columns={columns} emptyState={emptyState} skeleton={skeleton} pageSize={pagination?.pageSize} />\n        </table>\n      </div>\n      {responsive === \"accordion\" && (\n        <TableAccordion\n          data={pageData}\n          columns={columns}\n          emptyState={emptyState}\n          skeleton={skeleton}\n          pageSize={pagination?.pageSize}\n          className=\"block border-0 md:hidden\"\n        />\n      )}\n      {pagination && <TablePagination pagination={pagination} skeleton={skeleton} />}\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useState } from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Empty } from \"../../empty\";\nimport { Input } from \"../../input\";\nimport { SkeletonSlot } from \"../../lib/SkeletonSlot\";\nimport { clearRowDraft, getRowLabel, setRowDraftValue, skeletonRowCount, skeletonWidth } from \"../utils\";\nimport { TableCellSkeleton } from \"./TableCellSkeleton\";\nimport type { ColumnDef, TableEmptyStateConfig } from \"../types\";\nimport { TableInfoValue } from \"./TableInfoValue\";\nimport { TableRowActions } from \"./TableRowActions\";\n\nexport interface TableAccordionProps<T extends { id: string }> {\n  data: T[];\n  columns: ColumnDef<T>[];\n  emptyState?: TableEmptyStateConfig;\n  className?: string;\n  skeleton?: boolean;\n  pageSize?: number;\n}\n\n/**\n * `responsive=\"accordion\"` iken dar ekranda (`md` altı) `Table`'ın normal\n * tablo görünümü YERİNE render edilir — kullanıcı bulgusu: \"responsive'de\n * tablo görünümünden ziyade accordionlu bir şekilde satırları göstermek\n * isteyebilir\". İlk (aksiyon olmayan) sütun satır başlığı olarak, geri\n * kalanı açılınca `<dl>` etiket/değer listesi olarak gösterilir. Satır içi\n * düzenleme (`editRowInInline`) masaüstü tablodakiyle AYNI mekanizmayı\n * kullanır (`clearRowDraft`/`setRowDraftValue`) — ikisi CSS breakpoint'iyle\n * gizlenip gösterildiği için aynı anda ikisi de DOM'da, ama her biri kendi\n * taslak state'ini tutar (bir satırı bir görünümde düzenlemeye başlayıp\n * ekran boyutunu ortasında değiştirmek taslağı sıfırlar — kabul edilen bir\n * kenar durumu).\n */\nfunction renderTitle<T extends { id: string }>(column: ColumnDef<T> | undefined, value: T[keyof T] | undefined, item: T, rowIndex: number): React.ReactNode {\n  if (column?.render) return column.render(value, item, rowIndex);\n  return value != null ? String(value) : \"-\";\n}\n\nfunction renderValue<T extends { id: string }>(col: ColumnDef<T>, value: T[keyof T] | undefined, item: T, rowIndex: number): React.ReactNode {\n  if (col.render) return col.render(value, item, rowIndex);\n  return <TableInfoValue info={col.info} value={value != null ? String(value) : \"-\"} />;\n}\n\nexport function TableAccordion<T extends { id: string }>({ data, columns, emptyState, className, skeleton = false, pageSize }: Readonly<TableAccordionProps<T>>) {\n  const [openId, setOpenId] = useState<string | null>(null);\n  const [editingRowId, setEditingRowId] = useState<string | null>(null);\n  const [drafts, setDrafts] = useState<Record<string, Partial<T>>>({});\n\n  const actionsColumn = columns.find((c) => c.actions);\n  const fieldColumns = columns.filter((c) => !c.actions);\n  const [titleColumn, ...restColumns] = fieldColumns;\n\n  if (skeleton && data.length === 0) {\n    // Veri henüz yok: kapalı satır başlıklarıyla aynı yükseklikte sahte satırlar.\n    return (\n      <div aria-hidden className={cn(\"flex flex-col divide-y divide-mari-border rounded-md border border-mari-border\", className)}>\n        {Array.from({ length: skeletonRowCount(pageSize) }, (_, i) => (\n          // h-6 = başlık düğmesinin satır yüksekliği, h-8 = `sm` eylem düğmesi.\n          <div key={i} className=\"flex items-center gap-2 px-3 py-2.5\">\n            <TableCellSkeleton width={skeletonWidth(0, i)} className=\"h-6 flex-1\" />\n            {actionsColumn && <TableCellSkeleton width=\"3rem\" className=\"h-8 w-16 justify-end\" />}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <div className={cn(\"rounded-md border border-mari-border\", className)}>\n        <Empty size=\"sm\" title={emptyState?.title ?? \"Veri Bulunamadı\"} description={emptyState?.description} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex flex-col divide-y divide-mari-border rounded-md border border-mari-border\", className)}>\n      {data.map((item, rowIndex) => {\n        const isOpen = !skeleton && openId === item.id;\n        const isEditing = !skeleton && editingRowId === item.id;\n        const draft: Partial<T> = drafts[item.id] ?? {};\n        const titleValue = titleColumn?.columnName ? item[titleColumn.columnName] : undefined;\n        const displayTitle = renderTitle(titleColumn, titleValue, item, rowIndex);\n        const panelId = `table-accordion-panel-${item.id}`;\n\n        return (\n          <div key={item.id}>\n            <div className=\"flex items-center gap-2 px-3 py-2.5\">\n              <SkeletonSlot on={skeleton} className=\"min-w-0 flex-1 items-center\" placeholder={<TableCellSkeleton width={skeletonWidth(0, rowIndex)} className=\"h-6\" />}>\n                {/* Faz 15: odak halkası yoktu (klavyede hangi satırda olunduğu görünmüyordu). */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpenId(isOpen ? null : item.id)}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  className=\"flex min-w-0 flex-1 items-center gap-2 rounded-sm text-start font-medium text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\"\n                >\n                  <ChevronDownIcon aria-hidden className={cn(\"h-4 w-4 shrink-0 text-mari-muted transition-transform\", isOpen && \"rotate-180\")} />\n                  <span className=\"min-w-0\">{displayTitle}</span>\n                </button>\n              </SkeletonSlot>\n              {actionsColumn?.actions && (\n                <SkeletonSlot on={skeleton} flow=\"flex\" className=\"items-center justify-items-end\" placeholder={<TableCellSkeleton width=\"3rem\" className=\"h-8 justify-end\" />}>\n                  <TableRowActions\n                    actions={actionsColumn.actions}\n                    item={item}\n                    rowLabel={getRowLabel(columns, item)}\n                    isInlineEditing={isEditing}\n                    onStartInlineEdit={() => {\n                      setEditingRowId(item.id);\n                      setOpenId(item.id);\n                    }}\n                    onSaveInlineEdit={() => {\n                      actionsColumn.actions?.editRowInInline?.onChange({ ...item, ...draft });\n                      setEditingRowId(null);\n                      clearRowDraft(setDrafts, item.id);\n                    }}\n                    onCancelInlineEdit={() => {\n                      setEditingRowId(null);\n                      clearRowDraft(setDrafts, item.id);\n                    }}\n                  />\n                </SkeletonSlot>\n              )}\n            </div>\n            {isOpen && restColumns.length > 0 && (\n              <dl id={panelId} className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-mari-border bg-mari-surface-alt/40 px-3 py-3 text-sm\">\n                {restColumns.map((col, idx) => {\n                  const columnName = col.columnName;\n                  const rawValue = columnName ? item[columnName] : undefined;\n                  const displayValue = rawValue != null ? String(rawValue) : \"-\";\n                  const draftValue = columnName ? draft[columnName] : undefined;\n\n                  return (\n                    <React.Fragment key={idx}>\n                      <dt className=\"text-mari-muted\">{col.header}</dt>\n                      <dd className=\"text-mari-foreground\">\n                        {isEditing && columnName ? (\n                          <Input\n                            aria-label={typeof col.header === \"string\" ? col.header : undefined}\n                            value={draftValue !== undefined ? String(draftValue) : displayValue}\n                            onChange={(e) => {\n                              const nextValue = e.target.value as T[typeof columnName];\n                              setRowDraftValue(setDrafts, item.id, columnName, nextValue);\n                            }}\n                          />\n                        ) : (\n                          renderValue(col, rawValue, item, rowIndex)\n                        )}\n                      </dd>\n                    </React.Fragment>\n                  );\n                })}\n              </dl>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import type React from \"react\";\nimport type { ColumnDef, TableColumnAlign } from \"./types\";\n\nexport type DraftsSetter<T> = React.Dispatch<React.SetStateAction<Record<string, Partial<T>>>>;\n\n/**\n * `TableBody` ve `TableAccordion` (aynı satır içi düzenleme davranışını\n * responsive/accordion görünümünde de desteklemek için) ortak kullanır.\n * Modül seviyesinde tanımlı — `setDrafts((prev) => {...})` çağrıları render\n * fonksiyonu İÇİNE gömülü kalırsa SonarJS `no-nested-functions` sınırını\n * (4) aşıyordu (Faz 8'de yakalandı).\n */\nexport function clearRowDraft<T>(setDrafts: DraftsSetter<T>, id: string) {\n  setDrafts((prev) => {\n    const next = { ...prev };\n    delete next[id];\n    return next;\n  });\n}\n\nexport function setRowDraftValue<T>(setDrafts: DraftsSetter<T>, id: string, columnName: keyof T, value: T[keyof T]) {\n  setDrafts((prev) => {\n    // TS, jenerik bir `keyof T` anahtarıyla computed-property atamasını\n    // statik olarak doğrulayamıyor (bilinen bir TS kısıtı) — tek satırlık\n    // bir cast ile çözülüyor, `columnName`/`value` zaten çağıranda tam tipli.\n    const rowDraft = { ...prev[id], [columnName]: value } as Partial<T>;\n    return { ...prev, [id]: rowDraft };\n  });\n}\n\n/**\n * Eskiden hizalama DOM index'ine göre otomatikti (ilk sütun sol, son sütun\n * sağ, ortadakiler merkez) — kullanıcı bulgusu: aynı tablodaki her sütun\n * farklı hizalanıyordu, tutarsız görünüyordu. Artık `ColumnDef.align`'dan\n * okunur, verilmezse sola hizalı.\n */\nconst ALIGN_CLASS: Record<TableColumnAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\nexport function getAlignClass(align: TableColumnAlign | undefined): string {\n  return ALIGN_CLASS[align ?? \"start\"];\n}\n\n/**\n * İşlemler hücresi bir `<div className=\"flex ...\">` (bkz. `TableRowActions`)\n * döndürür — BLOK bir kutu, `text-align`/`getAlignClass` onu yok sayar (sadece\n * satır içi içeriği hizalar). Bu yüzden hizalama burada `justify-*` ile\n * bloğun kendisine uygulanır.\n */\nconst ACTIONS_JUSTIFY_CLASS: Record<TableColumnAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n};\n\nexport function getActionsJustifyClass(align: TableColumnAlign | undefined): string {\n  return ACTIONS_JUSTIFY_CLASS[align ?? \"start\"];\n}\n\n/**\n * Satırın okunur adı — satır eylem düğmelerinin erişilebilir adında kullanılır\n * (\"Sil: Aykut Yılmaz\"). Eskiden her satırın düğmesi aynı \"Sil\" adını\n * taşıyordu; ekran okuyucu kullanıcısı hangi satırı sildiğini bilemiyordu.\n * İlk veri sütununun değeri, yoksa `id`.\n */\nexport function getRowLabel<T extends { id: string }>(columns: ColumnDef<T>[], item: T): string {\n  const first = columns.find((c) => !c.actions && c.columnName);\n  const value = first?.columnName ? item[first.columnName] : undefined;\n  const text = value == null ? \"\" : String(value);\n  return text || item.id;\n}\n\n/** İskelet çubuk genişlikleri — sütuna göre değişken, deterministik (gerçek veri gibi dalgalı görünsün). */\nconst SKELETON_WIDTHS = [\"70%\", \"45%\", \"60%\", \"85%\", \"50%\", \"75%\"];\nexport function skeletonWidth(columnIndex: number, rowIndex = 0): string {\n  return SKELETON_WIDTHS[(columnIndex + rowIndex) % SKELETON_WIDTHS.length]!;\n}\n\n/** Veri yokken iskelette çizilecek satır sayısı: sayfa boyu (en çok 10), yoksa 5. */\nexport function skeletonRowCount(pageSize?: number): number {\n  return Math.min(pageSize ?? 5, 10);\n}\n","import React from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { SkeletonBlock } from \"../../skeleton\";\n\n/**\n * Tek satırlık hücre yer tutucusu. Kutu `h-5` = gövdenin `text-sm` satır\n * yüksekliği (20px): veri yokken çizilen sahte satırlar gerçek tek satırlık\n * bir satırla aynı yükseklikte olur. `justify` hücre hizasını izler.\n */\nexport function TableCellSkeleton({ width, height = \"0.75rem\", className }: Readonly<{ width: string; height?: string; className?: string }>) {\n  return (\n    <div className={cn(\"flex h-5 items-center\", className)}>\n      <SkeletonBlock active width={width} height={height} radius=\"sm\" />\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Tooltip } from \"../../tooltip\";\n\nexport interface TableInfoValueProps {\n  info?: boolean;\n  value: string;\n}\n\n/**\n * Kullanıcı bulgusu: `line-clamp-2` bir telefon numarasını (\"0532 111\n * 22...\") ortasından kesiyordu — `info` prop'u verilmediği sürece kullanıcının\n * tam değeri okumasının HİÇBİR yolu yoktu. Artık `info` (her zaman tooltip)\n * dışında, metnin GERÇEKTEN kırpılıp kırpılmadığı `scrollHeight`/\n * `clientHeight` karşılaştırmasıyla otomatik tespit ediliyor — sığan bir\n * değer (örn. \"Aktif\") tooltip almaz, kırpılan her değer (`info`\n * verilmemiş olsa bile) otomatik olarak tooltip'e düşer. Sütun genişliğini\n * elle ayarlamaya gerek kalmadan hiçbir değer artık \"okunamaz\" kalmıyor.\n */\nexport function TableInfoValue({ info, value }: TableInfoValueProps) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    setIsTruncated(el.scrollHeight > el.clientHeight + 1);\n  }, [value]);\n\n  const showTooltip = info || isTruncated;\n\n  // `tabIndex={0}` KASITLI: bu bir düz `<span>`, doğal olarak odaklanılabilir\n  // değil — tooltip'e sadece hover'la değil `Tab`'la da ulaşılabilmesi\n  // gerekiyor (aksi hâlde klavye kullanıcıları kırpılan değeri hiç okuyamaz).\n  const content = (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- kasıtlı: bu span tıklanabilir değil, TEK amacı kırpılan değerin tooltip'ini klavyeyle de erişilebilir kılmak (bkz. yukarıdaki not).\n    <span ref={ref} tabIndex={showTooltip ? 0 : undefined} className=\"text-pretty line-clamp-2\">\n      {value}\n    </span>\n  );\n\n  // Kullanıcı bulgusu: `w-2xs` SABİT bir genişlikti (16rem/256px) — kısa bir\n  // değer (örn. bir telefon numarası) bile balonu gereksiz yere 256px'e\n  // geriyordu (\"çok geniş\" tepkisi). `max-w-2xs`'e çevrildi: sadece UZUN\n  // değerler bu sınıra çarpar, kısa değerler kendi içeriğine göre (Tooltip'in\n  // `w-max` varsayılanıyla) doğal genişlikte kalır. Ayrıca burada `soft` +\n  // `neutral` — koyu/dolu bir balon yerine soluk gri bir ipucu (kullanıcı\n  // bulgusu: \"rengi neutral gri olmalı, font-size küçülmeli\") ve `text-xs`\n  // (12px, genel Tooltip'in `text-sm`/14px varsayılanından küçük).\n  return showTooltip ? (\n    <Tooltip color=\"neutral\" variant=\"soft\" className=\"max-w-2xs text-xs\" placement=\"bottom\" trigger={content} content={<span>{value}</span>} />\n  ) : (\n    content\n  );\n}\n","\"use client\";\n\nimport React, { useState } from \"react\";\nimport { CheckIcon, ChevronRightIcon, PencilIcon, Trash2Icon, XIcon } from \"lucide-react\";\nimport { Button } from \"../../button\";\nimport { TableEditDrawer } from \"./TableEditDrawer\";\nimport type { ActionProps } from \"../types\";\n\nexport interface TableRowActionsProps<T> {\n  actions: ActionProps<T>;\n  item: T;\n  /** Satırın okunur adı — düğme adlarına eklenir (\"Sil: Aykut Yılmaz\"). */\n  rowLabel: string;\n  isInlineEditing: boolean;\n  onStartInlineEdit: () => void;\n  onSaveInlineEdit: () => void;\n  onCancelInlineEdit: () => void;\n}\n\n/**\n * Eskiden `_hook/useTableBody.tsx` diye adlandırılmış bir \"hook\" bu JSX'i\n * üretiyordu — ama hiçbir React hook kuralı taşımıyordu, düz bir JSX\n * factory'siydi (bkz. plan denetimi: \"hook değil, component'e\n * dönüştürülecek\"). Artık gerçek bir component.\n */\nexport function TableRowActions<T extends { id: string }>({\n  actions,\n  item,\n  rowLabel,\n  isInlineEditing,\n  onStartInlineEdit,\n  onSaveInlineEdit,\n  onCancelInlineEdit,\n}: Readonly<TableRowActionsProps<T>>) {\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  // Faz 15: her satırın düğmesi eskiden aynı adı (\"Sil\") taşıyordu — ekran\n  // okuyucuda hangi satırın silineceği belli değildi. Silme ikonu da bir\n  // silgiydi (Eraser); evrensel karşılığı çöp kutusu. Düzenle/detay nötr,\n  // sadece yıkıcı eylem renkli (her ikonun mavi olması satırı kalabalıklaştırıyordu).\n  const name = (action: string) => `${action}: ${rowLabel}`;\n  return (\n    <div className=\"flex items-center gap-1\">\n      {actions.editRowInInline &&\n        (isInlineEditing ? (\n          <>\n            <Button variant=\"ghost\" color=\"success\" size=\"sm\" onClick={onSaveInlineEdit} icon={<CheckIcon size={16} aria-hidden />} aria-label={name(\"Kaydet\")} />\n            <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" onClick={onCancelInlineEdit} icon={<XIcon size={16} aria-hidden />} aria-label={name(\"Vazgeç\")} />\n          </>\n        ) : (\n          <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" onClick={onStartInlineEdit} icon={<PencilIcon size={16} aria-hidden />} aria-label={name(\"Düzenle\")} />\n        ))}\n      {actions.onEditWithDrawer && (\n        <>\n          <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" onClick={() => setDrawerOpen(true)} icon={<PencilIcon size={16} aria-hidden />} aria-label={name(\"Düzenle\")} />\n          <TableEditDrawer title={actions.onEditWithDrawer.title} description={actions.onEditWithDrawer.description} open={drawerOpen} onClose={() => setDrawerOpen(false)}>\n            <actions.onEditWithDrawer.form refetch={actions.refetch ?? (() => {})} initialData={item} closeModal={() => setDrawerOpen(false)} />\n          </TableEditDrawer>\n        </>\n      )}\n      {actions.navigateRow && (\n        <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" onClick={() => actions.navigateRow?.(item.id)} icon={<ChevronRightIcon size={16} aria-hidden />} aria-label={name(\"Detaya git\")} />\n      )}\n      {actions.deleteRow && (\n        <Button variant=\"ghost\" color=\"error\" size=\"sm\" onClick={() => actions.deleteRow?.(item.id)} icon={<Trash2Icon size={16} aria-hidden />} aria-label={name(\"Sil\")} />\n      )}\n    </div>\n  );\n}\n","import React from \"react\";\nimport { Drawer } from \"../../drawer\";\n\nexport interface TableEditDrawerProps {\n  title?: string;\n  description?: string;\n  open: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n}\n\n/**\n * Eskiden `_hook/useItemDrawer.tsx` içinde tanımlıydı, `AddNewItem` adını\n * taşıyordu (yanıltıcı — \"yeni ekleme\" değil \"düzenleme\" çekmecesi) ve\n * dosyanın kendisi bir `useItemDrawer()` hook'u da export ediyordu — ama bu\n * hook'un döndürdüğü `open`/`setOpen` HİÇBİR YERDE kullanılmıyordu\n * (`useTableBody` kendi `openRowId` state'ini ayrı tutuyordu). Ölü hook\n * silindi, gerçek component `_components/`e taşındı ve doğru adını aldı.\n */\nexport function TableEditDrawer({ title, description, open, onClose, children }: Readonly<TableEditDrawerProps>) {\n  return (\n    // Faz 13.6: eskiden `header`'a yan yana iki <span> veriliyordu (başlık ve\n    // açıklama arasında boşluk bile yoktu, ortalanmıştı). Artık Drawer'ın\n    // kendi `title`/`description`'ı — dialog'un erişilebilir adı da başlık.\n    <Drawer open={open} onClose={onClose} title={title} description={description} aria-label={title ? undefined : \"Kaydı düzenle\"}>\n      {children}\n    </Drawer>\n  );\n}\n","\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Input } from \"../../input\";\nimport { Empty } from \"../../empty\";\nimport { SkeletonSlot } from \"../../lib/SkeletonSlot\";\nimport {\n  clearRowDraft,\n  getActionsJustifyClass,\n  getAlignClass,\n  getRowLabel,\n  setRowDraftValue,\n  skeletonRowCount,\n  skeletonWidth,\n  type DraftsSetter,\n} from \"../utils\";\nimport type { ColumnDef, TableEmptyStateConfig } from \"../types\";\nimport { TableCellSkeleton } from \"./TableCellSkeleton\";\nimport { TableInfoValue } from \"./TableInfoValue\";\nimport { TableRowActions } from \"./TableRowActions\";\n\nexport interface TableBodyProps<T extends { id: string }> {\n  data: T[];\n  columns: ColumnDef<T>[];\n  emptyState?: TableEmptyStateConfig;\n  skeleton?: boolean;\n  /** Veri yokken iskelette kaç sahte satır çizileceği (sayfa boyu). */\n  pageSize?: number;\n}\n\n/**\n * İşlemler hücresi. `text-align` (bkz. `getAlignClass`) sadece SATIR İÇİ\n * içeriği hizalar — `TableRowActions`'ın bloğu onu yok sayıyordu, bu yüzden\n * hizalama `justify-*` ile bloğun KENDİSİNE uygulanır. Sütun ikonlara göre dar\n * (`w-px whitespace-nowrap`) ve yatay kaydırmada sağda `sticky`.\n */\nconst ACTIONS_CELL_CLASS = \"sticky right-0 w-px whitespace-nowrap border-l border-mari-border bg-mari-surface px-4 py-2.5\";\n\n/**\n * Veri hücresi. `max-w-64` KASITLI: `table-auto`'da sütun serbestçe\n * büyüyüp `line-clamp-2` hiç tetiklenmiyordu (kullanıcı bulgusu: \"iki satıra\n * düşsün, horizontal scroll olacak\"). `text-sm`: başlıktan (text-xs) orantılı.\n */\nconst DATA_CELL_CLASS = \"max-w-64 px-4 py-2.5 text-sm break-words\";\n\ninterface DataCellProps<T extends { id: string }> {\n  col: ColumnDef<T>;\n  item: T;\n  rowIndex: number;\n  columnIndex: number;\n  isEditing: boolean;\n  draft: Partial<T>;\n  setDrafts: DraftsSetter<T>;\n  skeleton: boolean;\n}\n\nfunction DataCell<T extends { id: string }>({ col, item, rowIndex, columnIndex, isEditing, draft, setDrafts, skeleton }: Readonly<DataCellProps<T>>) {\n  const columnName = col.columnName;\n  const rawValue = columnName ? item[columnName] : undefined;\n  // `0`/`false`/`\"\"` geçerli değerlerdir — sadece null/undefined \"-\" olur.\n  const displayValue = rawValue != null ? String(rawValue) : \"-\";\n\n  let content: React.ReactNode;\n  if (isEditing && columnName) {\n    const draftValue = draft[columnName];\n    content = (\n      <Input\n        aria-label={typeof col.header === \"string\" ? col.header : undefined}\n        // Değeri kesmeden gösterecek asgari genişlik — tablo zaten yatay kayabiliyor.\n        className=\"min-w-36\"\n        value={draftValue !== undefined ? String(draftValue) : displayValue}\n        onChange={(e) => setRowDraftValue(setDrafts, item.id, columnName, e.target.value as T[typeof columnName])}\n      />\n    );\n  } else if (col.render) {\n    content = col.render(rawValue, item, rowIndex);\n  } else {\n    content = <TableInfoValue info={col.info} value={displayValue} />;\n  }\n\n  return (\n    <td className={cn(DATA_CELL_CLASS, getAlignClass(col.align))}>\n      <SkeletonSlot\n        on={skeleton}\n        className=\"items-center\"\n        placeholder={<TableCellSkeleton width={skeletonWidth(columnIndex, rowIndex)} className={getActionsJustifyClass(col.align)} />}\n      >\n        {content}\n      </SkeletonSlot>\n    </td>\n  );\n}\n\n/** Veri henüz yokken (`skeleton` + boş `data`) çizilen sahte satırlar — gerçek tek satırlık satırla aynı yükseklik. */\nfunction PlaceholderRows<T extends { id: string }>({ columns, count }: Readonly<{ columns: ColumnDef<T>[]; count: number }>) {\n  return (\n    <tbody aria-hidden>\n      {Array.from({ length: count }, (_, rowIndex) => (\n        <tr key={rowIndex} className=\"border-b border-mari-border last:border-b-0\">\n          {columns.map((col, columnIndex) =>\n            col.actions ? (\n              <td key={columnIndex} className={ACTIONS_CELL_CLASS}>\n                <TableCellSkeleton width=\"3rem\" className={getActionsJustifyClass(col.align)} />\n              </td>\n            ) : (\n              <td key={columnIndex} className={DATA_CELL_CLASS}>\n                <TableCellSkeleton width={skeletonWidth(columnIndex, rowIndex)} className={getActionsJustifyClass(col.align)} />\n              </td>\n            )\n          )}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n\nexport function TableBody<T extends { id: string }>({ data, columns, emptyState, skeleton = false, pageSize }: Readonly<TableBodyProps<T>>) {\n  // Satır içi düzenleme durumu satır seviyesinde: aksiyon hücresindeki\n  // \"düzenle\" AYNI satırdaki veri hücrelerini de <Input>'a çeviriyor.\n  const [editingRowId, setEditingRowId] = useState<string | null>(null);\n  const [drafts, setDrafts] = useState<Record<string, Partial<T>>>({});\n\n  if (skeleton && data.length === 0) return <PlaceholderRows columns={columns} count={skeletonRowCount(pageSize)} />;\n\n  if (data.length === 0) {\n    // `text-start` açıkça: colSpan hücresi hizayı miras almıyordu (kullanıcı bulgusu).\n    return (\n      <tbody>\n        <tr>\n          <td colSpan={columns.length} className=\"p-0 text-start\">\n            <Empty size=\"sm\" title={emptyState?.title ?? \"Veri Bulunamadı\"} description={emptyState?.description} />\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  return (\n    <tbody>\n      {data.map((item, rowIndex) => {\n        const draft: Partial<T> = drafts[item.id] ?? {};\n        const isEditing = !skeleton && editingRowId === item.id;\n        return (\n          <tr key={item.id} className={cn(\"border-b border-mari-border last:border-b-0\", !skeleton && \"transition-colors hover:bg-mari-surface-alt/50\")}>\n            {columns.map((col, columnIndex) =>\n              col.actions ? (\n                <td key={columnIndex} className={ACTIONS_CELL_CLASS}>\n                  <SkeletonSlot on={skeleton} flow=\"flex\" className=\"items-center\" placeholder={<TableCellSkeleton width=\"3rem\" className={getActionsJustifyClass(col.align)} />}>\n                    <div className={cn(\"flex\", getActionsJustifyClass(col.align))}>\n                      <TableRowActions\n                        actions={col.actions}\n                        item={item}\n                        rowLabel={getRowLabel(columns, item)}\n                        isInlineEditing={isEditing}\n                        onStartInlineEdit={() => setEditingRowId(item.id)}\n                        onSaveInlineEdit={() => {\n                          col.actions?.editRowInInline?.onChange({ ...item, ...draft });\n                          setEditingRowId(null);\n                          clearRowDraft(setDrafts, item.id);\n                        }}\n                        onCancelInlineEdit={() => {\n                          setEditingRowId(null);\n                          clearRowDraft(setDrafts, item.id);\n                        }}\n                      />\n                    </div>\n                  </SkeletonSlot>\n                </td>\n              ) : (\n                <DataCell\n                  key={columnIndex}\n                  col={col}\n                  item={item}\n                  rowIndex={rowIndex}\n                  columnIndex={columnIndex}\n                  isEditing={isEditing}\n                  draft={draft}\n                  setDrafts={setDrafts}\n                  skeleton={skeleton}\n                />\n              )\n            )}\n          </tr>\n        );\n      })}\n    </tbody>\n  );\n}\n","import React from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport type { ColumnDef } from \"../types\";\nimport { getActionsJustifyClass, getAlignClass, skeletonWidth } from \"../utils\";\nimport { SkeletonSlot } from \"../../lib/SkeletonSlot\";\nimport { TableCellSkeleton } from \"./TableCellSkeleton\";\n\nexport interface TableHeaderProps<T extends { id: string }> {\n  columns: ColumnDef<T>[];\n  skeleton?: boolean;\n}\n\n/**\n * Kullanıcı bulgusu: eskiden başlık dolu bir `bg-mari-neutral-subtle` bloğu +\n * kalın (`font-semibold`), gövdeyle aynı boyutta metin kullanıyordu — \"çok\n * irrite duruyor\" tepkisi aldı. Modern dashboard tabloları (Linear/Stripe/\n * Vercel tarzı) başlığı sessiz tutar: dolgu arka plan YOK, küçük/soluk/geniş\n * harf aralıklı metin — göze asıl çarpması gereken VERİ, başlık değil.\n */\nexport function TableHeader<T extends { id: string }>({ columns, skeleton = false }: Readonly<TableHeaderProps<T>>) {\n  return (\n    <thead>\n      <tr className=\"w-full\">\n        {columns.map((col, index) => (\n          <th\n            key={index}\n            scope=\"col\"\n            className={cn(\n              \"px-4 py-2.5 text-xs font-medium tracking-wide text-mari-muted uppercase border-b border-mari-border whitespace-nowrap\",\n              getAlignClass(col.align),\n              // İşlemler sütunu içeriğe (ikonlara) göre DAR kalır, kalan\n              // boşluğu almaz — kullanıcı bulgusu: eskiden sütun gereksiz\n              // yere genişti, başlık metniyle ikonlar aynı hizada değildi\n              // (`text-align` blok/flex bir elemanı değil sadece satır-içi\n              // içeriği hizalar — bkz. `TableBody`'deki asıl düzeltme).\n              col.actions && \"sticky right-0 w-px bg-mari-surface border-l border-mari-border\"\n            )}\n          >\n            <SkeletonSlot\n              on={skeleton}\n              className=\"items-center\"\n              // Başlık satırı `text-xs` (16px satır) — yer tutucu da o yükseklikte.\n              placeholder={<TableCellSkeleton width={col.actions ? \"2.5rem\" : skeletonWidth(index + 2)} height=\"0.625rem\" className={cn(\"h-4\", getActionsJustifyClass(col.align))} />}\n            >\n              {col.header}\n            </SkeletonSlot>\n            {/* Sütun adı veriye bağlı değil: görsel olarak iskelet, ama ekran okuyucu\n                için başlık boş kalmasın (axe `empty-table-header`). */}\n            {skeleton && <span className=\"sr-only\">{col.header}</span>}\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n}\n","import React from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Pagination } from \"../../pagination\";\nimport type { TablePaginationConfig } from \"../types\";\n\nexport interface TablePaginationProps {\n  pagination: TablePaginationConfig;\n  className?: string;\n  skeleton?: boolean;\n}\n\n/**\n * Faz 13.5 kullanıcı isteği (\"diğer component'lerde kullandığımız şeyleri\n * burada da uygulayalım\"): eskiden burada, `../../pagination`'daki paylaşılan\n * `Pagination` component'iyle NEREDEYSE BİREBİR AYNI bir sayfa-numarası/\n * ellipsis üretme mantığı tekrar uygulanmıştı (iki ayrı `getPageList`/\n * `getGeneratePageNumbers` fonksiyonu, iki ayrı buton render döngüsü). Artık\n * `TablePagination` sadece bir ince sarmalayıcı — tüm gerçek mantık paylaşılan\n * `Pagination`'da yaşıyor, `Table.tsx`'in kendi `TablePaginationConfig`\n * sözleşmesini (`page`/`pageSize`/`total` — `Pagination`'ın `currentPage`/\n * `pageSize`/`totalItems` isimlendirmesinden farklı, Table'ın kendi API'si\n * korunuyor) `Pagination`'ın prop'larına eşliyor.\n */\nexport function TablePagination({ pagination, className, skeleton = false }: Readonly<TablePaginationProps>) {\n  const { page, pageSize, total, pageSizeOptions, onPageChange, onPageSizeChange } = pagination;\n\n  return (\n    <div className={cn(\"border-t border-mari-border px-3 py-2.5\", className)}>\n      {/* Faz 15.5: Pagination'ın kendi iskeleti — her düğme kendi kare kutusunda, yaklaşık bloklar değil. */}\n      <Pagination\n        skeleton={skeleton}\n        currentPage={page}\n        pageSize={pageSize}\n        totalItems={total}\n        // Table'ın kendi sözleşmesi tek argümanlı — Pagination'ın ek `pageSize`/`page` argümanları sızmasın.\n        onPageChange={(next) => onPageChange(next)}\n        onPageSizeChange={onPageSizeChange && ((next) => onPageSizeChange(next))}\n        pageSizeOptions={pageSizeOptions}\n        showTotal\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["useRef","cn","React","useState","cn","jsx","useState","jsx","jsx","useState","jsx","jsxs","useState","cn","React","useState","cn","jsx","cn","useState","cn","jsx","jsxs","cn","cn","jsx","cn","jsx","jsxs","useRef","cn"]}

package/dist/tabs.d.ts

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