@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
82 lines (81 loc) • 2.48 kB
TypeScript
/**
* Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { CSSProperties, FC, ReactNode, ElementType } from 'react';
export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline' | 'button';
export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
export type TypographyColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'textPrimary' | 'textSecondary' | 'inherit';
export interface TypographyProps {
/**
* The content to be rendered
*/
children: ReactNode;
/**
* The typography variant to apply
*/
variant?: TypographyVariant;
/**
* The HTML element or React component to render
*/
component?: ElementType;
/**
* Text alignment
*/
align?: TypographyAlign;
/**
* Color variant
*/
color?: TypographyColor;
/**
* Whether the text should be clipped with ellipsis when it overflows
*/
noWrap?: boolean;
/**
* Additional CSS class names
*/
className?: string;
/**
* Custom styles
*/
style?: CSSProperties;
/**
* Whether the text should be displayed inline
*/
inline?: boolean;
/**
* Custom font weight
*/
fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;
/**
* Custom font size (overrides variant sizing)
*/
fontSize?: string | number;
/**
* Line height
*/
lineHeight?: string | number;
/**
* Whether to disable gutters (margin bottom)
*/
gutterBottom?: boolean;
}
/**
* Typography component for consistent text rendering throughout the application.
* Integrates with the theme system and provides semantic HTML elements.
*/
declare const Typography: FC<TypographyProps>;
export default Typography;