@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
133 lines (132 loc) • 4.25 kB
TypeScript
/**
* Copyright (c) {{year}}, 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 { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
export type CardVariant = 'default' | 'outlined' | 'elevated';
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
/**
* Card content
*/
children?: ReactNode;
/**
* Whether the card should be clickable (shows hover effects)
*/
clickable?: boolean;
/**
* The visual variant of the card
*/
variant?: CardVariant;
}
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
/**
* Header content
*/
children?: ReactNode;
}
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
/**
* Title content
*/
children?: ReactNode;
/**
* The heading level to use
*/
level?: 1 | 2 | 3 | 4 | 5 | 6;
}
export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
/**
* Description content
*/
children?: ReactNode;
}
export interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
/**
* Action content
*/
children?: ReactNode;
}
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
/**
* Content
*/
children?: ReactNode;
}
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
/**
* Footer content
*/
children?: ReactNode;
}
/**
* Card component that provides a flexible container for content.
*
* @example
* ```tsx
* <Card variant="elevated" clickable>
* <Card.Header>
* <Card.Title>Card Title</Card.Title>
* <Card.Description>Card Description</Card.Description>
* <Card.Action>
* <Button variant="link">Action</Button>
* </Card.Action>
* </Card.Header>
* <Card.Content>
* <p>Card content goes here</p>
* </Card.Content>
* <Card.Footer>
* <Button>Cancel</Button>
* <Button variant="outline">Submit</Button>
* </Card.Footer>
* </Card>
* ```
*/
declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
/**
* Card header component that contains the title, description, and optional actions.
*/
declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
/**
* Card title component.
*/
declare const CardTitle: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
/**
* Card description component.
*/
declare const CardDescription: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
/**
* Card action component for action elements in the header.
*/
declare const CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>;
/**
* Card content component that contains the main content of the card.
*/
declare const CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
/**
* Card footer component that contains footer actions or additional information.
*/
declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
Action: typeof CardAction;
Content: typeof CardContent;
Description: typeof CardDescription;
Footer: typeof CardFooter;
Header: typeof CardHeader;
Title: typeof CardTitle;
}
declare const _default: CardComponent;
export default _default;
export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };