@bspk/ui 1.0.0

package/Accordion.d.ts

@@ -0,0 +1,20 @@
+export type AccordionProps = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name Accordion
+ */
+declare function Accordion({ children }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Accordion {
+    var bspkName: string;
+}
+export { Accordion };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Accordion.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name Accordion
+ */
+function Accordion({ children }) {
+    return (jsx("div", { css: style, "data-accordion": true, children: children }));
+}
+Accordion.bspkName = 'Accordion';
+const style = css `
+    display: flex;
+`;
+
+export { Accordion, style };
+//# sourceMappingURL=Accordion.js.map

package/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["src/Accordion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,SAAS,CAAC,EAAE,QAAQ,EAAkB,EAAA;IAC3C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,gBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAI1B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Badge.d.ts

@@ -0,0 +1,33 @@
+export type BadgeProps = {
+    /**
+     * The content of the badge. If larger than 99, the badge will display '99+'. If null or undefined, the badge will
+     * be hidden.
+     *
+     * @type number
+     */
+    count?: number | string | null | undefined;
+    /**
+     * The size of the badge.
+     *
+     * @default small
+     */
+    size?: 'small' | 'x-small';
+    /**
+     * The color variant of the badge.
+     *
+     * @default primary
+     */
+    variant?: 'primary' | 'secondary';
+};
+/**
+ * Visual indicator for new items within a parent page represented with a numerical count of new items.
+ *
+ * @name Badge
+ */
+declare function Badge({ count: countProp, size, variant }: BadgeProps): false | import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Badge {
+    var bspkName: string;
+}
+export { Badge };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Badge.js

@@ -0,0 +1,43 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { tryIntParse } from './utils/tryIntPsrse.js';
+
+/**
+ * Visual indicator for new items within a parent page represented with a numerical count of new items.
+ *
+ * @name Badge
+ */
+function Badge({ count: countProp, size = 'small', variant = 'primary' }) {
+    const count = tryIntParse(countProp);
+    return (count !== null && (jsx("div", { css: style, "data-badge": true, "data-size": size, "data-variant": variant, children: count > 99 ? '99+' : count })));
+}
+Badge.bspkName = 'Badge';
+const style = css `
+    --size: var(--spacing-sizing-06);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-circular);
+    height: var(--size);
+    min-width: var(--size);
+    padding: 0 var(--spacing-sizing-02);
+
+    &[data-size='x-small'] {
+        --size: var(--spacing-sizing-05);
+        padding: 2px var(--spacing-sizing-01);
+    }
+
+    font: var(--labels-x-small);
+
+    color: var(--foreground-brand-on-primary);
+    background: var(--surface-brand-primary);
+
+    &[data-variant='secondary'] {
+        color: var(--foreground-brand-on-secondary);
+        background: var(--surface-brand-secondary);
+    }
+`;
+
+export { Badge, style };
+//# sourceMappingURL=Badge.js.map

package/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["src/Badge.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AA0BA;;;;AAIG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAc,EAAA;AAChF,IAAA,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;AAEpD,IAAA,QACI,KAAK,KAAK,IAAI,KACVA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAwB,YAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAI,EAAgB,cAAA,EAAA,OAAO,EAC7D,QAAA,EAAA,KAAK,GAAG,EAAE,GAAG,KAAK,GAAG,KAAK,EACzB,CAAA,CACT,EACH;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAIlB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/BannerAlert.d.ts

@@ -0,0 +1,53 @@
+import { ElementProps, AlertVariant, CallToActionButton } from './';
+export type BannerAlertProps = {
+    /**
+     * The color variant of the banner alert.
+     *
+     * @default informational
+     */
+    variant?: AlertVariant;
+    /**
+     * The function to call when the banner alert is closed. If not included the close button will not be displayed.
+     *
+     * @type () => void
+     */
+    onClose?: () => void;
+    /**
+     * The header of the banner alert.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * The children of the banner alert.
+     *
+     * @type multiline
+     * @required
+     */
+    children: string;
+    /**
+     * This property may be undefined or an object containing required CallToActionButton properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * Is the alert elevated. If true a drop shadow is added.
+     *
+     * @default false
+     */
+    elevated?: boolean;
+};
+/**
+ * A visual and contextual message used to communicate an important message or notification to users relating to a
+ * status or the body content of a page.
+ *
+ * @name BannerAlert
+ */
+declare function BannerAlert({ variant, onClose, header, callToAction, children, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace BannerAlert {
+    var bspkName: string;
+}
+export { BannerAlert };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/BannerAlert.js

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgErrorFill } from '@bspk/icons/ErrorFill';
+import { SvgInfoFill } from '@bspk/icons/InfoFill';
+import { SvgWarningFill } from '@bspk/icons/WarningFill';
+import { css } from '@emotion/react';
+
+/**
+ * A visual and contextual message used to communicate an important message or notification to users relating to a
+ * status or the body content of a page.
+ *
+ * @name BannerAlert
+ */
+function BannerAlert({ variant = 'informational', onClose, header, callToAction, children, elevated = false, }) {
+    return (jsxs("article", { css: style, "data-banner-alert": true, "data-elevated": elevated || undefined, "data-variant": variant, children: [jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && jsx(SvgErrorFill, {}), variant === 'informational' && jsx(SvgInfoFill, {}), variant === 'success' && jsx(SvgCheckCircleFill, {}), variant === 'warning' && jsx(SvgWarningFill, {})] }), jsxs("div", { "data-content": true, children: [(header || onClose) && (jsxs("header", { children: [jsx("span", { children: header }), typeof onClose === 'function' && (jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: jsx(SvgClose, {}) }))] })), jsxs("div", { "data-body": true, children: [jsx("span", { children: children }), callToAction?.label && callToAction?.onClick && (jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
+}
+BannerAlert.bspkName = 'BannerAlert';
+const style = css `
+    --color: var(--status-information);
+    --on-color: var(--status-on-information);
+    display: flex;
+    flex-direction: row;
+    border: 2px solid var(--color);
+    border-radius: var(--radius-medium);
+    box-sizing: border-box;
+    background-color: var(--surface-neutral-t1-base);
+    width: 100%;
+
+    &[data-variant='error'] {
+        --color: var(--status-error);
+        --on-color: var(--status-on-error);
+    }
+
+    &[data-variant='success'] {
+        --color: var(--status-success);
+        --on-color: var(--status-on-success);
+    }
+
+    &[data-variant='warning'] {
+        --color: var(--status-warning);
+        --on-color: var(--status-on-warning);
+    }
+
+    &[data-elevated] {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    [data-icon-bar] {
+        flex: 1;
+        padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
+        background: var(--color);
+        color: var(--on-color);
+        svg {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    [data-content] {
+        flex: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+
+        header {
+            display: flex;
+            flex-direction: row;
+            gap: var(--spacing-sizing-03);
+            height: var(--spacing-sizing-12);
+            align-items: center;
+
+            span {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                color: var(--foreground-neutral-on-surface);
+                font: var(--heading-h6);
+
+                @media (any-pointer: coarse) {
+                    font: var(--heading-h6);
+                }
+            }
+
+            // close button
+            button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0;
+                margin: 0 0 0 auto;
+                color: var(--foreground-neutral-on-surface-variant-01);
+
+                height: var(--spacing-sizing-08);
+                width: var(--spacing-sizing-08);
+
+                @media (any-pointer: coarse) {
+                    height: var(--spacing-sizing-12);
+                    width: var(--spacing-sizing-12);
+                }
+
+                svg {
+                    width: var(--spacing-sizing-04);
+                    height: var(--spacing-sizing-04);
+                }
+            }
+        }
+
+        [data-body] {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sizing-02);
+            padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
+
+            span {
+                font: var(--body-base);
+            }
+
+            button {
+                margin-left: auto;
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0 var(--spacing-sizing-03);
+                height: var(--spacing-sizing-12);
+                font: var(--labels-small);
+            }
+        }
+    }
+`;
+
+export { BannerAlert, style };
+//# sourceMappingURL=BannerAlert.js.map

package/BannerAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.js","sources":["src/BannerAlert.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAiDA;;;;;AAKG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,KAAK,GACoB,EAAA;IACpC,QACIA,IAAS,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,KAAK,8CAAmC,QAAQ,IAAI,SAAS,EAAA,cAAA,EAAgB,OAAO,EAAA,QAAA,EAAA,CAC9FA,gDACK,OAAO,KAAK,OAAO,IAAIC,GAAC,CAAA,YAAY,EAAG,EAAA,CAAA,EACvC,OAAO,KAAK,eAAe,IAAIA,GAAC,CAAA,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAIA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,EAC/C,OAAO,KAAK,SAAS,IAAIA,GAAA,CAAC,cAAc,EAAG,EAAA,CAAA,CAAA,EAAA,CAC1C,EACND,IAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CACK,CAAC,MAAM,IAAI,OAAO,MACfA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,KAC1BA,GAAmB,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAA,QAAA,EACtDA,GAAC,CAAA,QAAQ,EAAG,EAAA,CAAA,EAAA,CACP,CACZ,CAAA,EAAA,CACI,CACZ,EACDD,IACI,CAAA,KAAA,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,QAAQ,EAAQ,CAAA,EACtB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,KACzCA,GAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,EAAG,QAAA,EAAA,YAAY,CAAC,KAAK,EAAU,CAAA,CACvE,CACC,EAAA,CAAA,CAAA,EAAA,CACJ,CACA,EAAA,CAAA,EACZ;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAI9B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/BottomNavigation.d.ts

@@ -0,0 +1,20 @@
+export type BottomNavigationProps = {
+    /**
+     * The content of the bottom navigation.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name BottomNavigation
+ */
+declare function BottomNavigation({ children }: BottomNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace BottomNavigation {
+    var bspkName: string;
+}
+export { BottomNavigation };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/BottomNavigation.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name BottomNavigation
+ */
+function BottomNavigation({ children }) {
+    return (jsx("div", { css: style, "data-bottom-navigation": true, children: children }));
+}
+BottomNavigation.bspkName = 'BottomNavigation';
+const style = css `
+    display: flex;
+`;
+
+export { BottomNavigation, style };
+//# sourceMappingURL=BottomNavigation.js.map

package/BottomNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigation.js","sources":["src/BottomNavigation.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAyB,EAAA;IACzD,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,wBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAIxC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/BottomSheet.d.ts

@@ -0,0 +1,20 @@
+export type BottomSheetProps = {
+    /**
+     * The content of the bottom sheet.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name BottomSheet
+ */
+declare function BottomSheet({ children }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace BottomSheet {
+    var bspkName: string;
+}
+export { BottomSheet };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/BottomSheet.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name BottomSheet
+ */
+function BottomSheet({ children }) {
+    return (jsx("div", { css: style, "data-bottom-sheet": true, children: children }));
+}
+BottomSheet.bspkName = 'BottomSheet';
+const style = css `
+    display: flex;
+`;
+
+export { BottomSheet, style };
+//# sourceMappingURL=BottomSheet.js.map

package/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sources":["src/BottomSheet.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAoB,EAAA;IAC/C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,mBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAI9B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Breadcrumb.d.ts

@@ -0,0 +1,20 @@
+export type BreadcrumbProps = {
+    /**
+     * The content of the breadcrumb.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name Breadcrumb
+ */
+declare function Breadcrumb({ children }: BreadcrumbProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Breadcrumb {
+    var bspkName: string;
+}
+export { Breadcrumb };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Breadcrumb.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name Breadcrumb
+ */
+function Breadcrumb({ children }) {
+    return (jsx("div", { css: style, "data-breadcrumb": true, children: children }));
+}
+Breadcrumb.bspkName = 'Breadcrumb';
+const style = css `
+    display: flex;
+`;
+
+export { Breadcrumb, style };
+//# sourceMappingURL=Breadcrumb.js.map

package/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["src/Breadcrumb.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAmB,EAAA;IAC7C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,iBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAI5B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Button.d.ts

@@ -0,0 +1,66 @@
+import { ElementType, ReactNode } from 'react';
+import { ButtonSize, CommonProps, ElementProps } from './';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'onClick'> & {
+    /** The label of the button. */
+    label?: string;
+    /** The icon of the button. */
+    icon?: ReactNode;
+    /**
+     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     *
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * The element type to render as.
+     *
+     * @default button
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The function of the button is destructive.
+     *
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * The size of the button.
+     *
+     * @default medium
+     */
+    size?: ButtonSize;
+    /**
+     * The color variant of the button.
+     *
+     * @default primary
+     */
+    variant?: ButtonVariant;
+    /**
+     * The width of the button.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * If `string` is passed, it will be used as the label.
+     *
+     * If `ReactNode` is passed, it will override the default button content. (Not recommended)
+     */
+    children?: ReactNode;
+    /** The tool tip text that appears when hovered. */
+    toolTip?: string;
+};
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @name Button
+ */
+declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;
+declare namespace Button {
+    var bspkName: string;
+}
+export { Button };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */