@annatarhe/lake-ui 0.0.28 → 0.0.31

package/dist/hooks/useInViewport.js

@@ -0,0 +1,30 @@
+import { useRef as f, useEffect as i, useCallback as l } from "react";
+function d(r, e = {}) {
+  const s = f(r), t = f(null);
+  return i(() => {
+    s.current = r;
+  }, [r]), l(
+    (n) => {
+      if (t.current && (t.current = null), !n || typeof IntersectionObserver > "u") return;
+      t.current = n;
+      const u = new IntersectionObserver(
+        (o) => {
+          o.forEach((c) => {
+            c.isIntersecting && s.current();
+          });
+        },
+        {
+          rootMargin: e.rootMargin ?? "0px",
+          threshold: e.threshold ?? 0
+        }
+      );
+      return u.observe(n), () => {
+        u.disconnect();
+      };
+    },
+    [e.rootMargin, e.threshold]
+  );
+}
+export {
+  d as default
+};

package/dist/index.js

@@ -1,26 +1,34 @@
-import { default as a } from "./card/index.js";
+import { default as t } from "./card/index.js";
 import { default as r } from "./contribution-wall/index.js";
 import { default as f } from "./form/input-field.js";
 import { default as u } from "./form/multi-select.js";
 import { default as m } from "./form/number-field.js";
 import { default as s } from "./form/select-field.js";
-import { default as n } from "./form/switch-field.js";
-import { default as b } from "./form/textarea-field.js";
-import { default as C } from "./modal/index.js";
-import { default as T } from "./navbar/container.js";
-import { default as N } from "./table/index.js";
-import { default as v } from "./tooltip/index.js";
+import { default as b } from "./form/switch-field.js";
+import { default as T } from "./form/textarea-field.js";
+import { default as c } from "./modal/index.js";
+import { default as M } from "./navbar/container.js";
+import { default as E } from "./table/index.js";
+import { default as N } from "./tooltip/index.js";
+import { default as h } from "./table/table-empty.js";
+import { default as w } from "./table/table-end.js";
+import { default as I } from "./table/table-load-more.js";
+import { default as j } from "./table/table-loading.js";
 export {
-  a as Card,
+  t as Card,
   r as ContributionWall,
   f as InputField,
-  C as Modal,
+  c as Modal,
   u as MultiSelect,
-  T as NavbarContainer,
+  M as NavbarContainer,
   m as NumberField,
   s as SelectField,
-  n as SwitchField,
-  N as Table,
-  b as TextareaField,
-  v as Tooltip
+  b as SwitchField,
+  E as Table,
+  h as TableEmpty,
+  w as TableEnd,
+  I as TableLoadMore,
+  j as TableLoading,
+  T as TextareaField,
+  N as Tooltip
 };

package/dist/src/hooks/useInViewport.d.ts

@@ -0,0 +1,6 @@
+interface UseInViewportOptions {
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+declare function useInViewport(callback: () => void, options?: UseInViewportOptions): (node: HTMLDivElement | null) => (() => void) | undefined;
+export default useInViewport;

package/dist/src/index.d.ts

@@ -3,6 +3,6 @@ import { default as ContributionWall } from './contribution-wall';
 import { InputField, MultiSelect, NumberField, SelectField, SwitchField, TextareaField } from './form';
 import { default as Modal } from './modal';
 import { NavbarContainer } from './navbar';
-import { default as Table } from './table';
+import { default as Table, TableEmpty, TableEnd, TableLoadMore, TableLoading } from './table';
 import { default as Tooltip } from './tooltip';
-export { Card, ContributionWall, InputField, Modal, MultiSelect, NavbarContainer, NumberField, SelectField, SwitchField, Table, TextareaField, Tooltip, };
+export { Card, ContributionWall, InputField, Modal, MultiSelect, NavbarContainer, NumberField, SelectField, SwitchField, Table, TableEmpty, TableEnd, TableLoadMore, TableLoading, TextareaField, Tooltip, };

package/dist/src/table/index.d.ts

@@ -1,22 +1,9 @@
-import { default as React } from 'react';
-interface Column<T> {
-    key: keyof T | string;
-    header: string | React.ReactNode;
-    render?: (value: any, row: T) => React.ReactNode;
-    sortable?: boolean;
-    width?: string;
-    align?: 'left' | 'center' | 'right';
-}
-interface TableProps<T> {
-    data: T[];
-    columns: Column<T>[];
-    className?: string;
-    onSort?: (key: string, direction: 'asc' | 'desc') => void;
-    sortKey?: string;
-    sortDirection?: 'asc' | 'desc';
-    loading?: boolean;
-    emptyMessage?: string;
-    variant?: 'default' | 'bordered' | 'striped';
-}
-declare function Table<T extends Record<string, any>>({ data, columns, className, onSort, sortKey, sortDirection, loading, emptyMessage, variant }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+import { default as TableEmpty } from './table-empty';
+import { default as TableEnd } from './table-end';
+import { default as TableLoadMore } from './table-load-more';
+import { default as TableLoading } from './table-loading';
+import { TableProps } from './types';
+declare function Table<T extends Record<string, any>>({ data, columns, className, onSort, sortKey, sortDirection, loading, emptyMessage, variant, total, hasMore, onLoadMore, loadingMore, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;
+export { TableEmpty, TableEnd, TableLoadMore, TableLoading };
+export type { Column, TableProps } from './types';

package/dist/src/table/index.stories.d.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Table } from './index';
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+}
+declare const meta: Meta<typeof Table<User>>;
+export default meta;
+type Story = StoryObj<typeof Table<User>>;
+export declare const Default: Story;
+export declare const Bordered: Story;
+export declare const Striped: Story;
+export declare const Glass: Story;
+export declare const WithSorting: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const InfiniteScroll: Story;
+export declare const InfiniteScrollEnd: Story;
+export declare const DarkMode: Story;

package/dist/src/table/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/table/table-empty.d.ts

@@ -0,0 +1,3 @@
+import { TableEmptyProps } from './types';
+declare function TableEmpty({ message, className, colSpan, }: TableEmptyProps): import("react/jsx-runtime").JSX.Element;
+export default TableEmpty;

package/dist/src/table/table-end.d.ts

@@ -0,0 +1,3 @@
+import { TableEndProps } from './types';
+declare function TableEnd({ message, className, total }: TableEndProps): import("react/jsx-runtime").JSX.Element;
+export default TableEnd;

package/dist/src/table/table-load-more.d.ts

@@ -0,0 +1,3 @@
+import { TableLoadMoreProps } from './types';
+declare function TableLoadMore({ onLoadMore, loading, className }: TableLoadMoreProps): import("react/jsx-runtime").JSX.Element;
+export default TableLoadMore;

package/dist/src/table/table-loading.d.ts

@@ -0,0 +1,3 @@
+import { TableLoadingProps } from './types';
+declare function TableLoading({ className, colSpan }: TableLoadingProps): import("react/jsx-runtime").JSX.Element;
+export default TableLoading;

package/dist/src/table/types.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export interface Column<T> {
+    key: keyof T | string;
+    header: string | React.ReactNode;
+    render?: (value: any, row: T) => React.ReactNode;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface TableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    className?: string;
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    sortKey?: string;
+    sortDirection?: 'asc' | 'desc';
+    loading?: boolean;
+    emptyMessage?: string | React.ReactNode;
+    variant?: 'default' | 'bordered' | 'striped' | 'glass';
+    total?: number;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+}
+export interface TableLoadingProps {
+    className?: string;
+    colSpan: number;
+}
+export interface TableEmptyProps {
+    message?: string | React.ReactNode;
+    className?: string;
+    colSpan: number;
+}
+export interface TableEndProps {
+    message?: string | React.ReactNode;
+    className?: string;
+    total?: number;
+}
+export interface TableLoadMoreProps {
+    onLoadMore: () => void;
+    loading?: boolean;
+    className?: string;
+}

package/dist/src/tooltip/index.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Tooltip } from './index';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const AllSides: Story;
+export declare const Disabled: Story;
+export declare const NoWrap: Story;
+export declare const WithCustomContent: Story;

package/dist/table/index.js

@@ -1,112 +1,128 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { cn as t } from "../utils/cn.js";
-import { ChevronUp as p, ChevronDown as f } from "lucide-react";
-function C({
-  data: h,
-  columns: g,
-  className: n,
+import { ChevronUp as v, ChevronDown as N } from "lucide-react";
+import T from "./table-empty.js";
+import C from "./table-end.js";
+import j from "./table-load-more.js";
+import E from "./table-loading.js";
+const S = {
+  default: {
+    table: "bg-white dark:bg-gray-900",
+    header: "bg-gray-50 dark:bg-gray-800",
+    row: "hover:bg-gray-50/50 dark:hover:bg-gray-800/50",
+    border: "border-gray-200 dark:border-gray-700"
+  },
+  bordered: {
+    table: "bg-white dark:bg-gray-900 border-2",
+    header: "bg-gray-100 dark:bg-gray-800",
+    row: "hover:bg-gray-50 dark:hover:bg-gray-800/50 border",
+    border: "border-gray-300 dark:border-gray-600"
+  },
+  striped: {
+    table: "bg-white dark:bg-gray-900",
+    header: "bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-850",
+    row: "odd:bg-gray-50/30 even:bg-white hover:bg-blue-50/30 dark:odd:bg-gray-800/30 dark:even:bg-gray-900 dark:hover:bg-gray-700/50",
+    border: "border-gray-200 dark:border-gray-700"
+  },
+  glass: {
+    table: "bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm",
+    header: "bg-white/40 dark:bg-gray-800/40",
+    row: "hover:bg-white/30 dark:hover:bg-gray-700/30",
+    border: "border-white/20 dark:border-gray-700/50"
+  }
+};
+function F({
+  data: g,
+  columns: b,
+  className: p,
   onSort: y,
-  sortKey: s,
-  sortDirection: b,
-  loading: c,
-  emptyMessage: x = "No data available",
-  variant: o = "default"
+  sortKey: o,
+  sortDirection: h,
+  loading: i,
+  emptyMessage: c = "No data available",
+  variant: n = "default",
+  total: m,
+  hasMore: k,
+  onLoadMore: x,
+  loadingMore: f
 }) {
-  const k = (e) => {
-    if (!e.sortable || !y) return;
-    const l = e.key;
-    y(l, s === l && b === "asc" ? "desc" : "asc");
-  }, d = {
-    default: {
-      table: "bg-white dark:bg-gray-900",
-      header: "bg-gray-50 dark:bg-gray-800",
-      row: "hover:bg-gray-50/50 dark:hover:bg-gray-800/50",
-      border: "border-gray-200 dark:border-gray-700"
-    },
-    bordered: {
-      table: "bg-white dark:bg-gray-900 border-2",
-      header: "bg-gray-100 dark:bg-gray-800",
-      row: "hover:bg-gray-50 dark:hover:bg-gray-800/50 border",
-      border: "border-gray-300 dark:border-gray-600"
-    },
-    striped: {
-      table: "bg-white dark:bg-gray-900",
-      header: "bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-850",
-      row: "odd:bg-gray-50/30 even:bg-white hover:bg-blue-50/30 dark:odd:bg-gray-800/30 dark:even:bg-gray-900 dark:hover:bg-gray-700/50",
-      border: "border-gray-200 dark:border-gray-700"
-    }
-  }[o];
-  return /* @__PURE__ */ r("div", { className: t("w-full overflow-x-auto rounded-lg border", d.border, n), children: /* @__PURE__ */ i("table", { className: t("w-full", d.table), children: [
-    /* @__PURE__ */ r("thead", { className: d.header, children: /* @__PURE__ */ r("tr", { children: g.map((e) => /* @__PURE__ */ r(
-      "th",
-      {
-        className: t(
-          "px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300",
-          e.sortable && "cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-700",
-          e.align === "center" && "text-center",
-          e.align === "right" && "text-right",
-          e.width
-        ),
-        style: { width: e.width },
-        onClick: () => k(e),
-        children: /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-          e.header,
-          e.sortable && /* @__PURE__ */ i("span", { className: "ml-1 inline-flex flex-col", children: [
-            /* @__PURE__ */ r(
-              p,
-              {
-                className: t(
-                  "h-3 w-3 -mb-1",
-                  s === e.key && b === "asc" ? "text-blue-500" : "text-gray-400"
-                )
-              }
-            ),
-            /* @__PURE__ */ r(
-              f,
-              {
-                className: t(
-                  "h-3 w-3",
-                  s === e.key && b === "desc" ? "text-blue-500" : "text-gray-400"
-                )
-              }
-            )
+  const w = (r) => {
+    if (!r.sortable || !y) return;
+    const s = r.key;
+    y(s, o === s && h === "asc" ? "desc" : "asc");
+  }, d = S[n];
+  return /* @__PURE__ */ l("div", { className: t("w-full", p), children: [
+    /* @__PURE__ */ e("div", { className: t("overflow-x-auto rounded-lg border", d.border), children: /* @__PURE__ */ l("table", { className: t("w-full", d.table), children: [
+      /* @__PURE__ */ e("thead", { className: d.header, children: /* @__PURE__ */ e("tr", { children: b.map((r) => /* @__PURE__ */ e(
+        "th",
+        {
+          className: t(
+            "px-3 py-2 sm:px-4 sm:py-3 text-left text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300",
+            r.sortable && "cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-700",
+            r.align === "center" && "text-center",
+            r.align === "right" && "text-right",
+            r.width
+          ),
+          style: { width: r.width },
+          onClick: () => w(r),
+          children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+            r.header,
+            r.sortable && /* @__PURE__ */ l("span", { className: "ml-1 inline-flex flex-col", children: [
+              /* @__PURE__ */ e(
+                v,
+                {
+                  className: t(
+                    "h-3 w-3 -mb-1",
+                    o === r.key && h === "asc" ? "text-blue-500" : "text-gray-400 dark:text-gray-600"
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                N,
+                {
+                  className: t(
+                    "h-3 w-3",
+                    o === r.key && h === "desc" ? "text-blue-500" : "text-gray-400 dark:text-gray-600"
+                  )
+                }
+              )
+            ] })
           ] })
-        ] })
-      },
-      e.key
-    )) }) }),
-    /* @__PURE__ */ r("tbody", { children: c ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: g.length, className: "px-4 py-8 text-center", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-500" }) }) }) }) : h.length === 0 ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r(
-      "td",
-      {
-        colSpan: g.length,
-        className: "px-4 py-8 text-center text-gray-500 dark:text-gray-400",
-        children: x
-      }
-    ) }) : h.map((e, l) => /* @__PURE__ */ r(
-      "tr",
-      {
-        className: t(
-          "transition-colors",
-          d.row,
-          o === "bordered" && d.border
-        ),
-        children: g.map((a) => /* @__PURE__ */ r(
-          "td",
-          {
-            className: t(
-              "px-4 py-3 text-sm text-gray-700 dark:text-gray-300",
-              a.align === "center" && "text-center",
-              a.align === "right" && "text-right"
-            ),
-            children: a.render ? a.render(e[a.key], e) : e[a.key]
-          },
-          a.key
-        ))
-      },
-      l
-    )) })
-  ] }) });
+        },
+        r.key
+      )) }) }),
+      /* @__PURE__ */ e("tbody", { children: i ? /* @__PURE__ */ e(E, { colSpan: b.length }) : g.length === 0 ? /* @__PURE__ */ e(T, { colSpan: b.length, message: c }) : g.map((r, s) => /* @__PURE__ */ e(
+        "tr",
+        {
+          className: t(
+            "transition-colors",
+            d.row,
+            n === "bordered" && d.border
+          ),
+          children: b.map((a) => /* @__PURE__ */ e(
+            "td",
+            {
+              className: t(
+                "px-3 py-2 sm:px-4 sm:py-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300",
+                a.align === "center" && "text-center",
+                a.align === "right" && "text-right"
+              ),
+              children: a.render ? a.render(r[a.key], r) : r[a.key]
+            },
+            a.key
+          ))
+        },
+        s
+      )) })
+    ] }) }),
+    !i && g.length > 0 && k && x && /* @__PURE__ */ e(j, { onLoadMore: x, loading: f }),
+    !i && g.length > 0 && k === !1 && /* @__PURE__ */ e(C, { total: m })
+  ] });
 }
 export {
-  C as default
+  T as TableEmpty,
+  C as TableEnd,
+  j as TableLoadMore,
+  E as TableLoading,
+  F as default
 };

package/dist/table/table-empty.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as m } from "../utils/cn.js";
+function n({
+  message: r = "No data available",
+  className: a,
+  colSpan: e
+}) {
+  return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+    "td",
+    {
+      colSpan: e,
+      className: m(
+        "px-3 py-4 sm:px-4 sm:py-8 text-center text-gray-500 dark:text-gray-400",
+        a
+      ),
+      children: r
+    }
+  ) });
+}
+export {
+  n as default
+};

package/dist/table/table-end.js

@@ -0,0 +1,18 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as m } from "../utils/cn.js";
+function n({ message: t, className: r, total: e }) {
+  const a = e != null ? `All ${e} items loaded` : "No more data";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: m(
+        "py-3 sm:py-4 text-center text-xs sm:text-sm text-gray-400 dark:text-gray-500",
+        r
+      ),
+      children: t ?? a
+    }
+  );
+}
+export {
+  n as default
+};

package/dist/table/table-load-more.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as a } from "../utils/cn.js";
+import i from "../hooks/useInViewport.js";
+function l({ onLoadMore: e, loading: o, className: t }) {
+  const n = i(e, { rootMargin: "200px" });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: n,
+      className: a("flex items-center justify-center py-4", t),
+      children: o && /* @__PURE__ */ r("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-gray-300 dark:border-gray-700 border-t-blue-500" })
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/table/table-loading.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as a } from "../utils/cn.js";
+function i({ className: r, colSpan: t }) {
+  return /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: t, className: a("px-3 py-4 sm:px-4 sm:py-8 text-center", r), children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-300 dark:border-gray-700 border-t-blue-500" }) }) }) });
+}
+export {
+  i as default
+};

package/dist/table/types.js

@@ -0,0 +1 @@
+