@bspk/ui 1.1.32 → 1.1.33

package/dist/Dialog.d.ts

@@ -1,65 +0,0 @@
-import './dialog.scss';
-import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from './';
-export type DialogProps = CommonProps<'id'> & {
-    /** The content of the dialog. */
-    children?: ReactNode;
-    /** A ref to the dialog element. */
-    innerRef?: SetRef<HTMLDivElement>;
-    /**
-     * If the dialog should appear.
-     *
-     * @default false
-     */
-    open?: boolean;
-    /**
-     * Function to call when the dialog is closed.
-     *
-     * @type () => void
-     * @required
-     */
-    onClose: () => void;
-    /**
-     * The placement of the dialog on the screen.
-     *
-     * @default center
-     */
-    placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
-    /**
-     * Whether the dialog should have a scrim behind it.
-     *
-     * @default false
-     */
-    hideScrim?: boolean;
-};
-/**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
- * further interactions until an action is selected.
- *
- * @example
- *     import { Dialog } from '@bspk/ui/Dialog';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
- *
- *         return (
- *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
- *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
- *                 </Dialog>
- *             </>
- *         );
- *     }
- *
- * @name Dialog
- */
-declare function Dialog({ children, innerRef, onClose, open, placement, hideScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
-declare namespace Dialog {
-    var bspkName: string;
-}
-export { Dialog };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Dialog.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=dialog]{position:fixed;inset:0;z-index:var(--z-index-dialog)}[data-bspk=dialog] [data-dialog-box]{text-align:start;position:relative;border-radius:var(--radius-large);box-shadow:var(--drop-shadow-float);background:var(--surface-neutral-t1-base);color:var(--foreground-neutral-on-surface);max-height:calc(100vh - var(--spacing-sizing-24));overflow:scroll;z-index:2}[data-bspk=dialog] [data-dialog-box]>:first-of-type{margin-top:0}[data-bspk=dialog] [data-dialog-box]>:last-child{margin-bottom:0}@media(width >= 640px){[data-bspk=dialog] [data-dialog-box]{width:90%}}@media(width >= 768px){[data-bspk=dialog] [data-dialog-box]{width:80%}}@media(width >= 1024px){[data-bspk=dialog] [data-dialog-box]{width:60%}}@media(width >= 1280px){[data-bspk=dialog] [data-dialog-box]{width:50%}}[data-bspk=dialog] [data-dialog-backdrop]{z-index:1;position:fixed;inset:0;background-color:var(--background-scrim);opacity:0;transition:opacity .3s}[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop]{opacity:1}[data-bspk=dialog][data-placement=center]{display:flex;justify-content:center;align-items:center}[data-bspk=dialog][data-placement=center] [data-dialog-box]{transition:opacity 1s;opacity:0}[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box]{opacity:1}[data-bspk=dialog][data-placement=bottom] [data-dialog-box]{position:absolute;border-bottom-left-radius:0;border-bottom-right-radius:0;width:600px;left:50%;transform:translateX(-50%);bottom:-100vh;transition:bottom .3s}[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box]{bottom:0}[data-bspk=dialog][data-placement=top] [data-dialog-box]{position:absolute;border-top-left-radius:0;border-top-right-radius:0;width:600px;left:50%;transform:translateX(-50%);top:-100vh;transition:top .3s}[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box]{top:0}[data-bspk=dialog][data-placement=left] [data-dialog-box]{position:absolute;max-height:unset;width:280px;height:100vh;border-bottom-left-radius:0;border-top-left-radius:0;left:-100vw;transition:left .3s}[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box]{left:0}[data-bspk=dialog][data-placement=right] [data-dialog-box]{position:absolute;max-height:unset;width:280px;height:100vh;border-bottom-right-radius:0;border-top-right-radius:0;right:-100vw;transition:right .3s}[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box]{right:0}`);;
-import { FocusTrap } from 'focus-trap-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Portal } from './Portal';
-import { useId } from './hooks/useId';
-import { useOutsideClick } from './hooks/useOutsideClick';
-/**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
- * further interactions until an action is selected.
- *
- * @example
- *     import { Dialog } from '@bspk/ui/Dialog';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
- *
- *         return (
- *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
- *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
- *                 </Dialog>
- *             </>
- *         );
- *     }
- *
- * @name Dialog
- */
-function Dialog({ 
-//
-children, innerRef, onClose, open, placement = 'center', hideScrim, id: idProp, ...containerProps }) {
-    const id = useId(idProp);
-    const boxRef = useRef(null);
-    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
-    const prevVisibility = useRef(visibility);
-    const setVisibility = useCallback((next) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
-    const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
-    useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show'))
-                return;
-            setVisibility('showing');
-            return;
-        }
-        if (prevVisibility.current.startsWith('hid'))
-            return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
-    useEffect(() => {
-        if (prevVisibility.current === visibility)
-            return;
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-    useEffect(() => {
-        if (visibility.startsWith('hid'))
-            return;
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, visibility]);
-    useOutsideClick([boxRef.current], onClose, !open);
-    return (visibility !== 'hidden' && (_jsx(Portal, { children: _jsxs("div", { ...containerProps, "data-bspk": "dialog", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: [!hideScrim && _jsx("div", { "aria-hidden": "true", "data-dialog-backdrop": true }), _jsx(FocusTrap, { focusTrapOptions: {
-                        fallbackFocus: () => boxRef.current,
-                        clickOutsideDeactivates: true,
-                    }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
-                            boxRef.current = node;
-                        }, tabIndex: -1, children: children }) })] }) })));
-}
-Dialog.bspkName = 'Dialog';
-export { Dialog };
-//# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/Divider.d.ts

@@ -1,57 +0,0 @@
-import './divider.scss';
-import { ElementProps } from './';
-export type DividerProps = {
-    /**
-     * The orientation of the divider.
-     *
-     * @default horizontal
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The thickness of the divider.
-     *
-     * @default light
-     */
-    thickness?: 'heavy' | 'light';
-    /**
-     * If the divider padding is shown.
-     *
-     * @default true
-     */
-    padding?: boolean;
-    /**
-     * The inset (margin) of the divider. The value is a number between 0 and 12, which corresponds to the spacing
-     * sizing variables defined in the theme. The inset is applied to the left and right sides of the divider when the
-     * orientation is horizontal, and to the top and bottom when the orientation is vertical.
-     *
-     * @default 0
-     */
-    inset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-};
-/**
- * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
- * label.
- *
- * Vertical thin lines that separates grouped content or other visual elements within a container.
- *
- * @example
- *     import { Divider } from '@bspk/ui/Divider';
- *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
- *
- * @name Divider
- */
-declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Divider {
-    var bspkName: string;
-}
-export { Divider };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Divider.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=divider]{/*! --inset: is set via inline style */display:flex;background-color:var(--stroke-neutral-low);align-self:stretch;place-content:stretch stretch;margin:0;padding:0;content:"hello";--length: calc(100% - var(--inset) * 2)}[data-bspk=divider],[data-bspk=divider][data-thickness=light]{--line-thickness: 1px;--padding: var(--spacing-sizing-02)}[data-bspk=divider][data-thickness=heavy]{--line-thickness: 2px;--padding: var(--spacing-sizing-04);border-radius:var(--radius-circular)}[data-bspk=divider],[data-bspk=divider][data-orientation=horizontal]{width:unset;min-height:unset;height:var(--line-thickness);min-width:var(--length);margin:var(--padding) var(--inset)}[data-bspk=divider][data-orientation=vertical]{height:unset;min-width:unset;width:var(--line-thickness);min-height:var(--length);margin:var(--inset) var(--padding)}[data-bspk=divider][data-hide-padding]{--padding: 0}`);;
-const insetToVariable = (insetProp) => {
-    const inset = Number(insetProp);
-    if (inset === undefined || inset === null || inset < 1 || inset > 12)
-        return '0px';
-    return `var(--spacing-sizing-${inset.toString().padStart(2, '0')})`;
-};
-/**
- * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
- * label.
- *
- * Vertical thin lines that separates grouped content or other visual elements within a container.
- *
- * @example
- *     import { Divider } from '@bspk/ui/Divider';
- *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
- *
- * @name Divider
- */
-function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
-    return (_jsx("div", { ...props, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: {
-            ...props.style,
-            '--inset': insetToVariable(inset),
-        } }));
-}
-Divider.bspkName = 'Divider';
-export { Divider };
-//# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAgCxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EACD;YACI,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACb,GAE9B,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/EmptyState.d.ts

@@ -1,52 +0,0 @@
-import { ReactNode } from 'react';
-import { CallToActionButton } from './';
-export type EmptyStateProps = {
-    /** The image or icon to display in the empty state. */
-    children?: ReactNode;
-    /**
-     * The header of the empty state.
-     *
-     * @required
-     */
-    header: string;
-    /**
-     * The body of the empty state.
-     *
-     * @required
-     */
-    body: string;
-    /**
-     * The text alignment of the body.
-     *
-     * @default center
-     */
-    bodyAlign?: 'center' | 'left' | 'right';
-    /**
-     * This property may be undefined or an object containing required CallToActionButton properties.
-     *
-     * @type CallToActionButton
-     */
-    callToAction?: CallToActionButton;
-};
-/**
- * A design pattern component that indicates to users that system has no content to display.
- *
- * @example
- *     import { EmptyState } from '@bspk/ui/EmptyState';
- *
- *     export function Example() {
- *         return (
- *             <EmptyState body="Example body" header="Example header">
- *                 Example EmptyState
- *             </EmptyState>
- *         );
- *     }
- *
- * @name EmptyState
- */
-declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-declare namespace EmptyState {
-    var bspkName: string;
-}
-export { EmptyState };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/EmptyState.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from './Button';
-import { Layout } from './Layout';
-import { Txt } from './Txt';
-/**
- * A design pattern component that indicates to users that system has no content to display.
- *
- * @example
- *     import { EmptyState } from '@bspk/ui/EmptyState';
- *
- *     export function Example() {
- *         return (
- *             <EmptyState body="Example body" header="Example header">
- *                 Example EmptyState
- *             </EmptyState>
- *         );
- *     }
- *
- * @name EmptyState
- */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
-    return (_jsxs(Layout, { align: "center", column: true, "data-bspk": "empty-state", style: {
-            margin: 'var(--spacing-sizing-04)',
-            maxWidth: '500px',
-        }, children: [children, _jsxs(Layout, { align: "center", column: true, gap: "4", children: [_jsx(Txt, { as: "header", variant: "heading-h5", children: header }), _jsx(Txt, { as: "p", style: { textAlign: bodyAlign }, variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
-}
-EmptyState.bspkName = 'EmptyState';
-export { EmptyState };
-//# sourceMappingURL=EmptyState.js.map

package/dist/EmptyState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAiC5B;;;;;;;;;;;;;;;GAeG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IAC/F,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/Fab.d.ts

@@ -1,51 +0,0 @@
-import './fab.scss';
-import { ElementType } from 'react';
-import { ButtonProps } from './Button';
-import { ElementProps } from './';
-export type FabVariant = 'neutral' | 'primary' | 'secondary';
-export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>, 'as' | 'icon' | 'onClick' | 'showLabel' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
-    /**
-     * The size of the button.
-     *
-     * @default small
-     */
-    size?: 'medium' | 'small';
-    /**
-     * The style variant of the button.
-     *
-     * @default primary
-     */
-    variant?: FabVariant;
-    /**
-     * The placement of the button on the container.
-     *
-     * @default bottom-right
-     */
-    placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-    /**
-     * The container to render the button in.
-     *
-     * @default local
-     */
-    container?: 'local' | 'page';
-};
-/**
- * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
- * bottom right of a screen.
- *
- * @example
- *     import { SvgBolt } from '@bspk/icons/Bolt';
- *     import { Fab } from '@bspk/ui/Fab';
- *
- *     export function Example() {
- *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
- *     }
- *
- * @name Fab
- */
-declare function Fab<As extends ElementType = 'button'>({ size, variant, showLabel: showLabelProp, as, placement, container, label, icon, toolTip, ...otherProps }: ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-declare namespace Fab {
-    var bspkName: string;
-}
-export { Fab };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Fab.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=fab]{--placement-offset: var(--spacing-sizing-04);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;text-decoration:none;z-index:var(--z-index-fab);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-small);background:var(--variant-background);color:var(--variant-foreground);--variant-gradient: linear-gradient(var(--variant-background), var(--variant-background))}[data-bspk=fab][data-container=page]{position:fixed}[data-bspk=fab][data-container=local]{position:absolute}[data-bspk=fab][data-placement=top-right]{top:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-right]{bottom:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=top-left]{top:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-left]{bottom:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab]>[data-fab-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=fab]>[data-fab-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=fab][data-size=small]{font:var(--labels-base);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-04)}[data-bspk=fab][data-size=small]>[data-fab-icon]{width:var(--spacing-sizing-05)}[data-bspk=fab][data-size=medium]{font:var(--labels-large);height:var(--spacing-sizing-14);padding:0 var(--spacing-sizing-07)}[data-bspk=fab][data-size=medium]>[data-fab-icon]{width:var(--spacing-sizing-06)}[data-bspk=fab][data-variant=primary]{--variant-background: var(--surface-brand-primary);--variant-foreground: var(--foreground-brand-on-primary)}[data-bspk=fab][data-variant=secondary]{--variant-background: var(--surface-brand-secondary);--variant-foreground: var(--foreground-brand-on-secondary)}[data-bspk=fab][data-variant=neutral]{--variant-background: var(--surface-neutral-t1-base);--variant-foreground: var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=hover]>[data-bspk=fab],[data-bspk=fab]:hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),var(--variant-gradient)}[data-pseudo=active]>[data-bspk=fab],[data-bspk=fab]:active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),var(--variant-gradient)}[data-pseudo=focus]>[data-bspk=fab],[data-bspk=fab]:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=fab][data-round]{border-radius:var(--radius-circular);aspect-ratio:1/1;padding:0}`);;
-import { Tooltip } from './Tooltip';
-import { isValidIcon } from './utils/children';
-import { useErrorLogger } from './utils/errors';
-/**
- * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
- * bottom right of a screen.
- *
- * @example
- *     import { SvgBolt } from '@bspk/icons/Bolt';
- *     import { Fab } from '@bspk/ui/Fab';
- *
- *     export function Example() {
- *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
- *     }
- *
- * @name Fab
- */
-function Fab({ size = 'small', variant = 'primary', showLabel: showLabelProp = true, as, placement = 'bottom-right', container = 'local', label, icon, toolTip, ...otherProps }) {
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabelProp === false && icon;
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    const As = as || 'button';
-    const button = (_jsxs(As, { ...otherProps, "aria-label": label, "data-bspk": "fab", "data-container": container, "data-placement": placement, "data-round": hideLabel || undefined, "data-size": size, "data-variant": variant, children: [!!icon && _jsx("span", { "data-fab-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-fab-label": true, children: label })] }));
-    return toolTip || hideLabel ? (_jsx(Tooltip, { label: toolTip || label, placement: "top", children: button })) : (button);
-}
-Fab.bspkName = 'Fab';
-export { Fab };
-//# sourceMappingURL=Fab.js.map

package/dist/Fab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../src/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqChD;;;;;;;;;;;;;GAaG;AACH,SAAS,GAAG,CAAoC,EAC5C,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,EAAE,EACF,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACgB;IAC7B,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAE/F,MAAM,EAAE,GAAgB,EAAE,IAAI,QAAQ,CAAC;IAEvC,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,UAAU,gBACF,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,SAAS,IAAI,SAAS,eACvB,IAAI,kBACD,OAAO,aAEpB,CAAC,CAAC,IAAI,IAAI,gDAAqB,IAAI,GAAQ,EAC3C,CAAC,SAAS,IAAI,iDAAsB,KAAK,GAAQ,IACjD,CACR,CAAC;IAEF,OAAO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC,CAAC,CAAC,CACA,MAAM,CACT,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/FormField.d.ts

@@ -1,74 +0,0 @@
-import './form-field.scss';
-import { CommonProps, InvalidPropsLibrary } from './';
-export type FieldControlProps = {
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * @default false
-     */
-    invalid?: boolean;
-    /** The id of the control description. */
-    'aria-describedby'?: string;
-    /** The id of the error message */
-    'aria-errormessage'?: string;
-};
-export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
-    /**
-     * The label of the field.
-     *
-     * @required
-     */
-    label: string;
-    /** The id of the control. */
-    controlId: string;
-    /**
-     * The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
-     * TimePicker.
-     *
-     * @type (childProps: FieldControlProps) => JSX.Element
-     * @required
-     */
-    children: (childProps: FieldControlProps) => JSX.Element;
-    /** The helperText of the field. */
-    helperText?: string;
-    /** The trailing element of the label. */
-    labelTrailing?: React.ReactNode;
-};
-/**
- * Wrapper component for form controls.
- *
- * Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
- *
- * @example
- *     import { TextInput } from '@bspk/ui/TextInput';
- *     import { FormField } from '@bspk/ui/FormField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 {(fieldProps) => {
- *                     return (
- *                         <TextInput
- *                             aria-label="example aria-label"
- *                             name="example-text"
- *                             onChange={(next) => {
- *                                 setState(next);
- *                             }}
- *                             value={state}
- *                             {...fieldProps}
- *                         />
- *                     );
- *                 }}
- *             </FormField>
- *         );
- *     }
- *
- * @name FormField
- */
-declare function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace FormField {
-    var bspkName: string;
-}
-export { FormField };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/FormField.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=form-field]{box-sizing:border-box;max-width:100%;width:fit-content;display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}[data-bspk=form-field] header label{flex-grow:1}`);;
-import { InlineAlert } from './InlineAlert';
-import { Layout } from './Layout';
-import { Txt } from './Txt';
-/**
- * Wrapper component for form controls.
- *
- * Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
- *
- * @example
- *     import { TextInput } from '@bspk/ui/TextInput';
- *     import { FormField } from '@bspk/ui/FormField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 {(fieldProps) => {
- *                     return (
- *                         <TextInput
- *                             aria-label="example aria-label"
- *                             name="example-text"
- *                             onChange={(next) => {
- *                                 setState(next);
- *                             }}
- *                             value={state}
- *                             {...fieldProps}
- *                         />
- *                     );
- *                 }}
- *             </FormField>
- *         );
- *     }
- *
- * @name FormField
- */
-function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }) {
-    const errorMessageId = errorMessage && `${controlId}-error-message`;
-    const helperTextId = helperText && `${controlId}-helper-text`;
-    if (typeof children !== 'function')
-        return null;
-    return (_jsxs("div", { "data-bspk": "form-field", "data-invalid": invalid || undefined, children: [_jsxs(Layout, { as: "header", children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
-                invalid: !!errorMessage,
-                'aria-describedby': helperTextId,
-                'aria-errormessage': errorMessageId,
-            }), errorMessage && (_jsx(InlineAlert, { id: errorMessageId, variant: "error", children: errorMessage })), helperText && (_jsx(Txt, { id: helperTextId, variant: "body-small", children: helperText }))] }));
-}
-FormField.bspkName = 'FormField';
-export { FormField };
-//# sourceMappingURL=FormField.js.map

package/dist/FormField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAyC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,GACK;IACb,MAAM,cAAc,GAAG,YAAY,IAAI,GAAG,SAAS,gBAAgB,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,IAAI,GAAG,SAAS,cAAc,CAAC;IAE9D,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC1D,MAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,aACf,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO,EAAE,CAAC,CAAC,YAAY;gBACvB,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Img.d.ts

@@ -1,33 +0,0 @@
-import { ElementProps } from './';
-export type ImgProps = {
-    /**
-     * The URL of the image.
-     *
-     * @required
-     */
-    src: string;
-    /**
-     * The alternative text for the image.
-     *
-     * @required
-     */
-    alt: string;
-};
-/**
- * The Img component is used to display images on the page.
- *
- * @example
- *     import { Img } from '@bspk/ui/Img';
- *
- *     export function Example() {
- *         return <Img alt="Example alt" src="Example src" />;
- *     }
- *
- * @name Img
- */
-declare function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Img {
-    var bspkName: string;
-}
-export { Img };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Img.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * The Img component is used to display images on the page.
- *
- * @example
- *     import { Img } from '@bspk/ui/Img';
- *
- *     export function Example() {
- *         return <Img alt="Example alt" src="Example src" />;
- *     }
- *
- * @name Img
- */
-function Img({ alt, ...props }) {
-    return _jsx("img", { ...props, alt: alt, "data-bspk": "img" });
-}
-Img.bspkName = 'Img';
-export { Img };
-//# sourceMappingURL=Img.js.map

package/dist/Img.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":";AAiBA;;;;;;;;;;;GAWG;AACH,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiC;IACzD,OAAO,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,eAAY,KAAK,GAAG,CAAC;AACxD,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}