@bspk/ui 1.1.33 → 1.2.0

package/src/components/Chip/chip.scss

@@ -1,66 +0,0 @@
-[data-bspk='chip'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
-    height: var(--spacing-sizing-06);
-    padding: 0 var(--spacing-sizing-02);
-    font: var(--labels-small);
-    color: var(--foreground-neutral-on-surface-variant-01);
-    background-color: var(--surface-neutral-t1-base);
-    border: 1px solid var(--stroke-neutral-low);
-    border-radius: var(--radius-small);
-
-    &:not([data-flat]) {
-        box-shadow: var(--drop-shadow-raise);
-    }
-
-    &[data-variant='filter'] {
-        cursor: pointer;
-    }
-
-    &[data-wrap] {
-        height: auto;
-    }
-
-    &[data-disabled] {
-        color: var(--foreground-neutral-disabled-on-surface);
-        cursor: not-allowed;
-        border-color: var(--stroke-neutral-disabled-light);
-        background-image: 
-    //
-
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &:not([data-disabled]) {
-        &:hover {
-            background-image: 
-    //
-
-                linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-
-        &:active {
-            background-image: 
-    //
-
-                linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-
-        &:focus {
-            outline: 1px solid var(--stroke-neutral-focus);
-            border-color: var(--stroke-neutral-focus);
-        }
-    }
-
-    &[data-selected] {
-        background-color: var(--surface-brand-primary-highlight);
-        border-color: var(--stroke-brand-primary);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Chip/index.tsx

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

package/src/hooks/useOptionIconsInvalid.ts

@@ -1,58 +0,0 @@
-import { useMemo } from 'react';
-
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
-
-/**
- * A utility hook used within navigation components. Returns true if the icons are invalid.
- *
- * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
- * @returns {boolean} True if the icons are invalid.
- */
-export function useOptionIconsInvalid<T extends NavOption>(options: T[] | undefined): boolean {
-    const { logError } = useErrorLogger();
-
-    return useMemo(() => {
-        if (!options || !Array.isArray(options)) return true;
-
-        const iconsInvalid = options.some((o) => o.icon) && !options.every((option) => isValidIcon(option.icon));
-
-        logError(
-            iconsInvalid,
-            'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.',
-        );
-
-        return iconsInvalid;
-    }, [logError, options]);
-}
-
-export type NavOption = {
-    /**
-     * The label of the option. This is the text that will be displayed on the option.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /** The value of the option. If not provided, the label will be used as the value. */
-    value?: string;
-    /**
-     * The the icon to display before the label.
-     *
-     * @type BspkIcon
-     */
-    icon?: React.ReactNode;
-    /**
-     * The icon to display before the label when the option is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: React.ReactNode;
-};
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useValidChildren.ts

@@ -1,54 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-
-import { getChildrenElements } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
-
-const VALID_CHILDREN = ['Icon', 'string'];
-
-export function useValidChildren(
-    componentNme: string,
-    children: ReactNode,
-    ariaLabel: string | undefined,
-    override?: boolean,
-): {
-    icon?: ReactNode | undefined;
-    label?: ReactNode | undefined;
-} {
-    const { logError } = useErrorLogger();
-
-    return useMemo(() => {
-        if (override) return { icon: undefined, label: undefined };
-
-        let icon: ReactNode | undefined;
-        let label: ReactNode;
-
-        const childrenArray = getChildrenElements(children);
-
-        logError(
-            childrenArray.length > 2,
-            `${componentNme} - component only accepts two children, ${childrenArray.length} were provided`,
-        );
-
-        childrenArray.forEach(({ child, name }) => {
-            const valid = VALID_CHILDREN.includes(name);
-
-            logError(!valid, `${componentNme} -  component only accepts two children, and Icon and string`);
-
-            if (valid) {
-                if (name === 'string') label = child;
-                if (name === 'Icon') icon = child;
-            }
-        });
-
-        logError(!icon && !label, `${componentNme} - component requires at least one child, an icon or a label`);
-
-        logError(
-            !!icon && !label && !ariaLabel,
-            `${componentNme} - component requires the aria-label property when only an icon is provided`,
-        );
-
-        return { icon, label };
-    }, [override, children, logError, componentNme, ariaLabel]);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/children.ts

@@ -1,80 +0,0 @@
-import { ReactNode, Children, Fragment, isValidElement } from 'react';
-
-export function isValidIcon(child: unknown) {
-    return isChildNamed(child, 'Icon');
-}
-
-export function getChildName(child: unknown): string {
-    if (!child) return '';
-
-    const typeChild = typeof child;
-    if (['string', 'number', 'boolean', 'bigint'].includes(typeChild)) return typeChild;
-    return (isValidElement(child) ? (child.type as { bspkName?: string })?.bspkName : '') || '';
-}
-
-export function getChildTypeName(child: unknown): string {
-    if (!child) return '';
-    const typeChild = typeof child;
-
-    if (['string', 'number', 'boolean', 'bigint'].includes(typeChild)) return typeChild;
-
-    if (isValidElement(child)) {
-        if (typeof child.type === 'string') return child.type;
-        return child.type.name || '';
-    }
-
-    return '';
-}
-
-export function isChildNamed(child: unknown, name: string): boolean {
-    return getChildName(child) === name;
-}
-
-export function isReactFragment(node: unknown): node is ReactNode {
-    return isValidElement(node) && node.type === Fragment;
-}
-
-/**
- * Convert children to a flat array of children elements, removing any fragment wrappers in the process.
- *
- * @param children The children to convert to an array.
- * @param ignoreParent If true, ignore parent elements and only return the children
- */
-export function childrenToArray(children: ReactNode): ReactNode[] {
-    return Children.toArray(children).flatMap((child) => {
-        if (isValidElement(child)) {
-            if (isReactFragment(child) && child.props.children) return childrenToArray(child.props.children);
-            return child;
-        }
-        if (Array.isArray(child)) return childrenToArray(child);
-        if (child !== null && child !== undefined) return child;
-        return [];
-    }, []);
-}
-
-export type ChildElement =
-    | {
-          child: ReactNode;
-          name: string;
-      }
-    | {
-          child: string;
-          name: string;
-      };
-
-/**
- * Get the children of a component as an array of objects with the child and the name of the child.
- *
- * Filter out unknown empty strings or non-truthy children other than zeros.
- *
- * @param children The children to get the elements from.
- */
-export function getChildrenElements(children: ReactNode): ChildElement[] {
-    return (Array.isArray(children) ? children : childrenToArray(children))
-        .filter((child) => {
-            return (typeof child === 'string' && child.trim() !== '') || child === 0 || child;
-        })
-        .map((child) => ({ child, name: getChildName(child) }));
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/srOnly.ts

@@ -1,14 +0,0 @@
-/**
- * This function returns an object with a `data-sr-only` attribute if the `hide` parameter is true.
- *
- * This is useful for hiding content visually but keeping it accessible to screen readers.
- *
- * @param hide
- * @returns An object with a `data-sr-only` attribute if the `hide` parameter is true
- */
-
-export function srOnly(hide: unknown) {
-    return hide ? { 'data-sr-only': true } : {};
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */