@atom-learning/components 2.55.0 → 2.57.0

package/dist/components/pagination/PaginationPreviousButton.d.ts

@@ -0,0 +1,470 @@
+import * as React from 'react';
+declare const StyledActionIcon: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@stitches/react/types/styled-component").TransformProps<{
+    theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+    appearance?: "outline" | "solid" | "simple" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    isRounded?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}> & {
+    css?: import("@stitches/react/types/css-util").CSS<{
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }, {
+        colors: {
+            textForeground: any;
+            textSubtle: any;
+            textPlaceholder: any;
+            background: any;
+            backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
+            tonal50: any;
+            tonal100: any;
+            tonal200: any;
+            tonal300: any;
+            tonal400: any;
+            tonal500: any;
+            tonal600: any;
+            alpha100: any;
+            alpha150: any;
+            alpha200: any;
+            alpha250: any;
+            alpha600: any;
+            primaryLight: any;
+            primary: any;
+            primaryMid: any;
+            primaryDark: any;
+            secondary: any;
+            brandRed: any;
+            brandRedAccent: any;
+            brandGreen: any;
+            brandGreenAccent: any;
+            brandPurple: any;
+            brandPurpleAccent: any;
+            brandYellow: any;
+            brandYellowAccent: any;
+            successLight: any;
+            success: any;
+            successMid: any;
+            successDark: any;
+            dangerLight: any;
+            danger: any;
+            dangerMid: any;
+            dangerDark: any;
+            warningLight: any;
+            warning: any;
+            warningMid: any;
+            warningDark: any;
+            warningText: any;
+            subjectEnglish: any;
+            subjectMaths: any;
+            subjectScience: any;
+            subjectVerbalReasoning: any;
+            subjectNonVerbalReasoning: any;
+            subjectCreativeWriting: any;
+            subjectExamSkills: any;
+        };
+        space: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+            "9": any;
+            "24": any;
+        };
+        fontSizes: {
+            xs: any;
+            sm: any;
+            md: any;
+            lg: any;
+            xl: any;
+            "2xl": any;
+            "3xl": any;
+            "4xl": any;
+        };
+        fonts: {
+            sans: any;
+            mono: any;
+            display: any;
+            body: any;
+        };
+        sizes: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+        };
+        radii: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            round: any;
+        };
+        shadows: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+        };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+            background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+        };
+        size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        };
+        p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+    }> | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
+    theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+    appearance?: "outline" | "solid" | "simple" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    isRounded?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}> & {
+    as?: React.ReactNode;
+    children: React.ReactNode;
+    label: string;
+    hasTooltip?: boolean | undefined;
+    tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
+} & import("../../types").NavigatorActions, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../types").NavigatorActions> & React.RefAttributes<HTMLButtonElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+        "24": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+export declare const PaginationPreviousButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => JSX.Element;
+export {};

package/dist/components/pagination/PaginationPreviousButton.js

@@ -0,0 +1,2 @@
+import{ChevronLeft as u}from"@atom-learning/icons";import*as t from"react";import{styled as c}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as d}from"../icon/Icon.js";import{TRUNCATED_THRESHOLD as g}from"./pagination.constants.js";import{getPaginationItemsToRender as P}from"./pagination.helper.js";import{usePagination as f}from"./usePagination.js";const b=c(p,{mr:"$1","&:disabled":{opacity:"0.3"}}),v=i=>{const{goToPreviousPage:r,currentPage:e,labels:o,disabledPages:n,pagesCount:a,isMaxVisibleElementCount:s}=f(),m=P(e,a,g,s),l=e===1||n.includes(1)&&m.includes(1);return t.createElement(b,{hasTooltip:!1,size:"md",theme:"neutral",onClick:r,disabled:l,...i,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},t.createElement(d,{is:u}))};export{v as PaginationPreviousButton};
+//# sourceMappingURL=PaginationPreviousButton.js.map

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  mr: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToPreviousPage,\n    currentPage,\n    labels,\n    disabledPages,\n    pagesCount,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the first page or if the first page is disabled and the page number is rendered\n  const isDisabled =\n    currentPage === 1 ||\n    (disabledPages.includes(1) && paginationItemsInview.includes(1))\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","currentPage","labels","disabledPages","pagesCount","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronLeft"],"mappings":"8YAWA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EACA,yBAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAwBC,EAC5BP,EACAG,EACAK,EACAJ,CACF,EAEMK,EACJT,IAAgB,GACfE,EAAc,SAAS,CAAC,GAAKI,EAAsB,SAAS,CAAC,EAEhE,OACEI,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOG,GAAA,KAAA,OAAAA,EAAQ,0BAA2B,eAE1CS,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,CAEJ"}

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

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/pagination/pagination-context/PaginationContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { TPaginationContext, TPaginationProviderProps } from '../types';
+export declare const PaginationContext: React.Context<TPaginationContext>;
+export declare const PaginationProvider: React.FC<TPaginationProviderProps>;

package/dist/components/pagination/pagination-context/PaginationContext.js

@@ -0,0 +1,2 @@
+import*as a from"react";import{VisibleElementsAmount as g}from"../pagination.constants.js";import{findPreviousAvailablePage as S,findNextAvailablePage as T}from"../pagination.helper.js";const C=a.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,visibleElementsCount:g.LESS,pagesCount:0,onItemHover:()=>null,labels:{},isMaxVisibleElementCount:!1,indicatedPages:[],disabledPages:[]}),A=({onSelectedPageChange:u,selectedPage:v,visibleElementsCount:i=g.LESS,pagesCount:l,indicatedPages:r=[],disabledPages:t=[],onItemHover:P,labels:d,children:E})=>{const[x,p]=a.useState(1),m=i===g.MORE,e=v||x,o=a.useCallback(n=>{p(n),u==null||u(n)},[]),b=a.useCallback(()=>{if(e===1)return;const n=e-1,s=S(n,t);s<1||o(s)},[e,t,o]),c=a.useCallback(()=>{if(e===l)return;const n=e+1,s=T(n,t);s>l||o(s)},[e,t,o,l]),f=a.useMemo(()=>({goToNextPage:c,goToPreviousPage:b,goToPage:o,currentPage:e,visibleElementsCount:i,indicatedPages:r,disabledPages:t,pagesCount:l,onItemHover:P,labels:d,isMaxVisibleElementCount:m}),[c,b,o,e,i,r,t,l,P,d,m]);return a.createElement(C.Provider,{value:f},E)};export{C as PaginationContext,A as PaginationProvider};
+//# sourceMappingURL=PaginationContext.js.map

package/dist/components/pagination/pagination-context/PaginationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage\n} from '../pagination.helper'\nimport type { TPaginationContext, TPaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<TPaginationContext>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  visibleElementsCount: VisibleElementsAmount.LESS,\n  pagesCount: 0,\n  onItemHover: () => null,\n  labels: {},\n  isMaxVisibleElementCount: false,\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider: React.FC<TPaginationProviderProps> = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover,\n  labels,\n  children\n}) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n  const isMaxVisibleElementCount =\n    visibleElementsCount === VisibleElementsAmount.MORE\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback((pageNumber: number) => {\n    setInternalCurrentPage(pageNumber)\n    onSelectedPageChange?.(pageNumber)\n  }, [])\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (currentPage === 1) {\n      return\n    }\n    const previousPage = currentPage - 1\n    const previousAvailablePage = findPreviousAvailablePage(\n      previousPage,\n      disabledPages\n    )\n\n    if (previousAvailablePage < 1) return\n    goToPage(previousAvailablePage)\n  }, [currentPage, disabledPages, goToPage])\n\n  const goToNextPage = React.useCallback(() => {\n    if (currentPage === pagesCount) {\n      return\n    }\n    const nextPage = currentPage + 1\n    const nextAvailablePage = findNextAvailablePage(nextPage, disabledPages)\n\n    if (nextAvailablePage > pagesCount) return\n    goToPage(nextAvailablePage)\n  }, [currentPage, disabledPages, goToPage, pagesCount])\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      visibleElementsCount,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      labels,\n      isMaxVisibleElementCount\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    visibleElementsCount,\n    indicatedPages,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    labels,\n    isMaxVisibleElementCount\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"names":["PaginationContext","React","VisibleElementsAmount","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","isMaxVisibleElementCount","currentPage","goToPage","pageNumber","goToPreviousPage","previousPage","previousAvailablePage","findPreviousAvailablePage","goToNextPage","nextPage","nextAvailablePage","findNextAvailablePage","value"],"mappings":"gMASaA,EAAoBC,EAAM,cAAkC,CACvE,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,qBAAsBC,EAAsB,KAC5C,WAAY,EACZ,YAAa,IAAM,KACnB,OAAQ,CACR,EAAA,yBAA0B,GAC1B,eAAgB,CAChB,EAAA,cAAe,CAAA,CACjB,CAAC,EAEYC,EAAyD,CAAC,CACrE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBJ,EAAsB,KAC7C,WAAAK,EACA,eAAAC,EAAiB,CAAA,EACjB,cAAAC,EAAgB,GAChB,YAAAC,EACA,OAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAChEc,EACJT,IAAyBJ,EAAsB,KAE3Cc,EAAcX,GAAgBQ,EAE9BI,EAAWhB,EAAM,YAAaiB,GAAuB,CACzDJ,EAAuBI,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EAAG,EAAE,EAECC,EAAmBlB,EAAM,YAAY,IAAM,CAC/C,GAAIe,IAAgB,EAClB,OAEF,MAAMI,EAAeJ,EAAc,EAC7BK,EAAwBC,EAC5BF,EACAX,CACF,EAEIY,EAAwB,GAC5BJ,EAASI,CAAqB,CAChC,EAAG,CAACL,EAAaP,EAAeQ,CAAQ,CAAC,EAEnCM,EAAetB,EAAM,YAAY,IAAM,CAC3C,GAAIe,IAAgBT,EAClB,OAEF,MAAMiB,EAAWR,EAAc,EACzBS,EAAoBC,EAAsBF,EAAUf,CAAa,EAEnEgB,EAAoBlB,GACxBU,EAASQ,CAAiB,CAC5B,EAAG,CAACT,EAAaP,EAAeQ,EAAUV,CAAU,CAAC,EAE/CoB,EAAQ1B,EAAM,QAAQ,KACnB,CACL,aAAAsB,EACA,iBAAAJ,EACA,SAAAF,EACA,YAAAD,EACA,qBAAAV,EACA,eAAAE,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,OAAAC,EACA,yBAAAI,CACF,GACC,CACDQ,EACAJ,EACAF,EACAD,EACAV,EACAE,EACAC,EACAF,EACAG,EACAC,EACAI,CACF,CAAC,EAED,OACEd,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO2B,CAChCf,EAAAA,CACH,CAEJ"}

package/dist/components/pagination/pagination.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const TRUNCATED_THRESHOLD = 4;
+export declare enum VisibleElementsAmount {
+    LESS = 6,
+    MORE = 8
+}

package/dist/components/pagination/pagination.constants.js

@@ -0,0 +1,2 @@
+const e=4;var S=(E=>(E[E.LESS=6]="LESS",E[E.MORE=8]="MORE",E))(S||{});export{e as TRUNCATED_THRESHOLD,S as VisibleElementsAmount};
+//# sourceMappingURL=pagination.constants.js.map

package/dist/components/pagination/pagination.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.constants.js","sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export const TRUNCATED_THRESHOLD = 4\n\nexport enum VisibleElementsAmount {\n  LESS = 6,\n  MORE = 8\n}\n"],"names":["TRUNCATED_THRESHOLD","VisibleElementsAmount"],"mappings":"AAAO,MAAMA,EAAsB,EAEvB,IAAAC,GAAAA,IACVA,EAAAA,EAAA,KAAO,GAAP,OACAA,EAAAA,EAAA,KAAO,GAAP,OAFUA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/components/pagination/pagination.helper.d.ts

@@ -0,0 +1,3 @@
+export declare const getPaginationItemsToRender: (currentPage: number, pagesCount: number, truncatedThreshold: number, isMaxVisibleElementCount: boolean) => number[];
+export declare const findNextAvailablePage: (startPage: number, disabledPages: number[]) => number;
+export declare const findPreviousAvailablePage: (startPage: number, disabledPages: number[]) => number;

package/dist/components/pagination/pagination.helper.js

@@ -0,0 +1,2 @@
+const a=(t,l,e,n)=>{const i=Array.from({length:l-1},(c,r)=>r+1);return l<=e?i:t<e-1?i.slice(0,n?4:2):t>=i.length-(n?3:1)?i.slice(n?-4:-2):i.slice(t+(n?-3:-2),t+(n?1:0))},o=(t,l)=>{let e=t;for(;l.includes(e);)e++;return e},s=(t,l)=>{let e=t;for(;l.includes(e);)e--;return e};export{o as findNextAvailablePage,s as findPreviousAvailablePage,a as getPaginationItemsToRender};
+//# sourceMappingURL=pagination.helper.js.map

package/dist/components/pagination/pagination.helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["export const getPaginationItemsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  truncatedThreshold: number,\n  isMaxVisibleElementCount: boolean\n): number[] => {\n  const listOfPages = Array.from(\n    { length: pagesCount - 1 },\n    (_, index) => index + 1\n  )\n\n  if (pagesCount <= truncatedThreshold) return listOfPages\n\n  // If the current page is before the 3rd page\n  // Render pagination items from 1 to 4 or 1 to 2\n  if (currentPage < truncatedThreshold - 1) {\n    return listOfPages.slice(0, isMaxVisibleElementCount ? 4 : 2)\n  } else if (\n    currentPage >=\n    listOfPages.length - (isMaxVisibleElementCount ? 3 : 1)\n  ) {\n    // If the current page is within the last 3 pages or the last page\n    // Render the last 4 or 2 pagination items\n    return listOfPages.slice(isMaxVisibleElementCount ? -4 : -2)\n  }\n  // Otherwise render pagination items from the range of n-3 to n+1 or n-2 to n\n  return listOfPages.slice(\n    currentPage + (isMaxVisibleElementCount ? -3 : -2),\n    currentPage + (isMaxVisibleElementCount ? 1 : 0)\n  )\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number => {\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number => {\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"names":["getPaginationItemsToRender","currentPage","pagesCount","truncatedThreshold","isMaxVisibleElementCount","listOfPages","_","index","findNextAvailablePage","startPage","disabledPages","nextPage","findPreviousAvailablePage","previousPage"],"mappings":"AAAa,MAAAA,EAA6B,CACxCC,EACAC,EACAC,EACAC,IACa,CACb,MAAMC,EAAc,MAAM,KACxB,CAAE,OAAQH,EAAa,CAAE,EACzB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OAAIL,GAAcC,EAA2BE,EAIzCJ,EAAcE,EAAqB,EAC9BE,EAAY,MAAM,EAAGD,EAA2B,EAAI,CAAC,EAE5DH,GACAI,EAAY,QAAUD,EAA2B,EAAI,GAI9CC,EAAY,MAAMD,EAA2B,GAAK,EAAE,EAGtDC,EAAY,MACjBJ,GAAeG,EAA2B,GAAK,IAC/CH,GAAeG,EAA2B,EAAI,EAChD,CACF,EAEaI,EAAwB,CACnCC,EACAC,IACW,CACX,IAAIC,EAAWF,EACf,KAAOC,EAAc,SAASC,CAAQ,GACpCA,IAEF,OAAOA,CACT,EAEaC,EAA4B,CACvCH,EACAC,IACW,CACX,IAAIG,EAAeJ,EACnB,KAAOC,EAAc,SAASG,CAAY,GACxCA,IAEF,OAAOA,CACT"}

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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { TcolorScheme } from '../../experiments/color-scheme';
+import { CSS } from '../../stitches';
+import { Box } from '..';
+interface ILabels {
+    popoverTriggerLabel?: string;
+    nextPageButtonLabel?: string;
+    previousPageButtonLabel?: string;
+}
+interface TBasePaginationType {
+    visibleElementsCount: TVisibleElementsCount;
+    indicatedPages: number[];
+    disabledPages: number[];
+    onItemHover?: (pageNumber: number) => void;
+    labels?: ILabels;
+}
+export declare type TVisibleElementsCount = 6 | 8;
+export declare type TPaginationProps = React.ComponentProps<typeof Box> & TPaginationProviderProps & {
+    colorScheme?: TcolorScheme;
+    indicatedPages?: number[];
+    disabledPages?: number[];
+    visibleElementsCount?: TVisibleElementsCount;
+};
+export declare type TPaginationProviderProps = {
+    onSelectedPageChange: (pageNumber: number) => void;
+    pagesCount: number;
+    selectedPage?: number;
+} & TBasePaginationType;
+export declare type TPaginationContext = {
+    goToPage: (pagenumber: number) => void;
+    goToPreviousPage: () => void;
+    goToNextPage: () => void;
+    currentPage: number;
+    pagesCount: number;
+    isMaxVisibleElementCount: boolean;
+} & TBasePaginationType;
+export interface IPaginationItemProps {
+    pageNumber: number;
+    css?: CSS;
+    onItemHover?: (pageNumber: number) => void;
+}
+export {};

package/dist/components/pagination/usePagination.d.ts

@@ -0,0 +1,2 @@
+import type { TPaginationContext } from './types';
+export declare const usePagination: () => TPaginationContext;

package/dist/components/pagination/usePagination.js

@@ -0,0 +1,2 @@
+import*as o from"react";import{PaginationContext as n}from"./pagination-context/PaginationContext.js";const r=()=>{const t=o.useContext(n);if(!t)throw new Error("Ensure that you wrap any components with the PaginationProvider component");return t};export{r as usePagination};
+//# sourceMappingURL=usePagination.js.map

package/dist/components/pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { TPaginationContext } from './types'\n\nexport const usePagination = (): TPaginationContext => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"names":["usePagination","context","React","PaginationContext"],"mappings":"sGAKa,MAAAA,EAAgB,IAA0B,CACrD,MAAMC,EAAUC,EAAM,WAAWC,CAAiB,EAElD,GAAI,CAACF,EACH,MAAM,IAAI,MACR,2EACF,EAGF,OAAOA,CACT"}