@bspk/ui 1.1.34 → 1.2.0

package/dist/components/PageControl/PageControl.d.ts

@@ -0,0 +1,43 @@
+import './page-control.scss';
+export type PageControlProps = {
+    /**
+     * The current page number.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: number;
+    /**
+     * The total number of pages.
+     *
+     * @example
+     *     5;
+     *
+     * @required
+     */
+    numPages: number;
+    /**
+     * The variant of the page-control.
+     *
+     * @default flat
+     */
+    variant?: 'flat' | 'floating';
+};
+/**
+ * A visual indicator that displays a series of dots representing the number of pages or elements within a moving
+ * carousel or flow. The active page is often differentiated with a usage of a high contrasting color.
+ *
+ * @example
+ *     import { PageControl } from '@bspk/ui/PageControl';
+ *
+ *     function Example() {
+ *         return <PageControl value={1} numPages={3} />;
+ *     }
+ *
+ * @name PageControl
+ * @phase UXReview
+ */
+export declare function PageControl({ value, numPages, variant }: PageControlProps): import("react/jsx-runtime").JSX.Element | null;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PageControl/PageControl.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './page-control.css.js';
+const MAX_DOT_COUNT = 5;
+/**
+ * A visual indicator that displays a series of dots representing the number of pages or elements within a moving
+ * carousel or flow. The active page is often differentiated with a usage of a high contrasting color.
+ *
+ * @example
+ *     import { PageControl } from '@bspk/ui/PageControl';
+ *
+ *     function Example() {
+ *         return <PageControl value={1} numPages={3} />;
+ *     }
+ *
+ * @name PageControl
+ * @phase UXReview
+ */
+export function PageControl({ value, numPages, variant = 'flat' }) {
+    if (numPages < 2)
+        return null;
+    return (_jsx("span", { "aria-label": `Page ${value} of ${numPages}`, "data-bspk": "page-control", "data-variant": variant || undefined, role: "img", children: getDots(value, numPages).map(({ page, size }, index) => (_jsx("span", { "aria-hidden": "true", "data-active": page === Number(value) || undefined, "data-dot": page, "data-size": size, role: "presentation" }, index + 1))) }));
+}
+function getDots(currentPage, totalPages) {
+    if (totalPages <= MAX_DOT_COUNT) {
+        return Array.from({ length: totalPages }, (_, i) => ({
+            size: 'medium',
+            page: i + 1,
+        }));
+    }
+    const start = Math.max(1, Math.min(currentPage - 2, totalPages - 4));
+    const dots = Array.from({ length: MAX_DOT_COUNT }, (_, i) => {
+        const page = start + i;
+        let size = 'medium';
+        if (i === 0 && page > 1)
+            size = page > 1 ? 'x-small' : 'small';
+        if (i === 1 && page > 2)
+            size = 'small';
+        if (i === 3 && page < totalPages - 1)
+            size = 'small';
+        if (i === 4 && page < totalPages)
+            size = page < totalPages ? 'x-small' : 'small';
+        return { page, size };
+    });
+    return dots;
+}
+//# sourceMappingURL=PageControl.js.map

package/dist/components/PageControl/PageControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageControl.js","sourceRoot":"","sources":["../../../src/components/PageControl/PageControl.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAE7B,MAAM,aAAa,GAAG,CAAU,CAAC;AAgCjC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAoB;IAC/E,IAAI,QAAQ,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAE9B,OAAO,CACH,6BACgB,QAAQ,KAAK,OAAO,QAAQ,EAAE,eAChC,cAAc,kBACV,OAAO,IAAI,SAAS,EAClC,IAAI,EAAC,KAAK,YAET,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACrD,8BACgB,MAAM,iBACL,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,IAAI,SAAS,cACtC,IAAI,eACH,IAAI,EAEf,IAAI,EAAC,cAAc,IADd,KAAK,GAAG,CAAC,CAEhB,CACL,CAAC,GACC,CACV,CAAC;AACN,CAAC;AAED,SAAS,OAAO,CAAC,WAAmB,EAAE,UAAkB;IACpD,IAAI,UAAU,IAAI,aAAa,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACjD,IAAI,EAAE,QAAmB;YACzB,IAAI,EAAE,CAAC,GAAG,CAAC;SACd,CAAC,CAAC,CAAC;IACR,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACxD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,IAAI,IAAI,GAAY,QAAQ,CAAC;QAE7B,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,OAAO,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,UAAU,GAAG,CAAC;YAAE,IAAI,GAAG,OAAO,CAAC;QACrD,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,UAAU;YAAE,IAAI,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QAEjF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AAChB,CAAC"}

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

@@ -0,0 +1 @@
+export * from './PageControl';

package/dist/components/PageControl/index.js

@@ -0,0 +1,2 @@
+export * from './PageControl';
+//# sourceMappingURL=index.js.map

package/dist/components/PageControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageControl/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/PageControl/page-control.css

@@ -0,0 +1,33 @@
+[data-bspk=page-control] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--stroke-neutral-low);
+  padding: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
+  width: fit-content;
+  background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=page-control] [data-dot] {
+  background-color: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-full);
+  width: var(--spacing-sizing-02);
+  height: var(--spacing-sizing-02);
+}
+[data-bspk=page-control] [data-dot][data-active] {
+  background-color: var(--foreground-brand-primary);
+}
+[data-bspk=page-control] [data-dot][data-size=x-small] {
+  width: var(--spacing-sizing-01);
+  height: var(--spacing-sizing-01);
+}
+[data-bspk=page-control] [data-dot][data-size=small] {
+  width: 6px;
+  height: 6px;
+}
+[data-bspk=page-control][data-variant=floating] {
+  box-shadow: var(--drop-shadow-float);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PageControl/page-control.css.js

@@ -0,0 +1,38 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=page-control] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--stroke-neutral-low);
+  padding: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
+  width: fit-content;
+  background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=page-control] [data-dot] {
+  background-color: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-full);
+  width: var(--spacing-sizing-02);
+  height: var(--spacing-sizing-02);
+}
+[data-bspk=page-control] [data-dot][data-active] {
+  background-color: var(--foreground-brand-primary);
+}
+[data-bspk=page-control] [data-dot][data-size=x-small] {
+  width: var(--spacing-sizing-01);
+  height: var(--spacing-sizing-01);
+}
+[data-bspk=page-control] [data-dot][data-size=small] {
+  width: 6px;
+  height: 6px;
+}
+[data-bspk=page-control][data-variant=floating] {
+  box-shadow: var(--drop-shadow-float);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from './Pagination';
+type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+export declare const PageInput: FC<PageInputProps>;
+export {};

package/dist/components/Pagination/PageInput.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { TextInput } from '../TextInput';
+import { Txt } from '../Txt';
+export const PageInput = ({ numPages, onChange, value }) => {
+    const [page, setPage] = useState(String(value));
+    useEffect(() => {
+        const stringValue = String(value);
+        if (stringValue !== page) {
+            setPage(stringValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    const handleChange = (val) => {
+        const pageNumber = parseInt(val, 10);
+        const isValidPageNumber = !isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages;
+        if (isValidPageNumber || val === '') {
+            setPage(val);
+        }
+    };
+    const handleSubmit = () => {
+        const pageNumber = parseInt(page, 10);
+        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages) {
+            onChange(pageNumber);
+        }
+        else {
+            setPage(String(value));
+        }
+    };
+    const pageCountMessage = `of ${numPages}`;
+    return (_jsx("form", { onSubmit: (e) => {
+            e.preventDefault();
+            handleSubmit();
+        }, style: { display: 'contents' }, children: _jsxs("div", { "data-bspk": "page-input", children: [_jsx(TextInput, { "aria-label": "Page input", name: "page-input", onBlur: handleSubmit, onChange: handleChange, showClearButton: false, size: "small", value: page }), _jsx(Txt, { variant: "body-small", children: pageCountMessage })] }) }));
+};
+//# sourceMappingURL=PageInput.js.map

package/dist/components/Pagination/PageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAIvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACvB,OAAO,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;QACD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrC,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,CAAC;QAE1F,IAAI,iBAAiB,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;YAClE,QAAQ,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,QAAQ,EAAE,CAAC;IAE1C,OAAO,CACH,eACI,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,EAAE,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAE9B,4BAAe,YAAY,aACvB,KAAC,SAAS,kBACK,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,GACb,EAEF,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,gBAAgB,GAAO,IAChD,GACH,CACV,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination';
+export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+export declare function PageList({ numPages, onChange, value }: PageListProps): import("react/jsx-runtime").JSX.Element[];

package/dist/components/Pagination/PageList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../Button';
+export function PageList({ numPages, onChange, value }) {
+    return Array.from({ length: numPages }, (_, index) => {
+        const page = index + 1;
+        return (_jsx(Button, { "aria-label": `Page ${page}`, label: String(page), onClick: () => onChange(page), owner: "pagination", size: "small", variant: value === page ? 'primary' : 'tertiary' }, page));
+    });
+}
+//# sourceMappingURL=PageList.js.map

package/dist/components/Pagination/PageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageList.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAiB;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,OAAO,CACH,KAAC,MAAM,kBACS,QAAQ,IAAI,EAAE,EAE1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAL3C,IAAI,CAMX,CACL,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}

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

@@ -0,0 +1,43 @@
+import './pagination.scss';
+import { AriaAttributes } from 'react';
+export type PaginationProps = {
+    /**
+     * The number of pages to display in the pagination component.
+     *
+     * @default 1
+     */
+    numPages: number;
+    /**
+     * The current page number.
+     *
+     * @default 1
+     */
+    value: number;
+    /** Called when the page changes. */
+    onChange: (newPageNumber: number) => void;
+};
+/**
+ * A navigation component that allows customers to move between a range of listed content within a page into smaller
+ * multiple micro pages.
+ *
+ * @example
+ *     import { Pagination } from '@bspk/ui/Pagination';
+ *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
+ *
+ *     function Example() {
+ *         const numPages = 10;
+ *
+ *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *
+ *         return (
+ *             <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages}>
+ *                 Example Pagination
+ *             </Pagination>
+ *         );
+ *     }
+ *
+ * @name Pagination
+ * @phase UXReview
+ */
+export declare function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import './pagination.css.js';
+import { PageInput } from './PageInput';
+import { PageList } from './PageList';
+import { Button } from '../Button';
+// After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
+const INPUT_TYPE_THRESHOLD = 7;
+/**
+ * A navigation component that allows customers to move between a range of listed content within a page into smaller
+ * multiple micro pages.
+ *
+ * @example
+ *     import { Pagination } from '@bspk/ui/Pagination';
+ *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
+ *
+ *     function Example() {
+ *         const numPages = 10;
+ *
+ *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *
+ *         return (
+ *             <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages}>
+ *                 Example Pagination
+ *             </Pagination>
+ *         );
+ *     }
+ *
+ * @name Pagination
+ * @phase UXReview
+ */
+export function Pagination({ numPages, value, onChange, ...ariaProps }) {
+    const nextPage = () => {
+        if (value < numPages) {
+            onChange(value + 1);
+        }
+    };
+    const previousPage = () => {
+        if (value > 1) {
+            onChange(value - 1);
+        }
+    };
+    const isFirstPage = value === 1;
+    const isLastPage = value === numPages;
+    const isOutOfBoundsValue = value < 1 || value > numPages;
+    const isOneOrFewerPages = numPages <= 1;
+    return (_jsxs("span", { "data-bspk": "pagination", role: "group", ...ariaProps, children: [_jsx(Button, { disabled: isOutOfBoundsValue || isOneOrFewerPages || isFirstPage, icon: _jsx(SvgIcon, { name: "ChevronLeft" }), iconOnly: true, label: isFirstPage ? 'First page' : `Previous page (${value - 1})`, onClick: previousPage, owner: "pagination", size: "small", variant: "tertiary" }), numPages > INPUT_TYPE_THRESHOLD ? (_jsx(PageInput, { numPages: numPages, onChange: onChange, value: value })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: isOutOfBoundsValue || isOneOrFewerPages || isLastPage, icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: isLastPage ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
+}
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,mHAAmH;AACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAoB/B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAoC;IACpG,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;YACnB,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,KAAK,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,QAAQ,CAAC;IACtC,MAAM,kBAAkB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,QAAQ,CAAC;IACzD,MAAM,iBAAiB,GAAG,QAAQ,IAAI,CAAC,CAAC;IAExC,OAAO,CACH,6BAAgB,YAAY,EAAC,IAAI,EAAC,OAAO,KAAK,SAAS,aACnD,KAAC,MAAM,IACH,QAAQ,EAAE,kBAAkB,IAAI,iBAAiB,IAAI,WAAW,EAChE,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,aAAa,GAAG,EACpC,QAAQ,QACR,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,CAAC,GAAG,EAClE,OAAO,EAAE,YAAY,EACrB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,EAED,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAC/B,KAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACtE,CAAC,CAAC,CAAC,CACA,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACrE,EAED,KAAC,MAAM,IACH,QAAQ,EAAE,kBAAkB,IAAI,iBAAiB,IAAI,UAAU,EAC/D,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,cAAc,GAAG,EACrC,QAAQ,QACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,GAAG,EAC5D,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,IACC,CACV,CAAC;AACN,CAAC"}

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

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

package/dist/components/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.js.map

package/dist/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/Pagination/pagination.css

@@ -0,0 +1,31 @@
+[data-bspk=pagination] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-01);
+  flex: 1;
+}
+[data-bspk=pagination] [data-bspk=page-input] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=txt] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+  text-wrap: nowrap;
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] {
+  width: var(--spacing-sizing-12);
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] input {
+  text-align: center;
+  flex: 1;
+}
+[data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
+  padding: 6px 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Pagination/pagination.css.js

@@ -0,0 +1,36 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=pagination] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-01);
+  flex: 1;
+}
+[data-bspk=pagination] [data-bspk=page-input] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=txt] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+  text-wrap: nowrap;
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] {
+  width: var(--spacing-sizing-12);
+}
+[data-bspk=pagination] [data-bspk=page-input] [data-bspk=text-input] input {
+  text-align: center;
+  flex: 1;
+}
+[data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
+  padding: 6px 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,31 @@
+import { FormFieldWrapProps } from '-/components/FormField';
+import { PasswordInputProps } from '-/components/PasswordInput';
+export type PasswordFieldProps = FormFieldWrapProps<PasswordInputProps>;
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * This component takes properties from the FormField and PasswordInput components.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { PasswordField } from '@bspk/ui/PasswordField';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <PasswordField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
+ *
+ * @name PasswordField
+ * @phase QA
+ */
+export declare function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { PasswordInput } from '../PasswordInput';
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * This component takes properties from the FormField and PasswordInput components.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { PasswordField } from '@bspk/ui/PasswordField';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <PasswordField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
+ *
+ * @name PasswordField
+ * @phase QA
+ */
+export function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "password-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(PasswordInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, invalid: invalid, required: required, value: inputProps.value ?? '' })) }));
+}
+//# sourceMappingURL=PasswordField.js.map

package/dist/components/PasswordField/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAsB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACI;IACjB,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,aAAa,OACN,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,EAAE,GAC/B,CACL,GACO,CACf,CAAC;AACN,CAAC"}

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

@@ -0,0 +1 @@
+export * from './PasswordField';

package/dist/components/PasswordField/index.js

@@ -0,0 +1,2 @@
+export * from './PasswordField';
+//# sourceMappingURL=index.js.map

package/dist/components/PasswordField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PasswordField/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,21 @@
+import './password-input.scss';
+import { TextInputProps } from '-/components/TextInput';
+export type PasswordInputProps = Pick<TextInputProps, 'aria-describedby' | 'aria-errormessage' | 'aria-label' | 'containerRef' | 'disabled' | 'id' | 'inputProps' | 'inputRef' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'required' | 'size' | 'value'>;
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * @example
+ *     import { PasswordInput } from '@bspk/ui/PasswordInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
+ *     }
+ *
+ * @name PasswordInput
+ * @phase QA
+ */
+export declare function PasswordInput({ disabled, readOnly, size, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, inputRef, name, onChange, required, value, containerRef, id, invalid, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import './password-input.css.js';
+import { Button } from '../Button';
+import { TextInput } from '../TextInput';
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * @example
+ *     import { PasswordInput } from '@bspk/ui/PasswordInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
+ *     }
+ *
+ * @name PasswordInput
+ * @phase QA
+ */
+export function PasswordInput({ disabled, readOnly, size = 'medium', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, inputRef, name, onChange, required, value, containerRef, id, invalid, ...props }) {
+    const [isShowingPassword, setIsShowingPassword] = useState(false);
+    const togglePasswordVisibility = () => {
+        if (disabled || readOnly)
+            return;
+        setIsShowingPassword((prev) => !prev);
+    };
+    return (_jsx("div", { ...props, "data-bspk": "password-input", children: _jsx(TextInput, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, autoComplete: "off", containerRef: containerRef, disabled: disabled, id: id, inputProps: inputProps, inputRef: inputRef, invalid: invalid, leading: !isShowingPassword && (_jsx(_Fragment, { children: Array.from({ length: value?.length || 0 }, (_, i) => (_jsx("span", {}, i))) })), name: name, onChange: onChange, onClick: (e) => {
+                e.currentTarget?.querySelector('input')?.focus();
+            }, owner: "password-input", readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+                !readOnly && (_jsx(Button, { label: isShowingPassword ? 'Hide' : 'Show', onClick: togglePasswordVisibility, variant: "tertiary" })), type: isShowingPassword ? 'text' : 'password', value: value }) }));
+}
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/PasswordInput/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAqBnE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,EAAE,EACF,OAAO,EACP,GAAG,KAAK,EACS;IACjB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACH,iBAAS,KAAK,eAAY,gBAAgB,YACtC,KAAC,SAAS,wBACY,eAAe,uBACd,gBAAgB,gBACvB,SAAS,EACrB,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EACH,CAAC,iBAAiB,IAAI,CAClB,4BACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClD,iBAAW,CAAC,CAAI,CACnB,CAAC,GACH,CACN,EAEL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;YACtE,CAAC,EACD,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EACJ,CAAC,QAAQ;gBACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,IACH,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAC7C,KAAK,EAAE,KAAK,GACd,GACA,CACT,CAAC;AACN,CAAC"}

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

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/dist/components/PasswordInput/index.js

@@ -0,0 +1,2 @@
+export * from './PasswordInput';
+//# sourceMappingURL=index.js.map

package/dist/components/PasswordInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PasswordInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/PasswordInput/password-input.css

@@ -0,0 +1,28 @@
+[data-bspk=password-input] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+[data-bspk=password-input] [data-bspk=text-input] {
+  padding-right: 0;
+}
+[data-bspk=password-input] [data-bspk=text-input] [data-bspk=button] {
+  font: var(--button-font);
+  height: 100%;
+}
+[data-bspk=password-input] [data-disabled] [data-toggle-visibility-button],
+[data-bspk=password-input] [data-readonly] [data-toggle-visibility-button] {
+  cursor: default;
+}
+[data-bspk=password-input][data-size=small] {
+  --button-font: var(--labels-small);
+}
+[data-bspk=password-input][data-size=medium] {
+  --button-font: var(--labels-base);
+}
+[data-bspk=password-input][data-size=large] {
+  --button-font: var(--labels-large);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */