@byline/ui 0.9.3 → 0.10.1

package/dist/components/pager/last-button.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import classnames from "classnames";
+import { ChevronRightDoubleIcon } from "../../icons/chevron-right-double-icon.js";
+import { usePager } from "./pagination.js";
+import pagination_module from "./pagination.module.js";
+const LastButton = ({ ref, className, disabled, count, render, children, ...rest })=>{
+    const { variant } = usePager();
+    const sharedProps = {
+        className: classnames(pagination_module["last-button"], pagination_module[variant], pagination_module["rounded-right"], 'pagination-last', className),
+        disabled,
+        title: 'Last',
+        'data-testid': 'pagination-last',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'Last'
+        },
+        ...rest
+    };
+    return /*#__PURE__*/ jsx("li", {
+        className: pagination_module["mobile-toggle"],
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
+            ref: ref,
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronRightDoubleIcon, {
+                width: "18px",
+                height: "18px"
+            })
+        })
+    });
+};
+LastButton.displayName = 'LastButton';
+export { LastButton };

package/dist/components/pager/next-button.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { PagerButtonProps, RefType } from './pagination';
+export type NextButtonProps = PagerButtonProps & {
+    page: number | null;
+};
+export declare const NextButton: {
+    ({ ref, className, disabled, page, render, children, ...rest }: NextButtonProps & {
+        ref?: React.RefObject<RefType>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=next-button.d.ts.map

package/dist/components/pager/next-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/next-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU;oEAQpB,eAAe,GAAG;QACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CAiCA,CAAA"}

package/dist/components/pager/next-button.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import classnames from "classnames";
+import { ChevronRightIcon } from "../../icons/chevron-right-icon.js";
+import { usePager } from "./pagination.js";
+import pagination_module from "./pagination.module.js";
+const NextButton = ({ ref, className, disabled, page, render, children, ...rest })=>{
+    const { variant, showLastButton } = usePager();
+    const sharedProps = {
+        className: classnames(pagination_module["next-button"], [
+            pagination_module[variant]
+        ], {
+            [pagination_module["rounded-right"]]: null == showLastButton || false === showLastButton
+        }, 'pagination-next', className),
+        disabled,
+        title: 'Next',
+        'data-testid': 'pagination-next',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'Next'
+        },
+        ...rest
+    };
+    return /*#__PURE__*/ jsx("li", {
+        className: pagination_module["mobile-toggle"],
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
+            ref: ref,
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
+                width: "18px",
+                height: "18px"
+            })
+        })
+    });
+};
+NextButton.displayName = 'NextButton';
+export { NextButton };

package/dist/components/pager/number-button.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PagerButtonProps, RefType } from './pagination';
+export type NumberButtonProps = PagerButtonProps & {
+    page: number | null;
+    activeClassName?: string;
+    selected?: boolean;
+};
+export declare const NumberButton: {
+    ({ ref, page, className, disabled, activeClassName, render, children, ...rest }: NumberButtonProps & {
+        ref?: React.RefObject<RefType>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=number-button.d.ts.map

package/dist/components/pager/number-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/number-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IACjD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,YAAY;qFAStB,iBAAiB,GAAG;QACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CAwDA,CAAA"}

package/dist/components/pager/number-button.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import classnames from "classnames";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { usePager } from "./pagination.js";
+import pagination_module from "./pagination.module.js";
+const NumberButton = ({ ref, page, className, disabled, activeClassName, render, children, ...rest })=>{
+    const mobile = useMediaQuery('(max-width: 640px)');
+    const { variant, currentPage, count, showFirstButton, showLastButton, hideNextButton, hidePrevButton } = usePager();
+    const active = page === currentPage;
+    const sharedProps = {
+        className: classnames(pagination_module["number-button"], [
+            pagination_module[variant]
+        ], {
+            [pagination_module.active]: true === active,
+            active: true === active
+        }, {
+            [pagination_module["rounded-left"]]: 1 === page && (!(showFirstButton ?? false) && (hidePrevButton ?? false) || mobile)
+        }, {
+            [pagination_module["rounded-right"]]: page === count && (!(showLastButton ?? false) && (hideNextButton ?? false) || mobile)
+        }, 'pagination-number', className),
+        'data-testid': classnames({
+            'pager-number-active': currentPage === page,
+            [`pager-number-${page}`]: currentPage !== page
+        }).length > 0 || void 0,
+        disabled,
+        'aria-current': currentPage === page,
+        'aria-label': currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`,
+        ...rest
+    };
+    return /*#__PURE__*/ jsx("li", {
+        className: "flex",
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
+            ref: ref,
+            ...sharedProps,
+            children: children ?? page
+        })
+    });
+};
+NumberButton.displayName = 'NumberButton';
+export { NumberButton };

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Ellipses } from './ellipses.js';
+import type { Variant } from './@types';
+import type { UsePaginationItem, UsePaginationProps } from './hooks/types/usePagination';
+export interface PagerContextType {
+    variant: Variant;
+    count: number;
+    currentPage: number;
+    hideNextButton?: boolean;
+    hidePrevButton?: boolean;
+    items: UsePaginationItem[];
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
+    eventsEnabled?: boolean;
+}
+export declare const PagerContext: React.Context<PagerContextType>;
+/**
+ * See ./hooks/types/usePagination.ts
+ */
+export interface PaginationProps extends UsePaginationProps {
+    className?: string;
+    'aria-label'?: string;
+    variant?: Variant;
+    children?: React.ReactNode;
+}
+export declare const Pagination: {
+    ({ children, variant, ...rest }: PaginationProps): React.JSX.Element;
+    displayName: string;
+    Pager: {
+        ({ renderFirst, renderPrevious, renderPageNumber, renderNext, renderLast, renderEllipses, }: PagerProps): React.JSX.Element;
+        displayName: string;
+    };
+    Root: {
+        ({ ref, className, itemsClassName, children, ariaLabel, dataTestId, ...rest }: RootProps & {
+            ref?: React.RefObject<RootElement>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    First: {
+        ({ ref, className, disabled, render, children, ...rest }: PagerButtonProps & {
+            ref?: React.RefObject<RefType>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    Previous: {
+        ({ ref, className, disabled, render, children, ...rest }: PagerButtonProps & {
+            ref?: React.RefObject<RefType>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    Number: {
+        ({ ref, page, className, disabled, activeClassName, render, children, ...rest }: import("./number-button").NumberButtonProps & {
+            ref?: React.RefObject<RefType>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    Next: {
+        ({ ref, className, disabled, page, render, children, ...rest }: import("./next-button").NextButtonProps & {
+            ref?: React.RefObject<RefType>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    Last: {
+        ({ ref, className, disabled, count, render, children, ...rest }: import("./last-button").LastButtonProps & {
+            ref?: React.RefObject<RefType>;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    Ellipses: typeof Ellipses;
+};
+export declare function usePager(): PagerContextType;
+export type RefType = HTMLButtonElement | HTMLElement;
+export type PagerButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    render?: React.ReactElement;
+    onClick?: React.ReactEventHandler<Element> | undefined;
+};
+export interface PagerProps {
+    children?: React.ReactNode;
+    renderFirst?: (key: string, item: UsePaginationItem) => React.ReactNode;
+    renderPrevious?: (key: string, item: UsePaginationItem) => React.ReactNode;
+    renderPageNumber?: (key: string, item: UsePaginationItem) => React.ReactNode;
+    renderNext?: (key: string, item: UsePaginationItem) => React.ReactNode;
+    renderLast?: (key: string, item: UsePaginationItem, count: number) => React.ReactNode;
+    renderEllipses?: (key: string) => React.ReactNode;
+}
+export type RootElement = React.ComponentRef<'nav'>;
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'nav'>;
+export interface RootProps extends PrimitiveRootProps {
+    className?: string;
+    itemsClassName?: string;
+    dataTestId?: string;
+    ariaLabel?: string;
+    children?: React.ReactNode;
+}
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pager/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pager/pagination.tsx"],"names":[],"mappings":"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"}

package/dist/components/pager/pagination.js

@@ -0,0 +1,134 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import react, { useContext } from "react";
+import classnames from "classnames";
+import { Ellipses } from "./ellipses.js";
+import { FirstButton } from "./first-button.js";
+import { usePagination } from "./hooks/usePagination.js";
+import { LastButton } from "./last-button.js";
+import { NextButton } from "./next-button.js";
+import { NumberButton } from "./number-button.js";
+import pagination_module from "./pagination.module.js";
+import { PreviousButton } from "./previous-button.js";
+const PAGINATION_NAME = 'Pagination';
+const ROOT_NAME = 'Root';
+const PAGER_NAME = 'Pager';
+const PagerContext = /*#__PURE__*/ react.createContext({
+    variant: 'default',
+    count: 1,
+    currentPage: 1,
+    hideNextButton: false,
+    hidePrevButton: false,
+    items: [],
+    showFirstButton: false,
+    showLastButton: false,
+    eventsEnabled: false
+});
+const Pagination = ({ children, variant = 'default', ...rest })=>{
+    const { items } = usePagination({
+        ...rest
+    });
+    const { count, page: currentPage, hideNextButton, hidePrevButton, showFirstButton, showLastButton, onChange } = rest;
+    const eventsEnabled = null != onChange;
+    const context = react.useMemo(()=>({
+            variant,
+            items,
+            count,
+            currentPage,
+            hideNextButton,
+            hidePrevButton,
+            showFirstButton,
+            showLastButton,
+            eventsEnabled
+        }), [
+        variant,
+        items,
+        count,
+        currentPage,
+        hideNextButton,
+        hidePrevButton,
+        showFirstButton,
+        showLastButton,
+        eventsEnabled
+    ]);
+    return /*#__PURE__*/ jsx(PagerContext, {
+        value: context,
+        children: children
+    });
+};
+Pagination.displayName = PAGINATION_NAME;
+function usePager() {
+    const context = useContext(PagerContext);
+    if (void 0 === context) throw new Error('usePager must be used within a PagerContext');
+    return context;
+}
+const Pager = ({ renderFirst = (key, item)=>/*#__PURE__*/ jsx(Pagination.First, {
+        disabled: item.disabled,
+        onClick: item.onClick
+    }, key), renderPrevious = (key, item)=>/*#__PURE__*/ jsx(Pagination.Previous, {
+        disabled: item.disabled,
+        onClick: item.onClick
+    }, key), renderPageNumber = (key, item)=>/*#__PURE__*/ jsx(Pagination.Number, {
+        page: item.page,
+        disabled: item.disabled,
+        selected: item.selected,
+        activeClassName: "active",
+        onClick: item.onClick
+    }, key), renderNext = (key, item)=>/*#__PURE__*/ jsx(Pagination.Next, {
+        page: item.page,
+        disabled: item.disabled,
+        onClick: item.onClick
+    }, key), renderLast = (key, item, count)=>/*#__PURE__*/ jsx(Pagination.Last, {
+        disabled: item.disabled,
+        count: count,
+        onClick: item.onClick
+    }, key), renderEllipses = (key)=>/*#__PURE__*/ jsx(Ellipses, {}, key) })=>{
+    const { items, count } = react.useContext(PagerContext);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: items.map((item, index)=>{
+            const key = `${item.page}-${index}`;
+            switch(item.type){
+                case 'start-ellipsis':
+                case 'end-ellipsis':
+                    return renderEllipses(key);
+                case 'first':
+                    return renderFirst(key, item);
+                case 'previous':
+                    return renderPrevious(key, item);
+                case 'page':
+                    return renderPageNumber(key, item);
+                case 'next':
+                    return renderNext(key, item);
+                case 'last':
+                    return renderLast(key, item, count);
+                default:
+                    return null;
+            }
+        })
+    });
+};
+Pager.displayName = PAGER_NAME;
+const Root = ({ ref, className, itemsClassName, children, ariaLabel, dataTestId, ...rest })=>{
+    const { variant } = usePager();
+    return /*#__PURE__*/ jsx("nav", {
+        "data-testid": dataTestId,
+        ref: ref,
+        className: classnames('infonomic-pagination-root', pagination_module["pagination-root"], 'pagination-root', className),
+        ...rest,
+        "aria-label": ariaLabel ?? 'Pager navigation',
+        children: /*#__PURE__*/ jsx("ul", {
+            className: classnames('infonomic-pagination-items', pagination_module["pagination-items"], pagination_module[variant], itemsClassName),
+            children: children
+        })
+    });
+};
+Root.displayName = ROOT_NAME;
+Pagination.Pager = Pager;
+Pagination.Root = Root;
+Pagination.First = FirstButton;
+Pagination.Previous = PreviousButton;
+Pagination.Number = NumberButton;
+Pagination.Next = NextButton;
+Pagination.Last = LastButton;
+Pagination.Ellipses = Ellipses;
+export { PagerContext, Pagination, usePager };

package/dist/components/pager/pagination.module.js

@@ -0,0 +1,29 @@
+import "./pagination_module.css";
+const pagination_module = {
+    "pagination-root": "pagination-root-yB674z",
+    paginationRoot: "pagination-root-yB674z",
+    "pagination-items": "pagination-items-AfreHw",
+    paginationItems: "pagination-items-AfreHw",
+    dashboard: "dashboard-Yp2io_",
+    default: "default-OgsdD0",
+    classic: "classic-B9jGW1",
+    "number-button": "number-button-bFXP3X",
+    numberButton: "number-button-bFXP3X",
+    "rounded-left": "rounded-left-urOfB4",
+    roundedLeft: "rounded-left-urOfB4",
+    "first-button": "first-button-wfGrPE",
+    firstButton: "first-button-wfGrPE",
+    "previous-button": "previous-button-XaiuAP",
+    previousButton: "previous-button-XaiuAP",
+    "last-button": "last-button-Brbqt2",
+    lastButton: "last-button-Brbqt2",
+    "next-button": "next-button-WN4Cb5",
+    nextButton: "next-button-WN4Cb5",
+    "rounded-right": "rounded-right-e9xKjR",
+    roundedRight: "rounded-right-e9xKjR",
+    ellipses: "ellipses-D_NPD7",
+    active: "active-SfvR_g",
+    "mobile-toggle": "mobile-toggle-iw4kkx",
+    mobileToggle: "mobile-toggle-iw4kkx"
+};
+export default pagination_module;

package/dist/components/pager/pagination_module.css

@@ -0,0 +1,103 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.pagination-root-yB674z, .infonomic-pagination-root) {
+    align-items: center;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.pagination-items-AfreHw, .infonomic-pagination-items) {
+    align-items: center;
+    list-style: none;
+    display: flex;
+  }
+
+  .pagination-items-AfreHw.dashboard-Yp2io_ li, .pagination-items-AfreHw.default-OgsdD0 li {
+    margin-right: -1px;
+  }
+
+  .infonomic-pagination-items.dashboard li {
+    margin-right: -1px;
+  }
+
+  .infonomic-pagination-items.default li {
+    margin-right: -1px;
+  }
+
+  .pagination-items-AfreHw.classic-B9jGW1 li {
+    margin-right: 0;
+  }
+
+  .infonomic-pagination-items.classic li {
+    margin-right: 0;
+  }
+
+  .pagination-items-AfreHw.classic-B9jGW1 {
+    gap: 6px;
+  }
+
+  .infonomic-pagination-items.classic {
+    gap: 6px;
+  }
+
+  .number-button-bFXP3X.dashboard-Yp2io_.rounded-left-urOfB4, .number-button-bFXP3X.default-OgsdD0.rounded-left-urOfB4, .first-button-wfGrPE.dashboard-Yp2io_.rounded-left-urOfB4, .first-button-wfGrPE.default-OgsdD0.rounded-left-urOfB4, .previous-button-XaiuAP.dashboard-Yp2io_.rounded-left-urOfB4, .previous-button-XaiuAP.default-OgsdD0.rounded-left-urOfB4, .last-button-Brbqt2.dashboard-Yp2io_.rounded-left-urOfB4, .last-button-Brbqt2.default-OgsdD0.rounded-left-urOfB4, .next-button-WN4Cb5.dashboard-Yp2io_.rounded-left-urOfB4, .next-button-WN4Cb5.default-OgsdD0.rounded-left-urOfB4 {
+    border-top-left-radius: var(--border-radius-sm);
+    border-bottom-left-radius: var(--border-radius-sm);
+  }
+
+  .number-button-bFXP3X.dashboard-Yp2io_.rounded-right-e9xKjR, .number-button-bFXP3X.default-OgsdD0.rounded-right-e9xKjR, .first-button-wfGrPE.dashboard-Yp2io_.rounded-right-e9xKjR, .first-button-wfGrPE.default-OgsdD0.rounded-right-e9xKjR, .previous-button-XaiuAP.dashboard-Yp2io_.rounded-right-e9xKjR, .previous-button-XaiuAP.default-OgsdD0.rounded-right-e9xKjR, .last-button-Brbqt2.dashboard-Yp2io_.rounded-right-e9xKjR, .last-button-Brbqt2.default-OgsdD0.rounded-right-e9xKjR, .next-button-WN4Cb5.dashboard-Yp2io_.rounded-right-e9xKjR, .next-button-WN4Cb5.default-OgsdD0.rounded-right-e9xKjR {
+    border-top-right-radius: var(--border-radius-sm);
+    border-bottom-right-radius: var(--border-radius-sm);
+  }
+
+  .ellipses-D_NPD7, .last-button-Brbqt2, .next-button-WN4Cb5, .previous-button-XaiuAP, .first-button-wfGrPE, .number-button-bFXP3X {
+    border: 1px solid var(--stroke-primary);
+    background-color: var(--background);
+    height: 32px;
+    color: var(--foreground);
+    line-height: 1;
+    font-size: var(--font-size-sm);
+    justify-content: center;
+    align-items: center;
+    margin-left: 0;
+    display: flex;
+  }
+
+  .previous-button-XaiuAP, .last-button-Brbqt2, .next-button-WN4Cb5, .first-button-wfGrPE {
+    width: 38px;
+  }
+
+  .ellipses-D_NPD7, .number-button-bFXP3X {
+    min-width: 42px;
+  }
+
+  .last-button-Brbqt2:hover, .next-button-WN4Cb5:hover, .number-button-bFXP3X:hover, .previous-button-XaiuAP:hover, .first-button-wfGrPE:hover {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .last-button-Brbqt2:disabled, .last-button-Brbqt2[disabled], .next-button-WN4Cb5:disabled, .next-button-WN4Cb5[disabled], .number-button-bFXP3X:disabled, .number-button-bFXP3X[disabled], .previous-button-XaiuAP:disabled, .previous-button-XaiuAP[disabled], .first-button-wfGrPE:disabled, .first-button-wfGrPE[disabled] {
+    cursor: default;
+  }
+
+  .number-button-bFXP3X.active-SfvR_g {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .mobile-toggle-iw4kkx {
+    display: none;
+  }
+
+  @media (min-width: 40rem) {
+    .mobile-toggle-iw4kkx {
+      display: flex;
+    }
+  }
+
+  :is(.dark, [data-theme="dark"]) .ellipses-D_NPD7, :is(.dark, [data-theme="dark"]) .number-button-bFXP3X, :is(.dark, [data-theme="dark"]) .next-button-WN4Cb5, :is(.dark, [data-theme="dark"]) .last-button-Brbqt2, :is(.dark, [data-theme="dark"]) .previous-button-XaiuAP, :is(.dark, [data-theme="dark"]) .first-button-wfGrPE {
+    border-color: var(--border-color);
+  }
+}
+

package/dist/components/pager/previous-button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PagerButtonProps, RefType } from './pagination';
+export declare const PreviousButton: {
+    ({ ref, className, disabled, render, children, ...rest }: PagerButtonProps & {
+        ref?: React.RefObject<RefType>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=previous-button.d.ts.map

package/dist/components/pager/previous-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previous-button.d.ts","sourceRoot":"","sources":["../../../src/components/pager/previous-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE7D,eAAO,MAAM,cAAc;8DAOxB,gBAAgB,GAAG;QACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KAC/B;;CAiCA,CAAA"}

package/dist/components/pager/previous-button.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import classnames from "classnames";
+import { ChevronLeftIcon } from "../../icons/chevron-left-icon.js";
+import { usePager } from "./pagination.js";
+import pagination_module from "./pagination.module.js";
+const PreviousButton = ({ ref, className, disabled, render, children, ...rest })=>{
+    const { showFirstButton, variant } = usePager();
+    const sharedProps = {
+        className: classnames(pagination_module["previous-button"], pagination_module[variant], {
+            [pagination_module["rounded-left"]]: null == showFirstButton || false === showFirstButton
+        }, 'pagination-previous', className),
+        disabled,
+        title: 'Previous',
+        'data-testid': 'pagination-previous',
+        ...disabled ? {
+            'aria-disabled': true
+        } : {
+            'aria-label': 'Previous'
+        },
+        ...rest
+    };
+    return /*#__PURE__*/ jsx("li", {
+        className: pagination_module["mobile-toggle"],
+        children: render ? /*#__PURE__*/ react.cloneElement(render, {
+            ref,
+            ...sharedProps
+        }, children) : /*#__PURE__*/ jsx("button", {
+            ref: ref,
+            ...sharedProps,
+            children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {
+                width: "18px",
+                height: "18px"
+            })
+        })
+    });
+};
+PreviousButton.displayName = 'PreviousButton';
+export { PreviousButton };

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+}
+export declare const ScrollArea: ({ children, style, className }: ScrollAreaProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAK9E,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;CAAG;AAE1F,eAAO,MAAM,UAAU,GAAI,gCAAgC,eAAe,sBAsBzE,CAAA"}

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import classnames from "classnames";
+import scroll_area_module from "./scroll-area.module.js";
+const scroll_area_ScrollArea = ({ children, style, className })=>/*#__PURE__*/ jsxs(ScrollArea.Root, {
+        style: style,
+        className: classnames('infonomic-scroll-area', scroll_area_module.root, className),
+        children: [
+            /*#__PURE__*/ jsx(ScrollArea.Viewport, {
+                className: classnames('infonomic-scroll-area-viewport', scroll_area_module.viewport),
+                children: /*#__PURE__*/ jsx(ScrollArea.Content, {
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
+                className: classnames('infonomic-scroll-area-scrollbar', scroll_area_module.scrollbar),
+                orientation: "vertical",
+                children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
+                    className: classnames('infonomic-scroll-area-thumb', scroll_area_module.thumb)
+                })
+            }),
+            /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
+                className: classnames('infonomic-scroll-area-scrollbar', scroll_area_module.scrollbar),
+                orientation: "horizontal",
+                children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
+                    className: classnames('infonomic-scroll-area-thumb', scroll_area_module.thumb)
+                })
+            }),
+            /*#__PURE__*/ jsx(ScrollArea.Corner, {
+                className: classnames('infonomic-scroll-area-corner', scroll_area_module.corner)
+            })
+        ]
+    });
+export { scroll_area_ScrollArea as ScrollArea };

package/dist/components/scroll-area/scroll-area.module.js

@@ -0,0 +1,9 @@
+import "./scroll-area_module.css";
+const scroll_area_module = {
+    root: "root-XJbuOo",
+    viewport: "viewport-TdOXwJ",
+    scrollbar: "scrollbar-Y2nCxA",
+    thumb: "thumb-G2gkhj",
+    corner: "corner-kCiYUz"
+};
+export default scroll_area_module;