@patreon/studio/module/types/component.d.ts

Patreon Studio Design System

import type { AriaAttributes, AriaRole, ReactNode } from 'react';
import type { css } from 'styled-components';
export type BaseAriaProps = AriaAttributes & {
    /**
     * ARIA role for semantic meaning of the component.
     * See {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles|ARIA Role docs}.
     */
    role?: AriaRole;
};
export interface AssignableElementProps {
    /** The element to render */
    as?: React.ElementType;
}
export interface BaseProps {
    /** Tag for testing */
    'data-tag'?: string;
    /** HTML id property */
    id?: string;
}
/** @deprecated use StylableProps with className instead */
export interface LegacyStylableProps {
    /**
     * Custom css applied to the root element
     * @deprecated use `className` with CSS Module styles instead.
     **/
    css?: ReturnType<typeof css>;
}
export type StyleVariableObject = Record<`--${string}`, string | number>;
export interface StylableProps {
    /** Custom className applied to the root element */
    className?: string;
    /**
     * Inject CSS variables into the component for use within CSS Modules.
     * Only accepts a record of `--${string}: string | number` values.
     **/
    style?: StyleVariableObject;
}
export interface ChildrenProps {
    /** content to render */
    children?: ReactNode;
}
export interface LoggerProps {
    /**
     * Unique identifier of the component used for logging.
     */
    loggerId?: string;
    /**
     * Optional additional fields to log in `Studio Action`
     */
    loggerProps?: Record<string, string | number | boolean>;
}