@bspk/ui 1.0.0

package/hooks/useSwitchGroupState.d.ts

@@ -0,0 +1,37 @@
+import { SwitchProps } from '../Switch';
+/**
+ * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
+ *
+ * @example
+ *     import { Switch } from '@bspk/ui/Switch';
+ *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
+ *
+ *     export function Example() {
+ *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
+ *
+ *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
+ *
+ *     return (
+ *     <>
+ *     <pre>Selected Values: {values.join(', ')}</pre>
+ *     <Switch aria-label="All" {...allSwitchProps} />
+ *     {allValues.map((value) => (
+ *     <Switch key={value} aria-label={value} {...switchProps(value)} />
+ *     ))}
+ *     </>
+ *     );
+ *     }
+ *
+ * @param allValues - The values of the switches.
+ * @param name - The name of the switches.
+ * @param externalState - The externally managed state of the switches.
+ * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
+ */
+export declare function useSwitchGroupState(allValues: string[], name: string, externalState?: [values: string[], setValues: (next: string[]) => void]): {
+    toggleValue: (itemValue: string, checked: boolean) => void;
+    allSwitchProps: Pick<SwitchProps, "onChange" | "name" | "value" | "checked">;
+    switchProps: (value: string) => Pick<SwitchProps, "checked" | "name" | "onChange" | "value">;
+    values: string[];
+    setValues: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useSwitchGroupState.js

@@ -0,0 +1,60 @@
+import { useState, useCallback, useMemo } from 'react';
+
+/**
+ * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
+ *
+ * @example
+ *     import { Switch } from '@bspk/ui/Switch';
+ *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
+ *
+ *     export function Example() {
+ *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
+ *
+ *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
+ *
+ *     return (
+ *     <>
+ *     <pre>Selected Values: {values.join(', ')}</pre>
+ *     <Switch aria-label="All" {...allSwitchProps} />
+ *     {allValues.map((value) => (
+ *     <Switch key={value} aria-label={value} {...switchProps(value)} />
+ *     ))}
+ *     </>
+ *     );
+ *     }
+ *
+ * @param allValues - The values of the switches.
+ * @param name - The name of the switches.
+ * @param externalState - The externally managed state of the switches.
+ * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
+ */
+function useSwitchGroupState(allValues, name, externalState) {
+    const localState = useState([]);
+    const [values, setValues] = externalState || localState;
+    const toggleValue = useCallback((itemValue, checked) => {
+        setValues(allValues.flatMap((value) => {
+            if (value === itemValue)
+                return checked ? value : [];
+            return values.includes(value) ? value : [];
+        }));
+    }, [allValues, setValues, values]);
+    const switchProps = useCallback((value) => ({
+        checked: values.includes(value),
+        name,
+        onChange: (checked) => toggleValue(value, checked),
+        value,
+    }), [values, name, toggleValue]);
+    const allSwitchProps = useMemo(() => {
+        return {
+            checked: allValues.length === values.length,
+            name,
+            onChange: () => setValues(allValues.length === values.length ? [] : allValues),
+            value: 'all',
+        };
+    }, [allValues, values.length, name, setValues]);
+    return { toggleValue, allSwitchProps, switchProps, values, setValues };
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { useSwitchGroupState };
+//# sourceMappingURL=useSwitchGroupState.js.map

package/hooks/useSwitchGroupState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwitchGroupState.js","sources":["../src/hooks/useSwitchGroupState.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;SACa,mBAAmB,CAC/B,SAAmB,EACnB,IAAY,EACZ,aAAuE,EAAA;AAEvE,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,aAAa,IAAI,UAAU,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,SAAiB,EAAE,OAAgB,KAAI;QACpC,SAAS,CACL,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YACxB,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO,OAAO,GAAG,KAAK,GAAG,EAAE,CAAC;AACrD,YAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;SAC9C,CAAC,CACL,CAAC;KACL,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAa,MAAoE;AAC9E,QAAA,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/B,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;QAClD,KAAK;KACR,CAAC,EACF,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,CAC9B,CAAC;AAEF,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAmE;QAC9F,OAAO;AACH,YAAA,OAAO,EAAE,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;YAC3C,IAAI;YACJ,QAAQ,EAAE,MAAM,SAAS,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,SAAS,CAAC;AAC9E,YAAA,KAAK,EAAE,KAAK;SACf,CAAC;AACN,KAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC3E,CAAC;AAED;;;;"}

package/hooks/useTimeout.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A hook that creates a timeout that is automatically cleared when the component is unmounted.
+ *
+ * @example
+ *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
+ *     import { useEffect } from 'react';
+ *
+ *     function MyComponent() {
+ *     const timeoutRef = useTimeout();
+ *
+ *     useEffect(() => {
+ *     timeoutRef.current = setTimeout(() => {
+ *     console.log('Timeout triggered');
+ *     }, 1000);
+ *     }, []);
+ *     return <div>Check the console after 1 second</div>;
+ *     }
+ *
+ * @returns A ref object that can be used to store a timeout id.
+ */
+export declare function useTimeout(): {
+    clear: () => void;
+    set: (callback: () => void, durationMs: number) => void;
+    ref: import("react").MutableRefObject<NodeJS.Timeout | null>;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useTimeout.js

@@ -0,0 +1,45 @@
+import { useRef, useEffect, useMemo } from 'react';
+
+/**
+ * A hook that creates a timeout that is automatically cleared when the component is unmounted.
+ *
+ * @example
+ *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
+ *     import { useEffect } from 'react';
+ *
+ *     function MyComponent() {
+ *     const timeoutRef = useTimeout();
+ *
+ *     useEffect(() => {
+ *     timeoutRef.current = setTimeout(() => {
+ *     console.log('Timeout triggered');
+ *     }, 1000);
+ *     }, []);
+ *     return <div>Check the console after 1 second</div>;
+ *     }
+ *
+ * @returns A ref object that can be used to store a timeout id.
+ */
+function useTimeout() {
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+    }, []);
+    return useMemo(() => ({
+        clear: () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        },
+        set: (callback, durationMs) => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(callback, durationMs);
+        },
+        ref: timeoutRef,
+    }), []);
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { useTimeout };
+//# sourceMappingURL=useTimeout.js.map

package/hooks/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeout.js","sources":["../src/hooks/useTimeout.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;SACa,UAAU,GAAA;AACtB,IAAA,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,MAAK;QACX,IAAI,UAAU,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;KAC5D,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,OAAO,CACV,OAAO;QACH,KAAK,EAAE,MAAK;YACR,IAAI,UAAU,CAAC,OAAO;AAAE,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC5D;AACD,QAAA,GAAG,EAAE,CAAC,QAAoB,EAAE,UAAkB,KAAI;YAC9C,IAAI,UAAU,CAAC,OAAO;AAAE,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;SACzD;AACD,QAAA,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,EAAE,CACL,CAAC;AACN,CAAC;AAED;;;;"}

package/hooks/useValidChildren.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function useValidChildren(componentNme: string, children: ReactNode, ariaLabel: string | undefined, override?: boolean): {
+    icon?: ReactNode | undefined;
+    label?: ReactNode | undefined;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useValidChildren.js

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { getChildrenElements } from '../utils/children.js';
+import { useErrorLogger } from '../utils/errors.js';
+
+const VALID_CHILDREN = ['Icon', 'string'];
+function useValidChildren(componentNme, children, ariaLabel, override) {
+    const { logError } = useErrorLogger();
+    return useMemo(() => {
+        if (override)
+            return { icon: undefined, label: undefined };
+        let icon;
+        let label;
+        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 */
+
+export { useValidChildren };
+//# sourceMappingURL=useValidChildren.js.map

package/hooks/useValidChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidChildren.js","sources":["../src/hooks/useValidChildren.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAEpC,SAAU,gBAAgB,CAC5B,YAAoB,EACpB,QAAmB,EACnB,SAA6B,EAC7B,QAAkB,EAAA;AAKlB,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,IAAI,QAAQ;YAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAE3D,QAAA,IAAI,IAA2B,CAAC;AAChC,QAAA,IAAI,KAAgB,CAAC;AAErB,QAAA,MAAM,aAAa,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AAEpD,QAAA,QAAQ,CACJ,aAAa,CAAC,MAAM,GAAG,CAAC,EACxB,CAAG,EAAA,YAAY,2CAA2C,aAAa,CAAC,MAAM,CAAA,cAAA,CAAgB,CACjG,CAAC;QAEF,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAI;YACtC,MAAM,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAE5C,QAAQ,CAAC,CAAC,KAAK,EAAE,GAAG,YAAY,CAAA,4DAAA,CAA8D,CAAC,CAAC;YAEhG,IAAI,KAAK,EAAE;gBACP,IAAI,IAAI,KAAK,QAAQ;oBAAE,KAAK,GAAG,KAAK,CAAC;gBACrC,IAAI,IAAI,KAAK,MAAM;oBAAE,IAAI,GAAG,KAAK,CAAC;aACrC;AACL,SAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAG,EAAA,YAAY,CAA8D,4DAAA,CAAA,CAAC,CAAC;AAEzG,QAAA,QAAQ,CACJ,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAC9B,CAAA,EAAG,YAAY,CAAA,2EAAA,CAA6E,CAC/F,CAAC;AAEF,QAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC3B,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;AAChE,CAAC;AAED;;;;"}

package/index.d.ts

@@ -0,0 +1,125 @@
+/**
+ * There are no barrel files for this repository.
+ *
+ * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ */
+import { ChangeEvent, MouseEvent as ReactMouseEvent, ComponentProps, JSXElementConstructor, ReactNode } from 'react';
+export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
+export type ElementProps<P extends Record<string, unknown>, E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentProps<E>, O | keyof P> & P;
+export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
+export type CallToActionButton = {
+    /**
+     * The label of the call to action button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The callback function for the call to action button.
+     *
+     * @type () => void
+     * @required
+     */
+    onClick: () => void;
+    /** The size of the call to action button. */
+    size?: ButtonSize;
+};
+export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name', T> & Required<CommonProps<'value'>> & {
+    /**
+     * Marks the control as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the control is checked or unchecked.
+     *
+     * @type (checked, Event) => void
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<T>) => void;
+};
+export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<CommonPropsLibrary<T>, K>;
+export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
+    /** The id of the element. If not provided one will be generated. */
+    id?: string;
+    /**
+     * Marks the element as active and displays active state theme.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The content of the element.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The size of the element.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * Determines if the element is [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required).
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the element as invalid and displays error state theme.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) of the control.
+     *
+     * @required
+     */
+    name: string;
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * When an element is invalid it must display an error message explaining why it is invalid.
+     */
+    errorMessage?: string;
+    /**
+     * The value of the control.
+     *
+     * @required
+     */
+    value?: string;
+    /**
+     * The aria-label for the element.
+     *
+     * @required
+     */
+    'aria-label': string;
+    /**
+     * The function to call when the element is clicked.
+     *
+     * @param event - The mouse event.
+     * @returns Void
+     */
+    onClick?: (event: ReactMouseEvent<T, MouseEvent>) => void;
+};
+export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
+export declare const BRANDS: {
+    title: string;
+    slug: Brand;
+}[];
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/index.js

@@ -0,0 +1,20 @@
+/**
+ * There are no barrel files for this repository.
+ *
+ * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ */
+const BRANDS = [
+    { title: 'Anywhere', slug: 'anywhere' },
+    { title: 'Better Homes & Gardens', slug: 'better-homes-gardens' },
+    { title: 'Cartus', slug: 'cartus' },
+    { title: 'Century 21', slug: 'century-21' },
+    { title: 'Coldwell Banker', slug: 'coldwell-banker' },
+    { title: 'Corcoran', slug: 'corcoran' },
+    { title: 'Denali Boss', slug: 'denali-boss' },
+    { title: 'ERA', slug: 'era' },
+    { title: "Sotheby's", slug: 'sothebys' },
+];
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { BRANDS };
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["src/index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;AAIG;AA+IU,MAAA,MAAM,GAAqC;AACpD,IAAA,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;AACvC,IAAA,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;AACjE,IAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;AACnC,IAAA,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;AAC3C,IAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;AACrD,IAAA,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;AACvC,IAAA,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;AAC7C,IAAA,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;AAC7B,IAAA,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;EACjC;AAEX;;;;"}

package/meta.d.ts

@@ -0,0 +1,44 @@
+/** This file is generated by the ./scripts/build-meta.ts script. This file contains data scraped from the library. */
+export type BaseMeta = {
+    name: string;
+    description?: string;
+    file?: string;
+};
+export type TypeMeta = BaseMeta & {
+    id: string;
+    name: string;
+    example?: string;
+    references?: string[];
+    properties?: TypeProperty[];
+};
+export type TypeProperty = {
+    name: string;
+    description?: string;
+    type?: string[] | string;
+    default?: unknown;
+    required?: boolean;
+    options?: number[] | string[];
+    variants?: string[];
+    properties?: TypeProperty[];
+    references?: string[];
+    minimum?: number;
+    maximum?: number;
+};
+export type ComponentMeta = BaseMeta & {
+    slug: string;
+    css?: string;
+    dependencies: string[];
+    modified: string;
+    hasTouchTarget?: boolean;
+};
+export type UtilityMeta = BaseMeta & {
+    param?: string;
+    returns?: string;
+    example?: string;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+export declare const componentsMeta: ComponentMeta[];
+export declare const utilitiesMeta: UtilityMeta[];
+export declare const typesMeta: TypeMeta[];
+export type MetaTypeName = 'AccordionProps' | 'BadgeProps' | 'BannerAlertProps' | 'BottomNavigationProps' | 'BottomSheetProps' | 'BreadcrumbProps' | 'ButtonDockProps' | 'ButtonProps' | 'CallToActionButton' | 'CardProps' | 'ChartProps' | 'CheckboxGroupOption' | 'CheckboxGroupProps' | 'CheckboxOptionProps' | 'CheckboxProps' | 'ChipProps' | 'CommonProps<"active"|"disabled"|"readOnly">' | 'CommonProps<"aria-label">' | 'CommonProps<"disabled">' | 'CommonProps<"disabled"|"onClick">' | 'CommonProps<"id">' | 'CommonProps<"id"|"disabled">' | 'CommonProps<"invalid"|"disabled"|"readOnly">' | 'CommonProps<"name"|"aria-label">' | 'CommonProps<"name"|"id"|"invalid"|"disabled"|"size"|"aria-label"|"readOnly">' | 'CommonProps<"name"|"invalid"|"disabled"|"aria-label",HTMLInputElement>' | 'CommonProps<"name"|"invalid"|"disabled"|"aria-label",T>' | 'CommonProps<"name"|"required"|"id"|"value"|"invalid"|"disabled"|"size"|"aria-label"|"readOnly">' | 'CommonProps<"name"|"value">' | 'CommonProps<"name"|"value"|"disabled"|"aria-label"|"onClick">' | 'CommonProps<"required"|"errorMessage">' | 'CommonProps<"required"|"id"|"invalid"|"disabled"|"aria-label"|"readOnly">' | 'CommonPropsLibrary' | 'DatePickerProps' | 'DialogProps' | 'DividerProps' | 'DrawerProps' | 'DropdownFieldProps' | 'DropdownOption' | 'DropdownProps' | 'ElementProps' | 'EmptyStateProps' | 'FabProps' | 'FieldControlProps' | 'FileUploadProps' | 'FormFieldProps' | 'ImageProps' | 'ImgProps' | 'InlineAlertProps' | 'LayoutProps' | 'LinkProps' | 'ListItemProps' | 'M' | 'MenuButtonProps' | 'MenuItem' | 'MenuProps' | 'ModalProps' | 'MultiSelectionProps' | 'NavigationRailProps' | 'NavOption' | 'NumberFieldProps' | 'NumberInputProps' | 'OTPInputProps' | 'PageControlProps' | 'PasswordInputProps' | 'PhoneNumberInputProps' | 'Pick<ButtonProps<As>,"icon"|"onClick"|"as"|"showLabel"|"toolTip">' | 'Pick<CheckboxProps,"name"|"value"|"invalid"|"disabled"|"onChange"|"checked"|"indeterminate">' | 'Pick<DropdownProps,"name"|"value"|"disabled"|"options"|"size"|"onChange"|"placeholder"|"readOnly"|"placement"|"itemCount">' | 'Pick<FormFieldProps,"label"|"errorMessage"|"helperText"|"controlId">' | 'Pick<FormFieldProps,"label"|"errorMessage"|"helperText"|"labelTrailing"|"controlId">' | 'Pick<FormFieldProps,"required"|"label"|"errorMessage"|"helperText"|"labelTrailing"|"controlId">' | 'Pick<MenuProps,"itemCount"|"items"|"noResultsMessage">' | 'Pick<MenuProps<M>,"activeIndex"|"isMulti"|"selectedValues">' | 'Pick<MenuProps<O>,"onChange"|"isMulti"|"itemCount"|"renderListItem">' | 'Pick<NumberInputProps,"name"|"id"|"value"|"invalid"|"disabled"|"size"|"onChange"|"readOnly"|"centered">' | 'Pick<RadioProps,"name"|"value"|"invalid"|"disabled"|"onChange"|"checked">' | 'Pick<TextInputProps,"name"|"id"|"size"|"aria-label"|"placeholder"|"inputRef">' | 'Pick<TextInputProps,"name"|"required"|"type"|"value"|"invalid"|"disabled"|"size"|"onChange"|"autoComplete"|"placeholder"|"readOnly"|"leading"|"trailing"|"inputRef">' | 'Pick<ToggleControlProps<HTMLInputElement>,"value">' | 'Pick<ToggleOptionProps,"label"|"description">' | 'Pick<ToggleOptionProps,"label"|"size"|"description">' | 'PopoverProps' | 'PortalProps' | 'ProfileProps' | 'ProgressBarProps' | 'ProgressCircleProps' | 'ProgressionStepperBarProps' | 'ProgressionStepperItem' | 'ProgressionStepperProps' | 'RadioGroupOption' | 'RadioGroupProps' | 'RadioOptionProps' | 'RadioProps' | 'RatingProps' | 'RenderListItemParams' | 'Required<CommonProps<"value",HTMLElement>>' | 'Required<CommonProps<"value">>' | 'Required<Pick<ButtonProps<As>,"label">>' | 'SearchBarProps' | 'SegmentedControlProps' | 'SegmentedToggleOption' | 'SkeletonProps' | 'SliderInputProps' | 'SnackbarProps' | 'SwitchGroupOption' | 'SwitchGroupProps' | 'SwitchOptionProps' | 'SwitchProps' | 'TabGroupOption' | 'TabGroupProps' | 'TableColumn' | 'TableProps' | 'TagProps' | 'TextareaFieldProps' | 'TextareaProps' | 'TextFieldProps' | 'TextInputProps' | 'TimePickerProps' | 'ToggleControlProps' | 'ToggleOptionProps' | 'TooltipProps' | 'TopNavigationProps' | 'TxtProps';
+export type MetaComponentName = 'Accordion' | 'Badge' | 'BannerAlert' | 'BottomNavigation' | 'BottomSheet' | 'Breadcrumb' | 'Button' | 'ButtonDock' | 'Card' | 'Chart' | 'Checkbox' | 'CheckboxGroup' | 'CheckboxOption' | 'Chip' | 'DatePicker' | 'Dialog' | 'Divider' | 'Drawer' | 'Dropdown' | 'DropdownField' | 'EmptyState' | 'Fab' | 'FileUpload' | 'FormField' | 'Image' | 'Img' | 'InlineAlert' | 'Layout' | 'Link' | 'ListItem' | 'Menu' | 'MenuButton' | 'Modal' | 'MultiSelection' | 'NavigationRail' | 'NumberField' | 'NumberInput' | 'OTPInput' | 'PageControl' | 'PasswordInput' | 'PhoneNumberInput' | 'Popover' | 'Portal' | 'Profile' | 'ProgressBar' | 'ProgressCircle' | 'ProgressionStepper' | 'ProgressionStepperBar' | 'Radio' | 'RadioGroup' | 'RadioOption' | 'Rating' | 'SearchBar' | 'SegmentedControl' | 'Skeleton' | 'SliderInput' | 'Snackbar' | 'StylesProviderAnywhere' | 'StylesProviderBetterHomesGardens' | 'StylesProviderCartus' | 'StylesProviderCentury21' | 'StylesProviderColdwellBanker' | 'StylesProviderCorcoran' | 'StylesProviderDenaliBoss' | 'StylesProviderEra' | 'StylesProviderSothebys' | 'Switch' | 'SwitchGroup' | 'SwitchOption' | 'TabGroup' | 'Table' | 'Tag' | 'Textarea' | 'TextareaField' | 'TextField' | 'TextInput' | 'TimePicker' | 'ToggleOption' | 'Tooltip' | 'TopNavigation' | 'Txt';