@bspk/ui 1.3.10 → 1.3.16

package/src/components/Layout/Layout.tsx

@@ -1,85 +0,0 @@
-import { ElementType, ReactNode } from 'react';
-
-import { ElementProps } from '-/types/common';
-
-export type LayoutProps<As extends ElementType = ElementType> = {
-    /**
-     * The content of the Layout.
-     *
-     * @required
-     */
-    children?: ReactNode;
-    /**
-     * Determines if the flex-direction should be displayed as a column.
-     *
-     * @default false
-     */
-    column?: boolean;
-    /** The gap between the children. */
-    gap?: '4' | '16';
-    /**
-     * The element type to render as.
-     *
-     * @default div
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The alignment style to apply to the Layout.
-     *
-     * @default flex-start
-     */
-    align?: 'center' | 'flex-end' | 'flex-start' | 'stretch';
-    /**
-     * The justification style to apply to the Layout.
-     *
-     * @default flex-start
-     */
-    justify?: 'center' | 'flex-end' | 'flex-start' | 'stretch';
-};
-
-/**
- * Utility component used within other components for layout purposes.
- *
- * @example
- *     import { Layout } from '@bspk/ui/Layout';
- *
- *     <Layout>Low effort example</Layout>;
- *
- * @name Layout
- * @phase Utility
- */
-export function Layout<As extends ElementType = ElementType>({
-    children,
-    column,
-    gap = '16',
-    style,
-    as,
-    align = 'flex-start',
-    justify = 'flex-start',
-    ...props
-}: ElementProps<LayoutProps<As>, As>) {
-    const As: ElementType = as || 'div';
-
-    const alignItems = align || 'flex-start';
-    const justifyContent = justify || 'flex-start';
-
-    return (
-        <As
-            {...props}
-            // data-bspk="layout" -- Utility components do not need a data-bspk attribute
-            style={{
-                ...style,
-                display: 'flex',
-                flexDirection: column ? 'column' : 'row',
-                gap: gap ? `${gap}px` : 'px',
-                alignItems,
-                justifyContent,
-            }}
-        >
-            {children}
-        </As>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Layout/LayoutExample.tsx

@@ -1,17 +0,0 @@
-import { LayoutProps } from './Layout';
-import { ComponentExample, Preset } from '-/utils/demo';
-
-export const presets: Preset<LayoutProps>[] = [];
-
-export const LayoutExample: ComponentExample<LayoutProps> = {
-    render: ({ props, Component }) => {
-        return (
-            <Component {...props}>
-                <div>Alpha</div>
-                <div>Beta</div>
-                <div>Gamma</div>
-            </Component>
-        );
-    },
-    presets,
-};

package/src/components/Layout/index.tsx

@@ -1 +0,0 @@
-export * from './Layout';

package/src/components/UIProvider/AriaLiveMessageHandler.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { useEventListener } from '-/hooks/useAddEventListener';
-import { useTimeout } from '-/hooks/useTimeout';
-import { AriaLiveMessage } from '-/utils/uiContext';
-
-const CUSTOM_EVENT_NAME = 'bspk-aria-live';
-
-export function sendAriaLiveMessage(message: string, live: 'assertive' | 'polite' = 'polite') {
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_NAME, { detail: { message, live } }));
-}
-
-/**
- * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
- *
- * We use a custom event to communicate between components and this handler.
- *
- * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
- *
- * We queue messages to ensure that they are read by screen readers.
- *
- * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
- */
-export function AriaLiveMessageHandler() {
-    const [ariaLiveMessage, setAriaLiveMessage] = useState<AriaLiveMessage | undefined>(undefined);
-
-    const timeout = useTimeout();
-
-    useEventListener(
-        CUSTOM_EVENT_NAME,
-        (event: CustomEvent) => {
-            const { message, live } = event.detail;
-            // Clear any existing message to ensure that screen readers read the new message
-            setAriaLiveMessage(undefined);
-            timeout.set(() => setAriaLiveMessage({ message, live: live || 'polite' }), 10);
-        },
-        document,
-    );
-
-    return (
-        ariaLiveMessage && (
-            <div aria-live={ariaLiveMessage?.live || 'polite'} data-sr-only role="alert">
-                {ariaLiveMessage?.message}
-            </div>
-        )
-    );
-}