@bspk/ui 1.1.32 → 1.1.34

package/dist/Avatar.d.ts

@@ -1,90 +0,0 @@
-import './avatar.scss';
-import { ReactNode } from 'react';
-import { ColorVariant } from './utils/colorVariants';
-export type SizeVariant = 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxxx-large';
-export type AvatarProps = {
-    /**
-     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
-     *
-     * @example
-     *     Jane Doe
-     *
-     * @required
-     */
-    name: string;
-    /**
-     * The size of the avatar.
-     *
-     * @default small
-     */
-    size?: SizeVariant;
-    /**
-     * The color of the avatar.
-     *
-     * @default grey
-     */
-    color?: ColorVariant;
-    /**
-     * The initials to display in the avatar limited to 2 characters.
-     *
-     * If not provided, the first two letters of the name will be used as initials.
-     *
-     * @example
-     *     JD;
-     */
-    initials?: string;
-    /**
-     * The icon to display in the avatar. This needs to be an icon from the
-     *
-     * @example
-     *     <SvgPerson />;
-     *
-     * @type BspkIcon
-     * @bspk/icons library.
-     */
-    icon?: ReactNode;
-    /**
-     * The url to the image to display in the avatar.
-     *
-     * @example
-     *     /profile.jpg
-     */
-    image?: string;
-    /**
-     * Whether to show the represeneetd user's name as a tooltip.
-     *
-     * @default true
-     */
-    showTooltip?: boolean;
-};
-/**
- * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
- *
- * @example
- *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 name="Jane Doe"
- *                 initials="JD"
- *                 color="blue"
- *                 size="large"
- *                 icon={<SvgPerson />}
- *                 image="/profile.jpg"
- *                 showTooltip={true}
- *             />
- *         );
- *     }
- *
- * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
- *
- * @name Avatar
- */
-declare function Avatar({ initials: initialsProp, color, size, icon, image, name: ariaLabel, showTooltip, }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Avatar {
-    var bspkName: string;
-}
-export { Avatar };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Avatar.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:999px;background-color:var(--background);color:var(--foreground);font:var(--font)}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-09)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-17)}`);;
-import { useMemo } from 'react';
-import { Tooltip } from './Tooltip';
-import { isValidIcon } from './utils/children';
-const DEFAULT = {
-    size: 'small',
-    color: 'grey',
-    showTooltip: true,
-};
-/**
- * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
- *
- * @example
- *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 name="Jane Doe"
- *                 initials="JD"
- *                 color="blue"
- *                 size="large"
- *                 icon={<SvgPerson />}
- *                 image="/profile.jpg"
- *                 showTooltip={true}
- *             />
- *         );
- *     }
- *
- * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
- *
- * @name Avatar
- */
-function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.size, icon, image, name: ariaLabel, showTooltip = DEFAULT.showTooltip, }) {
-    const children = useMemo(() => {
-        if (image)
-            return _jsx("img", { alt: ariaLabel, src: image });
-        if (isValidIcon(icon))
-            return _jsx("span", { "data-icon": true, children: icon });
-        let initials = initialsProp;
-        if (ariaLabel && !initials)
-            initials = ariaLabel
-                .split(' ')
-                .map((word) => word.charAt(0))
-                .slice(0, 2)
-                .join('')
-                .toUpperCase();
-        if (initials)
-            return _jsx("span", { "data-initials": true, children: initials.slice(0, 2) });
-        return null;
-    }, [ariaLabel, icon, image, initialsProp]);
-    if (!children)
-        return null;
-    const avatar = (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children }));
-    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar;
-}
-Avatar.bspkName = 'Avatar';
-export { Avatar };
-//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAqEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAE5D,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/AvatarGroup.d.ts

@@ -1,63 +0,0 @@
-import './avatar-group.scss';
-import { AvatarProps, SizeVariant } from './Avatar';
-export type AvatarItem = Pick<AvatarProps, 'color' | 'icon' | 'image' | 'initials' | 'name'>;
-export type AvatarGroupProps = {
-    /**
-     * The avatars to display in the group.
-     *
-     * @example
-     *     [
-     *         { name: 'Jane Doe', image: '/path/to/image.jpg' },
-     *         { name: 'John Smith', initials: 'JS' },
-     *     ];
-     *
-     * @type Array<AvatarItem>
-     * @required
-     */
-    items: AvatarItem[];
-    /**
-     * Size of the avatar group.
-     *
-     * @default small
-     */
-    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
-    /**
-     * The maximum number of avatars to display before showing the overflowCount.
-     *
-     * This is used to limit the number of avatars displayed in the group.
-     *
-     * @minimum 3
-     * @maximum 5
-     */
-    max?: number;
-    /**
-     * The variant of the avatar group.
-     *
-     * @default spread
-     */
-    variant?: 'spread' | 'stacked';
-};
-/**
- * AvatarGroup component displays a group of avatars.
- *
- * @example
- *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
- *
- *     export function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                 ]}
- *             />
- *         );
- *     }
- *
- * @name AvatarGroup
- */
-declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace AvatarGroup {
-    var bspkName: string;
-}
-export { AvatarGroup };

package/dist/AvatarGroup.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=avatar-group]{width:100%}[data-bspk=avatar-group] [data-wrap]{width:100%;display:flex;flex-direction:row;align-items:end;justify-content:end;gap:var(--spacing-sizing-02);overflow:hidden}`);;
-import { Avatar } from './Avatar';
-/**
- * AvatarGroup component displays a group of avatars.
- *
- * @example
- *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
- *
- *     export function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                 ]}
- *             />
- *         );
- *     }
- *
- * @name AvatarGroup
- */
-function AvatarGroup({ items, size = 'small', max = 5, variant }) {
-    if (!Array.isArray(items) || !items?.length)
-        return null;
-    const overFlowCount = items.length - max;
-    return (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, children: _jsxs("div", { "data-wrap": true, children: [items.map((item, index) => (_jsx(Avatar, { ...item, size: size }, index))), overFlowCount > 0 && (_jsx("div", { "aria-hidden": true, "data-bspk": "avatar", "data-size": size, children: _jsxs("span", { "data-overflow-count": true, children: ["+", overFlowCount] }) }))] }) }));
-}
-AvatarGroup.bspkName = 'AvatarGroup';
-export { AvatarGroup };
-//# sourceMappingURL=AvatarGroup.js.map

package/dist/AvatarGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAA4B,MAAM,UAAU,CAAC;AAyC5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IAC9E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IAEzC,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,6CACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAAiB,IAAI,EAAE,IAAI,EAAE,IAAI,IAA3B,KAAK,CAA0B,CAC/C,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,eAAY,IAAI,YAC/C,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/Badge.d.ts

@@ -1,63 +0,0 @@
-import './badge.scss';
-import { ReactNode } from 'react';
-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.
-     *
-     * @example
-     *     5;
-     *
-     * @default 1
-     *
-     * @type number
-     * @minimum 1
-     */
-    count?: number;
-    /**
-     * The size of the badge.
-     *
-     * @default small
-     */
-    size?: 'small' | 'x-small';
-    /**
-     * The color variant of the badge.
-     *
-     * @default primary
-     */
-    variant?: 'primary' | 'secondary';
-    /**
-     * Whether the badge should have a border that matches the surface color.
-     *
-     * @default false
-     */
-    surfaceBorder?: boolean;
-    /**
-     * The context for which the badge is applied.
-     *
-     * Could be a button, link, or any other element that the badge is associated with.
-     *
-     * @type
-     */
-    children?: ReactNode;
-};
-/**
- * Visual indicator for new items within a parent page represented with a numerical count of new items.
- *
- * @example
- *     import { Badge } from '@bspk/ui/badge';
- *
- *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
- *     }
- *
- * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
- *
- * @name Badge
- */
-declare function Badge({ count: countProp, size, variant, surfaceBorder, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace Badge {
-    var bspkName: string;
-}
-export { Badge };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Badge.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=badge]{--size: var(--spacing-sizing-06);--padding-x: var(--spacing-sizing-02);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);width:fit-content;padding:0 var(--padding-x);min-width:var(--size);font:var(--labels-x-small);color:var(--foreground-brand-on-primary);background:var(--surface-brand-primary)}[data-bspk=badge][data-size=x-small]{--size: var(--spacing-sizing-05);--padding-x: var(--spacing-sizing-01)}[data-bspk=badge][data-variant=secondary]{color:var(--foreground-brand-on-secondary);background:var(--surface-brand-secondary)}[data-bspk=badge][data-surface-border]{padding:0 calc(var(--padding-x) - 2px);border:2px solid var(--surface-neutral-t1-base)}[data-bspk=badge-wrapper]{display:inline-flex;align-items:center;justify-content:center;position:relative;width:fit-content;height:fit-content;flex-shrink:0}[data-bspk=badge-wrapper] [data-bspk=badge]{position:absolute;top:0;right:0;transform:scale(1) translate(50%, -50%);transform-origin:100% 0%;z-index:2}`);;
-import { tryIntParse } from './utils/tryIntPsrse';
-/**
- * Visual indicator for new items within a parent page represented with a numerical count of new items.
- *
- * @example
- *     import { Badge } from '@bspk/ui/badge';
- *
- *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
- *     }
- *
- * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
- *
- * @name Badge
- */
-function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }) {
-    const count = tryIntParse(countProp);
-    if (count === null)
-        return;
-    const badge = (_jsx("sup", { "data-bspk": "badge", "data-size": size, "data-surface-border": surfaceBorder || undefined, "data-variant": variant, children: count > 99 ? '99+' : count }));
-    if (children) {
-        return (_jsxs("span", { "data-bspk": "badge-wrapper", children: [children, badge] }));
-    }
-    return badge;
-}
-// position: relative;
-// display: -webkit-inline-box;
-// display: -webkit-inline-flex;
-// display: -ms-inline-flexbox;
-// display: inline-flex
-// ;
-// vertical-align: middle;
-// -webkit-flex-shrink: 0;
-// -ms-flex-negative: 0;
-// flex-shrink: 0;
-Badge.bspkName = 'Badge';
-export { Badge };
-//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA4ClD;;;;;;;;;;;;;GAaG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAc;IACzG,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAE3B,MAAM,KAAK,GAAG,CACV,2BAAe,OAAO,eAAY,IAAI,yBAAuB,aAAa,IAAI,SAAS,kBAAgB,OAAO,YACzG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,6BAAgB,eAAe,aAC1B,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,sBAAsB;AACtB,+BAA+B;AAC/B,gCAAgC;AAChC,+BAA+B;AAC/B,uBAAuB;AACvB,IAAI;AACJ,0BAA0B;AAC1B,0BAA0B;AAC1B,wBAAwB;AACxB,kBAAkB;AAElB,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/BannerAlert.d.ts

@@ -1,70 +0,0 @@
-import './banner-alert.scss';
-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 body of the banner alert.
-     *
-     * @type multiline
-     * @required
-     */
-    body: 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.
- *
- * @example
- *     import { BannerAlert } from '@bspk/ui/BannerAlert';
- *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *         />;
- *     }
- *
- * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
- *
- *
- *
- *
- * @name BannerAlert
- */
-declare function BannerAlert({ variant, onClose, header, callToAction, body, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace BannerAlert {
-    var bspkName: string;
-}
-export { BannerAlert };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/BannerAlert.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=banner-alert]{--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-bspk=banner-alert][data-variant=error]{--color: var(--status-error);--on-color: var(--status-on-error)}[data-bspk=banner-alert][data-variant=success]{--color: var(--status-success);--on-color: var(--status-on-success)}[data-bspk=banner-alert][data-variant=warning]{--color: var(--status-warning);--on-color: var(--status-on-warning)}[data-bspk=banner-alert][data-elevated]{box-shadow:var(--drop-shadow-raise)}[data-bspk=banner-alert] [data-icon-bar]{flex:1;padding:var(--spacing-sizing-04) var(--spacing-sizing-03);background:var(--color);color:var(--on-color)}[data-bspk=banner-alert] [data-icon-bar] svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=banner-alert] [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)}[data-bspk=banner-alert] [data-content] header{display:flex;flex-direction:row;gap:var(--spacing-sizing-03);height:var(--spacing-sizing-12);align-items:center}[data-bspk=banner-alert] [data-content] header span{flex:1;display:flex;align-items:center;color:var(--foreground-neutral-on-surface);font:var(--heading-h6)}@media(any-pointer: coarse){[data-bspk=banner-alert] [data-content] header span{font:var(--heading-h6)}}[data-bspk=banner-alert] [data-content] header 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){[data-bspk=banner-alert] [data-content] header button{height:var(--spacing-sizing-12);width:var(--spacing-sizing-12)}}[data-bspk=banner-alert] [data-content] header button svg{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=banner-alert] [data-content] [data-body]{display:flex;flex-direction:column;gap:var(--spacing-sizing-02);padding:0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0}[data-bspk=banner-alert] [data-content] [data-body] span{font:var(--body-base)}[data-bspk=banner-alert] [data-content] [data-body] 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)}`);;
-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';
-/**
- * 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.
- *
- * @example
- *     import { BannerAlert } from '@bspk/ui/BannerAlert';
- *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *         />;
- *     }
- *
- * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
- *
- *
- *
- *
- * @name BannerAlert
- */
-function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
-    return (_jsxs("article", { "data-bspk": "banner-alert", "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: body }), callToAction?.label && callToAction?.onClick && (_jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
-}
-BannerAlert.bspkName = 'BannerAlert';
-export { BannerAlert };
-//# sourceMappingURL=BannerAlert.js.map

package/dist/BannerAlert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../src/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AA4CzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/Button.d.ts

@@ -1,92 +0,0 @@
-import './button.scss';
-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'> & {
-    /**
-     * The label of the button.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The icon of the button.
-     *
-     * @type BspkIcon
-     */
-    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;
-    /** The function to call when the button is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-/**
- * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
- *
- * @example
- *     import { Button } from '@bspk/ui/Button';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
- *
- * @name Button
- */
-declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;
-declare namespace Button {
-    var bspkName: string;
-}
-export { Button };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Button.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;font-family:var(--typeface);position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}`);;
-import { isValidElement } from 'react';
-import { Tooltip } from './Tooltip';
-import { isValidIcon } from './utils/children';
-import { useErrorLogger } from './utils/errors';
-/**
- * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
- *
- * @example
- *     import { Button } from '@bspk/ui/Button';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
- *
- * @name Button
- */
-function Button(props) {
-    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, 
-    // showLabel: showLabelProp = true,
-    showLabel = true, toolTip: toolTipProp, children, ...containerProps } = props;
-    const label = typeof children === 'string' ? children : labelProp || '';
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
-    const button = (_jsx(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-variant": variant, "data-width": width, disabled: disabled || undefined, children: children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-touch-target": true }), !!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })) }));
-    if (toolTip) {
-        return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
-    }
-    return button;
-}
-Button.bspkName = 'Button';
-export { Button };
-//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}