ds-smart-ui
Version:
Smart UI v1.0.5 — A production-ready React component library by PT Praisindo Teknologi. Covers inputs, navigation, data display, feedback, and layout with a unified design system, semantic Typography tokens, and full Storybook documentation.
53 lines (52 loc) • 2.24 kB
TypeScript
import { ReactNode } from 'react';
/**
* ListViewLabel component to display a label and text in a list view format.
* It supports vertical and horizontal orientations, customizable styles, and optional dividers.
* @component
* @param {Object} props - Component properties.
* @param {ReactNode} props.titleLabel - The title label to display.
* @param {ReactNode} props.textLabel - The text label to display.
* @param {"vertical" | "horizontal"} [props.orientation="vertical"] - Orientation of the label, either vertical or horizontal.
* @param {boolean} [props.titleBold=false] - Whether the title label should be bold.
* @param {boolean} [props.textBold=false] - Whether the text label should be bold.
* @param {"sm" | "md" | "lg" | "xl" | "2xl"} [props.titleSize="md"] - Size of the title label.
* @param {"sm" | "md" | "lg" | "xl" | "2xl"} [props.textSize="md"] - Size of the text label.
* @param {"black" | "gray"} [props.titleColor="gray"] - Color of the title label.
* @param {"black" | "gray"} [props.textColor="black"] - Color of the text label.
* @param {boolean} [props.reverse=false] - Whether to reverse the order of title and text labels.
* @param {boolean} [props.showDivider=false] - Whether to show a divider between labels in horizontal orientation.
* @param {string} [props.id] - Optional ID for testing purposes.
* @returns {JSX.Element} The ListViewLabel component.
* @example
* <ListViewLabel
* titleLabel="Title"
* textLabel="This is the text label"
* orientation="horizontal"
* titleBold
* textBold
* titleSize="lg"
* textSize="md"
* titleColor="black"
* textColor="gray"
* reverse
* showDivider
* id="listviewlabel-1"
* />
*/
interface ListViewLabelProps {
titleLabel: ReactNode;
textLabel: ReactNode;
orientation?: "vertical" | "horizontal";
titleBold?: boolean;
textBold?: boolean;
titleSize?: "sm" | "md" | "lg" | "xl" | "2xl";
textSize?: "sm" | "md" | "lg" | "xl" | "2xl";
titleColor?: "black" | "gray";
textColor?: "black" | "gray";
reverse?: boolean;
showDivider?: boolean;
wrapText?: boolean;
id?: string;
}
declare const ListViewLabel: React.FC<ListViewLabelProps>;
export default ListViewLabel;