@versini/ui-datagrid 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,294 @@
+# @versini/ui-datagrid
+
+A high-performance data grid component library for React with support for:
+
+- **Virtualization**: Efficiently render thousands of rows using TanStack Virtual
+- **Infinite Scrolling**: Progressive loading with IntersectionObserver
+- **Animated Height**: Smooth height transitions when content changes
+- **Sorting**: Built-in sorting utilities and sortable column headers
+- **Sticky Header/Footer**: With optional blur effects
+- **Loading States**: Built-in loading overlay with spinner
+
+## Installation
+
+```bash
+npm install @versini/ui-datagrid
+```
+
+## Entry Points
+
+Import only what you need for optimal bundle size:
+
+```tsx
+// Core data grid
+import { DataGrid } from "@versini/ui-datagrid/datagrid";
+
+// Header, Body, Footer
+import { DataGridHeader } from "@versini/ui-datagrid/header";
+import { DataGridBody } from "@versini/ui-datagrid/body";
+import { DataGridFooter } from "@versini/ui-datagrid/footer";
+
+// Row and Cell
+import { DataGridRow } from "@versini/ui-datagrid/row";
+import { DataGridCell } from "@versini/ui-datagrid/cell";
+import { DataGridCellSort } from "@versini/ui-datagrid/cell-sort";
+
+// Infinite scroll (progressive loading)
+import {
+  useInfiniteScroll,
+  InfiniteScrollMarker
+} from "@versini/ui-datagrid/infinite";
+
+// True virtualization for large datasets
+import {
+  VirtualDataGrid,
+  useVirtualDataGrid
+} from "@versini/ui-datagrid/virtual";
+
+// Animated height wrapper
+import {
+  AnimatedWrapper,
+  useAnimatedHeight
+} from "@versini/ui-datagrid/animated";
+
+// Sorting utilities
+import {
+  sortByDate,
+  sortByNumber,
+  sortByString,
+  sortByBoolean,
+  sortItems,
+  getNextSortConfig,
+  getOppositeSortDirection,
+  toggleSortDirection,
+  SortDirections
+} from "@versini/ui-datagrid/sorting";
+
+// Constants
+import {
+  SortDirections,
+  BlurEffects,
+  ThemeModes,
+  CellWrapper
+} from "@versini/ui-datagrid/constants";
+```
+
+## Basic Usage
+
+```tsx
+import { DataGrid } from "@versini/ui-datagrid/datagrid";
+import { DataGridHeader } from "@versini/ui-datagrid/header";
+import { DataGridBody } from "@versini/ui-datagrid/body";
+import { DataGridRow } from "@versini/ui-datagrid/row";
+import { DataGridCell } from "@versini/ui-datagrid/cell";
+
+function MyTable({ data }) {
+  return (
+    <DataGrid maxHeight="400px" stickyHeader>
+      <DataGridHeader>
+        <DataGridRow>
+          <DataGridCell>Name</DataGridCell>
+          <DataGridCell>Email</DataGridCell>
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {data.map((item) => (
+          <DataGridRow key={item.id}>
+            <DataGridCell>{item.name}</DataGridCell>
+            <DataGridCell>{item.email}</DataGridCell>
+          </DataGridRow>
+        ))}
+      </DataGridBody>
+    </DataGrid>
+  );
+}
+```
+
+## Infinite Scroll
+
+For datasets with hundreds to thousands of rows, use progressive loading:
+
+```tsx
+import { DataGrid } from "@versini/ui-datagrid/datagrid";
+import { DataGridHeader } from "@versini/ui-datagrid/header";
+import { DataGridBody } from "@versini/ui-datagrid/body";
+import { DataGridRow } from "@versini/ui-datagrid/row";
+import { DataGridCell } from "@versini/ui-datagrid/cell";
+import {
+  useInfiniteScroll,
+  InfiniteScrollMarker
+} from "@versini/ui-datagrid/infinite";
+import { AnimatedWrapper } from "@versini/ui-datagrid/animated";
+
+function MyInfiniteTable({ data }) {
+  const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
+    totalItems: data.length,
+    batchSize: 25
+  });
+
+  const visibleData = data.slice(0, visibleCount);
+
+  return (
+    <AnimatedWrapper dependency={visibleCount}>
+      <DataGrid maxHeight="500px" stickyHeader>
+        <DataGridHeader>
+          <DataGridRow>
+            <DataGridCell>Name</DataGridCell>
+            <DataGridCell>Date</DataGridCell>
+          </DataGridRow>
+        </DataGridHeader>
+        <DataGridBody>
+          {visibleData.map((item) => (
+            <DataGridRow key={item.id}>
+              <DataGridCell>{item.name}</DataGridCell>
+              <DataGridCell>{item.date}</DataGridCell>
+            </DataGridRow>
+          ))}
+          {hasMore && <InfiniteScrollMarker ref={markerRef} colSpan={2} />}
+        </DataGridBody>
+      </DataGrid>
+    </AnimatedWrapper>
+  );
+}
+```
+
+## Virtualization for Large Datasets
+
+For datasets with 1000+ rows, use true virtualization:
+
+```tsx
+import { VirtualDataGrid } from "@versini/ui-datagrid/virtual";
+
+function MyVirtualTable({ data }) {
+  return (
+    <VirtualDataGrid
+      data={data}
+      height="500px"
+      columns={[
+        { id: "name", header: "Name", cell: (item) => item.name },
+        { id: "email", header: "Email", cell: (item) => item.email },
+        { id: "date", header: "Date", cell: (item) => formatDate(item.date) }
+      ]}
+      getRowKey={(item) => item.id}
+      estimateSize={48}
+      overscan={10}
+    />
+  );
+}
+```
+
+## Sorting
+
+```tsx
+import { useState, useMemo } from "react";
+import { DataGrid } from "@versini/ui-datagrid/datagrid";
+import { DataGridHeader } from "@versini/ui-datagrid/header";
+import { DataGridBody } from "@versini/ui-datagrid/body";
+import { DataGridRow } from "@versini/ui-datagrid/row";
+import { DataGridCell } from "@versini/ui-datagrid/cell";
+import { DataGridCellSort } from "@versini/ui-datagrid/cell-sort";
+import {
+  sortItems,
+  getNextSortConfig,
+  SortDirections
+} from "@versini/ui-datagrid/sorting";
+
+function MySortableTable({ data }) {
+  const [sortConfig, setSortConfig] = useState({
+    sortedCell: "name",
+    sortDirection: SortDirections.ASC
+  });
+
+  const sortedData = useMemo(() => {
+    return sortItems(
+      data,
+      sortConfig.sortedCell,
+      sortConfig.sortDirection,
+      "string"
+    );
+  }, [data, sortConfig]);
+
+  const handleSort = (cellId) => {
+    setSortConfig(getNextSortConfig(sortConfig, cellId));
+  };
+
+  return (
+    <DataGrid>
+      <DataGridHeader>
+        <DataGridRow>
+          <DataGridCellSort
+            cellId="name"
+            onSort={handleSort}
+            sortDirection={
+              sortConfig.sortedCell === "name"
+                ? sortConfig.sortDirection
+                : false
+            }
+            sortedCell={sortConfig.sortedCell}
+          >
+            Name
+          </DataGridCellSort>
+          <DataGridCellSort
+            cellId="date"
+            onSort={handleSort}
+            sortDirection={
+              sortConfig.sortedCell === "date"
+                ? sortConfig.sortDirection
+                : false
+            }
+            sortedCell={sortConfig.sortedCell}
+          >
+            Date
+          </DataGridCellSort>
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {sortedData.map((item) => (
+          <DataGridRow key={item.id}>
+            <DataGridCell>{item.name}</DataGridCell>
+            <DataGridCell>{item.date}</DataGridCell>
+          </DataGridRow>
+        ))}
+      </DataGridBody>
+    </DataGrid>
+  );
+}
+```
+
+## Props
+
+### DataGrid
+
+| Prop           | Type                                            | Default    | Description                        |
+| -------------- | ----------------------------------------------- | ---------- | ---------------------------------- |
+| `mode`         | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode                         |
+| `compact`      | `boolean`                                       | `false`    | Reduced padding                    |
+| `stickyHeader` | `boolean`                                       | `false`    | Fixed header while scrolling       |
+| `stickyFooter` | `boolean`                                       | `false`    | Fixed footer while scrolling       |
+| `blurEffect`   | `'none' \| 'small' \| 'medium' \| 'large'`      | `'none'`   | Blur intensity for sticky elements |
+| `maxHeight`    | `string`                                        | -          | Max height (required for sticky)   |
+| `disabled`     | `boolean`                                       | `false`    | Show loading overlay               |
+| `caption`      | `ReactNode`                                     | -          | Table caption for accessibility    |
+
+### useInfiniteScroll
+
+| Option       | Type     | Default      | Description                      |
+| ------------ | -------- | ------------ | -------------------------------- |
+| `totalItems` | `number` | **required** | Total number of items            |
+| `batchSize`  | `number` | `20`         | Items to load per batch          |
+| `threshold`  | `number` | `5`          | Items before end to trigger load |
+| `rootMargin` | `string` | `'20px'`     | IntersectionObserver margin      |
+
+### VirtualDataGrid
+
+| Prop           | Type                         | Default      | Description                     |
+| -------------- | ---------------------------- | ------------ | ------------------------------- |
+| `data`         | `T[]`                        | **required** | Array of data items             |
+| `columns`      | `VirtualDataGridColumn<T>[]` | **required** | Column definitions              |
+| `height`       | `string \| number`           | **required** | Container height                |
+| `estimateSize` | `number`                     | `40`         | Estimated row height            |
+| `overscan`     | `number`                     | `5`          | Rows to render outside viewport |
+
+## License
+
+MIT

package/dist/DataGrid/DataGrid.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridProps } from "./DataGridTypes";
+export declare const DataGrid: ({ caption, className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, disabled, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGrid/DataGrid.js

@@ -0,0 +1,132 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
+import { DataGridContext } from "./DataGridContext.js";
+import { getDataGridClasses } from "./utilities.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
+
+;// CONCATENATED MODULE: external "./DataGridContext.js"
+
+;// CONCATENATED MODULE: external "./utilities.js"
+
+;// CONCATENATED MODULE: ./src/DataGrid/DataGrid.tsx
+
+
+
+
+
+/* =============================================================================
+ * DataGrid (main component)
+ * ========================================================================== */ const DataGrid = ({ caption, className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, disabled = false, ...rest })=>{
+    const captionId = useId();
+    const classes = useMemo(()=>getDataGridClasses({
+            mode,
+            className,
+            wrapperClassName,
+            stickyHeader,
+            stickyFooter,
+            disabled
+        }), [
+        mode,
+        className,
+        wrapperClassName,
+        stickyHeader,
+        stickyFooter,
+        disabled
+    ]);
+    const contextValue = useMemo(()=>({
+            mode,
+            compact,
+            stickyHeader,
+            stickyFooter,
+            blurEffect,
+            disabled
+        }), [
+        mode,
+        compact,
+        stickyHeader,
+        stickyFooter,
+        blurEffect,
+        disabled
+    ]);
+    const wrapperStyle = maxHeight ? {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+    } : undefined;
+    /**
+	 * When sticky header/footer is enabled, use Panel-like structure: - Outer
+	 * wrapper has overflow-hidden - Scrollable content area in the middle with
+	 * padding - Header/footer are absolutely positioned.
+	 */ const hasSticky = stickyHeader || stickyFooter;
+    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classes.inner,
+            children: [
+                disabled && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.overlay,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.spinnerWrapper,
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: classes.spinner,
+                                role: "status",
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "sr-only",
+                                    children: "Loading..."
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classes.wrapper,
+                    style: wrapperStyle,
+                    children: hasSticky ? /*#__PURE__*/ jsx("div", {
+                        className: classes.scrollableContent,
+                        style: wrapperStyle,
+                        children: /*#__PURE__*/ jsxs("table", {
+                            className: classes.table,
+                            "aria-describedby": caption ? captionId : undefined,
+                            ...rest,
+                            children: [
+                                caption && /*#__PURE__*/ jsx("caption", {
+                                    id: captionId,
+                                    className: classes.caption,
+                                    children: caption
+                                }),
+                                children
+                            ]
+                        })
+                    }) : /*#__PURE__*/ jsxs("table", {
+                        className: classes.table,
+                        "aria-describedby": caption ? captionId : undefined,
+                        ...rest,
+                        children: [
+                            caption && /*#__PURE__*/ jsx("caption", {
+                                id: captionId,
+                                className: classes.caption,
+                                children: caption
+                            }),
+                            children
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { DataGrid };

package/dist/DataGrid/DataGridContext.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridContextValue } from "./DataGridTypes";
+export declare const DataGridContext: import("react").Context<DataGridContextValue>;

package/dist/DataGrid/DataGridContext.js

@@ -0,0 +1,16 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { createContext } from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/DataGrid/DataGridContext.ts
+
+const DataGridContext = createContext({
+    mode: "system"
+});
+
+export { DataGridContext };

package/dist/DataGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from "./DataGrid";
+export { DataGridContext } from "./DataGridContext";

package/dist/DataGrid/index.js

@@ -0,0 +1,17 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { DataGrid } from "./DataGrid.js";
+import { DataGridContext } from "./DataGridContext.js";
+
+;// CONCATENATED MODULE: external "./DataGrid.js"
+
+;// CONCATENATED MODULE: external "./DataGridContext.js"
+
+;// CONCATENATED MODULE: ./src/DataGrid/index.ts
+
+
+
+export { DataGrid, DataGridContext };

package/dist/DataGrid/utilities.d.ts

@@ -0,0 +1,36 @@
+import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
+/**
+ * Common classes for sticky header/footer with optional blur effect.
+ */
+export declare const getStickyBlurClasses: ({ blurEffect, }: {
+    blurEffect?: BlurEffect;
+}) => string;
+/**
+ * Generates classes for the main DataGrid wrapper and table. When sticky
+ * header/footer is enabled, uses the Panel-like approach:
+ * - Outer wrapper has overflow-hidden
+ * - Scrollable area is a separate inner container
+ * - Header/footer are absolutely positioned overlays
+ */
+export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, }: {
+    mode: ThemeMode;
+    className?: string;
+    disabled?: boolean;
+    stickyFooter?: boolean;
+    stickyHeader?: boolean;
+    wrapperClassName?: string;
+}) => {
+    overlay: string;
+    inner: string;
+    spinnerWrapper: string;
+    spinner: string;
+    wrapper: string;
+    /**
+     * Scrollable content area - like Panel's scrollableContent Has padding to
+     * make room for absolutely positioned header/footer rounded-[inherit] clips
+     * the scrollbar at the rounded corners.
+     */
+    scrollableContent: string;
+    table: string;
+    caption: string;
+};

package/dist/DataGrid/utilities.js

@@ -0,0 +1,99 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import clsx from "clsx";
+import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
+
+;// CONCATENATED MODULE: ./src/DataGrid/utilities.ts
+
+
+/**
+ * Generates classes for the loading spinner.
+ */ const getSpinnerClasses = ({ mode })=>{
+    return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
+        "text-copy-dark": mode === "light",
+        "text-copy-light": mode === "dark",
+        "text-copy-dark dark:text-copy-light": mode === "alt-system",
+        "text-copy-light dark:text-copy-dark": mode === "system"
+    });
+};
+/**
+ * Generates classes for the loading overlay.
+ */ const getOverlayClasses = ({ mode })=>{
+    return {
+        inner: "relative",
+        overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
+        spinnerWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
+        spinner: getSpinnerClasses({
+            mode
+        })
+    };
+};
+/**
+ * Common classes for sticky header/footer with optional blur effect.
+ */ const getStickyBlurClasses = ({ blurEffect })=>{
+    return clsx({
+        "backdrop-blur-sm": blurEffect === BlurEffects.SMALL,
+        "backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
+        "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
+    });
+};
+/**
+ * Generates classes for the main DataGrid wrapper and table. When sticky
+ * header/footer is enabled, uses the Panel-like approach:
+ * - Outer wrapper has overflow-hidden
+ * - Scrollable area is a separate inner container
+ * - Header/footer are absolutely positioned overlays
+ */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled })=>{
+    const overlayClasses = disabled ? getOverlayClasses({
+        mode
+    }) : null;
+    const hasSticky = stickyHeader || stickyFooter;
+    return {
+        overlay: overlayClasses?.overlay ?? "",
+        inner: overlayClasses?.inner ?? "",
+        spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
+        spinner: overlayClasses?.spinner ?? "",
+        // Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
+        wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
+            "overflow-x-auto": !hasSticky && !disabled,
+            "overflow-hidden": hasSticky || disabled,
+            "bg-surface-darker": mode === "dark" || mode === "system",
+            "bg-surface-light": mode === "light" || mode === "alt-system",
+            "dark:bg-surface-light": mode === "system",
+            "dark:bg-surface-darker": mode === "alt-system",
+            "text-copy-light": mode === "dark",
+            "text-copy-dark": mode === "light",
+            "text-copy-light dark:text-copy-dark": mode === "system",
+            "text-copy-dark dark:text-copy-light": mode === "alt-system"
+        }, wrapperClassName),
+        /**
+		 * Scrollable content area - like Panel's scrollableContent Has padding to
+		 * make room for absolutely positioned header/footer rounded-[inherit] clips
+		 * the scrollbar at the rounded corners.
+		 */ scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit]", {
+            "pt-10": stickyHeader,
+            "pb-10": stickyFooter
+        }),
+        table: clsx("my-0 w-full text-left text-sm", className, {
+            "text-copy-light": mode === "dark",
+            "text-copy-dark": mode === "light",
+            "text-copy-light dark:text-copy-dark": mode === "system",
+            "text-copy-dark dark:text-copy-light": mode === "alt-system"
+        }),
+        caption: clsx("py-2 text-sm font-bold", {
+            "text-copy-light": mode === "dark",
+            "text-copy-dark": mode === "light",
+            "text-copy-light dark:text-copy-dark": mode === "system",
+            "text-copy-dark dark:text-copy-light": mode === "alt-system"
+        })
+    };
+};
+
+export { getDataGridClasses, getStickyBlurClasses };

package/dist/DataGridAnimated/AnimatedWrapper.d.ts

@@ -0,0 +1,47 @@
+export type AnimatedWrapperProps = {
+    /**
+     * The content to wrap (typically a DataGrid).
+     */
+    children: React.ReactNode;
+    /**
+     * Value that triggers animation when changed. Typically the count of items or
+     * a key that changes.
+     */
+    dependency: unknown;
+    /**
+     * Animation duration in milliseconds.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Whether animation is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Additional class name for the wrapper.
+     */
+    className?: string;
+};
+/**
+ * Wrapper component that animates height changes when content changes.
+ *
+ * @example
+ * ```tsx
+ * const { visibleCount } = useInfiniteScroll({ totalItems: data.length });
+ *
+ * return (
+ *   <AnimatedWrapper dependency={visibleCount}>
+ *     <DataGrid>
+ *       <DataGridBody>
+ *         {data.slice(0, visibleCount).map((item) => (
+ *           <DataGridRow key={item.id}>...</DataGridRow>
+ *         ))}
+ *       </DataGridBody>
+ *     </DataGrid>
+ *   </AnimatedWrapper>
+ * );
+ * ```
+ *
+ */
+export declare const AnimatedWrapper: ({ children, dependency, duration, enabled, className, }: AnimatedWrapperProps) => import("react/jsx-runtime").JSX.Element;