@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
85 lines (84 loc) • 3.52 kB
TypeScript
import { default as React, ComponentProps } from 'react';
import { RecipeVariantProps } from '../../../styled-system/css';
export declare const breadcrumbsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"link" | "item" | "icon" | "list" | "separator" | "root" | "ellipsis", {
size: {
medium: {
link: {
textStyle: "sd.system.typography.body.small_compact";
paddingInline: "sd.system.dimension.spacing.extraSmall";
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
minHeight: "sd.reference.dimension.scale.10";
_expanded: {
textStyle: "sd.system.typography.body.small_expanded";
};
};
separator: {
_expanded: {
textStyle: "sd.system.typography.body.small_expanded";
};
};
ellipsis: {
"& button": {
paddingInline: "sd.system.dimension.spacing.extraSmall";
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
minHeight: "sd.reference.dimension.scale.10";
};
};
icon: {
width: "sd.reference.dimension.scale.7";
height: "sd.reference.dimension.scale.7";
"& svg": {
width: "sd.reference.dimension.scale.7";
height: "sd.reference.dimension.scale.7";
};
};
};
small: {
link: {
textStyle: "sd.system.typography.label.medium_compact";
paddingInline: "sd.system.dimension.spacing.twoExtraSmall";
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
gap: "sd.system.dimension.spacing.twoExtraSmall";
minHeight: "sd.reference.dimension.scale.10";
_expanded: {
textStyle: "sd.system.typography.label.medium_expanded";
};
};
separator: {
_expanded: {
textStyle: "sd.system.typography.label.medium_expanded";
};
};
ellipsis: {
"& button": {
paddingInline: "sd.system.dimension.spacing.twoExtraSmall";
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
minHeight: "sd.reference.dimension.scale.10";
};
};
icon: {
width: "14px";
height: "14px";
"& svg": {
width: "14px";
height: "14px";
};
};
};
};
}>;
type BreadcrumbsVariantProps = RecipeVariantProps<typeof breadcrumbsStyle>;
export type BreadcrumbsProps = ComponentProps<"nav"> & BreadcrumbsVariantProps & {
separator?: "chevron" | "slash";
maxItems?: number;
itemsBeforeCollapse?: number;
itemsAfterCollapse?: number;
};
export type BreadcrumbItemProps = ComponentProps<"li"> & {
href?: string;
current?: boolean;
icon?: React.ReactElement;
};
export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;
export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
export {};