@flipdish/ui-library 0.30.0 → 0.31.1

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

@@ -0,0 +1,110 @@
+import type { CSSProperties, FC, ReactNode } from 'react';
+type PaginationPage = {
+    /** The type of the pagination item. */
+    type: 'page';
+    /** The value of the pagination item. */
+    value: number;
+    /** Whether the pagination item is the current page. */
+    isCurrent: boolean;
+};
+type PaginationEllipsisType = {
+    type: 'ellipsis';
+    key: number;
+};
+type PaginationItemType = PaginationPage | PaginationEllipsisType;
+interface PaginationContextType {
+    /** The pages of the pagination. */
+    pages: PaginationItemType[];
+    /** The current page of the pagination. */
+    currentPage: number;
+    /** The total number of pages. */
+    total: number;
+    /** The function to call when the page changes. */
+    onPageChange: (page: number) => void;
+    /** Resolved root testid used to derive page/trigger `data-testid`s. */
+    testIdPrefix?: string;
+}
+export interface PaginationRootProps {
+    /** Number of sibling pages to show on each side of the current page */
+    siblingCount?: number;
+    /** Current active page number */
+    page: number;
+    /** Total number of pages */
+    total: number;
+    children: ReactNode;
+    /** The style of the pagination root. */
+    style?: CSSProperties;
+    /** The class name of the pagination root. */
+    className?: string;
+    /** Callback function that's called when the page changes with the new page number. */
+    onPageChange?: (page: number) => void;
+    /**
+     * Overrides the root `data-testid`. Defaults to `fd-pagination`. Page buttons and
+     * triggers derive their testids from this prefix (e.g. `<root>--page-2`, `<root>--next`).
+     */
+    'data-testid'?: string;
+}
+interface TriggerRenderProps {
+    isDisabled: boolean;
+    onClick: () => void;
+}
+interface TriggerProps {
+    /** The children of the trigger. Can be a render prop or a valid element. */
+    children: ReactNode | ((props: TriggerRenderProps) => ReactNode);
+    /** The style of the trigger. */
+    style?: CSSProperties;
+    /** The class name of the trigger. */
+    className?: string | ((args: {
+        isDisabled: boolean;
+    }) => string);
+    /** If true, the child element will be cloned and passed down the prop of the trigger. */
+    asChild?: boolean;
+    /** The direction of the trigger. */
+    direction: 'prev' | 'next';
+    /** The aria label of the trigger. */
+    ariaLabel?: string;
+}
+interface PaginationItemRenderProps {
+    isSelected: boolean;
+    onClick: () => void;
+    value: number;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+}
+export interface PaginationItemProps {
+    /** The value of the pagination item. */
+    value: number;
+    /** Whether the pagination item is the current page. */
+    isCurrent: boolean;
+    /** The children of the pagination item. Can be a render prop or a valid element. */
+    children?: ReactNode | ((props: PaginationItemRenderProps) => ReactNode);
+    /** The style object of the pagination item. */
+    style?: CSSProperties;
+    /** The class name of the pagination item. */
+    className?: string | ((args: {
+        isSelected: boolean;
+    }) => string);
+    /** The aria label of the pagination item. */
+    ariaLabel?: string;
+    /** If true, the child element will be cloned and passed down the prop of the item. */
+    asChild?: boolean;
+}
+interface PaginationEllipsisProps {
+    key: number;
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | (() => string);
+}
+interface PaginationContextComponentProps {
+    children: (pagination: PaginationContextType) => ReactNode;
+}
+export declare const Pagination: {
+    Root: ({ total, siblingCount, page, onPageChange, children, style, className, "data-testid": dataTestId, }: PaginationRootProps) => import("react").JSX.Element;
+    PrevTrigger: FC<Omit<TriggerProps, "direction">>;
+    NextTrigger: FC<Omit<TriggerProps, "direction">>;
+    Item: ({ value, isCurrent, children, style, className, ariaLabel, asChild }: PaginationItemProps) => import("react").JSX.Element;
+    Ellipsis: FC<PaginationEllipsisProps>;
+    Context: FC<PaginationContextComponentProps>;
+};
+export {};
+//# sourceMappingURL=PaginationBase.d.ts.map

package/dist/components/molecules/Pagination/components/PaginationBase.d.ts.map

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

package/dist/components/molecules/Pagination/components/PaginationBase.js

@@ -0,0 +1,223 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { createContext, useState, useCallback, useEffect, useContext, isValidElement, cloneElement } from 'react';
+
+const PaginationContext = createContext(undefined);
+const PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className, 'data-testid': dataTestId, }) => {
+    const [pages, setPages] = useState([]);
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'pagination', rootName: 'pagination' });
+    const createPaginationItems = useCallback(() => {
+        const items = [];
+        // Calculate the maximum number of pagination elements (pages, potential ellipsis, first and last) to show
+        const totalPageNumbers = siblingCount * 2 + 5;
+        // If the total number of items to show is greater than or equal to the total pages,
+        // we can simply list all pages without needing to collapse with ellipsis
+        if (totalPageNumbers >= total) {
+            for (let i = 1; i <= total; i++) {
+                items.push({
+                    type: 'page',
+                    value: i,
+                    isCurrent: i === page,
+                });
+            }
+        }
+        else {
+            // Calculate left and right sibling boundaries around the current page
+            const leftSiblingIndex = Math.max(page - siblingCount, 1);
+            const rightSiblingIndex = Math.min(page + siblingCount, total);
+            // Determine if we need to show ellipsis on either side
+            const showLeftEllipsis = leftSiblingIndex > 2;
+            const showRightEllipsis = rightSiblingIndex < total - 1;
+            // Case 1: No left ellipsis, but right ellipsis is needed
+            if (!showLeftEllipsis && showRightEllipsis) {
+                // Calculate how many page numbers to show starting from the beginning
+                const leftItemCount = siblingCount * 2 + 3;
+                const leftRange = range(1, leftItemCount);
+                // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+                leftRange.forEach((pageNum) => items.push({
+                    type: 'page',
+                    value: pageNum,
+                    isCurrent: pageNum === page,
+                }));
+                // Insert ellipsis after the left range and add the last page
+                items.push({ type: 'ellipsis', key: leftItemCount + 1 });
+                items.push({
+                    type: 'page',
+                    value: total,
+                    isCurrent: total === page,
+                });
+            }
+            // Case 2: Left ellipsis needed, but right ellipsis is not needed
+            else if (showLeftEllipsis && !showRightEllipsis) {
+                // Determine how many items from the end should be shown
+                const rightItemCount = siblingCount * 2 + 3;
+                const rightRange = range(total - rightItemCount + 1, total);
+                // Always show the first page, then add an ellipsis to indicate skipped pages
+                items.push({
+                    type: 'page',
+                    value: 1,
+                    isCurrent: page === 1,
+                });
+                items.push({ type: 'ellipsis', key: total - rightItemCount });
+                // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+                rightRange.forEach((pageNum) => items.push({
+                    type: 'page',
+                    value: pageNum,
+                    isCurrent: pageNum === page,
+                }));
+            }
+            // Case 3: Both left and right ellipsis are needed
+            else if (showLeftEllipsis && showRightEllipsis) {
+                // Always show the first page
+                items.push({
+                    type: 'page',
+                    value: 1,
+                    isCurrent: page === 1,
+                });
+                // Insert left ellipsis after the first page
+                items.push({ type: 'ellipsis', key: leftSiblingIndex - 1 });
+                // Show a range of pages around the current page
+                const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+                // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+                middleRange.forEach((pageNum) => items.push({
+                    type: 'page',
+                    value: pageNum,
+                    isCurrent: pageNum === page,
+                }));
+                // Insert right ellipsis and finally the last page
+                items.push({ type: 'ellipsis', key: rightSiblingIndex + 1 });
+                items.push({
+                    type: 'page',
+                    value: total,
+                    isCurrent: total === page,
+                });
+            }
+        }
+        return items;
+    }, [total, siblingCount, page]);
+    useEffect(() => {
+        const paginationItems = createPaginationItems();
+        setPages(paginationItems);
+    }, [createPaginationItems]);
+    const onPageChangeHandler = (newPage) => {
+        onPageChange?.(newPage);
+    };
+    const paginationContextValue = {
+        pages,
+        currentPage: page,
+        total,
+        onPageChange: onPageChangeHandler,
+        testIdPrefix: rootTestId,
+    };
+    return (jsx(PaginationContext.Provider, { value: paginationContextValue, children: jsx("nav", { "aria-label": "Pagination Navigation", "data-testid": rootTestId, style: style, className: className, children: children }) }));
+};
+/**
+ * Creates an array of numbers from start to end.
+ * @param start - The start number.
+ * @param end - The end number.
+ * @returns An array of numbers from start to end.
+ */
+const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, index) => index + start);
+};
+const Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error('Pagination components must be used within a Pagination.Root');
+    }
+    const { currentPage, total, onPageChange } = context;
+    const isDisabled = direction === 'prev' ? currentPage <= 1 : currentPage >= total;
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        const newPage = direction === 'prev' ? currentPage - 1 : currentPage + 1;
+        onPageChange?.(newPage);
+    };
+    const computedClassName = typeof className === 'function' ? className({ isDisabled }) : className;
+    const defaultAriaLabel = direction === 'prev' ? 'Previous Page' : 'Next Page';
+    const triggerTestId = context.testIdPrefix ? joinTestId(context.testIdPrefix, direction) : undefined;
+    // If the children is a render prop, we need to pass the isDisabled and onClick to the render prop.
+    if (typeof children === 'function') {
+        return jsx(Fragment, { children: children({ isDisabled, onClick: handleClick }) });
+    }
+    // If the children is a valid element, we need to clone it and pass the isDisabled and onClick to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            disabled: isDisabled,
+            isDisabled,
+            'aria-label': ariaLabel || defaultAriaLabel,
+            'data-testid': triggerTestId,
+            style: { ...children.props.style, ...style },
+            className: [computedClassName, children.props.className].filter(Boolean).join(' ') || undefined,
+        });
+    }
+    return (
+    // biome-ignore lint/a11y/useButtonType: This is a custom component and we need to use a button to wrap the children
+    jsx("button", { "aria-label": ariaLabel || defaultAriaLabel, "data-testid": triggerTestId, onClick: handleClick, disabled: isDisabled, style: style, className: computedClassName, children: children }));
+};
+const PaginationPrevTrigger = (props) => jsx(Trigger, { ...props, direction: "prev" });
+const PaginationNextTrigger = (props) => jsx(Trigger, { ...props, direction: "next" });
+const PaginationItem = ({ value, isCurrent, children, style, className, ariaLabel, asChild = false }) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error('Pagination components must be used within a <Pagination.Root />');
+    }
+    const { onPageChange } = context;
+    const isSelected = isCurrent;
+    const handleClick = () => {
+        onPageChange?.(value);
+    };
+    const itemTestId = context.testIdPrefix ? joinTestId(context.testIdPrefix, `page-${value}`) : undefined;
+    const computedClassName = typeof className === 'function' ? className({ isSelected }) : className;
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === 'function') {
+        return (jsx(Fragment, { children: children({
+                isSelected,
+                onClick: handleClick,
+                value,
+                'aria-current': isCurrent ? 'page' : undefined,
+                'aria-label': ariaLabel || `Page ${value}`,
+            }) }));
+    }
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            'aria-current': isCurrent ? 'page' : undefined,
+            'aria-label': ariaLabel || `Page ${value}`,
+            'data-testid': itemTestId,
+            style: { ...children.props.style, ...style },
+            className: [computedClassName, children.props.className].filter(Boolean).join(' ') || undefined,
+        });
+    }
+    return (
+    // A `<button>` cannot carry `role="listitem"` (axe `aria-allowed-role`), and
+    // `listitem` also requires a `role="list"` ancestor (`aria-required-parent`) —
+    // there isn't one. The button is a real page control; leave its implicit role.
+    // biome-ignore lint/a11y/useButtonType: This is a custom component and we need to use a button to wrap the children
+    jsx("button", { onClick: handleClick, style: style, className: computedClassName, "aria-current": isCurrent ? 'page' : undefined, "aria-label": ariaLabel || `Page ${value}`, "data-testid": itemTestId, children: children }));
+};
+const PaginationEllipsis = ({ children, style, className }) => {
+    const computedClassName = typeof className === 'function' ? className() : className;
+    return (jsx("span", { style: style, className: computedClassName, "aria-hidden": "true", children: children }));
+};
+const PaginationContextComponent = ({ children }) => {
+    const context = useContext(PaginationContext);
+    if (!context) {
+        throw new Error('Pagination components must be used within a Pagination.Root');
+    }
+    return jsx(Fragment, { children: children(context) });
+};
+const Pagination = {
+    Root: PaginationRoot,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    Context: PaginationContextComponent,
+};
+
+export { Pagination };
+//# sourceMappingURL=PaginationBase.js.map

package/dist/components/molecules/Pagination/components/PaginationBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBase.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationBase.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":"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"}

package/dist/components/molecules/Pagination/components/PaginationDot.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var PaginationBase = require('./PaginationBase.cjs');
+
+/**
+ * Row of dots showing position in a sequence without numbered buttons. Use for carousels and
+ * onboarding steps.
+ *
+ * @summary dot indicators showing position in a sequence
+ */
+const PaginationDot = ({ framed, className, size = 'md', isBrand, ...props }) => {
+    const sizes = {
+        md: {
+            root: cx.cx('gap-3', framed && 'p-2'),
+            button: 'h-2 w-2 after:-inset-x-1.5 after:-inset-y-2',
+        },
+        lg: {
+            root: cx.cx('gap-4', framed && 'p-3'),
+            button: 'h-2.5 w-2.5 after:-inset-x-2 after:-inset-y-3',
+        },
+    };
+    return (jsxRuntime.jsx(PaginationBase.Pagination.Root, { ...props, className: cx.cx('flex h-max w-max', sizes[size].root, framed && 'rounded-full bg-alpha-white/90 backdrop-blur', className), children: jsxRuntime.jsx(PaginationBase.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => page.type === 'page' ? (React.createElement(PaginationBase.Pagination.Item, { ...page, asChild: true, 
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                key: index, className: cx.cx('relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2', sizes[size].button, page.isCurrent && 'bg-fg-brand-primary_alt', isBrand && 'bg-fg-brand-secondary', isBrand && page.isCurrent && 'bg-fg-white') })) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+            React.createElement(PaginationBase.Pagination.Ellipsis, { ...page, key: index }))) }) }));
+};
+
+exports.PaginationDot = PaginationDot;
+//# sourceMappingURL=PaginationDot.cjs.map

package/dist/components/molecules/Pagination/components/PaginationDot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDot.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationDot.tsx"],"sourcesContent":[null],"names":["cx","_jsx","Pagination","_createElement"],"mappings":";;;;;;;AAeA;;;;;AAKG;MACU,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAsB,KAAI;AACzG,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE;YACF,IAAI,EAAEA,KAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,6CAA6C;AACtD,SAAA;AACD,QAAA,EAAE,EAAE;YACF,IAAI,EAAEA,KAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,+CAA+C;AACxD,SAAA;KACF;AAED,IAAA,QACEC,cAAA,CAACC,yBAAU,CAAC,IAAI,EAAA,EAAA,GACV,KAAK,EACT,SAAS,EAAEF,KAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,8CAA8C,EAAE,SAAS,CAAC,EAAA,QAAA,EAExHC,cAAA,CAACC,yBAAU,CAAC,OAAO,EAAA,EAAA,QAAA,EAChB,CAAC,EAAE,KAAK,EAAE,KACT,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACpB,IAAI,CAAC,IAAI,KAAK,MAAM,IAClBC,mBAAA,CAACD,yBAAU,CAAC,IAAI,EAAA,EAAA,GACV,IAAI,EACR,OAAO,EAAA,IAAA;;AAEP,gBAAA,GAAG,EAAE,KAAK,EACV,SAAS,EAAEF,KAAE,CACX,6IAA6I,EAC7I,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAClB,IAAI,CAAC,SAAS,IAAI,yBAAyB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,CAC3C,GACgB;;AAGnB,YAAAG,mBAAA,CAACD,yBAAU,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9C,CACF,EAAA,CAEgB,EAAA,CACL;AAEtB;;;;"}

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

@@ -0,0 +1,18 @@
+import type { PaginationRootProps } from './PaginationBase';
+interface PaginationDotProps extends Omit<PaginationRootProps, 'children'> {
+    /** The size of the pagination dot. */
+    size?: 'md' | 'lg';
+    /** Whether the pagination uses brand colors. */
+    isBrand?: boolean;
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+/**
+ * Row of dots showing position in a sequence without numbered buttons. Use for carousels and
+ * onboarding steps.
+ *
+ * @summary dot indicators showing position in a sequence
+ */
+export declare const PaginationDot: ({ framed, className, size, isBrand, ...props }: PaginationDotProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PaginationDot.d.ts.map

package/dist/components/molecules/Pagination/components/PaginationDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDot.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationDot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,UAAU,kBAAmB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACxE,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,gDAAuD,kBAAkB,gCA2CtG,CAAC"}

package/dist/components/molecules/Pagination/components/PaginationDot.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Pagination } from './PaginationBase.js';
+
+/**
+ * Row of dots showing position in a sequence without numbered buttons. Use for carousels and
+ * onboarding steps.
+ *
+ * @summary dot indicators showing position in a sequence
+ */
+const PaginationDot = ({ framed, className, size = 'md', isBrand, ...props }) => {
+    const sizes = {
+        md: {
+            root: cx('gap-3', framed && 'p-2'),
+            button: 'h-2 w-2 after:-inset-x-1.5 after:-inset-y-2',
+        },
+        lg: {
+            root: cx('gap-4', framed && 'p-3'),
+            button: 'h-2.5 w-2.5 after:-inset-x-2 after:-inset-y-3',
+        },
+    };
+    return (jsx(Pagination.Root, { ...props, className: cx('flex h-max w-max', sizes[size].root, framed && 'rounded-full bg-alpha-white/90 backdrop-blur', className), children: jsx(Pagination.Context, { children: ({ pages }) => pages.map((page, index) => page.type === 'page' ? (createElement(Pagination.Item, { ...page, asChild: true, 
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                key: index, className: cx('relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2', sizes[size].button, page.isCurrent && 'bg-fg-brand-primary_alt', isBrand && 'bg-fg-brand-secondary', isBrand && page.isCurrent && 'bg-fg-white') })) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+            createElement(Pagination.Ellipsis, { ...page, key: index }))) }) }));
+};
+
+export { PaginationDot };
+//# sourceMappingURL=PaginationDot.js.map

package/dist/components/molecules/Pagination/components/PaginationDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDot.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationDot.tsx"],"sourcesContent":[null],"names":["_jsx","_createElement"],"mappings":";;;;;AAeA;;;;;AAKG;MACU,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAsB,KAAI;AACzG,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,6CAA6C;AACtD,SAAA;AACD,QAAA,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,+CAA+C;AACxD,SAAA;KACF;AAED,IAAA,QACEA,GAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAA,GACV,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,8CAA8C,EAAE,SAAS,CAAC,EAAA,QAAA,EAExHA,GAAA,CAAC,UAAU,CAAC,OAAO,EAAA,EAAA,QAAA,EAChB,CAAC,EAAE,KAAK,EAAE,KACT,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACpB,IAAI,CAAC,IAAI,KAAK,MAAM,IAClBC,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAA,GACV,IAAI,EACR,OAAO,EAAA,IAAA;;AAEP,gBAAA,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,EAAE,CACX,6IAA6I,EAC7I,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAClB,IAAI,CAAC,SAAS,IAAI,yBAAyB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,CAC3C,GACgB;;AAGnB,YAAAA,aAAA,CAAC,UAAU,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9C,CACF,EAAA,CAEgB,EAAA,CACL;AAEtB;;;;"}

package/dist/components/molecules/Pagination/components/PaginationLine.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var PaginationBase = require('./PaginationBase.cjs');
+
+const PaginationLine = ({ framed, className, size = 'md', ...props }) => {
+    const sizes = {
+        md: {
+            root: cx.cx('gap-2', framed && 'p-2'),
+            button: 'h-1.5 w-full after:-inset-x-1.5 after:-inset-y-2',
+        },
+        lg: {
+            root: cx.cx('gap-3', framed && 'p-3'),
+            button: 'h-2 w-full after:-inset-x-2 after:-inset-y-3',
+        },
+    };
+    return (jsxRuntime.jsx(PaginationBase.Pagination.Root, { ...props, className: cx.cx('flex h-max w-max', sizes[size].root, framed && 'rounded-full bg-alpha-white/90 backdrop-blur', className), children: jsxRuntime.jsx(PaginationBase.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => page.type === 'page' ? (React.createElement(PaginationBase.Pagination.Item, { ...page, asChild: true, 
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                key: index, className: cx.cx('relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2', sizes[size].button, page.isCurrent && 'bg-fg-brand-primary_alt') })) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+            React.createElement(PaginationBase.Pagination.Ellipsis, { ...page, key: index }))) }) }));
+};
+
+exports.PaginationLine = PaginationLine;
+//# sourceMappingURL=PaginationLine.cjs.map

package/dist/components/molecules/Pagination/components/PaginationLine.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationLine.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationLine.tsx"],"sourcesContent":[null],"names":["cx","_jsx","Pagination","_createElement"],"mappings":";;;;;;;AAaO,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAuB,KAAI;AAClG,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE;YACF,IAAI,EAAEA,KAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,kDAAkD;AAC3D,SAAA;AACD,QAAA,EAAE,EAAE;YACF,IAAI,EAAEA,KAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,8CAA8C;AACvD,SAAA;KACF;AAED,IAAA,QACEC,cAAA,CAACC,yBAAU,CAAC,IAAI,EAAA,EAAA,GACV,KAAK,EACT,SAAS,EAAEF,KAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,8CAA8C,EAAE,SAAS,CAAC,EAAA,QAAA,EAExHC,cAAA,CAACC,yBAAU,CAAC,OAAO,EAAA,EAAA,QAAA,EAChB,CAAC,EAAE,KAAK,EAAE,KACT,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACpB,IAAI,CAAC,IAAI,KAAK,MAAM,IAClBC,mBAAA,CAACD,yBAAU,CAAC,IAAI,EAAA,EAAA,GACV,IAAI,EACR,OAAO,EAAA,IAAA;;gBAEP,GAAG,EAAE,KAAK,EACV,SAAS,EAAEF,KAAE,CACX,6IAA6I,EAC7I,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAClB,IAAI,CAAC,SAAS,IAAI,yBAAyB,CAC5C,EAAA,CACD;;AAGF,YAAAG,mBAAA,CAACD,yBAAU,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9C,CACF,EAAA,CAEgB,EAAA,CACL;AAEtB;;;;"}

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

@@ -0,0 +1,10 @@
+import type { PaginationRootProps } from './PaginationBase';
+interface PaginationLineProps extends Omit<PaginationRootProps, 'children'> {
+    /** The size of the pagination line. */
+    size?: 'md' | 'lg';
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+export declare const PaginationLine: ({ framed, className, size, ...props }: PaginationLineProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PaginationLine.d.ts.map

package/dist/components/molecules/Pagination/components/PaginationLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationLine.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationLine.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,UAAU,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzE,uCAAuC;IACvC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,GAAI,uCAA8C,mBAAmB,gCAyC/F,CAAC"}

package/dist/components/molecules/Pagination/components/PaginationLine.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Pagination } from './PaginationBase.js';
+
+const PaginationLine = ({ framed, className, size = 'md', ...props }) => {
+    const sizes = {
+        md: {
+            root: cx('gap-2', framed && 'p-2'),
+            button: 'h-1.5 w-full after:-inset-x-1.5 after:-inset-y-2',
+        },
+        lg: {
+            root: cx('gap-3', framed && 'p-3'),
+            button: 'h-2 w-full after:-inset-x-2 after:-inset-y-3',
+        },
+    };
+    return (jsx(Pagination.Root, { ...props, className: cx('flex h-max w-max', sizes[size].root, framed && 'rounded-full bg-alpha-white/90 backdrop-blur', className), children: jsx(Pagination.Context, { children: ({ pages }) => pages.map((page, index) => page.type === 'page' ? (createElement(Pagination.Item, { ...page, asChild: true, 
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                key: index, className: cx('relative cursor-pointer rounded-full bg-quaternary outline-focus-ring after:absolute focus-visible:outline-2 focus-visible:outline-offset-2', sizes[size].button, page.isCurrent && 'bg-fg-brand-primary_alt') })) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+            createElement(Pagination.Ellipsis, { ...page, key: index }))) }) }));
+};
+
+export { PaginationLine };
+//# sourceMappingURL=PaginationLine.js.map

package/dist/components/molecules/Pagination/components/PaginationLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationLine.js","sources":["../../../../../src/components/molecules/Pagination/components/PaginationLine.tsx"],"sourcesContent":[null],"names":["_jsx","_createElement"],"mappings":";;;;;AAaO,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAuB,KAAI;AAClG,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,kDAAkD;AAC3D,SAAA;AACD,QAAA,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC;AAClC,YAAA,MAAM,EAAE,8CAA8C;AACvD,SAAA;KACF;AAED,IAAA,QACEA,GAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAA,GACV,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,8CAA8C,EAAE,SAAS,CAAC,EAAA,QAAA,EAExHA,GAAA,CAAC,UAAU,CAAC,OAAO,EAAA,EAAA,QAAA,EAChB,CAAC,EAAE,KAAK,EAAE,KACT,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACpB,IAAI,CAAC,IAAI,KAAK,MAAM,IAClBC,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAA,GACV,IAAI,EACR,OAAO,EAAA,IAAA;;gBAEP,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,EAAE,CACX,6IAA6I,EAC7I,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAClB,IAAI,CAAC,SAAS,IAAI,yBAAyB,CAC5C,EAAA,CACD;;AAGF,YAAAA,aAAA,CAAC,UAAU,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9C,CACF,EAAA,CAEgB,EAAA,CACL;AAEtB;;;;"}

package/dist/components/molecules/Pagination/components/PaginationPages.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var PaginationBase = require('./PaginationBase.cjs');
+
+const PaginationItem = ({ value, rounded, isCurrent }) => {
+    return (jsxRuntime.jsx(PaginationBase.Pagination.Item, { value: value, isCurrent: isCurrent, className: ({ isSelected }) => cx.cx('flex size-9 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2', rounded ? 'rounded-full' : 'rounded-lg', isSelected && 'bg-primary_hover text-secondary'), children: value }));
+};
+/**
+ * Shared `Pagination.Context` body used by the numbered-page pagination variants:
+ * the desktop row of page buttons/ellipses, plus the mobile "Page X of Y" line.
+ */
+const PaginationPages = ({ rounded, wideMobileLine, 'data-testid': dataTestId }) => {
+    return (jsxRuntime.jsx(PaginationBase.Pagination.Context, { children: ({ pages, currentPage, total, testIdPrefix }) => {
+            const prefix = dataTestId ?? testIdPrefix;
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "hidden justify-center gap-0.5 md:flex", "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'pages') : undefined, children: pages.map((page, index) => page.type === 'page' ? (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                        jsxRuntime.jsx(PaginationItem, { rounded: rounded, ...page }, index)) : (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                        jsxRuntime.jsx(PaginationBase.Pagination.Ellipsis, { className: "flex size-9 shrink-0 items-center justify-center text-tertiary", children: "\u2026" }, index))) }), jsxRuntime.jsxs("div", { className: cx.cx('flex', wideMobileLine && 'flex-1', 'justify-center text-sm whitespace-pre text-fg-secondary md:hidden'), "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'mobile-status') : undefined, children: ["Page ", jsxRuntime.jsx("span", { className: "font-medium", children: currentPage }), " of ", jsxRuntime.jsx("span", { className: "font-medium", children: total })] })] }));
+        } }));
+};
+
+exports.PaginationPages = PaginationPages;
+//# sourceMappingURL=PaginationPages.cjs.map

package/dist/components/molecules/Pagination/components/PaginationPages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationPages.cjs","sources":["../../../../../src/components/molecules/Pagination/components/PaginationPages.tsx"],"sourcesContent":[null],"names":["_jsx","Pagination","cx","_jsxs","_Fragment","joinTestId"],"mappings":";;;;;;;AAMA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAA4D,KAAI;IACjH,QACEA,eAACC,yBAAU,CAAC,IAAI,EAAA,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,KACxBC,KAAE,CACA,4SAA4S,EAC5S,OAAO,GAAG,cAAc,GAAG,YAAY,EACvC,UAAU,IAAI,iCAAiC,CAChD,EAAA,QAAA,EAGF,KAAK,EAAA,CACU;AAEtB,CAAC;AAcD;;;AAGG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAwB,KAAI;AAC9G,IAAA,QACEF,cAAA,CAACC,yBAAU,CAAC,OAAO,cAChB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,KAAI;AAC/C,YAAA,MAAM,MAAM,GAAG,UAAU,IAAI,YAAY;AACzC,YAAA,QACEE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEJ,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,iBAAc,MAAM,GAAGK,sBAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAA,QAAA,EACjH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACrB,IAAI,CAAC,IAAI,KAAK,MAAM;;AAElB,wBAAAL,cAAA,CAAC,cAAc,EAAA,EAAa,OAAO,EAAE,OAAO,EAAA,GAAM,IAAI,EAAA,EAAjC,KAAK,CAAgC;;AAG1D,wBAAAA,cAAA,CAACC,yBAAU,CAAC,QAAQ,EAAA,EAAa,SAAS,EAAC,gEAAgE,EAAA,QAAA,EAAA,QAAA,EAAA,EAAjF,KAAK,CAET,CACvB,CACF,EAAA,CACG,EAENE,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAED,KAAE,CAAC,MAAM,EAAE,cAAc,IAAI,QAAQ,EAAE,mEAAmE,CAAC,EAAA,aAAA,EACzG,MAAM,GAAGG,sBAAU,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,SAAS,EAAA,QAAA,EAAA,CAAA,OAAA,EAEhEL,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,WAAW,EAAA,CAAQ,EAAA,MAAA,EAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CACnG,CAAA,EAAA,CACL;QAEP,CAAC,EAAA,CACkB;AAEzB;;;;"}

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

@@ -0,0 +1,18 @@
+interface PaginationPagesProps {
+    /** Whether the pagination buttons are rounded. */
+    rounded?: boolean;
+    /** Whether the mobile "Page X of Y" line grows to fill the available space (`flex-1`). */
+    wideMobileLine?: boolean;
+    /**
+     * Overrides the derived `data-testid` prefix (defaults to the root's testid).
+     * The desktop pages row renders `<prefix>--pages`, the mobile status line `<prefix>--mobile-status`.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Shared `Pagination.Context` body used by the numbered-page pagination variants:
+ * the desktop row of page buttons/ellipses, plus the mobile "Page X of Y" line.
+ */
+export declare const PaginationPages: ({ rounded, wideMobileLine, "data-testid": dataTestId }: PaginationPagesProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PaginationPages.d.ts.map

package/dist/components/molecules/Pagination/components/PaginationPages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationPages.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Pagination/components/PaginationPages.tsx"],"names":[],"mappings":"AAwBA,UAAU,oBAAoB;IAC5B,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,wDAAwD,oBAAoB,gCAgC3G,CAAC"}

package/dist/components/molecules/Pagination/components/PaginationPages.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { Pagination } from './PaginationBase.js';
+
+const PaginationItem = ({ value, rounded, isCurrent }) => {
+    return (jsx(Pagination.Item, { value: value, isCurrent: isCurrent, className: ({ isSelected }) => cx('flex size-9 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2', rounded ? 'rounded-full' : 'rounded-lg', isSelected && 'bg-primary_hover text-secondary'), children: value }));
+};
+/**
+ * Shared `Pagination.Context` body used by the numbered-page pagination variants:
+ * the desktop row of page buttons/ellipses, plus the mobile "Page X of Y" line.
+ */
+const PaginationPages = ({ rounded, wideMobileLine, 'data-testid': dataTestId }) => {
+    return (jsx(Pagination.Context, { children: ({ pages, currentPage, total, testIdPrefix }) => {
+            const prefix = dataTestId ?? testIdPrefix;
+            return (jsxs(Fragment, { children: [jsx("div", { className: "hidden justify-center gap-0.5 md:flex", "data-testid": prefix ? joinTestId(prefix, 'pages') : undefined, children: pages.map((page, index) => page.type === 'page' ? (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                        jsx(PaginationItem, { rounded: rounded, ...page }, index)) : (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: This is a custom component and we need to use the index as the key
+                        jsx(Pagination.Ellipsis, { className: "flex size-9 shrink-0 items-center justify-center text-tertiary", children: "\u2026" }, index))) }), jsxs("div", { className: cx('flex', wideMobileLine && 'flex-1', 'justify-center text-sm whitespace-pre text-fg-secondary md:hidden'), "data-testid": prefix ? joinTestId(prefix, 'mobile-status') : undefined, children: ["Page ", jsx("span", { className: "font-medium", children: currentPage }), " of ", jsx("span", { className: "font-medium", children: total })] })] }));
+        } }));
+};
+
+export { PaginationPages };
+//# sourceMappingURL=PaginationPages.js.map