@ceed/cds 0.0.186 → 0.0.187-treeshaking.1

package/dist/components/MonthPicker/MonthPicker.js

@@ -0,0 +1,162 @@
+import React__default, { forwardRef, useRef, useCallback, useState, useEffect, useImperativeHandle } from 'react';
+import { IMaskInput, IMask } from 'react-imask';
+import CalendarTodayIcon from '../../external/@mui/icons-material/esm/CalendarToday.js';
+import { styled, useThemeProps } from '@mui/joy';
+import { Popper, FocusTrap, ClickAwayListener } from '@mui/base';
+import { Input } from '../Input/Input.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Sheet } from '../Sheet/Sheet.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { DialogActions } from '../DialogActions/DialogActions.js';
+import { Button } from '../Button/Button.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const StyledPopper = styled(Popper, {
+    name: "MonthPicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = styled(Sheet, {
+    name: "MonthPicker",
+    slot: "sheet",
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    width: "264px",
+    boxShadow: theme.shadow.md,
+    borderRadius: theme.radius.md,
+}));
+const MonthPickerRoot = styled("div", {
+    name: "MonthPicker",
+    slot: "root",
+    overridesResolver: (props, styles) => styles.root,
+})({
+    width: "100%",
+});
+const formatValueString = (date, format) => {
+    let month = `${date.getMonth() + 1}`;
+    const year = date.getFullYear();
+    if (Number(month) < 10)
+        month = "0" + month;
+    return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
+};
+const formatToPattern = (format) => {
+    return format
+        .replace(/YYYY/g, "Y")
+        .replace(/MM/g, "M")
+        .replace(/[^YM\s]/g, (match) => `${match}\``);
+};
+function parseDate(dateString) {
+    let month, year;
+    const cleanDateString = dateString.replace(/[^\d]/g, "");
+    if (dateString.match(/\d{1,2}.\d{4}/)) {
+        // MMYYYY
+        month = cleanDateString.slice(0, 2);
+        year = cleanDateString.slice(2);
+    }
+    else if (dateString.match(/\d{4}.\d{1,2}/)) {
+        // YYYYMM
+        year = cleanDateString.slice(0, 4);
+        month = cleanDateString.slice(4);
+    }
+    const date = new Date(`${year}/${month}`);
+    return date;
+}
+const TextMaskAdapter = React__default.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React__default.createElement(IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), mask: Date, pattern: formatToPattern(format), blocks: {
+            M: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+            },
+        }, format: (date) => formatValueString(date, format), parse: parseDate, autofix: "pad", overwrite: true }));
+});
+const MonthPicker = forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = useThemeProps({ props: inProps, name: "MonthPicker" });
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx, className, format = "YYYY/MM", size, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const innerRef = useRef(null);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue || "", useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    // effects
+    useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+        innerRef.current?.focus();
+    }, [anchorEl, setAnchorEl, innerRef]);
+    return (React__default.createElement(MonthPickerRoot, null,
+        React__default.createElement(FocusTrap, { open: true },
+            React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Input, { ...innerProps, color: error ? "danger" : innerProps.color, ref: innerRef, size: size, value: value, onChange: handleChange, placeholder: format, disabled: disabled, required: required, slotProps: {
+                        input: { component: TextMaskAdapter, ref: innerRef, format },
+                    }, error: error, className: className, sx: {
+                        ...sx,
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        fontFamily: "monospace",
+                    }, endDecorator: React__default.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "month-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open },
+                        React__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText }),
+                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React__default.createElement(StyledPopper, { id: "month-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end", 
+                        // NOTE: 값이 변경 되기전 blur 이벤트 방지
+                        onMouseDown: (e) => e.preventDefault(), modifiers: [
+                            {
+                                name: "offset",
+                                options: {
+                                    offset: [4, 4],
+                                },
+                            },
+                        ], "aria-label": "Calendar Tooltip", "aria-expanded": open },
+                        React__default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React__default.createElement(Calendar, { view: "month", views: ["month"], value: !Number.isNaN(new Date(value).getTime())
+                                    ? [new Date(value), undefined]
+                                    : undefined, onChange: ([date]) => {
+                                    handleChange({
+                                        target: {
+                                            name: props.name,
+                                            value: formatValueString(date, format),
+                                        },
+                                    });
+                                    setAnchorEl(null);
+                                }, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
+                            React__default.createElement(DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React__default.createElement(Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        handleChange({
+                                            target: {
+                                                name: props.name,
+                                                value: "",
+                                            },
+                                        });
+                                        setAnchorEl(null);
+                                    } }, "Clear"))))))))));
+});
+
+export { MonthPicker };

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

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

package/dist/components/MonthRangePicker/MonthRangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import Input from "../Input";
+import Input from "../Input/index.js";
 interface BaseMonthRangePickerProps {
     value?: string;
     defaultValue?: string;

package/dist/components/MonthRangePicker/MonthRangePicker.js

@@ -0,0 +1,172 @@
+import React__default, { forwardRef, useRef, useCallback, useState, useMemo, useEffect, useImperativeHandle } from 'react';
+import { IMaskInput, IMask } from 'react-imask';
+import CalendarTodayIcon from '../../external/@mui/icons-material/esm/CalendarToday.js';
+import { styled, useThemeProps } from '@mui/joy';
+import { Popper, FocusTrap, ClickAwayListener } from '@mui/base';
+import { Input } from '../Input/Input.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Sheet } from '../Sheet/Sheet.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { DialogActions } from '../DialogActions/DialogActions.js';
+import { Button } from '../Button/Button.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const StyledPopper = styled(Popper, {
+    name: "MonthRangePicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = styled(Sheet, {
+    name: "MonthRangePicker",
+    slot: "sheet",
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+    width: "264px",
+    boxShadow: theme.shadow.md,
+    borderRadius: theme.radius.md,
+}));
+const MonthRangePickerRoot = styled("div", {
+    name: "MonthRangePicker",
+    slot: "root",
+    overridesResolver: (props, styles) => styles.root,
+})({
+    width: "100%",
+});
+const formatValueString = ([date1, date2], format) => {
+    const getStr = (date) => {
+        let month = `${date.getMonth() + 1}`;
+        const year = date.getFullYear();
+        if (Number(month) < 10)
+            month = "0" + month;
+        return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
+    };
+    return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
+};
+function parseDate(dateString) {
+    let month, year;
+    const cleanDateString = dateString.replace(/[^\d]/g, "");
+    if (dateString.match(/\d{1,2}.\d{4}/)) {
+        // MMYYYY
+        month = cleanDateString.slice(0, 2);
+        year = cleanDateString.slice(2);
+    }
+    else if (dateString.match(/\d{4}.\d{1,2}/)) {
+        // YYYYMM
+        year = cleanDateString.slice(0, 4);
+        month = cleanDateString.slice(4);
+    }
+    const date = new Date(`${year}/${month}`);
+    return date;
+}
+const parseDates = (str) => {
+    const date1 = str.split(" - ")[0] || "";
+    const date2 = str.split(" - ")[1] || "";
+    return [parseDate(date1), parseDate(date2)];
+};
+const formatToPattern = (format) => {
+    return `${format} - ${format}`
+        .replace(/YYYY/g, "Y")
+        .replace(/MM/g, "m")
+        .replace(/[^YMm\s]/g, (match) => `${match}\``);
+};
+const TextMaskAdapter = React__default.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React__default.createElement(IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), mask: Date, 
+        // other options are optional
+        pattern: formatToPattern(format), 
+        // you can provide your own blocks definitions, default blocks for date mask are:
+        blocks: {
+            m: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+            },
+        }, 
+        // define date -> str convertion
+        format: (dates) => formatValueString(dates, format), 
+        // define str -> date convertion
+        parse: parseDates, autofix: "pad", overwrite: true }));
+});
+const MonthRangePicker = forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = useThemeProps({ props: inProps, name: "MonthRangePicker" });
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx, className, format = "YYYY/MM", size, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const innerRef = useRef(null);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue || "", useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    const calendarValue = useMemo(() => (value ? parseDates(value) : undefined), [value]);
+    // effects
+    useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+        innerRef.current?.focus();
+    }, [anchorEl, setAnchorEl, innerRef]);
+    const handleCalendarChange = useCallback(([date1, date2]) => {
+        if (!date1 || !date2)
+            return;
+        setValue(formatValueString([date1, date2], format));
+        setAnchorEl(null);
+    }, [setValue, setAnchorEl, format]);
+    return (React__default.createElement(MonthRangePickerRoot, null,
+        React__default.createElement(FocusTrap, { open: true },
+            React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Input, { ...innerProps, color: error ? "danger" : innerProps.color, ref: ref, size: size, value: value, onChange: handleChange, disabled: disabled, required: required, placeholder: `${format} - ${format}`, slotProps: {
+                        input: { component: TextMaskAdapter, ref: innerRef, format },
+                    }, error: error, className: className, sx: {
+                        ...sx,
+                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+                        fontFamily: "monospace",
+                    }, endDecorator: React__default.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "month-range-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open },
+                        React__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText }),
+                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React__default.createElement(StyledPopper, { id: "month-range-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end", 
+                        // NOTE: 값이 변경 되기전 blur 이벤트 방지
+                        onMouseDown: (e) => e.preventDefault(), modifiers: [
+                            {
+                                name: "offset",
+                                options: {
+                                    offset: [4, 4],
+                                },
+                            },
+                        ], "aria-label": "Calendar Tooltip", "aria-expanded": open },
+                        React__default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React__default.createElement(Calendar, { view: "month", views: ["month"], rangeSelection: true, defaultValue: calendarValue, onChange: handleCalendarChange, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
+                            React__default.createElement(DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React__default.createElement(Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        setValue("");
+                                        setAnchorEl(null);
+                                    } }, "Clear"))))))))));
+});
+MonthRangePicker.displayName = "MonthRangePicker";
+
+export { MonthRangePicker };

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

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

package/dist/components/NavigationGroup/NavigationGroup.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import { styled, AccordionSummary as AccordionSummary$1, accordionSummaryClasses, AccordionDetails as AccordionDetails$1, Accordion, Stack } from '@mui/joy';
+
+const AccordionSummary = styled(AccordionSummary$1, {
+    name: "NavigationGroup",
+    slot: "Summary",
+    shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level",
+})(({ theme, useIcon, level }) => ({
+    [`& .${accordionSummaryClasses.button}`]: {
+        padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
+        [`&.${accordionSummaryClasses.expanded}`]: {
+            color: theme.palette.primary.plainColor,
+            "--Icon-color": theme.palette.primary.plainColor,
+        },
+    },
+}));
+const AccordionDetails = styled(AccordionDetails$1, {
+    name: "NavigationGroup",
+    slot: "Details",
+})(({ theme }) => ({
+    "--AccordionDetails-transition": "grid-template-rows 0.2s ease, padding-block 0.2s ease",
+    backgroundColor: theme.palette.background.level1,
+}));
+function NavigationGroup(props) {
+    // prop destruction
+    const { title, children, startDecorator, level, ...rest } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React__default.createElement(Accordion, { ...rest },
+        React__default.createElement(AccordionSummary, { useIcon: !!startDecorator, level: level },
+            React__default.createElement(Stack, { direction: "row", gap: 4 },
+                startDecorator,
+                title)),
+        React__default.createElement(AccordionDetails, null, children)));
+}
+
+export { NavigationGroup };

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

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

package/dist/components/NavigationItem/NavigationItem.js

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { styled, ListItemButton as ListItemButton$1, listItemButtonClasses, ListItem, ListItemDecorator } from '@mui/joy';
+
+const ListItemButton = styled(ListItemButton$1, {
+    name: "NavigationItem",
+    slot: "Button",
+    shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level",
+})(({ theme, useIcon, level }) => ({
+    padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
+    gap: theme.spacing(4),
+    fontWeight: 500,
+    "&:hover": {
+        backgroundColor: theme.palette.neutral.plainHoverBg,
+    },
+    "&:active": {
+        backgroundColor: theme.palette.neutral.plainActiveBg,
+    },
+    [`&.${listItemButtonClasses.selected}`]: {
+        color: theme.palette.primary.plainColor,
+        "--Icon-color": theme.palette.primary.plainColor,
+        "&:not(:hover):not(:active)": {
+            backgroundColor: theme.palette.background.surface,
+        },
+    },
+}));
+function NavigationItem(props) {
+    // prop destruction
+    const { children, startDecorator, level, selected, id, onClick, ...rest } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    const handleClick = () => {
+        onClick?.(id);
+    };
+    return (React__default.createElement(ListItem, { ...rest },
+        React__default.createElement(ListItemButton, { level: level, useIcon: !!startDecorator, selected: selected, "aria-current": selected, onClick: handleClick },
+            startDecorator && React__default.createElement(ListItemDecorator, null, startDecorator),
+            children)));
+}
+
+export { NavigationItem };

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

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

package/dist/components/Navigator/Navigator.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { NavigationGroup } from '../NavigationGroup/NavigationGroup.js';
+import { NavigationItem } from '../NavigationItem/NavigationItem.js';
+
+function Navigator(props) {
+    // prop destruction
+    const { items, level = 0, onSelect } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    const handleItemClick = (id) => {
+        onSelect?.(id);
+    };
+    return (React__default.createElement("div", null, items.map((item, index) => {
+        if (item.type === "item") {
+            return (React__default.createElement(NavigationItem, { key: item.id, id: item.id, startDecorator: item.startDecorator, selected: item.selected, level: level, onClick: handleItemClick }, item.title));
+        }
+        else if (item.type === "group") {
+            return (React__default.createElement(NavigationGroup, { key: index, title: item.title, startDecorator: item.startDecorator, level: level, defaultExpanded: item.expanded }, item.content));
+        }
+        return null;
+    })));
+}
+Navigator.displayName = "Navigator";
+
+export { Navigator };

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

@@ -1,3 +1,3 @@
-import { Navigator } from './Navigator';
-export * from './Navigator';
+import { Navigator } from "./Navigator.js";
+export * from "./Navigator.js";
 export default Navigator;

package/dist/components/Pagination/Pagination.d.ts

@@ -5,8 +5,8 @@ declare const PaginationRoot: import("@emotion/styled").StyledComponent<Pick<{
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
     divider?: React.ReactNode;
     useFlexGap?: boolean | undefined;
-    sx?: import("@mui/joy/styles/types").SxProps | undefined;
-} & import("@mui/joy").StackSlotsAndSlotProps & import("@mui/joy/styles/types").SystemProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    sx?: import("@mui/joy/styles/types/theme.js").SxProps | undefined;
+} & import("@mui/joy").StackSlotsAndSlotProps & import("@mui/joy/styles/types/theme.js").SystemProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "children" | "direction" | "sx" | "spacing" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps>, "style" | "title" | "children" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "content" | "direction" | "translate" | "ref" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "spacing" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, {}, {}>;
 interface PaginationProps extends React.ComponentProps<typeof PaginationRoot> {

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,117 @@
+import React__default, { useCallback, useEffect } from 'react';
+import PreviousIcon from '../../external/@mui/icons-material/esm/ChevronLeft.js';
+import NextIcon from '../../external/@mui/icons-material/esm/ChevronRight.js';
+import { styled, Stack } from '@mui/joy';
+import { Button } from '../Button/Button.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const PaginationButton = styled(Button, {
+    name: "Pagination",
+    slot: "button",
+})(({ theme, active, size }) => ({
+    "--Button-size": {
+        sm: "32px",
+        md: "40px",
+        lg: "48px",
+    }[size],
+    width: "var(--Button-size)",
+    height: "var(--Button-size)",
+    backgroundColor: active
+        ? theme.vars.palette.primary.softHoverBg
+        : "transparent",
+    color: active
+        ? theme.vars.palette.primary.softColor
+        : theme.vars.palette.neutral.plainColor,
+    "&:hover": {
+        color: active
+            ? theme.vars.palette.primary.softColor
+            : theme.vars.palette.neutral.softColor,
+        backgroundColor: active
+            ? theme.vars.palette.primary.softActiveBg
+            : theme.vars.palette.neutral.softHoverBg,
+    },
+}));
+const PaginationIconButton = styled(IconButton, {
+    name: "Pagination",
+    slot: "button",
+})(({ theme, size }) => ({
+    "--IconButton-size": {
+        sm: "32px",
+        md: "40px",
+        lg: "48px",
+    }[size],
+    "--Icon-fontSize": "20px",
+    width: "var(--IconButton-size)",
+    height: "var(--IconButton-size)",
+    color: theme.vars.palette.neutral.plainColor,
+    "&:hover": {
+        color: theme.vars.palette.neutral.softColor,
+        backgroundColor: theme.vars.palette.neutral.softHoverBg,
+    },
+}));
+const PaginationRoot = styled(Stack, {
+    name: "Pagination",
+    slot: "root",
+})({});
+const PaginationContainer = styled(Stack, {
+    name: "Pagination",
+    slot: "container",
+})(({ theme, size }) => ({
+    gap: {
+        sm: theme.spacing(1),
+        md: theme.spacing(1.5),
+        lg: theme.spacing(2),
+    }[size],
+}));
+function Pagination(props) {
+    // prop destruction
+    const { paginationModel: _paginationModel, defaultPaginationModel = { page: 1, pageSize: 25 }, onPageChange, rowCount, size = "md", ...innerProps } = props;
+    const [paginationModel, setPaginationModel] = useControlledState(_paginationModel, defaultPaginationModel, useCallback((newPage) => {
+        onPageChange(newPage.page);
+    }, [onPageChange]));
+    const handlePageChange = (newPage) => {
+        setPaginationModel({ ...paginationModel, page: newPage });
+    };
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    const firstPage = 1;
+    const lastPage = Math.max(firstPage, Math.ceil(rowCount / paginationModel.pageSize));
+    const beforePages = [
+        paginationModel.page - 2,
+        paginationModel.page - 1,
+    ].filter((p) => p > 1);
+    const afterPages = [
+        paginationModel.page + 1,
+        paginationModel.page + 2,
+    ].filter((p) => p <= lastPage - 1);
+    const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
+    const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
+    // Add this effect to handle rowCount changes
+    useEffect(() => {
+        if (paginationModel.page > lastPage) {
+            setPaginationModel({ ...paginationModel, page: lastPage });
+        }
+    }, [rowCount, paginationModel, lastPage, setPaginationModel]);
+    // effects
+    // handlers
+    return (React__default.createElement(PaginationRoot, { ...innerProps },
+        React__default.createElement(PaginationContainer, { direction: "row", size: size, alignItems: "center" },
+            React__default.createElement(PaginationIconButton, { size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(paginationModel.page - 1), disabled: paginationModel.page === firstPage, "aria-label": "Previous page" },
+                React__default.createElement(PreviousIcon, null)),
+            paginationModel.page !== firstPage && (React__default.createElement(PaginationButton, { size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage)),
+            isMoreBeforePages && (React__default.createElement(PaginationButton, { size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(paginationModel.page - 3), "aria-label": "More previous pages" }, "...")),
+            beforePages.map((p) => (React__default.createElement(PaginationButton, { key: p, size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p))),
+            React__default.createElement(PaginationButton, { active: true, size: size, "aria-current": "page" }, paginationModel.page),
+            afterPages.map((p) => (React__default.createElement(PaginationButton, { key: p, size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p))),
+            isMoreAfterPages && (React__default.createElement(PaginationButton, { size: size, variant: "plain", color: "neutral", "aria-label": "More next pages", onClick: () => handlePageChange(paginationModel.page + 3) }, "...")),
+            paginationModel.page !== lastPage && (React__default.createElement(PaginationButton, { size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(lastPage) }, lastPage)),
+            React__default.createElement(PaginationIconButton, { size: size, variant: "plain", color: "neutral", onClick: () => handlePageChange(paginationModel.page + 1), disabled: paginationModel.page === lastPage, "aria-label": "Next page" },
+                React__default.createElement(NextIcon, null)))));
+}
+Pagination.displayName = "Pagination";
+
+export { Pagination };