@orfium/ictinus 5.43.4 → 5.43.6

package/dist/vanilla/index.js

@@ -150,6 +150,8 @@ export { WarningIcon } from './src/icons/WarningIcon.js';
 export { WorkIcon } from './src/icons/WorkIcon.js';
 export { WriterIcon } from './src/icons/WriterIcon.js';
 export { YouTubeIcon } from './src/icons/YouTubeIcon.js';
+export { Skeleton } from './src/skeleton/Skeleton.js';
+export { cn } from './src/utils/cn.js';
 export { Box } from './Box/Box.js';
 export { extractBoxProps } from './Box/extractBoxProps.js';
 export { Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './Dialog/Dialog.js';

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.4";
+var version = "5.43.6";
 
 export { version };

package/dist/vanilla/src/actions/ActionsContent-css.js

@@ -1,10 +1,10 @@
 import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
 import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
-import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-CRlOneec.css';
 import './../../assets/src/actions/ActionsRoot.css.ts.vanilla-B5JvX1-v.css';
 import './../../assets/src/actions/ActionsContent.css.ts.vanilla-BVxWvGVF.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var content = createRuntimeFn({defaultClassName:'_146hxcf4 _146hxcf2g _146hxcf1k gfg8xi0',variantClassNames:{visible:{always:'gfg8xi1','if-needed':'gfg8xi2'}},defaultVariants:{},compoundVariants:[]});
+var content = createRuntimeFn({defaultClassName:'_146hxcf6 _146hxcf2i _146hxcf1m gfg8xi0',variantClassNames:{visible:{always:'gfg8xi1','if-needed':'gfg8xi2'}},defaultVariants:{},compoundVariants:[]});
 
 export { content };

package/dist/vanilla/src/data-table/DataTableBody-css.js

@@ -1,16 +1,16 @@
 import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
 import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
-import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-CRlOneec.css';
 import './../../assets/src/vanilla/Table/TableRow.css.ts.vanilla-B1NNK8v8.css';
 import './../../assets/src/data-table/DataTableBody.css.ts.vanilla-B8JRxzQ8.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var cell = createRuntimeFn({defaultClassName:'_146hxcf1mi _146hxcf0 _146hxcf2g nl338i8',variantClassNames:{pinned:{left:'nl338i9',right:'nl338ia'},resizable:{false:'nl338ib',true:'nl338ic'}},defaultVariants:{},compoundVariants:[]});
+var cell = createRuntimeFn({defaultClassName:'_146hxcf1py _146hxcf2 _146hxcf2i nl338i8',variantClassNames:{pinned:{left:'nl338i9',right:'nl338ia'},resizable:{false:'nl338ib',true:'nl338ic'}},defaultVariants:{},compoundVariants:[]});
 var cellOffsetVar = 'var(--nl338i1)';
 var cellSizeVar = 'var(--nl338i0)';
 var leftTotalSizeVar = 'var(--nl338i2)';
 var rightTotalSizeVar = 'var(--nl338i3)';
-var root = createRuntimeFn({defaultClassName:'_146hxcf1jr _146hxcf1ju _146hxcf1ie _146hxcfhg _146hxcf2g _146hxcfkg nl338i6',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var root = createRuntimeFn({defaultClassName:'_146hxcf1n5 _146hxcf1n8 _146hxcf1ls _146hxcfjq _146hxcf2i _146hxcfnu nl338i6',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
 var totalSizeVar = 'var(--nl338i4)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

package/dist/vanilla/src/data-table/DataTableBody.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { flexRender } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useMemo, useRef, useEffect } from 'react';
 import { useDOMRef } from '../components/utils/useDOMRef.js';
 import { cn } from '../utils/cn.js';
 import { Box } from '../../Box/Box.js';
@@ -17,22 +17,41 @@ import { TableRow } from '../../Table/TableRow.js';
 import { useDataTableContext } from './DataTableContext.js';
 import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 import { DataTableRow } from './DataTableRow.js';
+import { fakeRow } from './DataTableRowContext.js';
 import { cell, cellSizeVar, cellOffsetVar, root, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
+function isTableRow(row) {
+  return "original" in row;
+}
+const COL_VIRTUALIZATION_THRESHOLD = 25;
+const ROW_VIRTUALIZATION_THRESHOLD = 25;
 const DataTableBody = forwardRef(
   ({
     className,
     estimatedRowHeight = 44,
     bordered = false,
     size = "sm",
+    loading,
     style,
     ...props
   }, ref) => {
     const domRef = useDOMRef(ref);
     const { table } = useDataTableContext();
-    const rows = table.getRowModel().rows;
+    const { rows: rawRows } = table.getRowModel();
+    const rows = useMemo(() => {
+      let index = 0;
+      return rawRows.reduce(
+        (result, row) => {
+          result.push(row);
+          index++;
+          if (loading && typeof loading === "object" && loading[row.id] === "sub-rows") {
+            result.push(fakeRow(table, index++), fakeRow(table, index++));
+          }
+          return result;
+        },
+        []
+      );
+    }, [loading, rawRows, table]);
     const previousRowsRef = useRef(rows);
     useEffect(() => {
       previousRowsRef.current = rows;
@@ -128,99 +147,114 @@ const DataTableBody = forwardRef(
                 {
                   display: "grid",
                   style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-                  children: (rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
+                  children: (loading === true ? Array.from({ length: 10 }, (__, rowIndex) => ({
+                    row: fakeRow(table, rowIndex),
+                    virtualRow: void 0
+                  })) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
                     row,
                     virtualRow: void 0
                   })) : virtualRows.map((virtualRow) => ({
                     row: rows[virtualRow.index],
                     virtualRow
-                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
-                    DataTableRow,
-                    {
-                      "data-index": virtualRow?.index,
-                      display: "flex",
-                      index: virtualRow?.index ?? index,
-                      row,
-                      ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                      style: virtualRow ? {
-                        position: "absolute",
-                        transform: `translateY(${virtualRow.start}px)`
-                      } : void 0,
-                      children: [
-                        row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            bordered,
-                            size,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => {
+                    const cellProps = isTableRow(row) ? table.options.meta?.getCellProps?.(row) : void 0;
+                    return /* @__PURE__ */ jsxs(
+                      DataTableRow,
+                      {
+                        "data-index": virtualRow?.index,
+                        display: "flex",
+                        index: virtualRow?.index ?? index,
+                        row,
+                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                        style: virtualRow ? {
+                          position: "absolute",
+                          transform: `translateY(${virtualRow.start}px)`
+                        } : void 0,
+                        children: [
+                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              bordered,
+                              size,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "left",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "left",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                        (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                          const cells = row.getCenterVisibleCells();
-                          return cells[virtualCell.index];
-                        }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            style: {
-                              ...assignInlineVars({
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                            const cells = row.getCenterVisibleCells();
+                            return cells[virtualCell.index];
+                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "right",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "right",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        ))
-                      ]
-                    },
-                    row.id
-                  ))
+                            cell$1.id
+                          ))
+                        ]
+                      },
+                      row.id
+                    );
+                  })
                 }
               )
             ]

package/dist/vanilla/src/data-table/DataTableCounter.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { Skeleton } from '../skeleton/Skeleton.js';
 import { Box } from '../../Box/Box.js';
 import '../sprinkles/sprinkles.js';
 import { Text } from '../../Text/Text.js';
@@ -6,6 +7,7 @@ import { useDataTableContext } from './DataTableContext.js';
 
 function DataTableCounter({
   count: countProp,
+  loading = false,
   singular = "item",
   plural = "items",
   ...props
@@ -16,10 +18,10 @@ function DataTableCounter({
   const hasSelection = selectedCount > 0;
   const count = hasSelection ? selectedCount : totalCount;
   const label = count === 1 ? singular : plural;
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children: [
+  return /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: "20" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Text, { typography: "label02", color: "active", children: count.toLocaleString() }),
     /* @__PURE__ */ jsx(Text, { typography: "label02", children: hasSelection ? `${label} selected` : label })
-  ] });
+  ] }) });
 }
 
 export { DataTableCounter };

package/dist/vanilla/src/data-table/DataTableHeaderCell-css.js

@@ -1,14 +1,14 @@
 import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
 import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
-import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-CRlOneec.css';
 import './../../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-2yw_MsU1.css';
 import './../../assets/src/vanilla/Table/TableRow.css.ts.vanilla-B1NNK8v8.css';
 import './../../assets/src/vanilla/Table/TableHeaderCell.css.ts.vanilla-CZtubUTB.css';
 import './../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-B2HJ86a7.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var handle = createRuntimeFn({defaultClassName:'_146hxcf94 _146hxcf1w2 _16lgdksa',variantClassNames:{resizing:{false:'_16lgdksc',true:'_146hxcf1we'}},defaultVariants:{},compoundVariants:[]});
-createRuntimeFn({defaultClassName:'_146hxcf7w _146hxcfw0 _146hxcfyk _16lgdks4',variantClassNames:{active:{false:'_16lgdks5',true:'_16lgdks6'}},defaultVariants:{},compoundVariants:[]});
+var handle = createRuntimeFn({defaultClassName:'_146hxcf9q _146hxcf1zi _16lgdksa',variantClassNames:{resizing:{false:'_16lgdksc',true:'_146hxcf1zu'}},defaultVariants:{},compoundVariants:[]});
+createRuntimeFn({defaultClassName:'_146hxcf8i _146hxcfze _146hxcf11y _16lgdks4',variantClassNames:{active:{false:'_16lgdks5',true:'_16lgdks6'}},defaultVariants:{},compoundVariants:[]});
 var label = createRuntimeFn({defaultClassName:'_16lgdks0',variantClassNames:{sortDir:{false:'_16lgdks2',true:'_16lgdks3'}},defaultVariants:{},compoundVariants:[]});
 
 export { handle, label };

package/dist/vanilla/src/data-table/DataTableRowContext.js

@@ -1,4 +1,5 @@
-import { createContext, useContext } from 'react';
+import { createContext, createElement, useContext } from 'react';
+import { Skeleton } from '../skeleton/Skeleton.js';
 
 const DataTableRowContext = createContext({
   actions: [],
@@ -18,5 +19,31 @@ function useDataTableRowContext() {
   }
   return context;
 }
+const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
+  column: {
+    ...column,
+    columnDef: {
+      ...column.columnDef,
+      cell: () => createElement(Skeleton, {
+        w: ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+      })
+    }
+  },
+  getContext: () => ({}),
+  id: column.id
+}));
+const fakeRow = (table, rowIndex) => ({
+  getCanMultiSelect: () => false,
+  getCanSelect: () => false,
+  getCenterVisibleCells: fakeCellsFactory(table.getCenterVisibleLeafColumns(), rowIndex),
+  getIsSelected: () => false,
+  getLeftVisibleCells: fakeCellsFactory(table.getLeftVisibleLeafColumns(), rowIndex),
+  getRightVisibleCells: fakeCellsFactory(table.getRightVisibleLeafColumns(), rowIndex),
+  getToggleSelectedHandler: () => (__event) => {
+  },
+  id: "loading" + rowIndex,
+  toggleSelected: (__value) => {
+  }
+});
 
-export { DataTableRowProvider, useDataTableRowContext };
+export { DataTableRowProvider, fakeRow, useDataTableRowContext };

package/dist/vanilla/src/skeleton/Skeleton-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-CRlOneec.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-CNzX69JK.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var skeleton = createRuntimeFn({defaultClassName:'_146hxcf1q2 _146hxcf1p9 _146hxcf26m _146hxcf2e _1dxg85w0',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+
+export { skeleton };

package/dist/vanilla/src/skeleton/Skeleton.js

@@ -0,0 +1,26 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { cn } from '../utils/cn.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { skeleton } from './Skeleton-css.js';
+
+const Slot = createSlot("@orfium/ictinus/Skeleton");
+const Skeleton = forwardRef(
+  ({ asChild = true, children, circle, className, rounded = "2", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild,
+        rounded: circle || rounded === "7" ? "7" : rounded,
+        className: cn(skeleton({}), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Slot, { ref, children: children ?? /* @__PURE__ */ jsx("span", {}) })
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };