@konstructio/ui 0.1.2-alpha.62 → 0.1.2-alpha.63

package/dist/chevron-left-BHBf-gQY.js

@@ -0,0 +1,5 @@
+import { c as e } from "./createLucideIcon-CP-mMPfa.js";
+const o = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], t = e("chevron-left", o);
+export {
+  t as C
+};

package/dist/chevron-right-DvXGOiS_.js

@@ -0,0 +1,5 @@
+import { c as o } from "./createLucideIcon-CP-mMPfa.js";
+const t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], e = o("chevron-right", t);
+export {
+  e as C
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/NavigationButton/NavigationButton.js

@@ -1,12 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { cn as e } from "../../../../../../utils/index.js";
-import { calendarNavButtonDisabledVariants as p, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
-import { C as v, a as N } from "../../../../../../chevron-right-SUh6si0f.js";
+import { calendarNavButtonDisabledVariants as h, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
+import { C as v } from "../../../../../../chevron-left-BHBf-gQY.js";
+import { C as N } from "../../../../../../chevron-right-DvXGOiS_.js";
 const B = ({
   direction: n,
-  onClick: s,
-  disabled: i = !1,
-  isAnimating: r = !1,
+  onClick: r,
+  disabled: s = !1,
+  isAnimating: i = !1,
   canNavigate: t = !0,
   hideWhenDisabled: l = !1,
   className: m,
@@ -14,23 +15,23 @@ const B = ({
   ariaLabel: u,
   size: c = "medium"
 }) => {
-  const a = i || r || !t;
+  const o = s || i || !t;
   if (l && !t)
     return null;
-  const f = n === "prev" ? v : N, h = c === "small" ? "w-4 h-4" : "w-5 h-5";
-  return /* @__PURE__ */ o(
+  const f = n === "prev" ? v : N, p = c === "small" ? "w-4 h-4" : "w-5 h-5";
+  return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
-      onClick: s,
-      disabled: a,
+      onClick: r,
+      disabled: o,
       className: e(
         b(),
         m,
-        a && e(p(), d)
+        o && e(h(), d)
       ),
       "aria-label": u,
-      children: /* @__PURE__ */ o(f, { className: h })
+      children: /* @__PURE__ */ a(f, { className: p })
     }
   );
 };

package/dist/components/Datepicker/DatePicker.js

@@ -4,19 +4,20 @@ import { cn as t } from "../../utils/index.js";
 import { datePickerVariants as p } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
 import { D as k } from "../../DayPicker-PUEUVAST.js";
-import { C as g, a as w } from "../../chevron-right-SUh6si0f.js";
+import { C as g } from "../../chevron-left-BHBf-gQY.js";
+import { C as w } from "../../chevron-right-DvXGOiS_.js";
 const y = ({
   className: l,
   showOutsideDays: n = !0,
   animate: d = !0,
   arrowClassName: s,
   monthsClassName: i,
-  defaultSelected: u,
+  defaultSelected: m,
   onSelect: o,
-  ...m
+  ...u
 }) => {
   const [c, x] = h(
-    () => u
+    () => m
   ), b = f(
     (e) => {
       e && (x(e), o?.(e));
@@ -129,7 +130,7 @@ const y = ({
       components: {
         Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(g, { className: t(e), ...r }) : /* @__PURE__ */ a(w, { className: t(e), ...r })
       },
-      ...m
+      ...u
     }
   );
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,15 +1,15 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as I } from "react";
+import { useMemo as G } from "react";
 import { cn as c } from "../../utils/index.js";
-import { TableProvider as K } from "./contexts/table.provider.js";
-import { Filter as M } from "./components/Filter/Filter.js";
-import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
-import { Header as g } from "./components/Header/Header.js";
-import { Body as q } from "./components/Body/Body.js";
-import { Pagination as C } from "./components/Pagination/Pagination.js";
-import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
-import { Actions as G } from "./components/Actions/Actions.js";
-const J = ({
+import { TableProvider as J } from "./contexts/table.provider.js";
+import { Filter as O } from "./components/Filter/Filter.js";
+import { WrapperBody as Q } from "./components/WrapperBody/WrapperBody.js";
+import { Header as R } from "./components/Header/Header.js";
+import { Body as S } from "./components/Body/Body.js";
+import { Pagination as U } from "./components/Pagination/Pagination.js";
+import { TruncateText as X } from "./components/TruncateText/TruncateText.js";
+import { Actions as Y } from "./components/Actions/Actions.js";
+const Z = ({
   id: n,
   ariaLabel: p,
   columns: d,
@@ -38,9 +38,18 @@ const J = ({
   multiSelectFilter: w,
   filterActions: P,
   showResetButton: E = !0,
-  resetButtonClassName: H
+  resetButtonClassName: H,
+  // Expandable rows
+  enableExpandedRow: I,
+  expandedState: K,
+  defaultExpanded: M,
+  classNameExpandedRow: W,
+  classNameExpandedCell: g,
+  classNameExpandedContent: q,
+  classNameExpandedHeader: C,
+  onExpandedChange: F
 }) => {
-  const e = I(
+  const e = G(
     () => B || [
       t,
       i,
@@ -50,7 +59,7 @@ const J = ({
     []
   );
   return /* @__PURE__ */ r(
-    K,
+    J,
     {
       id: n,
       columns: d,
@@ -59,9 +68,17 @@ const J = ({
       totalItems: u,
       queryOptions: z,
       isPaginationEnabled: e,
+      enableExpandedRow: I,
+      expandedState: K,
+      onExpandedChange: F,
+      defaultExpanded: M,
+      classNameExpandedRow: W,
+      classNameExpandedCell: g,
+      classNameExpandedContent: q,
+      classNameExpandedHeader: C,
       children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
         j && /* @__PURE__ */ r(
-          M,
+          O,
           {
             actions: P,
             multiSelectFilter: w,
@@ -72,7 +89,7 @@ const J = ({
           }
         ),
         /* @__PURE__ */ r(
-          W,
+          Q,
           {
             showPagination: e,
             classNameWrapperTable: y,
@@ -88,21 +105,21 @@ const J = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    g,
+                    R,
                     {
                       className: x,
                       classNameArrows: N,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(q, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(S, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          C,
+          U,
           {
             showTotalItems: t,
             showDropdownPagination: i,
@@ -115,11 +132,11 @@ const J = ({
       ] })
     }
   );
-}, o = J;
+}, o = Z;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = F;
-o.Actions = G;
+o.TruncateText = X;
+o.Actions = Y;
 export {
-  F as TruncateText,
+  X as TruncateText,
   o as VirtualizedTable
 };

package/dist/components/VirtualizedTable/VirtualizedTable.types.d.ts

@@ -1,5 +1,6 @@
-import { ColumnDef as ColumnDefPrimitive, RowData as RowDataPrimitive } from '@tanstack/react-table';
+import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 import { virtualizeTableVariants } from './VirtualizedTable.variants';
 import { FilterAction, Option } from './components/Filter/Filter.types';
 import { UseQueryOptions } from '@tanstack/react-query';
@@ -16,6 +17,7 @@ declare module '@tanstack/react-table' {
 export interface RowMetadata {
     className?: string;
     attributes?: Record<string, string | number | boolean>;
+    expandedRow?: ReactNode;
     [key: string]: unknown;
 }
 export type RowDataWithMeta = Record<string, unknown> & {
@@ -105,4 +107,22 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: FilterAction[];
     showResetButton?: never;
     resetButtonClassName?: never;
+}) & ({
+    enableExpandedRow: true;
+    expandedState?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    classNameExpandedRow?: string;
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedHeader?: string;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+} | {
+    enableExpandedRow?: false | undefined;
+    expandedState?: never;
+    defaultExpanded?: never;
+    classNameExpandedRow?: never;
+    classNameExpandedCell?: never;
+    classNameExpandedContent?: never;
+    classNameExpandedHeader?: never;
+    onExpandedChange?: never;
 });

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,77 +1,99 @@
-import { jsx as r } from "react/jsx-runtime";
-import { f as N } from "../../../../index-CSWGJT-v.js";
-import { Skeleton as h } from "../Skeleton/Skeleton.js";
-import { cn as s } from "../../../../utils/index.js";
-import { useTableContext as y } from "../../contexts/table.hook.js";
-const S = ({
-  isLoading: f,
-  showPagination: t
+import { jsx as t, jsxs as D } from "react/jsx-runtime";
+import { f as F } from "../../../../index-CSWGJT-v.js";
+import { Fragment as S } from "react";
+import { Skeleton as j } from "../Skeleton/Skeleton.js";
+import { cn as l } from "../../../../utils/index.js";
+import { ExpandableRow as M } from "../ExpandableRow/ExpandableRow.js";
+import { useTableContext as v } from "../../contexts/table.hook.js";
+const A = ({
+  isLoading: p,
+  showPagination: a
 }) => {
-  const { table: o, pageSize: i, tableFetching: p } = y();
-  if (f || p)
-    return /* @__PURE__ */ r(h, { numberOfRows: i, table: o });
-  const a = o.getRowModel().rows ?? [];
-  return /* @__PURE__ */ r(
+  const {
+    table: n,
+    pageSize: f,
+    tableFetching: x,
+    enableExpandedRow: g,
+    classNameExpandedRow: u,
+    classNameExpandedCell: h,
+    classNameExpandedContent: N
+  } = v();
+  if (p || x)
+    return /* @__PURE__ */ t(j, { numberOfRows: f, table: n });
+  const d = n.getRowModel().rows ?? [];
+  return /* @__PURE__ */ t(
     "tbody",
     {
-      className: s(
+      className: l(
         "text-slate-800",
         "text-sm",
         "font-normal",
         "relative",
         "dark:border-x"
       ),
-      children: a.map(({ id: l, original: m, getVisibleCells: u }, d) => {
-        const { meta: b = {} } = m, n = u();
-        return /* @__PURE__ */ r(
-          "tr",
-          {
-            className: s(
-              "border-b",
-              "border-b-gray-200",
-              "dark:text-metal-50",
-              "dark:border-b-metal-700",
-              "last:border-b-transparent",
-              "bg-transparent",
-              b.className
-            ),
-            "data-row-id": l,
-            ...b.attributes ?? {},
-            children: n.map(({ id: k, column: e, getContext: g }, c) => {
-              const x = typeof e.columnDef.meta?.className == "function" ? e.columnDef.meta?.className(m) : e.columnDef.meta?.className;
-              return /* @__PURE__ */ r(
-                "td",
-                {
-                  className: s(
-                    "px-4",
-                    "py-1",
-                    "text-sm",
-                    "bg-white",
-                    "dark:bg-metal-900",
-                    "dark:border-t",
-                    "dark:border-metal-700",
-                    "dark:first:border-l",
-                    "dark:last:border-r",
-                    x,
-                    {
-                      "first:rounded-bl-lg": d === a.length - 1 && c === 0 && !t,
-                      "last:rounded-br-lg": d === a.length - 1 && c === n.length - 1 && !t,
-                      "dark:[tr:last-child_&]:border-b": !t
-                    }
-                  ),
-                  ...e.columnDef.meta?.attributes ?? {},
-                  children: N(e.columnDef.cell, g())
-                },
-                k
-              );
-            })
-          },
-          l
-        );
+      children: d.map((m, c) => {
+        const { id: s, original: b, getVisibleCells: k } = m, { meta: r = {} } = b, o = k(), E = g && m.getIsExpanded(), R = !!r.expandedRow;
+        return /* @__PURE__ */ D(S, { children: [
+          /* @__PURE__ */ t(
+            "tr",
+            {
+              className: l(
+                "border-b",
+                "border-b-gray-200",
+                "dark:text-metal-50",
+                "dark:border-b-metal-700",
+                "bg-transparent",
+                r.className
+              ),
+              "data-row-id": s,
+              ...r.attributes ?? {},
+              children: o.map(({ id: w, column: e, getContext: y }, i) => {
+                const C = typeof e.columnDef.meta?.className == "function" ? e.columnDef.meta?.className(b) : e.columnDef.meta?.className;
+                return /* @__PURE__ */ t(
+                  "td",
+                  {
+                    className: l(
+                      "px-4",
+                      "py-1",
+                      "text-sm",
+                      "bg-white",
+                      "dark:bg-metal-900",
+                      "dark:border-t",
+                      "dark:border-metal-700",
+                      "dark:first:border-l",
+                      "dark:last:border-r",
+                      C,
+                      {
+                        "first:rounded-bl-lg": c === d.length - 1 && i === 0 && !a,
+                        "last:rounded-br-lg": c === d.length - 1 && i === o.length - 1 && !a,
+                        "dark:[tr:last-child_&]:border-b": !a
+                      }
+                    ),
+                    ...e.columnDef.meta?.attributes ?? {},
+                    children: F(e.columnDef.cell, y())
+                  },
+                  w
+                );
+              })
+            }
+          ),
+          R && /* @__PURE__ */ t(
+            M,
+            {
+              classNameExpandedCell: h,
+              classNameExpandedContent: N,
+              classNameExpandedRow: u,
+              colSpan: o.length,
+              id: s,
+              isExpanded: !!E,
+              children: r.expandedRow
+            }
+          )
+        ] }, s);
       })
     }
   );
 };
 export {
-  S as Body
+  A as Body
 };

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,8 +1,9 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
 import { memo as u } from "react";
 import { cn as p } from "../../../../utils/index.js";
-import { C as m, a as g } from "../../../../chevron-right-SUh6si0f.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
+import { C as h } from "../../../../chevron-left-BHBf-gQY.js";
+import { C as f } from "../../../../chevron-right-DvXGOiS_.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
 const l = u(
   ({
     index: t,
@@ -32,7 +33,7 @@ const o = u(
     disabled: e,
     onClick: i
   }) => /* @__PURE__ */ s("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ s("button", { onClick: i, disabled: e, children: /* @__PURE__ */ s(
-    t === "left" ? m : g,
+    t === "left" ? h : f,
     {
       className: p("h-6 w-6 cursor-pointer", {
         "text-blue-600 dark:text-aurora-500": !e,
@@ -42,9 +43,9 @@ const o = u(
   ) }) })
 );
 o.displayName = "KonstructNavigationButton";
-const N = () => {
-  const { totalPages: t, page: e, handlePage: i } = f();
-  return /* @__PURE__ */ h("ul", { className: "flex items-center gap-2", children: [
+const C = () => {
+  const { totalPages: t, page: e, handlePage: i } = g();
+  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ s(
       o,
       {
@@ -164,5 +165,5 @@ const N = () => {
   ] });
 };
 export {
-  N as DotPaginate
+  C as DotPaginate
 };

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ExpandableRow.types';
+export declare const ExpandableRow: FC<Props>;

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as d } from "../../../../utils/index.js";
+const c = ({
+  children: e,
+  classNameExpandedCell: o,
+  classNameExpandedContent: t,
+  classNameExpandedRow: i,
+  colSpan: s,
+  id: l,
+  isExpanded: r
+}) => /* @__PURE__ */ a("tr", { className: d(i), "data-expanded-row-id": l, children: /* @__PURE__ */ a(
+  "td",
+  {
+    colSpan: s,
+    className: d(
+      "bg-white p-0 dark:bg-metal-900 dark:border-x dark:border-t dark:border-b",
+      {
+        "border-t border-b border-gray-200": r,
+        "dark:border-metal-700": r,
+        "dark:border-transparent dark:transition-[border-color] dark:duration-300 dark:ease-in-out": !r
+      }
+    ),
+    children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: d(
+          "grid transition-[grid-template-rows] duration-300 ease-in-out",
+          {
+            "grid-rows-[1fr]": r,
+            "grid-rows-[0fr]": !r
+          },
+          t
+        ),
+        children: /* @__PURE__ */ a("div", { className: "overflow-hidden", children: /* @__PURE__ */ a("div", { className: d("px-4 py-3", o), children: e }) })
+      }
+    )
+  }
+) });
+export {
+  c as ExpandableRow
+};

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.types.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren<{
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedRow?: string;
+    colSpan: number;
+    id: string;
+    isExpanded: boolean;
+}>;

package/dist/components/VirtualizedTable/contexts/table.context.d.ts

@@ -13,6 +13,10 @@ export type ContextType<TData extends RowData = RowData> = {
     multiselectSelected?: Record<string, string[]>;
     totalPages: number;
     isFirstLoad: boolean;
+    enableExpandedRow?: boolean;
+    classNameExpandedRow?: string;
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
     handlePage: (newPage: number) => void;
     onPageSize: (newPageSize: number) => void;
     onSorting: Dispatch<SetStateAction<SortingState>>;

package/dist/components/VirtualizedTable/contexts/table.provider.d.ts

@@ -1,17 +1,3 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { PropsWithChildren } from 'react';
-import { RowData, Props as TableProps } from '../VirtualizedTable.types';
-type Props<TData extends RowData = RowData> = PropsWithChildren & {
-    id: string | string[] | number | number[];
-    data: TData[];
-    columns: ColumnDef<TData, string>[];
-    totalItems: number;
-    queryOptions?: TableProps<TData>['queryOptions'];
-    isPaginationEnabled?: boolean;
-    fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
-        data: TData[];
-        totalItemsCount?: number;
-    }>;
-};
-export declare const TableProvider: <TData extends RowData = RowData>({ children, id, data: defaultData, columns, totalItems, isPaginationEnabled, queryOptions, fetchData, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { RowData } from '../VirtualizedTable.types';
+import { Props } from './table.types';
+export declare const TableProvider: <TData extends RowData = RowData>({ children, classNameExpandedCell, classNameExpandedContent, classNameExpandedRow, classNameExpandedHeader, columns, data: defaultData, defaultExpanded, enableExpandedRow, expandedState, id, isPaginationEnabled, queryOptions, totalItems, fetchData, onExpandedChange, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;