@demokit-ui/demokit 0.1.0

package/dist/kit/components/data-display/data-grid/data-grid-pagination.js

@@ -0,0 +1,132 @@
+import { jsxs as r, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { Button as i } from "../../form/button/button.js";
+import { useDataGrid as I } from "./data-grid.js";
+import { Select as y, SelectTrigger as G, SelectValue as L, SelectContent as $, SelectItem as j } from "../../form/select/select.js";
+import { Skeleton as v } from "../skeleton/skeleton.js";
+import { ChevronLeftIcon as B, ChevronRightIcon as M } from "lucide-react";
+import { cn as P } from "../../../../lib/utils.js";
+function H(z) {
+  const { table: t, recordCount: d, isLoading: u } = I(), s = { ...{
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: "Show",
+    sizesDescription: "per page",
+    sizesSkeleton: /* @__PURE__ */ e(v, { className: "h-8 w-44" }),
+    moreLimit: 5,
+    more: !1,
+    info: "{from} - {to} of {count}",
+    infoSkeleton: /* @__PURE__ */ e(v, { className: "h-8 w-60" })
+  }, ...z }, c = "size-7 p-0 text-sm", h = c + " rtl:transform rtl:rotate-180", a = t.getState().pagination.pageIndex, l = t.getState().pagination.pageSize, x = a * l + 1, N = Math.min((a + 1) * l, d), p = t.getPageCount(), C = s?.info ? s.info.replace("{from}", x.toString()).replace("{to}", N.toString()).replace("{count}", d.toString()) : `${x} - ${N} of ${d}`, g = s?.moreLimit || 5, m = Math.floor(a / g) * g, f = Math.min(m + g, p), w = () => {
+    const n = [];
+    for (let o = m; o < f; o++)
+      n.push(
+        /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            mode: "icon",
+            variant: "ghost",
+            className: P(c, "text-muted-foreground", {
+              "bg-accent text-accent-foreground": a === o
+            }),
+            onClick: () => {
+              a !== o && t.setPageIndex(o);
+            },
+            children: o + 1
+          },
+          o
+        )
+      );
+    return n;
+  }, b = () => m > 0 ? /* @__PURE__ */ e(
+    i,
+    {
+      size: "sm",
+      mode: "icon",
+      className: c,
+      variant: "ghost",
+      onClick: () => t.setPageIndex(m - 1),
+      children: "..."
+    }
+  ) : null, k = () => f < p ? /* @__PURE__ */ e(
+    i,
+    {
+      className: c,
+      variant: "ghost",
+      size: "sm",
+      mode: "icon",
+      onClick: () => t.setPageIndex(f),
+      children: "..."
+    }
+  ) : null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "data-grid-pagination",
+      className: P(
+        "flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow",
+        s?.className
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1", children: u ? s?.sizesSkeleton : /* @__PURE__ */ r(S, { children: [
+          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: "Rows per page" }),
+          /* @__PURE__ */ r(
+            y,
+            {
+              value: `${l}`,
+              indicatorPosition: "right",
+              onValueChange: (n) => {
+                const o = Number(n);
+                t.setPageSize(o);
+              },
+              children: [
+                /* @__PURE__ */ e(G, { className: "w-fit", size: "sm", children: /* @__PURE__ */ e(L, { placeholder: `${l}` }) }),
+                /* @__PURE__ */ e($, { side: "top", className: "min-w-[50px]", children: s?.sizes?.map((n) => /* @__PURE__ */ e(j, { value: `${n}`, children: n }, n)) })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2", children: u ? s?.infoSkeleton : /* @__PURE__ */ r(S, { children: [
+          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground text-nowrap order-2 sm:order-1", children: C }),
+          p > 1 && /* @__PURE__ */ r("div", { className: "flex items-center space-x-1 order-1 sm:order-2", children: [
+            /* @__PURE__ */ r(
+              i,
+              {
+                size: "sm",
+                mode: "icon",
+                variant: "ghost",
+                className: h,
+                onClick: () => t.previousPage(),
+                disabled: !t.getCanPreviousPage(),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Go to previous page" }),
+                  /* @__PURE__ */ e(B, { className: "size-4" })
+                ]
+              }
+            ),
+            b(),
+            w(),
+            k(),
+            /* @__PURE__ */ r(
+              i,
+              {
+                size: "sm",
+                mode: "icon",
+                variant: "ghost",
+                className: h,
+                onClick: () => t.nextPage(),
+                disabled: !t.getCanNextPage(),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Go to next page" }),
+                  /* @__PURE__ */ e(M, { className: "size-4" })
+                ]
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  H as DataGridPagination
+};

package/dist/kit/components/data-display/data-grid/data-grid-table-dnd-rows.d.ts

@@ -0,0 +1,9 @@
+import { UniqueIdentifier, DragEndEvent } from '@dnd-kit/core';
+declare function DataGridTableDndRowHandle({ rowId }: {
+    rowId: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableDndRows<TData>({ handleDragEnd, dataIds, }: {
+    handleDragEnd: (event: DragEndEvent) => void;
+    dataIds: UniqueIdentifier[];
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridTableDndRowHandle, DataGridTableDndRows };

package/dist/kit/components/data-display/data-grid/data-grid-table-dnd-rows.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useId as g } from "react";
+import { Button as R } from "../../form/button/button.js";
+import { useDataGrid as S } from "./data-grid.js";
+import { DataGridTableBase as T, DataGridTableHead as G, DataGridTableHeadRow as y, DataGridTableHeadRowCell as h, DataGridTableHeadRowCellResize as C, DataGridTableRowSpacer as w, DataGridTableBody as x, DataGridTableBodyRowSkeleton as z, DataGridTableBodyRowSkeletonCell as B, DataGridTableEmpty as H, DataGridTableBodyRow as v, DataGridTableBodyRowCell as L } from "./data-grid-table.js";
+import { useSensors as k, useSensor as p, MouseSensor as M, TouchSensor as N, KeyboardSensor as V, DndContext as j, closestCenter as A } from "@dnd-kit/core";
+import { restrictToVerticalAxis as E } from "@dnd-kit/modifiers";
+import { useSortable as b, SortableContext as I, verticalListSortingStrategy as F } from "@dnd-kit/sortable";
+import { CSS as K } from "@dnd-kit/utilities";
+import { flexRender as D } from "@tanstack/react-table";
+import { GripHorizontal as P } from "lucide-react";
+function te({ rowId: r }) {
+  const { attributes: n, listeners: t } = b({
+    id: r
+  });
+  return /* @__PURE__ */ e(R, { variant: "dim", size: "sm", className: "size-7", ...n, ...t, children: /* @__PURE__ */ e(P, {}) });
+}
+function _({ row: r }) {
+  const { transform: n, transition: t, setNodeRef: d, isDragging: i } = b({
+    id: r.id
+  }), s = {
+    transform: K.Transform.toString(n),
+    //let dnd-kit do its thing
+    transition: t,
+    opacity: i ? 0.8 : 1,
+    zIndex: i ? 1 : 0,
+    position: "relative"
+  };
+  return /* @__PURE__ */ e(v, { row: r, dndRef: d, dndStyle: s, children: r.getVisibleCells().map((l, a) => /* @__PURE__ */ e(L, { cell: l, children: D(l.column.columnDef.cell, l.getContext()) }, a)) }, r.id);
+}
+function oe({
+  handleDragEnd: r,
+  dataIds: n
+}) {
+  const { table: t, isLoading: d, props: i } = S(), s = t.getState().pagination, l = k(p(M, {}), p(N, {}), p(V, {}));
+  return /* @__PURE__ */ e(
+    j,
+    {
+      id: g(),
+      collisionDetection: A,
+      modifiers: [E],
+      onDragEnd: r,
+      sensors: l,
+      children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ u(T, { children: [
+        /* @__PURE__ */ e(G, { children: t.getHeaderGroups().map((a, m) => /* @__PURE__ */ e(y, { headerGroup: a, children: a.headers.map((o, c) => {
+          const { column: f } = o;
+          return /* @__PURE__ */ u(h, { header: o, children: [
+            o.isPlaceholder ? null : D(o.column.columnDef.header, o.getContext()),
+            i.tableLayout?.columnsResizable && f.getCanResize() && /* @__PURE__ */ e(C, { header: o })
+          ] }, c);
+        }) }, m)) }),
+        (i.tableLayout?.stripped || !i.tableLayout?.rowBorder) && /* @__PURE__ */ e(w, {}),
+        /* @__PURE__ */ e(x, { children: i.loadingMode === "skeleton" && d && s?.pageSize ? Array.from({ length: s.pageSize }).map((a, m) => /* @__PURE__ */ e(z, { children: t.getVisibleFlatColumns().map((o, c) => /* @__PURE__ */ e(B, { column: o, children: o.columnDef.meta?.skeleton }, c)) }, m)) : t.getRowModel().rows.length ? /* @__PURE__ */ e(I, { items: n, strategy: F, children: t.getRowModel().rows.map((a) => /* @__PURE__ */ e(_, { row: a }, a.id)) }) : /* @__PURE__ */ e(H, {}) })
+      ] }) })
+    }
+  );
+}
+export {
+  te as DataGridTableDndRowHandle,
+  oe as DataGridTableDndRows
+};

package/dist/kit/components/data-display/data-grid/data-grid-table-dnd.d.ts

@@ -0,0 +1,5 @@
+import { DragEndEvent } from '@dnd-kit/core';
+declare function DataGridTableDnd<TData>({ handleDragEnd }: {
+    handleDragEnd: (event: DragEndEvent) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridTableDnd };

package/dist/kit/components/data-display/data-grid/data-grid-table-dnd.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { Fragment as y, useId as T } from "react";
+import { Button as h } from "../../form/button/button.js";
+import { useDataGrid as f } from "./data-grid.js";
+import { DataGridTableBase as R, DataGridTableHead as G, DataGridTableHeadRow as w, DataGridTableRowSpacer as C, DataGridTableBody as x, DataGridTableBodyRowSkeleton as z, DataGridTableBodyRowSkeletonCell as B, DataGridTableBodyRow as v, DataGridTableBodyRowExpandded as H, DataGridTableEmpty as N, DataGridTableHeadRowCell as E, DataGridTableHeadRowCellResize as L, DataGridTableBodyRowCell as k } from "./data-grid-table.js";
+import { useSensors as I, useSensor as c, MouseSensor as M, TouchSensor as O, KeyboardSensor as j, DndContext as V, closestCenter as F } from "@dnd-kit/core";
+import { restrictToParentElement as P } from "@dnd-kit/modifiers";
+import { SortableContext as p, horizontalListSortingStrategy as u, useSortable as b } from "@dnd-kit/sortable";
+import { CSS as D } from "@dnd-kit/utilities";
+import { flexRender as S } from "@tanstack/react-table";
+import { GripVertical as A } from "lucide-react";
+function K({ header: t }) {
+  const { props: r } = f(), { column: d } = t, { attributes: i, isDragging: n, listeners: s, setNodeRef: a, transform: l, transition: o } = b({
+    id: t.column.id
+  }), m = {
+    opacity: n ? 0.8 : 1,
+    position: "relative",
+    transform: D.Translate.toString(l),
+    transition: o,
+    whiteSpace: "nowrap",
+    width: t.column.getSize(),
+    zIndex: n ? 1 : 0
+  };
+  return /* @__PURE__ */ e(E, { header: t, dndStyle: m, dndRef: a, children: /* @__PURE__ */ g("div", { className: "flex items-center justify-start gap-0.5", children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        mode: "icon",
+        size: "sm",
+        variant: "dim",
+        className: "-ms-2 size-6",
+        ...i,
+        ...s,
+        "aria-label": "Drag to reorder",
+        children: /* @__PURE__ */ e(A, { className: "opacity-50", "aria-hidden": "true" })
+      }
+    ),
+    t.isPlaceholder ? null : S(t.column.columnDef.header, t.getContext()),
+    r.tableLayout?.columnsResizable && d.getCanResize() && /* @__PURE__ */ e(L, { header: t })
+  ] }) });
+}
+function _({ cell: t }) {
+  const { isDragging: r, setNodeRef: d, transform: i, transition: n } = b({
+    id: t.column.id
+  }), s = {
+    opacity: r ? 0.8 : 1,
+    position: "relative",
+    transform: D.Translate.toString(i),
+    transition: n,
+    width: t.column.getSize(),
+    zIndex: r ? 1 : 0
+  };
+  return /* @__PURE__ */ e(k, { cell: t, dndStyle: s, dndRef: d, children: S(t.column.columnDef.cell, t.getContext()) });
+}
+function re({ handleDragEnd: t }) {
+  const { table: r, isLoading: d, props: i } = f(), n = r.getState().pagination, s = I(c(M, {}), c(O, {}), c(j, {}));
+  return /* @__PURE__ */ e(
+    V,
+    {
+      id: T(),
+      collisionDetection: F,
+      modifiers: [P],
+      onDragEnd: t,
+      sensors: s,
+      children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ g(R, { children: [
+        /* @__PURE__ */ e(G, { children: r.getHeaderGroups().map((a, l) => (console.log("table.getState().columnOrder:", r.getState().columnOrder), /* @__PURE__ */ e(w, { headerGroup: a, children: /* @__PURE__ */ e(p, { items: r.getState().columnOrder, strategy: u, children: a.headers.map((o, m) => /* @__PURE__ */ e(K, { header: o }, m)) }) }, l))) }),
+        (i.tableLayout?.stripped || !i.tableLayout?.rowBorder) && /* @__PURE__ */ e(C, {}),
+        /* @__PURE__ */ e(x, { children: i.loadingMode === "skeleton" && d && n?.pageSize ? Array.from({ length: n.pageSize }).map((a, l) => /* @__PURE__ */ e(z, { children: r.getVisibleFlatColumns().map((o, m) => /* @__PURE__ */ e(B, { column: o, children: o.columnDef.meta?.skeleton }, m)) }, l)) : r.getRowModel().rows.length ? r.getRowModel().rows.map((a, l) => /* @__PURE__ */ g(y, { children: [
+          /* @__PURE__ */ e(v, { row: a, children: a.getVisibleCells().map((o) => /* @__PURE__ */ e(
+            p,
+            {
+              items: r.getState().columnOrder,
+              strategy: u,
+              children: /* @__PURE__ */ e(_, { cell: o })
+            },
+            o.id
+          )) }, l),
+          a.getIsExpanded() && /* @__PURE__ */ e(H, { row: a })
+        ] }, a.id)) : /* @__PURE__ */ e(N, {}) })
+      ] }) })
+    }
+  );
+}
+export {
+  re as DataGridTableDnd
+};

package/dist/kit/components/data-display/data-grid/data-grid-table.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Cell, Column, Header, HeaderGroup, Row } from '@tanstack/react-table';
+import * as React from 'react';
+declare function DataGridTableBase({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableHead({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableHeadRow<TData>({ children, headerGroup, }: {
+    children: ReactNode;
+    headerGroup: HeaderGroup<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableHeadRowCell<TData>({ children, header, dndRef, dndStyle, }: {
+    children: ReactNode;
+    header: Header<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableHeadRowCellResize<TData>({ header }: {
+    header: Header<TData, unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableRowSpacer(): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBodyRowSkeleton({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBodyRowSkeletonCell<TData>({ children, column }: {
+    children: ReactNode;
+    column: Column<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBodyRow<TData>({ children, row, dndRef, dndStyle, }: {
+    children: ReactNode;
+    row: Row<TData>;
+    dndRef?: React.Ref<HTMLTableRowElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBodyRowExpandded<TData>({ row }: {
+    row: Row<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableBodyRowCell<TData>({ children, cell, dndRef, dndStyle, }: {
+    children: ReactNode;
+    cell: Cell<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableEmpty(): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableLoader(): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableRowSelect<TData>({ row, size }: {
+    row: Row<TData>;
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableRowSelectAll({ size }: {
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTable<TData>(): import("react/jsx-runtime").JSX.Element;
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, };