@ceed/cds 0.0.5 → 0.0.33

package/dist/components/Accordions/Accordions.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+declare const AccordionSummary: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionSummaryPropsColorOverrides> | undefined;
+    indicator?: React.ReactNode;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionSummaryPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionSummarySlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "indicator" | "variant" | "sx" | keyof import("@mui/joy").AccordionSummarySlotsAndSlotProps>>;
+export { AccordionSummary };
+declare const AccordionDetails: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionDetailsPropsColorOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionDetailsPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionDetailsSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "variant" | "sx" | keyof import("@mui/joy").AccordionDetailsSlotsAndSlotProps>>;
+export { AccordionDetails };
+declare const MotionAccordion: import("framer-motion").CustomDomComponent<{
+    accordionId?: string | undefined;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionPropsColorOverrides> | undefined;
+    children?: React.ReactNode;
+    defaultExpanded?: boolean | undefined;
+    disabled?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onChange?: ((event: React.SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "onChange" | "variant" | "sx" | "accordionId" | "defaultExpanded" | "disabled" | "expanded" | keyof import("@mui/joy").AccordionSlotsAndSlotProps>>;
+declare function Accordion(props: {
+    summary: React.ReactNode;
+    details: React.ReactNode;
+    index: number;
+} & React.ComponentProps<typeof MotionAccordion>): React.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+export { Accordion };
+declare const MotionAccordions: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionGroupPropsColorOverrides> | undefined;
+    disableDivider?: boolean | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").AccordionGroupPropsSizeOverrides> | undefined;
+    transition?: string | {
+        initial: string;
+        expanded: string;
+    } | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionGroupPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionGroupSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "transition" | "color" | "variant" | "sx" | "disableDivider" | "size" | keyof import("@mui/joy").AccordionGroupSlotsAndSlotProps>>;
+declare function Accordions(props: {
+    items: {
+        summary: string;
+        details: React.ReactNode;
+    }[];
+} & React.ComponentProps<typeof MotionAccordions>): React.JSX.Element;
+declare namespace Accordions {
+    var displayName: string;
+}
+export { Accordions };

package/dist/components/Accordions/Accordions.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { AccordionGroup as JoyAccordionGroup, Accordion as JoyAccordion, AccordionSummary as JoyAccordionSummary, AccordionDetails as JoyAccordionDetails, } from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionAccordionSummary = motion(JoyAccordionSummary);
+var AccordionSummary = MotionAccordionSummary;
+export { AccordionSummary };
+AccordionSummary.displayName = "AccordionSummary";
+var MotionAccordionDetails = motion(JoyAccordionDetails);
+var AccordionDetails = MotionAccordionDetails;
+export { AccordionDetails };
+AccordionDetails.displayName = "AccordionDetails";
+var MotionAccordion = motion(JoyAccordion);
+function Accordion(props) {
+    // prop destruction
+    var summary = props.summary, details = props.details, variant = props.variant, color = props.color, innerProps = __rest(props, ["summary", "details", "variant", "color"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var inheritedVariant = variant === "solid" ? "solid" : undefined;
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordion, __assign({ variant: inheritedVariant, color: color }, innerProps),
+        React.createElement(AccordionSummary, { variant: inheritedVariant, color: color }, summary),
+        React.createElement(AccordionDetails, { variant: inheritedVariant, color: color }, details)));
+}
+export { Accordion };
+Accordion.displayName = "Accordion";
+var MotionAccordions = motion(JoyAccordionGroup);
+function Accordions(props) {
+    // prop destruction
+    var variant = props.variant, color = props.color, items = props.items, innerProps = __rest(props, ["variant", "color", "items"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordions, __assign({ variant: variant, color: color }, innerProps), items.map(function (item, index) { return (React.createElement(Accordion, { summary: item.summary, details: item.details, index: index, variant: variant, color: color })); })));
+}
+export { Accordions };
+Accordions.displayName = "Accordions";

package/dist/components/Accordions/index.d.ts

@@ -0,0 +1,3 @@
+import { Accordions } from "./Accordions";
+export * from "./Accordions";
+export default Accordions;

package/dist/components/Accordions/index.js

@@ -0,0 +1,3 @@
+import { Accordions } from "./Accordions";
+export * from "./Accordions";
+export default Accordions;

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,25 @@
 import React from "react";
-import { ButtonProps } from "@mui/joy";
 import { MotionProps } from "framer-motion";
-declare const Button: {
-    (props: ButtonProps & MotionProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<Omit<{
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & import("@mui/joy").ButtonSlotsAndSlotProps & {
+    action?: React.Ref<{
+        focusVisible(): void;
+    }> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    endDecorator?: React.ReactNode;
+    focusVisibleClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").ButtonPropsSizeOverrides> | undefined;
+    startDecorator?: React.ReactNode;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+    tabIndex?: number | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ButtonPropsVariantOverrides> | undefined;
+    loading?: boolean | undefined;
+    loadingIndicator?: React.ReactNode;
+    loadingPosition?: "center" | "end" | "start" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "tabIndex" | "variant" | "sx" | "disabled" | "size" | "component" | keyof import("@mui/joy").ButtonSlotsAndSlotProps | "action" | "endDecorator" | "focusVisibleClassName" | "fullWidth" | "startDecorator" | "loading" | "loadingIndicator" | "loadingPosition"> & MotionProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Button };

package/dist/components/Button/Button.js

@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from "react";
+import React, { forwardRef } from "react";
 import { Button as JoyButton } from "@mui/joy";
 import { motion } from "framer-motion";
 var MotionButton = motion(JoyButton);
-var Button = function (props) {
+var Button = forwardRef(function (props, ref) {
     // prop destruction
     // lib hooks
     // state, ref, querystring hooks
@@ -22,7 +22,7 @@ var Button = function (props) {
     // calculated values
     // effects
     // handlers
-    return (React.createElement(MotionButton, __assign({}, props)));
-};
+    return (React.createElement(MotionButton, __assign({ ref: ref }, props)));
+});
 export { Button };
 Button.displayName = "Button";

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Container: React.ForwardRefExoticComponent<Omit<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
+    maxWidth?: "sm" | "md" | "lg" | "xl" | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Container };

package/dist/components/Container/Container.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { styled } from "@mui/joy";
+import React, { forwardRef } from "react";
+var ContainerRoot = styled("div", {
+    name: "Container",
+    slot: "root",
+    shouldForwardProp: function (prop) { return prop !== "maxWidth"; },
+})(function (_a) {
+    var _b, _c, _d, _e;
+    var theme = _a.theme, _f = _a.maxWidth, maxWidth = _f === void 0 ? "lg" : _f;
+    return (__assign(__assign(__assign(__assign({ width: "100%", marginLeft: "auto", boxSizing: "border-box", marginRight: "auto", display: "block", paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2) }, (maxWidth === "sm" && (_b = {},
+        _b[theme.breakpoints.up("xs")] = {
+            maxWidth: theme.breakpoints.values.sm,
+        },
+        _b))), (maxWidth === "md" && (_c = {},
+        _c[theme.breakpoints.up("sm")] = {
+            maxWidth: theme.breakpoints.values.md,
+        },
+        _c))), (maxWidth === "lg" && (_d = {},
+        _d[theme.breakpoints.up("md")] = {
+            maxWidth: theme.breakpoints.values.lg,
+        },
+        _d))), (maxWidth === "xl" && (_e = {},
+        _e[theme.breakpoints.up("lg")] = {
+            maxWidth: theme.breakpoints.values.xl,
+        },
+        _e))));
+});
+var Container = forwardRef(function Container(props, ref) {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React.createElement(ContainerRoot, __assign({ ref: ref }, props));
+});
+export { Container };
+Container.displayName = "Container";

package/dist/components/Container/index.d.ts

@@ -0,0 +1,3 @@
+import { Container } from "./Container";
+export * from "./Container";
+export default Container;

package/dist/components/Container/index.js

@@ -0,0 +1,3 @@
+import { Container } from "./Container";
+export * from "./Container";
+export default Container;

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,56 @@
+import React, { ComponentProps } from "react";
+import { Table } from "../Table";
+type Column<T extends Record<string, unknown>> = {
+    type?: "number" | "string";
+    field: keyof T;
+    headerName?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    resizable?: boolean;
+};
+type DataTableProps<T extends Record<string, unknown>> = {
+    rows: T[];
+    checkboxSelection?: boolean;
+    columns: Column<T>[];
+    /**
+     * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
+     */
+    selectionModel?: string[];
+    onSelectionModelChange?: (newSelectionModel: string[]) => void;
+    paginationModel?: {
+        page: number;
+        pageSize: number;
+    };
+    onPaginationModelChange?: (model: {
+        page: number;
+        pageSize: number;
+    }) => void;
+    /**
+     * Rows의 총 갯수를 직접 지정 할 수 있다.
+     * 기본적으로는 rows.length를 사용하지만, 이 값을 지정하면 rows.length를 사용하지 않는다.
+     */
+    rowCount?: number;
+    slots?: {
+        checkbox?: React.ElementType;
+        toolbar?: React.ElementType;
+        footer?: React.ElementType;
+    };
+    slotProps?: {
+        checkbox?: Partial<{
+            checked: boolean;
+            [key: string]: any;
+        }>;
+        toolbar?: Partial<{
+            [key: string]: any;
+        }>;
+        background?: Partial<{
+            [key: string]: any;
+        }>;
+    };
+} & ComponentProps<typeof Table>;
+declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): React.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,268 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import Sheet from "../Sheet";
+import { Table } from "../Table";
+import Checkbox from "../Checkbox";
+import Box from "../Box";
+import Stack from "../Stack";
+import Typography from "../Typography";
+import Button from "../Button";
+var numberFormatter = function (value) {
+    return "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+};
+function TablePagination(props) {
+    // prop destruction
+    var _a = props.paginationModel, page = _a.page, pageSize = _a.pageSize, rowCount = props.rowCount, onPageChange = props.onPageChange;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var firstPage = 1;
+    var lastPage = Math.ceil(rowCount / pageSize);
+    var beforePages = [page - 2, page - 1].filter(function (p) { return p > 1; });
+    var afterPages = [page + 1, page + 2].filter(function (p) { return p <= lastPage - 1; });
+    var isMoreAfterPages = lastPage > 1 && page < lastPage - 3;
+    var isMoreBeforePages = lastPage > 1 && page > 4;
+    // effects
+    // handlers
+    return (React.createElement(Stack, { direction: "row", spacing: 1, sx: {
+            pt: 1,
+            pb: 1,
+        }, justifyContent: "end", alignItems: "center" },
+        React.createElement(Stack, { direction: "row", spacing: 0.5, alignItems: "center" },
+            React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 1); }, disabled: page === firstPage, "aria-label": "Previous page" }, "<"),
+            page !== firstPage && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(firstPage); } }, firstPage)),
+            isMoreBeforePages && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 3); } }, "...")),
+            beforePages.map(function (p) { return (React.createElement(Button, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
+            React.createElement(Button, { variant: "soft", size: "sm" }, page),
+            afterPages.map(function (p) { return (React.createElement(Button, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
+            isMoreAfterPages && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 3); } }, "...")),
+            page !== lastPage && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(lastPage); } }, lastPage)),
+            React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 1); }, disabled: page === lastPage, "aria-label": "Next page" }, ">"))));
+}
+var Resizer = function (ref) { return (React.createElement(Box, { sx: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: "4px",
+        cursor: "col-resize",
+    }, onMouseDown: function (e) {
+        var _a;
+        var initialX = e.clientX;
+        var initialWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        var onMouseMove = function (e) {
+            if (initialWidth && initialX) {
+                ref.current.style.width = "".concat(initialWidth + (e.clientX - initialX), "px");
+            }
+        };
+        var onMouseUp = function () {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    } })); };
+var HeadCell = function (props) {
+    var _a, _b, _c;
+    var ref = useRef(null);
+    var style = {
+        width: props.width,
+        minWidth: (_a = props.minWidth) !== null && _a !== void 0 ? _a : "50px",
+        maxWidth: props.maxWidth,
+        textAlign: props.type === "number" ? "end" : "start",
+        position: props.stickyHeader ? undefined : "relative",
+    };
+    var resizer = ((_b = props.resizable) !== null && _b !== void 0 ? _b : true) ? Resizer(ref) : null;
+    return (React.createElement("th", { ref: ref, key: props.field, style: style }, (_c = props.headerName) !== null && _c !== void 0 ? _c : props.field,
+        resizer));
+};
+function useDataTableRenderer(_a) {
+    var rows = _a.rows, columns = _a.columns, totalRowsProp = _a.rowCount, paginationModel = _a.paginationModel, onPaginationModelChange = _a.onPaginationModelChange, _b = _a.selectionModel, selectionModel = _b === void 0 ? [] : _b, onSelectionModelChange = _a.onSelectionModelChange, stickyHeader = _a.stickyHeader;
+    var _c = useState((paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.page) || 1), page = _c[0], setPage = _c[1];
+    var pageSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSize) || 20;
+    var selectedModelSet = useMemo(function () { return new Set(selectionModel); }, [selectionModel]);
+    var dataInPage = useMemo(function () { return rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize); }, [rows, page, pageSize]);
+    var isAllSelected = useMemo(function () {
+        return dataInPage.length > 0 &&
+            dataInPage.every(function (_, i) {
+                return selectedModelSet.has("".concat(i + (page - 1) * pageSize));
+            });
+    }, [dataInPage, selectedModelSet, page, pageSize]);
+    var rowCount = totalRowsProp || rows.length;
+    var isTotalSelected = useMemo(function () { return rowCount > 0 && selectionModel.length === rowCount; }, [selectionModel, rowCount]);
+    var handlePageChange = useCallback(function (newPage) {
+        setPage(newPage);
+        onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange({ page: newPage, pageSize: pageSize });
+    }, [onPaginationModelChange]);
+    useEffect(function () {
+        handlePageChange(1);
+    }, [rowCount]);
+    useEffect(function () {
+        if (page > Math.ceil(rowCount / pageSize)) {
+            handlePageChange(Math.ceil(rowCount / pageSize));
+        }
+    }, [rowCount, pageSize]);
+    useEffect(function () {
+        onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
+    }, [page]);
+    return {
+        rowCount: rowCount,
+        page: page,
+        pageSize: pageSize,
+        onPaginationModelChange: handlePageChange,
+        HeadCell: HeadCell,
+        // HeadCell: useCallback(
+        //   (column: Column<any>) => {
+        //     const ref = useRef<HTMLTableCellElement>(null);
+        //     const style = {
+        //       width: column.width,
+        //       minWidth: column.minWidth ?? "50px",
+        //       maxWidth: column.maxWidth,
+        //       textAlign: column.type === "number" ? "end" : "start",
+        //       position: stickyHeader ? undefined : "relative",
+        //     } as React.CSSProperties;
+        //     const resizer = column.resizable ?? true ? Resizer(ref) : null;
+        //     return (
+        //       <th ref={ref} key={column.field as string} style={style}>
+        //         {column.headerName ?? (column.field as string)}
+        //         {resizer}
+        //       </th>
+        //     );
+        //   },
+        //   [stickyHeader, columns]
+        // ),
+        dataInPage: dataInPage,
+        isAllSelected: isAllSelected, // all rows are selected on this page
+        isTotalSelected: isTotalSelected,
+        isSelectedRow: useCallback(function (model) { return selectedModelSet.has(model); }, [selectedModelSet]),
+        onAllCheckboxChange: useCallback(function () {
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected
+                ? []
+                : dataInPage.map(function (_, i) { return "".concat(i + (page - 1) * pageSize); }));
+        }, [isAllSelected, dataInPage, onSelectionModelChange]),
+        onCheckboxChange: useCallback(function (event, selectedModel) {
+            if (selectedModelSet.has(selectedModel)) {
+                var newSelectionModel = selectionModel.filter(function (model) { return model !== selectedModel; });
+                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
+            }
+            else {
+                var newSelectionModel = __spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false);
+                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
+            }
+        }, [selectionModel, onSelectionModelChange]),
+        columns: useMemo(function () {
+            return columns ||
+                // fallback
+                Object.keys(rows[0] || {}).map(function (key) { return ({
+                    field: key,
+                }); });
+        }, [rows, columns]),
+        onTotalSelect: useCallback(function () {
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : rows.map(function (_, i) { return "".concat(i); }));
+        }, [isTotalSelected, rows, onSelectionModelChange]),
+    };
+}
+function DataTable(props) {
+    // prop destruction
+    var rows = props.rows, checkboxSelection = props.checkboxSelection, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.rowCount, // rowCount is used in useDataTableRenderer
+    __ = props.columns, // columns is used in useDataTableRenderer
+    ___ = props.onPaginationModelChange, // onPaginationModelChange is used in useDataTableRenderer
+    paginationModel = props.paginationModel, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, Toolbar = _b.toolbar, Footer = _b.footer, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f, toolbarProps = _e.toolbar, _g = _e.background, backgroundProps = _g === void 0 ? {} : _g, innerProps = __rest(props, ["rows", "checkboxSelection", "selectionModel", "onSelectionModelChange", "rowCount", "columns", "onPaginationModelChange", "paginationModel", "slots", "slotProps"]);
+    // lib hooks
+    var _h = useDataTableRenderer(props), columns = _h.columns, isAllSelected = _h.isAllSelected, isSelectedRow = _h.isSelectedRow, onAllCheckboxChange = _h.onAllCheckboxChange, onCheckboxChange = _h.onCheckboxChange, rowCount = _h.rowCount, page = _h.page, pageSize = _h.pageSize, onPaginationModelChange = _h.onPaginationModelChange, dataInPage = _h.dataInPage, isTotalSelected = _h.isTotalSelected, onTotalSelect = _h.onTotalSelect, HeadCell = _h.HeadCell;
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(Box, null,
+        React.createElement(Stack, { direction: "row", sx: {
+                pt: 1,
+                pb: 1,
+            }, justifyContent: "space-between", alignItems: "center" },
+            React.createElement(Stack, { direction: "row", spacing: 1 },
+                !isAllSelected && (React.createElement(Typography, { level: "body-xs" },
+                    numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
+                    " items selected")),
+                isAllSelected && !isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                    React.createElement(Typography, { level: "body-xs" },
+                        "All ",
+                        numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
+                        " items on this page are selected."),
+                    React.createElement(Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
+                        "Select all ",
+                        numberFormatter(rows.length),
+                        " items"))),
+                isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                    React.createElement(Typography, { level: "body-xs" },
+                        "All ",
+                        numberFormatter(rows.length),
+                        " items are selected."),
+                    React.createElement(Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel")))),
+            Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {})))),
+        React.createElement(Sheet, __assign({ variant: "outlined", sx: {
+                overflow: "auto",
+                width: "100%",
+                boxShadow: "sm",
+                borderRadius: "sm",
+            } }, backgroundProps),
+            React.createElement(Table, __assign({}, innerProps),
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        checkboxSelection && (React.createElement("th", { style: {
+                                width: "40px",
+                                textAlign: "center",
+                            } },
+                            React.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
+                        columns.map(function (c) { return (React.createElement(HeadCell, __assign({ key: c.field, stickyHeader: props.stickyHeader }, c))); }))),
+                React.createElement("tbody", null, dataInPage.map(function (row, rowIndex) {
+                    var rowId = "".concat(rowIndex + (page - 1) * pageSize);
+                    return (React.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection
+                            ? function (e) { return onCheckboxChange(e, rowId); }
+                            : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined },
+                        checkboxSelection && (React.createElement("th", { scope: "row", style: {
+                                textAlign: "center",
+                            } },
+                            React.createElement(RenderCheckbox, __assign({ onChange: function (e) { return onCheckboxChange(e, rowId); }, checked: isSelectedRow(rowId) }, checkboxProps)))),
+                        columns.map(function (column) { return (React.createElement("td", { key: column.field, style: {
+                                textAlign: column.type === "number" ? "end" : "start",
+                            } }, row[column.field])); })));
+                })),
+                Footer && React.createElement(Footer, null))),
+        React.createElement(TablePagination, { paginationModel: { page: page, pageSize: pageSize }, rowCount: rowCount, onPageChange: onPaginationModelChange, onRowsPerPageChange: function () { } })));
+}
+export { DataTable };
+DataTable.displayName = "DataTable";

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+import { DataTable } from "./DataTable";
+export * from "./DataTable";
+export default DataTable;

package/dist/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import { DataTable } from "./DataTable";
+export * from "./DataTable";
+export default DataTable;

package/dist/components/DialogActions/DialogActions.d.ts

@@ -6,5 +6,5 @@ declare const DialogActions: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").DialogActionsSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "sx" | "buttonFlex" | "orientation" | keyof import("@mui/joy").DialogActionsSlotsAndSlotProps>>;
+}, "children" | "sx" | "orientation" | "buttonFlex" | keyof import("@mui/joy").DialogActionsSlotsAndSlotProps>>;
 export { DialogActions };

package/dist/components/DialogFrame/DialogFrame.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ModalDialog } from "../Modal";
+declare function DialogFrame(props: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    actions: React.ReactNode;
+} & React.ComponentProps<typeof ModalDialog>): React.JSX.Element;
+declare namespace DialogFrame {
+    var displayName: string;
+}
+export { DialogFrame };