@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/types/components/callout/MrlCallout/MrlCallout.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MrlPopoverProps } from '../../popover';
+export type MrlCalloutPopoverProps = Omit<MrlPopoverProps, 'children' | 'actionState' | 'isSubMenu' | 'triggerRef' | 'kind'>;
+interface MrlCalloutCTA {
+    onClick: () => void;
+    dataQa?: string;
+    text: string;
+}
+export type CalloutKind = 'primary' | 'secondary';
+export interface MrlCalloutProps extends MrlCalloutPopoverProps {
+    /** a unique id that binds the callout content and the trigger for assistive technologies */
+    ariaControls?: string;
+    autoFocus?: boolean;
+    children: React.ReactElement;
+    disableClickOutside?: boolean;
+    description?: string | JSX.Element;
+    eyebrow?: string;
+    id?: string;
+    image?: JSX.Element;
+    kind?: CalloutKind;
+    renderWithPortal?: boolean;
+    show: boolean;
+    title?: string;
+    primaryCta?: MrlCalloutCTA;
+    secondaryCta?: MrlCalloutCTA;
+}
+/**
+ * MrlCallout component.
+ *
+ * @param props - The props.
+ * @returns {React.ReactElement} The MrlCallout component.
+ */
+export declare const MrlCallout: (props: MrlCalloutProps) => React.ReactElement;
+export {};

package/dist/types/components/callout/MrlCallout/index.d.ts

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

package/dist/types/components/callout/index.d.ts

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

package/dist/types/components/container/MrlContainer/MrlContainer.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Kind } from '../constants';
+import { MrlComponentProps } from '../../../utils';
+export interface MrlContainerProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'div'> {
+    /** Children to be rendered within the component */
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Defines which color scheme to used based on the background color of the container.
+     * White/light backgrounds should use "default" and dark/saturated color backgrounds
+     * should use "inverse".
+     */
+    kind?: Kind;
+}
+/**
+ * Used to visually and group content and
+ * provide structure in layouts.
+ *
+ * @param props - component props
+ * @returns a MrlContainer React component.
+ */
+export declare function MrlContainer({ children, className, kind, ...remainingProps }: MrlContainerProps): JSX.Element;

package/dist/types/components/container/MrlContainer/index.d.ts

@@ -0,0 +1 @@
+export { MrlContainer } from './MrlContainer';

package/dist/types/components/container/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "helper", "nested", "nested-options"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export interface ContainerDefaults {
+    kind: Kind;
+}
+/**
+ * Default values for props on the MrlContainer component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: ContainerDefaults;

package/dist/types/components/container/index.d.ts

@@ -0,0 +1 @@
+export { MrlContainer } from './MrlContainer';

package/dist/types/components/divider/MrlDivider/MrlDivider.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../utils';
+import { Kind, Orientation, Spacing, Weight } from '../constants';
+interface MrlDividerProps {
+    /**
+     * Applies additional HTML attributes to the divider element.
+     */
+    attrs?: AttrsObject;
+    className?: string;
+    /**
+     * Defines which color scheme to used based on the background color of the container.
+     * White/light backgrounds should use "default" and dark/saturated color backgrounds
+     * should use "inverse".
+     */
+    kind?: Kind;
+    /**
+     * Use to set a width/height of a divider to create an offset from surrounding content.
+     * This is commonly found in toolbars. Value can be any valid CSS `width/height` value, such as
+     * a CSS variable or rem value. Warning, vertical dividers may not work if set to a percentage,
+     * due to browser limitations with calculating dynamic heights. You should not set the parent to
+     * a static height to make this work as that poses accessibility issues.
+     */
+    length?: string;
+    /**
+     * Determines the orientation of the divider based on the sibling elements' orientation.
+     * Stacked elements should use "horizontal" and elements displayed in a row should use
+     * "vertical". Note for the "vertical" orientation, only usage between a row of Icon Buttons
+     * is currently supported.
+     */
+    orientation?: Orientation;
+    /**
+     * Determines how much space to provide between the elements that the divider is separating.
+     * This option only applies to horizontal orientation.
+     */
+    spacing?: Spacing;
+    /**
+     * Controls the thickness of the divider line. Use "thin" for a more subtle divider
+     * appearance, or "default" for the standard divider thickness.
+     */
+    weight?: Weight;
+}
+/**
+ * Used to visually and semantically separate two elements.
+ * For visual separation only view this package's mixins
+ *
+ * @param props - component props
+ * @returns a MrlDivider React component.
+ */
+export declare function MrlDivider({ attrs, className, kind, length, orientation, spacing, weight, ...remainingProps }: MrlDividerProps): JSX.Element;
+export {};

package/dist/types/components/divider/MrlDivider/index.d.ts

@@ -0,0 +1 @@
+export { MrlDivider } from './MrlDivider';

package/dist/types/components/divider/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "inverse"];
+    orientations: readonly ["horizontal", "vertical"];
+    spacings: readonly ["none", "small", "medium", "large", "xlarge"];
+    weight: readonly ["thin", "default"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export type Orientation = (typeof allowedValues.orientations)[number];
+export type Spacing = (typeof allowedValues.spacings)[number];
+export type Weight = (typeof allowedValues.weight)[number];
+export interface DividerDefaults {
+    kind: Kind;
+    orientation: Orientation;
+    spacing: Spacing;
+    weight: Weight;
+}
+/**
+ * Default values for props on the Divider component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: DividerDefaults;

package/dist/types/components/divider/index.d.ts

@@ -0,0 +1 @@
+export { MrlDivider } from './MrlDivider';

package/dist/types/components/empty/default/MrlEmpty.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface MrlEmptyProps {
+    graphic?: JSX.Element;
+    heading: string;
+    description: string;
+    action?: JSX.Element;
+}
+/**
+ * MrlEmpty for when there is no data to display for a single component.
+ * @param MrlEmptyProps props
+ * @returns MrlEmpty component
+ */
+export declare const MrlEmpty: ({ graphic, description, action, heading, ...rest }: MrlEmptyProps) => JSX.Element;
+export {};

package/dist/types/components/empty/default/index.d.ts

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

package/dist/types/components/empty/index.d.ts

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './large';

package/dist/types/components/empty/large/MrlEmptyLarge.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface MrlEmptyLargeProps {
+    graphic?: JSX.Element;
+    heading: string;
+    description: string;
+    action?: JSX.Element;
+}
+/**
+ * MrlEmptyLarge for when there is no data to display for an entire page.
+ * @param MrlEmptyProps props
+ * @returns MrlEmptyLarge
+ */
+export declare const MrlEmptyLarge: ({ graphic, heading, description, action, ...rest }: MrlEmptyLargeProps) => JSX.Element;
+export {};

package/dist/types/components/empty/large/index.d.ts

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

package/dist/types/components/error-boundary/MrlErrorBoundary.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+interface ErrorProps {
+    children?: React.ReactNode;
+    /**
+     * Required to log the error to observability.
+     *
+     * @param error
+     * @param errorInfo
+     * @returns void
+     */
+    logError: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /**
+     * Fallback component to render when there is an error.
+     */
+    fallback: React.ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+/**
+ * When an error occurs during rendering, this component catches the error.
+ * Renders a fallback component for a user friendly msg and calls the log error callback.
+ *
+ * Error boundaries DO NOT catch errors for:
+ * Event handlers
+ * Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
+ * Server side rendering
+ * Errors thrown in the error boundary itself (rather than its children)
+ *
+ * @param ErrorProps
+ * @returns ErrorBoundary component
+ */
+declare class ErrorBoundary extends React.Component<ErrorProps, State> {
+    /**
+     * Error boundry
+     *
+     * @param props fallback and logError
+     */
+    constructor(props: ErrorProps);
+    /**
+     * Update state so the next render will show the fallback UI.
+     *
+     * @param _error Error
+     * @returns State
+     */
+    static getDerivedStateFromError: (_error: Error) => State;
+    /**
+     * componentDidCatch react lifecycle method
+     *
+     * @param error error object
+     * @param errorInfo react.error info
+     */
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    /**
+     * Renders react node wrapped in error handler.
+     *
+     * @returns React.ReactNode
+     */
+    render(): React.ReactNode;
+}
+export declare const MrlErrorBoundary: typeof ErrorBoundary;
+export {};

package/dist/types/components/error-boundary/index.d.ts

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

package/dist/types/components/filter/MrlFilter/MrlFilter.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { RovingPropTypes } from '../../rovingTabindex';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterProps = {
+    /**
+     * The label for the radio group.
+     */
+    radioGroupLabel: string;
+    /**
+     * The children elements to be rendered within the MrlFilter component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback function that is called when the filter value changes.
+     */
+    onFilterChange?: (checked: string) => void;
+    /**
+     * The default checked value for the filter. It will match the value of the MrlFilterItem.
+     */
+    defaultCheckedValue?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> & Required<Pick<RovingPropTypes, 'orientation'>> & DataQa;
+/**
+ * MrlFilter component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilter component.
+ */
+export declare function MrlFilter(props: MrlFilterProps): React.ReactElement;

package/dist/types/components/filter/MrlFilter/index.d.ts

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

package/dist/types/components/filter/MrlFilterContext/MrlFilterContext.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MrlFilterProps } from '../MrlFilter/MrlFilter';
+type MrlFilterState = {
+    checked: string;
+};
+type MrlFilterContextValue = {
+    state: MrlFilterState;
+    dispatch: React.Dispatch<MrlFilterAction>;
+};
+type SET_CHECKED = {
+    type: 'SET_CHECKED';
+    payload: string;
+};
+type MrlFilterAction = SET_CHECKED;
+type MrlFilterContextProviderProps = {
+    children: React.ReactNode;
+} & Pick<MrlFilterProps, 'defaultCheckedValue' | 'onFilterChange'>;
+/**
+ * MrlFilterContextProvider component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterContextProvider component.
+ */
+export declare function MrlFilterContextProvider(props: MrlFilterContextProviderProps): JSX.Element;
+/**
+ * Custom hook to use the MrlFilterContext.
+ *
+ * This hook provides access to the MrlFilterContext value.
+ *
+ * @returns The MrlFilterContext value.
+ * @throws Will throw an error if used outside of a MrlFilterContextProvider.
+ */
+export declare const useMrlFilterContext: () => MrlFilterContextValue;
+export {};

package/dist/types/components/filter/MrlFilterContext/index.d.ts

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

package/dist/types/components/filter/MrlFilterItem/MrlFilterItem.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterItemProps = {
+    /**
+     * The filter item's value.
+     */
+    value: string;
+    /**
+     * The content to be displayed within the filter item.
+     */
+    children?: React.ReactNode;
+    /**
+     * The count of items for this filter option.
+     */
+    count?: number;
+} & React.ComponentPropsWithoutRef<'span'> & DataQa;
+/**
+ * MrlFilterItem component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterItem component.
+ */
+export declare function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement;

package/dist/types/components/filter/MrlFilterItem/index.d.ts

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

package/dist/types/components/filter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlFilterContext';
+export * from './MrlFilterItem';
+export * from './MrlFilter';

package/dist/types/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface PropTypes {
+    /**
+     * Elements to be rendered within the focus trap
+     */
+    children: React.ReactNode | ((focusTrapRef: React.RefObject<HTMLDivElement>) => JSX.Element);
+    /**
+     * Specifies whether the focus trap should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Disable autofocus
+     */
+    disableAutofocus?: boolean;
+    /**
+     * Focus trap container reference. Can be used to specify a custom container if a ref is already available
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * Focus Trap React Component
+ * @param {object} props - The component props.
+ * @param {React.ReactElement} props.children - A function that returns the component's child element and receives a ref to the container.
+ * @param {boolean} [props.disabled] - Specifies whether the focus trap should be disabled.
+ * @param { React.RefObject<HTMLElement>} props.containerRef - Focus trap container reference
+ * @returns {React.ReactElement} - The rendered FocusTrap component.
+ */
+export declare const MrlFocusTrap: ({ children, disabled, disableAutofocus, containerRef, ...rest }: PropTypes) => JSX.Element;
+export {};

package/dist/types/components/focus-trap/MrlFocusTrap/index.d.ts

@@ -0,0 +1 @@
+export { MrlFocusTrap } from './MrlFocusTrap';

package/dist/types/components/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { MrlFocusTrap } from './MrlFocusTrap';

package/dist/types/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates, StaticIconConfig } from '../../constants';
+import './MrlCheckbox.global.scss';
+interface MrlCheckboxProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** Additional class to add to the container of the checkbox and label */
+    className?: string;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+    /** The text to display as the checkbox's label */
+    label: string;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /**
+     * Description, additional context text for the user.
+     * It can be a string or a React component for custom render.
+     * When using a React component it's necessary to add an id to the custom element and
+     * pass it to the MrlCheckbox through 'attrs["aria-describedby"]' to make it accessible
+     * to screen readers.
+     * Custom description should also implement the disabled state styles
+     * for text when the input is disabled or set color: inherit.
+     * @example
+     * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={
+     *   <p id={customId}>description</p>
+     * }>
+     */
+    description?: string | React.ReactNode;
+}
+/**
+ * Form element with an associated text label that allows the user to select one or more options
+ * from a provided list
+ * @param {MrlCheckboxProps} props - the component props
+ * @returns a checkbox element with an associated label
+ */
+export declare function MrlCheckbox({ attrs, className, description, hasMultilineLabel, state, selected, icon, label, ...rest }: MrlCheckboxProps): JSX.Element;
+export {};

package/dist/types/components/form/checkbox/MrlCheckbox/index.d.ts

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

package/dist/types/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates } from '../../constants';
+import './MrlCheckboxStandalone.global.scss';
+interface MrlCheckboxStandaloneProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+}
+/**
+ * Input that allows the user to select one or more options from a provided list.
+ * Note, this component does not provide out of the box accessibility for ensuring
+ * an associated label and must be manually setup during adoption.
+ * @param {MrlCheckboxStandaloneProps} props - the component props
+ * @returns a checkbox element
+ */
+export declare function MrlCheckboxStandalone({ attrs, state, selected, ...rest }: MrlCheckboxStandaloneProps): JSX.Element;
+export {};

package/dist/types/components/form/checkbox/MrlCheckboxStandalone/index.d.ts

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

package/dist/types/components/form/constants.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { DSIconType } from '../svg';
+/**
+ * This should be used to communciate error information for a specific input
+ */
+export interface MrlFormInputError {
+    message: string;
+}
+export type InputStates = 'disabled' | 'error' | 'read-only';
+export type InputKinds = 'default' | 'inline' | 'inline-label';
+export type InputSizes = 'default' | 'large';
+export declare const allowedCheckboxValues: {
+    selected: readonly ["default", "checked", "indeterminate"];
+    states: readonly ["default", "disabled", "error", "read-only"];
+};
+export type CheckboxStates = (typeof allowedCheckboxValues.states)[number];
+export type CheckboxSelected = (typeof allowedCheckboxValues.selected)[number];
+interface CheckboxDefaults {
+    selected: CheckboxSelected;
+    state: CheckboxStates;
+}
+export declare const checkboxDefaults: CheckboxDefaults;
+export declare const allowedSelectItemValues: {
+    states: readonly ["default", "disabled", "selected"];
+};
+export type SelectItemStates = (typeof allowedSelectItemValues.states)[number];
+interface SelectItemDefaults {
+    state: SelectItemStates;
+}
+export declare const selectItemDefaults: SelectItemDefaults;
+export declare const allowedSelectMenuValues: {
+    positions: readonly ["bottom", "top"];
+};
+export type SelectMenuPositions = (typeof allowedSelectMenuValues.positions)[number];
+interface SelectMenuDefaults {
+    position: SelectMenuPositions;
+}
+export declare const selectMenuDefaults: SelectMenuDefaults;
+export declare const allowedSelectValues: {
+    states: readonly ["default", "disabled", "open", "read-only"];
+};
+export type SelectStates = (typeof allowedSelectValues.states)[number];
+interface SelectDefaults {
+    size: InputSizes;
+    kind: InputKinds;
+    state: SelectStates;
+}
+export declare const selectDefaults: SelectDefaults;
+export interface StaticIconConfig {
+    icon: DSIconType;
+    theme?: string;
+}
+export interface RightActionConfig extends StaticIconConfig {
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    label: string;
+}
+export declare const allowedLabelValues: {
+    kinds: readonly ["block", "inline"];
+    states: readonly ["default", "disabled"];
+};
+export type LabelStates = (typeof allowedLabelValues.states)[number];
+export type LabelKind = (typeof allowedLabelValues.kinds)[number];
+interface LabelDefaults {
+    kind: LabelKind;
+    state: LabelStates;
+}
+export declare const labelDefaults: LabelDefaults;
+export interface FormControlDefaults {
+    disabled: boolean;
+    label: string;
+}
+export interface FieldsetDefault {
+    label: string;
+}
+/**
+ * Default values for props on the Fieldset component;
+ * Shared between the component and Storybook
+ */
+export declare const fieldsetDefault: FieldsetDefault;
+/**
+ * Default values for props on the Fieldset component which is used to group Textarea components;
+ * Shared between the component and Storybook
+ */
+export declare const textareaDefaults: FormControlDefaults;
+export {};

package/dist/types/components/form/date-picker/MrlDatePicker.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { InputStates } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+export interface MrlDatePickerProps extends React.ComponentPropsWithRef<'input'>, DataQa {
+    /** Id of the text input */
+    inputId: string;
+    kind?: 'default' | 'borderless';
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    autofocus?: boolean;
+    /**
+     * Event handler for onChange Events
+     * The value is normalized to yyyy-mm-dd
+     *
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+     */
+    onChange?: React.ComponentPropsWithRef<'input'>['onChange'];
+}
+/**
+ * Allows the user to input a date
+ *
+ * @param {MrlDatePickerProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a date input element
+ */
+export declare const MrlDatePicker: React.ForwardRefExoticComponent<Omit<MrlDatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/form/date-picker/index.d.ts

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

package/dist/types/components/form/fieldset/MrlFieldset/MrlFieldset.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+interface MrlFieldsetProps {
+    /** Applies additional HTML attributes to the fieldset element */
+    attrs?: AttrsObject;
+    /** Text for the fieldset's legend */
+    label: string;
+    /** related form elements that will be grouped by the fieldset  */
+    children: React.ReactNode;
+    /** Additional class to add to the fieldset */
+    className?: string;
+}
+/**
+ * Groups related form elements
+ * @param {MrlFieldsetProps} props - the component props
+ * @returns a fieldset element
+ */
+export declare function MrlFieldset({ attrs, children, className, label, ...rest }: MrlFieldsetProps): JSX.Element;
+export {};

package/dist/types/components/form/fieldset/MrlFieldset/index.d.ts

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

package/dist/types/components/form/hooks/useActiveColor.d.ts

@@ -0,0 +1,13 @@
+import { InputStates } from '../constants';
+type useActiveColorReturn = {
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+};
+/**
+ * Custom hook used to track the active color state of inputs
+ *
+ * @param {InputStates | undefined} state - the input state
+ * @returns the hasActiveColor state and handler
+ */
+export declare function useActiveColor(state?: InputStates): useActiveColorReturn;
+export {};