@bspk/ui 1.1.34 → 1.3.0

package/dist/components/PageControl/PageControlExample.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const presets = [
+    {
+        label: '6 pages, on page 2',
+        propState: {
+            numPages: 6,
+            currentPage: 2,
+        },
+    },
+    {
+        label: '5 pages, on page 1',
+        propState: {
+            numPages: 5,
+            currentPage: 1,
+        },
+    },
+    {
+        label: '10 pages, on page 10',
+        propState: {
+            numPages: 10,
+            currentPage: 10,
+        },
+    },
+];
+export const PageControlExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    sections: [],
+    variants: {},
+};
+//# sourceMappingURL=PageControlExample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageControlExample.js","sourceRoot":"","sources":["../../../src/components/PageControl/PageControlExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,WAAW,EAAE,EAAE;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;CACf,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,39 @@
+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} />;
+ *     }
+ *
+ * @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,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './pagination.css.js';
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+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} />;
+ *     }
+ *
+ * @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,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,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;;;;;;;;;;;;;;;;;;GAkBG;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 UXReview
+ */
+export declare function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...passwordInputProps }: 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 UXReview
+ */
+export function PasswordField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...passwordInputProps }) {
+    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, { ...passwordInputProps, ...fieldProps, id: controlId, invalid: invalid, required: required, value: passwordInputProps.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,kBAAkB,EACJ;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,kBAAkB,KAClB,UAAU,EACd,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,kBAAkB,CAAC,KAAK,IAAI,EAAE,GACvC,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 UXReview
+ */
+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 './password-input.css.js';
+import { useState } from 'react';
+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 UXReview
+ */
+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,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,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 */

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

@@ -0,0 +1,33 @@
+/** * 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=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 */
+`));
+document.head.appendChild(style);

package/dist/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { PhoneNumberInputProps } from '../PhoneNumberInput';
-export type PhoneNumberFieldProps = Pick<PhoneNumberInputProps, 'autoComplete' | 'disabled' | 'disableFormatting' | 'errorMessage' | 'initialCountryCode' | 'inputRef' | 'invalid' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { PhoneNumberInputProps } from '-/components/PhoneNumberInput';
+export type PhoneNumberFieldProps = FormFieldWrapProps<PhoneNumberInputProps>;
 /**
  * A text input that allows users to enter text phone numbers with country codes.
  *
@@ -8,11 +8,7 @@ export type PhoneNumberFieldProps = Pick<PhoneNumberInputProps, 'autoComplete' |
  *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberField
- * @phase WorkInProgress
+ * @phase UXReview
  */
-declare function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }: PhoneNumberFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PhoneNumberField {
-    var bspkName: string;
-}
-export { PhoneNumberField };
+export declare function PhoneNumberField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }: PhoneNumberFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -8,12 +8,9 @@ import { PhoneNumberInput } from '../PhoneNumberInput';
  *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberField
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "phone-number-field", errorMessage: errorMessage, helperText: helperText, invalid: !inputProps.readOnly && !inputProps.disabled && invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(PhoneNumberInput, { "aria-label": label, disableFormatting: disableFormatting, errorMessage: errorMessage, initialCountryCode: initialCountryCode, onChange: onChange, value: value, ...fieldProps, ...inputProps })) }));
+export function PhoneNumberField({ controlId, errorMessage, helperText, invalid, label, labelTrailing, required, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "phone-number-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => _jsx(PhoneNumberInput, { ...inputProps, ...fieldProps, "aria-label": label, invalid: invalid }) }));
 }
-PhoneNumberField.bspkName = 'PhoneNumberField';
-export { PhoneNumberField };
 //# sourceMappingURL=PhoneNumberField.js.map