@bspk/ui 1.1.33 → 1.2.0

package/dist/components/OTPInput/OTPInputExample.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const OTPInputExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [
+        {
+            label: '4 Characters',
+            propState: {
+                value: '',
+                length: 4,
+            },
+        },
+        {
+            label: '6 Characters',
+            propState: {
+                value: '',
+                length: 6,
+            },
+        },
+    ],
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    sections: [],
+};
+//# sourceMappingURL=OTPInputExample.js.map

package/dist/components/OTPInput/OTPInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInputExample.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,CAAC;aACZ;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,CAAC;aACZ;SACJ;KACJ;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;CACf,CAAC"}

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

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

package/dist/components/OTPInput/index.js

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

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

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

package/dist/components/OTPInput/otp-input.css

@@ -0,0 +1,72 @@
+[data-bspk=otp-input] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: var(--spacing-sizing-02);
+  font: var(--font);
+  width: fit-content;
+}
+[data-bspk=otp-input] [data-digit] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--stroke-neutral-base);
+  flex-grow: 1;
+  aspect-ratio: 1;
+  width: var(--width);
+  position: relative;
+  outline: none;
+}
+[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
+  background: var(--interaction-hover-opacity);
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-sm);
+}
+[data-bspk=otp-input] [data-digit]:active::after {
+  background: var(--interaction-press-opacity);
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-sm);
+}
+[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+  content: "";
+  width: 2px;
+  height: calc(var(--caret-height) - 8px);
+  background: var(--stroke-neutral-high);
+  animation: blink-caret 1s step-end infinite;
+}
+@keyframes blink-caret {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+[data-bspk=otp-input][data-size=small] {
+  --width: var(--spacing-sizing-08);
+  --font: var(--subheader-medium);
+  --caret-height: var(--subheader-medium-line-height);
+}
+[data-bspk=otp-input][data-size=medium] {
+  --width: var(--spacing-sizing-10);
+  --font: var(--subheader-large);
+  --caret-height: var(--subheader-large-line-height);
+}
+[data-bspk=otp-input][data-size=large] {
+  --width: var(--spacing-sizing-12);
+  --font: var(--subheader-x-large);
+  --caret-height: var(--subheader-x-large-line-height);
+}
+[data-bspk=otp-input][data-invalid] [data-digit] {
+  border-color: var(--status-error);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/OTPInput/otp-input.css.js

@@ -0,0 +1,77 @@
+/** * 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=otp-input] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: var(--spacing-sizing-02);
+  font: var(--font);
+  width: fit-content;
+}
+[data-bspk=otp-input] [data-digit] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--stroke-neutral-base);
+  flex-grow: 1;
+  aspect-ratio: 1;
+  width: var(--width);
+  position: relative;
+  outline: none;
+}
+[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
+  background: var(--interaction-hover-opacity);
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-sm);
+}
+[data-bspk=otp-input] [data-digit]:active::after {
+  background: var(--interaction-press-opacity);
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-sm);
+}
+[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+  content: "";
+  width: 2px;
+  height: calc(var(--caret-height) - 8px);
+  background: var(--stroke-neutral-high);
+  animation: blink-caret 1s step-end infinite;
+}
+@keyframes blink-caret {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+[data-bspk=otp-input][data-size=small] {
+  --width: var(--spacing-sizing-08);
+  --font: var(--subheader-medium);
+  --caret-height: var(--subheader-medium-line-height);
+}
+[data-bspk=otp-input][data-size=medium] {
+  --width: var(--spacing-sizing-10);
+  --font: var(--subheader-large);
+  --caret-height: var(--subheader-large-line-height);
+}
+[data-bspk=otp-input][data-size=large] {
+  --width: var(--spacing-sizing-12);
+  --font: var(--subheader-x-large);
+  --caret-height: var(--subheader-x-large-line-height);
+}
+[data-bspk=otp-input][data-invalid] [data-digit] {
+  border-color: var(--status-error);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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 */