@bspk/ui 1.1.34 → 1.2.0

package/src/components/Dialog/dialog.scss

@@ -1,17 +1,78 @@
 [data-bspk='dialog'] {
+    --width: 600px; // default width for dialog box
+
     position: fixed;
     inset: 0;
     z-index: var(--z-index-dialog);
+    pointer-events: none; // makes scrim clckable
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+            transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translate(0, 0);
+        }
+    }
+
+    @keyframes placement-left {
+        0% {
+            transform: translateX(-100vw);
+        }
+
+        100% {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes placement-right {
+        0% {
+            transform: translateX(100vw);
+        }
+
+        100% {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes placement-top {
+        0% {
+            transform: translateY(-100vh);
+        }
+
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes placement-bottom {
+        0% {
+            transform: translateY(100vh);
+        }
+
+        100% {
+            transform: translateY(0);
+        }
+    }
 
     [data-dialog-box] {
+        pointer-events: all; // allow pointer events on the dialog box
         text-align: start;
         position: relative;
-        border-radius: var(--radius-large);
+        border-radius: var(--radius-lg);
         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));
         z-index: 2;
+        width: calc(100% - var(--spacing-sizing-08));
+        animation-name: var(--box-animation-name);
+        animation-duration: 0.5s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
 
         > :first-of-type {
             margin-top: 0;
@@ -21,8 +82,6 @@
             margin-bottom: 0;
         }
 
-        width: calc(100% - var(--spacing-sizing-08));
-
         // we make the width responsive to the viewport
         @media (width >= 640px) {
             width: 90%;
@@ -41,77 +100,48 @@
         }
     }
 
-    [data-dialog-backdrop] {
-        z-index: 1;
-        position: fixed;
-        inset: 0;
-        background-color: var(--background-scrim);
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    &[data-visibility='show'] {
-        [data-dialog-backdrop] {
-            opacity: 1;
-        }
-    }
-
     &[data-placement='center'] {
+        --box-animation-name: fade-in;
+
         display: flex;
         justify-content: center;
         align-items: center;
 
         [data-dialog-box] {
-            transition: opacity 1s;
-            opacity: 0;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                opacity: 1;
-            }
+            position: absolute;
         }
     }
 
     &[data-placement='bottom'] {
+        --box-animation-name: placement-bottom;
+
         [data-dialog-box] {
             position: absolute;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
-            width: 600px;
-            left: 50%;
+            width: var(--width);
+            left: calc(50% - var(--width) / 2);
             transform: translateX(-50%);
-            bottom: -100vh;
-            transition: bottom 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                bottom: 0;
-            }
+            bottom: 0;
         }
     }
 
     &[data-placement='top'] {
+        --box-animation-name: 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 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                top: 0;
-            }
+            width: var(--width);
+            left: calc(50% - var(--width) / 2);
+            top: 0;
         }
     }
 
     &[data-placement='left'] {
+        --box-animation-name: placement-left;
+
         [data-dialog-box] {
             position: absolute;
             max-height: unset;
@@ -119,18 +149,13 @@
             height: 100vh;
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
-            left: -100vw;
-            transition: left 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                left: 0;
-            }
+            left: 0;
         }
     }
 
     &[data-placement='right'] {
+        --box-animation-name: placement-right;
+
         [data-dialog-box] {
             position: absolute;
             max-height: unset;
@@ -138,14 +163,7 @@
             height: 100vh;
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
-            right: -100vw;
-            transition: right 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                right: 0;
-            }
+            right: 0;
         }
     }
 }

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,6 @@
-import { ElementProps } from '-';
+import { ElementProps } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
+
 import './divider.scss';
 
 export type DividerProps = {
@@ -57,9 +58,9 @@ const insetToVariable = (insetProp: number | string) => {
  *     }
  *
  * @name Divider
- * @phase DesignReview
+ * @phase UXReview
  */
-function Divider({
+export function Divider({
     padding = true,
     orientation = 'horizontal',
     thickness = 'light',
@@ -69,6 +70,7 @@ function Divider({
     return (
         <div
             {...props}
+            aria-hidden
             aria-orientation={orientation}
             data-bspk="divider"
             data-hide-padding={!padding || undefined}
@@ -83,8 +85,4 @@ function Divider({
     );
 }
 
-Divider.bspkName = 'Divider';
-
-export { Divider };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Divider/divider.scss

@@ -21,22 +21,18 @@
         --line-thickness: 2px;
         --padding: var(--spacing-sizing-04);
 
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
     }
 
     &, // default
   &[data-orientation='horizontal'] {
-        width: unset;
-        min-height: unset;
-        height: var(--line-thickness);
+        min-height: var(--line-thickness);
         min-width: var(--length);
         margin: var(--padding) var(--inset);
     }
 
     &[data-orientation='vertical'] {
-        height: unset;
-        min-width: unset;
-        width: var(--line-thickness);
+        min-width: var(--line-thickness);
         min-height: var(--length);
         margin: var(--inset) var(--padding);
     }

package/src/components/EmptyState/EmptyState.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 
-import { CallToActionButton } from '-';
 import { Button } from '-/components/Button';
 import { Layout } from '-/components/Layout';
 import { Txt } from '-/components/Txt';
+import { CallToActionButton } from '-/types/common';
 
 export type EmptyStateProps = {
     /** The image or icon to display in the empty state. */
@@ -50,9 +50,9 @@ export type EmptyStateProps = {
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
+export function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
     return (
         <Layout
             align="center"
@@ -84,8 +84,4 @@ function EmptyState({ children, header, body, callToAction, bodyAlign = 'center'
     );
 }
 
-EmptyState.bspkName = 'EmptyState';
-
-export { EmptyState };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/EmptyState/EmptyStateExample.tsx

@@ -1,25 +1,10 @@
+import { EmptyStateProps } from '.';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { EmptyStateProps } from '.';
-
 export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
-    render: ({ props: { children, ...props }, context, Component }) => (
-        <Component {...props}>
-            {context?.preset?.label === 'With Image' ? (
-                <ExamplePlaceholder
-                    style={{
-                        height: '200px',
-                        width: '60%',
-                        minWidth: '250px',
-                    }}
-                />
-            ) : (
-                children
-            )}
-        </Component>
-    ),
+    render: ({ props: { children, ...props }, Component }) => <Component {...props}>{children}</Component>,
     presets: [
         {
             label: 'With CallToAction',
@@ -28,10 +13,23 @@ export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action
                     label: 'Add payment method',
                     onClick: () => action('Add payment method clicked!'),
                 },
+                children: undefined,
             },
         },
         {
-            label: 'With Image',
+            label: 'With Custom Content',
+            propState: {
+                callToAction: undefined,
+                children: (
+                    <ExamplePlaceholder
+                        style={{
+                            height: '200px',
+                            width: '60%',
+                            minWidth: '250px',
+                        }}
+                    />
+                ),
+            },
         },
     ],
 });

package/src/components/ExamplePlaceholder/ExamplePlaceholder.tsx

@@ -1,36 +1,58 @@
 import { useRef } from 'react';
 
-import { ElementProps } from '-';
 import { Txt } from '-/components/Txt';
+import { ElementProps } from '-/types/common';
 
 const dimension = (value: number | string) => (typeof value === 'number' ? `${value}px` : `${value}`);
 
+export type ExamplePlaceholderProps = {
+    /**
+     * Whether to hide the size text.
+     *
+     * @default false
+     */
+    hideSize?: boolean;
+    /**
+     * The height of the placeholder.
+     *
+     * @default 100
+     * @type string
+     */
+    height?: number | string;
+    /**
+     * The width of the placeholder.
+     *
+     * @default 100%
+     * @type string
+     */
+    width?: number | string;
+    /**
+     * The direction of the placeholder.
+     *
+     * @default 'row'
+     */
+    direction?: 'column' | 'row';
+};
+
 /**
  * A utility component that serves as a placeholder for examples.
  *
  * @name ExamplePlaceholder
  * @phase Utility
  */
-function ExamplePlaceholder({
+export function ExamplePlaceholder({
     hideSize = false,
     height = 100,
     width = '100%',
     direction = 'row',
     ...props
-}: ElementProps<
-    {
-        hideSize?: boolean;
-        height?: number | string;
-        width?: number | string;
-        direction?: 'column' | 'row';
-    },
-    'div'
->) {
+}: ElementProps<ExamplePlaceholderProps, 'div'>) {
     const ref = useRef<HTMLDivElement | null>(null);
 
     return (
         <div
             {...props}
+            data-bspk-utility="example-placeholder"
             data-example-placeholder
             ref={ref}
             style={{
@@ -50,7 +72,3 @@ function ExamplePlaceholder({
         </div>
     );
 }
-
-ExamplePlaceholder.bspkName = 'ExamplePlaceholder';
-
-export { ExamplePlaceholder };

package/src/components/Fab/Fab.tsx

@@ -1,17 +1,16 @@
-import { ElementType } from 'react';
+import { AriaAttributes, ElementType, isValidElement } from 'react';
 
-import { ElementProps } from '-';
 import { ButtonProps } from '-/components/Button';
-import { Tooltip } from '-/components/Tooltip';
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
+import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
+import { ElementProps } from '-/types/common';
+
 import './fab.scss';
 
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = 'button'> = Pick<
     ButtonProps<As>,
-    'as' | 'icon' | 'onClick' | 'showLabel' | 'toolTip'
+    'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'
 > &
     Required<Pick<ButtonProps<As>, 'label'>> & {
         /**
@@ -53,55 +52,66 @@ export type FabProps<As extends ElementType = 'button'> = Pick<
  *     }
  *
  * @name Fab
- * @phase DesignReview
+ * @phase UXReview
  */
-function Fab<As extends ElementType = 'button'>({
-    size = 'small',
-    variant = 'primary',
-    showLabel: showLabelProp = true,
-    as,
-    placement = 'bottom-right',
-    container = 'local',
-    label,
-    icon,
-    toolTip,
-    ...otherProps
-}: ElementProps<FabProps<As>, As>) {
-    // 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.');
+export function Fab<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<FabProps<As>, As>) {
+    const {
+        size = 'small',
+        variant = 'primary',
+        iconOnly: iconOnlyProp = false,
+        as: As = 'button',
+        placement = 'bottom-right',
+        container = 'local',
+        label,
+        icon,
+        toolTip,
+        ...otherProps
+    } = props;
 
-    const As: ElementType = as || 'button';
+    // ignore iconOnly=true if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
 
-    const button = (
+    const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...otherProps}
+            aria-describedby={triggerProps['aria-describedby'] || otherProps['aria-describedby']}
             aria-label={label}
             data-bspk="fab"
             data-container={container}
             data-placement={placement}
-            data-round={hideLabel || undefined}
+            data-round={iconOnly || undefined}
             data-size={size}
             data-variant={variant}
+            onFocus={(e) => {
+                triggerProps.onFocus?.();
+                otherProps.onFocus?.(e);
+            }}
+            onMouseLeave={(e) => {
+                triggerProps.onMouseLeave?.();
+                otherProps.onMouseLeave?.(e);
+            }}
+            onMouseOver={(e) => {
+                triggerProps.onMouseOver?.();
+                otherProps.onMouseOver?.(e);
+            }}
         >
-            {!!icon && <span data-fab-icon>{icon}</span>}
-            {!hideLabel && <span data-fab-label>{label}</span>}
+            {!!icon && isValidElement(icon) && (
+                <span aria-hidden={true} data-fab-icon>
+                    {icon}
+                </span>
+            )}
+            {!iconOnly && <span data-fab-label>{label}</span>}
         </As>
     );
 
-    return toolTip || hideLabel ? (
-        <Tooltip label={toolTip || label} placement="top">
-            {button}
-        </Tooltip>
-    ) : (
-        button
-    );
-}
-
-Fab.bspkName = 'Fab';
+    if (toolTip || iconOnly)
+        return (
+            <Tooltip label={toolTip || label} placement="top">
+                {button}
+            </Tooltip>
+        );
 
-export { Fab };
+    return button({});
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Fab/fab.scss

@@ -113,7 +113,7 @@
     }
 
     &[data-round] {
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
         aspect-ratio: 1/1;
         padding: 0;
     }